@westpac/ui 0.3.0 → 0.5.0

package/dist/components/date-picker/date-picker.component.js

@@ -0,0 +1,139 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { styles } from './date-picker.styles.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 }) {
+    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(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) {
+                const matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
+                if (matches) {
+                    return createDate(matches[3], matches[2], matches[1]);
+                }
+            },
+            format (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)=>{
+            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
+    ]);
+    return React.createElement("duet-date-picker", _extends({
+        class: styles({
+            size
+        }),
+        ref: ref
+    }, props));
+}

package/dist/components/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { DatePicker } from './date-picker.component.js';
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Different sizes example
+ */
+export declare const DifferentSizesStory: Story;
+/**
+ * > Controlled value
+ */
+export declare const ControlledValueStory: Story;

package/dist/components/date-picker/date-picker.stories.js

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { DatePicker } from './date-picker.component.js';
+const meta = {
+    title: 'Example/DatePicker',
+    component: DatePicker,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "h-30 p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {}
+};
+export const DifferentSizesStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, [
+            'sm',
+            'md',
+            'lg',
+            'xl'
+        ].map((size)=>{
+            return React.createElement("div", {
+                className: "py-2",
+                key: size
+            }, React.createElement(DatePicker, {
+                size: size
+            }));
+        }));
+    }
+};
+export const ControlledValueStory = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('2023-08-01');
+        return React.createElement(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/dist/components/date-picker/date-picker.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "date-picker", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined>;

package/dist/components/date-picker/date-picker.styles.js

@@ -0,0 +1,20 @@
+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/dist/components/date-picker/date-picker.types.d.ts

@@ -0,0 +1,33 @@
+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 = {
+    disableDates?: string[];
+    disableDaysOfWeek?: number[];
+    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?: string;
+    onBlur?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+    onFocus?: (...args: any[]) => any;
+    onOpen?: (...args: any[]) => any;
+    value?: string;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/date-picker/date-picker.types.js

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

package/dist/components/date-picker/date-picker.utils.d.ts

@@ -0,0 +1,25 @@
+import { EventHandler, RefObject } from 'react';
+import { DuetDatePickerElement } from './date-picker.types.js';
+/**
+ * @param date the date to format as a Date
+ * @param format the format string eg. "dd.mm.yyyy", "YYYY-MM-DD"
+ */
+export declare function formatDate(date: Date, format: string): string;
+/**
+ * @param ref Element ref
+ * @param eventName Event name for the event listener
+ * @param handler Callback for the event
+ */
+export declare function useListener(ref: RefObject<DuetDatePickerElement> | null, eventName: string, handler?: EventHandler<any>): void;
+export declare function createDate(year: string, month: string, day: string): Date | undefined;
+/**
+ * @param value date string in ISO format YYYY-MM-DD
+ */
+export declare function parseISODate(value: string): Date | undefined;
+/**
+ * @param date Date
+ * @param disableWeekends boolean to disable weekends
+ * @param disableDaysOfWeek array of disable days of the week
+ * @param disableDates Disabled dates
+ */
+export declare function isDateDisabled(date: Date, disableWeekends?: boolean, disableDaysOfWeek?: number[], disableDates?: string[]): boolean;

package/dist/components/date-picker/date-picker.utils.js

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
+export function formatDate(date, format) {
+    if (!date) {
+        return '';
+    }
+    let d = date.getDate().toString(10);
+    let m = (date.getMonth() + 1).toString(10);
+    const y = date.getFullYear().toString(10);
+    if (date.getDate() < 10) {
+        d = `0${d}`;
+    }
+    if (date.getMonth() < 9) {
+        m = `0${m}`;
+    }
+    return format.replace(/MM/i, m).replace(/YYYY/i, y).replace(/DD/i, d);
+}
+export function useListener(ref, eventName, handler) {
+    useEffect(()=>{
+        if ((ref === null || ref === void 0 ? void 0 : ref.current) && handler) {
+            const element = ref.current;
+            element.addEventListener(eventName, handler);
+            return ()=>element.removeEventListener(eventName, handler);
+        }
+    }, [
+        eventName,
+        handler
+    ]);
+}
+export function createDate(year, month, day) {
+    const dayInt = parseInt(day, 10);
+    const monthInt = parseInt(month, 10);
+    const yearInt = parseInt(year, 10);
+    const isValid = Number.isInteger(yearInt) && Number.isInteger(monthInt) && Number.isInteger(dayInt) && monthInt > 0 && monthInt <= 12 && dayInt > 0 && dayInt <= 31 && yearInt > 0;
+    if (isValid) {
+        return new Date(yearInt, monthInt - 1, dayInt);
+    }
+}
+export function parseISODate(value) {
+    const matches = value.match(ISO_DATE_FORMAT);
+    if (matches) {
+        return createDate(matches[1], matches[2], matches[3]);
+    }
+}
+export function isDateDisabled(date, disableWeekends, disableDaysOfWeek, disableDates) {
+    if (disableWeekends && (date.getDay() === 0 || date.getDay() === 6)) {
+        return true;
+    }
+    if (disableDaysOfWeek === null || disableDaysOfWeek === void 0 ? void 0 : disableDaysOfWeek.includes(date.getDay())) {
+        return true;
+    }
+    return !!(disableDates === null || disableDates === void 0 ? void 0 : disableDates.some((d)=>{
+        var _parseISODate;
+        return date.getTime() === ((_parseISODate = parseISODate(d)) === null || _parseISODate === void 0 ? void 0 : _parseISODate.getTime());
+    }));
+}

package/dist/components/date-picker/index.d.ts

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

package/dist/components/date-picker/index.js

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

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FlexiCellAdornmentProps } from './flexi-cell-adornment.types.js';
+/** Flexi Cell Adornment: Flexi Cell Adornment */
+export declare const FlexiCellAdornment: ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps) => JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.js

