chore: upgrade @makeswift/runtime to 0.23.1

bigcommerce · Jan 24, 2025 · 6fa9baa · 6fa9baa
1 parent 66046b6
commit 6fa9baa
Show file tree

Hide file tree

Showing 26 changed files with 190 additions and 178 deletions.
diff --git a/core/lib/makeswift/components/accordions/accordions.makeswift.tsx b/core/lib/makeswift/components/accordions/accordions.makeswift.tsx
@@ -1,4 +1,4 @@
-import { List, Select, Shape, Slot, Style, TextInput } from '@makeswift/runtime/controls';
+import { Group, List, Select, Slot, Style, TextInput } from '@makeswift/runtime/controls';
 
 import { Accordion, Accordions } from '@/vibes/soul/primitives/accordions';
 import { runtime } from '~/lib/makeswift/runtime';
@@ -42,8 +42,9 @@ runtime.registerComponent(
       className: Style(),
       accordions: List({
         label: 'Accordions',
-        type: Shape({
-          type: {
+        type: Group({
+          label: 'Accordion item',
+          props: {
             title: TextInput({ label: 'Title', defaultValue: 'This is an accordion title' }),
             children: Slot(),
           },

diff --git a/core/lib/makeswift/components/card-carousel/card-carousel.makeswift.tsx b/core/lib/makeswift/components/card-carousel/card-carousel.makeswift.tsx
@@ -1,10 +1,10 @@
 import {
   Checkbox,
+  Group,
   Image,
   Link,
   List,
   Select,
-  Shape,
   Style,
   TextInput,
 } from '@makeswift/runtime/controls';
@@ -49,8 +49,9 @@ runtime.registerComponent(
       className: Style(),
       cards: List({
         label: 'Cards',
-        type: Shape({
-          type: {
+        type: Group({
+          label: 'Card',
+          props: {
             title: TextInput({ label: 'Title', defaultValue: 'Title' }),
             imageSrc: Image({ label: 'Image' }),
             imageAlt: TextInput({ label: 'Image Alt', defaultValue: 'Card image' }),

diff --git a/core/lib/makeswift/components/carousel/carousel.makeswift.tsx b/core/lib/makeswift/components/carousel/carousel.makeswift.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, List, Select, Shape, Slot, Style, TextInput } from '@makeswift/runtime/controls';
+import { Checkbox, Group, List, Select, Slot, Style, TextInput } from '@makeswift/runtime/controls';
 
 import {
   Carousel,
@@ -64,8 +64,9 @@ runtime.registerComponent(
       className: Style(),
       slides: List({
         label: 'Items',
-        type: Shape({
-          type: {
+        type: Group({
+          label: 'Item',
+          props: {
             name: TextInput({ label: 'Name', defaultValue: '' }),
             children: Slot(),
           },

diff --git a/core/lib/makeswift/components/product-card/product-card.makeswift.tsx b/core/lib/makeswift/components/product-card/product-card.makeswift.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Checkbox, Combobox, Select, Shape, Style, TextInput } from '@makeswift/runtime/controls';
+import { Checkbox, Combobox, Group, Select, Style, TextInput } from '@makeswift/runtime/controls';
 import useSWR from 'swr';
 
 import { runtime } from '~/lib/makeswift/runtime';
@@ -81,8 +81,9 @@ runtime.registerComponent(MakeswiftProductCard, {
       ],
       defaultValue: 'light',
     }),
-    badge: Shape({
-      type: {
+    badge: Group({
+      label: 'Badge',
+      props: {
         show: Checkbox({ label: 'Show badge', defaultValue: true }),
         text: TextInput({ label: 'Badge text', defaultValue: 'New' }),
       },

diff --git a/core/lib/makeswift/components/product-detail/register.ts b/core/lib/makeswift/components/product-detail/register.ts
@@ -1,14 +1,14 @@
-import { List, Select, Shape, Slot, TextArea, TextInput } from '@makeswift/runtime/controls';
+import { Group, List, Select, Slot, TextArea, TextInput } from '@makeswift/runtime/controls';
 
 import { runtime } from '~/lib/makeswift/runtime';
 
 import { DescriptionSource, MakeswiftProductDetail } from './client';
 
 export const COMPONENT_TYPE = 'catalyst-makeswift-product-detail-description';
 
-const description = Shape({
+const description = Group({
   label: 'Description',
-  type: {
+  props: {
     source: Select({
       label: 'Source',
       options: [
@@ -33,9 +33,9 @@ runtime.registerComponent(MakeswiftProductDetail, {
     description,
     accordions: List({
       label: 'Product info',
-      type: Shape({
+      type: Group({
         label: 'Product info section',
-        type: {
+        props: {
           title: TextInput({ label: 'Title', defaultValue: 'Section' }),
           content: Slot(),
         },

diff --git a/core/lib/makeswift/components/products-carousel/products-carousel.makeswift.tsx b/core/lib/makeswift/components/products-carousel/products-carousel.makeswift.tsx
@@ -3,10 +3,10 @@
 import {
   Checkbox,
   Combobox,
+  Group,
   List,
   Number,
   Select,
-  Shape,
   Style,
   TextInput,
 } from '@makeswift/runtime/controls';
@@ -85,8 +85,9 @@ runtime.registerComponent(
       limit: Number({ label: 'Max collection items', defaultValue: 12 }),
       additionalProducts: List({
         label: 'Additional products',
-        type: Shape({
-          type: {
+        type: Group({
+          label: 'Product',
+          props: {
             title: TextInput({ label: 'Title', defaultValue: 'Product title' }),
             entityId: Combobox({
               label: 'Product',

diff --git a/core/lib/makeswift/components/products-list/products-list.makeswift.tsx b/core/lib/makeswift/components/products-list/products-list.makeswift.tsx
@@ -2,10 +2,10 @@
 
 import {
   Combobox,
+  Group,
   List,
   Number,
   Select,
-  Shape,
   Style,
   TextInput,
 } from '@makeswift/runtime/controls';
@@ -70,8 +70,9 @@ runtime.registerComponent(
       limit: Number({ label: 'Max collection items', defaultValue: 12 }),
       additionalProducts: List({
         label: 'Additional products',
-        type: Shape({
-          type: {
+        type: Group({
+          label: 'Product',
+          props: {
             title: TextInput({ label: 'Title', defaultValue: 'Product title' }),
             entityId: Combobox({
               label: 'Product',

diff --git a/core/lib/makeswift/components/site-footer/site-footer.makeswift.tsx b/core/lib/makeswift/components/site-footer/site-footer.makeswift.tsx
@@ -1,15 +1,15 @@
-import { Checkbox, Image, Link, List, Number, Shape, TextInput } from '@makeswift/runtime/controls';
+import { Checkbox, Group, Image, Link, List, Number, TextInput } from '@makeswift/runtime/controls';
 
 import { runtime } from '~/lib/makeswift/runtime';
 
 import { MakeswiftFooter } from './site-footer.client';
 
 export const COMPONENT_TYPE = 'catalyst-makeswift-footer';
 
-const logo = Shape({
+const logo = Group({
   label: 'Logo',
-  layout: Shape.Layout.Popover,
-  type: {
+  preferredLayout: Group.Layout.Popover,
+  props: {
     show: Checkbox({ label: 'Show logo', defaultValue: true }),
     src: Image({ label: 'Logo' }),
     alt: TextInput({ label: 'Alt text', defaultValue: 'Logo alt' }),
@@ -20,9 +20,9 @@ const logo = Shape({
 
 const links = List({
   label: 'Links',
-  type: Shape({
+  type: Group({
     label: 'Link',
-    type: {
+    props: {
       label: TextInput({ label: 'Text', defaultValue: 'Text' }),
       link: Link({ label: 'URL' }),
     },
@@ -38,9 +38,9 @@ runtime.registerComponent(MakeswiftFooter, {
     logo,
     sections: List({
       label: 'Sections',
-      type: Shape({
+      type: Group({
         label: 'Section',
-        type: {
+        props: {
           title: TextInput({ label: 'Title', defaultValue: 'Section' }),
           links,
         },

diff --git a/core/lib/makeswift/components/site-header/site-header.makeswift.tsx b/core/lib/makeswift/components/site-header/site-header.makeswift.tsx
@@ -1,11 +1,11 @@
 import {
   Checkbox,
+  Group,
   Image,
   Link,
   List,
   Number,
   Select,
-  Shape,
   Slot,
   TextInput,
 } from '@makeswift/runtime/controls';
@@ -16,10 +16,10 @@ import { MakeswiftHeader } from './site-header.client';
 
 export const COMPONENT_TYPE = 'catalyst-makeswift-header';
 
-const banner = Shape({
+const banner = Group({
   label: 'Banner',
-  layout: Shape.Layout.Popover,
-  type: {
+  preferredLayout: Group.Layout.Popover,
+  props: {
     show: Checkbox({ label: 'Show banner', defaultValue: false }),
     allowClose: Checkbox({ label: 'Allow banner to close', defaultValue: true }),
     id: TextInput({ label: 'Banner ID', defaultValue: 'black_friday_2025' }),
@@ -34,20 +34,20 @@ const logoGroup = (
     height: number;
   },
 ) =>
-  Shape({
+  Group({
     label,
-    type: {
+    props: {
       src: Image({ label: 'Logo' }),
       alt: TextInput({ label: 'Alt text', defaultValue: 'Logo alt' }),
       width: Number({ label: 'Max width', suffix: 'px', defaultValue: defaults.width }),
       height: Number({ label: 'Max height', suffix: 'px', defaultValue: defaults.height }),
     },
   });
 
-const logo = Shape({
+const logo = Group({
   label: 'Logo',
-  layout: Shape.Layout.Popover,
-  type: {
+  preferredLayout: Group.Layout.Popover,
+  props: {
     desktop: logoGroup('Desktop', { width: 200, height: 40 }),
     mobile: logoGroup('Mobile', { width: 100, height: 40 }),
     link: Link({ label: 'Logo link' }),
@@ -56,9 +56,9 @@ const logo = Shape({
 
 const links = List({
   label: 'Links',
-  type: Shape({
+  type: Group({
     label: 'Link',
-    type: {
+    props: {
       label: TextInput({ label: 'Text', defaultValue: 'Text' }),
       link: Link({ label: 'URL' }),
     },
@@ -68,9 +68,9 @@ const links = List({
 
 const groups = List({
   label: 'Groups',
-  type: Shape({
+  type: Group({
     label: 'Link group',
-    type: {
+    props: {
       label: TextInput({ label: 'Text', defaultValue: 'Text' }),
       link: Link({ label: 'URL' }),
       links,
@@ -88,9 +88,9 @@ runtime.registerComponent(MakeswiftHeader, {
     logo,
     links: List({
       label: 'Additional links',
-      type: Shape({
+      type: Group({
         label: 'Link',
-        type: {
+        props: {
           label: TextInput({ label: 'Text', defaultValue: 'Text' }),
           link: Link({ label: 'URL' }),
           groups,

diff --git a/core/lib/makeswift/components/site-theme/components/accordion.ts b/core/lib/makeswift/components/site-theme/components/accordion.ts
@@ -1,4 +1,4 @@
-import { Color, Shape } from '@makeswift/runtime/controls';
+import { Color, Group } from '@makeswift/runtime/controls';
 
 import { FontFamily } from '~/lib/makeswift/controls/font-tokens';
 import { hsl } from '~/lib/makeswift/utils/color';
@@ -15,10 +15,10 @@ const colorGroup = (
     contentText: string;
   },
 ) =>
-  Shape({
+  Group({
     label,
-    layout: Shape.Layout.Inline,
-    type: {
+    preferredLayout: Group.Layout.Inline,
+    props: {
       titleText: Color({ label: 'Title text', defaultValue: defaults.titleText }),
       titleTextHover: Color({ label: 'Title text hover', defaultValue: defaults.titleTextHover }),
       titleIcon: Color({ label: 'Title icon', defaultValue: defaults.titleIcon }),
@@ -27,10 +27,10 @@ const colorGroup = (
     },
   });
 
-export const accordion = Shape({
+export const accordion = Group({
   label: 'Accordion',
-  layout: Shape.Layout.Popover,
-  type: {
+  preferredLayout: Group.Layout.Popover,
+  props: {
     titleFontFamily: FontFamily({ label: 'Title font', defaultValue: FontFamily.Accent }),
     contentFontFamily: FontFamily({ label: 'Content font', defaultValue: FontFamily.Body }),
     light: colorGroup('Light', {

diff --git a/core/lib/makeswift/components/site-theme/components/button.ts b/core/lib/makeswift/components/site-theme/components/button.ts
@@ -1,4 +1,4 @@
-import { Color, Shape } from '@makeswift/runtime/controls';
+import { Color, Group } from '@makeswift/runtime/controls';
 
 import { FontFamily } from '~/lib/makeswift/controls/font-tokens';
 import { hsl } from '~/lib/makeswift/utils/color';
@@ -14,21 +14,21 @@ const colorGroup = (
     border: string;
   },
 ) =>
-  Shape({
+  Group({
     label,
-    layout: Shape.Layout.Inline,
-    type: {
+    preferredLayout: Group.Layout.Inline,
+    props: {
       background: Color({ label: 'Background', defaultValue: defaults.background }),
       backgroundHover: Color({ label: 'Background hover', defaultValue: defaults.backgroundHover }),
       foreground: Color({ label: 'Foreground', defaultValue: defaults.foreground }),
       border: Color({ label: 'Border', defaultValue: defaults.border }),
     },
   });
 
-export const button = Shape({
+export const button = Group({
   label: 'Button',
-  layout: Shape.Layout.Popover,
-  type: {
+  preferredLayout: Group.Layout.Popover,
+  props: {
     fontFamily: FontFamily({ label: 'Font', defaultValue: FontFamily.Body }),
     primary: colorGroup('Primary', {
       background: hsl(colors.primary),

diff --git a/core/lib/makeswift/components/site-theme/components/card.ts b/core/lib/makeswift/components/site-theme/components/card.ts
@@ -1,4 +1,4 @@
-import { Color, Number, Shape } from '@makeswift/runtime/controls';
+import { Color, Group, Number } from '@makeswift/runtime/controls';
 
 import { hsl } from '~/lib/makeswift/utils/color';
 
@@ -12,20 +12,20 @@ const colorGroup = (
     icon: string;
   },
 ) =>
-  Shape({
+  Group({
     label,
-    layout: Shape.Layout.Inline,
-    type: {
+    preferredLayout: Group.Layout.Inline,
+    props: {
       background: Color({ label: 'Background', defaultValue: defaults.background }),
       text: Color({ label: 'Text', defaultValue: defaults.text }),
       icon: Color({ label: 'Icon', defaultValue: defaults.icon }),
     },
   });
 
-export const card = Shape({
+export const card = Group({
   label: 'Card',
-  layout: Shape.Layout.Popover,
-  type: {
+  preferredLayout: Group.Layout.Popover,
+  props: {
     borderRadius: Number({ label: 'Border radius', suffix: 'px', defaultValue: 16 }),
     focus: Color({ label: 'Focus', defaultValue: hsl(colors.primary) }),
     light: colorGroup('Light', {