@bspk/ui 1.2.0 → 1.3.1

package/dist/utils/snackbarContext.d.ts

@@ -0,0 +1,38 @@
+export interface SnackbarData {
+    /** Automatically set unique identifier. */
+    id: string;
+    /** The main body text of the snackbar */
+    text: string;
+    /**
+     * The variant of the snackbar.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'error' | 'success' | 'warning';
+    /** Time in milliseconds after which the snackbar will auto dismiss. You can also set a default at the UIProvider */
+    timeout?: number | null;
+    /** Optional action button */
+    button?: {
+        /**
+         * The button text
+         *
+         * @default 'dismiss'
+         */
+        label: string;
+        /**
+         * Either 'close' or a callback function that is called when the button is clicked. If 'close' is provided the
+         * snackbar will close when the button is clicked.
+         *
+         * @default 'close'
+         */
+        onClick: 'close' | (() => void);
+    };
+}
+export type SnackbarInput = Omit<SnackbarData, 'id'>;
+export type SnackbarContextProps = {
+    snackbars: SnackbarData[];
+    sendSnackbar: (data: Omit<SnackbarData, 'id'>) => void;
+    clearSnackbar: (id: SnackbarData['id']) => void;
+    clearAll: () => void;
+};
+export declare const SnackbarContext: import("react").Context<SnackbarContextProps | undefined>;

package/dist/utils/snackbarContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const SnackbarContext = createContext(undefined);
+//# sourceMappingURL=snackbarContext.js.map

package/dist/utils/snackbarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbarContext.js","sourceRoot":"","sources":["../../src/utils/snackbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA0CtC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAmC,SAAS,CAAC,CAAC"}

package/dist/utils/uiContext.d.ts

@@ -1,10 +1,16 @@
+import { AriaAttributes } from 'react';
 export declare const COLOR_THEMES: readonly ["light", "dark"];
 export type ColorTheme = (typeof COLOR_THEMES)[number];
+export type AriaLiveMessage = {
+    message: string;
+    live?: Exclude<AriaAttributes['aria-live'], 'off' | undefined>;
+};
 export type UIContextProps = {
     theme: ColorTheme;
     setTheme: (theme: ColorTheme) => void;
     isMobile: boolean;
     isTablet: boolean;
     isDesktop: boolean;
+    sendAriaLiveMessage: (message: string, live?: AriaLiveMessage['live']) => void;
 };
 export declare const UIContext: import("react").Context<UIContextProps | undefined>;

package/dist/utils/uiContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"uiContext.js","sourceRoot":"","sources":["../../src/utils/uiContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;AAYvD,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAA6B,SAAS,CAAC,CAAC"}
+{"version":3,"file":"uiContext.js","sourceRoot":"","sources":["../../src/utils/uiContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;AAevD,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAA6B,SAAS,CAAC,CAAC"}

package/dist/utils/useIds.d.ts

@@ -0,0 +1,4 @@
+/** A hook that generates unique IDs for a list of items. */
+export declare function useIds<T>(prefix: string, items: T[]): (T & {
+    id: string;
+})[];

package/dist/utils/useIds.js

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+/** A hook that generates unique IDs for a list of items. */
+export function useIds(prefix, items) {
+    return useMemo(() => items.map((item, index) => ({
+        ...item,
+        id: item && typeof item === 'object' && 'id' in item && item.id
+            ? String(item.id)
+            : `${prefix}-item-${index}`,
+    })), [items, prefix]);
+}
+//# sourceMappingURL=useIds.js.map

package/dist/utils/useIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIds.js","sourceRoot":"","sources":["../../src/utils/useIds.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,4DAA4D;AAC5D,MAAM,UAAU,MAAM,CAAI,MAAc,EAAE,KAAU;IAChD,OAAO,OAAO,CACV,GAAG,EAAE,CACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACxB,GAAG,IAAI;QACP,EAAE,EACE,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE;YACvD,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;YACjB,CAAC,CAAC,GAAG,MAAM,SAAS,KAAK,EAAE;KACtC,CAAC,CAAC,EACP,CAAC,KAAK,EAAE,MAAM,CAAC,CAClB,CAAC;AACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.2.0",
+    "version": "1.3.1",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -9,10 +9,13 @@
         "README.md",
         "LICENSE",
         "meta.ts",
-        "meta-types.ts",
         "build.ts",
-        "tsconfig.json"
+        "tsconfig.json",
+        "tsconfig.build.json"
     ],
