@bspk/ui 1.2.0 → 1.3.0

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -13,17 +13,19 @@ import { ChipGroup, ChipGroupProps } from '-/components/ChipGroup';
 import { ChipInput } from '-/components/ChipInput';
 import { ChipSuggestion } from '-/components/ChipSuggestion';
 import { ChipUtility } from '-/components/ChipUtility';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<ChipGroupProps>[] = [
+    { label: 'wrap', propState: { wrap: true } },
+    { label: 'scroll', propState: { wrap: false } },
+    { label: 'suggestion', propState: { wrap: true } },
+    { label: 'assist', propState: { wrap: true } },
+    { label: 'input', propState: { wrap: true } },
+    { label: 'filter', propState: { wrap: true } },
+];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
-    presets: [
-        { label: 'wrap', propState: { wrap: true } },
-        { label: 'scroll', propState: { wrap: false } },
-        { label: 'suggestion', propState: { wrap: true } },
-        { label: 'assist', propState: { wrap: true } },
-        { label: 'input', propState: { wrap: true } },
-        { label: 'filter', propState: { wrap: true } },
-    ],
+    presets,
     // containerStyle: { width: '100%' },
     render: ({ props, preset }) => {
         if (!preset) return null;

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

@@ -0,0 +1,16 @@
+import { ChipInput } from './ChipInput';
+import { presets } from './ChipInputExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('ChipInput (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<ChipInput {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<ChipInput {...presets[0].propState} />);
+
+        expect(getByText('chip option')).toBeInTheDocument();
+    });
+});

package/src/components/ChipInput/ChipInputExample.tsx

@@ -1,47 +1,49 @@
 import { ChipInputProps } from '.';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
 
-export const ChipInputExample: ComponentExampleFn<ChipInputProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
-    render: ({ props, Component }) => {
-        return <Component {...props} onClick={() => action('ChipInput clicked!')} />;
-    },
-    presets: [
-        {
-            label: 'Basic ChipInput',
-            propState: {
-                label: 'chip option',
-            },
+export const presets: Preset<ChipInputProps>[] = [
+    {
+        label: 'Basic ChipInput',
+        propState: {
+            label: 'chip option',
         },
-        {
-            label: 'with leadingIcon',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-            },
+    },
+    {
+        label: 'with leadingIcon',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
         },
-        {
-            label: 'with removable = false',
-            propState: {
-                label: 'chip option',
-                removable: false,
-            },
+    },
+    {
+        label: 'with removable = false',
+        propState: {
+            label: 'chip option',
+            removable: false,
         },
-        {
-            label: 'with removable = false and leadingIcon',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-                removable: false,
-            },
+    },
+    {
+        label: 'with removable = false and leadingIcon',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
+            removable: false,
         },
-        {
-            label: 'disabled',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-                disabled: true,
-            },
+    },
+    {
+        label: 'disabled',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
+            disabled: true,
         },
-    ],
+    },
+];
+
+export const ChipInputExample: ComponentExampleFn<ChipInputProps> = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return <Component {...props} onClick={() => action('ChipInput clicked!')} />;
+    },
+    presets,
 });

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

@@ -0,0 +1,19 @@
+import { ChipSuggestion } from './ChipSuggestion';
+import { presets } from './ChipSuggestionExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('ChipSuggestion (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<ChipSuggestion {...preset.propState} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<ChipSuggestion {...presets[0].propState} />);
+
+        expect(getByText('chip option')).toBeInTheDocument();
+    });
+});

package/src/components/ChipSuggestion/ChipSuggestionExample.tsx

@@ -1,24 +1,26 @@
 import { ChipSuggestionProps } from '.';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<ChipSuggestionProps>[] = [
+    {
+        label: 'ChipSuggestion example',
+        propState: {
+            label: 'chip option',
+        },
+    },
+    {
+        label: 'disabled',
+        propState: {
+            label: 'chip option',
+            disabled: true,
+        },
+    },
+];
 
 export const ChipSuggestionExample: ComponentExampleFn<ChipSuggestionProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
         return <Component {...props} onClick={() => action('ChipSuggestion clicked!')} />;
     },
-    presets: [
-        {
-            label: 'ChipSuggestion example',
-            propState: {
-                label: 'chip option',
-            },
-        },
-        {
-            label: 'disabled',
-            propState: {
-                label: 'chip option',
-                disabled: true,
-            },
-        },
-    ],
+    presets,
 });

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

@@ -0,0 +1,16 @@
+import { ChipUtility } from './ChipUtility';
+import { presets } from './ChipUtilityExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('ChipUtility (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<ChipUtility {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<ChipUtility {...presets[0].propState} />);
+
+        expect(getByText('chip')).toBeInTheDocument();
+    });
+});

