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

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

@@ -0,0 +1,162 @@
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as React from "react";
+
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  registerComponent,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
+
+// Properties Definition for HoverCard (root)
+const hoverCardPropertiesDefinition: PropertiesPanelDefinition<
+  React.ComponentPropsWithoutRef<typeof HoverCard>
+> = {
+  general: Section.category(PropsCategory.Content).children({
+    open: Prop.boolean().propertiesPanel({
+      label: "Open",
+      controlType: "SWITCH",
+      description:
+        "The controlled open state of the hover card. Must be used in conjunction with `onOpenChange`.",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
+    }),
+    children: Prop.jsx(),
+    openDelay: Prop.number().propertiesPanel({
+      label: "Open delay",
+      description:
+        "The duration from when the mouse enters the trigger until the hover card opens (in milliseconds)",
+    }),
+    closeDelay: Prop.number().propertiesPanel({
+      label: "Close delay",
+      description:
+        "The duration from when the mouse leaves the trigger until the hover card closes (in milliseconds)",
+    }),
+  }),
+  interaction: Section.category(PropsCategory.Interaction).children({
+    defaultOpen: Prop.boolean().propertiesPanel({
+      label: "Default open",
+      description: "Whether the hover card is open by default",
+    }),
+  }),
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onOpenChange: Prop.eventHandler().propertiesPanel({
+      label: "onOpenChange",
+      computedArgs: [
+        {
+          name: "open",
+          type: "boolean",
+          description: "Whether the hover card is open",
+        },
+      ],
+    }),
+  }),
+};
+
+const hoverCardEditorConfig: EditorConfig = {
+  icon: "custom",
+  isDetached: true,
+  isDraggable: false,
+  description:
+    "A hover card component for displaying contextual information on hover",
+};
+
+// Properties Definition for HoverCardContent
+const hoverCardContentPropertiesDefinition: PropertiesPanelDefinition<
+  React.ComponentPropsWithoutRef<typeof HoverCardContent>
+> = {
+  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(HoverCard, hoverCardPropertiesDefinition).editorConfig(
+  hoverCardEditorConfig,
+);
+registerComponent(HoverCardTrigger, childrenPropertiesDefinition);
+registerComponent(HoverCardContent, hoverCardContentPropertiesDefinition);

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

@@ -0,0 +1,133 @@
+import { DynamicIcon, type IconName } from "lucide-react/dynamic";
+import type { ReactNode } from "react";
+import React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  tailwindStylesCategory,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+import { cn } from "@/lib/utils";
+
+// Base Icon Component
+interface IconComponentProps {
+  icon?: IconName;
+  children?: ReactNode;
+  color?: string;
+  strokeWidth?: number;
+  onClick?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+function IconComponent({
+  icon,
+  children,
+  onClick,
+  style,
+  className,
+  ...props
+}: IconComponentProps) {
+  if (icon) {
+    return (
+      <DynamicIcon
+        name={icon}
+        onClick={onClick}
+        style={style}
+        className={className}
+        {...props}
+      />
+    );
+  }
+
+  if (
+    children &&
+    (React.isValidElement(children) ||
+      (Array.isArray(children) && children.length > 0))
+  ) {
+    return (
+      <span
+        className={cn("inline-flex items-center justify-center", className)}
+        style={style}
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center justify-center border-2 border-dashed border-gray-300 text-gray-400 text-xs",
+        className,
+      )}
+      title={`Icon "${icon}" not found`}
+      onClick={onClick}
+      style={style}
+      {...props}
+    >
+      ?
+    </div>
+  );
+}
+
+// Main Component with Registration
+type IconProps = React.ComponentPropsWithoutRef<typeof IconComponent> & {
+  name?: string;
+} & Record<string, unknown>;
+
+const Icon = ({
+  children,
+  className,
+  // avoid passing name to the icon component, because we need to use icon as DynamicIcon.name
+  name: _name,
+  ...props
+}: IconProps) => {
+  return (
+    <IconComponent className={cn("w-fit h-fit", className)} {...props}>
+      {children}
+    </IconComponent>
+  );
+};
+
+// Properties Definition
+const propertiesDefinition = {
+  general: Section.category(PropsCategory.Content).children({
+    icon: Prop.string<IconName>().propertiesPanel({
+      label: "Icon name",
+      controlType: "ICON_SELECTOR",
+      description: "The name of the Lucide icon (e.g., 'heart', 'arrow-right')",
+      placeholder: "heart" satisfies IconName,
+    }),
+    // no props panel for now
+    children: Prop.jsx(),
+  }),
+  styles: tailwindStylesCategory({
+    prioritizedTailwindProperties: ["stroke", "stroke-width"],
+  }),
+
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onClick: Prop.eventHandler().propertiesPanel({
+      label: "onClick",
+      description: "Triggered when the icon is clicked",
+    }),
+  }),
+};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "custom",
+  description:
+    "A versatile icon component supporting Lucide icons and custom content",
+};
+
+// Registration
+registerComponent(Icon, propertiesDefinition).editorConfig(editorConfig);
+
+export { Icon };

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import { registerComponent } from "@superblocksteam/library";
+import {
+  Prop,
+  Section,
+  PropsCategory,
+  tailwindStylesCategory,
+  type PropertiesPanelDefinition,
+  type EditorConfig,
+} from "@superblocksteam/library";
+
+// Base Image Component
+interface ImageComponentProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt?: string;
+}
+
+const ImageComponent = React.forwardRef<HTMLImageElement, ImageComponentProps>(
+  ({ alt = "", ...props }, ref) => {
+    return <img ref={ref} alt={alt} {...props} />;
+  },
+);
+
+ImageComponent.displayName = "ImageComponent";
+
+// Main Component
+type ImageProps = React.ComponentPropsWithoutRef<typeof ImageComponent>;
+
+const Image = ({ children: _, ...props }: ImageProps) => {
+  return <ImageComponent {...props} />;
+};
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<ImageProps> = {
+  general: Section.category(PropsCategory.Content).children({
+    src: Prop.string().propertiesPanel({
+      label: "Image URL",
+      description: "The URL of the image to display",
+    }),
+    alt: Prop.string().propertiesPanel({
+      label: "Alt text",
+      description: "Alternative text for the image (for accessibility)",
+    }),
+  }),
+  styles: tailwindStylesCategory({
+    prioritizedTailwindProperties: ["rounded", "object-fit", "object-position"],
+  }),
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onClick: Prop.eventHandler().propertiesPanel({
+      label: "onClick",
+      description: "Triggered when the image is clicked",
+    }),
+  }),
+};
+
+// Editor Configuration
+const editorConfig: EditorConfig = {
+  icon: "image",
+  description:
+    "Image component that Maintains a consistent aspect ratio for content, useful for responsive images and videos",
+  isDroppable: true,
+};
+
+// Registration
+registerComponent(Image, propertiesDefinition).editorConfig(editorConfig);
+
+export { Image };

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

@@ -0,0 +1,219 @@
+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";
+
+// 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 * 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";
+
+// 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 };