feat(datepicker): step 1, component with no style

packages/components/datepicker/.gitignore

@@ -0,0 +1,33 @@
+dist/
+custom-elements/
+custom-elements-bundle/
+www/
+loader/
+docs-api
+src/components.d.ts
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+screenshot/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+src/**/readme.md

packages/components/datepicker/.npmignore

@@ -0,0 +1,4 @@
+!dist/
+!loader/
+!docs-api/
+src/

packages/components/datepicker/THIRD-PARTY-LICENCES

@@ -0,0 +1,5 @@
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file
+
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file

packages/components/datepicker/documentation/specifications/specifications-datepicker-contents.mdx

@@ -0,0 +1,3 @@
+| Name    | default | Description |
+|---------|---------|-------------|
+| -       | ''      |             |

packages/components/datepicker/documentation/specifications/specifications-datepicker-events.mdx

@@ -0,0 +1 @@
+_none_

packages/components/datepicker/documentation/specifications/specifications-datepicker-methods.mdx

@@ -0,0 +1 @@
+_none_

packages/components/datepicker/documentation/specifications/specifications-datepicker-properties.mdx

@@ -0,0 +1,3 @@
+| Name | Type | default | Description |
+|------|------|---------|-------------|
+|      |      |         |             |

packages/components/datepicker/documentation/specifications/specifications-datepicker-tests.mdx

@@ -0,0 +1 @@
+_none_

packages/components/datepicker/documentation/specifications/specifications-datepicker.mdx

@@ -0,0 +1,12 @@
+import {Description} from '@storybook/addon-docs';
+import Specs from './spec.md';
+import SpecsDatepickerContents from './specifications-datepicker-contents.mdx';
+import SpecsDatepickerTests from './specifications-datepicker-tests.mdx';
+
+<Description>{Specs}</Description>
+
+## Contents
+<SpecsDatepickerContents />
+
+## Tests
+<SpecsDatepickerTests />

packages/components/datepicker/jest.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from '@jest/types';
+import { OdsGetJestConfig } from '@ovhcloud/ods-common-testing';
+
+const args = process.argv.slice(2);
+
+/**
+ * synchronous config for jest.
+ *
+ * example with async config :
+ * ```typescript
+ * export default async (): Promise<Config.InitialOptions> => {
+ *   return {
+ *     verbose: true,
+ *   };
+ * };
+ * ```
+ */
+// @ts-ignore until dependencies are fixed to one unique version of @jest/types
+const config: Config.InitialOptions = OdsGetJestConfig({
+  basePath: '<rootDir>/../../..',
+  args
+});
+
+export default config;

packages/components/datepicker/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ovhcloud/ods-component-datepicker",
+  "version": "15.0.1",
+  "description": "ODS Datepicker component",
+  "author": "OVH SAS",
+  "license": "Apache-2.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "scripts": {
+    "build:prod": "npm run build:stencil --if-present && npm run build:react --if-present && npm run build:vue --if-present",
+    "build": "echo \"use build:prod\"",
+    "build:stencil": "stencil build --docs --prod --config stencil.config.ts",
+    "build:react": "npm --prefix react run build",
+    "build:vue": "npm --prefix vue run build",
+    "watch": "stencil build --docs --watch --dev --config stencil.config.ts",
+    "start": "stencil build --docs --dev --watch --serve",
+    "ignore:rm": "git clean -Xdf",
+    "generate": "stencil generate",
+    "doc:api": "typedoc",
+    "generate:licence": "npx generate-license-file --input package.json --output THIRD-PARTY-LICENCES --overwrite",
+    "test": "yarn run test:spec && yarn run test:e2e",
+    "test:spec": "stencil test --spec --config stencil.config.ts --coverage",
+    "test:spec:ci": "stencil test --config stencil.config.ts  --spec --ci --coverage",
+    "test:e2e": "stencil test --e2e --config stencil.config.ts",
+    "test:e2e:screenshot": "stencil test --e2e --screenshot --config stencil.config.ts --passWithNoTests",
+    "test:e2e:screenshot:update": "stencil test --e2e --screenshot --config stencil.config.ts --update-screenshot --passWithNoTests",
+    "test:e2e:ci": "stencil test --config stencil.config.ts --e2e --ci",
+    "test:e2e:ci:screenshot": "stencil test --config stencil.config.ts --e2e --ci --screenshot --passWithNoTests",
+    "test:e2e:ci:screenshot:update": "stencil test --config stencil.config.ts --e2e --ci --screenshot --update-screenshot --passWithNoTests"
+  },
+  "dependencies": {
+    "@ovhcloud/ods-common-core": "^15.0.1",
+    "@ovhcloud/ods-common-stencil": "^15.0.1",
+    "@ovhcloud/ods-common-theming": "^15.0.1",
+    "@ovhcloud/ods-component-text": "^15.0.1",
+    "@types/vanillajs-datepicker": "^1.2.2",
+    "vanillajs-datepicker": "^1.3.3"
+  },
+  "devDependencies": {
+    "@ovhcloud/ods-common-testing": "^15.0.1",
+    "@ovhcloud/ods-component-input": "^15.0.1",
+    "@ovhcloud/ods-component-link": "^15.0.1",
+    "@ovhcloud/ods-component-textarea": "^15.0.1",
+    "@ovhcloud/ods-component-tooltip": "^15.0.1",
+    "@ovhcloud/ods-stencil-dev": "^15.0.1"
+  }
+}

