@superblocksteam/vite-plugin-file-sync 2.0.170 → 2.0.171-next.1

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

@@ -1,15 +1,6 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import React from "react";
 
-import {
-  registerComponent,
-  Prop,
-  Section,
-  PropsCategory,
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
 import { cn } from "@/lib/utils";
 
 function Avatar({
@@ -58,46 +49,3 @@ function AvatarFallback({
 }
 
 export { Avatar, AvatarImage, AvatarFallback };
-
-// Properties Definition for Avatar (root)
-const avatarPropertiesDefinition: PropertiesPanelDefinition<
-  React.ComponentPropsWithoutRef<typeof Avatar>
-> = {
-  general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx(),
-  }),
-};
-
-const avatarEditorConfig: EditorConfig = {
-  icon: "image",
-  description: "An image element with a fallback for representing the user",
-};
-
-// Properties Definition for AvatarImage
-const avatarImagePropertiesDefinition: PropertiesPanelDefinition<
-  React.ComponentPropsWithoutRef<typeof AvatarImage>
-> = {
-  general: Section.category(PropsCategory.Content).children({
-    src: Prop.string(),
-    alt: Prop.string(),
-  }),
-};
-
-// Properties Definition for AvatarFallback
-const avatarFallbackPropertiesDefinition: PropertiesPanelDefinition<
-  React.ComponentPropsWithoutRef<typeof AvatarFallback>
-> = {
-  general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx(),
-  }),
-  interaction: Section.category(PropsCategory.Interaction).children({
-    delayMs: Prop.number(),
-  }),
-};
-
-// Register Components
-registerComponent(Avatar, avatarPropertiesDefinition).editorConfig(
-  avatarEditorConfig,
-);
-registerComponent(AvatarImage, avatarImagePropertiesDefinition);
-registerComponent(AvatarFallback, avatarFallbackPropertiesDefinition);

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

@@ -1,22 +1,9 @@
-/* eslint-disable react-refresh/only-export-components */
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import type { IconName } from "lucide-react/dynamic";
 import type * as React from "react";
 
-import { registerComponent } from "@superblocksteam/library";
-import {
-  Prop,
-  Section,
-  PropsCategory,
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
-import { Icon as IconComponent } from "@/components/ui/icon";
 import { cn } from "@/lib/utils";
 
-// Variants
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
   {
@@ -38,83 +25,22 @@ const badgeVariants = cva(
   },
 );
 
-type BadgeVariantProps = VariantProps<typeof badgeVariants>;
-
-// Base Badge Component
-interface BaseBadgeProps
-  extends React.ComponentPropsWithoutRef<"span">, BadgeVariantProps {
-  asChild?: boolean;
-}
-
-function BadgeComponent({
+function Badge({
   className,
   variant,
   asChild = false,
   ...props
-}: BaseBadgeProps) {
+}: React.ComponentPropsWithoutRef<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
   const Comp = asChild ? Slot : "span";
+
   return (
     <Comp
       data-slot="badge"
-      className={cn(
-        badgeVariants({
-          variant,
-        }),
-        className,
-      )}
+      className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
   );
 }
 
-// Badge with Icon Support
-type BadgeProps = React.ComponentPropsWithoutRef<typeof BadgeComponent> & {
-  icon?: React.ReactElement | IconName;
-  onClick?: () => void;
-} & Record<string, unknown>;
-
-const Badge = ({ icon, children, ...props }: BadgeProps) => {
-  if (icon && typeof icon === "string") {
-    icon = <IconComponent icon={icon as IconName} />;
-  }
-  return (
-    <BadgeComponent {...props}>
-      {icon}
-      {children}
-    </BadgeComponent>
-  );
-};
-
-type BadgeVariant = NonNullable<BadgeVariantProps["variant"]>;
-
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<BadgeProps> = {
-  general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx(),
-    icon: Prop.any<JSX.Element | IconName>().docs({
-      description:
-        "The icon to display in the component. You can use the Lucide icon library to find the icon you want.",
-    }),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    variant: Prop.string<BadgeVariant>(),
-  }),
-
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler(),
-  }),
-};
-
-// Editor Template
-// Editor Config
-const editorConfig: EditorConfig = {
-  icon: "custom",
-  isDroppable: false,
-  description:
-    "A versatile badge component for displaying status, labels, or tags",
-};
-
-// Register Component
-registerComponent(Badge, propertiesDefinition).editorConfig(editorConfig);
-
 export { Badge, badgeVariants };

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

