From 15b5f0e7a8a8d2646d750e0016183fc38f6c36b7 Mon Sep 17 00:00:00 2001 From: Leo Largillet Date: Wed, 13 Sep 2023 09:46:23 +0200 Subject: [PATCH] feat(datepicker): step 1, component with no style --- packages/components/datepicker/.gitignore | 33 ++++ packages/components/datepicker/.npmignore | 4 + packages/components/datepicker/CHANGELOG.md | 0 .../datepicker/THIRD-PARTY-LICENCES | 5 + .../documentation/specifications/spec.md | 0 .../specifications-datepicker-contents.mdx | 3 + .../specifications-datepicker-events.mdx | 1 + .../specifications-datepicker-methods.mdx | 1 + .../specifications-datepicker-properties.mdx | 3 + .../specifications-datepicker-tests.mdx | 1 + .../specifications-datepicker.mdx | 12 ++ packages/components/datepicker/jest.config.ts | 24 +++ packages/components/datepicker/package.json | 52 ++++++ .../components/datepicker/react/.gitignore | 2 + .../components/datepicker/react/.npmignore | 2 + .../components/datepicker/react/CHANGELOG.md | 0 .../components/datepicker/react/package.json | 32 ++++ .../datepicker/react/tsconfig.cjs.json | 9 + .../components/datepicker/react/tsconfig.json | 8 + .../constants/default-attributes.ts | 14 ++ .../osds-datepicker/core/controller.ts | 49 ++++++ .../osds-datepicker/interfaces/attributes.ts | 30 ++++ .../osds-datepicker/interfaces/events.ts | 25 +++ .../osds-datepicker.e2e.screenshot.ts | 48 ++++++ .../osds-datepicker/osds-datepicker.e2e.ts | 72 ++++++++ .../osds-datepicker/osds-datepicker.scss | 51 ++++++ .../osds-datepicker/osds-datepicker.spec.ts | 111 ++++++++++++ .../osds-datepicker/osds-datepicker.tsx | 160 ++++++++++++++++++ .../components/osds-datepicker/public-api.ts | 2 + .../styles/osds-datepicker.color.scss | 27 +++ .../styles/osds-datepicker.mixins.scss | 13 ++ .../styles/osds-datepicker.size.scss | 7 + .../styles/osds-datepicker.typography.scss | 16 ++ .../src/docs/osds-datepicker/usage.mdx | 12 ++ .../components/datepicker/src/global.dev.ts | 23 +++ .../components/datepicker/src/global.prod.ts | 5 + .../components/datepicker/src/global.test.ts | 10 ++ packages/components/datepicker/src/global.ts | 9 + packages/components/datepicker/src/index.html | 26 +++ packages/components/datepicker/src/index.ts | 1 + .../components/datepicker/stencil.config.ts | 44 +++++ .../components/datepicker/tsconfig.dev.json | 6 + packages/components/datepicker/tsconfig.json | 6 + .../components/datepicker/tsconfig.prod.json | 6 + .../components/datepicker/tsconfig.test.json | 6 + packages/components/datepicker/typedoc.json | 7 + packages/components/datepicker/vue/.gitignore | 2 + packages/components/datepicker/vue/.npmignore | 2 + .../components/datepicker/vue/CHANGELOG.md | 0 .../components/datepicker/vue/package.json | 31 ++++ .../datepicker/vue/tsconfig.cjs.json | 9 + .../components/datepicker/vue/tsconfig.json | 8 + .../datepicker.specifications.stories.mdx | 13 ++ .../datepicker.web-component.stories.page.mdx | 17 ++ .../datepicker.web-components.stories.ts | 60 +++++++ yarn.lock | 56 ++++++ 56 files changed, 1176 insertions(+) create mode 100644 packages/components/datepicker/.gitignore create mode 100644 packages/components/datepicker/.npmignore create mode 100644 packages/components/datepicker/CHANGELOG.md create mode 100644 packages/components/datepicker/THIRD-PARTY-LICENCES create mode 100644 packages/components/datepicker/documentation/specifications/spec.md create mode 100644 packages/components/datepicker/documentation/specifications/specifications-datepicker-contents.mdx create mode 100644 packages/components/datepicker/documentation/specifications/specifications-datepicker-events.mdx create mode 100644 packages/components/datepicker/documentation/specifications/specifications-datepicker-methods.mdx create mode 100644 packages/components/datepicker/documentation/specifications/specifications-datepicker-properties.mdx create mode 100644 packages/components/datepicker/documentation/specifications/specifications-datepicker-tests.mdx create mode 100644 packages/components/datepicker/documentation/specifications/specifications-datepicker.mdx create mode 100644 packages/components/datepicker/jest.config.ts create mode 100644 packages/components/datepicker/package.json create mode 100644 packages/components/datepicker/react/.gitignore create mode 100644 packages/components/datepicker/react/.npmignore create mode 100644 packages/components/datepicker/react/CHANGELOG.md create mode 100644 packages/components/datepicker/react/package.json create mode 100644 packages/components/datepicker/react/tsconfig.cjs.json create mode 100644 packages/components/datepicker/react/tsconfig.json create mode 100644 packages/components/datepicker/src/components/osds-datepicker/constants/default-attributes.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/core/controller.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/interfaces/attributes.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/interfaces/events.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.screenshot.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.scss create mode 100644 packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.spec.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.tsx create mode 100644 packages/components/datepicker/src/components/osds-datepicker/public-api.ts create mode 100644 packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.color.scss create mode 100644 packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.mixins.scss create mode 100644 packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.size.scss create mode 100644 packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.typography.scss create mode 100644 packages/components/datepicker/src/docs/osds-datepicker/usage.mdx create mode 100644 packages/components/datepicker/src/global.dev.ts create mode 100644 packages/components/datepicker/src/global.prod.ts create mode 100644 packages/components/datepicker/src/global.test.ts create mode 100644 packages/components/datepicker/src/global.ts create mode 100644 packages/components/datepicker/src/index.html create mode 100644 packages/components/datepicker/src/index.ts create mode 100644 packages/components/datepicker/stencil.config.ts create mode 100644 packages/components/datepicker/tsconfig.dev.json create mode 100644 packages/components/datepicker/tsconfig.json create mode 100644 packages/components/datepicker/tsconfig.prod.json create mode 100644 packages/components/datepicker/tsconfig.test.json create mode 100644 packages/components/datepicker/typedoc.json create mode 100644 packages/components/datepicker/vue/.gitignore create mode 100644 packages/components/datepicker/vue/.npmignore create mode 100644 packages/components/datepicker/vue/CHANGELOG.md create mode 100644 packages/components/datepicker/vue/package.json create mode 100644 packages/components/datepicker/vue/tsconfig.cjs.json create mode 100644 packages/components/datepicker/vue/tsconfig.json create mode 100644 packages/storybook/stories/components/datepicker/datepicker.specifications.stories.mdx create mode 100644 packages/storybook/stories/components/datepicker/datepicker.web-component.stories.page.mdx create mode 100644 packages/storybook/stories/components/datepicker/datepicker.web-components.stories.ts diff --git a/packages/components/datepicker/.gitignore b/packages/components/datepicker/.gitignore new file mode 100644 index 0000000000..d9e1d2628b --- /dev/null +++ b/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 diff --git a/packages/components/datepicker/.npmignore b/packages/components/datepicker/.npmignore new file mode 100644 index 0000000000..a93bc21a3f --- /dev/null +++ b/packages/components/datepicker/.npmignore @@ -0,0 +1,4 @@ +!dist/ +!loader/ +!docs-api/ +src/ diff --git a/packages/components/datepicker/CHANGELOG.md b/packages/components/datepicker/CHANGELOG.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/datepicker/THIRD-PARTY-LICENCES b/packages/components/datepicker/THIRD-PARTY-LICENCES new file mode 100644 index 0000000000..fbfb0992b6 --- /dev/null +++ b/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 diff --git a/packages/components/datepicker/documentation/specifications/spec.md b/packages/components/datepicker/documentation/specifications/spec.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/datepicker/documentation/specifications/specifications-datepicker-contents.mdx b/packages/components/datepicker/documentation/specifications/specifications-datepicker-contents.mdx new file mode 100644 index 0000000000..8044ac46ab --- /dev/null +++ b/packages/components/datepicker/documentation/specifications/specifications-datepicker-contents.mdx @@ -0,0 +1,3 @@ +| Name | default | Description | +|---------|---------|-------------| +| - | '' | | diff --git a/packages/components/datepicker/documentation/specifications/specifications-datepicker-events.mdx b/packages/components/datepicker/documentation/specifications/specifications-datepicker-events.mdx new file mode 100644 index 0000000000..61b93206c8 --- /dev/null +++ b/packages/components/datepicker/documentation/specifications/specifications-datepicker-events.mdx @@ -0,0 +1 @@ +_none_ diff --git a/packages/components/datepicker/documentation/specifications/specifications-datepicker-methods.mdx b/packages/components/datepicker/documentation/specifications/specifications-datepicker-methods.mdx new file mode 100644 index 0000000000..61b93206c8 --- /dev/null +++ b/packages/components/datepicker/documentation/specifications/specifications-datepicker-methods.mdx @@ -0,0 +1 @@ +_none_ diff --git a/packages/components/datepicker/documentation/specifications/specifications-datepicker-properties.mdx b/packages/components/datepicker/documentation/specifications/specifications-datepicker-properties.mdx new file mode 100644 index 0000000000..ffbff6cf2e --- /dev/null +++ b/packages/components/datepicker/documentation/specifications/specifications-datepicker-properties.mdx @@ -0,0 +1,3 @@ +| Name | Type | default | Description | +|------|------|---------|-------------| +| | | | | diff --git a/packages/components/datepicker/documentation/specifications/specifications-datepicker-tests.mdx b/packages/components/datepicker/documentation/specifications/specifications-datepicker-tests.mdx new file mode 100644 index 0000000000..61b93206c8 --- /dev/null +++ b/packages/components/datepicker/documentation/specifications/specifications-datepicker-tests.mdx @@ -0,0 +1 @@ +_none_ diff --git a/packages/components/datepicker/documentation/specifications/specifications-datepicker.mdx b/packages/components/datepicker/documentation/specifications/specifications-datepicker.mdx new file mode 100644 index 0000000000..ceda5af585 --- /dev/null +++ b/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'; + +{Specs} + +## Contents + + +## Tests + diff --git a/packages/components/datepicker/jest.config.ts b/packages/components/datepicker/jest.config.ts new file mode 100644 index 0000000000..e38c226942 --- /dev/null +++ b/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 => { + * return { + * verbose: true, + * }; + * }; + * ``` + */ +// @ts-ignore until dependencies are fixed to one unique version of @jest/types +const config: Config.InitialOptions = OdsGetJestConfig({ + basePath: '/../../..', + args +}); + +export default config; diff --git a/packages/components/datepicker/package.json b/packages/components/datepicker/package.json new file mode 100644 index 0000000000..650ea09e85 --- /dev/null +++ b/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" + } +} diff --git a/packages/components/datepicker/react/.gitignore b/packages/components/datepicker/react/.gitignore new file mode 100644 index 0000000000..496f9a49cd --- /dev/null +++ b/packages/components/datepicker/react/.gitignore @@ -0,0 +1,2 @@ +dist/ +src/ diff --git a/packages/components/datepicker/react/.npmignore b/packages/components/datepicker/react/.npmignore new file mode 100644 index 0000000000..3753d5f6a1 --- /dev/null +++ b/packages/components/datepicker/react/.npmignore @@ -0,0 +1,2 @@ +!dist/ +src/ diff --git a/packages/components/datepicker/react/CHANGELOG.md b/packages/components/datepicker/react/CHANGELOG.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/datepicker/react/package.json b/packages/components/datepicker/react/package.json new file mode 100644 index 0000000000..79b8f294f2 --- /dev/null +++ b/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" + } +} diff --git a/packages/components/datepicker/react/tsconfig.cjs.json b/packages/components/datepicker/react/tsconfig.cjs.json new file mode 100644 index 0000000000..164b6b818e --- /dev/null +++ b/packages/components/datepicker/react/tsconfig.cjs.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "dist/cjs", + "module": "CommonJS", + "declaration": false, + "declarationDir": null + } +} diff --git a/packages/components/datepicker/react/tsconfig.json b/packages/components/datepicker/react/tsconfig.json new file mode 100644 index 0000000000..816d5b7e90 --- /dev/null +++ b/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"] +} diff --git a/packages/components/datepicker/src/components/osds-datepicker/constants/default-attributes.ts b/packages/components/datepicker/src/components/osds-datepicker/constants/default-attributes.ts new file mode 100644 index 0000000000..3c0710d8da --- /dev/null +++ b/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, +}; diff --git a/packages/components/datepicker/src/components/osds-datepicker/core/controller.ts b/packages/components/datepicker/src/components/osds-datepicker/core/controller.ts new file mode 100644 index 0000000000..d11a7b965c --- /dev/null +++ b/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, +}; diff --git a/packages/components/datepicker/src/components/osds-datepicker/interfaces/attributes.ts b/packages/components/datepicker/src/components/osds-datepicker/interfaces/attributes.ts new file mode 100644 index 0000000000..ebe821f089 --- /dev/null +++ b/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, +}; diff --git a/packages/components/datepicker/src/components/osds-datepicker/interfaces/events.ts b/packages/components/datepicker/src/components/osds-datepicker/interfaces/events.ts new file mode 100644 index 0000000000..ed0ef880be --- /dev/null +++ b/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; + +interface OdsDatepickerEvent { + /** Triggered on blur */ + odsDatepickerBlur: EventEmitter; + /** Triggered on focus */ + odsDatepickerFocus: EventEmitter; + /** Triggered on value change */ + odsValueChange: EventEmitter; +} + +export { + OdsDatepickerEvent, + OdsDatepickerValueChangeEvent, + OdsDatepickerValueChangeEventDetail, +}; diff --git a/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.screenshot.ts b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.screenshot.ts new file mode 100644 index 0000000000..7a6e56198b --- /dev/null +++ b/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, html?: string } = {}) { + const stringAttributes = odsComponentAttributes2StringAttributes(attributes, DEFAULT_ATTRIBUTE); + + page = await newE2EPage(); + await page.setContent(` + + `); + 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 }); + }); + }); + }); +}); diff --git a/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.ts b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.ts new file mode 100644 index 0000000000..b1a914f024 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.e2e.ts @@ -0,0 +1,72 @@ +import type { E2EElement, 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; + let el: E2EElement; + + async function setup({ attributes }: { attributes: Partial }) { + const stringAttributes = odsComponentAttributes2StringAttributes(attributes, DEFAULT_ATTRIBUTE); + + page = await newE2EPage(); + await page.setContent(``); + await page.evaluate(() => document.body.style.setProperty('margin', '0px')); + + el = await page.find('osds-datepicker'); + } + + it('should render', async () => { + await setup({ attributes: {} }); + expect(el).not.toBeNull(); + expect(el).toHaveClass('hydrated'); + }); + + it('should display a datepicker when focused', async () => { + await setup({ attributes: {} }); + await el.click(); + const datepicker = await page.find('osds-datepicker >>> .datepicker'); + expect(datepicker).not.toBeNull(); + }); + + it('should allow datepicker to be cleared when clearable is true', async () => { + await setup({ attributes: { clearable: true, value: new Date('2023-09-11') } }); + await el.click(); + const clearButton = await page.find('osds-datepicker >>> osds-input >>> osds-icon[name="close"]'); + await clearButton.click(); + expect(await el.getProperty('value')).toBe(undefined); + }); + + it('should be disabled when disabled attribute is true', async () => { + await setup({ attributes: { disabled: true } }); + const input = await page.find('osds-datepicker >>> osds-input'); + expect(input).toHaveAttribute('disabled'); + }); + + it('should update the value when date is selected', async () => { + await setup({ attributes: {} }); + let value = await el.getProperty('value'); + expect(value).toBe(undefined); + await el.click(); + await page.waitForChanges(); + const dateButton = await page.find('osds-datepicker >>> .datepicker .datepicker-grid .datepicker-cell:first-child'); + await dateButton.click(); + await page.waitForChanges(); + value = await el.getProperty('value'); + expect(value).not.toBe(undefined); + }); + + it('should format date according to format attribute', async () => { + await setup({ attributes: { format: 'yyyy/mm/dd' } }); + await el.click(); + await page.waitForChanges(); + const dateButton = await page.find('osds-datepicker >>> .datepicker .datepicker-grid .datepicker-cell:first-child'); + await dateButton.click(); + await page.waitForChanges(); + const inputElement = await page.find('osds-datepicker >>> osds-input'); + const inputValue = await inputElement.getProperty('value'); + expect(inputValue).toMatch(/^\d{4}\/\d{2}\/\d{2}$/); + }); +}); diff --git a/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.scss b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.scss new file mode 100644 index 0000000000..18c0b473b3 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.scss @@ -0,0 +1,51 @@ +@import 'styles/osds-datepicker.mixins'; +@import 'styles/osds-datepicker.color'; +@import 'styles/osds-datepicker.size'; +@import 'styles/osds-datepicker.typography'; +@import '~@ovhcloud/ods-common-theming/color/ods-theming-color'; +@import '~@ovhcloud/ods-common-theming/ods-theme'; + +// CSS targeted only for this component +// /!\ for theming purposes, it has to be done in theming files +// (i.e. packages/libraries/theming/...) +:host { + display: flex; + flex-direction: column; +} + +:host([inline]) { + width: fit-content; +} + +:host .osds-datepicker__hidden-input { + display: none; +} + +:host .datepicker { + display: none; +} + +:host([hasFocus]) { + .datepicker { + width: 50%; + max-width: clamp(36rem, 50%, 50%); + margin-top: var(--ods-size-04); + height: 0; + position: relative; + display: flex; + + .datepicker-picker { + width: 100%; + height: fit-content; + background: gray; + position: absolute; + } + } +} + +// apply the theme template for the component +@include ods-theme-component() { + @include osds-datepicker-theme-color(); + @include osds-datepicker-theme-size(); + @include osds-datepicker-theme-typography(); +} diff --git a/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.spec.ts b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.spec.ts new file mode 100644 index 0000000000..12b1c6b7f2 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.spec.ts @@ -0,0 +1,111 @@ +jest.mock('@types/vanillajs-datepicker'); + +import type { SpecPage } from '@stencil/core/testing'; +import type { OdsDatepickerAttribute } from './interfaces/attributes'; +import { newSpecPage } from '@stencil/core/testing'; +import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; +import { OsdsDatepicker } from './osds-datepicker'; + +describe('spec:osds-datepicker', () => { + let page: SpecPage; + let root: HTMLElement | undefined; + let instance: OsdsDatepicker; + + afterEach(() => { + jest.clearAllMocks(); + }); + + async function setup({ attributes = {} }: { attributes?: Partial } = {}) { + const stringAttributes = odsComponentAttributes2StringAttributes(attributes, DEFAULT_ATTRIBUTE); + + page = await newSpecPage({ + components: [OsdsDatepicker], + html: `My Datepicker`, + }); + + root = page.root; + instance = page.rootInstance; + } + + it('should render', async () => { + await setup({}); + expect(root?.shadowRoot).toBeTruthy(); + expect(instance).toBeTruthy(); + }); + + describe('attributes', () => { + const config = { + instance: () => instance, + page: () => page, + root: () => page.root, + wait: () => page.waitForChanges(), + }; + + describe('clearable', () => { + odsUnitTestAttribute({ + name: 'clearable', + defaultValue: DEFAULT_ATTRIBUTE.clearable, + newValue: true, + value: false, + setup: (value) => setup({ attributes: { ['clearable']: value } }), + ...config, + }); + }); + + describe('disabled', () => { + odsUnitTestAttribute({ + name: 'disabled', + defaultValue: DEFAULT_ATTRIBUTE.disabled, + newValue: true, + value: false, + setup: (value) => setup({ attributes: { ['disabled']: value } }), + ...config, + }); + }); + + describe('error', () => { + odsUnitTestAttribute({ + name: 'error', + defaultValue: DEFAULT_ATTRIBUTE.error, + newValue: 'error', + value: '', + setup: (value) => setup({ attributes: { ['error']: value } }), + ...config, + }); + }); + + describe('format', () => { + odsUnitTestAttribute({ + name: 'format', + defaultValue: DEFAULT_ATTRIBUTE.format, + newValue: 'dd/mm/yyyy', + value: 'yyyy-mm-dd', + setup: (value) => setup({ attributes: { ['format']: value } }), + ...config, + }); + }); + + describe('placeholder', () => { + odsUnitTestAttribute({ + name: 'placeholder', + defaultValue: DEFAULT_ATTRIBUTE.placeholder, + newValue: 'placeholder', + value: '', + setup: (value) => setup({ attributes: { ['placeholder']: value } }), + ...config, + }); + }); + + describe('value', () => { + odsUnitTestAttribute({ + name: 'value', + defaultValue: DEFAULT_ATTRIBUTE.value, + newValue: new Date('2023-09-11'), + value: undefined, + setup: (value) => setup({ attributes: { ['value']: value } }), + ...config, + }); + }); + }); +}); diff --git a/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.tsx b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.tsx new file mode 100644 index 0000000000..689436f12b --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/osds-datepicker.tsx @@ -0,0 +1,160 @@ +import type { EventEmitter } from '@stencil/core'; +import type { OdsDatepickerAttribute } from './interfaces/attributes'; +import type { OdsDatepickerEvent, OdsDatepickerValueChangeEventDetail } from './interfaces/events'; +import { Component, Element, Event, Host, h, Listen, Prop, State, Watch } from '@stencil/core'; +import { ODS_INPUT_TYPE } from '@ovhcloud/ods-component-input'; +import { ODS_ICON_NAME } from '@ovhcloud/ods-component-icon'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; +import { Datepicker } from 'vanillajs-datepicker' +import { OdsDatepickerController } from './core/controller'; + +/** + * @slot (unnamed) - Datepicker content + */ +@Component({ + tag: 'osds-datepicker', + styleUrl: 'osds-datepicker.scss', + shadow: true +}) +export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEvent { + controller: OdsDatepickerController = new OdsDatepickerController(this); + + @Element() el!: HTMLElement; + + @State() hasFocus = false; + + /** @see OdsDatepickerAttribute.clearable */ + @Prop({ reflect: true }) clearable?: boolean = DEFAULT_ATTRIBUTE.clearable; + + /** @see OdsDatepickerAttribute.disabled */ + @Prop({ reflect: true }) disabled?: boolean = DEFAULT_ATTRIBUTE.disabled; + + /** @see OdsDatepickerAttribute.error */ + @Prop({ reflect: true }) error?: string = DEFAULT_ATTRIBUTE.error; + + /** @see OdsDatepickerAttribute.format */ + @Prop({ reflect: true }) format?: string = DEFAULT_ATTRIBUTE.format; + + /** @see OdsDatepickerAttribute.placeholder */ + @Prop({ reflect: true }) placeholder?: string = DEFAULT_ATTRIBUTE.placeholder; + + /** @see OdsDatepickerAttribute.value */ + @Prop({ reflect: true, mutable: true }) value?: Date = DEFAULT_ATTRIBUTE.value; + + /** @see OdsDatepickerEvents.odsValueChange */ + @Event() odsValueChange!: EventEmitter; + + /** @see OdsDatepickerEvents.odsDatepickerBlur */ + @Event() odsDatepickerBlur!: EventEmitter; + + /** @see OdsDatepickerEvents.odsDatepickerFocus */ + @Event() odsDatepickerFocus!: EventEmitter; + + @Watch('value') + onValueChange(value: Date, oldValue?: Date) { + this.controller.onValueChange(value, oldValue); + } + + @Listen('odsValueChange', { target: 'body' }) + handleInputValueChange(event: CustomEvent) { + if (this.format && event.detail.value.length === this.format.length) { + this.onChange(new Date(Datepicker.parseDate(event.detail.value, this.format))) + } else if (event.detail.value.length === 0) { + this.onChange(undefined) + } + } + + /** + * @see OdsDatepickerBehavior.emitBlur + */ + emitBlur(): void { + this.odsDatepickerBlur.emit(); + } + + /** + * @see OdsDatepickerBehavior.emitFocus + */ + emitFocus(): void { + this.odsDatepickerFocus.emit(); + } + + /** + * @see OdsDatepickerBehavior.onBlur + */ + onBlur(): void { + this.controller.onBlur(); + } + + /** + * @see OdsDatepickerBehavior.onChange + */ + onChange(newValue: Date | undefined): void { + this.controller.onChange(newValue, this.value); + } + + /** + * @see OdsDatepickerBehavior.onFocus + */ + onFocus(): void { + this.controller.onFocus(); + } + + componentDidLoad() { + if(!this.el.shadowRoot) { + return; + } + + const datepickerElement = this.el.shadowRoot.querySelector('.osds-datepicker__hidden-input') as HTMLInputElement; + + if (!datepickerElement.getAttribute('initialized')) { + new Datepicker(datepickerElement, { + format: this.format, + }); + + datepickerElement.addEventListener('changeDate', (e: Event) => { + const customEvent = e as CustomEvent; + this.onChange(customEvent.detail.date); + }); + + datepickerElement.setAttribute('initialized', 'true'); + } + } + + formatDate(date?: Date | undefined) { + if (this.format && date) { + return Datepicker.formatDate(date, this.format); + } else { + return ''; + } + } + + render() { + const { + clearable, + disabled, + error, + hasFocus, + placeholder, + value, + } = this; + + return ( + this.onBlur(), + onFocus: () => this.onFocus(), + }}> + + + + ); + } +} diff --git a/packages/components/datepicker/src/components/osds-datepicker/public-api.ts b/packages/components/datepicker/src/components/osds-datepicker/public-api.ts new file mode 100644 index 0000000000..41a1c270b6 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/public-api.ts @@ -0,0 +1,2 @@ +export type { OdsDatepickerAttribute } from './interfaces/attributes'; +export { OsdsDatepicker } from './osds-datepicker'; diff --git a/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.color.scss b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.color.scss new file mode 100644 index 0000000000..6166f3f470 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.color.scss @@ -0,0 +1,27 @@ +@import '~@ovhcloud/ods-common-theming/color/ods-component-color'; +@import './osds-datepicker.mixins'; + +@mixin osds-datepicker-theme-color-variant-default() { + @include ods-and-all-hue-foreach-theme-color(( + color: '800', + background-color: '100' + )) using($colors) { + @include osds-datepicker-on-selected-host() { + //color: map_get($colors, color); + //background-color: map_get($colors, background-color); + } + } +} + +// Main CSS color theme mixin +@mixin osds-datepicker-theme-color() { + /** base colors */ + :host { + border-color: transparent; + } + + /** no variant specified: default variant colors */ + :not([variant]) { + @include osds-datepicker-theme-color-variant-default(); + } +} diff --git a/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.mixins.scss b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.mixins.scss new file mode 100644 index 0000000000..7cb2ccd3b4 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.mixins.scss @@ -0,0 +1,13 @@ +// general mixins and functions for the component + +@mixin osds-datepicker-on-selected-host() { + :host(&) { + @content; + } +} + +@mixin osds-datepicker-on-main-element() { + .datepicker__wrapper { + @content; + } +} diff --git a/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.size.scss b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.size.scss new file mode 100644 index 0000000000..058173e211 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.size.scss @@ -0,0 +1,7 @@ +@import './osds-datepicker.mixins'; +@import '~@ovhcloud/ods-common-theming/size/ods-component-size'; + +// Main CSS mixin for sizes +@mixin osds-datepicker-theme-size() { + +} diff --git a/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.typography.scss b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.typography.scss new file mode 100644 index 0000000000..9061940af6 --- /dev/null +++ b/packages/components/datepicker/src/components/osds-datepicker/styles/osds-datepicker.typography.scss @@ -0,0 +1,16 @@ +@import '~@ovhcloud/ods-common-theming/typography/ods-theming-typography'; +@import '~@ovhcloud/ods-common-theming/typography/ods-component-typography'; +@import './osds-datepicker.mixins'; + +// Main CSS mixin for typography +@mixin osds-datepicker-theme-typography() { + :host([size='md']) .datepicker__wrapper { + //$typography-properties: ods-get-typography-properties(body, '400'); + //font-family: ods-get-typography-property($typography-properties, font-family); + //font-size: ods-get-typography-property($typography-properties, font-size); + //font-style: ods-get-typography-property($typography-properties, font-style); + //font-weight: ods-get-typography-property($typography-properties, font-weight); + //letter-spacing: ods-get-typography-property($typography-properties, letter-spacing); + //line-height: ods-get-typography-property($typography-properties, line-height); + } +} diff --git a/packages/components/datepicker/src/docs/osds-datepicker/usage.mdx b/packages/components/datepicker/src/docs/osds-datepicker/usage.mdx new file mode 100644 index 0000000000..5faa3eb23c --- /dev/null +++ b/packages/components/datepicker/src/docs/osds-datepicker/usage.mdx @@ -0,0 +1,12 @@ +import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx'; + + + +## Usage + +### Default +Datepicker + +```html +Datepicker +``` diff --git a/packages/components/datepicker/src/global.dev.ts b/packages/components/datepicker/src/global.dev.ts new file mode 100644 index 0000000000..0f31bc8fb4 --- /dev/null +++ b/packages/components/datepicker/src/global.dev.ts @@ -0,0 +1,23 @@ +// ### +// global script file to include only in dev mode with the www dev server. +// it always has to include './components' and './global.ts' +// ### + +import './components'; +import './global'; +import { OdsLogger } from '@ovhcloud/ods-common-core'; + +// Input dependencies +import '@ovhcloud/ods-component-input'; +import '@ovhcloud/ods-component-icon'; + +const logger = new OdsLogger('global-dev'); +logger.log('init'); + +(window as any).globalMethod = async function () { + logger.log('globalMethod'); +}; + +(async () => { + await customElements.whenDefined('osds-datepicker'); +})(); diff --git a/packages/components/datepicker/src/global.prod.ts b/packages/components/datepicker/src/global.prod.ts new file mode 100644 index 0000000000..f4b6c50856 --- /dev/null +++ b/packages/components/datepicker/src/global.prod.ts @@ -0,0 +1,5 @@ +// ### +// global script file to include only in prod mode for build prod. +// it always has to include './global.ts' +// ### +import './global'; \ No newline at end of file diff --git a/packages/components/datepicker/src/global.test.ts b/packages/components/datepicker/src/global.test.ts new file mode 100644 index 0000000000..7a51cb775f --- /dev/null +++ b/packages/components/datepicker/src/global.test.ts @@ -0,0 +1,10 @@ +// ### +// global script file to include only in test mode. +// it always has to include './global.ts' +// ### + +import './global'; + +// Input dependencies +import '@ovhcloud/ods-component-input'; +import '@ovhcloud/ods-component-icon'; \ No newline at end of file diff --git a/packages/components/datepicker/src/global.ts b/packages/components/datepicker/src/global.ts new file mode 100644 index 0000000000..aea7c19f99 --- /dev/null +++ b/packages/components/datepicker/src/global.ts @@ -0,0 +1,9 @@ +// ### +// main global file to include in this package in any cases (dev and prod mode). +// it allows to initialize some stuff of the library, after the component itself +// ### + +import { OdsLogger } from '@ovhcloud/ods-common-core'; + +const logger = new OdsLogger('datepicker.global'); +logger.log('init'); diff --git a/packages/components/datepicker/src/index.html b/packages/components/datepicker/src/index.html new file mode 100644 index 0000000000..0a4cbb1c22 --- /dev/null +++ b/packages/components/datepicker/src/index.html @@ -0,0 +1,26 @@ + + + + + + Dev ods-datepicker + + + + + + + + + + + +

