@bspk/ui 1.1.34 → 1.3.0

package/src/components/Snackbar/snackbar.scss

@@ -0,0 +1,22 @@
+[data-bspk='snackbar'] {
+    pointer-events: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+    gap: var(--spacing-sizing-03);
+    width: 600px;
+    max-width: 100%;
+    box-shadow:
+        0 0 1px 0 var(--shadow-variant-05),
+        0 0 12px 0 var(--shadow-variant-03);
+    background-color: var(--surface-neutral-inverse);
+    color: var(--foreground-neutral-on-inverse-surface);
+    height: var(--spacing-sizing-14);
+
+    [data-bspk='button'][data-variant='tertiary'] {
+        color: inherit;
+    }
+}

package/src/components/SnackbarProvider/SnackbarProvider.tsx

@@ -0,0 +1,160 @@
+import './snackbar-provider.scss';
+import { useState, ReactNode, useRef, useEffect } from 'react';
+import { Portal } from '-/components/Portal';
+import { Snackbar } from '-/components/Snackbar';
+import { randomString } from '-/utils/random';
+import { SnackbarContext, SnackbarData, SnackbarInput } from '-/utils/snackbarContext';
+
+export type SnackbarProviderProps = {
+    /** Content to be rendered inside the provider */
+    children: ReactNode;
+    /**
+     * Default time in milliseconds after which the snackbar will auto dismiss. If a Snackbar is sent with a timeout
+     * property that value will be used instead. If you want to disable the timeout for a specific snackbar, set its
+     * timeout to null.
+     */
+    timeout?: number | null;
+    /**
+     * Maximum number of snackbars to show at once
+     *
+     * @default 10
+     */
+    countLimit?: number;
+};
+
+/**
+ * Snackbar context provider. Snackbars are intended to provide feedback about an action without interrupting the
+ * customer experience.
+ *
+ * @example
+ *     import { SnackbarProvider } from '@bspk/ui/SnackbarProvider';
+ *
+ *     // In your application root
+ *     function Example() {
+ *         return (
+ *             <SnackbarProvider timeout={5000} countLimit={1}>
+ *                 <App />
+ *             </SnackbarProvider>
+ *         );
+ *     }
+ *
+ *     // In a descendent component
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *
+ *     function ExampleComponent() {
+ *         // The useSnackbarContext provides access to the sendSnackbar function
+ *         const { sendSnackbar } = useSnackbarContext();
+ *
+ *         return (
+ *             <button
+ *                 onClick={() =>
+ *                     sendSnackbar({
+ *                         text: 'Example snackbar',
+ *                         button: { text: 'Dismiss', onClick: 'close' },
+ *                         timeout: 3000,
+ *                     })
+ *                 }
+ *             >
+ *                 Show snackbar
+ *             </button>
+ *         );
+ *     }
+ *
+ *     // You can also programatically dismiss a Snackbar by calling clearSnackbar with the Snackbar's id.
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleClearComponent() {
+ *         const [snackbarId, setSnackbarId] = useState<string | null>(null);
+ *
+ *         const { sendSnackbar, clearSnackbar } = useSnackbarContext();
+ *
+ *         const sendAndStoreId = () => {
+ *             const id = sendSnackbar({
+ *                 text: 'Without a button or timeout I can only be closed programatically',
+ *             });
+ *             setSnackbarId(id);
+ *         };
+ *
+ *         const clear = () => {
+ *             if (snackbarId) {
+ *                 clearSnackbar(snackbarId);
+ *                 setSnackbarId(null);
+ *             }
+ *         };
+ *
+ *         return snackbarId ? (
+ *             <button onClick={clear}>Clear snackbar</button>
+ *         ) : (
+ *             <button onClick={sendAndStoreId}>Send snackbar</button>
+ *         );
+ *     }
+ *
+ * @name SnackbarProvider
+ * @phase UXReview
+ */
+export function SnackbarProvider({ children, timeout, countLimit = 10 }: SnackbarProviderProps) {
+    const [snackbars, setSnackbars] = useState<SnackbarData[]>([]);
+    const timeouts = useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+    const baseTimeout = timeout ?? 0;
+
+    const sendSnackbar = (data: SnackbarInput): string => {
+        const id = randomString(8);
+
+        setSnackbars((prevState) => prevState.concat([{ id, ...data }]));
+
+        const nextTimeout = data.timeout ?? baseTimeout;
+        if (data.timeout !== null && nextTimeout) {
+            timeouts.current.set(
+                id,
+                setTimeout(() => {
+                    clearSnackbar(id);
+                    timeouts.current.delete(id);
+                }, data.timeout ?? baseTimeout),
+            );
+        }
+
+        return id;
+    };
+
+    const clearSnackbar = (id: string) => {
+        setSnackbars((prevState) => prevState.filter((snackbarData) => snackbarData.id !== id));
+    };
+
+    const clearAll = () => {
+        setSnackbars([]);
+    };
+
+    useEffect(() => {
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to run this on dismount
+            timeouts.current.forEach((timeoutToClear) => clearTimeout(timeoutToClear));
+        };
+    }, []);
+
+    const visibleSnackbars = countLimit ? snackbars.slice(0, countLimit) : snackbars;
+
+    return (
+        <SnackbarContext.Provider
+            value={{
+                snackbars,
+                sendSnackbar,
+                clearSnackbar,
+                clearAll,
+            }}
+        >
+            {visibleSnackbars.length > 0 && (
+                <Portal>
+                    <div aria-live="off" data-bspk="snackbar-provider">
+                        {visibleSnackbars.map(({ button, text, id }) => (
+                            <Snackbar button={button} key={id} onClose={() => clearSnackbar(id)} text={text} />
+                        ))}
+                    </div>
+                </Portal>
+            )}
+
+            {children}
+        </SnackbarContext.Provider>
+    );
+}