packages/components/datepicker/react/.gitignore

@@ -0,0 +1,2 @@
+dist/
+src/

packages/components/datepicker/react/.npmignore

@@ -0,0 +1,2 @@
+!dist/
+src/

packages/components/datepicker/react/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@ovhcloud/ods-component-datepicker-react",
+  "version": "15.0.1",
+  "private": true,
+  "description": "React specific wrapper for ods",
+  "keywords": [],
+  "author": "OVH SAS",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rimraf dist",
+    "compile": "npm run compile:esm && npm run compile:cjs",
+    "compile:esm": "tsc -p tsconfig.json",
+    "compile:cjs": "tsc -p tsconfig.cjs.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "dependencies": {
+    "@ovhcloud/ods-component-datepicker": "^15.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
+  },
+  "devDependencies": {
+    "@ovhcloud/ods-react-dev": "^15.0.1"
+  }
+}

packages/components/datepicker/react/tsconfig.cjs.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "module": "CommonJS",
+    "declaration": false,
+    "declarationDir": null
+  }
+}

packages/components/datepicker/react/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "declarationDir": "dist/types"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

packages/components/datepicker/src/components/osds-datepicker/constants/default-attributes.ts

@@ -0,0 +1,14 @@
+import { OdsDatepickerAttribute } from '../interfaces/attributes';
+
+const DEFAULT_ATTRIBUTE: OdsDatepickerAttribute = Object.freeze({
+  clearable: false,
+  disabled: false,
+  error: '',
+  format: 'dd/mm/yyyy',
+  placeholder: '',
+  value: undefined,
+});
+
+export {
+  DEFAULT_ATTRIBUTE,
+};

packages/components/datepicker/src/components/osds-datepicker/core/controller.ts

