init date picker types

Author: TheSonOfThomp

packages/date-picker/package.json

@@ -1,5 +1,5 @@
 {
- "name": "@leafygreen-ui/date-picker",
+  "name": "@leafygreen-ui/date-picker",
   "version": "0.1.0",
   "description": "LeafyGreen UI Kit Date Picker",
   "main": "./dist/index.js",
@@ -15,8 +15,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/emotion": "^4.0.4",
-    "@leafygreen-ui/lib": "^10.4.0"
+    "@leafygreen-ui/emotion": "^4.0.7",
+    "@leafygreen-ui/lib": "^10.4.3",
+    "@leafygreen-ui/tokens": "^2.1.4"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "^3.1.6"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/date-picker",
   "repository": {

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
-// TODO: forwardRef
-export function DatePicker({}) {
+import { DatePickerProps } from './DatePicker.types';
+
+// eslint-disable-next-line no-empty-pattern
+export const DatePicker = forwardRef(({}: DatePickerProps) => {
   return <div>your content here</div>;
-}
+});
 
 DatePicker.displayName = 'DatePicker';

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

@@ -1 +1,25 @@
-export interface DatePickerProps {}
+import { BaseDatePickerProps } from 'src/types';
+
+export interface DatePickerProps extends BaseDatePickerProps {
+  /** The initial selected date. Ignored if `value` is provided */
+  initialValue: string | Date;
+
+  /** The selected date */
+  value: string | Date;
+
+  /**
+   * A Callback fired when the user makes a value change.
+   * Fired on click of a new date in the menu, or on keydown if the input contains a valid date
+   *
+   * Callback date argument will be a Date object in ISO-8601 format, and in UTC time.
+   */
+  onChange: (value: Date) => void;
+
+  /**
+   * A callback fired when validation should run, based on our [form validation guidelines](https://www.mongodb.design/foundation/forms/#form-validation-error-handling).
+   * Use this callback to compute the correct `state` value.
+   *
+   * Callback date argument will be a Date object in ISO 8601 format, and in UTC time.
+   */
+  handleValidation: (value: Date) => void;
+}

packages/date-picker/src/types.ts

@@ -0,0 +1,69 @@
+import { DarkModeProps } from '@leafygreen-ui/lib';
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+const Size = {
+  xsmall: 'xsmall',
+  small: 'small',
+  default: 'default',
+  large: 'large',
+};
+type Size = typeof Size[keyof typeof Size];
+
+export interface BaseDatePickerProps extends DarkModeProps {
+  /**
+   * A label for the input
+   */
+  label: string;
+
+  /**
+   * Sets the _presentation format_ for the displayed date.
+   * Fallback to the user’s browser preference (if supported), otherwise ISO-8601.
+   *
+   * Currently only the following values are officially supported.
+   * Other valid [Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
+   * strings may work, however no assurances are made.
+   *
+   * @enum 'en-US' | 'en-UK' | 'iso8601'
+   *
+   * @default 'iso8601'
+   */
+  dateFormat?: string;
+
+  /**
+   * A valid IANA timezone string, or UTC offset.
+   * Sets the _presentation time zone_ for the displayed date.
+   * Fallback to the user’s browser preference (if available), otherwise UTC.
+   *
+   * @default 'utc'
+   */
+  timeZone?: string;
+
+  /** The earliest date accepted */
+  min?: string | Date;
+
+  /** The latest date accepted */
+  max?: string | Date;
+
+  /**
+   * The base font size of the input. Inherits from the nearest LeafyGreenProvider
+   */
+  baseFontSize?: BaseFontSize;
+
+  /**
+   * Whether the input is disabled. Note: will not set the `disabled` attribute on an input
+   */
+  disabled?: boolean;
+
+  /** The size of the input */
+  size?: Size;
+
+  /**
+   * Whether to show an error message
+   */
+  state?: 'unset' | 'error';
+
+  /**
+   * A message to show in red underneath the input when in an error state
+   */
+  errorMessage?: string;
+}

packages/date-picker/tsconfig.json

@@ -18,8 +18,14 @@
     {
       "path": "../emotion"
     },
+    {
+      "path": "../leafygreen-provider"
+    },
     {
       "path": "../lib"
+    },
+    {
+      "path": "../tokens"
     }
   ]
 }

yarn.lock

@@ -6856,7 +6856,7 @@ camelcase@^7.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048"
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
-caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001503:
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001503:
   version "1.0.30001519"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
   integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==