ai-design-system 0.1.52 → 0.1.53

package/components/ai-elements/file-tree.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  ChevronRightIcon,
+  FileIcon,
+  FolderIcon,
+  FolderOpenIcon,
+} from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+interface FileTreeContextType {
+  expandedPaths: Set<string>;
+  togglePath: (path: string) => void;
+  selectedPath?: string;
+  onSelect?: (path: string) => void;
+}
+
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => {};
+
+const FileTreeContext = createContext<FileTreeContextType>({
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: new Set(),
+  togglePath: noop,
+});
+
+export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+  expanded?: Set<string>;
+  defaultExpanded?: Set<string>;
+  selectedPath?: string;
+  onSelect?: (path: string) => void;
+  onExpandedChange?: (expanded: Set<string>) => void;
+};
+
+export const FileTree = ({
+  expanded: controlledExpanded,
+  defaultExpanded = new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}: FileTreeProps) => {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+
+  const togglePath = useCallback(
+    (path: string) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      onExpandedChange?.(newExpanded);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+
+  const contextValue = useMemo(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+
+  return (
+    <FileTreeContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "rounded-lg border bg-background font-mono text-sm",
+          className
+        )}
+        role="tree"
+        {...props}
+      >
+        <div className="p-2">{children}</div>
+      </div>
+    </FileTreeContext.Provider>
+  );
+};
+
+export type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeIcon = ({
+  className,
+  children,
+  ...props
+}: FileTreeIconProps) => (
+  <span className={cn("shrink-0", className)} {...props}>
+    {children}
+  </span>
+);
+
+export type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const FileTreeName = ({
+  className,
+  children,
+  ...props
+}: FileTreeNameProps) => (
+  <span className={cn("truncate", className)} {...props}>
+    {children}
+  </span>
+);
+
+interface FileTreeFolderContextType {
+  path: string;
+  name: string;
+  isExpanded: boolean;
+}
+
+const FileTreeFolderContext = createContext<FileTreeFolderContextType>({
+  isExpanded: false,
+  name: "",
+  path: "",
+});
+
+export type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+};
+
+export const FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}: FileTreeFolderProps) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } =
+    useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const folderContextValue = useMemo(
+    () => ({ isExpanded, name, path }),
+    [isExpanded, name, path]
+  );
+
+  return (
+    <FileTreeFolderContext.Provider value={folderContextValue}>
+      <Collapsible onOpenChange={handleOpenChange} open={isExpanded}>
+        <div
+          className={cn("", className)}
+          role="treeitem"
+          tabIndex={0}
+          {...props}
+        >
+          <div
+            className={cn(
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted"
+            )}
+          >
+            <CollapsibleTrigger asChild>
+              <button
+                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
+                type="button"
+              >
+                <ChevronRightIcon
+                  className={cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <button
+              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left"
+              onClick={handleSelect}
+              type="button"
+            >
+              <FileTreeIcon>
+                {isExpanded ? (
+                  <FolderOpenIcon className="size-4 text-blue-500" />
+                ) : (
+                  <FolderIcon className="size-4 text-blue-500" />
+                )}
+              </FileTreeIcon>
+              <FileTreeName>{name}</FileTreeName>
+            </button>
+          </div>
+          <CollapsibleContent>
+            <div className="ml-4 border-l pl-2">{children}</div>
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </FileTreeFolderContext.Provider>
+  );
+};
+
+interface FileTreeFileContextType {
+  path: string;
+  name: string;
+}
+
+const FileTreeFileContext = createContext<FileTreeFileContextType>({
+  name: "",
+  path: "",
+});
+
+export type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+  path: string;
+  name: string;
+  icon?: ReactNode;
+};
+
+export const FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}: FileTreeFileProps) => {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+
+  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+
+  return (
+    <FileTreeFileContext.Provider value={fileContextValue}>
+      <div
+        className={cn(
+          "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+          isSelected && "bg-muted",
+          className
+        )}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        role="treeitem"
+        tabIndex={0}
+        {...props}
+      >
+        {children ?? (
+          <>
+            {/* Spacer for alignment */}
+            <span className="size-4 shrink-0" />
+            <FileTreeIcon>
+              {icon ?? <FileIcon className="size-4 text-muted-foreground" />}
+            </FileTreeIcon>
+            <FileTreeName>{name}</FileTreeName>
+          </>
+        )}
+      </div>
+    </FileTreeFileContext.Provider>
+  );
+};
+
+export type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+
+const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
+
+export const FileTreeActions = ({
+  className,
+  children,
+  ...props
+}: FileTreeActionsProps) => (
+  <div
+    className={cn("ml-auto flex items-center gap-1", className)}
+    onClick={stopPropagation}
+    onKeyDown={stopPropagation}
+    role="group"
+    {...props}
+  >
+    {children}
+  </div>
+);

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -220,36 +220,45 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
             {section.content}
           </div>
 
