ai-design-system 0.1.16 → 0.1.18

package/components/blocks/AppSidebar/AppSidebar.tsx

@@ -17,9 +17,19 @@ import { NavUser } from "@/components/composites/NavUser"
 import type { AppSidebarProps } from "./interfaces"
 
 export const AppSidebar = React.memo<AppSidebarProps>(
-  ({ logo, mainNavigation, secondaryNavigation, documents, user, userActions, ...props }) => {
+  ({
+    logo,
+    mainNavigation,
+    secondaryNavigation,
+    documents,
+    user,
+    userActions,
+    variant = "inset",
+    collapsible = "offcanvas",
+    ...props
+  }) => {
     return (
-      <Sidebar {...props} variant="inset" collapsible="offcanvas">
+      <Sidebar {...props} variant={variant} collapsible={collapsible}>
         <SidebarHeader>
           {logo && (
             <SidebarMenu>

package/components/blocks/AppSidebar/interfaces.ts

@@ -1,4 +1,5 @@
 import type { NavigationItem } from "@/components/composites/NavigationList/interfaces";
+import type { SidebarProps } from "@/components/primitives/Sidebar";
 
 export interface AppSidebarProps {
   logo?: {
@@ -14,6 +15,8 @@ export interface AppSidebarProps {
     email: string;
     avatar?: string;
   };
+  variant?: SidebarProps["variant"];
+  collapsible?: SidebarProps["collapsible"];
   userActions?: { label: string; onClick: () => void }[];
   className?: string;
 }

package/components/blocks/DashboardChart/DashboardChart.tsx

@@ -0,0 +1,182 @@
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/primitives/Chart"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/primitives/Card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/primitives/Select"
+import { ToggleGroup, ToggleGroupItem } from "@/components/primitives/ToggleGroup"
+
+export interface DashboardChartPoint {
+  date: string
+  desktop: number
+  mobile: number
+}
+
+export type DashboardChartTimeRange = "90d" | "30d" | "7d"
+
+export interface DashboardChartProps {
+  series: DashboardChartPoint[]
+  onTimeRangeChange?: (range: DashboardChartTimeRange) => void
+}
+
+export const DashboardChart = React.memo<DashboardChartProps>(({ series, onTimeRangeChange }) => {
+  const [timeRange, setTimeRange] = React.useState<DashboardChartTimeRange>("90d")
+
+  const handleTimeRangeChange = React.useCallback(
+    (range: DashboardChartTimeRange) => {
+      setTimeRange(range)
+      onTimeRangeChange?.(range)
+    },
+    [onTimeRangeChange]
+  )
+
+  const filteredSeries = React.useMemo(() => {
+    const referenceDate = series.length > 0 ? new Date(series[series.length - 1].date) : new Date()
+    let daysToSubtract = 90
+
+    if (timeRange === "30d") {
+      daysToSubtract = 30
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7
+    }
+
+    const startDate = new Date(referenceDate)
+    startDate.setDate(startDate.getDate() - daysToSubtract)
+
+    return series.filter((point) => new Date(point.date) >= startDate)
+  }, [series, timeRange])
+
+  return (
+    <section className="px-4 lg:px-6">
+      <Card className="@container/card">
+        <CardHeader>
+          <CardTitle>Total Visitors</CardTitle>
+          <CardDescription>
+            <span className="hidden @[540px]/card:block">Total for the last 3 months</span>
+            <span className="@[540px]/card:hidden">Last 3 months</span>
+          </CardDescription>
+          <CardAction>
+            <ToggleGroup
+              type="single"
+              value={timeRange}
+              onValueChange={(value) => {
+                if (value) {
+                  handleTimeRangeChange(value as DashboardChartTimeRange)
+                }
+              }}
+              variant="outline"
+              className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
+            >
+              <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
+              <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
+              <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
+            </ToggleGroup>
+            <Select value={timeRange} onValueChange={(value) => handleTimeRangeChange(value as DashboardChartTimeRange)}>
+              <SelectTrigger
+                className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
+                aria-label="Select a value"
+              >
+                <SelectValue placeholder="Last 3 months" />
+              </SelectTrigger>
+              <SelectContent className="rounded-xl">
+                <SelectItem value="90d" className="rounded-lg">
+                  Last 3 months
+                </SelectItem>
+                <SelectItem value="30d" className="rounded-lg">
+                  Last 30 days
+                </SelectItem>
+                <SelectItem value="7d" className="rounded-lg">
+                  Last 7 days
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </CardAction>
+        </CardHeader>
+        <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+          <ChartContainer
+            config={{
+              desktop: { label: "Desktop", color: "var(--primary)" },
+              mobile: { label: "Mobile", color: "var(--primary)" },
+            }}
+            className="aspect-auto h-[250px] w-full"
+          >
+            <AreaChart data={filteredSeries}>
+              <defs>
+                <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={1} />
+                  <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.1} />
+                </linearGradient>
+                <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.8} />
+                  <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0.1} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={32}
+                tickFormatter={(value) => {
+                  const date = new Date(value)
+                  return date.toLocaleDateString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                  })
+                }}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    labelFormatter={(value) => {
+                      return new Date(String(value)).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                      })
+                    }}
+                    indicator="dot"
+                  />
+                }
+              />
+              <Area
+                dataKey="mobile"
+                type="natural"
+                fill="url(#fillMobile)"
+                stroke="var(--color-mobile)"
+                stackId="a"
+              />
+              <Area
+                dataKey="desktop"
+                type="natural"
+                fill="url(#fillDesktop)"
+                stroke="var(--color-desktop)"
+                stackId="a"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </section>
+  )
+})
+
+DashboardChart.displayName = "DashboardChart"

