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

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

@@ -0,0 +1,295 @@
+import React from "react";
+import { PieChart as PieChartComponent, Pie, 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,
+} from "./chart";
+
+type ComponentProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ChartContainer>,
+  "children" | "config"
+> & {
+  data?: any[];
+  valueKey?: string;
+  nameKey?: string;
+  labelKey?: string;
+  colorKey?: string;
+  colors?: string[];
+  startAngle?: number;
+  endAngle?: number;
+  enableAnimation?: boolean;
+  showLabels?: boolean;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  onDataClick?: (data: any) => void;
+};
+
+const PieChart = ({ className, ...props }: ComponentProps) => {
+  const chartConfig: ChartConfig = React.useMemo(() => {
+    if (!props.data || !Array.isArray(props.data)) return {};
+
+    const config: ChartConfig = {};
+    props.data.forEach((item, index) => {
+      const nameValue = item[props.nameKey ?? "name"];
+      const labelValue = props.labelKey ? item[props.labelKey] : nameValue;
+      const sanitizedName = sanitizeForCssVar(nameValue);
+
+      // Get color from: 1) data item colorKey, 2) colors array, 3) default theme color
+      const itemColor = props.colorKey ? item[props.colorKey] : undefined;
+      const color = fixColorFormat(
+        itemColor || props.colors?.[index] || `var(--chart-${(index % 5) + 1})`,
+      );
+
+      config[sanitizedName] = {
+        label: labelValue,
+        color,
+      };
+    });
+    return config;
+  }, [props.data, props.nameKey, props.labelKey, props.colorKey, props.colors]);
+
+  const chartData = React.useMemo(() => {
+    return props.data?.map((item) => {
+      const nameValue = item[props.nameKey ?? "name"];
+      const sanitizedName = sanitizeForCssVar(nameValue);
+
+      const fillColor = chartConfig[sanitizedName]
+        ? `var(--color-${sanitizedName})`
+        : "var(--chart-1)";
+
+      return {
+        ...item,
+        fill: fillColor,
+      };
+    });
+  }, [props.data, props.nameKey, chartConfig]);
+
+  const hasData = Array.isArray(props.data) && props.data?.length;
+
+  return (
+    <ChartContainer
+      className={cn(
+        "h-full w-full",
+        props.showLabels ? "[&_.recharts-pie-label-text]:fill-foreground" : "",
+        className,
+      )}
+      {...props}
+      config={chartConfig}
+    >
+      {hasData ? (
+        <PieChartComponent accessibilityLayer>
+          {props.showTooltip && (
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+          )}
+          {props.showLegend && (
+            <ChartLegend
+              content={<ChartLegendContent nameKey={props.nameKey} />}
+              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+            />
+          )}
+          <Pie
+            data={chartData}
+            dataKey={props.valueKey ?? "value"}
+            nameKey={props.nameKey}
+            startAngle={props.startAngle}
+            endAngle={props.endAngle}
+            paddingAngle={0}
+            isAnimationActive={props.enableAnimation}
+            label={props.showLabels}
+            onClick={props.onDataClick}
+          >
+            {props.showLabels && (
+              <LabelList
+                dataKey={props.nameKey}
+                className="fill-background"
+                stroke="none"
+                fontSize={12}
+              />
+            )}
+          </Pie>
+        </PieChartComponent>
+      ) : (
+        <div className="flex items-center justify-center h-full w-full min-h-32 text-muted-foreground">
+          No data available
+        </div>
+      )}
+    </ChartContainer>
+  );
+};
+
+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,
+    }),
+    endAngle: Prop.number().propertiesPanel({
+      label: "End angle",
+      description: "End angle in degrees (450 = full circle from 90°)",
+      visibility: "SHOW_NAME",
+      defaultOnAdd: 450,
+    }),
+    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",
+    }),
+    showLabels: Prop.boolean().propertiesPanel({
+      label: "Show labels",
+      description: "Display value labels on pie slices",
+      controlType: "SWITCH",
+    }),
+  }),
+  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 pie slice is clicked",
+      computedArgs: [
+        {
+          name: "data",
+          type: "object",
+          description: "The data point that was clicked",
+        },
+      ],
+    }),
+  }),
+}).editorConfig({ icon: "chart" });
+
+export { PieChart };

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

@@ -0,0 +1,162 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  registerComponent,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+
+// Properties Definition for Popover (root)
+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",
+    }),
+    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.",
+    }),
+  }),
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onOpenChange: Prop.eventHandler().propertiesPanel({
+      label: "onOpenChange",
+      computedArgs: [
+        {
+          name: "open",
+          type: "boolean",
+          description: "Whether the popover is open",
+        },
+      ],
+    }),
+  }),
+};
+
+const popoverEditorConfig: EditorConfig = {
+  icon: "modal",
+  isDetached: true,
+  isDraggable: false,
+  description:
+    "A modal popover that displays rich content in relation to a trigger element.",
+};
+
+// Properties Definition for PopoverContent
+const popoverContentPropertiesDefinition: PropertiesPanelDefinition<
+  React.ComponentPropsWithoutRef<typeof PopoverContent>
+> = {
+  general: Section.category(PropsCategory.Content).children({
+    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",
+    }),
+  }),
+};
+
+const childrenPropertiesDefinition = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx(),
+  }),
+};
+
+// Register Components
+registerComponent(Popover, popoverPropertiesDefinition).editorConfig(
+  popoverEditorConfig,
+);
+registerComponent(PopoverTrigger, childrenPropertiesDefinition);
+registerComponent(PopoverContent, popoverContentPropertiesDefinition);
+registerComponent(PopoverAnchor);

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

@@ -0,0 +1,69 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+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";
+
+// Progress Component
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+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",
+    }),
+  }),
+};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "custom",
+  isDraggable: true,
+  description:
+    "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+};
+
+// Registration
+registerComponent(Progress, propertiesDefinition).editorConfig(editorConfig);
+
+export { Progress };