@superblocksteam/vite-plugin-file-sync 2.0.114 → 2.0.115-next.1

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

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

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

@@ -0,0 +1,198 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Main Component
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  );
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from(
+        {
+          length: _values.length,
+        },
+        (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            data-ignore-dnd="true"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            key={index}
+            className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          />
+        ),
+      )}
+    </SliderPrimitive.Root>
+  );
+}
+
+// Types
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<
+  React.ComponentProps<typeof SliderPrimitive.Root>
+> = {
+  general: Section.category(PropsCategory.Content).children({
+    value: Prop.array<number>().propertiesPanel({
+      label: "Value",
+      controlType: "INPUT_TEXT",
+      description: "The controlled value of the slider",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+    }),
+    defaultValue: Prop.array<number>().propertiesPanel({
+      label: "Default value",
+      description:
+        "The default selected option value. Changes to the default selection update the component state",
+      placeholder: "Enter default option value",
+    }),
+    min: Prop.number().propertiesPanel({
+      label: "Min value",
+      description: "The minimum value of the slider",
+      placeholder: "Enter min value",
+      defaultOnAdd: 0,
+      visibility: "SHOW_NAME",
+      isRemovable: true,
+    }),
+    max: Prop.number().propertiesPanel({
+      label: "Max value",
+      description: "The maximum value of the slider",
+      placeholder: "Enter max value",
+      defaultOnAdd: 100,
+      visibility: "SHOW_NAME",
+      isRemovable: true,
+    }),
+    step: Prop.number().propertiesPanel({
+      label: "Step value",
+      description: "The step value of the slider",
+      placeholder: "Enter step value",
+      defaultOnAdd: 1,
+      visibility: "SHOW_NAME",
+      isRemovable: true,
+    }),
+    minStepsBetweenThumbs: Prop.number().propertiesPanel({
+      label: "Min steps between thumbs",
+      description: "The minimum number of steps between multiple thumbs",
+      placeholder: "Enter minimum steps",
+      defaultOnAdd: 0,
+      visibility: "SHOW_NAME",
+      isRemovable: true,
+    }),
+  }),
+  appearance: Section.category(PropsCategory.Appearance).children({
+    orientation: Prop.string<"horizontal" | "vertical">()
+
+      .propertiesPanel({
+        label: "Orientation",
+        description: "The orientation of the slider",
+        controlType: "RADIO_BUTTON_GROUP",
+        options: [
+          { value: "horizontal", label: "Horizontal" },
+          { value: "vertical", label: "Vertical" },
+        ],
+        visibility: "SHOW_NAME",
+        isRemovable: true,
+        defaultOnAdd: "horizontal",
+      }),
+    inverted: Prop.boolean().propertiesPanel({
+      label: "Inverted",
+      description: "Whether the slider is inverted (reverse direction)",
+      controlType: "SWITCH",
+      visibility: "SHOW_NAME",
+      isRemovable: true,
+      defaultOnAdd: false,
+    }),
+  }),
+  interaction: Section.category(PropsCategory.Interaction).children({
+    disabled: Prop.boolean().propertiesPanel({
+      label: "Disabled",
+      description: "Disables user interaction with this component",
+      controlType: "SWITCH",
+    }),
+  }),
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onValueChange: Prop.eventHandler().propertiesPanel({
+      label: "onValueChange",
+      description: "Event handler called when the value changes",
+      computedArgs: [
+        {
+          name: "value",
+          type: "array",
+          description: "The new value",
+        },
+      ],
+    }),
+    onValueCommit: Prop.eventHandler().propertiesPanel({
+      label: "onValueCommit",
+      description:
+        "Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service",
+      computedArgs: [
+        {
+          name: "value",
+          type: "array",
+          description: "The new value",
+        },
+      ],
+    }),
+  }),
+};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "custom",
+  hasExtendedClickArea: true,
+};
+
+// Registration
+registerComponent(Slider, propertiesDefinition).editorConfig(editorConfig);
+
+export { Slider };

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

@@ -0,0 +1,95 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Main Component
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// Types
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<
+  React.ComponentProps<typeof SwitchPrimitives.Root>
+> = {
+  general: Section.category(PropsCategory.Content).children({
+    checked: Prop.boolean().propertiesPanel({
+      label: "Checked",
+      controlType: "SWITCH",
+      description:
+        "The controlled state of the switch. Must be used in conjunction with `onCheckedChange`",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+    }),
+    defaultChecked: Prop.boolean()
+      .propertiesPanel({
+        label: "Default checked",
+        controlType: "SWITCH",
+        description: "Whether the switch is checked by default",
+      })
+      .docs({
+        description: "Use when you do not need to control its pressed state",
+      }),
+  }),
+
+  interaction: Section.category(PropsCategory.Interaction).children({
+    disabled: Prop.boolean().propertiesPanel({
+      label: "Disabled",
+      controlType: "SWITCH",
+      description: "Whether the switch is disabled",
+    }),
+  }),
+
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onCheckedChange: Prop.eventHandler().propertiesPanel({
+      label: "onChange",
+      description: "Triggered when the switch checked state changes",
+      computedArgs: [
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Whether the switch is checked",
+        },
+      ],
+    }),
+  }),
+};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "switch",
+  description:
+    "A control that allows the user to toggle between checked and not checked",
+};
+
+// Registration
+registerComponent(Switch, propertiesDefinition).editorConfig(editorConfig);
+
+export { Switch };

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