@@ -1,34 +1,19 @@
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
-import React from "react";
-
-import { registerComponent } from "@superblocksteam/library";
-import {
-  Prop,
-  Section,
-  PropsCategory,
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-import { Link, type LinkProps } from "./link";
-
-// Base Breadcrumb Primitives
-function BreadcrumbPrimitive({ ...props }: React.ComponentProps<"nav">) {
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
-function BreadcrumbListPrimitive({
-  className,
-  ...props
-}: React.ComponentProps<"ol">) {
+function BreadcrumbList({ 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",
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
         className,
       )}
       {...props}
@@ -36,10 +21,7 @@ function BreadcrumbListPrimitive({
   );
 }
 
-function BreadcrumbItemComponent({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="breadcrumb-item"
@@ -49,41 +31,38 @@ function BreadcrumbItemComponent({
   );
 }
 
-function BreadcrumbLinkPrimitive({
+function BreadcrumbLink({
   asChild,
   className,
   ...props
-}: React.ComponentPropsWithRef<"a"> & {
+}: React.ComponentPropsWithoutRef<"a"> & {
   asChild?: boolean;
 }) {
-  const Comp: any = asChild ? Slot : "a";
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   );
 }
 
-function BreadcrumbPageComponent({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function BreadcrumbPage({ 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)}
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   );
 }
 
-function BreadcrumbSeparatorComponent({
+function BreadcrumbSeparator({
   children,
   className,
   ...props
@@ -96,7 +75,7 @@ function BreadcrumbSeparatorComponent({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {React.isValidElement(children) ? children : <ChevronRight />}
+      {children ?? <ChevronRight />}
     </li>
   );
 }
@@ -119,135 +98,9 @@ function BreadcrumbEllipsis({
   );
 }
 
-// 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(),
-  }),
-};
-
-// 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,
+  BreadcrumbList,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbPage,

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

@@ -1,20 +1,9 @@
-/* eslint-disable react-refresh/only-export-components */
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 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";
 
-// 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",
   {
@@ -46,7 +35,6 @@ const buttonVariants = cva(
   },
 );
 
-// Button Component
 const Button = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button"> &
@@ -80,44 +68,4 @@ const Button = React.forwardRef<
 );
 
 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(),
-  }),
-
-  appearance: Section.category(PropsCategory.Appearance).children({
-    variant: Prop.string<
-      "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
-    >(),
-    size: Prop.string<"default" | "sm" | "lg" | "icon">(),
-  }),
-
-  interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean(),
-  }),
-
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler(),
-  }),
-};
-
-// 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 };
+export { Button, buttonVariants };

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

@@ -4,31 +4,12 @@ import {
   ChevronRightIcon,
 } from "lucide-react";
 import React from "react";
-import type { ComponentPropsWithoutRef } from "react";
 import type { DayButton } from "react-day-picker";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 
