Add date field component (#27)

* Add date field component

* Date field component

* Fix tests

* Add date field to react

Author: fcollonval

packages/components/.eslintrc.js

@@ -12,17 +12,6 @@ module.exports = {
   },
   plugins: ['@typescript-eslint'],
   rules: {
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        selector: 'interface',
-        format: ['PascalCase'],
-        custom: {
-          regex: '^I[A-Z]',
-          match: true
-        }
-      }
-    ],
     '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-namespace': 'off',

packages/components/jest.config.js

@@ -1,5 +1,15 @@
-const config = {
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  // preset: 'ts-jest/presets/default-esm',
+  testEnvironment: 'node',
   testMatch: ['**/?(*.)+(spec).ts']
+  // globals: {
+  //   'ts-jest': {
+  //     useESM: true
+  //   }
+  // },
+  // moduleNameMapper: {
+  //   '^(\\.{1,2}/.*)\\.js$': '$1'
+  // }
 };
-
-module.exports = config;

packages/components/package.json

@@ -64,11 +64,8 @@
     "@storybook/html": "^6.4.3",
     "@storybook/manager-webpack5": "^6.4.3",
     "@storybook/theming": "^6.4.3",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.0.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "babel-jest": "^27.2.4",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.25.2",
@@ -81,6 +78,7 @@
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-transform-tagged-template": "0.0.3",
+    "ts-jest": "^27.0.0",
     "ts-loader": "^7.0.2",
     "tslib": "^2.1.0",
     "typescript": "~4.3.5",

packages/components/src/converters.ts

@@ -0,0 +1,35 @@
+import { ValueConverter } from '@microsoft/fast-element';
+
+/**
+ * A {@link ValueConverter} that converts to and from `Date` values.
+ * @remarks
+ * This converter allows for nullable Date, returning `null` if the
+ * input was `null`, `undefined`, or a non-parsable date.
+ * @public
+ */
+export const nullableDateConverter: ValueConverter = {
+  toView(value?: Date | null): string | null {
+    if (value === null || value === undefined) {
+      return null;
+    }
+    const date = new Date(value);
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#return_value
+    return date.toString() === 'Invalid Date'
+      ? null
+      : `${date.getFullYear().toString().padStart(4, '0')}-${(
+          date.getMonth() + 1
+        )
+          .toString()
+          .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+  },
+
+  fromView(value?: string | null): Date | null {
+    if (value === null || value === undefined) {
+      return null;
+    }
+
+    const date = new Date(value);
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#return_value
+    return date.toString() === 'Invalid Date' ? null : date;
+  }
+};

packages/components/src/custom-elements.ts

@@ -14,6 +14,7 @@ import { jpCard } from './card/index';
 import { jpCheckbox } from './checkbox/index';
 import { jpCombobox } from './combobox/index';
 import { jpDataGrid, jpDataGridCell, jpDataGridRow } from './data-grid/index';
+import { jpDateField } from './date-field/index';
 import { jpDivider } from './divider/index';
 import { jpMenu } from './menu/index';
 import { jpMenuItem } from './menu-item/index';
@@ -53,6 +54,7 @@ import type { Card } from './card/index';
 import type { Checkbox } from './checkbox/index';
 import type { Combobox } from './combobox/index';
 import type { DataGrid, DataGridCell, DataGridRow } from './data-grid/index';
+import type { DateField } from './date-field/index';
 import type { Divider } from './divider/index';
 import type { Menu } from './menu/index';
 import type { MenuItem } from './menu-item/index';
@@ -93,6 +95,7 @@ export {
   jpDataGrid,
   jpDataGridCell,
   jpDataGridRow,
+  jpDateField,
   jpDivider,
   jpMenu,
   jpMenuItem,
@@ -140,6 +143,7 @@ export const allComponents = {
   jpDataGrid,
   jpDataGridCell,
   jpDataGridRow,
+  jpDateField,
   jpDivider,
   jpMenu,
   jpMenuItem,

packages/components/src/date-field/date-field.form-associated.ts

@@ -0,0 +1,14 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+
+class _DateField extends FoundationElement {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface _DateField extends FormAssociated {}
+
+/**
+ * A form-associated base class for the {@link @jupyter-notebook/web-components#(DateField:class)} component.
+ *
+ * @internal
+ */
+export class FormAssociatedDateField extends FormAssociated(_DateField) {
+  proxy = document.createElement('input');
+}