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

@@ -2258,6 +2258,15 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@leafygreen-ui/lib@^10.4.3":
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/lib/-/lib-10.4.3.tgz#f5ebdabc82922067adee8f37833237685bb1b1a8"
+  integrity sha512-p5BtXHeQsvLnnrN0eunPFZeaMtW9z7Mbvm2WOS9lvnAySj8xZp5Vn9Y3XjyYLbPhpGVBhhOAJFP3YMxbP9DKgg==
+  dependencies:
+    "@storybook/csf" "^0.1.0"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"