lazy load date picker library and removed lodash-es usage

packages/ui/package.json

@@ -55,7 +55,7 @@
     "lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
     "lint:fix": "eslint \"./src/**/*.{ts,tsx,js,jsx}\" --fix",
     "test": "vitest run",
-    "test:watch": "vitest",
+    "test:watch": "vitest --no-coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate:component": "plop"
@@ -117,12 +117,12 @@
     "@westpac/ts-config": "workspace:~",
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
-    "lodash-es": "~4.17.21",
     "react-aria": "~3.25.0",
     "react-stately": "~3.23.0"
   },
   "peerDependencies": {
     "colorjs.io": "~0.4.5",
+    "@duetds/date-picker": "~1.4.0",
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0"

packages/ui/src/components/date-picker/date-picker.component.tsx

@@ -1,5 +1,4 @@
-import { defineCustomElements } from '@duetds/date-picker/dist/loader';
-import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+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';
@@ -23,9 +22,15 @@ export function DatePicker({
   name,
   ...props
 }: DatePickerProps) {
+  const [initialized, setInitialized] = useState(false);
+
   useEffect(() => {
-    // Register Duet Date Picker
-    defineCustomElements(window);
+    const initDatePicker = async () => {
+      const { defineCustomElements } = await import('@duetds/date-picker/custom-element');
+      defineCustomElements(window);
+      setInitialized(true);
+    };
+    initDatePicker();
   }, []);
 
   const ref = useRef<DuetDatePickerElement>(null);
@@ -39,13 +44,13 @@ export function DatePicker({
   const dateAdapter = useMemo(
     () => ({
       parse(value = '', createDate: any) {
-        const matches = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+        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');
+        return formatDate(date, 'dd-mm-yyyy');
       },
     }),
     [],
@@ -87,12 +92,15 @@ export function DatePicker({
     }
     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]);
+  }, [ref, initialized]);
 
   useLayoutEffect(() => {
     if (!ref.current) {
@@ -101,15 +109,7 @@ export function DatePicker({
     ref.current.value = value;
   }, [value, ref]);
 
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    ref.current.identifier = id;
-    ref.current.name = name;
-  }, [ref]);
-
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!ref.current) {
       return;
     }

packages/ui/src/components/date-picker/date-picker.spec.tsx

@@ -1,10 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { DatePicker } from './date-picker.component.js';
 import { styles } from './date-picker.styles.js';
 import { createDate, formatDate, isDateDisabled } from './date-picker.utils.js';
 
-vi.mock('@duetds/date-picker/dist/loader', () => {
+vi.mock('@duetds/date-picker/custom-element', () => {
   const createMockDatePicker = (w: Window) => {
     customElements.get('duet-date-picker') ||
       customElements.define(
@@ -13,6 +13,7 @@ vi.mock('@duetds/date-picker/dist/loader', () => {
           constructor() {
             super();
             const p = w.document.createElement('p');
+            p.setAttribute('role', 'date-picker');
             p.textContent = 'duet-ds-date-picker';
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
@@ -23,9 +24,9 @@ vi.mock('@duetds/date-picker/dist/loader', () => {
             const formattedDate = dateAdapter?.format(new Date('2029-12-04T00:12:00.000Z'));
             p.setAttribute('data-formatted-date', formattedDate);
             const _createDate = (s1: string, s2: string, s3: string) => {
-              return `${s1}-${s2}-${s3}`;
+              return `${s1}-${s2}-${s3}T00:00:00.000Z`;
             };
-            const parseDate = dateAdapter?.parse('12/12/2012', _createDate);
+            const parseDate = dateAdapter?.parse('12-12-2012', _createDate);
             p.setAttribute('data-parse-date', parseDate);
 
             this.appendChild(p);
@@ -40,12 +41,12 @@ vi.mock('@duetds/date-picker/dist/loader', () => {
 });
 
 describe('DatePicker', () => {
-  it('renders the custom date picker element, bind the parse and format functions to the date adaptor', () => {
-    const { getByText } = render(<DatePicker />);
-    const el = getByText('duet-ds-date-picker');
+  it('renders the custom date picker element, bind the parse and format functions to the date adaptor', async () => {
+    render(<DatePicker />);
+    const el = await screen.findByText('duet-ds-date-picker');
     expect(el).toBeInTheDocument();
-    expect(el.getAttribute('data-parse-date')).toBe('2012-12-12');
-    expect(el.getAttribute('data-formatted-date')).toBe('04/12/2029');
+    expect(el.getAttribute('data-parse-date')).toBe('2012-12-12T00:00:00.000Z');
+    expect(el.getAttribute('data-formatted-date')).toBe('04-12-2029');
   });
 
   it('renders the style correctly', () => {

packages/ui/src/components/date-picker/date-picker.utils.ts

@@ -1,4 +1,3 @@
-import { isEqual } from 'lodash-es';
 import { EventHandler, RefObject, useEffect } from 'react';
 
 import { DuetDatePickerElement } from './date-picker.types.js';
@@ -92,5 +91,5 @@ export function isDateDisabled(
   if (disableDaysOfWeek?.includes(date.getDay())) {
     return true;
   }
-  return !!disableDates?.some((d: string) => isEqual(date, parseISODate(d)));
+  return !!disableDates?.some((d: string) => date.getTime() === parseISODate(d)?.getTime());
 }

packages/ui/src/tailwind/tailwind-transformer.ts

@@ -6,6 +6,12 @@ import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/ta
 export const withGEL = (config: Config) =>
   withTV({
     ...config,
+    safelist: [
+      // Workaround for date-picker which is a web component and tailwind can't pickup the inner components
+      'date-picker',
+      ...(typeof config.safelist === 'string' ? [config.safelist] : []),
+      ...(Array.isArray(config.safelist) ? config.safelist : []),
+    ],
     plugins: [
       WestpacUIKitBasePlugin,
       WestpacUIKitThemesPlugin,