@westpac/ui 0.3.0 → 0.5.0

package/src/components/date-picker/date-picker.component.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { styles } from './date-picker.styles.js';
+import { type DatePickerProps, DuetDatePickerElement } from './date-picker.types.js';
+import { formatDate, isDateDisabled, useListener } from './date-picker.utils.js';
+
+export function DatePicker({
+  disableWeekends,
+  disableDaysOfWeek,
+  disableDates,
+  placeholder,
+  onChange,
+  onFocus,
+  onBlur,
+  onOpen,
+  onClose,
+  min,
+  max,
+  value,
+  id,
+  size = 'xl',
+  name,
+  ...props
+}: DatePickerProps) {
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    const initDatePicker = async () => {
+      const { defineCustomElements } = await import('@duetds/date-picker/custom-element');
+      defineCustomElements(window);
+      setInitialized(true);
+    };
+    initDatePicker();
+  }, []);
+
+  const ref = useRef<DuetDatePickerElement>(null);
+
+  useListener(ref, 'duetChange', onChange);
+  useListener(ref, 'duetFocus', onFocus);
+  useListener(ref, 'duetBlur', onBlur);
+  useListener(ref, 'duetOpen', onOpen);
+  useListener(ref, 'duetClose', onClose);
+
+  const dateAdapter = useMemo(
+    () => ({
+      parse(value = '', createDate: any) {
+        const matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
+        if (matches) {
+          return createDate(matches[3], matches[2], matches[1]);
+        }
+      },
+      format(date: Date) {
+        return formatDate(date, 'dd-mm-yyyy');
+      },
+    }),
+    [],
+  );
+
+  const localization = useMemo(() => {
+    return {
+      buttonLabel: 'Choose date',
+      placeholder,
+      selectedDateMessage: 'Selected date is',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      monthSelectLabel: 'Month',
+      yearSelectLabel: 'Year',
+      closeLabel: 'Close window',
+      calendarHeading: 'Choose a date',
+      dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+      monthNames: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+      ],
+      monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    };
+  }, [placeholder]);
+
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    ref.current.dateAdapter = dateAdapter;
+    ref.current.localization = localization;
+
+    ref.current.value = value;
+    ref.current.identifier = id;
+    ref.current.name = name;
+
+    ref.current.isDateDisabled = (date: Date) => {
+      return isDateDisabled(date, disableWeekends, disableDaysOfWeek, disableDates);
+    };
+  }, [ref, initialized]);
+
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    ref.current.value = value;
+  }, [value, ref]);
+
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    ref.current.max = max;
+    ref.current.min = min;
+  }, [max, min, ref]);
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return <duet-date-picker class={styles({ size })} ref={ref} {...props} />;
+}

package/src/components/date-picker/date-picker.stories.tsx

@@ -0,0 +1,81 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { DatePicker } from './date-picker.component.js';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Example/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="h-30 p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};
+
+/**
+ * > Different sizes example
+ */
+export const DifferentSizesStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        {(['sm', 'md', 'lg', 'xl'] as any[]).map(size => {
+          return (
+            <div className="py-2" key={size}>
+              <DatePicker size={size} />
+            </div>
+          );
+        })}
+      </>
+    );
+  },
+};
+
+/**
+ * > Controlled value
+ */
+export const ControlledValueStory: Story = {
+  args: {},
+  render: () => {
+    const [value, setValue] = useState('2023-08-01');
+    return (
+      <DatePicker
+        onChange={value => {
+          console.log(value.target.value);
+          setValue(value.target.value);
+        }}
+        onOpen={() => {
+          console.log('onOpen');
+        }}
+        onClose={() => {
+          console.log('onClose');
+        }}
+        onBlur={() => {
+          console.log('onBlur');
+        }}
+        onFocus={() => {
+          console.log('onFocus');
+        }}
+        value={value}
+      />
+    );
+  },
+};