+    "bin": {
+        "ui": "./.scripts/index.ts"
+    },
     "scripts": {
         "sass": "npx sass --no-source-map --silence-deprecation=mixed-decls src:dist",
         "build": "npx tsx build.ts",
@@ -21,14 +24,15 @@
         "lint": "eslint && tsc --noEmit && stylelint '**/*.scss'",
         "lint:fix": "eslint --fix",
         "semantic-release": "semantic-release",
-        "test": "jest",
+        "test": "NODE_NO_WARNINGS=1 node --experimental-vm-modules ./node_modules/.bin/jest",
         "prepare": "husky",
         "pre:commit": "tsx .scripts/pre-commit.ts",
         "meta": "tsx meta.ts",
         "pretty": "npx prettier --write src/",
         "newc": "tsx .scripts/tasks/new-component.ts",
+        "create:tests": "tsx .scripts/tasks/create-tests.ts",
         "clean": "tsx .scripts/clean.ts",
-        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts && npm run build"
+        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts && npm run build && npm run test"
     },
     "static-exports": {
         "./*": "./dist/*.js"
@@ -47,12 +51,20 @@
         "./BadgeDot/*": "./dist/components/BadgeDot/*.js",
         "./BannerAlert": "./dist/components/BannerAlert/index.js",
         "./BannerAlert/*": "./dist/components/BannerAlert/*.js",
+        "./BottomNavigation": "./dist/components/BottomNavigation/index.js",
+        "./BottomNavigation/*": "./dist/components/BottomNavigation/*.js",
         "./Breadcrumb": "./dist/components/Breadcrumb/index.js",
         "./Breadcrumb/*": "./dist/components/Breadcrumb/*.js",
         "./Button": "./dist/components/Button/index.js",
         "./Button/*": "./dist/components/Button/*.js",
+        "./ButtonDock": "./dist/components/ButtonDock/index.js",
+        "./ButtonDock/*": "./dist/components/ButtonDock/*.js",
+        "./CalendarPicker": "./dist/components/CalendarPicker/index.js",
+        "./CalendarPicker/*": "./dist/components/CalendarPicker/*.js",
         "./Card": "./dist/components/Card/index.js",
         "./Card/*": "./dist/components/Card/*.js",
+        "./Carousel": "./dist/components/Carousel/index.js",
+        "./Carousel/*": "./dist/components/Carousel/*.js",
         "./Checkbox": "./dist/components/Checkbox/index.js",
         "./Checkbox/*": "./dist/components/Checkbox/*.js",
         "./CheckboxGroup": "./dist/components/CheckboxGroup/index.js",
@@ -71,12 +83,16 @@
         "./ChipSuggestion/*": "./dist/components/ChipSuggestion/*.js",
         "./ChipUtility": "./dist/components/ChipUtility/index.js",
         "./ChipUtility/*": "./dist/components/ChipUtility/*.js",
-        "./Combobox": "./dist/components/Combobox/index.js",
-        "./Combobox/*": "./dist/components/Combobox/*.js",
+        "./DateField": "./dist/components/DateField/index.js",
+        "./DateField/*": "./dist/components/DateField/*.js",
+        "./DateInput": "./dist/components/DateInput/index.js",
+        "./DateInput/*": "./dist/components/DateInput/*.js",
         "./Dialog": "./dist/components/Dialog/index.js",
         "./Dialog/*": "./dist/components/Dialog/*.js",
         "./Divider": "./dist/components/Divider/index.js",
         "./Divider/*": "./dist/components/Divider/*.js",
+        "./Drawer": "./dist/components/Drawer/index.js",
+        "./Drawer/*": "./dist/components/Drawer/*.js",
         "./EmptyState": "./dist/components/EmptyState/index.js",
         "./EmptyState/*": "./dist/components/EmptyState/*.js",
         "./ExamplePlaceholder": "./dist/components/ExamplePlaceholder/index.js",
@@ -97,10 +113,10 @@
         "./Layout/*": "./dist/components/Layout/*.js",
         "./Link": "./dist/components/Link/index.js",
         "./Link/*": "./dist/components/Link/*.js",
-        "./Listbox": "./dist/components/Listbox/index.js",
-        "./Listbox/*": "./dist/components/Listbox/*.js",
         "./ListItem": "./dist/components/ListItem/index.js",
         "./ListItem/*": "./dist/components/ListItem/*.js",
+        "./ListItemMenu": "./dist/components/ListItemMenu/index.js",
+        "./ListItemMenu/*": "./dist/components/ListItemMenu/*.js",
         "./Menu": "./dist/components/Menu/index.js",
         "./Menu/*": "./dist/components/Menu/*.js",
         "./MenuButton": "./dist/components/MenuButton/index.js",
@@ -161,6 +177,10 @@
         "./SkeletonText/*": "./dist/components/SkeletonText/*.js",
         "./Slider": "./dist/components/Slider/index.js",
         "./Slider/*": "./dist/components/Slider/*.js",
+        "./Snackbar": "./dist/components/Snackbar/index.js",
+        "./Snackbar/*": "./dist/components/Snackbar/*.js",
+        "./SnackbarProvider": "./dist/components/SnackbarProvider/index.js",
+        "./SnackbarProvider/*": "./dist/components/SnackbarProvider/*.js",
         "./StylesProviderAnywhere": "./dist/components/StylesProviderAnywhere/index.js",
         "./StylesProviderAnywhere/*": "./dist/components/StylesProviderAnywhere/*.js",
         "./StylesProviderBetterHomesGardens": "./dist/components/StylesProviderBetterHomesGardens/index.js",
@@ -223,13 +243,14 @@
         "node": ">=20"
     },
     "dependencies": {
+        "@bspk/icons": "^1.0.5",
         "@bspk/styles": "^1.0.2",
         "@floating-ui/dom": "^1.6.13",
+        "date-fns": "^4.1.0",
         "focus-trap-react": "^11.0.1",
         "libphonenumber-js": "^1.12.9"
     },
     "peerDependencies": {
-        "@bspk/icons": "^1.0.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
@@ -241,9 +262,13 @@
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/github": "^11.0.2",
         "@semantic-release/npm": "^12.0.1",
+        "@testing-library/jest-dom": "^6.8.0",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/eslint-plugin-jsx-a11y": "^6.10.0",
         "@types/jest": "^29.5.14",
+        "@types/jest-axe": "^3.5.9",
         "@types/node": "^22.10.2",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.5",
@@ -257,14 +282,18 @@
         "eslint-plugin-react-hooks": "^5.0.0",
         "globals": "^15.12.0",
         "husky": "^9.1.7",
-        "jest": "^29.7.0",
+        "identity-obj-proxy": "^3.0.0",
+        "inquirer": "^12.9.6",
+        "jest": "^30.0.0",
+        "jest-axe": "^10.0.0",
+        "jest-environment-jsdom": "^30.1.2",
         "prettier-plugin-jsdoc": "^1.3.0",
         "sass": "^1.89.2",
         "semantic-release": "^24.2.0",
         "stylelint": "^16.19.1",
         "stylelint-config-standard": "^38.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
-        "ts-jest": "^29.2.5",
+        "ts-jest": "^29.4.3",
         "tslib": "^2.8.1",
         "tsx": "^4.19.4",
         "typescript": "5.6.3",

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

@@ -0,0 +1,17 @@
+import { Accordion } from './Accordion';
+import { presets } from './AccordionExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('Accordion (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<Accordion {...preset.propState} />));
+    });
+
+    it('renders its sections', () => {
+        const { getByText } = render(<Accordion {...presets[0].propState} />);
+
+        expect(getByText('Section 2')).toBeInTheDocument();
+        expect(getByText('Section 3')).toBeInTheDocument();
+    });
+});

