@bspk/ui 1.3.7 → 1.3.9

package/src/utils/createExampleChildElement.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */ import { SvgContentCopy } from '@bspk/icons/ContentCopy';
 import { SvgDiamond } from '@bspk/icons/Diamond';
 import { DemoAction, DemoSetState } from './demo';
-
 import { Avatar } from '-/components/Avatar';
+import { Button } from '-/components/Button';
 import { Checkbox } from '-/components/Checkbox';
 import { Img } from '-/components/Img';
-import { ListItem } from '-/components/ListItem';
 import { Radio } from '-/components/Radio';
 import { Switch } from '-/components/Switch';
 import { Tag } from '-/components/Tag';
@@ -55,14 +54,10 @@ export function createExampleChildElement({ exampleState, name, setState, action
         };
     }
 
-    if (componentName === 'ListItemButton')
+    if (componentName === 'Button')
         return {
             element: (
-                <ListItem.Button
-                    icon={<SvgContentCopy />}
-                    label="LI Button"
-                    onClick={() => action('ListItem button clicked')}
-                />
+                <Button icon={<SvgContentCopy />} label="LI Button" onClick={() => action('ListItem button clicked')} />
             ),
             componentName,
         };

package/src/utils/demo.ts

@@ -2,22 +2,7 @@
 
 import { CSSProperties, ReactNode } from 'react';
 import { AlertVariant, DataProps } from '-/types/common';
-import { ComponentMeta } from '-/types/meta';
-
-export type TypeProperty = {
-    name: string;
-    description?: string;
-    type?: string[] | string;
-    default?: unknown;
-    required?: boolean;
-    options?: number[] | string[];
-    variants?: string[];
-    references?: string[];
-    minimum?: number;
-    maximum?: number;
-    example?: string;
-    exampleType?: string;
-};
+import { ComponentMeta, TypeProperty } from '-/types/meta';
 
 export type DemoAction = (message: string, variant?: AlertVariant) => void;
 
@@ -59,8 +44,24 @@ export type ComponentVariantOverride<Props> = {
     [K in keyof Props]?: Props[K] | { options: Props[K][] };
 };
 