package/src/components/date-picker/date-picker.styles.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'date-picker',
+    variants: {
+      size: {
+        sm: 'date-picker-sm',
+        md: 'date-picker-md',
+        lg: 'date-picker-lg',
+        xl: 'date-picker-xl',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/date-picker/date-picker.types.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+
+import { styles } from './date-picker.styles.js';
+
+export type DuetDatePickerElement = Element & {
+  dateAdapter: any;
+  identifier: any;
+  isDateDisabled: (date: Date) => boolean;
+  localization: any;
+  max?: string;
+  min?: string;
+  name?: string;
+  value?: string;
+};
+
+export type DatePickerProps = {
+  /*
+   * Disable specific dates. Must be in IS0-8601 format: YYYY-MM-DD
+   */
+  disableDates?: string[];
+  /*
+   * Disable days of the week. 0 for Sunday, 1 for Monday, etc.
+   */
+  disableDaysOfWeek?: number[];
+  /*
+   * Disable weekend days
+   */
+  disableWeekends?: boolean;
+  /**
+   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+   */
+  max?: string;
+  /**
+   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+   */
+  min?: string;
+  /*
+   * Name
+   */
+  name?: string;
+  /*
+   * onBlur
+   */
+  onBlur?: (...args: any[]) => any;
+  /*
+   * onChange
+   */
+  onChange?: (...args: any[]) => any;
+  /*
+   * onClose
+   */
+  onClose?: (...args: any[]) => any;
+  /*
+   * onFocus
+   */
+  onFocus?: (...args: any[]) => any;
+  /*
+   * onOpen
+   */
+  onOpen?: (...args: any[]) => any;
+  /*
+   * Date picker input value. Must be in IS0-8601 format: YYYY-MM-DD
+   */
+  value?: string;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/date-picker/date-picker.utils.ts

@@ -0,0 +1,95 @@
+import { EventHandler, RefObject, useEffect } from 'react';
+
+import { DuetDatePickerElement } from './date-picker.types.js';
+
+const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+/**
+ * @param date the date to format as a Date
+ * @param format the format string eg. "dd.mm.yyyy", "YYYY-MM-DD"
+ */
+export function formatDate(date: Date, format: string) {
+  if (!date) {
+    return '';
+  }
+  let d = date.getDate().toString(10);
+  let m = (date.getMonth() + 1).toString(10);
+  const y = date.getFullYear().toString(10);
+  // days are not zero-indexed, so pad if less than 10
+  if (date.getDate() < 10) {
+    d = `0${d}`;
+  }
+  // months *are* zero-indexed, pad if less than 9!
+  if (date.getMonth() < 9) {
+    m = `0${m}`;
+  }
+  return format.replace(/MM/i, m).replace(/YYYY/i, y).replace(/DD/i, d);
+}
+
+/**
+ * @param ref Element ref
+ * @param eventName Event name for the event listener
+ * @param handler Callback for the event
+ */
+export function useListener(
+  ref: RefObject<DuetDatePickerElement> | null,
+  eventName: string,
+  handler?: EventHandler<any>,
+) {
+  useEffect(() => {
+    if (ref?.current && handler) {
+      const element = ref.current;
+      element.addEventListener(eventName as any, handler);
+      return () => element.removeEventListener(eventName as any, handler);
+    }
+  }, [eventName, handler]);
+}
+
+export function createDate(year: string, month: string, day: string) {
+  const dayInt = parseInt(day, 10);
+  const monthInt = parseInt(month, 10);
+  const yearInt = parseInt(year, 10);
+  const isValid =
+    Number.isInteger(yearInt) && // all parts should be integers
+    Number.isInteger(monthInt) &&
+    Number.isInteger(dayInt) &&
+    monthInt > 0 && // month must be 1-12
+    monthInt <= 12 &&
+    dayInt > 0 && // day must be 1-31
+    dayInt <= 31 &&
+    yearInt > 0;
+  if (isValid) {
+    return new Date(yearInt, monthInt - 1, dayInt);
+  }
+}
+
+/**
+ * @param value date string in ISO format YYYY-MM-DD
+ */
+export function parseISODate(value: string) {
+  const matches = value.match(ISO_DATE_FORMAT);
+  if (matches) {
+    return createDate(matches[1], matches[2], matches[3]);
+  }
+}
+
+/**
+ * @param date Date
+ * @param disableWeekends boolean to disable weekends
+ * @param disableDaysOfWeek array of disable days of the week
+ * @param disableDates Disabled dates
+ */
+export function isDateDisabled(
+  date: Date,
+  disableWeekends?: boolean,
+  disableDaysOfWeek?: number[],
+  disableDates?: string[],
+) {
+  if (disableWeekends && (date.getDay() === 0 || date.getDay() === 6)) {
+    return true;
+  }
+  if (disableDaysOfWeek?.includes(date.getDay())) {
+    return true;
+  }
+  return !!disableDates?.some((d: string) => date.getTime() === parseISODate(d)?.getTime());
+}

package/src/components/date-picker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './date-picker.component.js';
+export { type DatePickerProps } from './date-picker.types.js';

package/src/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { styles } from './flexi-cell-adornment.styles.js';
+import { type FlexiCellAdornmentProps } from './flexi-cell-adornment.types.js';
+
+/** Flexi Cell Adornment: Flexi Cell Adornment */
+export const FlexiCellAdornment = ({
+  children,
+  tag: Tag = 'div',
+  align = 'center',
+  className,
+  ...props
+}: FlexiCellAdornmentProps) => {
+  return (
+    <Tag {...props} className={styles({ align, className })}>
+      {children}
+    </Tag>
+  );
+};

package/src/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.styles.ts

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex flex-col items-end gap-1',
+    variants: {
+      align: {
+        center: 'justify-center',
+        top: 'justify-start',
+        bottom: 'justify-end',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.types.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './flexi-cell-adornment.styles.js';
+
+export type FlexiCellAdornmentProps = {
+  /**
+   * Define the alignment of content
+   */
+  align?: 'center' | 'top' | 'bottom';
+  /**
+   * Children attribute
+   */
+  children: ReactNode;
+  /**
+   * Component's tag
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<HTMLOrSVGElement> &
+  VariantProps<typeof styles>;

package/src/components/flexi-cell/components/flexi-cell-adornment/index.ts

@@ -0,0 +1,2 @@
+export * from './flexi-cell-adornment.component.js';
+export * from './flexi-cell-adornment.types.js';

package/src/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { styles } from './flexi-cell-body.styles.js';
+import { type FlexiCellBodyProps } from './flexi-cell-body.types.js';
+
+/** Flexi Cell Body: Flexi Cell Body */
+export const FlexiCellBody = ({ children, tag: Tag = 'div', className, ...props }: FlexiCellBodyProps) => {
+  return (
+    <Tag {...props} className={styles({ className })}>
+      {children}
+    </Tag>
+  );
+};

package/src/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex flex-1 flex-col gap-1',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.types.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './flexi-cell-body.styles.js';
+
+export type BaseFlexiCellBodyProps = {
+  /**
+   * Children attributes
+   */
+  children: ReactNode;
+  /**
+   * href value
+   */
+  href?: string;
+  /**
+   * Component tag
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<HTMLOrSVGElement>;
+
+type FlexiCellBodyAsLinkProps = {
+  /**
+   * The href for the link
+   */
+  href: string;
+  /**
+   * The native tag that the circle will be rendered as
+   */
+  tag: 'a';
+};
+
+type CircleAsAllOtherTagsProps<Tag> = {
+  href?: never;
+  tag?: Tag;
+};
+
+type ElementKeysWithoutA = keyof Omit<JSX.IntrinsicElements, 'a'>;
+
+export type FlexiCellBodyProps<Tag extends ElementKeysWithoutA = ElementKeysWithoutA> = (
+  | FlexiCellBodyAsLinkProps
+  | CircleAsAllOtherTagsProps<Tag>
+) &
+  BaseFlexiCellBodyProps &
+  VariantProps<typeof styles>;

package/src/components/flexi-cell/components/flexi-cell-body/index.ts

@@ -0,0 +1,2 @@
+export * from './flexi-cell-body.component.js';
+export * from './flexi-cell-body.types.js';

package/src/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Button } from '../../../../components/index.js';
+
+import { styles } from './flexi-cell-button.styles.js';
+import { type FlexiCellButtonProps } from './flexi-cell-button.types.js';
+
+/** Flexi Cell Button: Flexi Cell Button */
+export const FlexiCellButton = ({ className, ...props }: FlexiCellButtonProps) => {
+  return <Button className={styles({ className })} look="link" {...props} />;
+};

package/src/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'text-muted hover:text-link',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.types.ts

@@ -0,0 +1,3 @@
+import { type ButtonProps } from '../../../../components/index.js';
+
+export type FlexiCellButtonProps = ButtonProps;

package/src/components/flexi-cell/components/flexi-cell-button/index.ts

@@ -0,0 +1,2 @@
+export * from './flexi-cell-button.component.js';
+export * from './flexi-cell-button.types.js';

package/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Circle } from '../../../../components/index.js';
+
+import { styles } from './flexi-cell-circle.styles.js';
+import { FlexiCellCircleProps } from './flexi-cell-circle.types.js';
+
+/** Flexi Cell Circle: Flexi Cell Circle */
+export const FlexiCellCircle = ({ className, ...props }: FlexiCellCircleProps) => {
+  return <Circle className={styles({ className })} {...props} />;
+};

package/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'h-5 w-5 text-muted hover:text-link md:h-6 md:w-6',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.types.ts

@@ -0,0 +1,3 @@
+import { type CircleProps } from '../../../../components/index.js';
+
+export type FlexiCellCircleProps = CircleProps;

package/src/components/flexi-cell/components/flexi-cell-circle/index.ts

@@ -0,0 +1,2 @@
+export * from './flexi-cell-circle.component.js';
+export * from './flexi-cell-circle.types.js';

package/src/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { styles } from './flexi-cell-footer.styles.js';
+import { type FlexiCellFooterProps } from './flexi-cell-footer.types.js';
+
+/** Flexi Cell Footer: Flexi Cell Footer */
+export const FlexiCellFooter = ({ children, className, tag: Tag = 'div', ...props }: FlexiCellFooterProps) => {
+  return (
+    <Tag {...props} className={styles({ className })}>
+      {children}
+    </Tag>
+  );
+};

package/src/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex-grow-0 pt-2',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.types.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+
+export type FlexiCellFooterProps = {
+  /**
+   * Children attributes
+   */
+  children: ReactNode;
+  /**
+   * Component tag
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<HTMLOrSVGElement>;

package/src/components/flexi-cell/components/flexi-cell-footer/index.ts

@@ -0,0 +1,2 @@
+export * from './flexi-cell-footer.component.js';
+export * from './flexi-cell-footer.types.js';

package/src/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { styles } from './flexi-cell-hint.styles.js';
+import { FlexiCellHintProps } from './flexi-cell-hint.types.js';
+
+/** Flexi Cell Hint: Flexi Cell Hint */
+export const FlexiCellHint = ({
+  children,
+  tag: Tag = 'p',
+  className,
+  truncateText = false,
+  ...props
+}: FlexiCellHintProps) => {
+  return (
+    <Tag {...props} className={styles({ className, truncateText })}>
+      {children}
+    </Tag>
+  );
+};

package/src/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'typography-body-10 m-0 font-normal text-muted md:typography-body-9',
+    variants: {
+      truncateText: {
+        true: 'truncate',
+        false: '',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);