@postxl/generators 1.1.0 → 1.2.0

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

@@ -1,19 +0,0 @@
-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-grid/styles.css

@@ -1,3 +0,0 @@
-@theme inline {
-  --data-grid-line-height: 16px;
-}

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

@@ -1,141 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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 />,
-}