@westpac/ui 0.2.1 → 0.4.0

package/src/components/modal/modal.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Backdrop, Dialog } from './components/index.js';
+import { type ModalProps } from './modal.types.js';
+
+export function Modal({ children, title, role, body, size, ...props }: ModalProps) {
+  return (
+    <Backdrop {...props}>
+      <Dialog
+        onClose={props.isDismissable ? props.state.close : undefined}
+        title={title}
+        role={role}
+        body={body}
+        size={size}
+      >
+        {children}
+      </Dialog>
+    </Backdrop>
+  );
+}
+Modal.Footer = Dialog.Footer;
+Modal.Body = Dialog.Body;

package/src/components/modal/modal.stories.tsx

@@ -0,0 +1,143 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { Fragment, useMemo } from 'react';
+import { useOverlayTriggerState } from 'react-stately';
+
+import { Button } from '../index.js';
+
+import { Modal } from './modal.component.js';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Example/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: `
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+    `,
+    title: 'Title',
+    isDismissable: true,
+  },
+  render: ({ children, ...props }: any) => {
+    const state = useOverlayTriggerState({});
+    return (
+      <>
+        <Modal {...props} state={state} aria-label="Modal title" body>
+          {children}
+        </Modal>
+        <Button onClick={state.open}>Open Modal</Button>
+      </>
+    );
+  },
+};
+
+/**
+ * > WithFooter usage example
+ */
+export const WithFooterStory: Story = {
+  args: {
+    children: `I'm children`,
+    title: 'Title',
+    isDismissable: true,
+  },
+  render: ({ children, ...props }: any) => {
+    const state = useOverlayTriggerState({});
+
+    return (
+      <>
+        <Modal {...props} state={state} aria-label="Modal title">
+          <Modal.Body>{children}</Modal.Body>
+          <Modal.Footer>
+            <p>Lorem, ipsum dolor</p>
+          </Modal.Footer>
+        </Modal>
+        <Button onClick={state.open}>Open Modal</Button>
+      </>
+    );
+  },
+};
+
+/**
+ * > All sizes usage example
+ */
+export const AllSizesStory: Story = {
+  args: {
+    children: `I'm children`,
+    title: 'Title',
+    isDismissable: true,
+  },
+  render: ({ children, ...props }: any) => {
+    const stateSM = useOverlayTriggerState({});
+    const stateMD = useOverlayTriggerState({});
+    const stateLG = useOverlayTriggerState({});
+
+    const states = useMemo(() => {
+      return {
+        sm: stateSM,
+        md: stateMD,
+        lg: stateLG,
+      };
+    }, [stateSM, stateMD, stateLG]);
+
+    return (
+      <div className="flex gap-2">
+        {['sm', 'md', 'lg'].map((size: string) => (
+          <Fragment key={size}>
+            <Modal {...props} size={size} state={states[size as 'sm' | 'md' | 'lg']} title={`Modal ${size}`}>
+              <Modal.Body>{children}</Modal.Body>
+              <Modal.Footer>
+                <p>Lorem, ipsum dolor</p>
+              </Modal.Footer>
+            </Modal>
+            <Button onClick={states[size as 'sm' | 'md' | 'lg'].open}>Open Modal {size}</Button>
+          </Fragment>
+        ))}
+      </div>
+    );
+  },
+};
+
+/**
+ * > Not dismissable example
+ */
+export const NotDismissibleStory: Story = {
+  args: {
+    children: `I'm children`,
+    title: 'Title',
+    isDismissable: false,
+  },
+  render: ({ children, ...props }: any) => {
+    const state = useOverlayTriggerState({});
+
+    return (
+      <>
+        <Modal {...props} state={state} aria-label="Modal title">
+          <Modal.Body>{children}</Modal.Body>
+          <Modal.Footer className="flex justify-end gap-2">
+            <Button look="faint" onClick={state.close}>
+              Close
+            </Button>
+            <Button look="primary">Submit</Button>
+          </Modal.Footer>
+        </Modal>
+        <Button onClick={state.open}>Open Modal</Button>
+      </>
+    );
+  },
+};

package/src/components/modal/modal.types.ts