package/src/components/SnackbarProvider/SnackbarProviderExample.tsx

@@ -0,0 +1,127 @@
+import { useRef, useState } from 'react';
+import { SnackbarProvider, SnackbarProviderProps } from './SnackbarProvider';
+import { Button } from '-/components/Button';
+import { CheckboxGroup } from '-/components/CheckboxGroup';
+import { NumberField } from '-/components/NumberField';
+import { TextField } from '-/components/TextField';
+import { Txt } from '-/components/Txt';
+import { useSnackbarContext } from '-/hooks/useSnackbarContext';
+import { ComponentExample } from '-/utils/demo';
+import './snackbar-provider-example.scss';
+
+export const SnackbarProviderExample: ComponentExample<SnackbarProviderProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [],
+    render: ({ props }) => (
+        <SnackbarProvider countLimit={props.countLimit} timeout={props.timeout || 5000}>
+            <ExampleForm />
+        </SnackbarProvider>
+    ),
+    sections: [],
+    variants: {},
+};
+
+function ExampleForm() {
+    const countRef = useRef(0);
+    const [snackbarText, setSnackbarText] = useState('Full send!');
+    const [options, setOptions] = useState<string[]>(['enableTimeout']);
+    const [dismissButtonText, setDismissButtonText] = useState('Dismiss');
+    const [timeout, setTimeout] = useState(5000);
+
+    const { sendSnackbar } = useSnackbarContext();
+
+    const enableTimeout = options.includes('enableTimeout');
+    const enableDismiss = options.includes('dismissButton');
+    const enableCount = options.includes('showCount');
+
+    const onButtonClick = () => {
+        if (enableCount) {
+            countRef.current += 1;
+        }
+
+        sendSnackbar({
+            text: snackbarText + (enableCount ? ` (${countRef.current})` : ''),
+            timeout: enableTimeout ? timeout : null,
+            button: enableDismiss
+                ? {
+                      label: dismissButtonText,
+                      onClick: 'close',
+                  }
+                : undefined,
+        });
+    };
+
+    return (
+        <div data-snackbar-provider-example="">
+            <TextField
+                aria-label="Snackbar Text"
+                controlId="text"
+                label="Snackbar Text"
+                name="text"
+                onChange={setSnackbarText}
+                size="small"
+                value={snackbarText}
+            />
+
+            <CheckboxGroup
+                aria-label="Example Checkbox Group"
+                name="example-checkbox-group"
+                onChange={(nextValues: string[]) => {
+                    setOptions(nextValues);
+                }}
+                options={[
+                    { label: 'Enable timeout', value: 'enableTimeout' },
+                    {
+                        label: 'Include dismiss button',
+                        value: 'dismissButton',
+                    },
+                    {
+                        label: 'Count sends (diagnostic)',
+                        value: 'showCount',
+                    },
+                ]}
+                values={options}
+            />
+
+            {enableTimeout && (
+                <NumberField
+                    aria-label="Timeout"
+                    controlId="timeout"
+                    label="Timeout (ms)"
+                    max={60000}
+                    min={0}
+                    name="timeout"
+                    onChange={(val) => setTimeout(parseInt(`${val}`) || 0)}
+                    size="small"
+                    step={1000}
+                    value={timeout}
+                />
+            )}
+
+            {enableDismiss && (
+                <TextField
+                    aria-label="Dismiss button Text"
+                    controlId="text"
+                    label="Dismiss Button Text"
+                    name="text"
+                    onChange={setDismissButtonText}
+                    size="small"
+                    value={dismissButtonText}
+                />
+            )}
+
+            {!enableDismiss && !enableTimeout && (
+                <Txt data-warning="" variant="body-small">
+                    Note: Without a timeout or dismiss button the snackbar can only be closed programatically using the
+                    useSnackbarContext hook.
+                </Txt>
+            )}
+
+            <div data-button-wrapper="">
+                <Button label="Send it!" onClick={onButtonClick} size="medium" title="Snackbar" />
+            </div>
+        </div>
+    );
+}

