@bspk/ui 1.1.34 → 1.3.0

package/src/components/Table/utils.ts

@@ -0,0 +1,179 @@
+import { isValidElement, ReactNode, useMemo, useState } from 'react';
+
+const parseDateTime = (val: TableCellValue) => {
+    if (val instanceof Date) return val.getTime();
+    if (typeof val === 'string' || typeof val === 'number') return new Date(val).getTime();
+    return 0;
+};
+
+export type BuiltInColumnSorters = 'boolean' | 'date' | 'number' | 'string';
+
+const BUILT_IN_COLUMN_SORTERS: Record<BuiltInColumnSorters, TableColumnSortingFn> = {
+    string: (a: TableCellValue, b: TableCellValue) => `${a}`.localeCompare(`${b}`),
+    number: (a: TableCellValue, b: TableCellValue) => {
+        const aNum = typeof a === 'number' ? a : Number(a) || 0;
+        const bNum = typeof b === 'number' ? b : Number(b) || 0;
+        return aNum - bNum;
+    },
+    boolean: (a: TableCellValue, b: TableCellValue) => (a === b ? 0 : a ? 1 : -1),
+    date: (a: TableCellValue, b: TableCellValue) => {
+        return parseDateTime(a) - parseDateTime(b);
+    },
+} as const;
+
+export type TableSize = 'large' | 'medium' | 'small' | 'x-large';
+
+export type TableCellValue = ReactNode;
+
+export type TableRow = {
+    [key: string]: TableCellValue | TableCellValue[];
+    id: string;
+};
+
+export type TableColumnSortingFn = (a: TableCellValue, b: TableCellValue) => number;
+
+export type TableColumn<R extends TableRow> = {
+    /**
+     * The key of the column. This is used to access the data in the row.
+     *
+     * @type string
+     */
+    key: string;
+    /**
+     * The label of the column. This is used to display the column header.
+     *
+     * @type string
+     */
+    label: string;
+    /**
+     * The width of the column. This is used to set the width of the column.
+     *
+     * Used to set the value of
+     * [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+     *
+     * @default 1fr
+     * @type string
+     */
+    width?: string;
+    /**
+     * The horizontal alignment of the column. This is used to set the text alignment of the column.
+     *
+     * @default left
+     */
+    align?: 'center' | 'left' | 'right';
+    /**
+     * The vertical alignment of the column. This is used to set the text alignment of the column.
+     *
+     * @default center
+     */
+    valign?: 'bottom' | 'center' | 'top';
+    /**
+     * The sorting function for the column.
+     *
+     * This can be a custom sorting function or one of the built-in sorting functions:
+     *
+     * `string`, `boolean`, `date`, or `number`.
+     *
+     * If unspecified, the column will not be sortable.
+     */
+    sort?: BuiltInColumnSorters | TableColumnSortingFn;
+    /**
+     * A formatter function for the cell values in the column.
+     *
+     * This function is called for each cell in the column and can be used to customize the display of the cell value.
+     */
+    formatter?: TableCellValueFormatter<R>;
+};
+
+export type TableCellValueFormatter<R extends TableRow> = (row: R, size: TableSize) => ReactNode;
+
+export type SortOrder = 'asc' | 'desc';
+
+export type SortState = { key: string; order: SortOrder }[];
+
+export const SORT_PREV_NEXT_STATE: Record<SortOrder | 'none', SortOrder | undefined> = {
+    asc: 'desc',
+    desc: undefined,
+    none: 'asc',
+};
+
+export function formatCell(value: TableCellValue): ReactNode {
+    if (isValidElement(value)) return value;
+
+    if (Array.isArray(value)) return value.map(formatCell).join(', ');
+
+    if (typeof value === 'object') {
+        // eslint-disable-next-line no-console
+        console.warn('Unexpected object value:', value);
+        return null;
+    }
+
+    return `${value}`;
+}
+
+export function useTable<R extends TableRow>({
+    data,
+    pageIndex,
+    pageSize,
+    columns,
+}: {
+    data: R[];
+    pageIndex: number;
+    pageSize: number;
+    columns?: TableColumn<R>[];
+}) {
+    const [sorting, setSorting] = useState<SortState>([]);
+
+    const filteredData = useMemo(() => {
+        let result = data;
+
+        // Apply sorting
+        if (sorting.length) {
+            result = result.sort((a, b) => {
+                for (const { key, order } of sorting) {
+                    const aValue = a[key];
+                    const bValue = b[key];
+
+                    const colSort = columns?.find((col) => col.key === key)?.sort;
+
+                    if (!colSort) continue;
+
+                    const colSortFn = typeof colSort === 'function' ? colSort : BUILT_IN_COLUMN_SORTERS[colSort];
+                    const next: number = colSortFn(aValue, bValue);
+
+                    if (next !== 0) return next * (order === 'asc' ? 1 : -1);
+                }
+
+                return 0;
+            });
+        }
+
+        // Apply pagination
+        const start = pageIndex * pageSize;
+        const end = start + pageSize;
+        result = result.slice(start, end);
+
+        return result;
+    }, [data, sorting, pageIndex, pageSize, columns]);
+
+    return {
+        rows: filteredData,
+        sorting,
+        toggleSorting: (key: string) => {
+            setSorting((prev) => {
+                const nextArr = [...prev];
+                const prevIndex = nextArr.findIndex((sort) => sort.key === key);
+                if (prevIndex !== -1) {
+                    const order = SORT_PREV_NEXT_STATE[nextArr[prevIndex].order];
+                    if (order === undefined) nextArr.splice(prevIndex, 1);
+                    else nextArr[prevIndex] = { key, order: order };
+                } else {
+                    nextArr.push({ key, order: 'asc' });
+                }
+                return nextArr;
+            });
+        },
+        totalColumns: columns?.length || 0,
+        totalPages: Math.ceil(data.length / pageSize),
+    };
+}

