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

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

@@ -0,0 +1,225 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import {
+  registerComponent,
+  Prop,
+  Section,
+  PropsCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils";
+
+// Context
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+});
+
+// ToggleGroup Component
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+// ToggleGroupItem Component
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupItem>;
+
+// Simplified type for properties panel (avoids discriminated union issues)
+interface ToggleGroupPropsForPanel {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  children?: React.ReactNode;
+  variant?: "default" | "outline";
+  size?: "default" | "sm" | "lg";
+  disabled?: boolean;
+  onValueChange?: (value: string | string[]) => void;
+}
+
+// ToggleGroupItem Properties
+const toggleGroupItemPropertiesDefinition: PropertiesPanelDefinition<ToggleGroupItemProps> =
+  {
+    general: Section.category(PropsCategory.Content).children({
+      children: Prop.jsx().propertiesPanel({
+        label: "Children",
+      }),
+      value: Prop.string().propertiesPanel({
+        label: "Value",
+        description: "The value of this toggle item",
+        controlType: "INPUT_TEXT",
+      }),
+    }),
+
+    interaction: Section.category(PropsCategory.Interaction).children({
+      disabled: Prop.boolean().propertiesPanel({
+        label: "Disabled",
+        controlType: "SWITCH",
+        description: "Whether this toggle item is disabled",
+      }),
+    }),
+  };
+
+registerComponent(
+  ToggleGroupItem,
+  toggleGroupItemPropertiesDefinition,
+).editorConfig({
+  isDroppable: false,
+  isDraggable: false,
+});
+
+// ToggleGroup Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<ToggleGroupPropsForPanel> =
+  {
+    general: Section.category(PropsCategory.Content).children({
+      value: Prop.any<string | string[]>().propertiesPanel({
+        label: "Value",
+        controlType: "INPUT_TEXT",
+        description: "The controlled value of the pressed item(s)",
+        isRemovable: true,
+        visibility: "SHOW_NAME",
+      }),
+      type: Prop.string<"single" | "multiple">().propertiesPanel({
+        label: "Type",
+        controlType: "RADIO_BUTTON_GROUP",
+        description: "Whether single or multiple items can be selected",
+        options: [
+          { label: "Single", value: "single" },
+          { label: "Multiple", value: "multiple" },
+        ],
+      }),
+      children: Prop.jsx().propertiesPanel({
+        label: "Items",
+        description: "The toggle group items",
+      }),
+      defaultValue: Prop.any<string | string[]>().propertiesPanel({
+        label: "Default value",
+        controlType: "INPUT_TEXT",
+        description: "The default selected value(s)",
+        isRemovable: true,
+        visibility: "SHOW_NAME",
+      }),
+    }),
+
+    appearance: Section.category(PropsCategory.Appearance).children({
+      variant: Prop.string<"default" | "outline">().propertiesPanel({
+        label: "Variant",
+        controlType: "DROP_DOWN",
+        description: "Visual style variant of the toggle group",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Outline", value: "outline" },
+        ],
+      }),
+      size: Prop.string<"default" | "sm" | "lg">().propertiesPanel({
+        label: "Size",
+        controlType: "DROP_DOWN",
+        description: "Size variant of the toggle group",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Default", value: "default" },
+          { label: "Large", value: "lg" },
+        ],
+      }),
+    }),
+
+    interaction: Section.category(PropsCategory.Interaction).children({
+      disabled: Prop.boolean().propertiesPanel({
+        label: "Disabled",
+        controlType: "SWITCH",
+        description: "Whether the toggle group is disabled",
+      }),
+    }),
+
+    events: Section.category(PropsCategory.EventHandlers).children({
+      onValueChange: Prop.eventHandler().propertiesPanel({
+        label: "onValueChange",
+        description: "Triggered when the selection changes",
+        computedArgs: [
+          {
+            name: "value",
+            type: "string",
+            description: "The new value",
+          },
+        ],
+      }),
+    }),
+  };
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "switch",
+  description: "A group of toggle buttons for single or multiple selection",
+  isDroppable: false,
+};
+
+// Registration
+registerComponent(ToggleGroup, propertiesDefinition).editorConfig(editorConfig);
+
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,150 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import {
+  registerComponent,
+  Prop,
+  Section,
+  PropsCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Variants
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+// Toggle Component
+type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>;
+
+function Toggle({ className, variant, size, ...props }: ToggleProps) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<ToggleProps> = {
+  general: Section.category(PropsCategory.Content).children({
+    pressed: Prop.boolean().propertiesPanel({
+      label: "Pressed",
+      controlType: "SWITCH",
+      description:
+        "The controlled pressed state of the toggle. Must be used in conjunction with `onPressedChange`",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+    }),
+    children: Prop.jsx().propertiesPanel({
+      label: "Text",
+      description: "The text content of the toggle button",
+    }),
+    defaultPressed: Prop.boolean()
+      .propertiesPanel({
+        label: "Default pressed",
+        controlType: "SWITCH",
+        description: "Whether the toggle is pressed by default",
+      })
+      .docs({
+        description: "Use when you do not need to control its pressed state",
+      }),
+  }),
+
+  appearance: Section.category(PropsCategory.Appearance).children({
+    variant: Prop.string<"default" | "outline">().propertiesPanel({
+      label: "Variant",
+      controlType: "DROP_DOWN",
+      description: "Visual style variant of the toggle",
+      options: [
+        {
+          label: "Default",
+          value: "default",
+        },
+        {
+          label: "Outline",
+          value: "outline",
+        },
+      ],
+    }),
+    size: Prop.string<"default" | "sm" | "lg">().propertiesPanel({
+      label: "Size",
+      controlType: "DROP_DOWN",
+      description: "Size variant of the toggle",
+      options: [
+        {
+          label: "Small",
+          value: "sm",
+        },
+        {
+          label: "Default",
+          value: "default",
+        },
+        {
+          label: "Large",
+          value: "lg",
+        },
+      ],
+    }),
+  }),
+
+  interaction: Section.category(PropsCategory.Interaction).children({
+    disabled: Prop.boolean().propertiesPanel({
+      label: "Disabled",
+      controlType: "SWITCH",
+      description: "Whether the toggle is disabled",
+    }),
+  }),
+
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onPressedChange: Prop.eventHandler().propertiesPanel({
+      label: "onPressedChange",
+      description: "Triggered when the toggle pressed state changes",
+      computedArgs: [
+        {
+          name: "pressed",
+          type: "boolean",
+          description: "Whether the toggle is pressed",
+        },
+      ],
+    }),
+  }),
+};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "switch",
+  description: "A two-state button that can be either on or off",
+  isDroppable: false,
+};
+
+// Registration
+registerComponent(Toggle, propertiesDefinition).editorConfig(editorConfig);
+
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,175 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import {
+  registerComponent,
+  Prop,
+  Section,
+  PropsCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+
+// Properties Definition for Tooltip (root)
+const tooltipPropertiesDefinition: PropertiesPanelDefinition<
+  React.ComponentPropsWithoutRef<typeof Tooltip>
+> = {
+  general: Section.category(PropsCategory.Content).children({
+    open: Prop.boolean().propertiesPanel({
+      label: "Open",
+      controlType: "SWITCH",
+      description:
+        "The controlled open state of the tooltip. 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 tooltip is open by default",
+    }),
+    delayDuration: Prop.number().propertiesPanel({
+      label: "Delay duration",
+      description:
+        "The duration from when the mouse enters a tooltip trigger until the tooltip opens (in milliseconds)",
+    }),
+    disableHoverableContent: Prop.boolean().propertiesPanel({
+      label: "Disable hoverable content",
+      description:
+        "When true, trying to hover the content will result in the tooltip closing",
+    }),
+  }),
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onOpenChange: Prop.eventHandler().propertiesPanel({
+      label: "onOpenChange",
+      computedArgs: [
+        {
+          name: "open",
+          type: "boolean",
+          description: "Whether the tooltip is open",
+        },
+      ],
+    }),
+  }),
+};
+
+const tooltipEditorConfig: EditorConfig = {
+  icon: "modal",
+  isDetached: true,
+  isDraggable: false,
+  description:
+    "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+};
+
+// Properties Definition for TooltipContent
+const tooltipContentPropertiesDefinition: PropertiesPanelDefinition<
+  React.ComponentPropsWithoutRef<typeof TooltipContent>
+> = {
+  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",
+    }),
+    avoidCollisions: Prop.boolean().propertiesPanel({
+      label: "Avoid collisions",
+      description:
+        "Whether the tooltip should avoid collisions with other elements",
+    }),
+  }),
+};
+
+const childrenPropertiesDefinition = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx(),
+  }),
+};
+
+// Register Components
+registerComponent(Tooltip, tooltipPropertiesDefinition).editorConfig(
+  tooltipEditorConfig,
+);
+registerComponent(TooltipTrigger, childrenPropertiesDefinition);
+registerComponent(TooltipContent, tooltipContentPropertiesDefinition);

