@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-debounced-callback.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import { useCallbackRef } from '@components/ui/data-grid/hooks/use-callback-ref'
+
+export function useDebouncedCallback<T extends (...args: never[]) => unknown>(callback: T, delay: number) {
+  const handleCallback = useCallbackRef(callback)
+  const debounceTimerRef = React.useRef(0)
+  React.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), [])
+
+  const setValue = React.useCallback(
+    (...args: Parameters<T>) => {
+      window.clearTimeout(debounceTimerRef.current)
+      debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay)
+    },
+    [handleCallback, delay],
+  )
+
+  return setValue
+}

package/dist/frontend-core/template/src/components/ui/data-table/context-menu-simple.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react'
+import { type ReactNode, useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
+
+import { Button } from '@components/ui/button/button'
+
+/**
+ * An entry in the context menu.
+ */
+export type ContextMenuAction = {
+  link?: ReactNode
+
+  /**
+   * If true, the action will be disabled and not clickable.
+   */
+  disabled?: boolean
+}
+
+export type ContextMenuConfig = {
+  /**
+   * Array of actions to be displayed in the context menu.
+   */
+  actions: ContextMenuAction[]
+
+  /**
+   * Position of the context menu on the screen.
+   * If null, the menu will not be displayed.
+   * The position should be an object with absolute x and y coordinates.
+   */
+  position: { x: number; y: number } | null
+}
+
+type ContextMenuProps = ContextMenuConfig & {
+  /**
+   * Callback function to be called when the context menu is closed.
+   */
+  onClose: () => void
+}
+
+/**
+ * ContextMenu Component
+ *
+ * A floating menu that displays a list of actions at a specified position on the screen.
+ * The menu closes when clicking outside of it or pressing the Escape key.
+ *
+ * Props:
+ * - actions: An array of Links, optional disabled state, and optional icon.
+ * - position: An object with x and y coordinates specifying the position of the menu, or null to hide the menu.
+ * - onClose: A callback function triggered when the menu is closed.
+ *
+ * Example usage:
+ *
+ * const actions = [
+ *   { label: 'Edit', onClick: () => console.log('Edit clicked') },
+ *   { label: 'Delete', onClick: () => console.log('Delete clicked'), disabled: true },
+ * ]
+ *
+ * const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
+ *
+ * return (
+ *   <div
+ *     onContextMenu={(e) => {
+ *       e.preventDefault();
+ *       setMenuPosition({ x: e.clientX, y: e.clientY });
+ *     }}
+ *   >
+ *     <p>Right-click to open the context menu.</p>
+ *     <ContextMenu
+ *       actions={actions}
+ *       position={menuPosition}
+ *       onClose={() => setMenuPosition(null)}
+ *     />
+ *   </div>
+ * );
+ */
+
+export const ContextMenuSimple = ({ actions, position, onClose }: ContextMenuProps) => {
+  const menuRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        event.preventDefault()
+        event.stopPropagation()
+        onClose()
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside, true)
+    document.addEventListener('keydown', handleEscape)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, true)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [onClose])
+
+  if (!position) {
+    return null
+  }
+
+  return ReactDOM.createPortal(
+    <div
+      ref={menuRef}
+      style={
+        {
+          '--wrapper-x': `${position.x}px`,
+          '--wrapper-y': `${position.y}px`,
+        } as React.CSSProperties
+      }
+      className={`top-(--wrapper-y) left-(--wrapper-x) fixed bg-background border border-(--discreet-border) shadow-md min-w-[150px] z-50`}
+    >
+      <div className="flex flex-col gap-1">
+        {actions.map((action, index) => (
+          <Button
+            asChild
+            key={`btn-${index}_${action.disabled}`}
+            onClick={() => {
+              if (!action.disabled) {
+                onClose()
+              }
+            }}
+            disabled={action.disabled}
+            __e2e_test_id__={`context-menu-item-${index}`}
+            variant="ghost"
+            className={`w-full justify-start`}
+          >
+            {action.link}
+          </Button>
+        ))}
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/dist/frontend-core/template/src/components/ui/data-table/data-table.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { DataTable, DataTableColumn } from '@components/ui/data-table/data-table'
+import {
+  countryArrayColumn,
+  FrontendSort,
+  numberColumn,
+  percentageColumn,
+  sortData,
+  stringColumn,
+} from '@components/ui/data-table/utils/columns'
+import { useState } from 'react'
+
+const meta: Meta<typeof DataTable> = {
+  title: 'Data Table',
+  component: DataTable,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DataTable>
+
+export default meta
+
+type Data = {
+  name: string
+  percentage: string
+  groups: number
+  email: string
+  risk: 'Low' | 'Medium' | 'High'
+  country: {
+    code: string
+    label: string
+    hoverLabel?: string
+  }[]
+}
+
+const data: Data[] = [
+  {
+    name: 'Charissa Byrd',
+    percentage: '82.5',
+    groups: 3,
+    email: 'lacus@icloud.org',
+    risk: 'Low',
+    country: [
+      { code: 'CN', label: 'China' },
+      { code: 'BR', label: 'Brazil' },
+    ],
+  },
+  {
+    name: 'Eagan Mclaughlin',
+    percentage: '59.6',
+    groups: 2,
+    email: 'vivamus.molestie@outlook.net',
+    risk: 'High',
+    country: [
+      { code: 'FR', label: 'France' },
+      { code: 'AG', label: 'Antigua' },
+    ],
+  },
+  {
+    name: 'Howard Hicks',
+    percentage: '75.4',
+    groups: 7,
+    email: 'sodales@outlook.couk',
+    risk: 'Medium',
+    country: [
+      { code: 'NG', label: 'Nigeria' },
+      { code: 'ZA', label: 'South Africa' },
+    ],
+  },
+  {
+    name: 'Richard Miller',
+    percentage: '56.1',
+    groups: 5,
+    email: 'quisque@google.com',
+    risk: 'Low',
+    country: [
+      { code: 'BR', label: 'Brazil' },
+      { code: 'CN', label: 'China' },
+    ],
+  },
+  {
+    name: 'Carolyn Valenzuela',
+    percentage: '61.3',
+    groups: 6,
+    email: 'sed@google.couk',
+    risk: 'High',
+    country: [
+      { code: 'AU', label: 'Australia', hoverLabel: 'optional hover label for Australia' },
+      { code: 'UK', label: 'United Kingdom' },
+    ],
+  },
+]
+type ColumnId = 'name' | 'percentage' | 'groups' | 'email' | 'risk-level' | 'country'
+
+const columns: DataTableColumn<Data, ColumnId>[] = [
+  stringColumn<Data, ColumnId>((item) => ({ label: item.name, onClick: () => alert(item.name) }), {
+    title: 'Name',
+    id: 'name',
+    width: 150,
+  }),
+  percentageColumn<Data, ColumnId>((item) => item.percentage, { title: 'Percentage', id: 'percentage', width: 90 }),
+  numberColumn<Data, ColumnId>((item) => item.groups, { title: 'Groups', id: 'groups', width: 60 }),
+  stringColumn<Data, ColumnId>((item) => item.email, { title: 'Email', id: 'email', width: 200 }),
+  stringColumn<Data, ColumnId>((item) => item.risk, {
+    title: 'Risk Level',
+    id: 'risk-level',
+    width: 80,
+    themeOverride: (item) => ({
+      textDark: item.risk === 'High' ? '#f82c2c' : item.risk === 'Medium' ? '#ffa501' : '#648558',
+    }),
+  }),
+  countryArrayColumn((item) => item.country, {
+    title: 'Country',
+    id: 'country',
+    width: 200,
+  }),
+]
+
+const ExampleTable = () => {
+  const [currentSort, setCurrentSort] = useState<FrontendSort<Data, ColumnId>>({
+    order: null,
+    field: null,
+  })
+
+  const sortHandler = (field: ColumnId, sort: 'asc' | 'desc' | null) => {
+    console.log('sortHandler: ', field, sort, 'currentSort: ', currentSort, 'columns: ', columns, '')
+    const column = columns.find((col) => col.id === field)
+
+    if (sort === null || !column) {
+      setCurrentSort({ order: null, field: null })
+      return
+    }
+
+    setCurrentSort({ order: sort, sortComparator: column.sortComparator, field })
+  }
+
+  return (
+    <DataTable
+      data={sortData<Data, ColumnId>(currentSort, data ?? [])}
+      columns={columns}
+      currentSort={currentSort.order ? currentSort : undefined}
+      sortHandler={sortHandler}
+    />
+  )
+}
+export const Default: StoryObj<typeof meta> = {
+  render: () => <ExampleTable />,
+}