[LG-5497] feat(time-input): enhance context providers (#3178)

* feat(time-input): add Time Input component with styles, WIP

* wip

* feat(time-input): add constants and TimeInput component structure

* remove code-editor

* refactor(time-input): simplify TimeInput component

* chore(time-input): add lodash as a dependency

* chore(pnpm-lock): update deps

* feat(time-input): integrate TimeInputProvider for controlled value management

* feat(date-utils, time-input): add MIN_DATE and MAX_DATE constants; extend BaseTimeInputProps with locale, timeZone, min, max, and baseFontSize

* feat(time-input): enhance TimeInputDisplayContext with state management and default values

* refactor(time-input): move context to Context dir and update types

* refactor(time-input): move context to Context dir and update types

* fix(time-input): resolve merge conflict in TimeInputInputs types. forgot to save

* docs(time-input): add JSDoc comments to TimeInputContext and TimeInputDisplayContext for better clarity

* feat(time-input): enhance context providers with additional exports and comprehensive tests for state management

* fix(time-input): adjust context provider types for better handling of undefined values

* refactor(date-picker): migrate MIN_DATE and MAX_DATE constants to date-utils and update imports in context and stories

* refactor(time-input): remove spec from excludes

* fix(time-input): update context provider types to allow optional children prop

* feat(time-input): integrate useControlled hook for value management in TimeInput component

* chore(date-picker): add date-picker changeset

* refactor(date-picker): consolidate date-utils imports in SharedDatePickerContext tests

* lint

* refactor(time-input): remove dark mode and theme from TimeInputDisplayContext

Author: shaneeza

.changeset/public-parts-fix.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/date-picker': minor
+---
+
+Move `MAX_DATE` and `MIN_DATE` from `date-picker` to `@leafygreen-ui/date-utils`.

.changeset/young-worms-stick.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/date-utils': minor
+---
+
+Add `MAX_DATE` and `MIN_DATE` from `@leafygreen-ui/date-picker`.

packages/date-picker/src/DatePicker.stories.tsx

@@ -5,6 +5,8 @@ import { StoryFn } from '@storybook/react';
 import Button from '@leafygreen-ui/button';
 import {
   type DateType,
+  MAX_DATE,
+  MIN_DATE,
   Month,
   newUTC,
   SupportedLocales,
@@ -18,7 +20,6 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import Modal from '@leafygreen-ui/modal';
 import { Size } from '@leafygreen-ui/tokens';
 
-import { MAX_DATE, MIN_DATE } from './shared/constants';
 import {
   SharedDatePickerContextProps,
   SharedDatePickerProvider,

packages/date-picker/src/shared/constants.ts

@@ -1,19 +1,7 @@
-import { Month } from '@leafygreen-ui/date-utils';
+import { MAX_DATE, MIN_DATE } from '@leafygreen-ui/date-utils';
 import { RenderMode } from '@leafygreen-ui/popover';
 import { DropdownWidthBasis } from '@leafygreen-ui/select';
 
-/**
- * The default earliest selectable date
- * (Unix epoch start: https://en.wikipedia.org/wiki/Unix_time)
- * */
-export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
-
-/**
- * The default latest selectable date
- * (Unix 32-bit rollover date: https://en.wikipedia.org/wiki/Year_2038_problem)
- */
-export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));
-
 // TODO: Update how defaultMin & defaultMax are defined,
 // since day/month are constants,
 // but year is consumer-defined

packages/date-picker/src/shared/context/SharedDatePickerContext.spec.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { act, waitFor } from '@testing-library/react';
 
-import { Month, newUTC } from '@leafygreen-ui/date-utils';
+import { MAX_DATE, MIN_DATE, Month, newUTC } from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import { renderHook } from '@leafygreen-ui/testing-lib';
 
-import { MAX_DATE, MIN_DATE } from '../constants';
-
 import {
   SharedDatePickerContextProps,
   SharedDatePickerProvider,

packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts

@@ -6,13 +6,14 @@ import {
   DateType,
   getISODate,
   isValidDate,
+  MAX_DATE,
+  MIN_DATE,
   SupportedLocales,
   toDate,
 } from '@leafygreen-ui/date-utils';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import { BaseFontSize, Size } from '@leafygreen-ui/tokens';
 
-import { MAX_DATE, MIN_DATE } from '../constants';
 import { AutoComplete, BaseDatePickerProps, DatePickerState } from '../types';
 import { ModifiedPopoverProps } from '../types/BaseDatePickerProps.types';
 import { getFormatParts } from '../utils';

packages/date-utils/src/constants.ts

@@ -16,3 +16,15 @@ export enum Month {
   November,
   December,
 }
+
+/**
+ * The default earliest selectable date
+ * (Unix epoch start: https://en.wikipedia.org/wiki/Unix_time)
+ * */
+export const MIN_DATE = new Date(Date.UTC(1970, Month.January, 1));
+
+/**
+ * The default latest selectable date
+ * (Unix 32-bit rollover date: https://en.wikipedia.org/wiki/Year_2038_problem)
+ */
+export const MAX_DATE = new Date(Date.UTC(2038, Month.January, 19));

packages/time-input/package.json

@@ -29,6 +29,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/a11y": "workspace:^",
     "@leafygreen-ui/date-utils": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/form-field": "workspace:^",

packages/time-input/src/Context/TimeInputContext/TimeInputContext.spec.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { act } from '@testing-library/react';
+
+import { renderHook } from '@leafygreen-ui/testing-lib';
+
+import {
+  TimeInputProvider,
+  TimeInputProviderProps,
+  useTimeInputContext,
+} from '.';
+
+const renderTimeInputProvider = (props?: Partial<TimeInputProviderProps>) => {
+  const defaultProps: TimeInputProviderProps = {
+    value: undefined,
+    setValue: jest.fn(),
+    handleValidation: jest.fn(),
+  };
+
+  const { result, rerender } = renderHook(() => useTimeInputContext(), {
+    wrapper: ({ children }: { children?: React.ReactNode }) => (
+      <TimeInputProvider {...defaultProps} {...props}>
+        {children}
+      </TimeInputProvider>
+    ),
+  });
+
+  return { result, rerender };
+};
+
+describe('packages/time-input-context', () => {
+  describe('useTimeInputContext', () => {
+    describe('value', () => {
+      test('returns undefined values by default', () => {
+        const { result } = renderTimeInputProvider({});
+
+        expect(result.current.value).toBeUndefined();
+      });
+
+      test('provides the correct value when passed', () => {
+        const testDate = new Date('2023-12-25T10:30:00');
+        const mockSetValue = jest.fn();
+
+        const { result } = renderTimeInputProvider({
+          value: testDate,
+          setValue: mockSetValue,
+        });
+
+        expect(result.current.value).toBe(testDate);
+      });
+
+      test('provides null value correctly', () => {
+        const mockSetValue = jest.fn();
+
+        const { result } = renderTimeInputProvider({
+          value: null,
+          setValue: mockSetValue,
+        });
+
+        expect(result.current.value).toBeNull();
+      });
+    });
+
+    describe('setValue', () => {
+      test('calls the provided setValue function with the correct value', () => {
+        const mockSetValue = jest.fn();
+        const testDate = new Date('2023-12-25T10:30:00');
+
+        const { result } = renderTimeInputProvider({
+          setValue: mockSetValue,
+        });
+
+        act(() => {
+          result.current.setValue(testDate);
+        });
+
+        expect(mockSetValue).toHaveBeenCalledWith(testDate);
+      });
+
+      test('handles invalid date objects', () => {
+        const mockSetValue = jest.fn();
+        const invalidDate = new Date('invalid');
+
+        const { result } = renderTimeInputProvider({
+          setValue: mockSetValue,
+        });
+
+        act(() => {
+          result.current.setValue(invalidDate);
+        });
+
+        expect(mockSetValue).toHaveBeenCalledWith(invalidDate);
+      });
+
+      test('calls setValue with null when undefined is passed', () => {
+        const mockSetValue = jest.fn();
+
+        const { result } = renderTimeInputProvider({
+          setValue: mockSetValue,
+        });
+
+        act(() => {
+          result.current.setValue(undefined);
+        });
+
+        expect(mockSetValue).toHaveBeenCalledWith(null);
+      });
+
+      test('handles null value correctly', () => {
+        const mockSetValue = jest.fn();
+
+        const { result } = renderTimeInputProvider({
+          setValue: mockSetValue,
+        });
+
+        act(() => {
+          result.current.setValue(null);
+        });
+
+        expect(mockSetValue).toHaveBeenCalledWith(null);
+      });
+    });
+
+    describe('handleValidation', () => {
+      test('calls the provided handleValidation function when provided', () => {
+        const mockHandleValidation = jest.fn();
+        const testDate = new Date('2023-12-25T10:30:00');
+
+        const { result } = renderTimeInputProvider({
+          handleValidation: mockHandleValidation,
+        });
+
+        act(() => {
+          result.current.handleValidation(testDate);
+        });
+
+        expect(mockHandleValidation).toHaveBeenCalledWith(testDate);
+      });
+
+      test('handles undefined value correctly', () => {
+        const mockHandleValidation = jest.fn();
+
+        const { result } = renderTimeInputProvider({
+          handleValidation: mockHandleValidation,
+        });
+
+        act(() => {
+          result.current.handleValidation(undefined);
+        });
+
+        expect(mockHandleValidation).toHaveBeenCalledWith(undefined);
+      });
+    });
+  });
+});

packages/time-input/src/Context/TimeInputContext/TimeInputContext.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react';
+
+import { DateType } from '@leafygreen-ui/date-utils';
+
+import {
+  TimeInputContextProps,
+  TimeInputProviderProps,
+} from './TimeInputContext.types';
+
+export const TimeInputContext = createContext<TimeInputContextProps>(
+  {} as TimeInputContextProps,
+);
+
+/**
+ * This provider is used for the state context of the TimeInput component
+ */
+export const TimeInputProvider = ({
+  children,
+  value,
+  setValue: _setValue,
+  handleValidation: _handleValidation,
+}: PropsWithChildren<TimeInputProviderProps>) => {
+  const setValue = (newVal?: DateType) => {
+    _setValue(newVal ?? null);
+  };
+
+  const handleValidation = (val?: DateType) => {
+    _handleValidation?.(val);
+  };
+
+  return (
+    <TimeInputContext.Provider
+      value={{
+        value,
+        setValue,
+        handleValidation,
+      }}
+    >
+      {children}
+    </TimeInputContext.Provider>
+  );
+};
+
+export const useTimeInputContext = () => {
+  return useContext(TimeInputContext);
+};