package/src/components/ChipUtility/ChipUtility.tsx

@@ -1,9 +1,7 @@
+import './chip-utility.scss';
 import { ReactNode, isValidElement } from 'react';
-
 import { Badge, BadgeProps } from '-/components/Badge';
 
-import './chip-utility.scss';
-
 export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder'>;
 
 export type ChipUtilityProps = {

package/src/components/ChipUtility/ChipUtilityExample.tsx

@@ -1,63 +1,65 @@
-import { ChipUtilityProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { BadgeItem, ChipUtilityProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
-    render: ({ props, Component }) => <Component {...props} />,
-    presets: [
-        {
-            label: 'Basic',
-            propState: {
-                label: 'chip',
-            },
+export const presets: Preset<ChipUtilityProps>[] = [
+    {
+        label: 'Basic',
+        propState: {
+            label: 'chip',
         },
-        {
-            label: 'Leading Icon',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Add',
-                trailingIcon: '',
-            },
+    },
+    {
+        label: 'Leading Icon',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Add',
+            trailingIcon: '',
         },
-        {
-            label: 'Trailing Icon',
-            propState: {
-                label: 'chip',
-                leadingIcon: '',
-                trailingIcon: 'Add',
-            },
+    },
+    {
+        label: 'Trailing Icon',
+        propState: {
+            label: 'chip',
+            leadingIcon: '',
+            trailingIcon: 'Add',
         },
-        {
-            label: 'Both Icons',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Add',
-                trailingIcon: 'Add',
-            },
+    },
+    {
+        label: 'Both Icons',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Add',
+            trailingIcon: 'Add',
         },
-        {
-            label: 'Invalid Icons',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Bumblebee',
-                trailingIcon: 'Rabbit',
-            },
+    },
+    {
+        label: 'Invalid Icons',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Bumblebee',
+            trailingIcon: 'Rabbit',
         },
-        {
-            label: 'Trailing Badge',
-            propState: {
-                label: 'chip',
-                leadingIcon: 'Add',
-                trailingIcon: '',
-                trailingBadge: { count: 2, size: 'x-small' },
-            },
+    },
+    {
+        label: 'Trailing Badge',
+        propState: {
+            label: 'chip',
+            leadingIcon: 'Add',
+            trailingIcon: '',
+            trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
-        {
-            label: 'Trailing Badge Icon',
-            propState: {
-                label: 'chip',
-                trailingIcon: 'Cloud',
-                trailingBadge: { count: 2, size: 'x-small' },
-            },
+    },
+    {
+        label: 'Trailing Badge Icon',
+        propState: {
+            label: 'chip',
+            trailingIcon: 'Cloud',
+            trailingBadge: { count: 2, size: 'x-small' as BadgeItem['size'] },
         },
-    ],
+    },
+];
+
+export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
+    presets,
 };

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

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

package/src/components/DateField/DateField.tsx

@@ -0,0 +1,58 @@
+import './date-field.scss';
+import { DateInput, DateInputProps } from '-/components/DateInput';
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
+
+export type DateFieldProps = FormFieldWrapProps<DateInputProps>;
+/**
+ * An input field that allows a customer to manually type in a specific date or triggers a date picker combobox to
+ * select a date.
+ *
+ * @example
+ *     import { DateField } from '@bspk/ui/DateField';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return (
+ *             <DateField
+ *                 name="calendar input"
+ *                 aria-label="calendar input"
+ *                 label="calendar input"
+ *                 value={date}
+ *                 onChange={setDate}
+ *                 controlId="Example controlId"
+ *             />
+ *         );
+ *     }
+ *
+ * @name DateField
+ * @phase Dev
+ */
+export function DateField({
+    label,
+    errorMessage,
+    helperText,
+    invalid,
+    labelTrailing,
+    required,
+    controlId,
+    ...inputProps
+}: DateFieldProps) {
+    return (
+        <FormField
+            controlId={controlId}
+            data-bspk="date-field"
+            errorMessage={errorMessage}
+            helperText={helperText}
+            invalid={invalid}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={required}
+        >
+            {(fieldProps) => <DateInput {...inputProps} {...fieldProps} aria-label={label} invalid={invalid} />}
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateField/DateFieldExample.tsx

@@ -0,0 +1,13 @@
+import { DateFieldProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<DateFieldProps>[] = [];
+
+export const DateFieldExample: ComponentExample<DateFieldProps> = {
+    defaultState: {},
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => <Component {...props} value={props.value?.getDate ? props.value : undefined} />,
+    sections: [],
+    variants: {},
+};

package/src/components/DateField/date-field.scss

@@ -0,0 +1,8 @@
+[data-bspk='date-field'] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: fit-content;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DateField/index.tsx

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

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

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