@gentleduck/registry-ui 0.2.1

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

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

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

package/src/_old/_table/table.hook.tsx

@@ -0,0 +1,115 @@
+// @ts-noCheck
+import React from 'react'
+import { DuckTableContext } from './table-advanced'
+import { DuckTableContextType } from './table-advanced.types'
+
+export const useDuckTable = <
+  Column extends Record<string, unknown> = Record<string, unknown>,
+>(): DuckTableContextType<Column> | null => {
+  const context = React.useContext(DuckTableContext)
+  if (!context) {
+    throw new Error('useTableProvider must be used within an TableProvider')
+  }
+  return context
+}
+
+// <TableRow key={idx}>
+//                  {tableDataFiltered.map(([key, value], idx) => {
+//                    const headersEntries = headers.map(
+//                      item => item.label.toString().toLowerCase() ?? item.children?.toString().toLowerCase()
+//                    )
+//                    const { className, children, withLabel, ...props } = value
+//                    const {
+//                      className: labelClassName,
+//                      children: labelChildren,
+//                      type: labelType = 'default',
+//                      ...labelProps
+//                    } = item?.[key]?.withLabel ?? {}
+//
+//                    return (
+//                      headersEntries.includes(key.toString().toLowerCase()) && (
+//                        <TableCell
+//                          key={key}
+//                          className={cn('py-2 h-[50px]', selected.includes(item) && 'bg-muted', className)}
+//                          {...props}
+//                        >
+//                          <div
+//                            className={cn(
+//                              'items-center gap-2 flex w-full',
+//                              headers?.[idx]?.className,
+//                              className,
+//                              idx === headersEntries.length - 1 && dropdownMenu && 'justify-between w-full'
+//                            )}
+//                          >
+//                            {/*NOTE: Rendering Checkbox */}
+//                            {selection && idx === 0 && (
+//                              <Checkbox
+//                                className="border-border"
+//                                onClick={() =>
+//                                  setSelected(
+//                                    selected.includes(item) ? selected.filter(i => i !== item) : [...selected, item]
+//                                  )
+//                                }
+//                                checked={selected.includes(item)}
+//                              />
+//                            )}
+//
+//                            {/*NOTE: Rendering Label */}
+//                            {labelChildren && (
+//                              <Badge
+//                                variant={'outline'}
+//                                size={'sm'}
+//                                className={cn(labelType === 'default' ? '' : 'bg-red-500', labelClassName)}
+//                                {...labelProps}
+//                              >
+//                                {labelChildren}
+//                              </Badge>
+//                            )}
+//
+//                            <div className="flex items-center gap-2 text-ellipsis overflow-hidden whitespace-nowrap">
+//                              {/*NOTE: Getting Icons from Filter Data */}
+//                              {filtersData?.length &&
+//                                filtersData?.map(item => {
+//                                  return item?.content?.data.map((item, idx) => {
+//                                    const { children: Icon, ...props } = item?.element?.icon ?? {}
+//                                    return item.label?.toString().toLowerCase() ===
+//                                      (children as string).toString().toLowerCase() ? (
+//                                      <span
+//                                        className="whitespace-nowrap"
+//                                        key={idx}
+//                                      >
+//                                        {(Icon ? <Icon {...props} /> : '') as React.ReactNode}
+//                                      </span>
+//                                    ) : null
+//                                  })
+//                                })}
+//
+//                              {/*NOTE: Rendering the row column childrend */}
+//                              <span className="text-ellipsis overflow-hidden whitespace-nowrap">{children}</span>
+//                            </div>
+//                            {/*NOTE: Dropdown Menu */}
+//                            {idx === headersEntries.length - 1 && dropdownMenu.optionsData?.length && (
+//                              <DropdownMenuView
+//                                trigger={{
+//                                  className: 'flex h-8 w-8 p-0 data-[state=open]:bg-muted',
+//                                  children: <span className="sr-only">Open menu</span>,
+//                                  variant: 'ghost',
+//                                  size: 'icon',
+//                                  icon: {
+//                                    children: Ellipsis,
+//                                    className: 'h-4 w-4',
+//                                  },
+//                                }}
+//                                content={{
+//                                  align: 'end',
+//                                  options: dropdownMenu,
+//                                }}
+//                              />
+//                            )}
+//                          </div>
+//                        </TableCell>
+//                      )
+//                    )
+//                  })}
+//                </TableRow>
+//

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

