@licklist/design 0.78.5-dev.106 → 0.78.5-dev.107

package/src/v2/shadcn/components/ui/sheet.stories.tsx

@@ -1,115 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-  SheetClose,
-} from './sheet'
-import { Button } from './button'
-
-function SheetRight() {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open Sheet (Right)</Button>
-      </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Edit profile</SheetTitle>
-          <SheetDescription>Make changes to your profile here.</SheetDescription>
-        </SheetHeader>
-        <div className="py-4">
-          <p className="text-sm text-label-secondary">Sheet content goes here.</p>
-        </div>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </SheetClose>
-          <Button>Save changes</Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-function SheetLeft() {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open Sheet (Left)</Button>
-      </SheetTrigger>
-      <SheetContent side="left">
-        <SheetHeader>
-          <SheetTitle>Navigation</SheetTitle>
-          <SheetDescription>Browse the application sections.</SheetDescription>
-        </SheetHeader>
-        <div className="py-4 space-y-2">
-          <p className="text-sm">Dashboard</p>
-          <p className="text-sm">Users</p>
-          <p className="text-sm">Settings</p>
-        </div>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-function SheetTop() {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open Sheet (Top)</Button>
-      </SheetTrigger>
-      <SheetContent side="top">
-        <SheetHeader>
-          <SheetTitle>Notification</SheetTitle>
-          <SheetDescription>You have new updates available.</SheetDescription>
-        </SheetHeader>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-function SheetBottom() {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open Sheet (Bottom)</Button>
-      </SheetTrigger>
-      <SheetContent side="bottom">
-        <SheetHeader>
-          <SheetTitle>Actions</SheetTitle>
-          <SheetDescription>Choose an action to perform.</SheetDescription>
-        </SheetHeader>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-export default {
-  title: 'v2/Shadcn/Sheet',
-  component: Sheet,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Sheet>
-
-type Story = StoryObj<typeof Sheet>
-
-export const Right: Story = {
-  render: () => React.createElement(SheetRight),
-}
-
-export const Left: Story = {
-  render: () => React.createElement(SheetLeft),
-}
-
-export const Top: Story = {
-  render: () => React.createElement(SheetTop),
-}
-
-export const Bottom: Story = {
-  render: () => React.createElement(SheetBottom),
-}

package/src/v2/shadcn/components/ui/sheet.tsx

@@ -1,107 +0,0 @@
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { IconCross } from "../../../icons";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-shade-darker/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-surface-primary p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b border-border-primary data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t border-border-primary data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r border-border-primary data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l border-border-primary data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-);
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
-  ({ side = "right", className, children, ...props }, ref) => (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-        {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-surface-primary transition-opacity data-[state=open]:bg-surface-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-actions-regular focus:ring-offset-2 disabled:pointer-events-none">
-          <IconCross className="h-4 w-4 fill-fill-primary" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  ),
-);
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-label-primary", className)} {...props} />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-label-secondary", className)} {...props} />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-};

package/src/v2/shadcn/components/ui/sidebar.stories.tsx

@@ -1,167 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import {
-  Sidebar,
-  SidebarProvider,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarMenuBadge,
-  SidebarHeader,
-  SidebarFooter,
-  SidebarSeparator,
-  SidebarInset,
-  SidebarTrigger,
-  SidebarMenuSkeleton,
-} from './sidebar'
-
-export default {
-  title: 'v2/Shadcn/Sidebar',
-  component: Sidebar,
-  parameters: { layout: 'fullscreen' },
-} as Meta<typeof Sidebar>
-
-type Story = StoryObj<typeof Sidebar>
-
-export const Default: Story = {
-  render: () => (
-    <SidebarProvider>
-      <Sidebar>
-        <SidebarHeader>
-          <div className="flex items-center gap-2 px-2 py-1">
-            <div className="h-6 w-6 rounded bg-fill-action" />
-            <span className="text-sm font-semibold">App Name</span>
-          </div>
-        </SidebarHeader>
-        <SidebarSeparator />
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <SidebarMenuItem>
-                  <SidebarMenuButton isActive>Dashboard</SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton>Users</SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton>
-                    Messages
-                    <SidebarMenuBadge>3</SidebarMenuBadge>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton>Settings</SidebarMenuButton>
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-          <SidebarGroup>
-            <SidebarGroupLabel>Resources</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <SidebarMenuItem>
-                  <SidebarMenuButton>Documentation</SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton>Support</SidebarMenuButton>
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-        <SidebarFooter>
-          <div className="px-2 py-1 text-xs text-label-secondary">v1.0.0</div>
-        </SidebarFooter>
-      </Sidebar>
-      <SidebarInset>
-        <header className="flex h-16 items-center gap-2 border-b border-border-primary px-4">
-          <SidebarTrigger />
-          <span className="text-sm font-medium">Page Title</span>
-        </header>
-        <div className="p-4">
-          <p className="text-sm text-label-secondary">Main content area</p>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  ),
-}
-
-export const Loading: Story = {
-  render: () => (
-    <SidebarProvider>
-      <Sidebar>
-        <SidebarHeader>
-          <div className="flex items-center gap-2 px-2 py-1">
-            <div className="h-6 w-6 rounded bg-surface-secondary animate-pulse" />
-            <div className="h-4 w-24 rounded bg-surface-secondary animate-pulse" />
-          </div>
-        </SidebarHeader>
-        <SidebarSeparator />
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {Array.from({ length: 5 }).map((_, i) => (
-                  <SidebarMenuItem key={i}>
-                    <SidebarMenuSkeleton showIcon />
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-      <SidebarInset>
-        <div className="p-4">
-          <p className="text-sm text-label-secondary">Loading state</p>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  ),
-}
-
-export const Collapsed: Story = {
-  render: () => (
-    <SidebarProvider defaultOpen={false}>
-      <Sidebar collapsible="icon">
-        <SidebarHeader>
-          <div className="flex items-center justify-center py-1">
-            <div className="h-6 w-6 rounded bg-fill-action" />
-          </div>
-        </SidebarHeader>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <SidebarMenuItem>
-                  <SidebarMenuButton tooltip="Dashboard">D</SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton tooltip="Users">U</SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton tooltip="Settings">S</SidebarMenuButton>
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-      <SidebarInset>
-        <header className="flex h-16 items-center gap-2 border-b border-border-primary px-4">
-          <SidebarTrigger />
-          <span className="text-sm font-medium">Collapsed Sidebar</span>
-        </header>
-        <div className="p-4">
-          <p className="text-sm text-label-secondary">Sidebar is collapsed to icon mode</p>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  ),
-}