@superblocksteam/vite-plugin-file-sync 1.99.99-next.3 → 2.0.0-SNAPSHOT.2143e2e95d0107ab

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

@@ -0,0 +1,219 @@
+import React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Input Component
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type InputProps = React.ComponentProps<typeof Input>;
+
+// Input type constants for property visibility
+const AUTO_COMPLETE_INPUT_TYPES = ["text", "email", "password", "url"];
+const TEXT_INPUT_TYPES = ["text", "email", "password", "url"];
+const NUMERIC_INPUT_TYPES = ["number"];
+const STEP_INPUT_TYPES = ["number"];
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<InputProps> = {
+  general: Section.category(PropsCategory.Content).children({
+    value: Prop.string().propertiesPanel({
+      label: "Value",
+      controlType: "INPUT_TEXT",
+      description: "The controlled value of the input",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+    }),
+    defaultValue: Prop.string().propertiesPanel({
+      label: "Default value",
+      controlType: "INPUT_TEXT",
+      description: "The default value of the input",
+    }),
+    placeholder: Prop.string().propertiesPanel({
+      label: "Placeholder",
+      controlType: "INPUT_TEXT",
+      description: "Placeholder text shown when input is empty",
+    }),
+    type: Prop.string<
+      "text" | "email" | "password" | "number" | "url"
+    >().propertiesPanel({
+      label: "Type",
+      controlType: "DROP_DOWN",
+      description: "The type of input",
+      options: [
+        { label: "Text", value: "text" },
+        { label: "Email", value: "email" },
+        { label: "Password", value: "password" },
+        { label: "Number", value: "number" },
+        { label: "URL", value: "url" },
+      ],
+    }),
+  }),
+  appearance: Section.category(PropsCategory.Appearance).children({
+    autoComplete: Prop.string().propertiesPanel({
+      label: "Auto complete",
+      controlType: "DROP_DOWN",
+      description: "Hint for form autofill feature",
+      options: [
+        { label: "Off", value: "off" },
+        { label: "On", value: "on" },
+        { label: "Name", value: "name" },
+        { label: "Email", value: "email" },
+        { label: "Username", value: "username" },
+        { label: "Current password", value: "current-password" },
+        { label: "New password", value: "new-password" },
+        { label: "URL", value: "url" },
+      ],
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+      defaultOnAdd: "off",
+      isVisible: function (this: { type?: string }) {
+        return AUTO_COMPLETE_INPUT_TYPES.includes(this.type ?? "text");
+      },
+    }),
+  }),
+
+  interaction: Section.category(PropsCategory.Interaction)
+    .children({
+      disabled: Prop.boolean().propertiesPanel({
+        label: "Disabled",
+        controlType: "SWITCH",
+        description: "Whether the input is disabled",
+      }),
+      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",
+      }),
+    })
+    .add({
+      minLength: Prop.number().propertiesPanel({
+        label: "Min length",
+        controlType: "INPUT_TEXT",
+        description: "Minimum number of characters required",
+        isRemovable: true,
+        visibility: "SHOW_NAME",
+        defaultOnAdd: 0,
+        isVisible: function (this: { type?: string }) {
+          return TEXT_INPUT_TYPES.includes(this.type ?? "text");
+        },
+      }),
+      maxLength: Prop.number().propertiesPanel({
+        label: "Max length",
+        controlType: "INPUT_TEXT",
+        description: "Maximum number of characters allowed",
+        isRemovable: true,
+        visibility: "SHOW_NAME",
+        defaultOnAdd: 100,
+        isVisible: function (this: { type?: string }) {
+          return TEXT_INPUT_TYPES.includes(this.type ?? "text");
+        },
+      }),
+    })
+    .add({
+      min: Prop.number().propertiesPanel({
+        label: "Min value",
+        controlType: "INPUT_TEXT",
+        description: "Minimum value for number inputs",
+        isRemovable: true,
+        visibility: "SHOW_NAME",
+        defaultOnAdd: 0,
+        isVisible: function (this: { type?: string }) {
+          return NUMERIC_INPUT_TYPES.includes(this.type ?? "text");
+        },
+      }),
+      max: Prop.number().propertiesPanel({
+        label: "Max value",
+        controlType: "INPUT_TEXT",
+        description: "Maximum value for number inputs",
+        isRemovable: true,
+        visibility: "SHOW_NAME",
+        defaultOnAdd: 100,
+        isVisible: function (this: { type?: string }) {
+          return NUMERIC_INPUT_TYPES.includes(this.type ?? "text");
+        },
+      }),
+      step: Prop.number().propertiesPanel({
+        label: "Step",
+        controlType: "INPUT_TEXT",
+        description: "Step value for number inputs",
+        isRemovable: true,
+        visibility: "SHOW_NAME",
+        defaultOnAdd: 1,
+        isVisible: function (this: { type?: string }) {
+          return STEP_INPUT_TYPES.includes(this.type ?? "text");
+        },
+      }),
+    }),
+
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onChange: Prop.eventHandler().propertiesPanel({
+      label: "On change",
+      description: "Triggered when the input value 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",
+    }),
+    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 versatile input component for collecting user data",
+};
+
+// Registration
+registerComponent(Input, propertiesDefinition).editorConfig(editorConfig);
+
+export { Input };

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