package/components/blocks/DashboardChart/index.ts

@@ -0,0 +1,2 @@
+export { DashboardChart } from './DashboardChart'
+export type { DashboardChartProps } from './DashboardChart'

package/components/blocks/DashboardHeader/DashboardHeader.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+
+import { Button } from "@/components/primitives/Button"
+
+export interface DashboardHeaderProps {
+  ctaLabel?: string
+}
+
+export const DashboardHeader = React.memo<DashboardHeaderProps>(({ ctaLabel = "Quick Create" }) => {
+  return (
+    <>
+      <Button variant="outline" size="sm" className="hidden sm:flex">
+        {ctaLabel}
+      </Button>
+      <div className="text-xs text-muted-foreground">GitHub</div>
+    </>
+  )
+})
+
+DashboardHeader.displayName = "DashboardHeader"

package/components/blocks/DashboardHeader/index.ts

@@ -0,0 +1,2 @@
+export { DashboardHeader } from './DashboardHeader'
+export type { DashboardHeaderProps } from './DashboardHeader'

package/components/blocks/DashboardMetrics/DashboardMetrics.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import { StatsCard } from "@/components/composites/StatsCard"
+
+export interface DashboardMetricItem {
+  title: string
+  value: string | number
+  trend?: {
+    direction: "up" | "down"
+    value: string
+  }
+  footer?: {
+    message: string
+    description: string
+  }
+}
+
+export interface DashboardMetricsProps {
+  items: DashboardMetricItem[]
+}
+
+export const DashboardMetrics = React.memo<DashboardMetricsProps>(({ items }) => {
+  return (
+    <section className="px-4 lg:px-6">
+      <div className="flex gap-4 overflow-x-auto pb-1 [scrollbar-width:thin]">
+        {items.map((item) => (
+          <StatsCard
+            key={item.title}
+            title={item.title}
+            value={item.value}
+            trend={item.trend}
+            footer={item.footer}
+            className="@container/card basis-[calc((100%-3rem)/4)] min-w-[240px] shrink-0"
+          />
+        ))}
+      </div>
+    </section>
+  )
+})
+
+DashboardMetrics.displayName = "DashboardMetrics"

package/components/blocks/DashboardMetrics/index.ts

@@ -0,0 +1,2 @@
+export { DashboardMetrics } from './DashboardMetrics'
+export type { DashboardMetricsProps } from './DashboardMetrics'

package/components/blocks/DataTable/DataTable.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import {
+  EnhancedDataTable,
+  type DashboardRow,
+  type DashboardTableActionHandlers,
+} from "@/components/composites/DataTable"
+import type { DynamicTableSchema } from "ui-schema-contracts"
+import { Button } from "@/components/primitives/Button"
+
+export interface DataTableProps {
+  rows: DashboardRow[]
+  tableSchema: DynamicTableSchema
+  handlers?: DashboardTableActionHandlers
+  onCreateClick?: () => void
+  createButtonLabel?: string
+}
+
+export const DataTable = React.memo<DataTableProps>(({ rows, tableSchema, handlers, onCreateClick, createButtonLabel }) => {
+  return (
+    <section className="px-4 lg:px-6">
+      <EnhancedDataTable
+        data={rows}
+        tableSchema={tableSchema}
+        handlers={handlers}
+        onCreateClick={onCreateClick ?? handlers?.onCreateClick ?? handlers?.onAddSection}
+        createButtonLabel={createButtonLabel}
+        rightActions={
+          handlers?.onAddSection ? (
+            <Button variant="outline" size="sm" className="h-8" onClick={handlers.onAddSection}>
+              <Plus className="size-4" />
+              <span className="hidden lg:inline">Add Section</span>
+            </Button>
+          ) : null
+        }
+      />
+    </section>
+  )
+})
+
+DataTable.displayName = "DataTable"