@@ -0,0 +1,85 @@
+// @ts-noCheck
+import { DropdownMenuOptionsDataType } from '@/registry/default/ui/dropdown-menu'
+import { Order, TableHeaderType } from './table.types'
+import { ColumnsViewedStateType, TableContentDataType } from './table-advanced.types'
+
+export function sortArray<T>(columns: TableHeaderType[], array: T[], key?: keyof T, order: Order = 'desc') {
+  const toggleSortOrder = (currentOrder: Order): Order => {
+    if (currentOrder === 'not sorted') return order
+    if (currentOrder === 'asc' && order === 'asc') return 'not sorted'
+    if (currentOrder === 'asc' && order === 'desc') return 'desc'
+    if (currentOrder === 'desc' && order === 'desc') return 'not sorted'
+    if (currentOrder === 'desc' && order === 'asc') return 'asc'
+    return 'not sorted'
+  }
+
+  const updatedColumns = columns.map((col) => {
+    if (col.label === key) {
+      return {
+        ...col,
+        currentSort: toggleSortOrder(col.currentSort ?? 'not sorted'),
+      }
+    }
+    return col
+  })
+
+  const sortedData = array.toSorted((a, b) => {
+    const valueA = key ? (a[key] as TableContentDataType).children : a
+    const valueB = key ? (b[key] as TableContentDataType).children : b
+
+    if (order === 'not sorted' || !key) return 0
+
+    if (typeof valueA === 'string' && typeof valueB === 'string') {
+      return order === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA)
+    } else if (typeof valueA === 'number' && typeof valueB === 'number') {
+      return order === 'asc' ? valueA - valueB : valueB - valueA
+    } else {
+      return order === 'asc' ? (valueA > valueB ? 1 : -1) : valueA < valueB ? 1 : -1
+    }
+  })
+
+  return { sortedData, updatedColumns }
+}
+
+export type OptionsDataType<T extends Record<string, unknown>> = {
+  header: ColumnsViewedStateType<T>[]
+  columnsViewed?: ColumnsViewedStateType<T>[]
+  setColumnsViewed?: React.Dispatch<React.SetStateAction<ColumnsViewedStateType<T>[]>>
+}
+
+export function get_options_data<T extends Record<string, unknown> = Record<string, string>>({
+  header,
+  columnsViewed,
+  setColumnsViewed,
+}: OptionsDataType<T>) {
+  return header.map((column, idx) => {
+    const { children, className, label, sortable, disabled, currentSort, dropdownMenuOptions, ...props } = column ?? {}
+
+    return {
+      checked: columnsViewed?.some((headerItem) => headerItem?.label === label),
+      children: label ?? children,
+      className: 'capitalize',
+      disabled: disabled,
+      key: idx,
+      onCheckedChange: () => {
+        setColumnsViewed?.((prevHeaders) => {
+          const exists = prevHeaders.some((headerItem) => headerItem?.label === label)
+
+          if (exists) {
+            return prevHeaders.filter((headerItem) => headerItem?.label !== label)
+          }
+
+          const originalIndex = header.findIndex((headerItem) => headerItem?.label === label)
+          const newHeaders = [...prevHeaders]
+          newHeaders.splice(originalIndex, 0, column)
+          return newHeaders.sort(
+            (a, b) =>
+              header.findIndex((headerItem) => headerItem?.label === a?.label) -
+              header.findIndex((headerItem) => headerItem?.label === b?.label),
+          )
+        })
+      },
+      ...props,
+    }
+  }) as DropdownMenuOptionsDataType<T>[]
+}