@@ -0,0 +1,55 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Label Component
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type LabelProps = React.ComponentProps<typeof Label>;
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<LabelProps> = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx().propertiesPanel({
+      label: "Text",
+      controlType: "INPUT_TEXT",
+    }),
+    htmlFor: Prop.string(),
+  }),
+};
+
+// Editor Template
+// Editor Config
+const editorConfig: EditorConfig = {
+  icon: "button",
+  description: "A label component for forms and inputs",
+};
+
+// Register Component
+registerComponent(Label, propertiesDefinition).editorConfig(editorConfig);
+
+export { Label };

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

@@ -0,0 +1,380 @@
+import React from "react";
+import {
+  LineChart as LineChartComponent,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  LabelList,
+} from "recharts";
+
+import {
+  registerComponent,
+  Prop,
+  Section,
+  PropsCategory,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+import type { ChartConfig } from "./chart";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  sanitizeForCssVar,
+  fixColorFormat,
+  createKeyMapping,
+} from "./chart";
+
+type ComponentProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ChartContainer>,
+  "children" | "config"
+> & {
+  data?: any[];
+  xAxisKey?: string;
+  categories?: string[];
+  seriesLabels?: Record<string, string>;
+  colors?: string[];
+  gridStyle?: "solid" | "dashed" | "hidden";
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  lineType?:
+    | "monotone"
+    | "linear"
+    | "step"
+    | "bump"
+    | "basis"
+    | "stepBefore"
+    | "stepAfter"
+    | "natural";
+  strokeWidth?: number;
+  connectNulls?: boolean;
+  enableAnimation?: boolean;
+  showDots?: boolean;
+  showPointLabels?: boolean;
+  onDataClick?: (data: any) => void;
+};
+
+const LineChart = ({ className, ...props }: ComponentProps) => {
+  const chartConfig: ChartConfig = React.useMemo(() => {
+    const effectiveCategories =
+      props.categories && props.categories.length > 0
+        ? props.categories
+        : props.data && props.data.length > 0
+          ? Object.keys(props.data[0]).filter((key) => {
+              if (key === props.xAxisKey) return false;
+              const value = props.data![0][key];
+              return typeof value === "number";
+            })
+          : [];
+
+    if (!effectiveCategories.length) return {};
+
+    const config: ChartConfig = {};
+    effectiveCategories.forEach((key, index) => {
+      const sanitizedKey = sanitizeForCssVar(key);
+      const label = props.seriesLabels?.[key] || key;
+      const color = fixColorFormat(
+        props.colors?.[index] || `var(--chart-${(index % 5) + 1})`,
+      );
+
+      config[sanitizedKey] = {
+        label,
+        color,
+      };
+    });
+
+    return config;
+  }, [
+    props.categories,
+    props.seriesLabels,
+    props.colors,
+    props.data,
+    props.xAxisKey,
+  ]);
+
+  const keyMapping = React.useMemo(() => {
+    const effectiveCategories =
+      props.categories && props.categories.length > 0
+        ? props.categories
+        : props.data && props.data.length > 0
+          ? Object.keys(props.data[0]).filter((key) => {
+              if (key === props.xAxisKey) return false;
+              const value = props.data![0][key];
+              return typeof value === "number";
+            })
+          : [];
+
+    return effectiveCategories.length > 0
+      ? createKeyMapping(
+          Object.fromEntries(effectiveCategories.map((k) => [k, { label: k }])),
+        )
+      : new Map();
+  }, [props.categories, props.data, props.xAxisKey]);
+
+  const hasData = Array.isArray(props.data) && props.data?.length;
+
+  return (
+    <ChartContainer
+      {...props}
+      className={cn("h-full w-full pt-4 pb-4 pr-4", className)}
+      config={chartConfig}
+    >
+      {hasData ? (
+        <LineChartComponent
+          data={props.data}
+          onClick={props.onDataClick}
+          accessibilityLayer
+        >
+          {props.gridStyle !== "hidden" && (
+            <CartesianGrid
+              vertical={false}
+              strokeDasharray={props.gridStyle === "dashed" ? "3 3" : "0"}
+            />
+          )}
+
+          {props.showXAxis && (
+            <XAxis
+              dataKey={props.xAxisKey}
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+            />
+          )}
+
+          {props.showYAxis && (
+            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+          )}
+
+          {props.showTooltip && (
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+          )}
+
+          {props.showLegend && <ChartLegend content={<ChartLegendContent />} />}
+
+          {Object.keys(chartConfig).map((key) => {
+            const originalKey = keyMapping.get(key) || key;
+            const wouldHideLine = props.strokeWidth === 0;
+
+            return (
+              <Line
+                key={key}
+                dataKey={originalKey}
+                type={props.lineType}
+                stroke={`var(--color-${key})`}
+                {...(!wouldHideLine && { strokeWidth: props.strokeWidth })}
+                connectNulls={props.connectNulls}
+                isAnimationActive={props.enableAnimation}
+                dot={
+                  props.showDots
+                    ? {
+                        fill: `var(--color-${key})`,
+                        strokeWidth: 2,
+                        r: 2,
+                      }
+                    : false
+                }
+                activeDot={{
+                  fill: `var(--color-${key})`,
+                  strokeWidth: 2,
+                  r: 4,
+                }}
+              >
+                {props.showPointLabels && (
+                  <LabelList
+                    dataKey={originalKey}
+                    position="top"
+                    offset={10}
+                    className="fill-foreground font-semibold text-xs"
+                  />
+                )}
+              </Line>
+            );
+          })}
+        </LineChartComponent>
+      ) : (
+        <div className="flex items-center justify-center h-full w-full min-h-32 text-muted-foreground">
+          No data available
+        </div>
+      )}
+    </ChartContainer>
+  );
+};
+
+registerComponent(LineChart, {
+  general: Section.category(PropsCategory.Content).children({
+    data: Prop.array<any>()
+      .propertiesPanel({
+        label: "Data",
+        description: "Array of data objects for the line chart",
+        controlType: "FUNCTION_CODE_EDITOR",
+        isJSConvertible: false,
+      })
+      .docs({
+        description:
+          "Array of objects where each object represents a data point with X-axis and Y-axis values. Each object should contain the xAxisKey property and properties for each data series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple line series that can be styled independently.",
+      }),
+    xAxisKey: Prop.string()
+      .propertiesPanel({
+        label: "X-axis data key",
+        description: " name for X-axis values (categories)",
+        placeholder: "month",
+        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 X-axis values (categories, dates, or sequential values). This determines the horizontal positioning and connection order of data points along the line. Should be consistent across all data objects.",
+      }),
+    categories: Prop.array<string>()
+      .propertiesPanel({
+        label: "Categories",
+        description:
+          "Array of data keys to plot as line 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 line series. Example: ['desktop', 'mobile'] will create two line series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) 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: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. 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({
+    gridStyle: Prop.string<"solid" | "dashed" | "hidden">().propertiesPanel({
+      label: "Grid style",
+      description: "Style of the chart grid lines",
+      controlType: "DROP_DOWN",
+      options: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Hidden", value: "hidden" },
+      ],
+    }),
+    showXAxis: Prop.boolean().propertiesPanel({
+      label: "Show X-axis",
+      description: "Display X-axis with labels",
+      controlType: "SWITCH",
+    }),
+    showYAxis: Prop.boolean().propertiesPanel({
+      label: "Show Y-axis",
+      description: "Display Y-axis with labels",
+      controlType: "SWITCH",
+    }),
+    showTooltip: Prop.boolean().propertiesPanel({
+      label: "Show tooltip",
+      description: "Display tooltip on hover",
+      controlType: "SWITCH",
+    }),
+    showLegend: Prop.boolean().propertiesPanel({
+      label: "Show legend",
+      description: "Display chart legend",
+      controlType: "SWITCH",
+    }),
+    showPointLabels: Prop.boolean().propertiesPanel({
+      label: "Show point labels",
+      description: "Display labels on data points",
+      controlType: "SWITCH",
+    }),
+    strokeWidth: Prop.number().propertiesPanel({
+      label: "Stroke width",
+      description: "Width of the line stroke",
+    }),
+    showDots: Prop.boolean().propertiesPanel({
+      label: "Show dots",
+      description: "Display dots on the line at data points",
+      controlType: "SWITCH",
+    }),
+    connectNulls: Prop.boolean().propertiesPanel({
+      label: "Connect nulls",
+      description: "Connect nulls with the previous non-null value",
+      controlType: "SWITCH",
+    }),
+    lineType: Prop.string<
+      | "linear"
+      | "bump"
+      | "step"
+      | "basis"
+      | "stepBefore"
+      | "stepAfter"
+      | "natural"
+      | "monotone"
+    >()
+      .propertiesPanel({
+        label: "Line type",
+        description: "Type of line to display",
+        controlType: "DROP_DOWN",
+        options: [
+          { label: "Linear", value: "linear" },
+          { label: "Bump", value: "bump" },
+          { label: "Step", value: "step" },
+          { label: "Basis", value: "basis" },
+          { label: "Step Before", value: "stepBefore" },
+          { label: "Step After", value: "stepAfter" },
+          { label: "Natural", value: "natural" },
+          { label: "Monotone", value: "monotone" },
+        ],
+      })
+      .docs({
+        description:
+          "Curve interpolation type for line paths. 'linear' creates straight line segments between points, 'monotone' creates smooth curves that preserve monotonicity (no overshooting), 'natural' creates natural spline curves for smoothest appearance, 'step' creates step functions with sharp transitions, 'basis' creates B-spline curves, 'bump' creates rounded transitions, 'stepBefore' steps before each point, 'stepAfter' steps after each point. Choose 'monotone' for smooth data trends, 'linear' for precise point-to-point connections.",
+      }),
+  }),
+  interaction: Section.category(PropsCategory.Interaction).children({
+    enableAnimation: Prop.boolean().propertiesPanel({
+      label: "Enable animation",
+      description: "Enable chart animations on load",
+      controlType: "SWITCH",
+    }),
+  }),
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onDataClick: Prop.eventHandler().propertiesPanel({
+      label: "onDataClick",
+      description: "Triggered when a line is clicked",
+      computedArgs: [
+        {
+          name: "data",
+          type: "object",
+          description: "The data point that was clicked",
+        },
+      ],
+    }),
+  }),
+}).editorConfig({ icon: "chart" });
+
+export { LineChart };