@westpac/ui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -22,6 +22,9 @@
     "./icon": {
       "default": "./dist/components/icon/index.js"
     },
+    "./hook": {
+      "default": "./dist/hook/index.js"
+    },
     "./pictogram": {
       "default": "./dist/components/pictogram/index.js"
     },
@@ -42,6 +45,10 @@
   ],
   "devDependencies": {
     "@react-types/accordion": "3.0.0-alpha.14",
+    "@react-types/combobox": "~3.7.0",
+    "@react-types/shared": "~3.18.1",
+    "@storybook/addon-actions": "~7.4.3",
+    "@storybook/addon-a11y": "~7.4.3",
     "@storybook/addon-essentials": "^7.0.21",
     "@storybook/addon-interactions": "^7.0.21",
     "@storybook/addon-links": "^7.0.21",
@@ -55,6 +62,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "~14.4.3",
+    "@types/lodash-es": "~4.17.8",
     "@types/prettier": "~2.7.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.2.1",
@@ -86,6 +94,7 @@
     "vitest": "^0.30.1"
   },
   "dependencies": {
+    "@duetds/date-picker": "~1.4.0",
     "@react-aria/accordion": "3.0.0-alpha.19",
     "@react-aria/utils": "~3.18.0",
     "@react-spectrum/utils": "~3.10.0",
@@ -98,8 +107,15 @@
     "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
+  "overrides": {
+    "react-aria": {
+      "@types/react": "$@types/react"
+    }
+  },
   "peerDependencies": {
+    "@duetds/date-picker": "~1.4.0",
     "colorjs.io": "~0.4.5",
+    "react": ">=18.2.0",
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0"
@@ -119,7 +135,7 @@
     "lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
     "lint:fix": "eslint \"./src/**/*.{ts,tsx,js,jsx}\" --fix",
     "test": "vitest run",
-    "test:watch": "vitest",
+    "test:watch": "vitest --no-coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate:component": "plop"

package/scaffold/component/scaffold.stories.hbs

@@ -8,7 +8,7 @@ const meta: Meta<typeof {{name}}> = {
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
   parameters: {
-    layout: 'center',
+    layout: 'centered',
   },
 };
 

package/src/components/accordion/accordion.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof Accordion> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -22,10 +22,10 @@ export const styles = tv(
       },
       color: {
         hero: {
-          itemHeader: 'border-l-5 border-l-border transition-colors',
+          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
         },
         primary: {
-          itemHeader: 'border-l-5 border-l-border transition-colors',
+          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
         },
       },
       isOpen: {
@@ -69,12 +69,12 @@ export const styles = tv(
       {
         slots: ['content'],
         color: 'hero',
-        className: 'border-l-5 border-l-border',
+        className: 'border-l-[0.375rem] border-l-border',
       },
       {
         slots: ['content'],
         color: 'primary',
-        className: 'border-l-5 border-l-border',
+        className: 'border-l-[0.375rem] border-l-border',
       },
     ],
   },

package/src/components/alert/alert.component.tsx

@@ -59,7 +59,7 @@ export function Alert({
           >
             <Tag className={styles.base({ className })} {...props}>
               <span className={styles.icon()}>
-                <Icon size={{ initial: 'small', xsl: 'medium' }} />
+                <Icon size={{ initial: 'small', xsl: 'medium' }} look="outlined" />
               </span>
               <div className={styles.body()}>
                 {!!heading && <HeadingTag className={styles.heading()}>{heading}</HeadingTag>}

package/src/components/alert/alert.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 relative mb-4 p-3 xsl:flex',
+      base: 'typography-body-10 relative mb-4 xsl:flex',
       icon: 'float-left mr-1 flex-none xsl:mr-2',
       body: 'relative flex-1 xsl:top-[0.125rem] [&_a]:underline',
       heading: 'typography-body-9 mb-2 font-bold',
@@ -29,7 +29,7 @@ export const styles = tv(
       },
       mode: {
         box: {
-          base: 'border-y',
+          base: 'border-y p-3',
         },
         text: {
           base: 'bg-[transparent]',

package/src/components/autocomplete/autocomplete.component.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
+import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';
+
+import { ClearIcon } from '../icon/index.js';
+
+import { styles as autocompleteStyles } from './autocomplete.styles.js';
+import { type AutocompleteProps } from './autocomplete.types.js';
+import { ListBox, Popover } from './components/index.js';
+
+export function Autocomplete<T extends object>({
+  size = 'medium',
+  invalid = false,
+  isDisabled,
+  footer,
+  portalContainer,
+  ...props
+}: AutocompleteProps<T>) {
+  const { contains } = useFilter({ sensitivity: 'base' });
+  const state = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
+  const inputRef = React.useRef(null);
+  const listBoxRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const { inputProps, listBoxProps, labelProps } = useComboBox(
+    {
+      ...props,
+      isDisabled,
+      inputRef,
+      listBoxRef,
+      popoverRef,
+    },
+    state,
+  );
+
+  const styles = autocompleteStyles({
+    isDisabled,
+    isFocused: state.isFocused,
+    size,
+    invalid,
+  });
+  // Get props for the clear button from useSearchField
+  const searchProps = {
+    label: props.label,
+    value: state.inputValue,
+    onChange: (v: string) => state.setInputValue(v),
+  };
+
+  const searchState = useSearchFieldState(searchProps);
+  const { clearButtonProps } = useSearchField(
+    { ...searchProps, 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'] },
+    searchState,
+    inputRef,
+  );
+  const clearButtonRef = React.useRef(null);
+  const { buttonProps } = useButton(clearButtonProps, clearButtonRef);
+  const outerRef = React.useRef(null);
+
+  return (
+    <div className={styles.base()}>
+      <label {...labelProps} className={styles.label()}>
+        {props.label}
+      </label>
+
+      <div ref={outerRef} className={styles.outerWrapper()}>
+        <input {...inputProps} ref={inputRef} className={styles.input()} />
+
+        <button
+          {...buttonProps}
+          ref={clearButtonRef}
+          style={{ visibility: state.inputValue !== '' ? 'visible' : 'hidden' }}
+          className={styles.clearButton()}
+        >
+          <ClearIcon aria-hidden="true" color="muted" size="small" />
+        </button>
+      </div>
+
+      {state.isOpen && (
+        <Popover
+          popoverRef={popoverRef}
+          triggerRef={outerRef}
+          state={state}
+          isNonModal
+          placement="bottom start"
+          portalContainer={portalContainer}
+        >
+          <ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
+          {footer && <div className="border-t border-t-border px-3 py-2">{footer}</div>}
+        </Popover>
+      )}
+    </div>
+  );
+}
+
+Autocomplete.Item = Item;

package/src/components/autocomplete/autocomplete.stories.tsx

@@ -0,0 +1,158 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { Key, useState } from 'react';
+
+import { Autocomplete } from './autocomplete.component.js';
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Example/Autocomplete',
+  component: Autocomplete,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="h-30 p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    'aria-label': 'Animals',
+    children: [
+      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>,
+      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>,
+      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>,
+      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>,
+      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>,
+      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>,
+    ],
+  },
+};
+
+/**
+ * > Controlled usage example
+ */
+export const ControlledStory: Story = {
+  args: {},
+  render: () => {
+    const [selectedKey, setSelectedKey] = useState<Key>();
+    const handleSelectionChange = (key: Key) => {
+      setSelectedKey(key);
+    };
+    return (
+      <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
+        <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+        <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+        <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+        <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+        <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+        <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+      </Autocomplete>
+    );
+  },
+};
+
+/**
+ * > Disabled usage example
+ */
+export const DisabledStory: Story = {
+  args: {
+    isDisabled: true,
+    'aria-label': 'Disable example',
+    children: [
+      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>,
+      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>,
+      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>,
+      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>,
+      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>,
+      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>,
+    ],
+  },
+};
+
+/**
+ * > Invalid usage example
+ */
+export const InvalidStory: Story = {
+  args: {
+    invalid: true,
+    'aria-label': 'Invalid example',
+    children: [
+      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>,
+      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>,
+      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>,
+      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>,
+      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>,
+      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>,
+    ],
+  },
+};
+
+/**
+ * > Sizes example
+ */
+export const SizesStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        {['small', 'medium', 'large', 'xlarge'].map(size => (
+          <div className="py-2" key={size}>
+            <Autocomplete label={size} size={size as any} aria-label={`size ${size}`}>
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+          </div>
+        ))}
+      </>
+    );
+  },
+};
+
+/**
+ * > Footer example
+ */
+export const FooterStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div className="py-2">
+        <Autocomplete label="With footer" footer={<h3>Footer</h3>}>
+          <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+          <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+          <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+          <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+          <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+          <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+          <Autocomplete.Item key="elephant">Elephant</Autocomplete.Item>
+          <Autocomplete.Item key="giraffe">Giraffe</Autocomplete.Item>
+          <Autocomplete.Item key="lion">Lion</Autocomplete.Item>
+          <Autocomplete.Item key="tiger">Tiger</Autocomplete.Item>
+          <Autocomplete.Item key="penguin">Penguin</Autocomplete.Item>
+          <Autocomplete.Item key="octopus">Octopus</Autocomplete.Item>
+          <Autocomplete.Item key="cheetah">Cheetah</Autocomplete.Item>
+          <Autocomplete.Item key="polar bear">Polar Bear</Autocomplete.Item>
+          <Autocomplete.Item key="koala">Koala</Autocomplete.Item>
+          <Autocomplete.Item key="dolphin">Dolphin</Autocomplete.Item>
+          <Autocomplete.Item key="flamingo">Flamingo</Autocomplete.Item>
+          <Autocomplete.Item key="elephant seal">Elephant Seal</Autocomplete.Item>
+          <Autocomplete.Item key="orca">Orca</Autocomplete.Item>
+        </Autocomplete>
+      </div>
+    );
+  },
+};

