fix: use string union and add title for maxColumns (#611)

Author: dcshzj

apps/studio/src/components/PageEditor/constants.ts

@@ -65,6 +65,7 @@ export const DEFAULT_BLOCKS: Record<
     title: "This is an optional title of the Infocards component",
     subtitle: "This is an optional subtitle for the Infocards component",
     variant: "cardsWithImages",
+    maxColumns: "3",
     cards: [
       {
         title: "This is the first card",

packages/components/src/interfaces/complex/InfoCards.ts

@@ -24,6 +24,7 @@ const SingleCardNoImageSchema = Type.Object({
 })
 
 const SingleCardWithImageSchema = Type.Composite([
+  SingleCardNoImageSchema,
   Type.Object({
     imageUrl: Type.String({
       title: "Upload image",
@@ -52,7 +53,6 @@ const SingleCardWithImageSchema = Type.Composite([
         "Add a descriptive alternative text for this image. This helps visually impaired users to understand your image.",
     }),
   }),
-  SingleCardNoImageSchema,
 ])
 
 const InfoCardsBaseSchema = Type.Object({
@@ -70,11 +70,19 @@ const InfoCardsBaseSchema = Type.Object({
     }),
   ),
   maxColumns: Type.Optional(
-    Type.Union([Type.Literal(1), Type.Literal(2), Type.Literal(3)], {
-      title: "Maximum columns variant",
-      description:
-        "Controls the responsive behaviour regarding the number of columns that this component will expand to in different viewports",
-    }),
+    Type.Union(
+      [
+        Type.Literal("1", { title: "1 column" }),
+        Type.Literal("2", { title: "2 columns" }),
+        Type.Literal("3", { title: "3 columns" }),
+      ],
+      {
+        title: "Maximum columns variant",
+        description:
+          "Controls the responsive behaviour regarding the number of columns that this component will expand to in different viewports",
+        default: "3",
+      },
+    ),
   ),
 })
 

packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx

@@ -55,19 +55,19 @@ const createInfoCardsStyles = tv({
       },
     },
     maxColumns: {
-      1: {
+      "1": {
         grid: "",
       },
-      2: {
+      "2": {
         grid: "md:grid-cols-2",
       },
-      3: {
+      "3": {
         grid: "md:grid-cols-2 lg:grid-cols-3",
       },
     },
   },
   defaultVariants: {
-    maxColumns: 3,
+    maxColumns: "3",
     imageFit: "cover",
   },
 })

packages/components/src/templates/next/layouts/IndexPage/IndexPage.stories.tsx

@@ -125,7 +125,7 @@ export const WithSiderail: Story = {
       {
         type: "infocards",
         variant: "cardsWithoutImages",
-        maxColumns: 1,
+        maxColumns: "1",
         cards: [
           {
             title:
@@ -261,7 +261,7 @@ export const NoSiderail: Story = {
       {
         type: "infocards",
         variant: "cardsWithoutImages",
-        maxColumns: 1,
+        maxColumns: "1",
         cards: [
           {
             title: