@westpac/ui 0.7.0 → 0.7.1

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './components/index.js';
+export * from './types/index.js';

package/dist/index.js

@@ -1 +1,2 @@
 export * from './components/index.js';
+export * from './types/index.js';

package/dist/stories/foundation/colours.stories.js

@@ -261,7 +261,6 @@ export const BrandColors = {
             'background',
             'border',
             'borderDark',
-            'focus',
             'heading',
             'hero',
             'light',

package/dist/types/component-props.types.d.ts

@@ -0,0 +1,2 @@
+import { ComponentDoc } from 'react-docgen-typescript';
+export type ComponentProps = ComponentDoc;

package/dist/types/component-props.types.js

@@ -0,0 +1 @@
+export { };

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './component-props.types.js';

package/dist/types/index.js

@@ -0,0 +1 @@
+export * from './component-props.types.js';

package/generate-component-types.cjs

@@ -0,0 +1,85 @@
+const fs = require('fs');
+const path = require('path');
+
+const { glob } = require('glob');
+const docgen = require('react-docgen-typescript');
+
+const components = path.join('src', 'components', '**/*.component.tsx');
+const outputFolder = path.join((process.cwd(), 'dist'));
+const outputFile = path.join(outputFolder, 'component-type.json');
+
+const tsConfigParser = docgen.withCustomConfig('./tsconfig.json', {
+  propFilter: {
+    skipPropsWithName: ['className', 'key'],
+  },
+  skipChildrenPropWithoutDoc: false,
+  savePropValueAsString: true,
+  shouldRemoveUndefinedFromOptional: true,
+});
+
+const TYPES_TO_BE_IGNORED = [
+  'DOMAttributes',
+  'HTMLAttributes',
+  'AriaAttributes',
+  'SVGAttributes',
+  'TextareaHTMLAttributes',
+];
+
+(async () => {
+  const results = await glob(components);
+
+  const data = Object.fromEntries(
+    tsConfigParser.parse(results).reduce((acc, { displayName, description, props, tags }) => {
+      /**
+       * Some components should not be scanned since it is a internal component
+       * so the comment @private is used in order to skip some components.
+       */
+      if (tags.private !== undefined) {
+        return acc;
+      }
+
+      return [
+        ...acc,
+        [
+          displayName,
+          {
+            displayName,
+            description,
+            // Sort the required props before the non-required props, then sort alphabetically
+            props: Object.fromEntries(
+              Object.values(props)
+                .sort((a, b) => {
+                  if (a.required !== b.required) {
+                    if (a.required) return -1;
+                    return 1;
+                  }
+                  return a.name.localeCompare(b.name);
+                })
+                .filter(a => {
+                  if (a.name === 'children' && a.description) {
+                    return true;
+                  }
+                  if (TYPES_TO_BE_IGNORED.includes(a.parent ? a.parent.name : '')) {
+                    return false;
+                  }
+                  return true;
+                })
+                .map(a => {
+                  if (a.name === 'tag' && a.type.name.indexOf('more ...') !== -1) {
+                    return [a.name, { ...a, type: { ...a.type, name: 'keyof IntrinsicElements' } }];
+                  }
+                  return [a.name, a];
+                }),
+            ),
+          },
+        ],
+      ];
+    }, []),
+  );
+
+  // Create the output folder if it doesn't exist
+  if (!fs.existsSync(outputFolder)) fs.mkdirSync(outputFolder);
+
+  // Write the output from react-docgen-typescript to the output file
+  fs.writeFileSync(outputFile, JSON.stringify(data));
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -16,6 +16,9 @@
     ".": {
       "default": "./dist/index.js"
     },
+    "./component-type.json": {
+      "default": "./dist/component-type.json"
+    },
     "./css": {
       "default": "./dist/css/westpac-ui.min.css"
     },
@@ -44,6 +47,7 @@
     "!**/*.{test,spec}.{ts,tsx,js,jsx}"
   ],
   "devDependencies": {
+    "@react-types/tabs": "~3.3.0",
     "@react-types/accordion": "3.0.0-alpha.14",
     "@react-types/combobox": "~3.7.0",
     "@react-types/shared": "~3.18.1",
@@ -84,6 +88,7 @@
     "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-docgen-typescript": "~2.2.2",
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",
     "storybook": "^7.0.21",
@@ -93,21 +98,20 @@
     "ts-node": "~10.9.1",
     "typescript": "^5.1.6",
     "vite": "^4.3.4",
-    "vitest": "^0.30.1"
+    "vitest": "^0.30.1",
+    "@westpac/eslint-config": "~0.1.0",
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
   },
   "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",
-    "@react-types/tabs": "~3.3.0",
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
     "react-aria": "~3.25.0",
-    "react-stately": "~3.23.0",
-    "@westpac/eslint-config": "~0.1.0",
-    "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "react-stately": "~3.23.0"
   },
   "overrides": {
     "react-aria": {
@@ -132,7 +136,8 @@
     "build:esm": "swc ./src -d dist --no-swcrc --config-file .swcrc",
     "build:icons": "ts-node --esm ./utils/build-icons/index.ts",
     "build:watch": "pnpm clean && pnpm build:types && pnpm build:esm -w && pnpm build:css:all",
-    "build": "pnpm clean && pnpm build:types && pnpm build:esm && pnpm build:css:all",
+    "build:type-table": "node generate-component-types.cjs",
+    "build": "pnpm clean && pnpm build:types && pnpm build:esm && pnpm build:css:all && pnpm build:type-table",
     "check-types": "tsc --noemit --emitDeclarationOnly false",
     "lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
     "lint:fix": "eslint \"./src/**/*.{ts,tsx,js,jsx}\" --fix",

package/src/components/accordion/accordion.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useAccordion } from '@react-aria/accordion';
 import { filterDOMProps } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
@@ -9,7 +11,7 @@ import { type AccordionProps } from './accordion.types.js';
 import { AccordionItem } from './components/index.js';
 
 function Accordion<T extends object>(
-  { className, color, rounded = true, look = 'default', ...props }: AccordionProps<T>,
+  { className, rounded = true, look = 'soft', ...props }: AccordionProps<T>,
   ref: any,
 ) {
   // react-aria doesn't allow for now to use component children when there is multiple levels
@@ -33,15 +35,10 @@ function Accordion<T extends object>(
   const { accordionProps } = useAccordion(finalProps, state, domRef);
 
   return (
-    <div
-      {...filterDOMProps(finalProps)}
-      {...accordionProps}
-      ref={domRef}
-      className={styles({ className, rounded, look })}
-    >
+    <div {...filterDOMProps(finalProps)} {...accordionProps} ref={domRef} className={styles({ className, rounded })}>
       <div className="mt-[-1px]">
         {[...state.collection].map(item => (
-          <AccordionItem<T> key={item.key} item={item} state={state} color={color} look={look} />
+          <AccordionItem<T> key={item.key} item={item} state={state} look={look} />
         ))}
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Key, useState } from 'react';
 
-import { Button } from '../index.js';
+import { Button, Tabs } from '../index.js';
 
 import { Accordion } from './accordion.component.js';
 
@@ -35,7 +35,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     rounded: true,
-    color: undefined,
     children: [
       { key: 'files', title: 'My files' },
       { key: 'shared', title: 'Shared with us' },
@@ -54,35 +53,11 @@ export const Default: Story = {
 };
 
 /**
- * > Primary color usage example
+ * > Lego look using Hero color
  */
-export const PrimaryColor: Story = {
+export const LegoLook: Story = {
   args: {
-    color: 'primary',
-    rounded: false,
-  },
-  render: ({ ...props }) => (
-    <Accordion {...props}>
-      {[
-        { key: 'colors', title: 'Your colors' },
-        { key: 'shared', title: 'Shared color' },
-        { key: 'last', title: 'Last item' },
-      ].map(({ key, title }) => (
-        <Accordion.Item key={key} title={title}>
-          <p>{title}</p>
-          <Button>Test</Button>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  ),
-};
-
-/**
- * > Hero color usage example
- */
-export const HeroColor: Story = {
-  args: {
-    color: 'hero',
+    look: 'lego',
     rounded: false,
   },
   render: ({ ...props }) => (
@@ -104,9 +79,9 @@ export const HeroColor: Story = {
 /**
  * > Controlled example
  */
-export const ControlledColor: Story = {
+export const Controlled: Story = {
   args: {
-    color: 'hero',
+    look: 'lego',
     rounded: false,
   },
   render: ({ ...props }) => {
@@ -133,3 +108,37 @@ export const ControlledColor: Story = {
     );
   },
 };
+
+/**
+ * > Example showing how you can use styling to change accordion to tabs responsively.
+ * > Replicates GEL Tabcordion functionality.
+ * NOTE: Due to how items work the Accordion.Item that are children of Tabs should be Tab.Panel but can't due to name sharing on this page.
+ * See the source of this example in, https://github.com/WestpacGEL/GEL-next/blob/main/packages/ui/src/components/accordion/accordion.stories.tsx#L142
+ */
+export const Responsive: Story = {
+  render: ({ ...props }) => {
+    const data = [
+      { key: 'files', title: 'First Item', content: 'First Accordion content...' },
+      { key: 'shared', title: 'Second Item', content: 'Second Accordion content...' },
+      { key: 'last', title: 'Third Item', content: 'Third Accordion content...' },
+    ];
+    return (
+      <>
+        <Accordion {...props} className="sm:hidden">
+          {data.map(({ key, title, content }) => (
+            <Accordion.Item key={key} title={title}>
+              <p>{content}</p>
+            </Accordion.Item>
+          ))}
+        </Accordion>
+        <Tabs className="max-sm:hidden">
+          {data.map(({ key, title, content }) => (
+            <Tabs.Panel key={key} title={title}>
+              <p>{content}</p>
+            </Tabs.Panel>
+          ))}
+        </Tabs>
+      </>
+    );
+  },
+};

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

@@ -2,15 +2,11 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex flex-col',
+    base: 'flex flex-col border border-border text-text',
     variants: {
       rounded: {
         true: 'overflow-hidden rounded',
       },
-      look: {
-        material: '',
-        default: 'border border-border',
-      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/accordion/accordion.types.ts

@@ -5,14 +5,18 @@ import { type VariantProps } from 'tailwind-variants';
 import { styles } from './accordion.styles.js';
 import { AccordionItemProps } from './components/index.js';
 
-export type AccordionProps<T = any> = SpectrumAccordionProps<T> &
-  VariantProps<typeof styles> & {
-    /**
-     * Accordion colors
-     */
-    color?: AccordionItemProps['color'];
-    /**
-     * Stretch the tab to fill the whole content
-     */
-    justify?: boolean;
-  } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+type Variants = VariantProps<typeof styles>;
+export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
+  /**
+   * Stretch the tab to fill the whole content
+   */
+  justify?: boolean;
+  /**
+   * The look of the accordion
+   */
+  look?: AccordionItemProps['look'];
+  /**
+   * Whether the accordion is rounded
+   */
+  rounded?: Variants['rounded'];
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;

package/src/components/accordion/components/accordion-item/accordion-item.component.tsx

@@ -13,8 +13,7 @@ const loadAnimations = () => import('./accordion-item.utils.js').then(res => res
 export function AccordionItem<T = any>({
   className,
   tag: Tag = 'div',
-  color,
-  look = 'default',
+  look = 'soft',
   ...props
 }: AccordionItemProps<T>) {
   const ref = useRef<HTMLButtonElement>(null);
@@ -25,10 +24,10 @@ export function AccordionItem<T = any>({
   const isDisabled = state.disabledKeys.has(item.key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
-  const styles = accordionItemStyles({ isOpen, isDisabled, className, color, look, isFocusVisible });
+  const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible });
 
   return (
-    <Tag className={styles.base()}>
+    <Tag className={styles.base({ className })}>
       {/*
         Using h3 tag since the official page is using it, also the react-spectrum
         https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
@@ -36,13 +35,11 @@ export function AccordionItem<T = any>({
       <h3>
         <button {...mergeProps(buttonProps, hoverProps, focusProps)} ref={ref} className={styles.itemHeader()}>
           <span>{item.props.title}</span>
-          {look === 'material' && <div aria-hidden="true" className={styles.indicator()} />}
-          {look === 'default' &&
-            (direction === 'ltr' ? (
-              <ArrowRightIcon aria-hidden="true" className={styles.indicator()} />
-            ) : (
-              <ArrowLeftIcon aria-hidden="true" className={styles.indicator()} />
-            ))}
+          {direction === 'ltr' ? (
+            <ArrowRightIcon aria-hidden="true" className={styles.indicator()} />
+          ) : (
+            <ArrowLeftIcon aria-hidden="true" className={styles.indicator()} />
+          )}
         </button>
       </h3>
       <div {...regionProps}>
@@ -50,19 +47,17 @@ export function AccordionItem<T = any>({
           <AnimatePresence initial={false}>
             {isOpen && (
               <m.div
+                className="overflow-hidden"
                 initial={{
                   height: 0,
-                  opacity: 0,
                 }}
                 animate={{
                   height: 'auto',
-                  opacity: 1,
                 }}
                 exit={{
                   height: 0,
-                  opacity: 0,
                 }}
-                transition={{ duration: 0.2, ease: 'easeInOut' }}
+                transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }}
               >
                 <div className={styles.content()}>{item.props.children}</div>
               </m.div>
@@ -73,3 +68,4 @@ export function AccordionItem<T = any>({
     </Tag>
   );
 }
+AccordionItem.displayName = 'Accordion.Item';

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

@@ -3,29 +3,18 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: '',
+      base: 'relative',
       itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
-      indicator: '',
+      indicator: 'h-3 w-3 rotate-90',
       content: 'hidden',
     },
     variants: {
       look: {
-        material: {
-          itemHeader: 'bg-white transition-colors hover:bg-light',
-          indicator:
-            'relative h-2 w-2 before:absolute before:left-1/2 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-x-1/2 before:-translate-y-1/2 before:bg-muted after:absolute after:left-1/2 after:top-1/2 after:block after:h-full after:w-[2px] after:-translate-x-1/2 after:-translate-y-1/2 after:bg-muted after:transition-transform',
-        },
-        default: {
+        soft: {
           itemHeader: 'border-t border-border bg-light',
-          indicator: 'h-3 w-3 rotate-90 transition-transform',
-        },
-      },
-      color: {
-        hero: {
-          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
         },
-        primary: {
-          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
+        lego: {
+          itemHeader: 'border-l-[0.375rem] border-t border-border bg-light transition-colors',
         },
       },
       isOpen: {
@@ -52,36 +41,18 @@ export const styles = tv(
     compoundSlots: [
       {
         slots: ['indicator'],
-        look: 'default',
         isOpen: true,
         className: '-rotate-90',
       },
-      {
-        slots: ['indicator'],
-        look: 'material',
-        isOpen: true,
-        className: 'after:rotate-90',
-      },
       {
         slots: ['itemHeader'],
-        color: 'primary',
-        isOpen: true,
-        className: 'border-l-primary',
-      },
-      {
-        slots: ['itemHeader'],
-        color: 'hero',
+        look: 'lego',
         isOpen: true,
         className: 'border-l-hero',
       },
       {
         slots: ['content'],
-        color: 'hero',
-        className: 'border-l-[0.375rem] border-l-border',
-      },
-      {
-        slots: ['content'],
-        color: 'primary',
+        look: 'lego',
         className: 'border-l-[0.375rem] border-l-border',
       },
     ],

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

@@ -4,11 +4,17 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './accordion-item.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type AccordionItemProps<T = any> = {
   /**
    * Node from react-stately
    */
   item: Node<T>;
+  /**
+   * Look of the item
+   */
+  look?: Variants['look'];
   /**
    * Tree state
    */
@@ -17,5 +23,4 @@ export type AccordionItemProps<T = any> = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useState } from 'react';
 

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

@@ -3,9 +3,9 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      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',
+      base: 'typography-body-10 xsl:flex relative mb-4',
+      icon: 'xsl:mr-2 float-left mr-1 flex-none',
+      body: 'xsl:top-[0.125rem] relative flex-1 overflow-hidden [&_a]:underline',
       heading: 'typography-body-9 mb-2 font-bold',
       close: 'absolute right-[0.1875rem] top-[0.1875rem] p-1 hover:opacity-[0.8]',
     },

package/src/components/alert/alert.types.ts

@@ -1,7 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './alert.styles.js';
 
 export type Look = 'info' | 'success' | 'warning' | 'danger' | 'system';
 
@@ -44,5 +41,4 @@ export type AlertProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
 import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';

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

@@ -8,6 +8,8 @@ import { FormHintProps } from '../index.js';
 import { styles } from './autocomplete.styles.js';
 import { PopoverProps } from './components/index.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type AutocompleteProps<T extends object> = {
   /**
    * error message
@@ -21,10 +23,21 @@ export type AutocompleteProps<T extends object> = {
    * hint message
    */
   hintMessage?: FormHintProps['children'];
+  /**
+   * Whether autocomplete is invalid
+   */
+  invalid?: Variants['invalid'];
+  /**
+   * Whether autocomplete is disabled
+   */
+  isDisabled?: Variants['isDisabled'];
   /**
    * Element where the popover will be rendered, by default it will be into the body
    */
   portalContainer?: PopoverProps['portalContainer'];
-} & VariantProps<typeof styles> &
-  ComboBoxProps<T> &
+  /**
+   * Size of autocomplete
+   */
+  size?: Variants['size'];
+} & ComboBoxProps<T> &
   AriaLabelingProps;

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

@@ -10,6 +10,9 @@ interface OptionProps<T = any> {
   state: ListState<T>;
 }
 
+/**
+ * @private
+ */
 export function Option({ item, state }: OptionProps) {
   const ref = React.useRef<HTMLLIElement>(null);
 

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

@@ -5,6 +5,9 @@ import { Option } from '../list-box-option/index.js';
 
 import { type ListBoxSectionProps } from './list-box-section.types.js';
 
+/**
+ * @private
+ */
 export function ListBoxSection({ section, state }: ListBoxSectionProps) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,

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

@@ -4,6 +4,9 @@ import { useListBox } from 'react-aria';
 import { ListBoxSection, Option } from './components/index.js';
 import { ListBoxProps } from './list-box.types.js';
 
+/**
+ * @private
+ */
 export function ListBox(props: ListBoxProps) {
   const ref = React.useRef<HTMLUListElement>(null);
 

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

@@ -3,7 +3,9 @@ import * as React from 'react';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 
 import { PopoverProps } from './popover.types.js';
-
+/**
+ * @private
+ */
 export function Popover(props: PopoverProps) {
   const ref = React.useRef<HTMLDivElement>(null);
   const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;