@westpac/ui 0.6.0 → 0.7.1

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.6.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,19 +47,22 @@
     "!**/*.{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",
-    "@storybook/addon-actions": "~7.4.3",
     "@storybook/addon-a11y": "~7.4.3",
+    "@storybook/addon-actions": "~7.4.3",
     "@storybook/addon-essentials": "^7.0.21",
     "@storybook/addon-interactions": "^7.0.21",
     "@storybook/addon-links": "^7.0.21",
     "@storybook/addon-styling": "~1.3.2",
     "@storybook/blocks": "^7.0.21",
+    "@storybook/manager-api": "~7.4.6",
     "@storybook/react": "^7.0.21",
     "@storybook/react-vite": "^7.0.21",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/theming": "~7.4.6",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.35",
     "@testing-library/jest-dom": "^5.16.5",
@@ -64,7 +70,7 @@
     "@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": "^18.2.28",
     "@types/react-dom": "^18.2.1",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react-swc": "^3.3.0",
@@ -82,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",
@@ -91,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": {
@@ -130,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/scaffold/component/scaffold.stories.hbs

@@ -3,7 +3,7 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { {{name}} } from './{{kebabCase name}}.component.js';
 
 const meta: Meta<typeof {{name}}> = {
-  title: 'Example/{{name}}',
+  title: 'Components/{{name}}',
   component: {{name}},
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],

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,24 +1,29 @@
 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';
 
 const meta: Meta<typeof Accordion> = {
-  title: 'Example/Accordion',
+  title: 'Components/Accordion',
   component: Accordion,
   tags: ['autodocs'],
   decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
+    (Story: StoryFn) => {
+      /**
+       * NOTE:
+       * Needed to change displayName here so subcomponent shows correct name in code view
+       * Could not change it on the component as Item from react-stately is used in three components
+       * and one displayName would overwrite the others
+       */
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      Accordion.Item.displayName = 'Accordion.Item';
+
+      return <Story />;
+    },
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -27,10 +32,9 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     rounded: true,
-    color: undefined,
     children: [
       { key: 'files', title: 'My files' },
       { key: 'shared', title: 'Shared with us' },
@@ -49,35 +53,11 @@ export const DefaultStory: Story = {
 };
 
 /**
- * > Primary color usage example
- */
-export const PrimaryColorStory: 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
+ * > Lego look using Hero color
  */
-export const HeroColorStory: Story = {
+export const LegoLook: Story = {
   args: {
-    color: 'hero',
+    look: 'lego',
     rounded: false,
   },
   render: ({ ...props }) => (
@@ -96,36 +76,12 @@ export const HeroColorStory: Story = {
   ),
 };
 
-/**
- * > Hero color usage example
- */
-export const MaterialLookStory: Story = {
-  args: {
-    look: 'material',
-    rounded: false,
-  },
-  render: ({ ...props }) => (
-    <Accordion {...props}>
-      {[
-        { key: 'files', title: 'Your files' },
-        { key: 'shared', title: 'Shared with you' },
-        { key: 'last', title: 'Last item' },
-      ].map(({ key, title }) => (
-        <Accordion.Item key={key} title={title}>
-          <p>{title}</p>
-          <Button>Test</Button>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  ),
-};
-
 /**
  * > Controlled example
  */
-export const ControlledColorStory: Story = {
+export const Controlled: Story = {
   args: {
-    color: 'hero',
+    look: 'lego',
     rounded: false,
   },
   render: ({ ...props }) => {
@@ -152,3 +108,37 @@ export const ControlledColorStory: 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,34 +3,23 @@ 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: 'hover:bg-light bg-white transition-colors',
-          indicator:
-            'before:bg-muted after:bg-muted 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 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:transition-transform',
+        soft: {
+          itemHeader: 'border-t border-border bg-light',
         },
-        default: {
-          itemHeader: 'border-border bg-light border-t',
-          indicator: 'h-3 w-3 -rotate-90 transition-transform',
-        },
-      },
-      color: {
-        hero: {
-          itemHeader: 'border-l-border border-l-[0.375rem] transition-colors',
-        },
-        primary: {
-          itemHeader: 'border-l-border border-l-[0.375rem] transition-colors',
+        lego: {
+          itemHeader: 'border-l-[0.375rem] border-t border-border bg-light transition-colors',
         },
       },
       isOpen: {
         true: {
-          content: 'border-border block border-t p-3',
+          content: 'block border-t border-border p-3',
         },
         false: {
           base: '',
@@ -52,37 +41,19 @@ export const styles = tv(
     compoundSlots: [
       {
         slots: ['indicator'],
-        look: 'default',
-        isOpen: true,
-        className: 'rotate-90',
-      },
-      {
-        slots: ['indicator'],
-        look: 'material',
         isOpen: true,
-        className: 'after:rotate-90',
+        className: '-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-border border-l-[0.375rem]',
-      },
-      {
-        slots: ['content'],
-        color: 'primary',
-        className: 'border-l-border border-l-[0.375rem]',
+        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';