[LG-5538] feat(time-input): Parse time

packages/emotion/src/version.ts

@@ -1 +1 @@
-export const VERSION = '5.1.0';
+export const VERSION = '5.2.0';

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

@@ -6,6 +6,8 @@ import React, {
 } from 'react';
 import defaults from 'lodash/defaults';
 
+import { getFormatParts, hasDayPeriod } from '../../utils';
+
 import {
   TimeInputDisplayContextProps,
   TimeInputDisplayProviderProps,
@@ -39,6 +41,14 @@ export const TimeInputDisplayProvider = ({
 
   // TODO: min, max helpers
 
+  // Determines if the input should show a select for the day period (AM/PM)
+  const is12hFormat = hasDayPeriod(providerValue.locale);
+
+  // Only used to track the presentation format of the segments, not the value itself
+  const formatParts = getFormatParts({
+    showSeconds: providerValue.showSeconds,
+  });
+
   return (
     <TimeInputDisplayContext.Provider
       value={{
@@ -48,6 +58,8 @@ export const TimeInputDisplayProvider = ({
         ariaLabelledbyProp,
         isDirty,
         setIsDirty,
+        is12hFormat,
+        formatParts,
       }}
     >
       {children}

packages/time-input/src/Context/TimeInputDisplayContext/TimeInputDisplayContext.types.ts

@@ -38,6 +38,17 @@ export type TimeInputDisplayContextProps = Omit<
    * Setter for whether the input has been interacted with
    */
   setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
+
+  /**
+   * Whether the AM/PM select should be shown
+   */
+  is12hFormat: boolean;
+
+  /**
+   * An array of {@link Intl.DateTimeFormatPart},
+   * used to determine the order of segments in the input
+   */
+  formatParts?: Array<Intl.DateTimeFormatPart>;
 };
 
 /**

packages/time-input/src/Context/TimeInputDisplayContext/TimePickerDisplayContext.utils.ts

@@ -31,6 +31,7 @@ export const displayContextPropNames: Array<DisplayContextPropKeys> = [
   'size',
   'errorMessage',
   'state',
+  'showSeconds',
 ];
 
 /**
@@ -51,4 +52,6 @@ export const defaultTimeInputDisplayContext: TimeInputDisplayContextProps = {
   errorMessage: '',
   isDirty: false,
   setIsDirty: () => {},
+  is12hFormat: false,
+  showSeconds: true,
 };

packages/time-input/src/TimeInput.stories.tsx

@@ -1,19 +1,52 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { type StoryMetaType } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
+import { DateType, SupportedLocales } from '@leafygreen-ui/date-utils';
+
 import { TimeInput } from '.';
 
 const meta: StoryMetaType<typeof TimeInput> = {
   title: 'Components/Inputs/TimeInput',
   component: TimeInput,
   parameters: {
     default: 'LiveExample',
+    controls: {
+      exclude: [
+        'handleValidation',
+        'initialValue',
+        'onChange',
+        'onDateChange',
+        'onSegmentChange',
+        'value',
+        'onTimeChange',
+      ],
+    },
+  },
+  args: {
+    showSeconds: true,
+    locale: SupportedLocales.ISO_8601,
+    timeZone: 'UTC',
+  },
+  argTypes: {
+    locale: { control: 'select', options: Object.values(SupportedLocales) },
+    timeZone: {
+      control: 'select',
+      options: [undefined, 'UTC', 'America/New_York', 'Europe/London'],
+    },
   },
 };
 
 export default meta;
 
-const Template: StoryFn<typeof TimeInput> = props => <TimeInput {...props} />;
+const Template: StoryFn<typeof TimeInput> = props => {
+  const [value, setValue] = useState<DateType | undefined>(
+    new Date('1990-02-20T14:30:50Z'),
+  );
+
+  return (
+    <TimeInput {...props} value={value} onTimeChange={time => setValue(time)} />
+  );
+};
 
 export const LiveExample = Template.bind({});

packages/time-input/src/TimeInput/TimeInput.types.ts

@@ -78,6 +78,13 @@ export type DisplayTimeInputProps = {
    * A message to show in red underneath the input when state is `Error`
    */
   errorMessage?: string;
+
+  /**
+   * Whether to show seconds in the input.
+   *
+   * @default true
+   */
+  showSeconds?: boolean;
 } & DarkModeProps &
   AriaLabelPropsWithLabel;
 

packages/time-input/src/TimeInputInputs/TimeInputInputs.tsx

@@ -4,6 +4,7 @@ import { cx } from '@leafygreen-ui/emotion';
 import { FormField, FormFieldInputContainer } from '@leafygreen-ui/form-field';
 
 import { unitOptions } from '../constants';
+import { useTimeInputDisplayContext } from '../Context/TimeInputDisplayContext/TimeInputDisplayContext';
 import { TimeInputSelect } from '../TimeInputSelect/TimeInputSelect';
 import { UnitOption } from '../TimeInputSelect/TimeInputSelect.types';
 
@@ -15,6 +16,7 @@ import { TimeInputInputsProps } from './TimeInputInputs.types';
  */
 export const TimeInputInputs = forwardRef<HTMLDivElement, TimeInputInputsProps>(
   (_props: TimeInputInputsProps, forwardedRef) => {
+    const { is12hFormat } = useTimeInputDisplayContext();
     const [selectUnit, setSelectUnit] = useState<UnitOption>(unitOptions[0]);
 
     const handleSelectChange = (unit: UnitOption) => {
@@ -28,12 +30,14 @@ export const TimeInputInputs = forwardRef<HTMLDivElement, TimeInputInputsProps>(
           <FormFieldInputContainer>
             <div>TODO: Input segments go here</div>
           </FormFieldInputContainer>
-          <TimeInputSelect
-            unit={selectUnit.displayName}
-            onChange={unit => {
-              handleSelectChange(unit);
-            }}
-          />
+          {is12hFormat && (
+            <TimeInputSelect
+              unit={selectUnit.displayName}
+              onChange={unit => {
+                handleSelectChange(unit);
+              }}
+            />
+          )}
         </div>
       </FormField>
     );

packages/time-input/src/constants.ts

@@ -1,4 +1,16 @@
+import { DateTimeParts } from './shared.types';
+
 export const unitOptions = [
   { displayName: 'AM', value: 'AM' },
   { displayName: 'PM', value: 'PM' },
 ];
+
+export const defaultDateTimeParts: DateTimeParts = {
+  hour: '',
+  minute: '',
+  second: '',
+  month: '',
+  day: '',
+  year: '',
+  dayPeriod: 'AM',
+};

packages/time-input/src/shared.types.ts

@@ -0,0 +1,14 @@
+export const DateTimePartKeys = {
+  hour: 'hour',
+  minute: 'minute',
+  second: 'second',
+  month: 'month',
+  day: 'day',
+  year: 'year',
+  dayPeriod: 'dayPeriod',
+} as const;
+
+export type DateTimePartKeys =
+  (typeof DateTimePartKeys)[keyof typeof DateTimePartKeys];
+
+export type DateTimeParts = Record<DateTimePartKeys, string>;

packages/time-input/src/utils/getFormatParts/getFormatParts.spec.ts

@@ -0,0 +1,23 @@
+import { getFormatParts } from './getFormatParts';
+
+describe('packages/time-input/utils/getFormatParts', () => {
+  test('returns the correct format parts without seconds', () => {
+    const formatParts = getFormatParts({});
+    expect(formatParts).toEqual([
+      { type: 'hour', value: '' },
+      { type: 'literal', value: ':' },
+      { type: 'minute', value: '' },
+    ]);
+  });
+
+  test('returns the correct format parts with seconds', () => {
+    const formatParts = getFormatParts({ showSeconds: true });
+    expect(formatParts).toEqual([
+      { type: 'hour', value: '' },
+      { type: 'literal', value: ':' },
+      { type: 'minute', value: '' },
+      { type: 'literal', value: ':' },
+      { type: 'second', value: '' },
+    ]);
+  });
+});

packages/time-input/src/utils/getFormatParts/getFormatParts.ts

@@ -0,0 +1,43 @@
+/**
+ * Returns an array of {@link Intl.DateTimeFormatPart} for the provided locale.
+ *
+ * Filters out the dayPeriod and the empty literal before it
+ * since they are not part of the time format parts.
+ *
+ * This will return `:` for every literal part regardless of the locale.
+ *
+ * @param showSeconds - Whether to show seconds
+ * @returns The format parts
+ *
+ * @example
+ *
+ * ```js
+ * getFormatParts({ showSeconds: true });
+ *
+ * // [
+ * //   { type: 'hour', value: '' },
+ * //   { type: 'literal', value: ':' },
+ * //   { type: 'minute', value: '' },
+ * //   { type: 'literal', value: ':' },
+ * //   { type: 'second', value: '' },
+ * // ]
+ */
+export const getFormatParts = ({
+  showSeconds = false,
+}: {
+  showSeconds?: boolean;
+}): Array<Intl.DateTimeFormatPart> | undefined => {
+  const formatParts: Array<Intl.DateTimeFormatPart> = [
+    { type: 'hour', value: '' },
+    { type: 'literal', value: ':' },
+    { type: 'minute', value: '' },
+    ...(showSeconds
+      ? ([
+          { type: 'literal', value: ':' },
+          { type: 'second', value: '' },
+        ] as Array<Intl.DateTimeFormatPart>)
+      : []),
+  ];
+
+  return formatParts;
+};