@@ -0,0 +1,24 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles } from './flexi-cell-adornment.styles.js';
+export const FlexiCellAdornment = ({ children , tag: Tag = 'div' , align ='center' , className , ...props })=>{
+    return React.createElement(Tag, _extends({}, props, {
+        className: styles({
+            align,
+            className
+        })
+    }), children);
+};

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    align: {
+        center: string;
+        top: string;
+        bottom: string;
+    };
+}, undefined, "flex flex-col items-end gap-1", {
+    responsiveVariants: string[];
+}, {
+    align: {
+        center: string;
+        top: string;
+        bottom: string;
+    };
+}, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.styles.js

@@ -0,0 +1,19 @@
+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/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.types.d.ts

@@ -0,0 +1,17 @@
+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/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.types.js

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

package/dist/components/flexi-cell/components/flexi-cell-adornment/index.d.ts

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

package/dist/components/flexi-cell/components/flexi-cell-adornment/index.js

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

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FlexiCellBodyProps } from './flexi-cell-body.types.js';
+/** Flexi Cell Body: Flexi Cell Body */
+export declare const FlexiCellBody: ({ children, tag: Tag, className, ...props }: FlexiCellBodyProps) => JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.js

@@ -0,0 +1,23 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles } from './flexi-cell-body.styles.js';
+export const FlexiCellBody = ({ children , tag: Tag = 'div' , className , ...props })=>{
+    return React.createElement(Tag, _extends({}, props, {
+        className: styles({
+            className
+        })
+    }), children);
+};

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex flex-1 flex-col gap-1", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.js

@@ -0,0 +1,13 @@
+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/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.types.d.ts

@@ -0,0 +1,34 @@
+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>;
+export {};

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.types.js

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

package/dist/components/flexi-cell/components/flexi-cell-body/index.d.ts

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

package/dist/components/flexi-cell/components/flexi-cell-body/index.js

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

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FlexiCellButtonProps } from './flexi-cell-button.types.js';
+/** Flexi Cell Button: Flexi Cell Button */
+export declare const FlexiCellButton: ({ className, ...props }: FlexiCellButtonProps) => JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.js

@@ -0,0 +1,25 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Button } from '../../../../components/index.js';
+import { styles } from './flexi-cell-button.styles.js';
+export const FlexiCellButton = ({ className , ...props })=>{
+    return React.createElement(Button, _extends({
+        className: styles({
+            className
+        }),
+        look: "link"
+    }, props));
+};

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "text-muted hover:text-link", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.styles.js

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

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.types.d.ts

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

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.types.js

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

package/dist/components/flexi-cell/components/flexi-cell-button/index.d.ts

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

package/dist/components/flexi-cell/components/flexi-cell-button/index.js

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

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" resolution-mode="require"/>
+import { FlexiCellCircleProps } from './flexi-cell-circle.types.js';
+/** Flexi Cell Circle: Flexi Cell Circle */
+export declare const FlexiCellCircle: ({ className, ...props }: FlexiCellCircleProps) => JSX.Element;