+export type ComponentPageSection<Props = Record<string, unknown>> = {
+    title: string;
+    content: (params: {
+        Component?: React.ComponentType<Props>;
+        props: Props;
+        CodeExample: CodeExample;
+        Syntax: Syntax;
+    }) => React.ReactNode;
+    location?: 'afterDemo' | 'beforeDemo';
+};
+
 export type ComponentVariantOverrides<Props = Record<string, unknown>, PropName extends keyof Props = keyof Props> = {
-    [Key in PropName]?: ComponentVariantOverride<Props> | false | ((props: Props) => ComponentVariantOverride<Props>);
+    /**
+     * Hide the variant entirely by setting to false.
+     *
+     * Set specific prop overrides for the variant. e.g. when demoing iconOnly, we want to set the icon prop.
+     */
+    [Key in PropName]?: ComponentVariantOverride<Props> | false;
 };
 
 export type ComponentExample<Props = Record<string, unknown>, PropName extends keyof Props = keyof Props> = {
@@ -106,16 +107,7 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
      */
     disableProps?: PropName[] | true;
     /** The sections of the example. */
-    sections?: {
-        title: string;
-        content: (params: {
-            Component: React.ComponentType<Props>;
-            props: Props;
-            CodeExample: CodeExample;
-            Syntax: Syntax;
-        }) => React.ReactNode;
-        location?: 'afterDemo' | 'beforeDemo';
-    }[];
+    sections?: ComponentPageSection<Props>[];
 };
 
 export type Syntax = (params: {
@@ -148,6 +140,11 @@ export type ComponentExampleFn<Props = Record<string, unknown>> = (params: {
 export type OnHandlers = `on${string}`;
 
 export type Preset<Props> = {
+    /**
+     * A description of the design pattern this preset demonstrates. When applied, it showcases the specific use case or
+     * behavior of the component.
+     */
+    designPattern?: string;
     /** The name of the preset. This is used to display the preset in the UI. */
     label: string;
     /** The props of the component. This is used to set props of the component. These values can't be changed in the UI. */

package/dist/components/ListItem/ListItemButton.d.ts

@@ -1,2 +0,0 @@
-import { ButtonProps } from '-/components/Button';
-export declare function ListItemButton({ label, icon, ...buttonProps }: Pick<ButtonProps, 'icon' | 'label' | 'onClick'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListItem/ListItemButton.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../Button';
-// A button that can be used as a trailing element in a ListItem.
-export function ListItemButton({ label, icon, ...buttonProps }) {
-    return _jsx(Button, { icon: icon, iconOnly: true, label: label, ...buttonProps, size: "large", variant: "tertiary" });
-}
-//# sourceMappingURL=ListItemButton.js.map

package/dist/components/ListItem/ListItemButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemButton.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE1D,iEAAiE;AACjE,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,WAAW,EAAmD;IAC3G,OAAO,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,QAAC,KAAK,EAAE,KAAK,KAAM,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,GAAG,CAAC;AAC1G,CAAC"}

package/dist/components/Pagination/PageInput.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { PaginationProps } from './Pagination';
-export type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
-export declare const PageInput: FC<PageInputProps>;

package/dist/components/Pagination/PageInput.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Input } from '../Input';
-import { Txt } from '../Txt';
-export const PageInput = ({ numPages, onChange, value }) => {
-    const [page, setPage] = useState(String(value));
-    useEffect(() => {
-        const stringValue = String(value);
-        if (stringValue !== page) {
-            setPage(stringValue);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    const handleChange = (val) => {
-        const pageNumber = parseInt(val, 10);
-        const isValidPageNumber = !isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages;
-        if (isValidPageNumber || val === '') {
-            setPage(val);
-        }
-    };
-    const handleSubmit = () => {
-        const pageNumber = parseInt(page, 10);
-        if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages) {
-            onChange(pageNumber);
-        }
-        else {
-            setPage(String(value));
-        }
-    };
-    const pageCountMessage = `of ${numPages}`;
-    return (_jsx("form", { onSubmit: (e) => {
-            e.preventDefault();
-            handleSubmit();
-        }, style: { display: 'contents' }, children: _jsxs("div", { "data-bspk": "page-input", children: [_jsx(Input, { "aria-label": "Page input", name: "page-input", onBlur: handleSubmit, onChange: handleChange, showClearButton: false, size: "small", value: page }), _jsx(Txt, { variant: "body-small", children: pageCountMessage })] }) }));
-};
-//# sourceMappingURL=PageInput.js.map

package/dist/components/Pagination/PageInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageInput.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAIvC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAElC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACvB,OAAO,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;QACD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrC,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,CAAC;QAE1F,IAAI,iBAAiB,IAAI,GAAG,KAAK,EAAE,EAAE,CAAC;YAClC,OAAO,CAAC,GAAG,CAAC,CAAC;QACjB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,IAAI,CAAC,IAAI,UAAU,IAAI,QAAQ,EAAE,CAAC;YAClE,QAAQ,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,QAAQ,EAAE,CAAC;IAE1C,OAAO,CACH,eACI,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,YAAY,EAAE,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YAE9B,4BAAe,YAAY,aACvB,KAAC,KAAK,kBACS,YAAY,EACvB,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,KAAK,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,GACb,EAEF,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,gBAAgB,GAAO,IAChD,GACH,CACV,CAAC;AACN,CAAC,CAAC"}

package/dist/hooks/usePaginationState.d.ts

@@ -1,4 +0,0 @@
-export declare const usePaginationState: (numPages: number, initialPage?: number) => {
-    currentPage: number;
-    setCurrentPage: (page: number) => void;
-};

package/dist/hooks/usePaginationState.js

@@ -1,22 +0,0 @@
-import { useState } from 'react';
-/*
-    * A hook to manage the state of pagination.
-
-    * @param numPages - The total number of pages.
-    * @param initialPage - The initial page to start on (default is 1).
-    * @returns An object containing the current page and a function to set the current page.
-    */
-export const usePaginationState = (numPages, initialPage) => {
-    const [currentPage, setCurrentPage] = useState(initialPage || 1);
-    const setPage = (page) => {
-        if (page < 1 || page > numPages) {
-            return;
-        }
-        setCurrentPage(page);
-    };
-    return {
-        currentPage,
-        setCurrentPage: setPage,
-    };
-};
-//# sourceMappingURL=usePaginationState.js.map

package/dist/hooks/usePaginationState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePaginationState.js","sourceRoot":"","sources":["../../src/hooks/usePaginationState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;;MAMM;AACN,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAgB,EAAE,WAAoB,EAAE,EAAE;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE;QAC7B,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,EAAE,CAAC;YAC9B,OAAO;QACX,CAAC;QACD,cAAc,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO;QACH,WAAW;QACX,cAAc,EAAE,OAAO;KAC1B,CAAC;AACN,CAAC,CAAC"}

package/src/components/ListItem/ListItemButton.tsx

@@ -1,6 +0,0 @@
-import { ButtonProps, Button } from '-/components/Button';
-
-// A button that can be used as a trailing element in a ListItem.
-export function ListItemButton({ label, icon, ...buttonProps }: Pick<ButtonProps, 'icon' | 'label' | 'onClick'>) {
-    return <Button icon={icon} iconOnly label={label} {...buttonProps} size="large" variant="tertiary" />;
-}

package/src/components/Pagination/PageInput.tsx

@@ -1,65 +0,0 @@
-import { FC, useEffect, useState } from 'react';
-
-import { PaginationProps } from './Pagination';
-import { Input } from '-/components/Input';
-import { Txt } from '-/components/Txt';
-
-export type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
-
-export const PageInput: FC<PageInputProps> = ({ numPages, onChange, value }) => {
-    const [page, setPage] = useState<string>(String(value));
-
-    useEffect(() => {
-        const stringValue = String(value);
-
-        if (stringValue !== page) {
-            setPage(stringValue);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-
-    const handleChange = (val: string) => {
-        const pageNumber = parseInt(val, 10);
-        const isValidPageNumber = !isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages;
-
-        if (isValidPageNumber || val === '') {
-            setPage(val);
-        }
-    };
-
-    const handleSubmit = () => {
-        const pageNumber = parseInt(page, 10);
-
-        if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages) {
-            onChange(pageNumber);
-        } else {
-            setPage(String(value));
-        }
-    };
-
-    const pageCountMessage = `of ${numPages}`;
-
-    return (
-        <form
-            onSubmit={(e) => {
-                e.preventDefault();
-                handleSubmit();
-            }}
-            style={{ display: 'contents' }}
-        >
-            <div data-bspk="page-input">
-                <Input
-                    aria-label="Page input"
-                    name="page-input"
-                    onBlur={handleSubmit}
-                    onChange={handleChange}
-                    showClearButton={false}
-                    size="small"
-                    value={page}
-                />
-
-                <Txt variant="body-small">{pageCountMessage}</Txt>
-            </div>
-        </form>
-    );
-};

package/src/hooks/usePaginationState.tsx

@@ -1,24 +0,0 @@
-import { useState } from 'react';
-
-/*
-    * A hook to manage the state of pagination.
-
-    * @param numPages - The total number of pages.
-    * @param initialPage - The initial page to start on (default is 1).
-    * @returns An object containing the current page and a function to set the current page.
-    */
-export const usePaginationState = (numPages: number, initialPage?: number) => {
-    const [currentPage, setCurrentPage] = useState(initialPage || 1);
-
-    const setPage = (page: number) => {
-        if (page < 1 || page > numPages) {
-            return;
-        }
-        setCurrentPage(page);
-    };
-
-    return {
-        currentPage,
-        setCurrentPage: setPage,
-    };
-};