moves utils

packages/date-picker/src/DateInputBox/DateInputBox.tsx

@@ -7,6 +7,8 @@ import { DateInputSegment, DateSegment } from '../DateInputSegment';
 import { isDateSegment } from '../DateInputSegment';
 import { DateInputWrapper } from '../DateInputWrapper';
 import { useDatePickerContext } from '../DatePickerContext';
+import { newDateFromSegments } from '../utils/newDateFromSegments';
+import { toClientTimeZone } from '../utils/toTimeZone';
 
 import {
   segmentPartsWrapperStyles,
@@ -15,7 +17,6 @@ import {
 import { DateInputBoxProps, DateSegmentsState } from './DateInputBox.types';
 import { useDateSegments } from './useDateSegments';
 import { useFormatParts } from './useFormat';
-import { newDateFromSegments, toClientTimeZone } from './utils';
 
 /**
  * @internal

packages/date-picker/src/DateInputBox/index.ts

@@ -1,3 +1,5 @@
-
-export  { DateInputBox } from './DateInputBox';
-export { DateInputBoxProps } from './DateInputBox.types';
+export { DateInputBox } from './DateInputBox';
+export type {
+  DateInputBoxProps,
+  DateSegmentsState,
+} from './DateInputBox.types';

packages/date-picker/src/DateInputBox/useDateSegments.ts

@@ -4,9 +4,9 @@ import { getDate, getMonth, getYear, isSameDay } from 'date-fns';
 import { usePrevious } from '@leafygreen-ui/hooks';
 
 import type { DateSegment, DateSegmentValue } from '../DateInputSegment';
+import { toTimeZone } from '../utils/toTimeZone';
 
 import { DateSegmentsState } from './DateInputBox.types';
-import { toTimeZone } from './utils';
 
 type OnUpdateCallback = (value: DateSegmentsState) => void;
 

packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx

@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DatePickerInput } from '.';
+
+describe('packages/date-picker-input', () => {
+  test('condition', () => {
+
+  })
+})

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

@@ -0,0 +1,84 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import { isValid } from 'date-fns';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { StoryMetaType } from '@leafygreen-ui/lib';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../../DatePickerContext';
+
+import { DatePickerInput } from './DatePickerInput';
+
+const ProviderWrapper = (Story: StoryFn, ctx?: { args: any }) => (
+  <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
+    <DatePickerProvider
+      value={{
+        ...ctx?.args,
+      }}
+    >
+      <Story />
+    </DatePickerProvider>
+  </LeafyGreenProvider>
+);
+
+const meta: StoryMetaType<typeof DatePickerInput, DatePickerContextProps> = {
+  title: 'Components/DatePicker/DatePickerInput',
+  component: DatePickerInput,
+  decorators: [ProviderWrapper],
+  parameters: {
+    default: null,
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        value: [null, new Date('1993-12-26')],
+        dateFormat: ['iso8601', 'en-US', 'en-UK', 'de-DE'],
+        timeZone: ['UTC', 'Europe/London', 'America/New_York', 'Asia/Seoul'],
+      },
+      excludeCombinations: [
+        {
+          timeZone: ['Europe/London', 'America/New_York', 'Asia/Seoul'],
+          value: null,
+        },
+      ],
+      decorator: ProviderWrapper,
+    },
+  },
+  args: {
+    label: 'Label',
+    dateFormat: 'en-UK',
+    timeZone: 'Europe/London',
+  },
+  argTypes: {
+    value: { control: 'date' },
+  },
+};
+
+export default meta;
+
+export const Basic: StoryFn<typeof DatePickerInput> = props => {
+  const [date, setDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (props.value && isValid(new Date(props.value))) {
+      setDate(new Date(props.value));
+    }
+  }, [props.value]);
+
+  const updateDate = (date: Date | null) => {
+    setDate(date);
+  };
+
+  return (
+    <>
+      <DatePickerInput {...props} value={date} setValue={updateDate} />
+      <b>Current date</b>
+      <span>{date?.toISOString()}</span>
+    </>
+  );
+};
+
+export const Generated = () => {};

packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.styles.ts

@@ -0,0 +1,4 @@
+
+import { css } from '@leafygreen-ui/emotion';
+
+export const baseStyles = css``;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DatePickerInputProps } from './DatePickerInput.types';
+
+// TODO: forwardRef
+export function DatePickerInput({}: DatePickerInputProps) {
+  return <div>your content here</div>;
+}
+
+DatePickerInput.displayName = 'DatePickerInput';

packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.types.ts

@@ -0,0 +1 @@
+export interface DatePickerInputProps {}

packages/date-picker/src/DatePicker/DatePickerInput/index.ts

@@ -0,0 +1,3 @@
+
+export  { DatePickerInput } from './DatePickerInput';
+export { DatePickerInputProps } from './DatePickerInput.types';

packages/date-picker/src/utils/isValidDate.spec.ts → packages/date-picker/src/utils/isValidDate/isValidDate.spec.ts

@@ -1,4 +1,4 @@
-import { isValidDate } from './isValidDate';
+import { isValidDate } from '.';
 
 describe('packages/date-picker/utils/isValidDate', () => {
   test('us format is valid', () => {

packages/date-picker/src/utils/isValidLocale.spec.ts → packages/date-picker/src/utils/isValidLocale/isValidLocale.spec.ts

@@ -1,4 +1,4 @@
-import { isValidLocale } from './isValidLocale';
+import { isValidLocale } from '.';
 
 describe('packages/date-picker/utils/isValidLocale', () => {
   test('en-US is valid', () => {

packages/date-picker/src/utils/isValidSegment/index.ts

@@ -0,0 +1,9 @@
+import { isUndefined } from 'lodash';
+
+import { DateSegmentValue } from '../../DateInputSegment';
+
+/**
+ * Returns whether a given value is a valid segment value
+ */
+export const isValidSegment = (segment?: DateSegmentValue): segment is number =>
+  !isUndefined(segment) && !isNaN(Number(segment));

packages/date-picker/src/utils/isZeroLike/index.ts

@@ -0,0 +1,3 @@
+/** Returns whether the provided value is some form of zero value */
+export const isZeroLike = (val: any) =>
+  !val || isNaN(val) || ['', '0', '00', 0].includes(val);

packages/date-picker/src/utils/newDateFromSegments/index.ts

@@ -0,0 +1,19 @@
+import { DateSegmentsState } from '../../DateInputBox';
+import { isValidSegment } from '../isValidSegment';
+
+/** Constructs a date object from day, month, year segments */
+export const newDateFromSegments = (
+  segments: DateSegmentsState,
+): Date | undefined => {
+  if (segments && Object.values(segments).every(isValidSegment)) {
+    const { day, month, year } = segments;
+    return new Date(
+      year as number,
+      (month as number) - 1,
+      day as number,
+      0,
+      0,
+      0,
+    );
+  }
+};

packages/date-picker/src/utils/toTimeZone/index.ts

@@ -0,0 +1,22 @@
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+
+/**
+ * Converts a date in the client's time zone to
+ */
+export const toTimeZone = (clientDate: Date | string, timeZone: string) => {
+  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const utc = zonedTimeToUtc(clientDate, clientTz);
+  const tz = utcToZonedTime(utc, timeZone);
+  return tz;
+};
+
+/** Converts a date from a given time zone to the client's time zone */
+export const toClientTimeZone = (
+  sourceDate: Date | string,
+  sourceTimeZone: string,
+) => {
+  const clientTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const utc = zonedTimeToUtc(sourceDate, sourceTimeZone);
+  const client = utcToZonedTime(utc, clientTz);
+  return client;
+};