package/components/blocks/DataTable/index.ts

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable'
+export type { DataTableProps } from './DataTable'

package/components/blocks/FormReportsSection/FormReportsSection.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import {
+  FormReportsTable,
+  type FormReportsColumn,
+  type FormReportsEntity,
+  type FormReportsRowAction,
+  type FormReportsTableHandlers,
+} from "@/components/composites/FormReports"
+
+export interface FormReportsSectionProps {
+  onCreateClick?: () => void
+  createButtonLabel?: string
+  items: FormReportsEntity[]
+  columns: FormReportsColumn[]
+  rowActions?: FormReportsRowAction[]
+  tableHandlers?: FormReportsTableHandlers
+  tableLeftActions?: React.ReactNode
+}
+
+export const FormReportsSection = React.memo<FormReportsSectionProps>(
+  ({
+    onCreateClick,
+    createButtonLabel = "Create",
+    items,
+    columns,
+    rowActions,
+    tableHandlers,
+    tableLeftActions,
+  }) => {
+    return (
+      <section>
+        <FormReportsTable
+          items={items}
+          columns={columns}
+          rowActions={rowActions}
+          handlers={tableHandlers}
+          leftActions={tableLeftActions}
+          onCreateClick={onCreateClick}
+          createButtonLabel={createButtonLabel}
+        />
+      </section>
+    )
+  }
+)
+
+FormReportsSection.displayName = "FormReportsSection"

package/components/blocks/FormReportsSection/index.ts

@@ -0,0 +1,2 @@
+export { FormReportsSection } from "./FormReportsSection"
+export type { FormReportsSectionProps } from "./FormReportsSection"

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -26,11 +26,11 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     const transformedSections = sections.map(section => ({
       ...section,
       content: (
-        <div className="h-full flex flex-col">
+        <div className="h-full min-h-0 flex flex-col">
           {section.header && (
             <AppHeader {...section.header} />
           )}
-          <div className="flex-1">
+          <div className="min-h-0 flex-1">
             {section.content}
           </div>
         </div>

package/components/blocks/index.ts

@@ -17,3 +17,18 @@ export type { LayoutProviderProps } from './LayoutProvider'
 
 export { WorkflowCanvas } from './WorkflowCanvas'
 export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from './WorkflowCanvas'
+
+export { DashboardHeader } from './DashboardHeader'
+export type { DashboardHeaderProps } from './DashboardHeader'
+
+export { DashboardMetrics } from './DashboardMetrics'
+export type { DashboardMetricsProps } from './DashboardMetrics'
+
+export { DashboardChart } from './DashboardChart'
+export type { DashboardChartProps } from './DashboardChart'
+
+export { DataTable } from './DataTable'
+export type { DataTableProps } from './DataTable'
+
+export { FormReportsSection } from './FormReportsSection'
+export type { FormReportsSectionProps } from './FormReportsSection'

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -175,11 +175,12 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "h-full overflow-hidden bg-card border border-border rounded-md",
+              "min-h-0 overflow-hidden bg-card border border-border rounded-md",
               section.className
             )}
             style={{
               flex: `${size} 1 0%`,
+              minHeight: 0,
               minWidth: 0,
             }}
           >

package/components/composites/DataTable/DragHandleCell.tsx

@@ -0,0 +1,25 @@
+import { useSortable } from "@dnd-kit/sortable"
+import { GripVertical } from "lucide-react"
+
+import { Button } from "@/components/primitives/Button"
+
+export interface DragHandleCellProps {
+  id: number | string
+}
+
+export function DragHandleCell({ id }: DragHandleCellProps) {
+  const { attributes, listeners } = useSortable({ id })
+
+  return (
+    <Button
+      {...attributes}
+      {...listeners}
+      variant="ghost"
+      size="icon"
+      className="size-7 text-muted-foreground hover:bg-transparent"
+      aria-label="Drag to reorder"
+    >
+      <GripVertical className="size-3" />
+    </Button>
+  )
+}

package/components/composites/DataTable/DraggableRow.tsx

@@ -0,0 +1,35 @@
+import { useSortable } from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { flexRender, type Row } from "@tanstack/react-table"
+
+import { TableCell, TableRow } from "@/components/primitives/Table"
+import type { DashboardRow } from "./table-types"
+
+export interface DraggableRowProps {
+  row: Row<DashboardRow>
+  rowId: number | string
+}
+
+export function DraggableRow({ row, rowId }: DraggableRowProps) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: rowId,
+  })
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      data-row-id={String(rowId)}
+      data-state={row.getIsSelected() && "selected"}
+      data-dragging={isDragging}
+      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+      ))}
+    </TableRow>
+  )
+}

