@gentleduck/registry-ui 0.3.0 → 0.3.2

package/src/_old/_table/table-advanced.tsx

@@ -1,311 +0,0 @@
-import { cn } from '@gentleduck/libs/cn'
-import { ArrowDownIcon, ArrowUpDown, ArrowUpIcon } from 'lucide-react'
-import React from 'react'
-import { Button } from '../button'
-import { Checkbox } from '../checkbox'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../dropdown-menu'
-import { Input } from '../input'
-import { ScrollArea } from '../scroll-area/'
-import { TableHead, TableHeader, TableRow } from '../table'
-import { Table, TableBody } from './table'
-import { dropdownMenuOptions } from './table-advanced.constants'
-import {
-  DuckTableBodyProps,
-  DuckTableContextType,
-  DuckTableHeadCheckboxProps,
-  DuckTableHeaderProps,
-  DuckTableHeadSelectableProps,
-  DuckTableProps,
-  DuckTableProviderProps,
-  DuckTableRowCheckboxProps,
-  GetColumnLabel,
-  TableColumnType,
-  TableContentDataType,
-  TableSearchStateType,
-} from './table-advanced.types'
-
-export const DuckTableContext = React.createContext<DuckTableContextType<any> | null>(null)
-
-export function useDuckTable<TColumnName extends readonly TableColumnType[]>() {
-  const context = React.useContext<DuckTableContextType<GetColumnLabel<TColumnName>>>(
-    DuckTableContext as unknown as React.Context<DuckTableContextType<GetColumnLabel<TColumnName>>>,
-  )
-  if (!context) {
-    throw new Error('useTableProvider must be used within an TableProvider')
-  }
-  return context
-}
-
-export function DuckTableProvider<TColumnName extends string[]>({
-  table_rows,
-  table_columns,
-  children,
-  className,
-  ...props
-}: DuckTableProviderProps<TColumnName>) {
-  const [search, setSearch] = React.useState<TableSearchStateType>({
-    query: '',
-    queryBy: [],
-  })
-
-  const [tableColumns, setTableColumns] = React.useState<Map<string, TableColumnType>>(
-    new Map(table_columns.map((column) => [column.label, column])),
-  )
-
-  const [selectedRows, setSelectedRows] = React.useState<Set<TableContentDataType<TColumnName>>>(new Set())
-
-  const DuckTable = DuckTableContext //<TColumnName>()
-
-  return (
-    <DuckTable.Provider
-      value={{
-        search,
-        selectedRows,
-        setSearch,
-        setSelectedRows,
-        setTableColumns,
-        tableColumns,
-        tableRows: table_rows,
-      }}>
-      <div className={cn(`w-full- flex flex-col gap-4 w-[800px] h-[500px]`, className)} {...props}>
-        {children}
-      </div>
-    </DuckTable.Provider>
-  )
-}
-DuckTableProvider.displayName = 'DuckTableProvider'
-
-export function DuckTable({ wrapper, className, children, ...props }: DuckTableProps) {
-  const { className: wrapperClassName, ...wrapperProps } = wrapper! ?? {}
-
-  return (
-    <ScrollArea
-      className={cn('border border-border rounded-lg !overflow-visible relative', wrapperClassName)}
-      {...wrapperProps}>
-      <Table {...props}>{children}</Table>
-    </ScrollArea>
-  )
-}
-DuckTable.displayName = 'DuckTable'
-
-// ------------------------------------------------------------------------------------------------
-
-export function DuckTableHeader({}: DuckTableHeaderProps) {
-  const { tableColumns } = useDuckTable()
-  return (
-    <>
-      <TableHeader>
-        <TableRow>
-          {Array.from(tableColumns.values())?.map((column, idx) => {
-            const { children, className, sortable, label, showLabel, ...props } = column
-
-            const Component = () =>
-              sortable ? (
-                <DuckTableHeadSelectable column={column} label={(label as string) ?? children} showLabel={showLabel} />
-              ) : (
-                <span className="capitalize">{(label as string) ?? children}</span>
-              )
-
-            return (
-              !column['aria-hidden'] && (
-                <React.Fragment key={idx}>
-                  <TableHead
-                    className={cn('py-2', idx === 0 && 'justify-start ', sortable && 'px-2', className)}
-                    {...props}>
-                    {idx === 0 ? (
-                      <div className="flex items-center gap-4">
-                        <DuckTableHeadCheckbox className={cn(sortable && 'justify-end')} type="header" />
-                        {/*NOTE: Rendering Sorting else rendering label*/}
-                        <Component />
-                      </div>
-                    ) : (
-                      <Component />
-                    )}
-                  </TableHead>
-                </React.Fragment>
-              )
-            )
-          })}
-        </TableRow>
-      </TableHeader>
-    </>
-  )
-}
-DuckTableHeader.displayName = 'TableCustomViewHeader'
-
-export function DuckTableHeadCheckbox({ className, ...props }: DuckTableHeadCheckboxProps) {
-  const { selectedRows, setSelectedRows, tableRows } = useDuckTable()
-
-  return (
-    <div className={cn('flex items-center w-fit data-[state=open]:bg-accent text-xs capitalize', className)} {...props}>
-      <Checkbox
-        checked={
-          selectedRows.size === tableRows.length
-            ? true
-            : selectedRows.size < tableRows.length && selectedRows.size
-              ? 'indeterminate'
-              : false
-        }
-        className="border-border"
-        onClick={() => {
-          setSelectedRows(() => {
-            if (selectedRows.size === tableRows.length) {
-              return new Set()
-            }
-            return new Set(tableRows.map((item) => item))
-          })
-        }}
-      />
-    </div>
-  )
-}
-
-export function DuckTableHeadSelectable<TSort extends boolean = true>({
-  column,
-  label,
-  showLabel,
-  children,
-}: DuckTableHeadSelectableProps<TSort>) {
-  const { setTableColumns } = useDuckTable()
-
-  return (
-    <div className={cn('flex items-center space-x-2')}>
-      {(dropdownMenuOptions?.length ?? 0) > 0 && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              aria-controls="dropdown-menu"
-              aria-label="table-column-options"
-              aria-sort={column['aria-sort']}
-              className="data-[state=open]:bg-accent [&>div]:justify-between w-full [&>div]:w-full capitalize"
-              label={
-                showLabel
-                  ? {
-                      children: label.toString() + ' options',
-                      className: 'capitalize',
-                      showLabel: true,
-                      side: 'top',
-                    }
-                  : undefined
-              }
-              name="dropdown-menu-trigger"
-              secondIcon={
-                column['aria-sort'] === 'ascending' ? (
-                  <ArrowDownIcon className="text-muted-foreground" />
-                ) : column['aria-sort'] === 'descending' ? (
-                  <ArrowUpIcon className="text-muted-foreground" />
-                ) : (
-                  <ArrowUpDown className="text-muted-foreground" />
-                )
-              }
-              size="sm"
-              variant="ghost">
-              {(label as string) ?? children}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-48">
-            <DropdownMenuGroup>
-              {dropdownMenuOptions.map((item, idx) => {
-                return (
-                  <>
-                    {idx === dropdownMenuOptions.length - 1 && <DropdownMenuSeparator />}
-                    <DropdownMenuItem
-                      className="p-0"
-                      key={idx}
-                      onClick={() => {
-                        setTableColumns((prev) => {
-                          const newSet = new Map(prev)
-
-                          if (item.children === ('hide' as 'other')) {
-                            newSet.set(label, {
-                              ...column,
-                              'aria-hidden': true,
-                              hidden: true,
-                            })
-                          } else {
-                            if (newSet.get(label)?.label === item.children) {
-                              newSet.set(label, {
-                                ...column,
-                                'aria-sort': 'none',
-                              })
-                            } else {
-                              newSet.set(label, {
-                                ...column,
-                                'aria-sort': item.children,
-                              })
-                            }
-                          }
-
-                          return newSet
-                        })
-                      }}>
-                      <Button {...item} className={cn('w-full justify-start capitalize', item.className)}>
-                        {item.children}
-                      </Button>
-                    </DropdownMenuItem>
-                  </>
-                )
-              })}
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </div>
-  )
-}
-
-export function DuckTableBody({ children }: DuckTableBodyProps) {
-  return <TableBody>{children}</TableBody>
-}
-
-export function DuckTableRowCheckbox<TColumnName extends readonly TableColumnType[]>({
-  className,
-  tableRow,
-  ...props
-}: DuckTableRowCheckboxProps<TColumnName>) {
-  const { selectedRows, setSelectedRows } = useDuckTable()
-
-  return (
-    <div className={cn('flex items-center w-fit data-[state=open]:bg-accent text-xs capitalize', className)} {...props}>
-      <Checkbox
-        checked={selectedRows.has(tableRow) ? true : false}
-        className="border-border"
-        onClick={() => {
-          setSelectedRows(() => {
-            if (selectedRows.has(tableRow)) {
-              return new Set(Array.from(selectedRows.values()).filter((item) => item !== tableRow))
-            }
-            return new Set([...selectedRows, tableRow])
-          })
-        }}
-      />
-    </div>
-  )
-}
-
-export interface DuckTableTopBarProps extends React.HTMLProps<HTMLDivElement> {}
-
-export function DuckTableTopBar({ className, children, ...props }: DuckTableTopBarProps) {
-  return (
-    <div className={cn('', className)} {...props}>
-      {children}
-    </div>
-  )
-}
-
-export interface DuckTableSearchInputProps extends React.HTMLProps<HTMLDivElement> {}
-
-export function DuckTableSearchInput({ className, ...props }: DuckTableSearchInputProps) {
-  return (
-    <div className={cn('flex-1', className)} {...props}>
-      <Input placeholder="Search..." />
-    </div>
-  )
-}

package/src/_old/_table/table-advanced.types.ts

@@ -1,272 +0,0 @@
-// @ts-noCheck
-
-import React from 'react'
-import { Button, LabelType } from '../button'
-import { ScrollArea } from '../scroll-area'
-import { Table, TableBody } from './table'
-import { sortArray } from './table.lib'
-
-// ------------------------------------------------------------------------------------------------
-// NOTE:  These types are used for the `table-advanced` context.
-// ------------------------------------------------------------------------------------------------
-
-export interface DuckTableProviderProps<TColumnName extends string[]> extends React.HTMLAttributes<HTMLDivElement> {
-  table_columns: readonly TableColumnType[]
-  table_rows: TableContentDataType<TColumnName>[]
-}
-
-export type DuckTableContextType<TColumnName extends string[]> = {
-  tableColumns: Map<string, TableColumnType>
-  setTableColumns: React.Dispatch<React.SetStateAction<Map<string, TableColumnType>>>
-  tableRows: TableContentDataType<TColumnName>[]
-  selectedRows: Set<TableContentDataType<TColumnName>>
-  setSelectedRows: React.Dispatch<React.SetStateAction<Set<TableContentDataType<TColumnName>>>>
-  search: TableSearchStateType
-  setSearch: React.Dispatch<React.SetStateAction<TableSearchStateType>>
-}
-
-export type TableSortByStateType<TColumnName extends string[]> = {
-  label: TColumnName[number]
-  type: React.HTMLProps<HTMLDivElement>['aria-sort']
-}
-
-export interface TableSearchStateType {
-  query: string
-  queryBy: string[]
-}
-
-// ------------------------------------------------------------------------------------------------
-// NOTE:  These types are used for the `table-advanced` Components.
-// ------------------------------------------------------------------------------------------------
-
-/**
- * Interface for the `DuckTable` component
- */
-export interface DuckTableProps extends React.ComponentPropsWithoutRef<typeof Table> {
-  wrapper?: React.ComponentPropsWithoutRef<typeof ScrollArea>
-}
-
-/**
- * Interface for the `DuckTableHeader` component
- */
-export interface DuckTableHeaderProps {}
-
-/**
- * Interface for the `DuckTableHeadCheckbox` component
- */
-export interface DuckTableHeadCheckboxProps extends React.HTMLProps<HTMLDivElement> {}
-
-/**
- * Interface for the `DuckTableRowCheckbox` component
- */
-export interface DuckTableRowCheckboxProps<TColumnName extends readonly TableColumnType[]>
-  extends React.HTMLProps<HTMLDivElement> {
-  tableRow: TableContentDataType<GetColumnLabel<TColumnName>>
-}
-
-/**
- * Interface for the `DuckTableHeadSelectable` component
- */
-export interface DuckTableHeadSelectableProps<TSort extends boolean = true> extends React.HTMLProps<HTMLDivElement> {
-  column: TableColumnType<TSort>
-  label: string
-  showLabel?: boolean | undefined
-}
-
-/**
- * Interface for the `DuckTableBody` component
- */
-export interface DuckTableBodyProps extends React.ComponentPropsWithoutRef<typeof TableBody> {}
-
-// ------------------------------------------------------------------------------------------------
-// NOTE:  These types are used for the `table-advanced, hence i use them to get the types.
-// ------------------------------------------------------------------------------------------------
-
-/**
- * Extracts the `label` property from an array of `TableColumnType` objects
- * and returns a tuple of string literals representing the column labels.
- *
- * ### Type Safety Guidelines:
- * 1. Ensure the `columns` array is defined as `const` to preserve type inference.
- * 2. Use `readonly TableColumnType[]` to enforce immutability and proper inference.
- *
- * #### Inferring Labels as a Union
- * - Append `[number]` to the type to extract a union of possible labels.
- * ```ts
- * type ColumnLabel = GetColumnLabel<typeof columns>[number]; // 'Name' | 'Age' | 'Email'
- * ```
- *
- * #### Defining Columns and Extracting Labels
- * ```ts
- * // Define columns as a strongly typed readonly array
- * const columns = [
- *   { label: "Name" },
- *   { label: "Age" },
- *   { label: "Email" }
- * ] as const satisfies readonly TableColumnType[];
- *
- * // Extract column labels as a tuple of string literals
- * type ColumnLabels = GetColumnLabel<typeof columns>; // ['Name', 'Age', 'Email']
- * ```
- */
-export type GetColumnLabel<TColumn extends readonly TableColumnType[]> = {
-  -readonly [K in keyof TColumn]: `${TColumn[K]['label']}`
-}
-
-/**
- * Defines the column type for a table based on a dynamic set of column names.
- *
- * ### Type Safety Guidelines:
- * 1. Define the columns array as `const` to infer the most precise type.
- * 2. Ensure the type satisfies `readonly string[]` to preserve strict type checking.
- *
- * #### Inferring Column Names as a Union
- * - Append `[number]` to the type to infer a union of possible column names.
- * ```ts
- * type ColumnName = TColumnName[number]; // Infers as a union of column names
- * ```
- *
- * #### Defining Columns and Extracting Names
- * ```ts
- * // Define column names as a strongly typed readonly array
- * const columnNames = ['name', 'age', 'email'] as const;
- *
- * // Extract column names as a union type
- * type ColumnName = typeof columnNames[number]; // 'name' | 'age' | 'email'
- * ```
- *
- * #### Example Usage
- * ```ts
- * type MyTableColumns = TableContentDataType<typeof columnNames>;
- *
- * const columns: MyTableColumns = {
- *   name: { label: "Full Name", children: "firstName", icon: { name: "user" } },
- *   age: { label: "Age", icon: { name: "calendar" } },
- *   email: { label: "Email Address" }
- * };
- * ```
- */
-export type TableContentDataType<TColumnName extends readonly string[]> = {
-  [key in TColumnName[number]]: TableColumnType & {
-    children?: TColumnName[number]
-    icon?: React.ReactNode
-  }
-}
-
-/**
- * **Utility Type: Mutable**
- * Converts all properties of a type `T` from readonly to mutable.
- *
- * @template T - The type to make mutable.
- *
- * @example
- * ```ts
- * type ReadonlyUser = { readonly name: string; readonly age: number };
- * type MutableUser = Mutable<ReadonlyUser>;
- * // Result:
- * // {
- * //   name: string;
- * //   age: number;
- * // }
- * ```
- */
-export type Mutable<T> = {
-  -readonly [K in keyof T]: T[K]
-} & {}
-
-/**
- * **Utility Type: Immutable**
- * Converts all properties of a type `T` from mutable to readonly.
- *
- * @template T - The type to make immutable.
- *
- * @example
- * ```ts
- * type User = { name: string; age: number };
- * type ReadonlyUser = Immutable<User>;
- * // Result:
- * // {
- * //   readonly name: string;
- * //   readonly age: number;
- * // }
- * ```
- */
-export type Immutable<T> = {
-  readonly [K in keyof T]: T[K]
-} & {}
-
-/**
- * **Utility Type: Mapped**
- * A type that directly maps all keys of a given type `T` to themselves.
- *
- * @template T - The type to map.
- *
- * @example
- * ```ts
- * type User = { name: string; age: number };
- * type MappedUser = Mapped<User>;
- * // Result (Same as User):
- * // {
- * //   name: string;
- * //   age: number;
- * // }
- * ```
- */
-export type Mapped<T> = {
-  [K in keyof T]: T[K]
-} & {}
-
-// ------------------------------------------------------------------------------------------------
-// NOTE:  These types are used for the `table-advanced, constants.
-// ------------------------------------------------------------------------------------------------
-
-export type TableColumnSortableType = React.ComponentPropsWithoutRef<typeof Button> & {
-  children: React.HTMLProps<HTMLDivElement>['aria-sort']
-}
-
-// ------------------------------------------------------------------------------------------------
-
-export interface TableColumnType<TSort extends boolean = true> extends Partial<React.HTMLProps<HTMLTableCellElement>> {
-  label: string
-  sortable?: boolean
-  showLabel?: boolean
-}
-
-export interface TableDropdownMenuOptionsType<T extends boolean> {
-  sortArray: typeof sortArray
-  setHeaders: React.Dispatch<React.SetStateAction<TableColumnType[]>>
-  headers: TableColumnType[]
-  tableData: TableContentDataType<T>[]
-  setTableData: React.Dispatch<React.SetStateAction<TableContentDataType<T>[]>>
-  data: TableContentDataType<T>[]
-  idx: number
-  column: TableColumnType
-}
-
-export interface TableColumnType extends React.HTMLProps<HTMLTableCellElement> {
-  // TODO: clean up these legacy props
-  // FIX: make sure to use these in the future
-  withLabel?: Omit<LabelType, 'showCommand' | 'showLabel'>
-  withIcon?: React.ReactNode
-}
-// ------------------------------------------------------------------------------------------------
-//NOTE: not used yet.
-export type TableDataFilteredType<T extends Record<string, unknown>> = {
-  [K in keyof T]: [K, T[K]]
-}[keyof T][]
-
-export interface TablePaginationStateType {
-  pageSize: number
-  pageIndex: number
-}
-
-export interface TableSelectionStateType {
-  rowSelected: Record<string, unknown>[]
-}
-
-export type ColumnsViewedStateType<T extends Record<string, unknown>> = TableColumnType<T> | null
-
-export type OrderStateType = {
-  orderBy: string
-  orderDir: 'asc' | 'desc'
-}

package/src/_old/_table/table.constants.ts

@@ -1,2 +0,0 @@
-export const PAGE_SIZE = 6
-export const PAGE_INDEX = 0