@bspk/ui 1.3.3 → 1.3.4

package/src/components/SnackbarProvider/SnackbarProviderExample.tsx

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

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

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

@@ -1,17 +0,0 @@
-[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

@@ -1,15 +0,0 @@
-[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/TextField/TextField.tsx

@@ -1,67 +0,0 @@
-import { FormField, FormFieldWrapProps } from '-/components/FormField';
-import { TextInputProps, TextInput } from '-/components/TextInput';
-
-export type TextFieldProps = FormFieldWrapProps<TextInputProps>;
-
-/**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
- *
- * This component takes properties from the FormField and TextInput components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextField } from '@bspk/ui/TextField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return (
- *             <TextField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @name TextField
- * @phase UXReview
- */
-export function TextField({
-    label,
-    errorMessage,
-    helperText,
-    controlId,
-    labelTrailing,
-    required,
-    invalid,
-    ...inputProps
-}: TextFieldProps) {
-    return (
-        <FormField
-            controlId={controlId}
-            data-bspk="text-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => (
-                <TextInput
-                    {...inputProps}
-                    {...fieldProps}
-                    id={controlId}
-                    invalid={invalid}
-                    required={required}
-                    value={inputProps.value ?? ''}
-                />
-            )}
-        </FormField>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextField/TextFieldExample.tsx

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

package/src/components/TextField/index.tsx

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

package/src/components/TextInput/TextInputExample.tsx

@@ -1,44 +0,0 @@
-import { TextInputProps } from '.';
-import { ComponentExample } from '-/utils/demo';
-
-export const TextInputExample: ComponentExample<TextInputProps> = {
-    render: ({ props, Component }) => <Component {...props} />,
-    presets: [
-        {
-            label: 'Currency',
-            propState: {
-                type: 'number',
-                leading: '$',
-                trailing: undefined,
-                placeholder: 'currency',
-                name: 'currency',
-                'aria-label': 'Currency input',
-            },
-        },
-        {
-            label: 'Percent',
-            propState: {
-                type: 'number',
-                leading: undefined,
-                trailing: '%',
-                placeholder: 'percent',
-                name: 'percent',
-                'aria-label': 'Percent input',
-            },
-        },
-        {
-            label: 'Dimension',
-            propState: {
-                type: 'number',
-                leading: undefined,
-                placeholder: 'dimensions',
-                trailing: 'ft',
-                name: 'dimension',
-                'aria-label': 'Dimension input',
-            },
-        },
-    ],
-    variants: {
-        type: false,
-    },
-};

package/src/components/TextInput/index.tsx

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

package/src/components/TextareaField/TextareaFieldExample.tsx

@@ -1,13 +0,0 @@
-import { TextareaFieldProps } from '.';
-import { ComponentExample } from '-/utils/demo';
-
-export const TextareaFieldExample: ComponentExample<TextareaFieldProps> = {
-    render: ({ Component, props }) => {
-        const tooManyCharacters = Boolean(props.value && props.maxLength && props.value?.length > props.maxLength);
-
-        const invalid = props.invalid || tooManyCharacters;
-        const errorMessage = tooManyCharacters ? 'Too Many characters' : props.errorMessage || '';
-
-        return <Component {...props} errorMessage={errorMessage} invalid={invalid} />;
-    },
-};

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

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

package/src/components/TimeInput/TimeInputExample.tsx

@@ -1,6 +0,0 @@
-import { TimeInputProps } from './TimeInput';
-import { ComponentExample } from '-/utils/demo';
-
-export const TimeInputExample: ComponentExample<TimeInputProps> = {
-    variants: false,
-};

package/src/components/TimeInput/index.tsx

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

package/src/hooks/useSnackbarContext.ts

@@ -1,18 +0,0 @@
-/* eslint-disable no-console */
-import { useContext } from 'react';
-import { SnackbarContext } from '-/utils/snackbarContext';
-
-export const useSnackbarContext = () => {
-    const context = useContext(SnackbarContext);
-    if (!context) {
-        console.error('useSnackbarContext must be used within a SnackbarProvider!');
-    }
-    return (
-        context ?? {
-            snackbars: [],
-            sendSnackbar: () => console.error('sendSnackbar must be used within a SnackbarProvider!'),
-            clearSnackbar: () => console.error('clearSnackbar must be used within a SnackbarProvider!'),
-            clearAll: () => console.error('clearAll must be used within a SnackbarProvider!'),
-        }
-    );
-};

package/src/utils/snackbarContext.tsx

@@ -1,43 +0,0 @@
-import { createContext } from 'react';
-
-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 const SnackbarContext = createContext<SnackbarContextProps | undefined>(undefined);