-          {/* Show drag handle after this panel if it's not the last one */}
-          {isResizable && (
-            <div
-              className={cn(
-                "flex-shrink-0 flex items-center justify-center relative group",
-                orientation === "vertical"
-                  ? "cursor-row-resize h-2 w-full"
-                  : "cursor-col-resize w-2 h-full"
-              )}
-              onMouseDown={(e) => handleMouseDown(index, e)}
-            >
-              {/* Visible pill */}
+          {/* Show drag handle or spacer after this panel if it's not the last one */}
+          {index < sections.length - 1 && (
+            isResizable ? (
               <div
                 className={cn(
-                  `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                  "flex-shrink-0 flex items-center justify-center relative group",
                   orientation === "vertical"
-                    ? "h-1 w-8"
-                    : "w-1 h-8"
+                    ? "cursor-row-resize h-2 w-full"
+                    : "cursor-col-resize w-2 h-full"
                 )}
-              />
-              {/* Invisible large hit area */}
+                onMouseDown={(e) => handleMouseDown(index, e)}
+              >
+                {/* Visible pill */}
+                <div
+                  className={cn(
+                    `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                    orientation === "vertical"
+                      ? "h-1 w-8"
+                      : "w-1 h-8"
+                  )}
+                />
+                {/* Invisible large hit area */}
+                <div
+                  className={cn(
+                    "absolute z-10",
+                    orientation === "vertical"
+                      ? "inset-x-0 -top-2 -bottom-2"
+                      : "inset-y-0 -left-2 -right-2"
+                  )}
+                />
+              </div>
+            ) : (
               <div
                 className={cn(
-                  "absolute z-10",
-                  orientation === "vertical"
-                    ? "inset-x-0 -top-2 -bottom-2"
-                    : "inset-y-0 -left-2 -right-2"
+                  "flex-shrink-0",
+                  orientation === "vertical" ? "h-2 w-full" : "w-2 h-full"
                 )}
               />
-            </div>
+            )
           )}
         </React.Fragment>
       )

package/components/composites/FileTreeExplorer/FileTreeExplorer.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { FileTreeExplorer } from './FileTreeExplorer'
+
+const sampleTree = [
+  {
+    name: 'src',
+    path: 'src',
+    type: 'folder' as const,
+    children: [
+      {
+        name: 'components',
+        path: 'src/components',
+        type: 'folder' as const,
+        children: [
+          { name: 'Button.tsx', path: 'src/components/Button.tsx', type: 'file' as const },
+          { name: 'Input.tsx', path: 'src/components/Input.tsx', type: 'file' as const },
+        ],
+      },
+      {
+        name: 'hooks',
+        path: 'src/hooks',
+        type: 'folder' as const,
+        children: [
+          { name: 'use-toast.ts', path: 'src/hooks/use-toast.ts', type: 'file' as const },
+        ],
+      },
+      { name: 'index.ts', path: 'src/index.ts', type: 'file' as const },
+    ],
+  },
+  { name: 'package.json', path: 'package.json', type: 'file' as const },
+]
+
+const meta = {
+  title: 'Composites/FileTreeExplorer',
+  component: FileTreeExplorer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof FileTreeExplorer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    tree: sampleTree,
+    defaultExpanded: new Set(['src', 'src/components']),
+    selectedPath: 'src/components/Button.tsx',
+    onSelect: fn(),
+    createButtonLabel: 'New File',
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    tree: [],
+    createButtonLabel: 'New File',
+  },
+}
+
+export const DarkMode: Story = {
+  args: {
+    tree: sampleTree,
+    defaultExpanded: new Set(['src']),
+    selectedPath: 'src/index.ts',
+    onSelect: fn(),
+  },
+  parameters: {
+    backgrounds: { disable: true },
+  },
+}

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -0,0 +1,95 @@
+import * as React from "react"
+
+import {
+  FileTree,
+  FileTreeFolder,
+  FileTreeFile,
+} from "@/components/ai-elements/file-tree"
+import { Icon } from "@/components/primitives/Icon"
+import { Input } from "@/components/primitives/Input"
+import { cn } from "@/lib/utils"
+
+export type FileTreeNode = {
+  name: string
+  path: string
+  type: "file" | "folder"
+  children?: FileTreeNode[]
+}
+
+export interface FileTreeExplorerProps {
+  tree: FileTreeNode[]
+  defaultExpanded?: Set<string>
+  selectedPath?: string
+  onSelect?: (path: string) => void
+  searchPlaceholder?: string
+  onCreateClick?: () => void
+  createButtonLabel?: string
+  headerClassName?: string
+  className?: string
+}
+
+function renderTree(nodes: FileTreeNode[]): React.ReactNode {
+  return nodes.map((node) => {
+    if (node.type === "folder") {
+      return (
+        <FileTreeFolder key={node.path} name={node.name} path={node.path}>
+          {node.children ? renderTree(node.children) : null}
+        </FileTreeFolder>
+      )
+    }
+    return <FileTreeFile key={node.path} name={node.name} path={node.path} />
+  })
+}
+
+export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
+  ({
+    tree,
+    defaultExpanded,
+    selectedPath,
+    onSelect,
+    searchPlaceholder = "Filter files...",
+    onCreateClick,
+    createButtonLabel,
+    headerClassName,
+    className,
+  }) => {
+    return (
+      <div className={cn("flex flex-col rounded-lg border bg-background", className)}>
+        <div className={cn("flex items-center gap-2 border-b px-3 py-2", headerClassName)}>
+          <div className="relative flex-1">
+            <Icon
+              name="search"
+              size="sm"
+              className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+            />
+            <Input
+              placeholder={searchPlaceholder}
+              className="pl-8"
+            />
+          </div>
+          {onCreateClick ? (
+            <button
+              type="button"
+              onClick={onCreateClick}
+              className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              <Icon name="plus" size="sm" />
+              {createButtonLabel ?? "New"}
+            </button>
+          ) : null}
+        </div>
+        <div className="p-2">
+          <FileTree
+            defaultExpanded={defaultExpanded}
+            selectedPath={selectedPath}
+            onSelect={onSelect}
+          >
+            {renderTree(tree)}
+          </FileTree>
+        </div>
+      </div>
+    )
+  }
+)
+
+FileTreeExplorer.displayName = "FileTreeExplorer"

