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

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

@@ -87,81 +87,22 @@ type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<ButtonProps> = {
   general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx().propertiesPanel({
-      label: "Text",
-    }),
+    children: Prop.jsx(),
   }),
 
   appearance: Section.category(PropsCategory.Appearance).children({
     variant: Prop.string<
       "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
-    >().propertiesPanel({
-      label: "Variant",
-      controlType: "DROP_DOWN",
-      options: [
-        {
-          label: "Default",
-          value: "default",
-        },
-        {
-          label: "Destructive",
-          value: "destructive",
-        },
-        {
-          label: "Outline",
-          value: "outline",
-        },
-        {
-          label: "Secondary",
-          value: "secondary",
-        },
-        {
-          label: "Ghost",
-          value: "ghost",
-        },
-        {
-          label: "Link",
-          value: "link",
-        },
-      ],
-    }),
-    size: Prop.string<"default" | "sm" | "lg" | "icon">().propertiesPanel({
-      label: "Size",
-      controlType: "DROP_DOWN",
-      options: [
-        {
-          label: "Default",
-          value: "default",
-        },
-        {
-          label: "Small",
-          value: "sm",
-        },
-        {
-          label: "Large",
-          value: "lg",
-        },
-        {
-          label: "Icon",
-          value: "icon",
-        },
-      ],
-    }),
+    >(),
+    size: Prop.string<"default" | "sm" | "lg" | "icon">(),
   }),
 
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      description: "Whether the button is disabled",
-    }),
+    disabled: Prop.boolean(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler().propertiesPanel({
-      label: "onClick",
-      description: "Triggered when the button is clicked",
-    }),
+    onClick: Prop.eventHandler(),
   }),
 };
 

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

@@ -235,56 +235,20 @@ type ComponentProps = ComponentPropsWithoutRef<typeof Calendar> & {
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<ComponentProps> = {
   general: Section.category(PropsCategory.Content).children({
-    selected: Prop.string().propertiesPanel({
-      label: "Selected",
-      controlType: "INPUT_TEXT",
-      description: "The controlled value of the calendar",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
+    selected: Prop.string(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
     buttonVariant: Prop.string<
       "ghost" | "outline" | "default" | "secondary" | "destructive"
-    >().propertiesPanel({
-      label: "Button variant",
-      description: "The variant of the button",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Ghost", value: "ghost" },
-        { label: "Outline", value: "outline" },
-        { label: "Default", value: "default" },
-        { label: "Secondary", value: "secondary" },
-        { label: "Destructive", value: "destructive" },
-      ],
-    }),
-    captionLayout: Prop.string<"dropdown" | "label">().propertiesPanel({
-      label: "Caption layout",
-      description: "The layout of the caption",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Dropdown", value: "dropdown" },
-        { label: "Label", value: "label" },
-      ],
-    }),
+    >(),
+    captionLayout: Prop.string<"dropdown" | "label">(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    showOutsideDays: Prop.boolean().propertiesPanel({
-      label: "Show outside days",
-      description: "Whether to show days outside the current month",
-      controlType: "SWITCH",
-    }),
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      description: "Disables user interaction with this component",
-      controlType: "SWITCH",
-    }),
+    showOutsideDays: Prop.boolean(),
+    disabled: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onSelect: Prop.eventHandler().propertiesPanel({
-      label: "onSelect",
-      description: "Event handler called when the date is selected",
-    }),
+    onSelect: Prop.eventHandler(),
   }),
 };
 

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

@@ -100,10 +100,7 @@ const propertiesDefinition: PropertiesPanelDefinition<CardProps> = {
     children: Prop.jsx(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler().propertiesPanel({
-      label: "onClick",
-      description: "Triggered when the card is clicked",
-    }),
+    onClick: Prop.eventHandler(),
   }),
 };
 

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

