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

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

@@ -0,0 +1,259 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+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";
+
+import { Link, type LinkProps } from "./link";
+
+// Base Breadcrumb Primitives
+function BreadcrumbPrimitive({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbListPrimitive({
+  className,
+  ...props
+}: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItemComponent({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLinkPrimitive({
+  asChild,
+  className,
+  ...props
+}: React.ComponentPropsWithRef<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp: any = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPageComponent({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparatorComponent({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {React.isValidElement(children) ? children : <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+// Main Breadcrumb Component
+type BreadcrumbProps = React.ComponentPropsWithoutRef<
+  typeof BreadcrumbPrimitive
+>;
+
+const Breadcrumb = ({
+  children,
+  style,
+  className,
+  ...props
+}: BreadcrumbProps) => {
+  return (
+    <BreadcrumbPrimitive {...props} style={style} className={className}>
+      <BreadcrumbListPrimitive>{children}</BreadcrumbListPrimitive>
+    </BreadcrumbPrimitive>
+  );
+};
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<BreadcrumbProps> = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx().propertiesPanel({
+      label: "Items",
+      description: "The items to display",
+    }),
+  }),
+};
+
+// Editor Config
+const editorConfig: EditorConfig = {
+  icon: "link",
+  description:
+    "Displays the path to the current resource using a hierarchy of links",
+  isDroppable: false,
+};
+
+// Register Main Component
+registerComponent(Breadcrumb, propertiesDefinition).editorConfig(editorConfig);
+
+// Register Child Components
+
+// BreadcrumbItem Component
+const propertiesDefinitionItem = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx(),
+  }),
+};
+
+type BreadcrumbItemProps = React.ComponentPropsWithoutRef<
+  typeof BreadcrumbItemComponent
+>;
+
+const BreadcrumbItem = ({ children, ...props }: BreadcrumbItemProps) => {
+  return (
+    <BreadcrumbItemComponent {...props}>{children}</BreadcrumbItemComponent>
+  );
+};
+
+registerComponent(BreadcrumbItem, propertiesDefinitionItem).editorConfig({
+  isDroppable: false,
+  isDraggable: false,
+});
+
+// BreadcrumbLink Component
+const propertiesDefinitionLink = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx(),
+  }),
+};
+
+const BreadcrumbLink = ({ children, className, ...props }: LinkProps) => {
+  return (
+    <BreadcrumbLinkPrimitive asChild className={className}>
+      <Link {...props} applyLinkStyles={false}>
+        {children}
+      </Link>
+    </BreadcrumbLinkPrimitive>
+  );
+};
+
+registerComponent(BreadcrumbLink, propertiesDefinitionLink).editorConfig({
+  isDroppable: false,
+  isDraggable: false,
+});
+
+// BreadcrumbPage Component
+const propertiesDefinitionPage = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx(),
+  }),
+};
+
+type BreadcrumbPageProps = React.ComponentPropsWithoutRef<
+  typeof BreadcrumbPageComponent
+>;
+
+const BreadcrumbPage = ({ children, ...props }: BreadcrumbPageProps) => {
+  return (
+    <BreadcrumbPageComponent {...props}>{children}</BreadcrumbPageComponent>
+  );
+};
+
+registerComponent(BreadcrumbPage, propertiesDefinitionPage).editorConfig({
+  isDroppable: false,
+  isDraggable: false,
+});
+
+// BreadcrumbSeparator Component
+const propertiesDefinitionSeparator = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx(),
+  }),
+};
+
+type BreadcrumbSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof BreadcrumbSeparatorComponent
+>;
+
+const BreadcrumbSeparator = ({ ...props }: BreadcrumbSeparatorProps) => {
+  return <BreadcrumbSeparatorComponent {...props} />;
+};
+
+registerComponent(
+  BreadcrumbSeparator,
+  propertiesDefinitionSeparator,
+).editorConfig({
+  isDroppable: false,
+  isDraggable: false,
+});
+
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

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

@@ -0,0 +1,182 @@
+/* eslint-disable react-refresh/only-export-components */
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+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";
+
+// Variants
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+// Button Component
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(
+  (
+    {
+      className,
+      variant = "default",
+      size = "default",
+      asChild = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp: React.ElementType = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        data-variant={variant}
+        data-size={size}
+        className={cn(buttonVariants({ variant, size, className }))}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+// Properties Definition
+const propertiesDefinition: PropertiesPanelDefinition<ButtonProps> = {
+  general: Section.category(PropsCategory.Content).children({
+    children: Prop.jsx().propertiesPanel({
+      label: "Text",
+    }),
+  }),
+
+  appearance: Section.category(PropsCategory.Appearance).children({
+    variant: Prop.string<
+      "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+    >().propertiesPanel({
+      label: "Variant",
+      controlType: "DROP_DOWN",
+      options: [
+        {
+          label: "Default",
+          value: "default",
+        },
+        {
+          label: "Destructive",
+          value: "destructive",
+        },
+        {
+          label: "Outline",
+          value: "outline",
+        },
+        {
+          label: "Secondary",
+          value: "secondary",
+        },
+        {
+          label: "Ghost",
+          value: "ghost",
+        },
+        {
+          label: "Link",
+          value: "link",
+        },
+      ],
+    }),
+    size: Prop.string<"default" | "sm" | "lg" | "icon">().propertiesPanel({
+      label: "Size",
+      controlType: "DROP_DOWN",
+      options: [
+        {
+          label: "Default",
+          value: "default",
+        },
+        {
+          label: "Small",
+          value: "sm",
+        },
+        {
+          label: "Large",
+          value: "lg",
+        },
+        {
+          label: "Icon",
+          value: "icon",
+        },
+      ],
+    }),
+  }),
+
+  interaction: Section.category(PropsCategory.Interaction).children({
+    disabled: Prop.boolean().propertiesPanel({
+      label: "Disabled",
+      controlType: "SWITCH",
+      description: "Whether the button is disabled",
+    }),
+  }),
+
+  events: Section.category(PropsCategory.EventHandlers).children({
+    onClick: Prop.eventHandler().propertiesPanel({
+      label: "onClick",
+      description: "Triggered when the button is clicked",
+    }),
+  }),
+};
+
+// Editor Template
+// Editor Config
+const editorConfig: EditorConfig = {
+  icon: "button",
+  useAs: {
+    defaultButton: true,
+  },
+  isDroppable: false,
+  hasExtendedClickArea: true,
+};
+
+// Register Component
+registerComponent(Button, propertiesDefinition).editorConfig(editorConfig);
+
+export { Button, buttonVariants, type ButtonVariantProps };