package/components/composites/FileTreeExplorer/index.ts

@@ -0,0 +1,8 @@
+export {
+  FileTreeExplorer,
+} from "./FileTreeExplorer"
+
+export type {
+  FileTreeExplorerProps,
+  FileTreeNode,
+} from "./FileTreeExplorer"

package/components/composites/FormReports/FormReports.stories.tsx

@@ -1,5 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { FormReports } from './FormReports'
+import type { FormReportsFieldDefinition } from './FormReportsDrawerForm'
+import type { FormReportsColumn, FormReportsEntity } from './FormReportsTable'
+
+const sampleColumns: FormReportsColumn[] = [
+  { key: "name", label: "Name" },
+  { key: "email", label: "Email" },
+  { key: "role", label: "Role" },
+]
+
+const sampleItems: FormReportsEntity[] = [
+  { id: 1, name: "Alice Smith", email: "alice@example.com", role: "Admin" },
+  { id: 2, name: "Bob Jones", email: "bob@example.com", role: "Editor" },
+  { id: 3, name: "Carol Lee", email: "carol@example.com", role: "Viewer" },
+]
+
+const sampleFields: FormReportsFieldDefinition[] = [
+  { name: "name", label: "Name", type: "text", required: true },
+  { name: "email", label: "Email", type: "text", required: true },
+  { name: "role", label: "Role", type: "select", options: [{ value: "Admin", label: "Admin" }, { value: "Editor", label: "Editor" }, { value: "Viewer", label: "Viewer" }] },
+]
 
 const meta = {
   title: 'Composites/FormReports',
@@ -14,5 +34,17 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {} as any,
+  args: {
+    items: sampleItems,
+    columns: sampleColumns,
+    fields: sampleFields,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    columns: sampleColumns,
+    fields: sampleFields,
+  },
 }