@@ -46,40 +46,15 @@ type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & {
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<CheckboxProps> = {
   general: Section.category(PropsCategory.Content).children({
-    checked: Prop.boolean().propertiesPanel({
-      label: "Checked",
-      controlType: "SWITCH",
-      description:
-        "The controlled state of the checkbox. Must be used in conjunction with `onCheckedChange`",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
-    defaultChecked: Prop.boolean().propertiesPanel({
-      label: "Default checked",
-      controlType: "SWITCH",
-      description: "Whether the checkbox is checked by default",
-    }),
+    checked: Prop.boolean(),
+    defaultChecked: Prop.boolean(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      description: "Whether the checkbox is disabled",
-    }),
+    disabled: Prop.boolean(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onCheckedChange: Prop.eventHandler().propertiesPanel({
-      label: "onChange",
-      description: "Triggered when the checkbox state changes",
-      computedArgs: [
-        {
-          name: "checked",
-          type: "boolean",
-          description: "Whether the checkbox is checked",
-        },
-      ],
-    }),
+    onCheckedChange: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/date-range-picker.tsx

@@ -4,8 +4,8 @@ import { useMemo, useState, useEffect } from "react";
 import type { ComponentPropsWithoutRef } from "react";
 import type { DropdownProps, Matcher, DateRange } from "react-day-picker";
 
-import { registerComponent } from "@superblocksteam/library";
 import {
+  registerComponent,
   Prop,
   Section,
   PropsCategory,
@@ -29,41 +29,6 @@ import {
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 
-// Date Output Formats
-const DATE_OUTPUT_FORMATS: {
-  label: string;
-  value: string | undefined;
-}[] = [
-  {
-    label: "MM-dd-yyyy",
-    value: "MM-dd-yyyy",
-  },
-  {
-    label: "yyyy-MM-dd",
-    value: "yyyy-MM-dd",
-  },
-  {
-    label: "dd-MM-yyyy",
-    value: "dd-MM-yyyy",
-  },
-  {
-    label: "do MMM yyyy",
-    value: "do MMM yyyy",
-  },
-  {
-    label: "MM/dd/yyyy",
-    value: "MM/dd/yyyy",
-  },
-  {
-    label: "yyyy/MM/dd",
-    value: "yyyy/MM/dd",
-  },
-  {
-    label: "dd/MM/yyyy",
-    value: "dd/MM/yyyy",
-  },
-];
-
 // Component Props
 type ComponentProps = ComponentPropsWithoutRef<typeof Popover> & {
   value?: { from?: string; to?: string };
@@ -253,132 +218,26 @@ const DateRangePicker = (props: ComponentProps) => {
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<ComponentProps> = {
   general: Section.category(PropsCategory.Content).children({
-    value: Prop.any<{ from?: string; to?: string }>().propertiesPanel({
-      label: "Value",
-      controlType: "INPUT_TEXT",
-      description: "The controlled value of the date range picker",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
-    defaultFromValue: Prop.string().propertiesPanel({
-      controlType: "INPUT_TEXT",
-      defaultOnAdd: function (this: { valueFormat: string }) {
-        const today = new Date();
-        return today.toISOString();
-      },
-      description:
-        "Sets the default start date of the component. The date is updated if the default date changes",
-      isRemovable: true,
-      label: "Default from date",
-      placeholder: "Enter default from date",
-      visibility: "SHOW_NAME",
-    }),
-    defaultToValue: Prop.string().propertiesPanel({
-      controlType: "INPUT_TEXT",
-      defaultOnAdd: function (this: { valueFormat: string }) {
-        const weekFromNow = new Date();
-        weekFromNow.setDate(weekFromNow.getDate() + 7);
-        return weekFromNow.toISOString();
-      },
-      description:
-        "Sets the default end date of the component. The date is updated if the default date changes",
-      isRemovable: true,
-      label: "Default to date",
-      placeholder: "Enter default to date",
-      visibility: "SHOW_NAME",
-    }),
-    displayFormat: Prop.string().propertiesPanel({
-      label: "Display format",
-      description: "The format of the date to display",
-      placeholder: "Enter display format",
-      isRemovable: true,
-      controlType: "DROP_DOWN",
-      options: DATE_OUTPUT_FORMATS,
-    }),
-    minDate: Prop.string().propertiesPanel({
-      label: "Min date",
-      description: "The minimum date of the date range picker",
-      placeholder: "Enter min date",
-      defaultOnAdd: function (this: { valueFormat: string }) {
-        return new Date().toISOString();
-      },
-      visibility: "SHOW_NAME",
-      isRemovable: true,
-    }),
-    maxDate: Prop.string().propertiesPanel({
-      label: "Max date",
-      description: "The maximum date of the date range picker",
-      placeholder: "Enter max date",
-      defaultOnAdd: function (this: { valueFormat: string }) {
-        const nextYear = new Date();
-        nextYear.setFullYear(nextYear.getFullYear() + 1);
-        return nextYear.toISOString();
-      },
-      visibility: "SHOW_NAME",
-      isRemovable: true,
-    }),
-    placeholder: Prop.string().propertiesPanel({
-      label: "Placeholder",
-      description: "Placeholder text when no dates are selected",
-      placeholder: "Enter placeholder text",
-      isRemovable: true,
-    }),
+    value: Prop.any<{ from?: string; to?: string }>(),
+    defaultFromValue: Prop.string(),
+    defaultToValue: Prop.string(),
+    displayFormat: Prop.string(),
+    minDate: Prop.string(),
+    maxDate: Prop.string(),
+    placeholder: Prop.string(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
     buttonVariant: Prop.string<
       "ghost" | "outline" | "default" | "secondary" | "destructive"
-    >().propertiesPanel({
-      label: "Button variant",
-      description: "The variant of the button",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Ghost", value: "ghost" },
-        { label: "Outline", value: "outline" },
-        { label: "Default", value: "default" },
-        { label: "Secondary", value: "secondary" },
-        { label: "Destructive", value: "destructive" },
-      ],
-    }),
-    captionLayout: Prop.string<"dropdown" | "label">().propertiesPanel({
-      label: "Caption layout",
-      description: "The layout of the caption",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Dropdown", value: "dropdown" },
-        { label: "Label", value: "label" },
-      ],
-    }),
-    numberOfMonths: Prop.number().propertiesPanel({
-      label: "Number of months",
-      description: "Number of months to display in the calendar",
-    }),
+    >(),
+    captionLayout: Prop.string<"dropdown" | "label">(),
+    numberOfMonths: Prop.number(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      description: "Disables user interaction with this component",
-      controlType: "SWITCH",
-    }),
+    disabled: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onValueChange: Prop.eventHandler().propertiesPanel({
-      label: "onValueChange",
-      description: "Event handler called when the date range changes",
-      computedArgs: [
-        [
-          {
-            type: "string",
-            name: "from",
-            description: "The start date of the date range",
-          },
-          {
-            type: "string",
-            name: "to",
-            description: "The end date of the date range",
-          },
-        ],
-      ],
-    }),
+    onValueChange: Prop.eventHandler(),
   }),
 };
 

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

@@ -154,47 +154,20 @@ const propertiesDefinition: PropertiesPanelDefinition<
   React.ComponentPropsWithoutRef<typeof Dialog>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    open: Prop.boolean().propertiesPanel({
-      label: "Open",
-      controlType: "SWITCH",
-      description:
-        "The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
+    open: Prop.boolean(),
     children: Prop.jsx(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    showCloseButton: Prop.boolean().propertiesPanel({
-      label: "Show close button",
-      description: "Whether to show the close button",
-    }),
-    defaultOpen: Prop.boolean().propertiesPanel({
-      label: "Default is open",
-      description: "Whether the component is open by default",
+    showCloseButton: Prop.boolean(),
+    defaultOpen: Prop.boolean(),
+    modal: Prop.boolean().docs({
+      description:
+        "When true, interaction with outside elements will be disabled",
     }),
-    modal: Prop.boolean()
-      .propertiesPanel({
-        label: "Modal",
-        description: "Prevent clicking outside from closing the dialog",
-      })
-      .docs({
-        description:
-          "When true, interaction with outside elements will be disabled",
-      }),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onOpenChange: Prop.eventHandler().propertiesPanel({
-      label: "onOpenChange",
-      computedArgs: [
-        {
-          name: "open",
-          type: "boolean",
-          description: "Whether the dialog is open",
-        },
-      ],
-    }),
+    onOpenChange: Prop.eventHandler(),
   }),
 };
 

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

@@ -275,110 +275,27 @@ Dropzone.displayName = "Dropzone";
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<DropzoneProps> = {
   general: Section.category(PropsCategory.Content).children({
-    placeholder: Prop.string().propertiesPanel({
-      label: "Placeholder",
-      description: "Placeholder text shown when no files are uploaded",
-    }),
-    acceptedFileTypes: Prop.array<string>().propertiesPanel({
-      label: "Accepted file types",
-      controlType: "FUNCTION_CODE_EDITOR",
-      description:
-        "Array of MIME types or file extensions (e.g. image/*, .pdf, .doc)",
-    }),
-    multiple: Prop.boolean().propertiesPanel({
-      label: "Multiple files",
-      controlType: "SWITCH",
-      description: "Allow multiple file selection",
-    }),
-    maxFiles: Prop.number().propertiesPanel({
-      label: "Max files",
-      controlType: "INPUT_TEXT",
-      description: "Maximum number of files allowed",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: 5,
-      isVisible: function (this: any) {
-        return this.multiple;
-      },
-    }),
+    placeholder: Prop.string(),
+    acceptedFileTypes: Prop.array<string>(),
+    multiple: Prop.boolean(),
+    maxFiles: Prop.number(),
   }),
 
   appearance: Section.category(PropsCategory.Appearance).children({
-    showFileList: Prop.boolean().propertiesPanel({
-      label: "Show file list",
-      controlType: "SWITCH",
-      description: "Display list of uploaded files",
-    }),
+    showFileList: Prop.boolean(),
   }),
 
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      description: "Whether the dropzone is disabled",
-    }),
-    maxSize: Prop.number().propertiesPanel({
-      label: "Max file size",
-      controlType: "INPUT_TEXT",
-      description: "Maximum file size in bytes (default: 10MB)",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: 10485760, // 10MB
-    }),
-    minSize: Prop.number().propertiesPanel({
-      label: "Min file size",
-      description: "Minimum file size in bytes",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: 0,
-    }),
+    disabled: Prop.boolean(),
+    maxSize: Prop.number(),
+    minSize: Prop.number(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onDrop: Prop.eventHandler().propertiesPanel({
-      label: "On drop",
-      description: "Triggered when files are dropped or selected",
-      computedArgs: [
-        {
-          name: "files",
-          type: "array",
-          description: "The dropped files",
-        },
-      ],
-    }),
-    onDropAccepted: Prop.eventHandler().propertiesPanel({
-      label: "On drop accepted",
-      description: "Triggered when valid files are accepted",
-      computedArgs: [
-        {
-          name: "files",
-          type: "array",
-          description: "The accepted files",
-        },
-      ],
-    }),
-    onDropRejected: Prop.eventHandler().propertiesPanel({
-      label: "On drop rejected",
-      description: "Triggered when files are rejected due to validation",
-      computedArgs: [
-        {
-          name: "fileRejections",
-          type: "array",
-          description: "The rejected files",
-        },
-      ],
-    }),
-    onFileRemove: Prop.eventHandler().propertiesPanel({
-      label: "On file remove",
-      description: "Triggered when a file is removed from the list",
-      computedArgs: [
-        {
-          name: "fileToRemove",
-          type: "object",
-          description: "The file to remove",
-        },
-      ],
-    }),
+    onDrop: Prop.eventHandler(),
+    onDropAccepted: Prop.eventHandler(),
+    onDropRejected: Prop.eventHandler(),
+    onFileRemove: Prop.eventHandler(),
   }),
 };
 

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

@@ -70,87 +70,26 @@ const FileInput = ({
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<FileInputProps> = {
   general: Section.category(PropsCategory.Content).children({
-    multiple: Prop.boolean().propertiesPanel({
-      label: "Multiple files",
-      controlType: "SWITCH",
-      description: "Allow multiple file selection",
-    }),
-    acceptedFileTypes: Prop.array<string>().propertiesPanel({
-      label: "Accepted file types",
-      controlType: "FUNCTION_CODE_EDITOR",
+    multiple: Prop.boolean(),
+    acceptedFileTypes: Prop.array<string>(),
+    icon: Prop.string<string>().docs({
       description:
-        "Array of MIME types or file extensions (e.g. image/*, .pdf, .doc)",
-    }),
-    icon: Prop.string<string>()
-      .propertiesPanel({
-        label: "Icon",
-        description: "Icon to display in the input (e.g., 'search', 'lock')",
-        defaultOnAdd: "search",
-        isRemovable: true,
-        visibility: "SHOW_NAME",
-        controlType: "ICON_SELECTOR",
-      })
-      .docs({
-        description:
-          "The icon to display in the component. You can use the Lucide icon library to find the icon you want.",
-      }),
-    iconPosition: Prop.string<"left" | "right">().propertiesPanel({
-      label: "Icon position",
-      controlType: "RADIO_BUTTON_GROUP",
-      description: "Position of the icon within the input",
-      options: [
-        { label: "Left", value: "left" },
-        { label: "Right", value: "right" },
-      ],
-      isVisible: function (this: any) {
-        return Boolean(this.icon);
-      },
+        "The icon to display in the component. You can use the Lucide icon library to find the icon you want.",
     }),
+    iconPosition: Prop.string<"left" | "right">(),
   }),
 
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      description: "Whether the input is disabled",
-    }),
-    required: Prop.boolean().propertiesPanel({
-      label: "Required",
-      controlType: "SWITCH",
-      description: "Whether the input is required",
-    }),
-    readOnly: Prop.boolean().propertiesPanel({
-      label: "Read only",
-      controlType: "SWITCH",
-      description: "Whether the input is read only",
-    }),
-    autoFocus: Prop.boolean().propertiesPanel({
-      label: "Auto focus",
-      controlType: "SWITCH",
-      description: "Whether the input should auto focus on page load",
-    }),
+    disabled: Prop.boolean(),
+    required: Prop.boolean(),
+    readOnly: Prop.boolean(),
+    autoFocus: Prop.boolean(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onChange: Prop.eventHandler().propertiesPanel({
-      label: "On change",
-      description: "Triggered when the file input changes",
-      computedArgs: [
-        {
-          name: "event",
-          type: "object",
-          description: "The event object",
-        },
-      ],
-    }),
-    onFocus: Prop.eventHandler().propertiesPanel({
-      label: "On focus",
-      description: "Triggered when the input receives focus",
-    }),
-    onBlur: Prop.eventHandler().propertiesPanel({
-      label: "On blur",
-      description: "Triggered when the input loses focus",
-    }),
+    onChange: Prop.eventHandler(),
+    onFocus: Prop.eventHandler(),
+    onBlur: Prop.eventHandler(),
   }),
 };