@superblocksteam/vite-plugin-file-sync 2.0.162-next.2 → 2.0.163-next.0

package/dist/migration-templates/app-fullstack/client/components/ui/pagination.tsx

@@ -130,36 +130,16 @@ function PaginationEllipsis({
 const paginationLinkPropertiesDefinition: PropertiesPanelDefinition<PaginationLinkProps> =
   {
     general: Section.category(PropsCategory.Content).children({
-      isActive: Prop.boolean().propertiesPanel({
-        label: "Is active",
-        description: "Whether the link is active",
-        controlType: "SWITCH",
-      }),
+      isActive: Prop.boolean(),
     }),
     appearance: Section.category(PropsCategory.Appearance).children({
-      size: Prop.string<"sm" | "default" | "lg">().propertiesPanel({
-        label: "Size",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "Small", value: "sm" },
-          { label: "Default", value: "default" },
-          { label: "Large", value: "lg" },
-        ],
-        description: "Size variant of the pagination link",
-      }),
+      size: Prop.string<"sm" | "default" | "lg">(),
     }),
     interaction: Section.category(PropsCategory.Interaction).children({
-      disabled: Prop.boolean().propertiesPanel({
-        label: "Disabled",
-        description: "Whether the link is disabled",
-        controlType: "SWITCH",
-      }),
+      disabled: Prop.boolean(),
     }),
     events: Section.category(PropsCategory.EventHandlers).children({
-      onClick: Prop.eventHandler().propertiesPanel({
-        label: "onClick",
-        description: "Triggered when the link is clicked",
-      }),
+      onClick: Prop.eventHandler(),
     }),
   };
 

package/dist/migration-templates/app-fullstack/client/components/ui/pie-chart.tsx

