feat(showcase): add PouchDB sample component and storage page

- Implemented PouchSample component for managing POS configurations and item inventories using PouchDB. - Created StoragePage to encapsulate the PouchSample component. - Added UI components page with various UI elements including buttons, forms, and data grids. - Defined Electron type declarations for printing and auto-update functionalities. - Extended event registry with custom application events for printing and stock updates. - Configured Vite for the showcase application with React and Tailwind CSS support. - Updated package.json and pnpm-lock.yaml to include necessary dependencies for the showcase app.
2026-07-23 17:26:41 +07:00
parent e99aeb6def
commit 980952252d
65 changed files with 5749 additions and 9 deletions
@@ -0,0 +1,161 @@
+import { Card, Title, Text, Table, Stack, Badge } from '@repo/ui/components';
+import { PageActions, RowActions, PageActionProps, RowActionProps } from '@repo/ui/components';
+import { Save, Printer, Trash, MoreVertical, Edit, FileText, CheckCircle, Check } from 'lucide-react';
+
+export default function ActionToolsShowcase() {
+  const pageActions: PageActionProps[] = [
+    {
+      key: 'save',
+      label: 'Save Changes',
+      icon: <Save size={16} />,
+      variant: 'filled',
+      onClick: (key) => console.log('Clicked', key),
+    },
+    {
+      key: 'save',
+      label: 'Save Changes',
+      icon: <Save size={16} />,
+      onClick: (key) => console.log('Clicked', key),
+    },
+    { type: 'divider' },
+    {
+      key: 'print',
+      label: 'Print',
+      icon: <Printer size={16} />,
+      children: [
+        {
+          key: 'print-original',
+          label: 'Print Original',
+          icon: <FileText size={16} />,
+          onClick: (k) => console.log(k),
+        },
+        // { type: 'divider' },
+        { key: 'print-copy', label: 'Print Copy', icon: <FileText size={16} />, onClick: (k) => console.log(k) },
+        { key: 'print-copy', label: 'Print Copy', icon: <FileText size={16} />, onClick: (k) => console.log(k) },
+        { key: 'print-copy', label: 'Print Copy', icon: <FileText size={16} />, onClick: (k) => console.log(k) },
+      ],
+    },
+    {
+      key: 'confirm',
+      label: 'Confirm',
+      icon: <CheckCircle size={16} />,
+      onClick: (key) => console.log('Clicked', key),
+    },
+    {
+      key: 'delete',
+      label: 'Delete',
+      icon: <Trash size={16} />,
+      intent: 'destructive',
+      onClick: (key) => console.log('Clicked', key),
+    },
+
+    {
+      key: 'success',
+      label: 'Success',
+      icon: <Check size={16} />,
+      intent: 'success',
+      onClick: (key) => console.log('Clicked', key),
+    },
+    {
+      key: 'warning',
+      label: 'Warning',
+      icon: <Check size={16} />,
+      intent: 'warning',
+      onClick: (key) => console.log('Clicked', key),
+    },
+    {
+      key: 'Primary',
+      label: 'Primary',
+      icon: <Check size={16} />,
+      intent: 'primary',
+      onClick: (key) => console.log('Clicked', key),
+    },
+  ];
+
+  const rowActions: RowActionProps[] = [
+    {
+      key: 'edit',
+      tooltip: 'Edit Record',
+      label: 'Edit Record',
+      icon: <Edit size={16} />,
+      onClick: (key) => console.log('Clicked', key),
+    },
+    {
+      key: 'approve',
+      tooltip: 'Approve',
+      label: 'Approve',
+      icon: <CheckCircle size={16} />,
+      intent: 'success',
+      onClick: (key) => console.log('Clicked', key),
+    },
+    {
+      key: 'more',
+      label: 'More Options',
+      icon: <MoreVertical size={16} />,
+      children: [
+        {
+          key: 'delete',
+          label: 'Delete Record',
+          icon: <Trash size={16} />,
+          intent: 'destructive',
+          onClick: (k) => console.log(k),
+        },
+      ],
+    },
+  ];
+
+  const tableData = [
+    { id: '1', name: 'Invoice #001', status: 'Pending' },
+    { id: '2', name: 'Invoice #002', status: 'Approved' },
+  ];
+
+  return (
+    <Stack gap="xl">
+      <Card withBorder shadow="sm" radius="md" p="md">
+        <Title order={4} mb="md">
+          Page Actions
+        </Title>
+        <Text c="dimmed" mb="lg">
+          Used in toolbars and page headers.
+        </Text>
+        <PageActions actions={pageActions} />
+      </Card>
+
+      <Card withBorder shadow="sm" radius="md" p="md">
+        <Title order={4} mb="md">
+          Row Actions
+        </Title>
+        <Text c="dimmed" mb="lg">
+          Used inside data grids or list items.
+        </Text>
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>ID</Table.Th>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th style={{ width: 120 }}>Actions</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {tableData.map((row) => (
+              <Table.Tr key={row.id}>
+                <Table.Td>{row.id}</Table.Td>
+                <Table.Td>{row.name}</Table.Td>
+                <Table.Td>
+                  <Badge color={row.status === 'Approved' ? 'success' : 'warning'}>{row.status}</Badge>
+                </Table.Td>
+                <Table.Td>
+                  <RowActions actions={rowActions} />
+                </Table.Td>
+                <Table.Td>
+                  <RowActions showLabels actions={rowActions} />
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Card>
+    </Stack>
+  );
+}