package/components/composites/DataTable/EnhancedDataTable.behaviors.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import { expect, userEvent, within } from "@storybook/test"
+import { Toaster } from "sonner"
+
+import { EnhancedDataTable } from "./EnhancedDataTable"
+import type { DashboardRow } from "./table-types"
+
+const rows: DashboardRow[] = [
+  { id: 1, header: "Cover page", type: "Cover page", status: "In Process", target: "18", limit: "5", reviewer: "Eddie Lake" },
+  { id: 2, header: "Table of contents", type: "Table of contents", status: "Done", target: "29", limit: "24", reviewer: "Assign reviewer" },
+  { id: 3, header: "Executive summary", type: "Narrative", status: "Done", target: "10", limit: "13", reviewer: "Assign reviewer" },
+]
+
+const meta = {
+  title: "Composites/EnhancedDataTable/Behaviors",
+  component: EnhancedDataTable,
+  tags: ["test"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: (args) => (
+    <>
+      <EnhancedDataTable {...args} />
+      <Toaster position="bottom-right" />
+    </>
+  ),
+} satisfies Meta<typeof EnhancedDataTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SelectAllWorks: Story = {
+  args: { data: rows },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const selectAll = canvas.getByLabelText("Select all")
+    await userEvent.click(selectAll)
+    await expect(selectAll).toBeChecked()
+  },
+}
+
+export const DrawerOpensFromHeader: Story = {
+  args: { data: rows },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const trigger = canvas.getByRole("button", { name: "Cover page" })
+    await userEvent.click(trigger)
+    await expect(await canvas.findByText("Showing total visitors for the last 6 months")).toBeInTheDocument()
+  },
+}
+
+export const SwitchesViewTab: Story = {
+  args: { data: rows },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const tab = canvas.getByRole("tab", { name: /Past Performance/i })
+    await userEvent.click(tab)
+    await expect(canvas.getByRole("tabpanel")).toBeInTheDocument()
+  },
+}

package/components/composites/DataTable/EnhancedDataTable.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import { Toaster } from "sonner"
+
+import { EnhancedDataTable } from "./EnhancedDataTable"
+import type { DashboardRow } from "./table-types"
+
+const data: DashboardRow[] = [
+  { id: 1, header: "Cover page", type: "Cover page", status: "In Process", target: "18", limit: "5", reviewer: "Eddie Lake" },
+  { id: 2, header: "Table of contents", type: "Table of contents", status: "Done", target: "29", limit: "24", reviewer: "Eddie Lake" },
+  { id: 3, header: "Executive summary", type: "Narrative", status: "Done", target: "10", limit: "13", reviewer: "Eddie Lake" },
+  { id: 4, header: "Technical approach", type: "Narrative", status: "Done", target: "27", limit: "23", reviewer: "Jamik Tashpulatov" },
+  { id: 5, header: "Design", type: "Narrative", status: "In Process", target: "2", limit: "16", reviewer: "Jamik Tashpulatov" },
+  { id: 6, header: "Capabilities", type: "Narrative", status: "In Process", target: "20", limit: "8", reviewer: "Jamik Tashpulatov" },
+  { id: 7, header: "Integration with existing systems", type: "Narrative", status: "In Process", target: "19", limit: "21", reviewer: "Assign reviewer" },
+  { id: 8, header: "Innovation and Advantages", type: "Narrative", status: "Done", target: "25", limit: "26", reviewer: "Assign reviewer" },
+  { id: 9, header: "Overview of EMR's Innovative Solutions", type: "Technical content", status: "Done", target: "7", limit: "23", reviewer: "Assign reviewer" },
+  { id: 10, header: "Advanced Algorithms and Machine Learning", type: "Narrative", status: "Done", target: "30", limit: "28", reviewer: "Assign reviewer" },
+  { id: 11, header: "Adaptive Communication Protocols", type: "Narrative", status: "Done", target: "9", limit: "31", reviewer: "Assign reviewer" },
+  { id: 12, header: "Advantages Over Current Technologies", type: "Narrative", status: "Not Started", target: "12", limit: "0", reviewer: "Assign reviewer" },
+]
+
+const meta = {
+  title: "Composites/EnhancedDataTable",
+  component: EnhancedDataTable,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+  render: (args) => (
+    <>
+      <EnhancedDataTable {...args} />
+      <Toaster position="bottom-right" />
+    </>
+  ),
+} satisfies Meta<typeof EnhancedDataTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    data,
+  },
+}