package/src/components/Tag/Tag.rtl.test.tsx

@@ -0,0 +1,20 @@
+import { Tag } from './Tag';
+import { presets } from './TagExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('Tag (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<Tag {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<Tag {...presets[0].propState} />);
+
+        expect(
+            getByText(
+                'Hello, this is a very long tag label that should be truncated if it exceeds the container width.',
+            ),
+        ).toBeInTheDocument();
+    });
+});

package/src/components/Tag/Tag.tsx

@@ -1,26 +1,14 @@
-import { ElementType, ReactNode } from 'react';
-
-import { ElementProps } from '-';
-import { ColorVariant } from '-/utils/colorVariants';
 import './tag.scss';
+import { Truncated } from '-/components/Truncated';
+import { ColorVariant } from '-/utils/colorVariants';
 
-export type TagProps<As extends ElementType = 'span'> = {
+export type TagProps = {
     /**
-     * The element type to render as.
-     *
-     * @default span
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The content of the tag.
-     *
-     * @example
-     *     New;
+     * The label of the tag.
      *
      * @required
      */
-    children: ReactNode;
+    label: string;
     /**
      * The size of the tag.
      *
@@ -39,14 +27,6 @@ export type TagProps<As extends ElementType = 'span'> = {
      * @default flat
      */
     variant?: 'corner-wrap' | 'flat' | 'pill';
-    /**
-     * Whether the tag should wrap its content.
-     *
-     * (Not recommended)
-     *
-     * @default false
-     */
-    wrap?: boolean;
 };
 
 /**
@@ -56,44 +36,19 @@ export type TagProps<As extends ElementType = 'span'> = {
  *     import { Tag } from '@bspk/ui/Tag';
  *
  *     export function Example() {
- *         return (
- *             <Tag variant="flat" color="primary">
- *                 Example Tag
- *             </Tag>
- *         );
+ *         return <Tag label="Example Tag" variant="flat" color="primary" />;
  *     }
  *
  * @name Tag
- * @phase AccessibilityReview
+ * @phase UXReview
  */
-function Tag<As extends ElementType = 'span'>({
-    children,
-    as,
-    color = 'white',
-    size = 'small',
-    variant = 'flat',
-    wrap,
-    ...props
-}: ElementProps<TagProps<As>, As>) {
-    const As: ElementType = as || 'span';
-
+export function Tag({ label, color = 'white', size = 'small', variant = 'flat' }: TagProps) {
     return (
-        <As
-            {...props}
-            data-bspk="tag"
-            data-color={color}
-            data-size={size}
-            data-variant={variant}
-            data-wrap={wrap || undefined}
-        >
-            {children}
+        <span data-bspk="tag" data-color={color} data-size={size} data-variant={variant}>
+            {label && <Truncated>{label}</Truncated>}
             {variant === 'corner-wrap' && <div data-triangle />}
-        </As>
+        </span>
     );
 }
 
-Tag.bspkName = 'Tag';
-
-export { Tag };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Tag/TagExample.tsx

@@ -0,0 +1,18 @@
+import { TagProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<TagProps>[] = [
+    {
+        label: 'Long Label',
+        propState: {
+            label: 'Hello, this is a very long tag label that should be truncated if it exceeds the container width.',
+            color: 'purple' as TagProps['color'],
+            size: 'small' as TagProps['size'],
+            variant: 'flat' as TagProps['variant'],
+        },
+    },
+];
+
+export const TagExample: ComponentExample<TagProps> = {
+    presets,
+};

package/src/components/Tag/tag.scss

@@ -1,24 +1,19 @@
 [data-bspk='tag'] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: fit-content;
+    display: inline-flex;
+    align-items: center;
     position: relative;
     padding: 0 var(--spacing-sizing-03);
     border-radius: var(--radius-sm);
     color: var(--foreground) !important;
     background: var(--background);
     font: unset;
-    text-decoration: unset;
-    white-space: nowrap;
-    pointer-events: none;
-
-    &[data-wrap] {
-        height: auto;
-    }
+    max-width: 200px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    width: fit-content;
 
     &[data-variant='pill'] {
-        border-radius: var(--radius-circular);
+        border-radius: var(--radius-full);
     }
 
     &[data-variant='corner-wrap'] {

package/src/components/TextField/TextField.rtl.test.tsx

@@ -0,0 +1,24 @@
+import { TextField } from './TextField';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <TextField
+        aria-label="Example label"
+        controlId="1"
+        label="Example label"
+        name="Example name"
+        onChange={() => {}}
+        value="text value"
+    />
+);
+
+describe('TextField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/TextField/TextField.tsx

@@ -1,25 +1,7 @@
-import { FormFieldProps, FormField } from '-/components/FormField';
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
 import { TextInputProps, TextInput } from '-/components/TextInput';
 
-export type TextFieldProps = Pick<
-    TextInputProps,
-    | 'autoComplete'
-    | 'disabled'
-    | 'errorMessage'
-    | 'inputRef'
-    | 'invalid'
-    | 'leading'
-    | 'name'
-    | 'onChange'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'trailing'
-    | 'type'
-    | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing'>;
+export type TextFieldProps = FormFieldWrapProps<TextInputProps>;
 
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line.
@@ -45,9 +27,9 @@ export type TextFieldProps = Pick<
  *     }
  *
  * @name TextField
- * @phase DesignReview
+ * @phase UXReview
  */
-function TextField({
+export function TextField({
     label,
     errorMessage,
     helperText,
@@ -63,7 +45,7 @@ function TextField({
             data-bspk="text-field"
             errorMessage={errorMessage}
             helperText={helperText}
-            invalid={!inputProps.readOnly && !inputProps.disabled && invalid}
+            invalid={invalid}
             label={label}
             labelTrailing={labelTrailing}
             required={required}
@@ -72,8 +54,8 @@ function TextField({
                 <TextInput
                     {...inputProps}
                     {...fieldProps}
-                    aria-label={label}
                     id={controlId}
+                    invalid={invalid}
                     required={required}
                     value={inputProps.value ?? ''}
                 />
@@ -82,8 +64,4 @@ function TextField({
     );
 }
 
-TextField.bspkName = 'TextField';
-
-export { TextField };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextField/TextFieldExample.tsx

@@ -0,0 +1,8 @@
+import { TextFieldProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const TextFieldExample: ComponentExample<TextFieldProps> = {
+    variants: {
+        type: false,
+    },
+};

package/src/components/TextInput/TextInput.rtl.test.tsx

@@ -0,0 +1,17 @@
+import { TextInput } from './TextInput';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <TextInput aria-label="Example label" name="Example name" onChange={() => {}} value="text value" />
+);
+
+describe('TextInput (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});