@@ -0,0 +1,49 @@
+import type { OsdsDatepicker } from '../osds-datepicker';
+import { OdsLogger } from '@ovhcloud/ods-common-core';
+
+/**
+ * common controller logic for input component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+class OdsDatepickerController {
+  private readonly component: OsdsDatepicker;
+  private readonly logger = new OdsLogger('OdsDatepickerController');
+
+  constructor(component: OsdsDatepicker) {
+    this.component = component;
+  }
+
+  onFocus() {
+    this.component.hasFocus = true;
+    this.component.emitFocus();
+  }
+
+  onChange(newValue: Date | undefined, value?: Date) {
+    this.logger.debug(`[datepicker=${newValue}]`, 'value changed', { newValue, value });
+    if(!this.component.disabled) {
+      if (newValue === undefined || isNaN(newValue.getTime())) {
+        this.component.value = undefined;
+      } else {
+        this.component.value = newValue;
+      }
+    }
+  }
+
+  onBlur() {
+    this.component.hasFocus = false;
+    this.component.emitBlur();
+  }
+
+  onValueChange(value: Date, oldValue?: Date): void {
+    this.logger.debug(`[datepicker=${this.component.value}]`, 'value changed', { value, oldValue });
+    this.validateValue();
+  }
+
+  private validateValue() {
+    return true
+  }
+}
+
+export {
+  OdsDatepickerController,
+};

packages/components/datepicker/src/components/osds-datepicker/interfaces/attributes.ts

@@ -0,0 +1,30 @@
+interface OdsDatepickerAttribute {
+  /**
+   * Defines if the Datepicker should be clearable or not (displays a clear button)
+   */
+  clearable?: boolean;
+  /**
+   * Defines if the Datepicker should be disabled or not (lower opacity and not interactable)
+   */
+  disabled?: boolean;
+  /**
+   * Defines if the Datepicker should display an error message
+   */
+  error?: string;
+  /**
+   * Defines which format the Datepicker should be applying (supported formats: https://mymth.github.io/vanillajs-datepicker/#/date-string+format?id=date-format)
+   */
+  format?: string;
+  /**
+   * Defines if the Datepicker should display a placeholder message
+   */
+  placeholder?: string;
+  /**
+   * Defines the Datepicker's value (Date object)
+   */
+  value?: Date;
+}
+
+export {
+  OdsDatepickerAttribute,
+};

packages/components/datepicker/src/components/osds-datepicker/interfaces/events.ts

@@ -0,0 +1,25 @@
+import type { EventEmitter } from '@stencil/core';
+import type { OdsValidityState } from '@ovhcloud/ods-common-core';
+
+interface OdsDatepickerValueChangeEventDetail {
+  validity: OdsValidityState;
+  value: Date | undefined | null;
+  oldValue?: Date | undefined | null;
+}
+
+type OdsDatepickerValueChangeEvent = CustomEvent<OdsDatepickerValueChangeEventDetail>;
+
+interface OdsDatepickerEvent {
+  /** Triggered on blur */
+  odsDatepickerBlur: EventEmitter<void>;
+  /** Triggered on focus */
+  odsDatepickerFocus: EventEmitter<void>;
+  /** Triggered on value change */
+  odsValueChange: EventEmitter<OdsDatepickerValueChangeEventDetail>;
+}
+
+export {
+  OdsDatepickerEvent,
+  OdsDatepickerValueChangeEvent,
+  OdsDatepickerValueChangeEventDetail,
+};

packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.screenshot.ts

@@ -0,0 +1,48 @@
+import type { E2EPage } from '@stencil/core/testing';
+import type { OdsDatepickerAttribute } from './interfaces/attributes';
+import { newE2EPage } from '@stencil/core/testing';
+import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
+
+describe('e2e:osds-datepicker', () => {
+  let page: E2EPage;
+
+  async function setup({ attributes = {} }: { attributes?: Partial<OdsDatepickerAttribute>, html?: string } = {}) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsDatepickerAttribute>(attributes, DEFAULT_ATTRIBUTE);
+
+    page = await newE2EPage();
+    await page.setContent(`
+      <osds-datepicker ${odsStringAttributes2Str(stringAttributes)}></osds-datepicker>
+    `);
+    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+  }
+
+  const attributeConfigurations = [
+    {},
+    { format: `mm/dd/yyyy` },
+    { error: `An error occured.` },
+    { placeholder: `placeholder`, error: `An error occured.` },
+  ];
+
+  describe('screenshots', () => {
+    attributeConfigurations.forEach(( attributes ) => {
+      const attributeDescription = Object.keys(attributes).join(' & ');
+
+      it(`${attributeDescription}`, async () => {
+        await setup({ attributes });
+
+        await page.waitForChanges();
+
+        await page.evaluate(() => {
+          const element = document.querySelector('osds-datepicker') as HTMLElement;
+          return { width: element.clientWidth, height: element.clientHeight };
+        });
+
+        await page.setViewport({ width: 600, height:600 });
+
+        const results = await page.compareScreenshot('datepicker', { fullPage: false, omitBackground: true });
+        expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 });
+      });
+    });
+  });
+});