-import { registerComponent } from "@superblocksteam/library";
-import {
-  Prop,
-  Section,
-  PropsCategory,
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
-import {
-  Button,
-  buttonVariants,
-  type ButtonVariantProps,
-} from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-// Base Calendar Component
-type BaseCalendarProps = React.ComponentPropsWithoutRef<typeof DayPicker> & {
-  buttonVariant?: ButtonVariantProps["variant"];
-};
-
 function CalendarDayButton({
   className,
   day,
@@ -76,7 +57,9 @@ function Calendar({
   formatters,
   components,
   ...props
-}: BaseCalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
   const defaultClassNames = getDefaultClassNames();
 
   return (
@@ -226,39 +209,4 @@ function Calendar({
   );
 }
 
-// Calendar Component with Extended Props for Registration
-type ComponentProps = ComponentPropsWithoutRef<typeof Calendar> & {
-  selected?: string;
-  onSelect?: (date?: Date) => void;
-};
-
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<ComponentProps> = {
-  general: Section.category(PropsCategory.Content).children({
-    selected: Prop.string(),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    buttonVariant: Prop.string<
-      "ghost" | "outline" | "default" | "secondary" | "destructive"
-    >(),
-    captionLayout: Prop.string<"dropdown" | "label">(),
-  }),
-  interaction: Section.category(PropsCategory.Interaction).children({
-    showOutsideDays: Prop.boolean(),
-    disabled: Prop.boolean(),
-  }),
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onSelect: Prop.eventHandler(),
-  }),
-};
-
-// Editor Template
-// Editor Config
-const editorConfig: EditorConfig = {
-  icon: "date-picker",
-};
-
-// Register Component
-registerComponent(Calendar, propertiesDefinition).editorConfig(editorConfig);
-
 export { Calendar, CalendarDayButton };

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

@@ -1,17 +1,7 @@
 import type * 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";
 
-// Base Card Components
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -91,30 +81,6 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-// Card Component with Registration
-type CardProps = React.ComponentProps<"div"> & { onClick?: () => void };
-
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<CardProps> = {
-  general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx(),
-  }),
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler(),
-  }),
-};
-
-// Editor Template
-// Editor Config
-const editorConfig: EditorConfig = {
-  icon: "container",
-  description:
-    "Cards are a container component with built-in styling for grouping related content in an elevated box",
-};
-
-// Register Component
-registerComponent(Card, propertiesDefinition).editorConfig(editorConfig);
-
 export {
   Card,
   CardHeader,

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

@@ -1,4 +1,3 @@
-/* eslint-disable react-refresh/only-export-components */
 import React from "react";
 import * as RechartsPrimitive from "recharts";
 
@@ -7,38 +6,6 @@ import { cn } from "@/lib/utils";
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
 
-const sanitizeForCssVar = (name: string): string => {
-  const sanitized = String(name)
-    .replace(/[^a-zA-Z0-9_-]/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .replace(/-{2,}/g, "-")
-    .toLowerCase();
-
-  return /^[0-9]/.test(sanitized) || !sanitized
-    ? `key-${sanitized}`
-    : sanitized;
-};
-
-const fixColorFormat = (color: string): string => {
-  if (!color) return color;
-  const match = color.match(/var\(--chart-\d+\)/);
-  if (match && color.startsWith("hsl(")) {
-    return match[0];
-  }
-  return color;
-};
-
-const createKeyMapping = (
-  chartConfig: Record<string, any>,
-): Map<string, string> => {
-  const mapping = new Map<string, string>();
-  Object.keys(chartConfig).forEach((key) => {
-    const sanitized = sanitizeForCssVar(key);
-    mapping.set(sanitized, key);
-  });
-  return mapping;
-};
-
 export type ChartConfig = Record<
   string,
   {
@@ -373,21 +340,9 @@ function getPayloadConfigFromPayload(
     ] as string;
   }
 
-  if (configLabelKey in config) {
-    return config[configLabelKey];
-  }
-  if (key in config) {
-    return config[key];
-  }
-
-  const sanitizedKey = sanitizeForCssVar(key);
-  const sanitizedConfigLabelKey = sanitizeForCssVar(configLabelKey);
-
-  if (sanitizedConfigLabelKey in config) {
-    return config[sanitizedConfigLabelKey];
-  }
-
-  return config[sanitizedKey];
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -397,7 +352,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-  sanitizeForCssVar,
-  fixColorFormat,
-  createKeyMapping,
 };