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

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

@@ -1,226 +1,31 @@
-/* eslint-disable react-refresh/only-export-components */
 "use client";
 
-import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { Slot } from "@radix-ui/react-slot";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
-import { XIcon } from "lucide-react";
 import React from "react";
 
-import { registerComponent } from "@superblocksteam/library";
-import {
-  Prop,
-  Section,
-  PropsCategory,
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
 import { useIsMobile } from "@/components/hooks/use-mobile";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-// Internal Sheet Components (for sidebar mobile view)
-function SidebarSheet({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
-}
-
-function SidebarSheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
-}
-
-function SidebarSheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
-}
-
-function SidebarSheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
-}
-
-function SidebarSheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SidebarSheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left";
-}) {
-  return (
-    <SidebarSheetPortal>
-      <SidebarSheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SidebarSheetPortal>
-  );
-}
-
-function SidebarSheetHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarSheetFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarSheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function SidebarSheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-// Internal Skeleton Component
-function SidebarSkeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  );
-}
-
-// Internal Tooltip Components
-function SidebarTooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function SidebarTooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <SidebarTooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </SidebarTooltipProvider>
-  );
-}
-
-function SidebarTooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function SidebarTooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground 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-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-// Context
 interface SidebarContextProps {
   state: "expanded" | "collapsed";
   open: boolean;
@@ -241,7 +46,6 @@ function useSidebar() {
   return context;
 }
 
-// Constants
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
@@ -249,7 +53,6 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
-// Provider
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -315,7 +118,7 @@ function SidebarProvider({
   );
   return (
     <SidebarContext.Provider value={contextValue}>
-      <SidebarTooltipProvider delayDuration={0}>
+      <TooltipProvider delayDuration={0}>
         <div
           data-slot="sidebar-wrapper"
           style={
@@ -333,18 +136,11 @@ function SidebarProvider({
         >
           {children}
         </div>
-      </SidebarTooltipProvider>
+      </TooltipProvider>
     </SidebarContext.Provider>
   );
 }
 
-// Sidebar Component
-type SidebarProps = React.ComponentProps<"div"> & {
-  side?: "left" | "right";
-  variant?: "sidebar" | "floating" | "inset";
-  collapsible?: "offcanvas" | "icon" | "none";
-};
-
 function Sidebar({
   side = "left",
   variant = "sidebar",
@@ -374,8 +170,8 @@ function Sidebar({
   }
   if (isMobile) {
     return (
-      <SidebarSheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SidebarSheetContent
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
@@ -387,15 +183,13 @@ function Sidebar({
           }
           side={side}
         >
-          <SidebarSheetHeader className="sr-only">
-            <SidebarSheetTitle>Sidebar</SidebarSheetTitle>
-            <SidebarSheetDescription>
-              Displays the mobile sidebar.
-            </SidebarSheetDescription>
-          </SidebarSheetHeader>
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
           <div className="flex h-full w-full flex-col">{children}</div>
-        </SidebarSheetContent>
-      </SidebarSheet>
+        </SheetContent>
+      </Sheet>
     );
   }
   return (
@@ -725,15 +519,15 @@ function SidebarMenuButton({
     };
   }
   return (
-    <SidebarTooltip>
-      <SidebarTooltipTrigger asChild>{button}</SidebarTooltipTrigger>
-      <SidebarTooltipContent
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
         side="right"
         align="center"
         hidden={state !== "collapsed" || isMobile}
         {...tooltip}
       />
-    </SidebarTooltip>
+    </Tooltip>
   );
 }
 
@@ -807,12 +601,12 @@ function SidebarMenuSkeleton({
       {...props}
     >
       {showIcon && (
-        <SidebarSkeleton
+        <Skeleton
           className="size-4 rounded-md"
           data-sidebar="menu-skeleton-icon"
         />
       )}
-      <SidebarSkeleton
+      <Skeleton
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={
@@ -885,26 +679,6 @@ function SidebarMenuSubButton({
   );
 }
 
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<SidebarProps> = {
-  general: Section.category(PropsCategory.Content).children({
-    side: Prop.string<"left" | "right">(),
-    variant: Prop.string<"sidebar" | "floating" | "inset">(),
-    collapsible: Prop.string<"none" | "icon" | "offcanvas">(),
-    children: Prop.jsx(),
-  }),
-};
-
-// Editor Configuration
-const editorConfig: EditorConfig = {
-  icon: "custom",
-  description:
-    "A flexible sidebar component for navigation and content organization",
-};
-
-// Registration
-registerComponent(Sidebar, propertiesDefinition).editorConfig(editorConfig);
-
 export {
   Sidebar,
   SidebarProvider,
@@ -929,14 +703,5 @@ export {
   SidebarMenuSub,
   SidebarMenuSubItem,
   SidebarMenuSubButton,
-  SidebarSheetTrigger,
-  SidebarSheetClose,
-  SidebarSheetPortal,
-  SidebarSheetOverlay,
-  SidebarSheetContent,
-  SidebarSheetHeader,
-  SidebarSheetTitle,
-  SidebarSheetDescription,
-  SidebarSheetFooter,
   useSidebar,
 };

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

@@ -1,18 +1,8 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 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";
 
-// Main Component
 function Slider({
   className,
   defaultValue,
@@ -76,39 +66,4 @@ function Slider({
   );
 }
 
-// Types
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<
-  React.ComponentProps<typeof SliderPrimitive.Root>
-> = {
-  general: Section.category(PropsCategory.Content).children({
-    value: Prop.array<number>(),
-    defaultValue: Prop.array<number>(),
-    min: Prop.number(),
-    max: Prop.number(),
-    step: Prop.number(),
-    minStepsBetweenThumbs: Prop.number(),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    orientation: Prop.string<"horizontal" | "vertical">(),
-    inverted: Prop.boolean(),
-  }),
-  interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean(),
-  }),
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onValueChange: Prop.eventHandler(),
-    onValueCommit: Prop.eventHandler(),
-  }),
-};
-
-// Editor Configuration
-const editorConfig: EditorConfig = {
-  icon: "custom",
-  hasExtendedClickArea: true,
-};
-
-// Registration
-registerComponent(Slider, propertiesDefinition).editorConfig(editorConfig);
-
 export { Slider };

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

@@ -1,18 +1,8 @@
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 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";
 
-// Main Component
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
@@ -34,35 +24,4 @@ const Switch = React.forwardRef<
 ));
 Switch.displayName = "Switch";
 
-// Types
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<
-  React.ComponentProps<typeof SwitchPrimitives.Root>
-> = {
-  general: Section.category(PropsCategory.Content).children({
-    checked: Prop.boolean(),
-    defaultChecked: Prop.boolean().docs({
-      description: "Use when you do not need to control its pressed state",
-    }),
-  }),
-
-  interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean(),
-  }),
-
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onCheckedChange: Prop.eventHandler(),
-  }),
-};
-
-// Editor Configuration
-const editorConfig: EditorConfig = {
-  icon: "switch",
-  description:
-    "A control that allows the user to toggle between checked and not checked",
-};
-
-// Registration
-registerComponent(Switch, propertiesDefinition).editorConfig(editorConfig);
-
 export { Switch };

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

@@ -1,14 +1,7 @@
 import React from "react";
 
-import { registerComponent } from "@superblocksteam/library";
-import {
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
 import { cn } from "@/lib/utils";
 
-// Table Component
 function Table({
   className,
   rootStyle,
@@ -108,31 +101,6 @@ function TableCaption({
     />
   );
 }
-
-type TableProps = React.ComponentProps<typeof Table>;
-
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<TableProps> = {};
-
-// Editor Configuration
-const editorConfig: EditorConfig = {
-  icon: "table",
-  description: "A table component for displaying data",
-};
-const tableElementConfig: EditorConfig = {
-  icon: "container",
-  description: "A table element component for displaying data",
-};
-
-// Registration
-registerComponent(Table, propertiesDefinition).editorConfig(editorConfig);
-registerComponent(TableHeader).editorConfig(tableElementConfig);
-registerComponent(TableBody).editorConfig(tableElementConfig);
-registerComponent(TableFooter).editorConfig(tableElementConfig);
-registerComponent(TableHead).editorConfig(tableElementConfig);
-registerComponent(TableRow).editorConfig(tableElementConfig);
-registerComponent(TableCell).editorConfig(tableElementConfig);
-registerComponent(TableCaption).editorConfig(tableElementConfig);
 export {
   Table,
   TableHeader,

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

@@ -1,12 +1,6 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import React from "react";
 
-import { registerComponent } from "@superblocksteam/library";
-import {
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
 import { cn } from "@/lib/utils";
 
 function Tabs({
@@ -67,21 +61,4 @@ function TabsContent({
   );
 }
 
-type TabsProps = React.ComponentProps<typeof Tabs>;
-
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<TabsProps> = {};
-
-// Editor Configuration
-const editorConfig: EditorConfig = {
-  icon: "tabs",
-  description: "A tabs component for displaying content in a tabbed interface",
-};
-
-// Registration
-registerComponent(Tabs, propertiesDefinition).editorConfig(editorConfig);
-registerComponent(TabsList);
-registerComponent(TabsTrigger);
-registerComponent(TabsContent);
-
 export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -1,17 +1,7 @@
 import type * as React from "react";
 
-import { registerComponent } from "@superblocksteam/library";
-import {
-  Prop,
-  Section,
-  PropsCategory,
-  type PropertiesPanelDefinition,
-} from "@superblocksteam/library";
-import { type EditorConfig } from "@superblocksteam/library";
-
 import { cn } from "@/lib/utils";
 
-// Main Component
 function Textarea({
   className,
   style,
@@ -30,42 +20,4 @@ function Textarea({
   );
 }
 
-// Types
-type TextareaProps = React.ComponentProps<"textarea">;
-
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<TextareaProps> = {
-  general: Section.category(PropsCategory.Content).children({
-    value: Prop.string(),
-    defaultValue: Prop.string(),
-    placeholder: Prop.string(),
-    rows: Prop.number(),
-  }),
-
-  interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean(),
-    readOnly: Prop.boolean(),
-    autoFocus: Prop.boolean(),
-    minLength: Prop.number(),
-    maxLength: Prop.number(),
-  }),
-
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onChange: Prop.eventHandler(),
-    onFocus: Prop.eventHandler(),
-    onBlur: Prop.eventHandler(),
-    onKeyDown: Prop.eventHandler(),
-  }),
-};
-
-// Editor Configuration
-const editorConfig: EditorConfig = {
-  icon: "input",
-  description:
-    "A multi-line textarea component for collecting longer text input",
-};
-
-// Registration
-registerComponent(Textarea, propertiesDefinition).editorConfig(editorConfig);
-
 export { Textarea };