package/src/components/autocomplete/autocomplete.styles.ts

@@ -0,0 +1,52 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative flex flex-col',
+      label: 'block text-left text-sm font-medium text-text',
+      outerWrapper:
+        'form-control relative flex w-full flex-row items-center overflow-hidden pr-2 disabled:form-control-disabled focus:focus-outline',
+      input: 'w-full appearance-none bg-[transparent] outline-none',
+      clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60',
+    },
+    variants: {
+      invalid: {
+        true: {
+          outerWrapper: 'border-danger',
+        },
+        false: {
+          outerWrapper: 'border-borderDark',
+        },
+      },
+      size: {
+        small: {
+          input: 'form-control-small',
+        },
+        medium: {
+          input: 'form-control-medium',
+        },
+        large: {
+          input: 'form-control-large',
+        },
+        xlarge: {
+          input: 'form-control-xlarge',
+        },
+      },
+      isDisabled: {
+        true: {
+          outerWrapper: 'form-control-disabled',
+          input: 'cursor-not-allowed',
+        },
+        false: {},
+      },
+      isFocused: {
+        true: {
+          outerWrapper: 'focus-outline',
+        },
+        false: {},
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/autocomplete/autocomplete.types.ts

@@ -0,0 +1,20 @@
+import { type ComboBoxProps } from '@react-types/combobox';
+import { type AriaLabelingProps } from '@react-types/shared';
+import { type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './autocomplete.styles.js';
+import { PopoverProps } from './components/index.js';
+
+export type AutocompleteProps<T extends object> = {
+  /**
+   * Tag to render
+   */
+  footer?: ReactNode;
+  /**
+   * Element where the popover will be rendered, by default it will be into the body
+   */
+  portalContainer?: PopoverProps['portalContainer'];
+} & VariantProps<typeof styles> &
+  ComboBoxProps<T> &
+  AriaLabelingProps;

package/src/components/autocomplete/components/index.ts

@@ -0,0 +1,2 @@
+export * from './list-box/index.js';
+export * from './popover/index.js';

package/src/components/autocomplete/components/list-box/components/index.ts

@@ -0,0 +1,2 @@
+export * from './list-box-option/index.js';
+export * from './list-box-section/index.js';

package/src/components/autocomplete/components/list-box/components/list-box-option/index.ts

@@ -0,0 +1,2 @@
+export { Option } from './list-box-option.component.js';
+export { type OptionProps } from './list-box-option.types.js';

package/src/components/autocomplete/components/list-box/components/list-box-option/list-box-option.component.tsx

@@ -0,0 +1,29 @@
+import { type Node } from '@react-types/shared';
+import * as React from 'react';
+import { useOption } from 'react-aria';
+import { type ListState } from 'react-stately';
+
+import { styles } from './list-box-option.styles.js';
+
+interface OptionProps<T = any> {
+  item: Node<T>;
+  state: ListState<T>;
+}
+
+export function Option({ item, state }: OptionProps) {
+  const ref = React.useRef<HTMLLIElement>(null);
+
+  const { optionProps, isDisabled, isSelected, isFocused } = useOption(
+    {
+      key: item.key,
+    },
+    state,
+    ref,
+  );
+
+  return (
+    <li {...optionProps} ref={ref} className={styles({ isFocused, isSelected, isDisabled })}>
+      {item.rendered}
+    </li>
+  );
+}

package/src/components/autocomplete/components/list-box/components/list-box-option/list-box-option.styles.ts

@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    variants: {
+      isFocused: {
+        true: 'bg-hero !text-white',
+      },
+      isSelected: {
+        true: 'font-bold',
+      },
+      isDisabled: {
+        true: 'text-muted',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/autocomplete/components/list-box/components/list-box-option/list-box-option.types.ts

@@ -0,0 +1,7 @@
+import { type Node } from '@react-types/shared';
+import { type ListState } from 'react-stately';
+
+export type OptionProps<T = any> = {
+  item: Node<T>;
+  state: ListState<T>;
+};

package/src/components/autocomplete/components/list-box/components/list-box-section/index.ts

@@ -0,0 +1,2 @@
+export { ListBoxSection } from './list-box-section.component.js';
+export { type ListBoxSectionProps } from './list-box-section.types.js';

package/src/components/autocomplete/components/list-box/components/list-box-section/list-box-section.component.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useListBoxSection } from 'react-aria';
+
+import { Option } from '../list-box-option/index.js';
+
+import { type ListBoxSectionProps } from './list-box-section.types.js';
+
+export function ListBoxSection({ section, state }: ListBoxSectionProps) {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    'aria-label': section['aria-label'],
+  });
+
+  return (
+    <>
+      <li {...itemProps} className="pt-2">
+        {section.rendered && (
+          <span {...headingProps} className="mx-3 text-xs font-bold uppercase text-text">
+            {section.rendered}
+          </span>
+        )}
+
+        <ul {...groupProps}>
+          {[...section.childNodes].map(node => (
+            <Option key={node.key} item={node} state={state} />
+          ))}
+        </ul>
+      </li>
+    </>
+  );
+}

package/src/components/autocomplete/components/list-box/components/list-box-section/list-box-section.types.ts

@@ -0,0 +1,7 @@
+import { type Node } from '@react-types/shared';
+import { ListState } from 'react-stately';
+
+export type ListBoxSectionProps<T = any> = {
+  section: Node<T>;
+  state: ListState<T>;
+};

package/src/components/autocomplete/components/list-box/index.ts

@@ -0,0 +1,2 @@
+export { ListBox } from './list-box.component.js';
+export { type ListBoxProps } from './list-box.types.js';

package/src/components/autocomplete/components/list-box/list-box.component.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useListBox } from 'react-aria';
+
+import { ListBoxSection, Option } from './components/index.js';
+import { ListBoxProps } from './list-box.types.js';
+
+export function ListBox(props: ListBoxProps) {
+  const ref = React.useRef<HTMLUListElement>(null);
+
+  const { listBoxRef = ref, state } = props;
+
+  const { listBoxProps } = useListBox(props, state, listBoxRef);
+
+  return (
+    <ul {...listBoxProps} ref={listBoxRef} className="max-h-[400px] w-full overflow-auto outline-none">
+      {[...state.collection].map(item =>
+        item.type === 'section' ? (
+          <ListBoxSection key={item.key} section={item} state={state} />
+        ) : (
+          <Option key={item.key} item={item} state={state} />
+        ),
+      )}
+    </ul>
+  );
+}

package/src/components/autocomplete/components/list-box/list-box.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { AriaListBoxOptions } from 'react-aria';
+import { ListState } from 'react-stately';
+
+export type ListBoxProps<T = any> = AriaListBoxOptions<T> & {
+  listBoxRef?: React.RefObject<HTMLUListElement>;
+  state: ListState<T>;
+} & HTMLAttributes<Element>;

package/src/components/autocomplete/components/popover/index.ts

@@ -0,0 +1,2 @@
+export { Popover } from './popover.component.js';
+export { type PopoverProps } from './popover.types.js';

package/src/components/autocomplete/components/popover/popover.component.tsx

@@ -0,0 +1,35 @@
+import { clsx } from 'clsx';
+import * as React from 'react';
+import { DismissButton, Overlay, usePopover } from 'react-aria';
+
+import { PopoverProps } from './popover.types.js';
+
+export function Popover(props: PopoverProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef,
+    },
+    state,
+  );
+
+  const width = props.triggerRef.current?.getBoundingClientRect().width;
+  return (
+    <Overlay portalContainer={portalContainer}>
+      {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
+
+      <div
+        {...popoverProps}
+        style={{ ...popoverProps.style, width: width ? `${width}px` : undefined }}
+        ref={popoverRef}
+        className={clsx('z-10 border border-border bg-white shadow-lg', className)}
+      >
+        {!isNonModal && <DismissButton onDismiss={state.close} />}
+        {children}
+        <DismissButton onDismiss={state.close} />
+      </div>
+    </Overlay>
+  );
+}