@@ -0,0 +1,145 @@
+import * as React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Table Component
+function Table({
+  className,
+  rootStyle,
+  ...props
+}: React.ComponentProps<"table"> & {
+  rootStyle?: React.CSSProperties;
+}) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full h-full overflow-x-auto"
+      style={rootStyle}
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+type TableProps = React.ComponentProps<typeof Table>;
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<TableProps> = {};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "table",
+  description: "A table component for displaying data",
+};
+const tableElementConfig: EditorConfig = {
+  icon: "container",
+  description: "A table element component for displaying data",
+};
+
+// Registration
+registerComponent(Table, propertiesDefinition).editorConfig(editorConfig);
+registerComponent(TableHeader).editorConfig(tableElementConfig);
+registerComponent(TableBody).editorConfig(tableElementConfig);
+registerComponent(TableFooter).editorConfig(tableElementConfig);
+registerComponent(TableHead).editorConfig(tableElementConfig);
+registerComponent(TableRow).editorConfig(tableElementConfig);
+registerComponent(TableCell).editorConfig(tableElementConfig);
+registerComponent(TableCaption).editorConfig(tableElementConfig);
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

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

@@ -0,0 +1,87 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+type TabsProps = React.ComponentProps<typeof Tabs>;
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<TabsProps> = {};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "tabs",
+  description: "A tabs component for displaying content in a tabbed interface",
+};
+
+// Registration
+registerComponent(Tabs, propertiesDefinition).editorConfig(editorConfig);
+registerComponent(TabsList);
+registerComponent(TabsTrigger);
+registerComponent(TabsContent);
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,148 @@
+import type * as React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  tailwindStylesCategory,
+  type PropertiesPanelDefinition,
+} from "@superblocksteam/library";
+import { type EditorConfig } from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Main Component
+function Textarea({
+  className,
+  style,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      {...props}
+      data-slot="textarea"
+      style={style}
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+    />
+  );
+}
+
+// Types
+type TextareaProps = React.ComponentProps<"textarea">;
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<TextareaProps> = {
+  general: Section.category(PropsCategory.Content).children({
+    value: Prop.string().propertiesPanel({
+      label: "Value",
+      controlType: "INPUT_TEXT",
+      description: "The controlled value of the textarea",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+    }),
+    defaultValue: Prop.string().propertiesPanel({
+      label: "Default value",
+      controlType: "INPUT_TEXT",
+      description: "The current value of the textarea",
+    }),
+    placeholder: Prop.string().propertiesPanel({
+      label: "Placeholder",
+      controlType: "INPUT_TEXT",
+      description: "Placeholder text shown when textarea is empty",
+    }),
+    rows: Prop.number().propertiesPanel({
+      label: "Rows",
+      controlType: "INPUT_TEXT",
+      description: "Number of visible text lines",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+      defaultOnAdd: 3,
+    }),
+  }),
+  styles: tailwindStylesCategory({
+    prioritizedTailwindProperties: ["resize"],
+  }),
+
+  interaction: Section.category(PropsCategory.Interaction).children({
+    disabled: Prop.boolean().propertiesPanel({
+      label: "Disabled",
+      controlType: "SWITCH",
+      description: "Whether the textarea is disabled",
+    }),
+    readOnly: Prop.boolean().propertiesPanel({
+      label: "Read only",
+      controlType: "SWITCH",
+      description: "Whether the textarea is read only",
+    }),
+    autoFocus: Prop.boolean().propertiesPanel({
+      label: "Auto focus",
+      controlType: "SWITCH",
+      description: "Whether the textarea should auto focus on page load",
+    }),
+    minLength: Prop.number().propertiesPanel({
+      label: "Min length",
+      controlType: "INPUT_TEXT",
+      description: "Minimum number of characters required",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+      defaultOnAdd: 0,
+    }),
+    maxLength: Prop.number().propertiesPanel({
+      label: "Max length",
+      controlType: "INPUT_TEXT",
+      description: "Maximum number of characters allowed",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+      defaultOnAdd: 1000,
+    }),
+  }),
+
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onChange: Prop.eventHandler().propertiesPanel({
+      label: "On change",
+      description: "Triggered when the textarea value changes",
+      computedArgs: [
+        {
+          name: "event",
+          type: "object",
+          description: "The event object",
+        },
+      ],
+    }),
+    onFocus: Prop.eventHandler().propertiesPanel({
+      label: "On focus",
+      description: "Triggered when the textarea receives focus",
+    }),
+    onBlur: Prop.eventHandler().propertiesPanel({
+      label: "On blur",
+      description: "Triggered when the textarea loses focus",
+    }),
+    onKeyDown: Prop.eventHandler().propertiesPanel({
+      label: "On key down",
+      description: "Triggered when a key is pressed down",
+      computedArgs: [
+        {
+          name: "event",
+          type: "object",
+          description: "The event object",
+        },
+      ],
+    }),
+  }),
+};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "input",
+  description:
+    "A multi-line textarea component for collecting longer text input",
+};
+
+// Registration
+registerComponent(Textarea, propertiesDefinition).editorConfig(editorConfig);
+
+export { Textarea };