feat: Create datetime component for forms (#243)

* chore: Add dayjs as a peer dependency

* feat: Add `on-click-outside` modifier

* feat: Add initializer for Dayjs plugins

* feat: Copy datetime components from existing ember-nrg-ui

* feat: Use TypeScript for datetime components

* chore: Update next/previous icons

* refactor: Update classes and styling

* chore: Simplify template

* chore: Resolve template linting errors

* feat(datetime): Allow parsing of custom formats from input

* feat(bound-value): Declare `getDefaultValue` as instance member function

* chore: Allow '-**' directories to be imported

* chore: Add exports for `Datetime` component

* chore: Add tests for `Datetime` component

* chore: "Resolve" Glint template type error

* feat: Add `Datetime` component to form field

* style(calendar): Fix border rounding

apps/docs-app/app/components/f/form/datetime.gts

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import Datetime from '@nrg-ui/core/components/form/datetime';
+import bind from '@nrg-ui/core/helpers/bind';
+
+export default class extends Component {
+  @tracked
+  value;
+
+  <template>
+    <Datetime class="mt-3" @binding={{bind this "value"}} @type="datetime" />
+  </template>
+}

apps/docs-app/app/router.ts

@@ -20,6 +20,7 @@ Router.map(function () {
     this.route('form', function () {
       this.route('checkbox');
       this.route('checkbox-group');
+      this.route('datetime');
       this.route('phone-input');
       this.route('radio-group');
       this.route('select');

apps/docs-app/app/templates/components.hbs

@@ -16,6 +16,7 @@
     <Sidebar.Group @header="Forms">
       <:group as |Item|>
         <Item @name="Form" @route="components.form.index" />
+        <Item @name="Datetime" @route="components.form.datetime" />
         <Item @name="Checkbox" @route="components.form.checkbox" />
         <Item @name="Checkbox Group" @route="components.form.checkbox-group" />
         <Item @name="Phone Input" @route="components.form.phone-input" />

apps/docs-app/app/templates/components/form/datetime.hbs

@@ -0,0 +1,5 @@
+{{page-title "Datetime"}}
+
+<div class="container mx-auto">
+  <F::Form::Datetime />
+</div>

apps/test-app/package.json

@@ -72,6 +72,7 @@
     "@typescript-eslint/parser": "^6.21.0",
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^8.2.2",
+    "dayjs": "^1.11.13",
     "ember-auto-import": "^2.7.3",
     "ember-cli": "~5.9.0",
     "ember-cli-app-version": "^6.0.1",