Skip to content

Refactor media components to use AspectRatio wrapper #204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dmnktoe wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Refactor media components to use AspectRatio wrapper #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1135fa3
refactor: comprehensively refactor media components
claude Mar 20, 2026
7eccd5d
fix: add "3/4" to AspectRatio ratio type
claude Mar 20, 2026
e920d4f
fix: tighten Slideshow aspectRatio type to match Image/Video union
claude Mar 20, 2026
15b060a
fix: add "3/4" to Video aspectRatio type
claude Mar 20, 2026
057fc79
refactor: grid/grid-item system, unify spacing, fix aspectRatio types
claude Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 116 additions & 66 deletions packages/storyblok-sync/scripts/sync-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,22 @@ async function getSbContainerComponent(): Promise<StoryblokComponent> {
};
}

const COL_SPAN_OPTIONS = [
{ name: "1", value: "1" },
{ name: "2", value: "2" },
{ name: "3", value: "3" },
{ name: "4", value: "4" },
{ name: "5", value: "5" },
{ name: "6", value: "6" },
{ name: "7", value: "7" },
{ name: "8", value: "8" },
{ name: "9", value: "9" },
{ name: "10", value: "10" },
{ name: "11", value: "11" },
{ name: "12", value: "12" },
{ name: "Full", value: "full" },
];