@@ -0,0 +1,3 @@
+import { type BackdropProps, DialogProps } from './components/index.js';
+
+export type ModalProps = BackdropProps & DialogProps;

package/src/components/pagination/components/index.ts

@@ -0,0 +1 @@
+export * from './pagination-item/index.js';

package/src/components/pagination/components/pagination-item/index.ts

@@ -0,0 +1,2 @@
+export { PaginationItem } from './pagination-item.component.js';
+export { type PaginationItemProps } from './pagination-item.types.js';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { styles } from './pagination-item.styles.js';
+import { type PaginationItemProps } from './pagination-item.types.js';
+
+export function PaginationItem({
+  className,
+  firstItem = false,
+  tag: Tag = 'a',
+  children,
+  active,
+  disabled = false,
+  ...props
+}: PaginationItemProps) {
+  return (
+    <Tag
+      className={styles({ className, firstItem, active, disabled })}
+      {...props}
+      disabled={disabled}
+      aria-current={active ? 'page' : undefined}
+    >
+      {children}
+    </Tag>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
+    variants: {
+      firstItem: {
+        true: 'border-l-0',
+        false: '',
+      },
+      active: {
+        true: 'bg-hero text-white',
+        false: 'hover:bg-light',
+      },
+      disabled: {
+        true: 'cursor-not-allowed bg-light text-muted-90',
+        false: 'cursor-pointer',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,12 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './pagination-item.styles.js';
+
+export type PaginationItemProps = {
+  /**
+   * Link component to render
+   */
+  tag?: 'a' | 'button' | ((...args: any[]) => ReactElement | null);
+} & VariantProps<typeof styles> &
+  (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);

package/src/components/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './pagination.component.js';
+export { type PaginationProps } from './pagination.types.js';

package/src/components/pagination/pagination.component.tsx

@@ -0,0 +1,155 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { PaginationItem } from './components/index.js';
+import { styles as paginationStyles } from './pagination.styles.js';
+import { type PaginationProps } from './pagination.types.js';
+
+export function Pagination({
+  className,
+  pages,
+  tag: Tag = 'nav',
+  role = 'navigation',
+  current,
+  linkComponent,
+  infinite = false,
+  onChange,
+  backLabel = 'Back',
+  nextLabel = 'Next',
+  ...props
+}: PaginationProps) {
+  const styles = paginationStyles({});
+
+  const generateHandleOnClickBackwards = useCallback(
+    (
+        current: number,
+        infinite: boolean,
+        forwardOnly: boolean,
+        onChange: (page: number) => any,
+        pages: PaginationProps['pages'],
+      ) =>
+      () => {
+        if (infinite && forwardOnly) {
+          return onChange(pages.length);
+        }
+        if (!forwardOnly) {
+          return onChange(current - 1);
+        }
+      },
+    [],
+  );
+
+  const paginationBackProps = useMemo(() => {
+    const fowardOnly = (current || 1) <= 1;
+    const defaultBackProps = {
+      disabled: !infinite && fowardOnly,
+      firstItem: true,
+    };
+    if (defaultBackProps.disabled) {
+      return {
+        ...defaultBackProps,
+        tag: 'button',
+      } as const;
+    }
+    if (onChange) {
+      return {
+        ...defaultBackProps,
+        tag: linkComponent || 'button',
+        ...(current && {
+          onClick: generateHandleOnClickBackwards(current, infinite, fowardOnly, onChange, pages),
+        }),
+      };
+    }
+    return {
+      ...defaultBackProps,
+      tag: linkComponent || 'a',
+      href: fowardOnly ? pages[pages.length - 1].href : pages[(current || 0) - 2]?.href,
+    };
+  }, [current, onChange, linkComponent, pages, infinite]);
+
+  const generateHandleOnClickForward = useCallback(
+    (current: number, infinite: boolean, backwardsOnly: boolean, onChange: (page: number) => any) => () => {
+      if (infinite && backwardsOnly) {
+        return onChange(1);
+      }
+      if (backwardsOnly) {
+        return;
+      }
+      return onChange(current + 1);
+    },
+    [],
+  );
+
+  const paginationNextProps = useMemo(() => {
+    const backwardsOnly = (current || 1) >= pages.length;
+    const defaultNextProps = {
+      disabled: !infinite && backwardsOnly,
+      tag: linkComponent,
+    };
+    if (defaultNextProps.disabled) {
+      return {
+        ...defaultNextProps,
+        tag: 'button',
+      } as const;
+    }
+    if (onChange) {
+      return {
+        ...defaultNextProps,
+        tag: linkComponent || 'button',
+        ...(current && {
+          onClick: generateHandleOnClickForward(current, infinite, backwardsOnly, onChange),
+        }),
+      };
+    }
+    return {
+      ...defaultNextProps,
+      tag: linkComponent || 'a',
+      href: backwardsOnly ? pages[0].href : pages[current || 0]?.href,
+    };
+  }, [current, onChange, linkComponent, pages, infinite]);
+
+  return (
+    <Tag className={styles.base({ className })} role={role} {...props}>
+      <ul className={styles.ul({})}>
+        <li>
+          <PaginationItem {...paginationBackProps}>{backLabel}</PaginationItem>
+        </li>
+        {pages.map((page, index) => {
+          const commonProps = {
+            active: (current || 0) === index + 1,
+          };
+
+          return (
+            <li key={index}>
+              {'href' in page ? (
+                <PaginationItem {...commonProps} tag={linkComponent || 'a'} href={page.href}>
+                  {page.text}
+                </PaginationItem>
+              ) : (
+                <PaginationItem
+                  {...commonProps}
+                  tag={linkComponent || 'button'}
+                  onClick={
+                    onChange &&
+                    (() => {
+                      onChange(index + 1);
+                    })
+                  }
+                >
+                  {page.text}
+                </PaginationItem>
+              )}
+            </li>
+          );
+        })}
+        <li>
+          <PaginationItem {...paginationNextProps}>{nextLabel}</PaginationItem>
+        </li>
+      </ul>
+      {current && (
+        <span className="sr-only" role="status">
+          Page {current}
+        </span>
+      )}
+    </Tag>
+  );
+}

package/src/components/pagination/pagination.hooks.ts

@@ -0,0 +1,40 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { type PaginationHookProps } from './pagination.types.js';
+
+export const usePagination = ({ defaultCurrent = 1, pages, infinite = false }: PaginationHookProps) => {
+  const [currentPage, setCurrentPage] = useState<number>(defaultCurrent);
+
+  const next = useCallback(() => {
+    setCurrentPage(currentPage => {
+      const cannotGoForward = currentPage >= pages.length;
+      if (infinite && cannotGoForward) {
+        return 1;
+      }
+      return cannotGoForward ? currentPage : currentPage + 1;
+    });
+  }, [pages]);
+
+  const previous = useCallback(() => {
+    setCurrentPage(currentPage => {
+      const cannotGoBackwards = currentPage <= 1;
+      if (infinite && cannotGoBackwards) {
+        return pages.length;
+      }
+      return cannotGoBackwards ? currentPage : currentPage - 1;
+    });
+  }, [pages]);
+
+  const selectedPage = useMemo(() => {
+    return pages[currentPage - 1];
+  }, [pages, currentPage]);
+
+  return {
+    selectedPage,
+    currentPage,
+    setCurrentPage,
+    next,
+    previous,
+    pages,
+  };
+};

package/src/components/pagination/pagination.stories.tsx

@@ -0,0 +1,161 @@
+import { action } from '@storybook/addon-actions';
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
+import { Button } from '../index.js';
+
+import { Pagination } from './pagination.component.js';
+import { usePagination } from './pagination.hooks.js';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Example/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Button usage example
+ */
+export const DefaultStory: any = {
+  args: {
+    current: 1,
+    onChange: action('onChange'),
+    pages: [
+      {
+        text: '1',
+      },
+      {
+        text: '2',
+      },
+      {
+        text: '3',
+      },
+    ],
+  },
+};
+
+/**
+ * > Link usage example
+ */
+export const AsLinkStory: any = {
+  args: {
+    current: 1,
+    onChange: undefined,
+    pages: [
+      {
+        text: '1',
+        href: '#page-1',
+      },
+      {
+        text: '2',
+        href: '#page-2',
+      },
+      {
+        text: '3',
+        href: '#page-3',
+      },
+    ],
+  },
+};
+
+/**
+ * > Using useState as example
+ */
+export const ExampleWithState = () => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      current={page}
+      onChange={changedPage => {
+        setPage(changedPage);
+      }}
+      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
+    />
+  );
+};
+
+/**
+ * > Using useState as example
+ */
+export const ExampleWithInfiniteState = () => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      current={page}
+      infinite
+      onChange={changedPage => {
+        setPage(changedPage);
+      }}
+      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
+    />
+  );
+};
+
+/**
+ * > Using custom back and next label
+ */
+export const ExampleWithCustomBackAndNextLabel = () => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      current={page}
+      backLabel="Custom back"
+      nextLabel="Custom next"
+      onChange={changedPage => {
+        setPage(changedPage);
+      }}
+      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
+    />
+  );
+};
+
+/**
+ * > Using use pagination hook
+ */
+export const ExampleWithUsePagination = () => {
+  const { pages, currentPage, setCurrentPage } = usePagination({
+    pages: [{ text: '1' }, { text: '2' }, { text: '3' }],
+  });
+
+  return (
+    <Pagination
+      current={currentPage}
+      backLabel="Custom back"
+      nextLabel="Custom next"
+      infinite
+      onChange={changedPage => {
+        setCurrentPage(changedPage);
+      }}
+      pages={pages}
+    />
+  );
+};
+
+/**
+ * > Using use pagination hook with other components
+ */
+export const ExampleUsePagination = () => {
+  const { next, previous, selectedPage } = usePagination({
+    pages: [{ text: 'Page 1' }, { text: 'Page 2' }, { text: 'Page 3' }],
+    infinite: true,
+  });
+
+  return (
+    <div className="flex items-center">
+      <Button look="link" iconAfter={ArrowLeftIcon} onClick={previous} />
+      <h4>{selectedPage.text}</h4>
+      <Button look="link" iconAfter={ArrowRightIcon} onClick={next} />
+    </div>
+  );
+};