package/dist/migration-templates/app-fullstack/client/hooks/useApi.ts

@@ -0,0 +1,25 @@
+/**
+ * Typed `useApi` wrapper backed by the app's API registry.
+ *
+ * This gives compile-time inference for API names, inputs, and outputs based on
+ * `server/apis/index.ts`.
+ *
+ * You generally do not need to modify this file. Add APIs to
+ * `server/apis/index.ts` and import `useApi` from here.
+ *
+ * @example
+ * ```typescript
+ * import { useApi } from "@/hooks/useApi.js";
+ *
+ * const { run } = useApi("GetUsers");
+ * // `run` is inferred from the `GetUsers` entry in `server/apis/index.ts`
+ * ```
+ */
+
+import { useTypedApi } from "@superblocksteam/library";
+
+import type { ApiRegistry } from "../../server/apis/index.js"; // Type-only import
+
+/** Typed `useApi` with inference from `ApiRegistry`. */
+// eslint-disable-next-line react-hooks/rules-of-hooks -- useTypedApi is a type-only factory (no React hooks are called at runtime)
+export const useApi = useTypedApi<ApiRegistry>();

package/dist/migration-templates/app-fullstack/client/hooks/useApiData.ts

@@ -0,0 +1,10 @@
+import { useTypedApiData } from "@superblocksteam/library";
+
+/**
+ * Typed `useApiData` wrapper backed by the app's API registry.
+ */
+import type { ApiRegistry } from "../../server/apis/index.js";
+
+/** Typed `useApiData` with inference from `ApiRegistry`. */
+// eslint-disable-next-line react-hooks/rules-of-hooks -- useTypedApiData is a type-only factory (no React hooks are called at runtime)
+export const useApiData = useTypedApiData<ApiRegistry>();