package/src/components/Accordion/Accordion.tsx

@@ -1,17 +1,58 @@
-import { useEffect, useState } from 'react';
-import { AccordionSectionProps, AccordionSection } from './AccordionSection';
 import './accordion.scss';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { randomString } from '-/utils/random';
 
-export type AccordionItem = Omit<AccordionSectionProps, 'toggleOpen'>;
+export type AccordionSection = {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The title of the accordion.
+     *
+     * @required
+     */
+    title: string;
+    /** The subtitle of the accordion. */
+    subtitle?: string;
+    /** The leading element to display in the accordion header. */
+    leading?: ReactNode;
+    /** The trailing element to display in the accordion header. */
+    trailing?: ReactNode;
+    /**
+     * If the accordion is initially open.
+     *
+     * This is ignored if the accordion section disabled property is true.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Indicates whether the accordion is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for the accordion item.
+     *
+     * If not provided it will be generated automatically.
+     */
+    id?: string;
+};
 
 export type AccordionProps = {
     /**
      * Array of accordion sections
      *
-     * @type Array<AccordionItem>
+     * @type Array<AccordionSection>
      * @required
      */
-    items: AccordionItem[];
+    items: AccordionSection[];
     /**
      * If true only one accordion section can be opened at a time
      *
@@ -34,40 +75,65 @@ export type AccordionProps = {
  * @name Accordion
  * @phase UXReview
  */
-export function Accordion({ items, singleOpen = true }: AccordionProps) {
-    const [activeItems, setActiveItems] = useState<(number | string)[]>(() => {
+export function Accordion({ items: itemsProp, singleOpen = true }: AccordionProps) {
+    const items = useMemo(
+        () =>
+            itemsProp.map((item) => ({
+                ...item,
+                id: item.id || `accordion-item-${randomString(8)}`,
+                isOpen: item.disabled ? false : item.isOpen || false,
+            })),
+        [itemsProp],
+    );
+
+    const [openSections, setOpenSections] = useState<string[]>(() => {
         return items.filter((item) => item.isOpen).map((item) => item.id);
     });
 
     useEffect(() => {
-        // Update active items based on the items prop
-        setActiveItems(items.filter((item) => item.isOpen).map((item) => item.id));
+        // Update open sections based on the items prop
+        setOpenSections(items.filter((item) => item.isOpen).map((item) => item.id));
     }, [items]);
 
-    const toggleOpen = (itemId: number | string) => {
-        setActiveItems((prevItems) => {
-            const isItemActive = prevItems.includes(itemId);
+    const toggleOpen = (itemId: string) => () =>
+        setOpenSections((prev) => {
+            const isSectionOpen = prev.includes(itemId);
 
             // If singleOpen is true, reset activeItems to only include the clicked item or empty if it was already active
-            if (singleOpen) return isItemActive ? [] : [itemId];
+            if (singleOpen) return isSectionOpen ? [] : [itemId];
 
             // If singleOpen is false, toggle the clicked item and keep others active
-            return isItemActive ? prevItems.filter((activeItemId) => activeItemId !== itemId) : [...prevItems, itemId];
+            return isSectionOpen ? prev.filter((activeItemId) => activeItemId !== itemId) : [...prev, itemId];
         });
-    };
 
     return (
         <div data-bspk="accordion">
-            {items.map((item, index) => {
+            {items.map(({ children, title, subtitle: subtitle, leading, trailing, disabled, id }, index) => {
+                const isOpen = openSections.includes(id);
                 return (
-                    <AccordionSection
-                        {...item}
-                        isOpen={activeItems.includes(item.id)}
-                        key={`${item.id}-${index}`}
-                        toggleOpen={() => toggleOpen(item.id)}
-                    >
-                        {item.children}
-                    </AccordionSection>
+                    <section data-disabled={disabled || undefined} id={id} key={id || index}>
+                        <button
+                            aria-controls={`${id}-content`}
+                            aria-expanded={isOpen}
+                            data-header
+                            disabled={disabled || undefined}
+                            onClick={!disabled ? toggleOpen(id) : undefined}
+                        >
+                            {leading && <span data-leading>{leading}</span>}
+                            <span data-title-subtitle>
+                                <span data-title>{title}</span>
+                                {subtitle && <span data-subtitle>{subtitle}</span>}
+                            </span>
+                            {trailing && <span data-trailing>{trailing}</span>}
+                            <span data-arrow>{isOpen ? <SvgKeyboardArrowUp /> : <SvgKeyboardArrowDown />}</span>
+                        </button>
+                        {isOpen && (
+                            <div data-content data-hidden={!isOpen || undefined} id={`${id}-content`}>
+                                {children}
+                            </div>
+                        )}
+                        <span data-divider />
+                    </section>
                 );
             })}
         </div>

package/src/components/Accordion/AccordionExample.tsx

@@ -1,6 +1,6 @@
 import { AccordionProps } from '.';
-import { createExampleChildElement } from '-/utils/createExampleChildElement';
-import { ComponentExampleFn } from '-/utils/demo';
+import { Avatar } from '-/components/Avatar';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 const AccordionContent = () => (
     <p>
@@ -9,79 +9,85 @@ const AccordionContent = () => (
     </p>
 );
 
-export const AccordionExample: ComponentExampleFn<AccordionProps> = ({ action, setState }) => ({
-    containerStyle: { minHeight: 225 },
-    render: ({ props, Component, id, preset }) => {
-        const trailing = createExampleChildElement({
-            exampleState: props,
-            name: 'trailing',
-            setState,
-            action,
-            id,
-        });
-        const leading = createExampleChildElement({
-            exampleState: props,
-            name: 'leading',
-            setState,
-            action,
-            id,
-        });
-
-        return (
-            <>
-                <Component
-                    {...props}
-                    items={[
-                        {
-                            id: '1',
-                            title: `Section 1`,
-                            leading: leading.element,
-                            trailing: trailing.element,
-                            children: <AccordionContent />,
-                        },
-                        ...(props.items ?? []),
-                    ]}
-                    key={preset?.label}
-                />
-            </>
-        );
+export const presets: Preset<AccordionProps>[] = [
+    {
+        label: 'Multiple Sections',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    subtitle: 'Subtitle',
+                    children: <AccordionContent />,
+                },
+                {
+                    id: '2',
+                    title: 'Section 2',
+                    children: <AccordionContent />,
+                    leading: <Avatar name="Avatar" size="small" />,
+                    trailing: <span>Trailing</span>,
+                },
+                {
+                    id: '3',
+                    title: 'Section 3',
+                    children: <AccordionContent />,
+                },
+            ],
+        },
     },
-    presets: [
-        {
-            label: 'Multiple Sections',
-            propState: {
-                items: [
-                    {
-                        id: '2',
-                        title: 'Section 2',
-                        children: <AccordionContent />,
-                    },
-                    {
-                        id: '3',
-                        title: 'Section 3',
-                        children: <AccordionContent />,
-                    },
-                ],
-            },
+    {
+        label: 'Multiple Sections with 1 disabled',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: <AccordionContent />,
+                },
+                { id: '2', title: 'Section 2', disabled: true, children: <AccordionContent /> },
+                { id: '3', title: 'Section 3', children: <AccordionContent /> },
+            ],
         },
-        {
-            label: 'Multiple Sections with 1 disabled',
-            propState: {
-                items: [
-                    { id: '2', title: 'Section 2', disabled: true, children: <AccordionContent /> },
-                    { id: '3', title: 'Section 3', children: <AccordionContent /> },
-                ],
-            },
+    },
+    {
+        label: 'Multiple Sections with 1 disabled and open',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: <AccordionContent />,
+                },
+                { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: <AccordionContent /> },
+                { id: '3', title: 'Section 3', children: <AccordionContent /> },
+            ],
         },
-        {
-            label: 'Multiple Sections with 1 disabled and open',
-            propState: {
-                items: [
-                    { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: <AccordionContent /> },
-                    { id: '3', title: 'Section 3', children: <AccordionContent /> },
-                ],
+    },
+];
+
+export const AccordionExample: ComponentExampleFn<AccordionProps> = () => ({
+    containerStyle: { minHeight: 225 },
+    defaultState: {
+        items: [
+            {
+                id: '1',
+                title: `Section 1`,
+                children: <AccordionContent />,
             },
-        },
-    ],
+            {
+                id: '2',
+                title: 'Section 2',
+                children: <AccordionContent />,
+                leading: <Avatar name="Avatar" size="small" />,
+                trailing: <span>Trailing</span>,
+            },
+            {
+                id: '3',
+                title: 'Section 3',
+                children: <AccordionContent />,
+            },
+        ],
+    },
+    presets,
     variants: false,
 });