package/components/composites/FormReports/FormReports.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+
+import type { FormReportsFieldDefinition, FormReportsValue, FormReportsValues } from "./FormReportsDrawerForm"
+import { FormReportsDrawerForm } from "./FormReportsDrawerForm"
+import type { DashboardPaginationState, FormReportsColumn, FormReportsEntity, FormReportsRowAction, FormReportsTableHandlers } from "./FormReportsTable"
+import { FormReportsTable } from "./FormReportsTable"
+
+export interface FormReportsProps {
+  items: FormReportsEntity[]
+  columns: FormReportsColumn[]
+  fields?: FormReportsFieldDefinition[]
+  rowActions?: FormReportsRowAction[]
+  pagination?: DashboardPaginationState
+  handlers?: FormReportsTableHandlers
+  leftActions?: React.ReactNode
+  rightActions?: React.ReactNode
+  drawerTitle?: string
+  drawerDescription?: string
+  submitLabel?: string
+  cancelLabel?: string
+  createButtonLabel?: string
+  onCreateSubmit?: (values: FormReportsValues) => void
+}
+
+export const FormReports = React.memo<FormReportsProps>(
+  ({
+    items,
+    columns,
+    fields,
+    rowActions,
+    pagination,
+    handlers,
+    leftActions,
+    rightActions,
+    drawerTitle = "New Item",
+    drawerDescription,
+    submitLabel = "Create",
+    cancelLabel = "Cancel",
+    createButtonLabel = "Create",
+    onCreateSubmit,
+  }) => {
+    const [drawerOpen, setDrawerOpen] = React.useState(false)
+    const [formValues, setFormValues] = React.useState<FormReportsValues>({})
+
+    const handleOpenChange = React.useCallback((open: boolean) => {
+      setDrawerOpen(open)
+      if (!open) {
+        setFormValues({})
+      }
+    }, [])
+
+    const handleFieldChange = React.useCallback(
+      (_name: string, _value: FormReportsValue, nextValues: FormReportsValues) => {
+        setFormValues(nextValues)
+      },
+      []
+    )
+
+    const handleCreateClick = React.useCallback(() => {
+      const defaults: FormReportsValues = {}
+      if (fields) {
+        for (const field of fields) {
+          if (field.defaultValue !== undefined) {
+            defaults[field.name] = field.defaultValue
+          }
+        }
+      }
+      setFormValues(defaults)
+      setDrawerOpen(true)
+    }, [fields])
+
+    const handleSubmit = React.useCallback(
+      (values: FormReportsValues) => {
+        onCreateSubmit?.(values)
+        setDrawerOpen(false)
+        setFormValues({})
+      },
+      [onCreateSubmit]
+    )
+
+    return (
+      <>
+        <FormReportsTable
+          items={items}
+          columns={columns}
+          rowActions={rowActions}
+          pagination={pagination}
+          handlers={handlers}
+          leftActions={leftActions}
+          rightActions={rightActions}
+          onCreateClick={handleCreateClick}
+          createButtonLabel={createButtonLabel}
+        />
+        {fields ? (
+          <FormReportsDrawerForm
+            open={drawerOpen}
+            onOpenChange={handleOpenChange}
+            title={drawerTitle}
+            description={drawerDescription}
+            fields={fields}
+            values={formValues}
+            submitLabel={submitLabel}
+            cancelLabel={cancelLabel}
+            onFieldChange={handleFieldChange}
+            onSubmit={handleSubmit}
+          />
+        ) : null}
+      </>
+    )
+  }
+)
+
+FormReports.displayName = "FormReports"