Hello

+ + + + diff --git a/packages/components/datepicker/src/index.ts b/packages/components/datepicker/src/index.ts new file mode 100644 index 0000000000..b1931e5e3d --- /dev/null +++ b/packages/components/datepicker/src/index.ts @@ -0,0 +1 @@ +export * from './components/osds-datepicker/public-api'; diff --git a/packages/components/datepicker/stencil.config.ts b/packages/components/datepicker/stencil.config.ts new file mode 100644 index 0000000000..8a39f4ce5e --- /dev/null +++ b/packages/components/datepicker/stencil.config.ts @@ -0,0 +1,44 @@ +import { Config } from '@stencil/core'; +import { getStencilConfig } from '@ovhcloud/ods-common-stencil'; +import * as jestConfig from './jest.config'; + +const args = process.argv.slice(2); + +export const config: Config = getStencilConfig({ + namespace: 'osds-datepicker', + args, + jestConfig: jestConfig.default, + reactOutput: { + componentCorePackage: '@ovhcloud/ods-component-datepicker', + excludeComponents: [ + 'osds-input', + 'osds-icon', + 'osds-spinner', + 'osds-textarea', + 'osds-link', + 'osds-tooltip', + 'osds-text', + ] + }, + vueOutput: { + componentCorePackage: '@ovhcloud/ods-component-datepicker', + excludeComponents: [ + 'osds-input', + 'osds-icon', + 'osds-spinner', + 'osds-textarea', + 'osds-link', + 'osds-tooltip', + 'osds-text', + ] + }, + dev: { + globalScript: 'src/global.dev.ts', + }, + prod: { + globalScript: 'src/global.prod.ts' + }, + test: { + globalScript: 'src/global.test.ts' + } +}); diff --git a/packages/components/datepicker/tsconfig.dev.json b/packages/components/datepicker/tsconfig.dev.json new file mode 100644 index 0000000000..73587a82c3 --- /dev/null +++ b/packages/components/datepicker/tsconfig.dev.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.dev.json", + "include": [ + "src" + ] +} diff --git a/packages/components/datepicker/tsconfig.json b/packages/components/datepicker/tsconfig.json new file mode 100644 index 0000000000..902306b6c2 --- /dev/null +++ b/packages/components/datepicker/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.json", + "include": [ + "src" + ] +} diff --git a/packages/components/datepicker/tsconfig.prod.json b/packages/components/datepicker/tsconfig.prod.json new file mode 100644 index 0000000000..71267ee2a3 --- /dev/null +++ b/packages/components/datepicker/tsconfig.prod.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.prod.json", + "include": [ + "src" + ] +} diff --git a/packages/components/datepicker/tsconfig.test.json b/packages/components/datepicker/tsconfig.test.json new file mode 100644 index 0000000000..2981dd3671 --- /dev/null +++ b/packages/components/datepicker/tsconfig.test.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.test.json", + "include": [ + "src" + ] +} diff --git a/packages/components/datepicker/typedoc.json b/packages/components/datepicker/typedoc.json new file mode 100644 index 0000000000..4d171e6925 --- /dev/null +++ b/packages/components/datepicker/typedoc.json @@ -0,0 +1,7 @@ +{ + "entryPoints": ["src"], + "out": "docs-api/ods-component-datepicker", + "tsconfig":"tsconfig.prod.json", + "exclude": "**/*+(index|.spec|.e2e|.d).ts", + "plugin": "none" +} diff --git a/packages/components/datepicker/vue/.gitignore b/packages/components/datepicker/vue/.gitignore new file mode 100644 index 0000000000..496f9a49cd --- /dev/null +++ b/packages/components/datepicker/vue/.gitignore @@ -0,0 +1,2 @@ +dist/ +src/ diff --git a/packages/components/datepicker/vue/.npmignore b/packages/components/datepicker/vue/.npmignore new file mode 100644 index 0000000000..3753d5f6a1 --- /dev/null +++ b/packages/components/datepicker/vue/.npmignore @@ -0,0 +1,2 @@ +!dist/ +src/ diff --git a/packages/components/datepicker/vue/CHANGELOG.md b/packages/components/datepicker/vue/CHANGELOG.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/datepicker/vue/package.json b/packages/components/datepicker/vue/package.json new file mode 100644 index 0000000000..765c15027c --- /dev/null +++ b/packages/components/datepicker/vue/package.json @@ -0,0 +1,31 @@ +{ + "name": "@ovhcloud/ods-component-datepicker-vue", + "version": "15.0.1", + "private": true, + "description": "Vue 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": { + "vue": ">=3" + }, + "devDependencies": { + "@ovhcloud/ods-vue-dev": "^15.0.1" + } +} diff --git a/packages/components/datepicker/vue/tsconfig.cjs.json b/packages/components/datepicker/vue/tsconfig.cjs.json new file mode 100644 index 0000000000..164b6b818e --- /dev/null +++ b/packages/components/datepicker/vue/tsconfig.cjs.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "dist/cjs", + "module": "CommonJS", + "declaration": false, + "declarationDir": null + } +} diff --git a/packages/components/datepicker/vue/tsconfig.json b/packages/components/datepicker/vue/tsconfig.json new file mode 100644 index 0000000000..0fe7d2f68a --- /dev/null +++ b/packages/components/datepicker/vue/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.vue.json", + "compilerOptions": { + "outDir": "dist/esm", + "declarationDir": "dist/types" + }, + "include": ["src/**/*.ts", "src/**/*.tsx"] +} diff --git a/packages/storybook/stories/components/datepicker/datepicker.specifications.stories.mdx b/packages/storybook/stories/components/datepicker/datepicker.specifications.stories.mdx new file mode 100644 index 0000000000..83c7e23cc1 --- /dev/null +++ b/packages/storybook/stories/components/datepicker/datepicker.specifications.stories.mdx @@ -0,0 +1,13 @@ +import { Meta } from '@storybook/addon-docs'; +import SpecificationsDatepicker from '@ovhcloud/ods-components/datepicker/documentation/specifications/specifications-datepicker.mdx'; +import Notes from '../notes.mdx'; + + + +# Datepicker - Technical Specifications +---- + + + +--- + diff --git a/packages/storybook/stories/components/datepicker/datepicker.web-component.stories.page.mdx b/packages/storybook/stories/components/datepicker/datepicker.web-component.stories.page.mdx new file mode 100644 index 0000000000..e443c9c6f1 --- /dev/null +++ b/packages/storybook/stories/components/datepicker/datepicker.web-component.stories.page.mdx @@ -0,0 +1,17 @@ +import { Description, Meta } from '@storybook/addon-docs'; +import APITable from '@ovhcloud/ods-components/datepicker/dist/docs/components/osds-datepicker/readme.md'; +import Usage from '@ovhcloud/ods-components/datepicker/src/docs/osds-datepicker/usage.mdx'; + + + +# `` + +## Table of Contents +> - **[Usage](#usage)** +> - **[Getting Started](#getting-started)** +> - **[API Table](#api-table)** + +
+ +
+
{APITable}
diff --git a/packages/storybook/stories/components/datepicker/datepicker.web-components.stories.ts b/packages/storybook/stories/components/datepicker/datepicker.web-components.stories.ts new file mode 100644 index 0000000000..56ac0a78da --- /dev/null +++ b/packages/storybook/stories/components/datepicker/datepicker.web-components.stories.ts @@ -0,0 +1,60 @@ +import { html } from 'lit-html'; +import { defineCustomElements } from '@ovhcloud/ods-components/datepicker/loader'; +import { extractArgTypes, extractStoryParams, getTagAttributes } from '../../../core/componentHTMLUtils'; +// @ts-ignore +import changelog from '@ovhcloud/ods-components/datepicker/CHANGELOG.md'; +// @ts-ignore +import page from './datepicker.web-component.stories.page.mdx'; + +defineCustomElements(); + +/* Default story parameters */ +const storyParams = { + clearable: { + category: 'General', + defaultValue: false, + }, + disabled: { + category: 'General', + defaultValue: false, + }, + error: { + category: 'General', + defaultValue: '', + }, + format: { + category: 'General', + defaultValue: 'dd/mm/yyyy', + }, + placeholder: { + category: 'General', + defaultValue: '', + }, + value: { + category: 'General', + defaultValue: new Date(Date.now()), + }, +}; + +export default { + title: 'UI Components/Datepicker [organism]/Web Component', + id: 'datepicker', + parameters: { + notes: { + changelog, + }, + docs: { page } + }, + argTypes: extractArgTypes(storyParams) +}; + +/* Default */ +const TemplateDefault = (args:any) => { + return html``; +} + +export const Default = TemplateDefault.bind({}); +// @ts-ignore +Default.args = { + ...extractStoryParams(storyParams), +}; diff --git a/yarn.lock b/yarn.lock index 783408a5a8..726a3f910c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4654,6 +4654,48 @@ __metadata: languageName: unknown linkType: soft +"@ovhcloud/ods-component-datepicker-react@workspace:packages/components/datepicker/react": + version: 0.0.0-use.local + resolution: "@ovhcloud/ods-component-datepicker-react@workspace:packages/components/datepicker/react" + dependencies: + "@ovhcloud/ods-component-datepicker": ^15.0.1 + "@ovhcloud/ods-react-dev": ^15.0.1 + peerDependencies: + react: ">=16.8.6" + react-dom: ">=16.8.6" + languageName: unknown + linkType: soft + +"@ovhcloud/ods-component-datepicker-vue@workspace:packages/components/datepicker/vue": + version: 0.0.0-use.local + resolution: "@ovhcloud/ods-component-datepicker-vue@workspace:packages/components/datepicker/vue" + dependencies: + "@ovhcloud/ods-component-datepicker": ^15.0.1 + "@ovhcloud/ods-vue-dev": ^15.0.1 + peerDependencies: + vue: ">=3" + languageName: unknown + linkType: soft + +"@ovhcloud/ods-component-datepicker@^15.0.1, @ovhcloud/ods-component-datepicker@workspace:packages/components/datepicker": + version: 0.0.0-use.local + resolution: "@ovhcloud/ods-component-datepicker@workspace:packages/components/datepicker" + dependencies: + "@ovhcloud/ods-common-core": ^15.0.1 + "@ovhcloud/ods-common-stencil": ^15.0.1 + "@ovhcloud/ods-common-testing": ^15.0.1 + "@ovhcloud/ods-common-theming": ^15.0.1 + "@ovhcloud/ods-component-input": ^15.0.1 + "@ovhcloud/ods-component-link": ^15.0.1 + "@ovhcloud/ods-component-text": ^15.0.1 + "@ovhcloud/ods-component-textarea": ^15.0.1 + "@ovhcloud/ods-component-tooltip": ^15.0.1 + "@ovhcloud/ods-stencil-dev": ^15.0.1 + "@types/vanillajs-datepicker": ^1.2.2 + vanillajs-datepicker: ^1.3.3 + languageName: unknown + linkType: soft + "@ovhcloud/ods-component-divider-react@workspace:packages/components/divider/react": version: 0.0.0-use.local resolution: "@ovhcloud/ods-component-divider-react@workspace:packages/components/divider/react" @@ -8529,6 +8571,13 @@ __metadata: languageName: node linkType: hard +"@types/vanillajs-datepicker@npm:^1.2.2": + version: 1.2.2 + resolution: "@types/vanillajs-datepicker@npm:1.2.2" + checksum: 4899837a457a62fa9e2606c61788ee98fa24979435a013b8101ec22107cf4e100af9e6eb340049844f2be6e68032d3b226b15bbc909b95410e8e6eb2db0b5939 + languageName: node + linkType: hard + "@types/webpack-env@npm:^1.16.0": version: 1.18.1 resolution: "@types/webpack-env@npm:1.18.1" @@ -30396,6 +30445,13 @@ __metadata: languageName: node linkType: hard +"vanillajs-datepicker@npm:^1.3.3": + version: 1.3.4 + resolution: "vanillajs-datepicker@npm:1.3.4" + checksum: 830958f8af5c586ee81ba2b75a76771db425d4eddb68ec08d1b49ac898674376ef3517a0d40eefaf4926a815c23179c54e1637d7327df090f22cdb98056074cf + languageName: node + linkType: hard + "vary@npm:~1.1.2": version: 1.1.2 resolution: "vary@npm:1.1.2"