package/src/components/pagination/pagination.styles.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'overflow-hidden rounded border border-border',
+      ul: 'flex',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/pagination/pagination.types.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { type PaginationItemProps } from './components/index.js';
+import { styles } from './pagination.styles.js';
+
+export type PageProps = {
+  href: string;
+  text: ReactNode;
+};
+
+export type PaginationAsLinkProps = {
+  /**
+   * on page change
+   */
+  onChange?: never;
+  /**
+   * Pages items
+   */
+  pages: PageProps[];
+};
+
+export type PaginationAsButtonProps = {
+  /**
+   * on page change
+   */
+  onChange: (page: number) => any;
+  /**
+   * Pages items
+   */
+  pages: Omit<PageProps, 'href'>[];
+};
+
+export type PaginationHookProps = {
+  defaultCurrent?: number;
+  infinite?: boolean;
+  pages: (Omit<PageProps, 'href'> & { href?: string })[];
+};
+
+export type PaginationProps = {
+  /**
+   * Back label
+   */
+  backLabel?: ReactNode;
+  /**
+   * Current page
+   */
+  current?: number;
+  /**
+   * Carousel feature
+   */
+  infinite?: boolean;
+  /**
+   * Link component to render
+   */
+  linkComponent?: PaginationItemProps['tag'];
+  /**
+   * Next label
+   */
+  nextLabel?: ReactNode;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & (PaginationAsLinkProps | PaginationAsButtonProps) &
+  VariantProps<typeof styles> &
+  Omit<HTMLAttributes<Element>, 'onChange'>;

package/src/components/panel/components/body/body.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { styles as bodyStyles } from './body.styles.js';
+import { type BodyProps } from './body.types.js';
+
+export function Body({ className, children, ...props }: BodyProps) {
+  const styles = bodyStyles({});
+  return (
+    <div className={styles.base({ className })} {...props}>
+      {children}
+    </div>
+  );
+}