@@ -138,157 +138,43 @@ const PieChart = ({ className, ...props }: ComponentProps) => {
 
 registerComponent(PieChart, {
   general: Section.category(PropsCategory.Content).children({
-    data: Prop.array<any>()
-      .propertiesPanel({
-        label: "Data",
-        description: "Array of data objects for the pie chart",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of objects where each object represents a pie slice. Each object should have properties for the slice name/label and numeric value. Example: [{name: 'Chrome', value: 275, color: '#4285F4'}, {name: 'Safari', value: 200}]. The nameKey, valueKey, and colorKey props specify which properties to use.",
-      }),
-    nameKey: Prop.string()
-      .propertiesPanel({
-        label: "Name data key",
-        description: " name for slice names/identifiers",
-        placeholder: "name",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          return Object.keys(this.data[0]).map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "The property name in your data objects that contains unique identifiers for each slice. Used to generate consistent colors and match data across renders.",
-      }),
-    valueKey: Prop.string()
-      .propertiesPanel({
-        label: "Value data key",
-        description: " name for slice values",
-        placeholder: "value",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          return Object.keys(this.data[0]).map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "The property name in your data objects that contains the numeric values for each slice. These values determine slice sizes and are used in calculations for percentages and display.",
-      }),
-    labelKey: Prop.string()
-      .propertiesPanel({
-        label: "Label data key",
-        description: " name for display labels (optional, defaults to nameKey)",
-        placeholder: "label",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          return Object.keys(this.data[0]).map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "Optional property name for human-readable labels shown in tooltips and legends. If not specified, the nameKey value is used as the label.",
-      }),
-    colorKey: Prop.string()
-      .propertiesPanel({
-        label: "Color data key",
-        description: " name for slice colors (optional)",
-        placeholder: "color",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          return Object.keys(this.data[0]).map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "Optional property name in your data objects that contains color values (hex, rgb, or CSS variable). If not specified, colors are auto-assigned from the theme.",
-      }),
-    colors: Prop.array<string>()
-      .propertiesPanel({
-        label: "Colors",
-        description: "Array of colors to use for slices (optional)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional array of color values to use for slices in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
-      }),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    startAngle: Prop.number().propertiesPanel({
-      label: "Start angle",
-      description: "Start angle in degrees (90 = top, 0 = right)",
-      visibility: "SHOW_NAME",
-      defaultOnAdd: 90,
+    data: Prop.array<any>().docs({
+      description:
+        "Array of objects where each object represents a pie slice. Each object should have properties for the slice name/label and numeric value. Example: [{name: 'Chrome', value: 275, color: '#4285F4'}, {name: 'Safari', value: 200}]. The nameKey, valueKey, and colorKey props specify which properties to use.",
     }),
-    endAngle: Prop.number().propertiesPanel({
-      label: "End angle",
-      description: "End angle in degrees (450 = full circle from 90°)",
-      visibility: "SHOW_NAME",
-      defaultOnAdd: 450,
+    nameKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains unique identifiers for each slice. Used to generate consistent colors and match data across renders.",
     }),
-    showTooltip: Prop.boolean().propertiesPanel({
-      label: "Show tooltip",
-      description: "Display tooltip on hover",
-      controlType: "SWITCH",
+    valueKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains the numeric values for each slice. These values determine slice sizes and are used in calculations for percentages and display.",
     }),
-    showLegend: Prop.boolean().propertiesPanel({
-      label: "Show legend",
-      description: "Display chart legend",
-      controlType: "SWITCH",
+    labelKey: Prop.string().docs({
+      description:
+        "Optional property name for human-readable labels shown in tooltips and legends. If not specified, the nameKey value is used as the label.",
     }),
-    showLabels: Prop.boolean().propertiesPanel({
-      label: "Show labels",
-      description: "Display value labels on pie slices",
-      controlType: "SWITCH",
+    colorKey: Prop.string().docs({
+      description:
+        "Optional property name in your data objects that contains color values (hex, rgb, or CSS variable). If not specified, colors are auto-assigned from the theme.",
+    }),
+    colors: Prop.array<string>().docs({
+      description:
+        "Optional array of color values to use for slices in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
     }),
   }),
+  appearance: Section.category(PropsCategory.Appearance).children({
+    startAngle: Prop.number(),
+    endAngle: Prop.number(),
+    showTooltip: Prop.boolean(),
+    showLegend: Prop.boolean(),
+    showLabels: Prop.boolean(),
+  }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    enableAnimation: Prop.boolean().propertiesPanel({
-      label: "Enable animation",
-      description: "Enable chart animations on load",
-      controlType: "SWITCH",
-    }),
+    enableAnimation: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onDataClick: Prop.eventHandler().propertiesPanel({
-      label: "onDataClick",
-      description: "Triggered when a pie slice is clicked",
-      computedArgs: [
-        {
-          name: "data",
-          type: "object",
-          description: "The data point that was clicked",
-        },
-      ],
-    }),
+    onDataClick: Prop.eventHandler(),
   }),
 }).editorConfig({ icon: "chart" });
 

package/dist/migration-templates/app-fullstack/client/components/ui/popover.tsx

@@ -59,38 +59,15 @@ const popoverPropertiesDefinition: PropertiesPanelDefinition<
   React.ComponentPropsWithoutRef<typeof Popover>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    open: Prop.boolean().propertiesPanel({
-      label: "Open",
-      controlType: "SWITCH",
-      description:
-        "The controlled open state of the popover. Must be used in conjunction with `onOpenChange`.",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
+    open: Prop.boolean(),
     children: Prop.jsx(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    defaultOpen: Prop.boolean().propertiesPanel({
-      label: "Default open",
-      description: "Whether the popover is open by default",
-    }),
-    modal: Prop.boolean().propertiesPanel({
-      label: "Modal",
-      description:
-        "Whether the popover should be modal, trapping focus and blocking interaction with other elements.",
-    }),
+    defaultOpen: Prop.boolean(),
+    modal: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onOpenChange: Prop.eventHandler().propertiesPanel({
-      label: "onOpenChange",
-      computedArgs: [
-        {
-          name: "open",
-          type: "boolean",
-          description: "Whether the popover is open",
-        },
-      ],
-    }),
+    onOpenChange: Prop.eventHandler(),
   }),
 };
 
@@ -110,40 +87,11 @@ const popoverContentPropertiesDefinition: PropertiesPanelDefinition<
     children: Prop.jsx(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    side: Prop.string<"top" | "right" | "bottom" | "left">().propertiesPanel({
-      label: "Side",
-      controlType: "DROP_DOWN",
-      description: "The preferred side of the trigger to render against",
-      options: [
-        { label: "Top", value: "top" },
-        { label: "Right", value: "right" },
-        { label: "Bottom", value: "bottom" },
-        { label: "Left", value: "left" },
-      ],
-    }),
-    align: Prop.string<"start" | "center" | "end">().propertiesPanel({
-      label: "Align",
-      controlType: "DROP_DOWN",
-      description: "The preferred alignment against the trigger",
-      options: [
-        { label: "Start", value: "start" },
-        { label: "Center", value: "center" },
-        { label: "End", value: "end" },
-      ],
-    }),
-    sideOffset: Prop.number().propertiesPanel({
-      label: "Side offset",
-      description: "The distance in pixels from the trigger",
-    }),
-    alignOffset: Prop.number().propertiesPanel({
-      label: "Align offset",
-      description: "An offset in pixels from the alignment axis",
-    }),
-    avoidCollisions: Prop.boolean().propertiesPanel({
-      label: "Avoid collisions",
-      description:
-        "Whether the content should avoid collisions with other elements",
-    }),
+    side: Prop.string<"top" | "right" | "bottom" | "left">(),
+    align: Prop.string<"start" | "center" | "end">(),
+    sideOffset: Prop.number(),
+    alignOffset: Prop.number(),
+    avoidCollisions: Prop.boolean(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/progress.tsx

@@ -41,17 +41,8 @@ type ProgressProps = React.ComponentProps<typeof Progress>;
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<ProgressProps> = {
   general: Section.category(PropsCategory.Content).children({
-    value: Prop.number().propertiesPanel({
-      label: "Value",
-      controlType: "INPUT_TEXT",
-      description: "The current progress value (0-100)",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
-    max: Prop.number().propertiesPanel({
-      label: "Max value",
-      description: "The maximum progress value",
-    }),
+    value: Prop.number(),
+    max: Prop.number(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/radar-chart.tsx

@@ -198,188 +198,54 @@ const RadarChart = ({ className, ...props }: ComponentProps) => {
 
 registerComponent(RadarChart, {
   general: Section.category(PropsCategory.Content).children({
-    data: Prop.array<any>()
-      .propertiesPanel({
-        label: "Data",
-        description: "Array of data objects for the radar chart",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of objects where each object represents a radar point with category and value data. Each object should contain the categoryKey property and properties for each data series defined in categories. Radar charts are ideal for multi-dimensional data comparison. Example: [{category: 'Speed', performance: 85, quality: 78}, {category: 'Efficiency', performance: 92, quality: 85}]. Multiple value properties create multiple overlapping radar shapes for comparison.",
-      }),
-    categoryKey: Prop.string()
-      .propertiesPanel({
-        label: "Category data key",
-        description: " name for category/axis labels",
-        placeholder: "category",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          return Object.keys(this.data[0]).map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "The property name in your data objects that contains the category labels for each radar axis point. These categories form the angular (perimeter) axis of the radar chart, with labels positioned around the circle. Should represent the dimensions or criteria being measured (e.g., 'Speed', 'Quality', 'Price').",
-      }),
-    categories: Prop.array<string>()
-      .propertiesPanel({
-        label: "Categories",
-        description:
-          "Array of data keys to plot as radar series (optional, auto-detects numeric properties if not provided)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of property names from your data objects to plot as separate radar series. Example: ['performance', 'quality'] will create two overlapping radar shapes. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding categoryKey) from the data.",
-      }),
-    seriesLabels: Prop.any<Record<string, string>>()
-      .propertiesPanel({
-        label: "Series labels",
-        description:
-          "Optional labels for series (optional, defaults to category names)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional object mapping category keys to display labels. Example: {performance: 'Performance Score', quality: 'Quality Score'}. If not provided, the category keys are used as labels.",
-      }),
-    colors: Prop.array<string>()
-      .propertiesPanel({
-        label: "Colors",
-        description: "Array of colors for series (optional)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
-      }),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    showGrid: Prop.boolean().propertiesPanel({
-      label: "Show grid",
-      description: "Display chart grid lines",
-      controlType: "SWITCH",
-    }),
-    gridType: Prop.string<"polygon" | "circle">()
-      .propertiesPanel({
-        isVisible: function (this: any) {
-          return this.showGrid;
-        },
-        label: "Grid type",
-        description: "Type of grid to display",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "Polygon", value: "polygon" },
-          { label: "Circle", value: "circle" },
-        ],
-      })
-      .docs({
-        description:
-          "Visual style of the radar grid. 'polygon' creates straight-line grid segments connecting angular points (traditional radar appearance). 'circle' creates concentric circular grid lines. Polygon grids emphasize the multi-dimensional nature of data, while circular grids provide smoother visual flow.",
-      }),
-    showAngleAxis: Prop.boolean().propertiesPanel({
-      label: "Show angle axis",
-      description: "Display category labels around the perimeter",
-      controlType: "SWITCH",
-    }),
-    showRadiusAxis: Prop.boolean().propertiesPanel({
-      label: "Show radius axis",
-      description: "Display radial axis with value labels",
-      controlType: "SWITCH",
-    }),
-    radiusAxisTickCount: Prop.number().propertiesPanel({
-      label: "Radius axis tick count",
-      description: "Number of tick marks on radius axis",
-      isVisible: function (this: any) {
-        return this.showRadiusAxis;
-      },
-    }),
-    radiusDomain: Prop.any<[number, number | "auto"]>()
-      .propertiesPanel({
-        label: "Radius domain",
-        description:
-          "Min and max values for radius axis (e.g., [0, 100] or [0, 'auto'])",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Range of values for the radial (distance from center) axis. Array with [min, max] values. Use numbers for fixed ranges like [0, 100] for percentage scales, or [0, 'auto'] to automatically determine maximum based on data. The radial axis determines how far each data point extends from the center.",
-      }),
-    showTooltip: Prop.boolean().propertiesPanel({
-      label: "Show tooltip",
-      description: "Display tooltip on hover",
-      controlType: "SWITCH",
+    data: Prop.array<any>().docs({
+      description:
+        "Array of objects where each object represents a radar point with category and value data. Each object should contain the categoryKey property and properties for each data series defined in categories. Radar charts are ideal for multi-dimensional data comparison. Example: [{category: 'Speed', performance: 85, quality: 78}, {category: 'Efficiency', performance: 92, quality: 85}]. Multiple value properties create multiple overlapping radar shapes for comparison.",
     }),
-    showLegend: Prop.boolean().propertiesPanel({
-      label: "Show legend",
-      description: "Display chart legend",
-      controlType: "SWITCH",
+    categoryKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains the category labels for each radar axis point. These categories form the angular (perimeter) axis of the radar chart, with labels positioned around the circle. Should represent the dimensions or criteria being measured (e.g., 'Speed', 'Quality', 'Price').",
     }),
-    fillRadar: Prop.boolean().propertiesPanel({
-      label: "Fill radar",
-      description: "Fill the radar areas with color",
-      controlType: "SWITCH",
+    categories: Prop.array<string>().docs({
+      description:
+        "Array of property names from your data objects to plot as separate radar series. Example: ['performance', 'quality'] will create two overlapping radar shapes. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding categoryKey) from the data.",
     }),
-    fillOpacity: Prop.number().propertiesPanel({
-      label: "Fill opacity",
-      description: "Opacity of the radar fill (0-1)",
-      isVisible: function (this: any) {
-        return this.fillRadar;
-      },
+    seriesLabels: Prop.any<Record<string, string>>().docs({
+      description:
+        "Optional object mapping category keys to display labels. Example: {performance: 'Performance Score', quality: 'Quality Score'}. If not provided, the category keys are used as labels.",
     }),
-    strokeWidth: Prop.number().propertiesPanel({
-      label: "Stroke width",
-      description: "Width of the radar stroke lines",
+    colors: Prop.array<string>().docs({
+      description:
+        "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
     }),
-    showDots: Prop.boolean().propertiesPanel({
-      label: "Show dots",
-      description: "Display dots at data points",
-      controlType: "SWITCH",
-    }),
-    dotSize: Prop.number().propertiesPanel({
-      label: "Dot size",
-      description: "Size of dots at data points",
-      isVisible: function (this: any) {
-        return this.showDots;
-      },
+  }),
+  appearance: Section.category(PropsCategory.Appearance).children({
+    showGrid: Prop.boolean(),
+    gridType: Prop.string<"polygon" | "circle">().docs({
+      description:
+        "Visual style of the radar grid. 'polygon' creates straight-line grid segments connecting angular points (traditional radar appearance). 'circle' creates concentric circular grid lines. Polygon grids emphasize the multi-dimensional nature of data, while circular grids provide smoother visual flow.",
     }),
-    showPointLabels: Prop.boolean().propertiesPanel({
-      label: "Show point labels",
-      description: "Display value labels at data points",
-      controlType: "SWITCH",
+    showAngleAxis: Prop.boolean(),
+    showRadiusAxis: Prop.boolean(),
+    radiusAxisTickCount: Prop.number(),
+    radiusDomain: Prop.any<[number, number | "auto"]>().docs({
+      description:
+        "Range of values for the radial (distance from center) axis. Array with [min, max] values. Use numbers for fixed ranges like [0, 100] for percentage scales, or [0, 'auto'] to automatically determine maximum based on data. The radial axis determines how far each data point extends from the center.",
     }),
+    showTooltip: Prop.boolean(),
+    showLegend: Prop.boolean(),
+    fillRadar: Prop.boolean(),
+    fillOpacity: Prop.number(),
+    strokeWidth: Prop.number(),
+    showDots: Prop.boolean(),
+    dotSize: Prop.number(),
+    showPointLabels: Prop.boolean(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    enableAnimation: Prop.boolean().propertiesPanel({
-      label: "Enable animation",
-      description: "Enable chart animations on load",
-      controlType: "SWITCH",
-    }),
+    enableAnimation: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onDataClick: Prop.eventHandler().propertiesPanel({
-      label: "onDataClick",
-      description: "Triggered when a radar segment is clicked",
-      computedArgs: [
-        {
-          name: "data",
-          type: "object",
-          description: "The data point that was clicked",
-        },
-      ],
-    }),
+    onDataClick: Prop.eventHandler(),
   }),
 }).editorConfig({ icon: "chart" });