async function getSbGridComponent(): Promise<StoryblokComponent> {
const layoutGroupUuid = await getComponentGroupUuid("Layout");

Expand All @@ -353,48 +369,89 @@ async function getSbGridComponent(): Promise<StoryblokComponent> {
icon: "block-grid",
color: "#4a5568",
schema: {
// ── Tab: Content ────────────────────────────────────────────────────────
"tab-content": {
type: "tab",
display_name: "Content",
pos: 0,
},
items: {
type: "bloks",
display_name: "Grid Items",
required: true,
restrict_components: true,
component_whitelist: [],
pos: 1,
},
// ── Tab: Layout ─────────────────────────────────────────────────────────
"tab-layout": {
type: "tab",
display_name: "Layout",
pos: 10,
},
columns: {
type: "option",
display_name: "Columns",
source: "internal",
datasource_slug: "grid-columns",
pos: 11,
},
columnsMd: {
type: "option",
display_name: "Columns (Tablet)",
source: "internal",
datasource_slug: "grid-columns",
pos: 12,
},
columnsLg: {
type: "option",
display_name: "Columns (Desktop)",
source: "internal",
datasource_slug: "grid-columns",
pos: 13,
},
boundingWidth: {
type: "option",
display_name: "Width",
default_value: "full",
options: [
{ name: "Full Width", value: "full" },
{ name: "Container", value: "container" },
],
pos: 14,
},
isList: {
type: "boolean",
display_name: "Render as List (<ul>)",
default_value: "false",
pos: 15,
},
// ── Tab: Gap & Alignment ─────────────────────────────────────────────────
"tab-gaps": {
type: "tab",
display_name: "Gap & Alignment",
pos: 20,
},
gap: {
type: "option",
display_name: "Gap",
source: "internal",
datasource_slug: "spacing-options",
pos: 21,
},
rowGap: {
type: "option",
display_name: "Row Gap",
source: "internal",
datasource_slug: "spacing-options",
pos: 22,
},
columnGap: {
type: "option",
display_name: "Column Gap",
source: "internal",
datasource_slug: "spacing-options",
pos: 23,
},
alignItems: {
type: "option",
Expand All @@ -405,6 +462,7 @@ async function getSbGridComponent(): Promise<StoryblokComponent> {
{ name: "End", value: "end" },
{ name: "Stretch", value: "stretch" },
],
pos: 24,
},
justifyItems: {
type: "option",
Expand All @@ -415,6 +473,7 @@ async function getSbGridComponent(): Promise<StoryblokComponent> {
{ name: "End", value: "end" },
{ name: "Stretch", value: "stretch" },
],
pos: 25,
},
justifyContent: {
type: "option",
Expand All @@ -427,6 +486,7 @@ async function getSbGridComponent(): Promise<StoryblokComponent> {
{ name: "Space Around", value: "space-around" },
{ name: "Space Evenly", value: "space-evenly" },
],
pos: 26,
},
autoFlow: {
type: "option",
Expand All @@ -437,44 +497,41 @@ async function getSbGridComponent(): Promise<StoryblokComponent> {
{ name: "Row Dense", value: "row dense" },
{ name: "Column Dense", value: "column dense" },
],
pos: 27,
},
boundingWidth: {
type: "option",
display_name: "Width",
default_value: "full",
options: [
{ name: "Full Width", value: "full" },
{ name: "Container", value: "container" },
],
// ── Tab: Spacing ─────────────────────────────────────────────────────────
"tab-spacing": {
type: "tab",
display_name: "Spacing",
pos: 30,
},
isList: {
type: "boolean",
display_name: "Render as List",
default_value: "false",
},
pt: {
spacingTop: {
type: "option",
display_name: "Padding Top",
display_name: "Spacing Top",
source: "internal",
datasource_slug: "spacing-options",
pos: 31,
},
pb: {
spacingBottom: {
type: "option",
display_name: "Padding Bottom",
display_name: "Spacing Bottom",
source: "internal",
datasource_slug: "spacing-options",
pos: 32,
},
mt: {
paddingTop: {
type: "option",
display_name: "Margin Top",
display_name: "Padding Top",
source: "internal",
datasource_slug: "spacing-options",
pos: 33,
},
mb: {
paddingBottom: {
type: "option",
display_name: "Margin Bottom",
display_name: "Padding Bottom",
source: "internal",
datasource_slug: "spacing-options",
pos: 34,
},
},
};
Expand All @@ -492,97 +549,90 @@ async function getSbGridItemComponent(): Promise<StoryblokComponent> {
icon: "block-square",
color: "#4a5568",
schema: {
// ── Tab: Content ────────────────────────────────────────────────────────
"tab-content": {
type: "tab",
display_name: "Content",
pos: 0,
},
content: {
type: "bloks",
display_name: "Content",
required: false,
restrict_components: true,
component_whitelist: [],
pos: 1,
},
// ── Tab: Column ──────────────────────────────────────────────────────────
"tab-column": {
type: "tab",
display_name: "Column",
pos: 10,
},
colSpan: {
type: "option",
display_name: "Column Span",
options: [
{ name: "1", value: "1" },
{ name: "2", value: "2" },
{ name: "3", value: "3" },
{ name: "4", value: "4" },
{ name: "5", value: "5" },
{ name: "6", value: "6" },
{ name: "7", value: "7" },
{ name: "8", value: "8" },
{ name: "9", value: "9" },
{ name: "10", value: "10" },
{ name: "11", value: "11" },
{ name: "12", value: "12" },
{ name: "Full", value: "full" },
],
options: COL_SPAN_OPTIONS,
pos: 11,
},
colSpanMd: {
type: "option",
display_name: "Column Span (Tablet)",
options: [
{ name: "1", value: "1" },
{ name: "2", value: "2" },
{ name: "3", value: "3" },
{ name: "4", value: "4" },
{ name: "5", value: "5" },
{ name: "6", value: "6" },
{ name: "7", value: "7" },
{ name: "8", value: "8" },
{ name: "9", value: "9" },
{ name: "10", value: "10" },
{ name: "11", value: "11" },
{ name: "12", value: "12" },
{ name: "Full", value: "full" },
],
options: COL_SPAN_OPTIONS,
pos: 12,
},
colSpanLg: {
type: "option",
display_name: "Column Span (Desktop)",
options: [
{ name: "1", value: "1" },
{ name: "2", value: "2" },
{ name: "3", value: "3" },
{ name: "4", value: "4" },
{ name: "5", value: "5" },
{ name: "6", value: "6" },
{ name: "7", value: "7" },
{ name: "8", value: "8" },
{ name: "9", value: "9" },
{ name: "10", value: "10" },
{ name: "11", value: "11" },
{ name: "12", value: "12" },
{ name: "Full", value: "full" },
],
options: COL_SPAN_OPTIONS,
pos: 13,
},
// ── Tab: Row ─────────────────────────────────────────────────────────────
"tab-row": {
type: "tab",
display_name: "Row",
pos: 20,
},
rowSpan: {
type: "number",
display_name: "Row Span",
pos: 21,
},
rowSpanMd: {
type: "number",
display_name: "Row Span (Tablet)",
pos: 22,
},
rowSpanLg: {
type: "number",
display_name: "Row Span (Desktop)",
pos: 23,
},
// ── Tab: Position ────────────────────────────────────────────────────────
"tab-position": {
type: "tab",
display_name: "Position",
pos: 30,
},
colStart: {
type: "number",
display_name: "Column Start",
pos: 31,
},
colEnd: {
type: "number",
display_name: "Column End",
pos: 32,
},
rowStart: {
type: "number",
display_name: "Row Start",
pos: 33,
},
rowEnd: {
type: "number",
display_name: "Row End",
pos: 34,
},
},
};
Expand Down
Loading
Loading