package/src/components/SnackbarProvider/index.tsx

@@ -0,0 +1 @@
+export * from './SnackbarProvider';

package/src/components/SnackbarProvider/snackbar-provider-example.scss

@@ -0,0 +1,17 @@
+[data-snackbar-provider-example] {
+    display: flex;
+    gap: var(--spacing-sizing-03);
+    flex-direction: column;
+    width: 300px;
+    flex: 1;
+
+    [data-warning] {
+        color: var(--status-error);
+    }
+
+    [data-button-wrapper] {
+        display: flex;
+        justify-content: center;
+        margin-top: var(--spacing-sizing-02);
+    }
+}

package/src/components/SnackbarProvider/snackbar-provider.scss

@@ -0,0 +1,15 @@
+[data-bspk='snackbar-provider'] {
+    position: fixed;
+    z-index: var(--z-index-dialog);
+    display: flex;
+    flex-direction: column-reverse;
+    max-height: 100%;
+    overflow: hidden;
+    inset: 0;
+    align-items: center;
+    gap: var(--spacing-sizing-02);
+    pointer-events: none;
+    padding: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderAnywhere/StylesProviderAnywhere.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/anywhere.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Anywhere styles to the application.
  *
  * @name StylesProviderAnywhere
+ * @phase Utility
+ * @generated
  */
-function StylesProviderAnywhere(): JSX.Element | null {
+export function StylesProviderAnywhere(): JSX.Element | null {
     return null;
 }
 
-StylesProviderAnywhere.bspkName = 'StylesProviderAnywhere';
-
-export { StylesProviderAnywhere };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderBetterHomesGardens/StylesProviderBetterHomesGardens.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/better-homes-gardens.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Better Homes & Gardens styles to the application.
  *
  * @name StylesProviderBetterHomesGardens
+ * @phase Utility
+ * @generated
  */
-function StylesProviderBetterHomesGardens(): JSX.Element | null {
+export function StylesProviderBetterHomesGardens(): JSX.Element | null {
     return null;
 }
 
-StylesProviderBetterHomesGardens.bspkName = 'StylesProviderBetterHomesGardens';
-
-export { StylesProviderBetterHomesGardens };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderCartus/StylesProviderCartus.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/cartus.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Cartus styles to the application.
  *
  * @name StylesProviderCartus
+ * @phase Utility
+ * @generated
  */
-function StylesProviderCartus(): JSX.Element | null {
+export function StylesProviderCartus(): JSX.Element | null {
     return null;
 }
 
-StylesProviderCartus.bspkName = 'StylesProviderCartus';
-
-export { StylesProviderCartus };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderCentury21/StylesProviderCentury21.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/century-21.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Century 21 styles to the application.
  *
  * @name StylesProviderCentury21
+ * @phase Utility
+ * @generated
  */
-function StylesProviderCentury21(): JSX.Element | null {
+export function StylesProviderCentury21(): JSX.Element | null {
     return null;
 }
 
-StylesProviderCentury21.bspkName = 'StylesProviderCentury21';
-
-export { StylesProviderCentury21 };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderColdwellBanker/StylesProviderColdwellBanker.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/coldwell-banker.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Coldwell Banker styles to the application.
  *
  * @name StylesProviderColdwellBanker
+ * @phase Utility
+ * @generated
  */
-function StylesProviderColdwellBanker(): JSX.Element | null {
+export function StylesProviderColdwellBanker(): JSX.Element | null {
     return null;
 }
 
-StylesProviderColdwellBanker.bspkName = 'StylesProviderColdwellBanker';
-
-export { StylesProviderColdwellBanker };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderCorcoran/StylesProviderCorcoran.tsx

@@ -1,17 +1,15 @@
 import '@bspk/styles/corcoran.css';
-import '../../base.scss';
+import '-/styles/base.scss';
 
 /**
  * Utility to provide the Corcoran styles to the application.
  *
  * @name StylesProviderCorcoran
+ * @phase Utility
+ * @generated
  */
-function StylesProviderCorcoran(): JSX.Element | null {
+export function StylesProviderCorcoran(): JSX.Element | null {
     return null;
 }
 
-StylesProviderCorcoran.bspkName = 'StylesProviderCorcoran';
-
-export { StylesProviderCorcoran };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/StylesProviderDemo/StylesProviderDemo.tsx

@@ -0,0 +1,49 @@
+import { useRef, useEffect } from 'react';
+import { BRANDS_CSS } from './brandsCss';
+import { Brand } from '-/types/common';
+import '-/styles/base.scss';
+
+export type StylesProviderDemoProps = {
+    /**
+     * The current brand variant.
+     *
+     * @default anywhere
+     */
+    brand?: Brand;
+};
+
+/**
+ * Used only on the demo site to switch between different brands styles.
+ *
+ * @example
+ *     import { StylesProviderDemo } from '@bspk/ui/StylesProviderDemo';
+ *
+ *     function Example() {
+ *         return <StylesProviderDemo brand="anywhere" />;
+ *     }
+ *
+ * @name StylesProviderDemo
+ * @phase Utility
+ */
+export function StylesProviderDemo({ brand = 'anywhere' }: StylesProviderDemoProps): JSX.Element | null {
+    const styleElement = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        if (!styleElement.current) {
+            styleElement.current = document.createElement('style');
+            document.head.appendChild(styleElement.current);
+        }
+
+        styleElement.current.textContent = (brand && BRANDS_CSS[brand]) || BRANDS_CSS.anywhere;
+
+        return () => {
+            if (!styleElement.current) return;
+            document.head.removeChild(styleElement.current);
+            styleElement.current = null;
+        };
+    }, [brand]);
+
+    return null;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */