arcway 0.1.0

package/client/ui/sidebar.jsx

@@ -0,0 +1,544 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { cn } from './lib/utils.js';
+import { Button } from './button.jsx';
+import { Input } from './input.jsx';
+import { Separator } from './separator.jsx';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet.jsx';
+import { Skeleton } from './skeleton.jsx';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.jsx';
+import { PanelLeftIcon } from 'lucide-react';
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+  return context;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value) => {
+      const openState = typeof value === 'function' ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? 'expanded' : 'collapsed';
+  const contextValue = React.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={{
+          '--sidebar-width': SIDEBAR_WIDTH,
+          '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+          ...style,
+        }}
+        className={cn(
+          'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  dir,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={{
+            '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+          }}
+          side={side}
+        >
+          <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>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'cn-sidebar-gap relative w-(--sidebar-width) bg-transparent',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="cn-sidebar-inner flex size-full flex-col"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn('cn-sidebar-trigger', className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon className="cn-rtl-flip" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'cn-sidebar-rail absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn('cn-sidebar-inset relative flex w-full flex-1 flex-col', className)}
+      {...props}
+    />
+  );
+}
+function SidebarInput({ className, ...props }) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('cn-sidebar-input', className)}
+      {...props}
+    />
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('cn-sidebar-header flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('cn-sidebar-footer flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+function SidebarSeparator({ className, ...props }) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('cn-sidebar-separator w-auto', className)}
+      {...props}
+    />
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'cn-sidebar-content flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('cn-sidebar-group relative flex w-full min-w-0 flex-col', className)}
+      {...props}
+    />
+  );
+}
+function SidebarGroupLabel({ className, asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'cn-sidebar-group-label flex shrink-0 items-center outline-hidden [&>svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function SidebarGroupAction({ className, asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Root : 'button';
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'cn-sidebar-group-action flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function SidebarGroupContent({ className, ...props }) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('cn-sidebar-group-content w-full', className)}
+      {...props}
+    />
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('cn-sidebar-menu flex w-full min-w-0 flex-col', className)}
+      {...props}
+    />
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  );
+}
+const sidebarMenuButtonVariants = cva(
+  'cn-sidebar-menu-button peer/menu-button flex w-full items-center  overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'cn-sidebar-menu-button-variant-default ',
+        outline: 'cn-sidebar-menu-button-variant-outline',
+      },
+      size: {
+        default: 'cn-sidebar-menu-button-size-default',
+        sm: 'cn-sidebar-menu-button-size-sm',
+        lg: 'cn-sidebar-menu-button-size-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : 'button';
+  const { isMobile, state } = useSidebar();
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+  const Comp = asChild ? Slot.Root : 'button';
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'cn-sidebar-menu-action flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+        showOnHover &&
+          'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function SidebarMenuBadge({ className, ...props }) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'cn-sidebar-menu-badge flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('cn-sidebar-menu-skeleton flex items-center', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton className="cn-sidebar-menu-skeleton-icon" data-sidebar="menu-skeleton-icon" />
+      )}
+      <Skeleton
+        className="cn-sidebar-menu-skeleton-text max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={{
+          '--skeleton-width': width,
+        }}
+      />
+    </div>
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn('cn-sidebar-menu-sub flex min-w-0 flex-col', className)}
+      {...props}
+    />
+  );
+}
+function SidebarMenuSubItem({ className, ...props }) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  );
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : 'a';
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'cn-sidebar-menu-sub-button flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};

package/client/ui/skeleton.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+function Skeleton({ className, ...props }) {
+  return (
+    <div data-slot="skeleton" className={cn('cn-skeleton animate-pulse', className)} {...props} />
+  );
+}
+export { Skeleton };

package/client/ui/skeleton.stories.js

@@ -0,0 +1,23 @@
+import { expect } from 'storybook/test';
+import { Skeleton } from './skeleton.jsx';
+const meta = {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+};
+var stdin_default = meta;
+const Default = {
+  args: { style: { width: 200, height: 20 } },
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="skeleton"]');
+    await expect(el).toBeInTheDocument();
+    await expect(el.className).toContain('animate-pulse');
+  },
+};
+const Circle = {
+  args: { style: { width: 48, height: 48, borderRadius: '50%' } },
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="skeleton"]');
+    await expect(el).toBeInTheDocument();
+  },
+};
+export { Circle, Default, stdin_default as default };

package/client/ui/slider.jsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Slider as SliderPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+  const _values = React.useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
+  );
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'cn-slider relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="cn-slider-track relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="cn-slider-range absolute select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="cn-slider-thumb block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+export { Slider };

package/client/ui/slider.stories.js

@@ -0,0 +1,31 @@
+import { expect } from 'storybook/test';
+import { Slider } from './slider.jsx';
+const meta = {
+  title: 'UI/Slider',
+  component: Slider,
+};
+var stdin_default = meta;
+const Default = {
+  args: { defaultValue: [50], min: 0, max: 100 },
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="slider"]');
+    await expect(el).toBeInTheDocument();
+    const thumb = canvasElement.querySelector('[data-slot="slider-thumb"]');
+    await expect(thumb).toBeInTheDocument();
+  },
+};
+const Range = {
+  args: { defaultValue: [25, 75], min: 0, max: 100 },
+  play: async ({ canvasElement }) => {
+    const thumbs = canvasElement.querySelectorAll('[data-slot="slider-thumb"]');
+    await expect(thumbs.length).toBe(2);
+  },
+};
+const Disabled = {
+  args: { defaultValue: [50], disabled: true },
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="slider"]');
+    await expect(el.getAttribute('data-disabled')).toBeDefined();
+  },
+};
+export { Default, Disabled, Range, stdin_default as default };

package/client/ui/sonner.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Toaster as Sonner } from 'sonner';
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from 'lucide-react';
+function Toaster({ theme = 'system', ...props }) {
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={{
+        '--normal-bg': 'var(--popover)',
+        '--normal-text': 'var(--popover-foreground)',
+        '--normal-border': 'var(--border)',
+        '--border-radius': 'var(--radius)',
+      }}
+      toastOptions={{
+        classNames: {
+          toast: 'cn-toast',
+        },
+      }}
+      {...props}
+    />
+  );
+}
+export { Toaster };

package/client/ui/spinner.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { cn } from './lib/utils.js';
+import { Loader2Icon } from 'lucide-react';
+function Spinner({ className, ...props }) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  );
+}
+export { Spinner };