From 7e7eff3bf443bf51763799d28ea036ca35b28dce Mon Sep 17 00:00:00 2001 From: Alexandre Esteves Date: Wed, 9 Aug 2023 18:17:56 +0200 Subject: [PATCH] refactor(checkbox): move checkbox to packages-new --- .../components/checkbox/.gitignore | 0 .../components/checkbox/.npmignore | 0 .../components/checkbox/CHANGELOG.md | 0 .../components/checkbox/THIRD-PARTY-LICENCES | 0 .../documentation/specifications/spec.md | 228 +++++++++++++ .../specifications-checkbox-contents.mdx | 0 .../specifications-checkbox-integration.mdx | 0 .../specifications-checkbox-tests.mdx | 0 .../specifications-checkbox.mdx | 10 +- .../components/checkbox/jest.config.ts | 17 +- .../components/checkbox/jest.global.ts | 0 .../components/checkbox/jest.setup.ts | 17 + .../components/checkbox/package.json | 15 +- .../components/checkbox/react/.gitignore | 0 .../components/checkbox/react/.npmignore | 0 .../components/checkbox/react/CHANGELOG.md | 0 .../components/checkbox/react/package.json | 12 +- .../checkbox/react/tsconfig.cjs.json | 0 .../components/checkbox/react/tsconfig.json | 0 .../constants/default-attributes.ts | 20 ++ .../core}/ods-checkbox-controller.spec.ts | 217 ++++++------ .../core}/ods-checkbox-controller.ts | 20 +- .../osds-checkbox/interfaces/attributes.ts | 10 +- .../osds-checkbox/interfaces/events.ts | 48 +++ .../osds-checkbox/interfaces/methods.ts | 17 +- .../osds-checkbox/osds-checkbox.e2e.ts | 56 +-- .../osds-checkbox/osds-checkbox.scss | 0 .../osds-checkbox/osds-checkbox.spec.ts | 285 ++++++++++++++++ .../osds-checkbox/osds-checkbox.tsx | 178 ++++------ .../components/osds-checkbox/public-api.ts | 9 + .../osds-checkbox/properties/usage.basic.mdx | 0 .../properties/usage.checked.mdx | 0 .../properties/usage.disabled.mdx | 0 .../properties/usage.standalone.mdx | 0 .../checkbox/src/docs/osds-checkbox/usage.mdx | 22 ++ .../components/checkbox/src/global.dev.ts | 16 + .../components/checkbox/src/global.prod.ts | 0 .../components/checkbox/src/global.test.ts | 0 .../components/checkbox/src/global.ts | 0 .../components/checkbox/src/index.html | 22 +- .../components/checkbox/src/index.ts | 0 .../components/checkbox/src/interface.d.ts | 0 .../components/checkbox/stencil.config.ts | 30 ++ .../components/checkbox/tsconfig.dev.json | 0 .../components/checkbox/tsconfig.json | 0 .../components/checkbox/tsconfig.prod.json | 0 .../components/checkbox/tsconfig.test.json | 0 .../components/checkbox/typedoc.json | 2 +- .../components/checkbox/vue/.gitignore | 0 .../components/checkbox/vue/.npmignore | 0 .../components/checkbox/vue/CHANGELOG.md | 0 .../components/checkbox/vue/package.json | 8 +- .../components/checkbox/vue/tsconfig.cjs.json | 0 .../components/checkbox/vue/tsconfig.json | 0 packages-new/components/package.json | 1 + .../checkbox/ods-checkbox-attribute-cbk.ts | 1 - ...ds-checkbox-checked-change-event-detail.ts | 4 - .../ods-checkbox-default-attributes.ts | 21 -- .../checkbox/ods-checkbox-events.ts | 29 -- .../ods-checkbox-focus-change-event-detail.ts | 8 - ...s-checkbox-updating-change-event-detail.ts | 4 - .../components/checkbox/ods-checkbox.mock.ts | 64 ---- .../src/components/checkbox/ods-checkbox.ts | 138 -------- .../src/components/checkbox/public-api.ts | 11 - .../core/src/components/public-api.ts | 1 - .../checkbox/ods-checkbox-base-attributes.ts | 10 - .../src/components/checkbox/public-api.ts | 1 - .../testing/src/components/public-api.ts | 1 - .../starters/react-vite/src/demo/Demo.tsx | 2 +- packages/starters/react/src/demo/Demo.tsx | 2 +- packages/starters/vue-vite/src/demo/Demo.vue | 2 +- .../checkbox/docs/osds-checkbox/usage.mdx | 22 -- .../stencil/components/checkbox/jest.setup.ts | 53 --- .../osds-checkbox/osds-checkbox.spec.ts | 318 ------------------ .../components/osds-checkbox/public-api.ts | 1 - .../components/checkbox/src/global.dev.ts | 38 --- .../components/checkbox/stencil.config.ts | 33 -- packages/stencil/components/stencil.config.ts | 3 +- .../components/tsconfig.components.dev.json | 1 + .../components/tsconfig.components.prod.json | 1 + .../components/tsconfig.components.test.json | 1 + .../checkbox.specifications.stories.mdx | 2 +- .../checkbox.web-component.stories.page.mdx | 4 +- ....web-components.stories.checkbox-button.ts | 9 +- .../checkbox.web-components.stories.ts | 10 +- scripts/testing-report/index.html | 2 +- yarn.lock | 34 +- 87 files changed, 980 insertions(+), 1111 deletions(-) rename {packages/stencil => packages-new}/components/checkbox/.gitignore (100%) rename {packages/stencil => packages-new}/components/checkbox/.npmignore (100%) rename {packages/stencil => packages-new}/components/checkbox/CHANGELOG.md (100%) rename {packages/stencil => packages-new}/components/checkbox/THIRD-PARTY-LICENCES (100%) create mode 100644 packages-new/components/checkbox/documentation/specifications/spec.md rename {packages/specifications/components/checkbox => packages-new/components/checkbox/documentation/specifications}/specifications-checkbox-contents.mdx (100%) rename {packages/specifications/components/checkbox => packages-new/components/checkbox/documentation/specifications}/specifications-checkbox-integration.mdx (100%) rename {packages/specifications/components/checkbox => packages-new/components/checkbox/documentation/specifications}/specifications-checkbox-tests.mdx (100%) rename {packages/specifications/components/checkbox => packages-new/components/checkbox/documentation/specifications}/specifications-checkbox.mdx (77%) rename {packages/stencil => packages-new}/components/checkbox/jest.config.ts (64%) rename {packages/stencil => packages-new}/components/checkbox/jest.global.ts (100%) create mode 100644 packages-new/components/checkbox/jest.setup.ts rename {packages/stencil => packages-new}/components/checkbox/package.json (83%) rename {packages/stencil => packages-new}/components/checkbox/react/.gitignore (100%) rename {packages/stencil => packages-new}/components/checkbox/react/.npmignore (100%) rename {packages/stencil => packages-new}/components/checkbox/react/CHANGELOG.md (100%) rename {packages/stencil => packages-new}/components/checkbox/react/package.json (70%) rename {packages/stencil => packages-new}/components/checkbox/react/tsconfig.cjs.json (100%) rename {packages/stencil => packages-new}/components/checkbox/react/tsconfig.json (100%) create mode 100644 packages-new/components/checkbox/src/components/osds-checkbox/constants/default-attributes.ts rename {packages/libraries/core/src/components/checkbox => packages-new/components/checkbox/src/components/osds-checkbox/core}/ods-checkbox-controller.spec.ts (66%) rename {packages/libraries/core/src/components/checkbox => packages-new/components/checkbox/src/components/osds-checkbox/core}/ods-checkbox-controller.ts (92%) rename packages/libraries/core/src/components/checkbox/ods-checkbox-attributes.ts => packages-new/components/checkbox/src/components/osds-checkbox/interfaces/attributes.ts (88%) create mode 100644 packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts rename packages/libraries/core/src/components/checkbox/ods-checkbox-methods.ts => packages-new/components/checkbox/src/components/osds-checkbox/interfaces/methods.ts (51%) rename {packages/stencil => packages-new}/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts (83%) rename {packages/stencil => packages-new}/components/checkbox/src/components/osds-checkbox/osds-checkbox.scss (100%) create mode 100644 packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts rename {packages/stencil => packages-new}/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx (53%) create mode 100644 packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts rename {packages/stencil/components/checkbox => packages-new/components/checkbox/src}/docs/osds-checkbox/properties/usage.basic.mdx (100%) rename {packages/stencil/components/checkbox => packages-new/components/checkbox/src}/docs/osds-checkbox/properties/usage.checked.mdx (100%) rename {packages/stencil/components/checkbox => packages-new/components/checkbox/src}/docs/osds-checkbox/properties/usage.disabled.mdx (100%) rename {packages/stencil/components/checkbox => packages-new/components/checkbox/src}/docs/osds-checkbox/properties/usage.standalone.mdx (100%) create mode 100644 packages-new/components/checkbox/src/docs/osds-checkbox/usage.mdx create mode 100644 packages-new/components/checkbox/src/global.dev.ts rename {packages/stencil => packages-new}/components/checkbox/src/global.prod.ts (100%) rename {packages/stencil => packages-new}/components/checkbox/src/global.test.ts (100%) rename {packages/stencil => packages-new}/components/checkbox/src/global.ts (100%) rename {packages/stencil => packages-new}/components/checkbox/src/index.html (80%) rename {packages/stencil => packages-new}/components/checkbox/src/index.ts (100%) rename {packages/stencil => packages-new}/components/checkbox/src/interface.d.ts (100%) create mode 100644 packages-new/components/checkbox/stencil.config.ts rename {packages/stencil => packages-new}/components/checkbox/tsconfig.dev.json (100%) rename {packages/stencil => packages-new}/components/checkbox/tsconfig.json (100%) rename {packages/stencil => packages-new}/components/checkbox/tsconfig.prod.json (100%) rename {packages/stencil => packages-new}/components/checkbox/tsconfig.test.json (100%) rename {packages/stencil => packages-new}/components/checkbox/typedoc.json (72%) rename {packages/stencil => packages-new}/components/checkbox/vue/.gitignore (100%) rename {packages/stencil => packages-new}/components/checkbox/vue/.npmignore (100%) rename {packages/stencil => packages-new}/components/checkbox/vue/CHANGELOG.md (100%) rename {packages/stencil => packages-new}/components/checkbox/vue/package.json (79%) rename {packages/stencil => packages-new}/components/checkbox/vue/tsconfig.cjs.json (100%) rename {packages/stencil => packages-new}/components/checkbox/vue/tsconfig.json (100%) delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox-attribute-cbk.ts delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox-checked-change-event-detail.ts delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox-default-attributes.ts delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox-events.ts delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox-focus-change-event-detail.ts delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox-updating-change-event-detail.ts delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox.mock.ts delete mode 100644 packages/libraries/core/src/components/checkbox/ods-checkbox.ts delete mode 100644 packages/libraries/core/src/components/checkbox/public-api.ts delete mode 100644 packages/libraries/testing/src/components/checkbox/ods-checkbox-base-attributes.ts delete mode 100644 packages/libraries/testing/src/components/checkbox/public-api.ts delete mode 100644 packages/stencil/components/checkbox/docs/osds-checkbox/usage.mdx delete mode 100644 packages/stencil/components/checkbox/jest.setup.ts delete mode 100644 packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts delete mode 100644 packages/stencil/components/checkbox/src/components/osds-checkbox/public-api.ts delete mode 100644 packages/stencil/components/checkbox/src/global.dev.ts delete mode 100644 packages/stencil/components/checkbox/stencil.config.ts diff --git a/packages/stencil/components/checkbox/.gitignore b/packages-new/components/checkbox/.gitignore similarity index 100% rename from packages/stencil/components/checkbox/.gitignore rename to packages-new/components/checkbox/.gitignore diff --git a/packages/stencil/components/checkbox/.npmignore b/packages-new/components/checkbox/.npmignore similarity index 100% rename from packages/stencil/components/checkbox/.npmignore rename to packages-new/components/checkbox/.npmignore diff --git a/packages/stencil/components/checkbox/CHANGELOG.md b/packages-new/components/checkbox/CHANGELOG.md similarity index 100% rename from packages/stencil/components/checkbox/CHANGELOG.md rename to packages-new/components/checkbox/CHANGELOG.md diff --git a/packages/stencil/components/checkbox/THIRD-PARTY-LICENCES b/packages-new/components/checkbox/THIRD-PARTY-LICENCES similarity index 100% rename from packages/stencil/components/checkbox/THIRD-PARTY-LICENCES rename to packages-new/components/checkbox/THIRD-PARTY-LICENCES diff --git a/packages-new/components/checkbox/documentation/specifications/spec.md b/packages-new/components/checkbox/documentation/specifications/spec.md new file mode 100644 index 0000000000..720b7a5e5d --- /dev/null +++ b/packages-new/components/checkbox/documentation/specifications/spec.md @@ -0,0 +1,228 @@ +* [**Interfaces**](#interfaces) +* [**Types**](#types) +* [**Classes**](#classes) +* [**Type alias**](#type-alias) +* [**Variables**](#variables) + +## Interfaces + +### OdsCheckboxAttributes +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`afterSave`** | `OdsCheckboxAttributeCbk` | | | afterSave input allows to set a function that returns a promise.It is called after each time an update was performed and allowing to manage pessimistic update strategy| +|**`ariaLabel`** | `null` \| `string` | ✴️ | | The corresponding aria-label describing its content| +|**`ariaLabelledby`** | _string_ | | | The id to an external description| +|**`beforeSave`** | `OdsCheckboxAttributeCbk` | | | beforeSave input allows to set a function that returns a promise.It is called before each time an update will be performed and allowing to manage pessimistic update strategy| +|**`checked`** | _boolean_ | ✴️ | | The checked status of the checkbox| +|**`disabled`** | _boolean_ | ✴️ | | indicate if the checkbox is entirely disabled.it means no interactions (hover, click, focus, etc)| +|**`hasFocus`** | _boolean_ | ✴️ | | is the checkbox is currently focused| +|**`label`** | _string_ | | | The corresponding label| +|**`name`** | _string_ | | | name used for the input element.useful for browser and posting forms| +|**`save`** | `OdsCheckboxAttributeCbk` | | | save input allows to set a function that returns a promise.It is called before each time an update is performed and allowing to manage pessimistic update strategy.the checked state will be updated just after the call.| +|**`updating`** | _boolean_ | ✴️ | | update status indicating if the checked state is being modified.`updating` will be `true` until `beforeSave` or `save` are processed.it is used in `pessimistic` update| +|**`value`** | _string_ | ✴️ | | Its corresponding value| + +### OdsCheckboxBehavior +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`checkboxableComponent`** | `null` \| `undefined` | ✴️ | | component that have to be managed by the checkbox smart component.for instance: a tile, a toggle| +|**`hostElement`** | `Host` | ✴️ | | reference to the host element of the component| +|**`inputEl`** | `HTMLInputElement` | | | reference to the native input element inside the component.could be undefined if the reference is not yet filled.| +|**`tabindex`** | _number_ | ✴️ | | current tab index parameter.this will be ignored in case of component disabled.must be `0` by default| +|**`afterInit`** | _void_ | ✴️ | | method executed after initialization of component(`componentDidLoad` with stenciljs for instance).this method has to call OdsCheckboxController.afterInit| +|**`emitBlur`** | _void_ | ✴️ | | when a blur is triggered, this method emit the event| +|**`emitChecked`** | _void_ | ✴️ | | emit an event when the checked state changed| +|**`emitFocus`** | _void_ | ✴️ | | when a focus is triggered, this method emit the event| +|**`emitUpdating`** | _void_ | ✴️ | | emit an event when the checked state is being updated| +|**`getTabIndex`** | _number_ | ✴️ | | get the current tab index.this method has to call OdsCheckboxController.getTabIndex| +|**`handleToggleByClick`** | _void_ | ✴️ | | handle toggle check on click MouseEvent.this method has to call OdsCheckboxController.handleToggleByClick| +|**`handleToggleByKeyEvent`** | _void_ | ✴️ | | handle toggle check on keyboardEvent.this method has to call OdsCheckboxController.handleToggleByKeyEvent| +|**`onBlur`** | _void_ | ✴️ | | process the blur of the component.this method has to call OdsCheckboxController.onBlur| +|**`onFocus`** | _void_ | ✴️ | | process the focus on the component.the method should be call when focus event is triggered on component (by click, keyboard)this method has to call OdsCheckboxController.onFocus| +|**`propagateCheckedToChild`** | _void_ | ✴️ | | propagate checked attribute to the component (like tile or toggle).this method should be call on `checked` attribute changed.this method has to call OdsCheckboxController.propagateCheckedToChild| +|**`propagateDisabledToChild`** | _void_ | ✴️ | | propagate disabled attribute to the component (like tile or toggle).this method should be call on `disabled` attribute changed.this method has to call OdsCheckboxController.propagateDisabledToChild| +|**`propagateHasFocusToChild`** | _void_ | ✴️ | | propagate hasFocus attribute to the component (like tile or toggle).this method should be call on `hasFocus` attribute changed.this method has to call OdsCheckboxController.propagateHasFocusToChild| + +### OdsCheckboxButtonAttributes +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`checked`** | _boolean_ | | | The checked status of the checkbox button| +|**`checking`** | _boolean_ | | | | +|**`color`** | `OdsThemeColorIntent` | | | The color theme| +|**`disabled`** | _boolean_ | | | Prevent the user from clicking on the radio button| +|**`hasFocus`** | _boolean_ | | | Display a focus style (only if interactive)| +|**`indeterminate`** | _boolean_ | | | The indeterminate status of the checkbox button (override checked status)| +|**`interactive`** | _boolean_ | | | Display an interactive style when clicking or hovering the radio button| +|**`size`** | `OdsCheckboxButtonSize` | | | Size of the radio button| + +### OdsCheckboxCheckedChangeEventDetail +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`checked`** | _boolean_ | ✴️ | | | +|**`value`** | _string_ | ✴️ | | | + +### OdsCheckboxEvents +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`odsBlur`** | `OdsCheckboxFocusChangeEventDetail` | ✴️ | | Event triggered on checkbox blur| +|**`odsCheckedChange`** | `OdsCheckboxCheckedChangeEventDetail` | ✴️ | | the checked state changed| +|**`odsFocus`** | `OdsCheckboxFocusChangeEventDetail` | ✴️ | | Event triggered on checkbox focus| +|**`odsUpdatingChange`** | `OdsCheckboxUpdatingChangeEventDetail` | ✴️ | | the checked state is being changed| + +### OdsCheckboxFocusChangeEventDetail +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`focus`** | _boolean_ | ✴️ | | | +|**`value`** | _string_ | ✴️ | | | + +### OdsCheckboxMethods +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`setFocus`** | _void_ | ✴️ | | programmatically set the focus on the checkbox.this method has to call OdsCheckboxController.setFocus| +|**`setTabindex`** | _void_ | ✴️ | | set the tab index.this method has to call OdsCheckboxController.setTabindex| + +### OdsCheckboxUpdatingChangeEventDetail +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`updating`** | _boolean_ | ✴️ | | | +|**`value`** | _string_ | ✴️ | | | + +### OdsCheckboxable +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`checked`** | _boolean_ | ✴️ | | | +|**`checking`** | _boolean_ | ✴️ | | is in state of awaiting the checked change| +|**`disabled`** | _boolean_ | ✴️ | | | +|**`hasFocus`** | _boolean_ | ✴️ | | | + +## Types + +### OdsCheckboxButtonSize +| | +|:---:| +| `md` | +| `sm` | + +## Classes + +### OdsCheckboxButtonController +_common controller logic for checkbox button component used by the different implementations._ +_it contains all the glue between framework implementation and the third party service._ + +#### Methods +> **computeIconName**() => _unknown_ + + + +### OdsCheckboxButtonMock + +### OdsCheckboxController +_common controller logic for checkbox component used by the different implementations._ +_it contains all the glue between framework implementation and the third party service._ + +#### Methods +> **afterInit**() => _unknown_ + + +> **getTabIndex**() => _unknown_ + + +> **handleToggleByClick**() => _unknown_ + + +> **handleToggleByKeyEvent**() => _unknown_ + + +> **onBlur**() => _unknown_ + + +> **onFocus**() => _unknown_ + + +> **propagateCheckedToChild**() => _unknown_ + + +> **propagateDisabledToChild**() => _unknown_ + + +> **propagateHasFocusToChild**() => _unknown_ + + +> **setFocus**() => _unknown_ + + +> **setTabindex**() => _unknown_ + + +> **toggleCheck**() => _unknown_ + + + +### OdsCheckboxUtils +#### Methods +> **isCheckedOnClick**() => _unknown_ + + + +## Type alias + +### OdsCheckbox + +interface description of all implementation of `ods-checkbox`. +each implementation must have defined events, methods, attributes +and one controller for the common behavior logic + +> - `OdsComponentGenericMethods` + +> - `OdsComponentGenericEvents` + +### OdsCheckboxAttributeCbk + +### OdsCheckboxButton + +interface description of all implementation of `ods-checkbox-button`. +each implementation must have defined events, methods, attributes +and one controller for the common behavior logic + +> - `OdsComponentGenericMethods` + +> - `OdsComponentGenericEvents` + +### OdsCheckboxAttributes + +> _Based on `OdsComponentAttributes`_ + +### OdsCheckboxButtonAttributes + +> _Based on `OdsComponentAttributes`_ + +### OdsCheckboxButtonEvents + +> _Based on `OdsComponentEvents`_ + +### OdsCheckboxButtonMethods + +> _Based on `OdsComponentMethods`_ + +### OdsCheckboxEvents + +> _Based on `OdsComponentEvents`_ + +### OdsCheckboxFocusChangeEventDetail + +> _Based on `OdsFocusChangeEventDetail`_ + +### OdsCheckboxMethods + +> _Based on `OdsComponentMethods`_ + +## Variables + +### odsCheckboxButtonDefaultAttributes +`OdsCheckboxButtonAttributes` + +### odsCheckboxButtonDefaultAttributesDoc +`OdsCheckboxButtonAttributes` + +### odsCheckboxDefaultAttributes +`OdsCheckboxAttributes` \ No newline at end of file diff --git a/packages/specifications/components/checkbox/specifications-checkbox-contents.mdx b/packages-new/components/checkbox/documentation/specifications/specifications-checkbox-contents.mdx similarity index 100% rename from packages/specifications/components/checkbox/specifications-checkbox-contents.mdx rename to packages-new/components/checkbox/documentation/specifications/specifications-checkbox-contents.mdx diff --git a/packages/specifications/components/checkbox/specifications-checkbox-integration.mdx b/packages-new/components/checkbox/documentation/specifications/specifications-checkbox-integration.mdx similarity index 100% rename from packages/specifications/components/checkbox/specifications-checkbox-integration.mdx rename to packages-new/components/checkbox/documentation/specifications/specifications-checkbox-integration.mdx diff --git a/packages/specifications/components/checkbox/specifications-checkbox-tests.mdx b/packages-new/components/checkbox/documentation/specifications/specifications-checkbox-tests.mdx similarity index 100% rename from packages/specifications/components/checkbox/specifications-checkbox-tests.mdx rename to packages-new/components/checkbox/documentation/specifications/specifications-checkbox-tests.mdx diff --git a/packages/specifications/components/checkbox/specifications-checkbox.mdx b/packages-new/components/checkbox/documentation/specifications/specifications-checkbox.mdx similarity index 77% rename from packages/specifications/components/checkbox/specifications-checkbox.mdx rename to packages-new/components/checkbox/documentation/specifications/specifications-checkbox.mdx index fc47beb881..08ce7afa92 100644 --- a/packages/specifications/components/checkbox/specifications-checkbox.mdx +++ b/packages-new/components/checkbox/documentation/specifications/specifications-checkbox.mdx @@ -1,8 +1,8 @@ -import SpecsCheckboxContents from '@ovhcloud/ods-specifications/components/checkbox/specifications-checkbox-contents.mdx'; -import SpecsCheckboxIntegration from '@ovhcloud/ods-specifications/components/checkbox/specifications-checkbox-integration.mdx'; -import SpecsCheckboxTests from '@ovhcloud/ods-specifications/components/checkbox/specifications-checkbox-tests.mdx'; -import Specs from '@ovhcloud/ods-core/src/components/checkbox/docs/spec.md'; -import {Description} from '@storybook/addon-docs'; +import SpecsCheckboxContents from './specifications-checkbox-contents.mdx'; +import SpecsCheckboxIntegration from './specifications-checkbox-integration.mdx'; +import SpecsCheckboxTests from './specifications-checkbox-tests.mdx'; +import Specs from './spec.md'; +import { Description } from '@storybook/addon-docs'; ## Description diff --git a/packages/stencil/components/checkbox/jest.config.ts b/packages-new/components/checkbox/jest.config.ts similarity index 64% rename from packages/stencil/components/checkbox/jest.config.ts rename to packages-new/components/checkbox/jest.config.ts index 2990f86ce7..844eab7331 100644 --- a/packages/stencil/components/checkbox/jest.config.ts +++ b/packages-new/components/checkbox/jest.config.ts @@ -1,23 +1,12 @@ import type { Config } from '@jest/types'; -import { OdsGetJestConfig } from '@ovhcloud/ods-testing'; +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: '/../../../..', + basePath: '/../../..', args }), /** diff --git a/packages/stencil/components/checkbox/jest.global.ts b/packages-new/components/checkbox/jest.global.ts similarity index 100% rename from packages/stencil/components/checkbox/jest.global.ts rename to packages-new/components/checkbox/jest.global.ts diff --git a/packages-new/components/checkbox/jest.setup.ts b/packages-new/components/checkbox/jest.setup.ts new file mode 100644 index 0000000000..cdbd6e6c9a --- /dev/null +++ b/packages-new/components/checkbox/jest.setup.ts @@ -0,0 +1,17 @@ +/** + * setup jest file executed for each test and in the test environment + * @see https://jestjs.io/fr/docs/configuration#setupfiles-array + */ + +// set a mocked configured config for ODS +// config can be changed on the fly later in tests + +const setupConfig: any = { config: { logging: { active: false } } }; +/** + * mock the window for jest testing. + * very useful with stencil in order to manage the MockedWindow of stencil. + * warning: when using `window` with stencil e2e test, each time window is called, a new MockedWindow is created. + * it can lead to misunderstanding, so it is recommended to use this in every e2e tests. + * @param setupConfig- - window's ods config + */ + diff --git a/packages/stencil/components/checkbox/package.json b/packages-new/components/checkbox/package.json similarity index 83% rename from packages/stencil/components/checkbox/package.json rename to packages-new/components/checkbox/package.json index 6794722914..483e06ea6d 100644 --- a/packages/stencil/components/checkbox/package.json +++ b/packages-new/components/checkbox/package.json @@ -1,15 +1,14 @@ { - "name": "@ovhcloud/ods-stencil-checkbox", + "name": "@ovhcloud/ods-component-checkbox", "version": "15.0.1", - "private": true, - "description": "Checkbox wrapper component", + "description": "ODS Checkbox 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/interface.d.ts", + "types": "dist/types/index.d.ts", "collection": "dist/collection/collection-manifest.json", "collection:main": "dist/collection/index.js", "scripts": { @@ -36,9 +35,13 @@ "test:e2e:ci:screenshot:update": "stencil test --config stencil.config.ts --e2e --ci --screenshot --update-screenshot --passWithNoTests" }, "dependencies": { - "@ovhcloud/ods-stencil-component": "^15.0.1" + "@ovhcloud/ods-common-core": "^15.0.1", + "@ovhcloud/ods-common-stencil": "^15.0.1", + "@ovhcloud/ods-component-tile": "^15.0.1", + "@ovhcloud/ods-theming": "^15.0.1" }, "devDependencies": { - "@ovhcloud/ods-stencil-component-dev": "^15.0.1" + "@ovhcloud/ods-common-testing": "^15.0.1", + "@ovhcloud/ods-stencil-dev": "^15.0.1" } } diff --git a/packages/stencil/components/checkbox/react/.gitignore b/packages-new/components/checkbox/react/.gitignore similarity index 100% rename from packages/stencil/components/checkbox/react/.gitignore rename to packages-new/components/checkbox/react/.gitignore diff --git a/packages/stencil/components/checkbox/react/.npmignore b/packages-new/components/checkbox/react/.npmignore similarity index 100% rename from packages/stencil/components/checkbox/react/.npmignore rename to packages-new/components/checkbox/react/.npmignore diff --git a/packages/stencil/components/checkbox/react/CHANGELOG.md b/packages-new/components/checkbox/react/CHANGELOG.md similarity index 100% rename from packages/stencil/components/checkbox/react/CHANGELOG.md rename to packages-new/components/checkbox/react/CHANGELOG.md diff --git a/packages/stencil/components/checkbox/react/package.json b/packages-new/components/checkbox/react/package.json similarity index 70% rename from packages/stencil/components/checkbox/react/package.json rename to packages-new/components/checkbox/react/package.json index ec4849ab01..0c4f6234f8 100644 --- a/packages/stencil/components/checkbox/react/package.json +++ b/packages-new/components/checkbox/react/package.json @@ -1,5 +1,5 @@ { - "name": "@ovhcloud/ods-stencil-checkbox-react", + "name": "@ovhcloud/ods-component-checkbox-react", "version": "15.0.1", "private": true, "description": "React specific wrapper for ods", @@ -20,19 +20,13 @@ "dist/" ], "dependencies": { - "@ovhcloud/ods-stencil-cart": "^15.0.1", - "tslib": "*" + "@ovhcloud/ods-component-checkbox": "^15.0.1" }, "peerDependencies": { "react": ">=16.8.6", "react-dom": ">=16.8.6" }, "devDependencies": { - "@types/react": "17.0.37", - "@types/react-dom": "17.0.11", - "react": "16.14.0", - "react-dom": "16.14.0", - "rimraf": "^3.0.2", - "typescript": "4.7.4" + "@ovhcloud/ods-react-dev": "^15.0.1" } } diff --git a/packages/stencil/components/checkbox/react/tsconfig.cjs.json b/packages-new/components/checkbox/react/tsconfig.cjs.json similarity index 100% rename from packages/stencil/components/checkbox/react/tsconfig.cjs.json rename to packages-new/components/checkbox/react/tsconfig.cjs.json diff --git a/packages/stencil/components/checkbox/react/tsconfig.json b/packages-new/components/checkbox/react/tsconfig.json similarity index 100% rename from packages/stencil/components/checkbox/react/tsconfig.json rename to packages-new/components/checkbox/react/tsconfig.json diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/constants/default-attributes.ts b/packages-new/components/checkbox/src/components/osds-checkbox/constants/default-attributes.ts new file mode 100644 index 0000000000..505966b6ac --- /dev/null +++ b/packages-new/components/checkbox/src/components/osds-checkbox/constants/default-attributes.ts @@ -0,0 +1,20 @@ +import type { OdsCheckboxAttribute } from '../interfaces/attributes'; + +const DEFAULT_ATTRIBUTE: OdsCheckboxAttribute = Object.freeze({ + afterSave: undefined, + ariaLabel: '', + ariaLabelledby: undefined, + beforeSave: undefined, + checked: false, + hasFocus: false, + disabled: false, + label: undefined, + name: '', + save: undefined, + updating: false, + value: '', +}); + +export { + DEFAULT_ATTRIBUTE, +}; \ No newline at end of file diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-controller.spec.ts b/packages-new/components/checkbox/src/components/osds-checkbox/core/ods-checkbox-controller.spec.ts similarity index 66% rename from packages/libraries/core/src/components/checkbox/ods-checkbox-controller.spec.ts rename to packages-new/components/checkbox/src/components/osds-checkbox/core/ods-checkbox-controller.spec.ts index 5ee39cfb18..2f2107bd5f 100644 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-controller.spec.ts +++ b/packages-new/components/checkbox/src/components/osds-checkbox/core/ods-checkbox-controller.spec.ts @@ -1,49 +1,35 @@ -import { OdsCheckboxMock } from './ods-checkbox.mock'; +import type { HTMLStencilElement } from '@stencil/core/internal'; import { OdsCheckboxController } from './ods-checkbox-controller'; -import { OdsCheckbox } from './ods-checkbox'; -import { OdsLogger } from '../../logger/ods-logger'; -import { Ods } from '../../configure/ods'; -import { OdsCheckboxable } from '../../utils/checkbox/ods-checkboxable'; +import { OsdsCheckbox } from '../osds-checkbox'; import { OdsClearLoggerSpy, odsGetSimulatedPromise, OdsInitializeLoggerSpy, OdsLoggerSpyReferences -} from '@ovhcloud/ods-testing/src'; +} from '@ovhcloud/ods-common-testing'; +import { Ods, OdsCheckboxable, OdsLogger } from '@ovhcloud/ods-common-core'; + +class OdsCheckboxMock extends OsdsCheckbox { + constructor(attribute: Partial) { + super(); + Object.assign(this, attribute) + } + inputEl = document.createElement('input'); + checkboxableComponent = document.createElement('div') as unknown as (HTMLStencilElement & OdsCheckboxable); +} describe('spec:ods-checkbox-controller', () => { let controller: OdsCheckboxController; - let component: OdsCheckbox; + let component: OsdsCheckbox; let spyInputElFocus: jest.SpyInstance; - let spyOnEmitChecked: jest.SpyInstance>; - let spyOnToggleCheck: jest.SpyInstance, jest.ArgsType>; - let spyOnBeforeSave: jest.SpyInstance, jest.ArgsType>; - let spyOnSave: jest.SpyInstance, jest.ArgsType>; - let spyOnAfterSave: jest.SpyInstance, jest.ArgsType>; - let spyOnPropagateCheckedToChild: jest.SpyInstance>; - let spyOnPropagateDisabledToChild: jest.SpyInstance>; - let spyOnEmitFocus: jest.SpyInstance>; - let checkboxableComponent: HTMLElement & OdsCheckboxable; + let spyOnEmitChecked: jest.SpyInstance>; + let spyOnEmitFocus: jest.SpyInstance>; let loggerSpyReferences: OdsLoggerSpyReferences; - let inputEl: HTMLInputElement; Ods.instance().logging(false); const logger = new OdsLogger('spec:ods-checkbox-controller'); beforeEach(() => { - component = new OdsCheckboxMock() as OdsCheckbox; - component.disabled = false; - component.checked = false; - spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); - spyOnEmitFocus = jest.spyOn(component, 'emitFocus'); - - checkboxableComponent = document.createElement('div') as unknown as (HTMLElement & OdsCheckboxable); - component.checkboxableComponent = checkboxableComponent; - - inputEl = document.createElement('input') - component.inputEl = inputEl; - spyInputElFocus = jest.spyOn(component.inputEl, 'focus'); - const loggerMocked = new OdsLogger('myLoggerMocked'); loggerSpyReferences = OdsInitializeLoggerSpy({ loggerMocked: loggerMocked as never, @@ -57,7 +43,7 @@ describe('spec:ods-checkbox-controller', () => { }); function getSaveCbk(withError: boolean) { - const cbk: OdsCheckbox['save'] = ({ checked, value }) => { + const cbk: OsdsCheckbox['save'] = ({ checked, value }) => { return odsGetSimulatedPromise(withError, () => { logger.log(`getSaveFct. checked=${checked}, value=${value}`); }); @@ -66,7 +52,7 @@ describe('spec:ods-checkbox-controller', () => { } function getBeforeSaveCbk(withError: boolean) { - const cbk: OdsCheckbox['beforeSave'] = ({ checked, value }) => { + const cbk: OsdsCheckbox['beforeSave'] = ({ checked, value }) => { return odsGetSimulatedPromise(withError, () => { logger.log(`getSaveFct. checked=${checked}, value=${value}`); }); @@ -75,7 +61,7 @@ describe('spec:ods-checkbox-controller', () => { } function getAfterSaveCbk(withError: boolean) { - const cbk: OdsCheckbox['afterSave'] = ({ checked, value }) => { + const cbk: OsdsCheckbox['afterSave'] = ({ checked, value }) => { return odsGetSimulatedPromise(withError, () => { logger.log(`getSaveFct. checked=${checked}, value=${value}`); }); @@ -91,12 +77,18 @@ describe('spec:ods-checkbox-controller', () => { expect(component.checkboxableComponent?.getAttribute(name)).toEqual(''); } - function setup(componentToCreate: OdsCheckbox) { - controller = new OdsCheckboxController(componentToCreate); + function setup(attributes: Partial = {}) { + component = new OdsCheckboxMock(attributes); + controller = new OdsCheckboxController(component); + spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); + spyOnEmitFocus = jest.spyOn(component, 'emitFocus'); + if (component.inputEl) { + spyInputElFocus = jest.spyOn(component.inputEl, 'focus'); + } } it('should initialize', () => { - setup(component); + setup(); expect(controller).toBeTruthy(); }); @@ -104,29 +96,30 @@ describe('spec:ods-checkbox-controller', () => { describe('afterInit', () => { it('should call propagateCheckedToChild and propagateDisabledToChild methods', async () => { - spyOnPropagateCheckedToChild = jest.spyOn(component, 'propagateCheckedToChild').mockImplementation((checked) => { + setup(); + const spyOnPropagateCheckedToChild = jest.spyOn(component, 'propagateCheckedToChild').mockImplementation((checked) => { logger.log(`resolving propagateCheckedToChild`, checked); }); - spyOnPropagateDisabledToChild = jest.spyOn(component, 'propagateDisabledToChild').mockImplementation((disabled) => { + const spyOnPropagateDisabledToChild = jest.spyOn(component, 'propagateDisabledToChild').mockImplementation((disabled) => { logger.log(`resolving propagateDisabledToChild`, disabled); }); - setup(component); controller.afterInit(); expect(spyOnPropagateCheckedToChild).toHaveBeenCalled(); expect(spyOnPropagateDisabledToChild).toHaveBeenCalled(); }); it('should disable focus management on child', async () => { - setup(component); + setup(); controller.afterInit(); - expect(checkboxableComponent.getAttribute('tabindex')).toEqual('-1'); + expect(component.checkboxableComponent.getAttribute('tabindex')).toEqual('-1'); }); it('should warn user if no checkboxable element found', async () => { const expected = `you must place a checkboxable element inside the checkbox component. (html input checkbox or any html component that accepts checked attribute)`; - component.checkboxableComponent = null; - setup(component); + setup({ + checkboxableComponent: null, + }); controller.afterInit(); expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected); }); @@ -134,15 +127,17 @@ describe('spec:ods-checkbox-controller', () => { describe('getTabIndex', () => { it('should get the tab index', () => { - component.tabindex = 42; - setup(component); + setup({ + tabindex: 42 + }); const index = controller.getTabIndex(); expect(index).toEqual(component.tabindex); }); it('should get no tab index if disabled', () => { - component.tabindex = 42; - component.disabled = true; - setup(component); + setup({ + tabindex: 42, + disabled: true, + }); const index = controller.getTabIndex(); expect(index).toEqual(-1); }); @@ -150,8 +145,8 @@ describe('spec:ods-checkbox-controller', () => { describe('handleToggleByClick', () => { it('should call toggleCheck method on click', async () => { - setup(component); - spyOnToggleCheck = jest.spyOn(controller, 'toggleCheck'); + setup(); + const spyOnToggleCheck = jest.spyOn(controller, 'toggleCheck'); const event = new MouseEvent('click'); await controller.handleToggleByClick(event); expect(spyOnToggleCheck).toHaveBeenCalled(); @@ -161,11 +156,11 @@ describe('spec:ods-checkbox-controller', () => { describe('handleToggleByKeyEvent', () => { it('should call toggleCheck method on key event', async () => { - spyOnEmitChecked = jest.spyOn(component, 'emitChecked').mockImplementation(() => { + setup(); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked').mockImplementation(() => { logger.log(`emitChecked`); }); - setup(component); - spyOnToggleCheck = jest.spyOn(controller, 'toggleCheck'); + const spyOnToggleCheck = jest.spyOn(controller, 'toggleCheck'); const event = new KeyboardEvent('keyDown', { code: 'Space', keyCode: 32, bubbles: true }); await controller.handleToggleByKeyEvent(event); expect(spyOnToggleCheck).toHaveBeenCalled(); @@ -175,16 +170,18 @@ describe('spec:ods-checkbox-controller', () => { describe('onBlur', () => { it('should update blur state', () => { - component.hasFocus = true; - setup(component); + setup({ + hasFocus: true, + }); jest.spyOn(component, 'emitBlur'); controller.onBlur(); expect(component.hasFocus).toEqual(false); expect(component.emitBlur).toHaveBeenCalledWith(); }); it('should do nothing if disabled', () => { - component.disabled = true; - setup(component); + setup({ + disabled: true, + }); jest.spyOn(component, 'emitBlur'); controller.onBlur(); expect(component.hasFocus).toEqual(false); @@ -194,7 +191,7 @@ describe('spec:ods-checkbox-controller', () => { describe('onFocus', () => { it('should call setFocus', () => { - setup(component); + setup(); jest.spyOn(controller, 'setFocus'); controller.onFocus(); expect(controller.setFocus).toHaveBeenCalledWith(); @@ -221,9 +218,9 @@ describe('spec:ods-checkbox-controller', () => { describe('setFocus', () => { it('should do nothing if disabled', () => { - component.disabled = true; - component.inputEl = inputEl; - setup(component); + setup({ + disabled: true, + }); controller.setFocus(); expect(component.hasFocus).toEqual(false); expect(spyInputElFocus).not.toHaveBeenCalledWith(); @@ -231,9 +228,10 @@ describe('spec:ods-checkbox-controller', () => { }); it('should do nothing if no inputEl', () => { - component.inputEl = undefined; - component.disabled = false; - setup(component); + setup({ + disabled: false, + inputEl: undefined, + }); controller.setFocus(); expect(component.hasFocus).toEqual(false); expect(spyInputElFocus).not.toHaveBeenCalledWith(); @@ -241,9 +239,9 @@ describe('spec:ods-checkbox-controller', () => { }); it('should update focus state', () => { - component.disabled = false; - component.inputEl = inputEl; - setup(component); + setup({ + disabled: false, + }); controller.setFocus(); expect(component.hasFocus).toEqual(true); expect(spyInputElFocus).toHaveBeenCalledWith(); @@ -253,8 +251,9 @@ describe('spec:ods-checkbox-controller', () => { describe('setTabindex', () => { it('should set the index', () => { - component.tabindex = 1; - setup(component); + setup({ + tabindex: 1 + }); controller.setTabindex(42); expect(component.tabindex).toEqual(42); }); @@ -262,18 +261,19 @@ describe('spec:ods-checkbox-controller', () => { describe('toggleCheck', () => { it('should not toggle if disabled and not checked', async () => { - component.disabled = true; - component.checked = false; - setup(component); - + setup({ + disabled: true, + checked: false, + }); await controller.toggleCheck(); expect(component.checked).toEqual(false); }); it('should not toggle if disabled and checked', async () => { - component.disabled = true; - component.checked = true; - setup(component); + setup({ + disabled: true, + checked: true, + }); await controller.toggleCheck(); expect(component.checked).toEqual(true); @@ -284,8 +284,8 @@ describe('spec:ods-checkbox-controller', () => { */ describe('optimistic update', () => { it('should doing optimistic update', async () => { - spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); - setup(component); + setup(); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); await controller.toggleCheck(); expect(spyOnEmitChecked).toHaveBeenCalled(); expect(component.checked).toEqual(true); @@ -298,19 +298,16 @@ describe('spec:ods-checkbox-controller', () => { */ describe('pessimistic update', () => { - beforeEach(async () => { - component.save = getSaveCbk(false); - - spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); - }); - describe('saving process in success', () => { it('should call beforeSave', async () => { - component.beforeSave = getBeforeSaveCbk(false); - spyOnBeforeSave = jest.spyOn(component, 'beforeSave'); - spyOnSave = jest.spyOn(component, 'save'); - setup(component); + setup({ + beforeSave: getBeforeSaveCbk(false), + save: getSaveCbk(false), + }); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); + const spyOnBeforeSave = jest.spyOn(component, 'beforeSave'); + const spyOnSave = jest.spyOn(component, 'save'); await controller.toggleCheck(); expect(component.checked).toEqual(true); @@ -320,8 +317,11 @@ describe('spec:ods-checkbox-controller', () => { }); it('should call save', async () => { - spyOnSave = jest.spyOn(component, 'save'); - setup(component); + setup({ + save: getSaveCbk(false), + }); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); + const spyOnSave = jest.spyOn(component, 'save'); await controller.toggleCheck(); expect(component.checked).toEqual(true); @@ -330,9 +330,12 @@ describe('spec:ods-checkbox-controller', () => { }); it('should call afterSave', async () => { - component.afterSave = getAfterSaveCbk(false); - spyOnAfterSave = jest.spyOn(component, 'afterSave'); - setup(component); + setup({ + afterSave: getAfterSaveCbk(false), + save: getSaveCbk(false), + }); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); + const spyOnAfterSave = jest.spyOn(component, 'afterSave'); await controller.toggleCheck(); expect(component.checked).toEqual(true); @@ -344,10 +347,13 @@ describe('spec:ods-checkbox-controller', () => { describe('saving catching potential errors', () => { it('should catch potential error of beforeSave', async () => { - component.beforeSave = getBeforeSaveCbk(true); - spyOnBeforeSave = jest.spyOn(component, 'beforeSave'); - spyOnSave = jest.spyOn(component, 'save'); - setup(component); + setup({ + beforeSave: getBeforeSaveCbk(true), + save: getSaveCbk(false), + }); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); + const spyOnBeforeSave = jest.spyOn(component, 'beforeSave'); + const spyOnSave = jest.spyOn(component, 'save'); await controller.toggleCheck(); expect(component.checked).toEqual(false); @@ -357,9 +363,11 @@ describe('spec:ods-checkbox-controller', () => { }); it('should catch potential error of save', async () => { - component.save = getSaveCbk(true); - spyOnSave = jest.spyOn(component, 'save'); - setup(component); + setup({ + save: getSaveCbk(true), + }); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); + const spyOnSave = jest.spyOn(component, 'save'); await controller.toggleCheck(); expect(component.checked).toEqual(false); @@ -368,9 +376,12 @@ describe('spec:ods-checkbox-controller', () => { }); it('should catch potential error of afterSave', async () => { - component.afterSave = getAfterSaveCbk(true); - spyOnAfterSave = jest.spyOn(component, 'afterSave'); - setup(component); + setup({ + afterSave: getAfterSaveCbk(true), + save: getSaveCbk(false), + }); + const spyOnEmitChecked = jest.spyOn(component, 'emitChecked'); + const spyOnAfterSave = jest.spyOn(component, 'afterSave'); await controller.toggleCheck(); expect(component.checked).toEqual(true); diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-controller.ts b/packages-new/components/checkbox/src/components/osds-checkbox/core/ods-checkbox-controller.ts similarity index 92% rename from packages/libraries/core/src/components/checkbox/ods-checkbox-controller.ts rename to packages-new/components/checkbox/src/components/osds-checkbox/core/ods-checkbox-controller.ts index adc1d25935..2a5c1ad926 100644 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-controller.ts +++ b/packages-new/components/checkbox/src/components/osds-checkbox/core/ods-checkbox-controller.ts @@ -1,16 +1,10 @@ -import { OdsComponentController } from '../ods-component-controller'; -import { OdsCheckbox } from './ods-checkbox'; -import { OdsLogger } from '../../logger/ods-logger'; - -/** - * common controller logic for checkbox component used by the different implementations. - * it contains all the glue between framework implementation and the third party service. - */ -export class OdsCheckboxController extends OdsComponentController { +import type { OsdsCheckbox } from '../osds-checkbox'; +import { OdsLogger } from '@ovhcloud/ods-common-core'; + +class OdsCheckboxController { private readonly logger = new OdsLogger('OdsCheckboxController'); - constructor(component: OdsCheckbox) { - super(component); + constructor(private component: OsdsCheckbox) { this.logger.log('OdsCheckboxController'); } @@ -179,3 +173,7 @@ export class OdsCheckboxController extends OdsComponentController { } } } + +export { + OdsCheckboxController, +} diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-attributes.ts b/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/attributes.ts similarity index 88% rename from packages/libraries/core/src/components/checkbox/ods-checkbox-attributes.ts rename to packages-new/components/checkbox/src/components/osds-checkbox/interfaces/attributes.ts index 2c973ebcb3..017d4be69a 100644 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-attributes.ts +++ b/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/attributes.ts @@ -1,7 +1,6 @@ -import { OdsCheckboxAttributeCbk } from './ods-checkbox-attribute-cbk'; -import { OdsComponentAttributes } from '../ods-component-attributes'; +type OdsCheckboxAttributeCbk = ({ checked, value }: { checked: boolean, value: HTMLInputElement['value'] }) => Promise; -export interface OdsCheckboxAttributes extends OdsComponentAttributes { +interface OdsCheckboxAttribute { /** * afterSave input allows to set a function that returns a promise. * It is called after each time an update was performed and allowing to manage pessimistic update strategy @@ -59,3 +58,8 @@ export interface OdsCheckboxAttributes extends OdsComponentAttributes { */ value: HTMLInputElement['value']; } + +export { + OdsCheckboxAttribute, + OdsCheckboxAttributeCbk, +} \ No newline at end of file diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts b/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts new file mode 100644 index 0000000000..c41c1df733 --- /dev/null +++ b/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/events.ts @@ -0,0 +1,48 @@ +import type { OdsFocusChangeEventDetail } from "@ovhcloud/ods-common-core"; +import type { EventEmitter } from '@stencil/core'; + +interface OdsCheckboxCheckedChangeEventDetail { + checked: boolean; + value: string; +} + +interface OdsCheckboxUpdatingChangeEventDetail { + updating: boolean; + value: string; +} + +interface OdsCheckboxFocusChangeEventDetail extends OdsFocusChangeEventDetail { + value: string; +} + +interface OdsCheckboxEvent { + /** + * Event triggered on checkbox blur + * @see OdsCheckboxBehavior.onBlur + * @see OdsCheckboxBehavior.emitBlur + */ + odsBlur: EventEmitter; + /** + * the checked state changed + * @see OdsCheckboxBehavior.emitChecked + */ + odsCheckedChange: EventEmitter; + /** + * Event triggered on checkbox focus + * @see OdsCheckboxBehavior.onFocus + * @see OdsCheckboxBehavior.emitFocus + */ + odsFocus: EventEmitter; + /** + * the checked state is being changed + * @see OdsCheckboxBehavior.emitUpdating + */ + odsUpdatingChange: EventEmitter; +} + +export { + OdsCheckboxEvent, + OdsCheckboxFocusChangeEventDetail, + OdsCheckboxUpdatingChangeEventDetail, + OdsCheckboxCheckedChangeEventDetail, +} \ No newline at end of file diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-methods.ts b/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/methods.ts similarity index 51% rename from packages/libraries/core/src/components/checkbox/ods-checkbox-methods.ts rename to packages-new/components/checkbox/src/components/osds-checkbox/interfaces/methods.ts index 7a8da9ff66..014c5a8cf6 100644 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-methods.ts +++ b/packages-new/components/checkbox/src/components/osds-checkbox/interfaces/methods.ts @@ -1,11 +1,4 @@ -import { OdsComponentMethods } from '../ods-component-methods'; - -/** - * public methods of checkbox component. - * internal method to implement are in `OdsCheckboxBehavior` - * @see OdsCheckboxBehavior - */ -export interface OdsCheckboxMethods extends OdsComponentMethods { +interface OdsCheckboxMethod { /** * set the tab index. @@ -13,7 +6,7 @@ export interface OdsCheckboxMethods extends OdsComponentMethods { * @public * @see OdsCheckboxController.setTabindex */ - setTabindex(index: number): void; + setTabindex(index: number): Promise; /** * programmatically set the focus on the checkbox. @@ -21,5 +14,9 @@ export interface OdsCheckboxMethods extends OdsComponentMethods { * @public * @see OdsCheckboxController.setFocus */ - setFocus(): void; + setFocus(): Promise; } + +export { + OdsCheckboxMethod, +} \ No newline at end of file diff --git a/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts similarity index 83% rename from packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts rename to packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts index 470cfa55a3..d730859573 100644 --- a/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts +++ b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.e2e.ts @@ -1,37 +1,18 @@ -// jest.mock('../../../../../../libraries/core/src/configure/ods-get-window', () => ({ -// getOdsWindow: () => { -// console.log('[odsMockWindow]', 'get mocked window2'); -// (window as any).toto = 'toto'; -// return window -// }, -// })); - -(window as any).toto = 'toto2'; - -import { E2EElement, E2EPage, EventSpy, newE2EPage } from '@stencil/core/testing'; -import { getOdsWindow } from '@ovhcloud/ods-core/src/configure/ods-get-window'; - -import { - OdsCheckbox, - OdsCheckboxAttributes, +import type { E2EElement, E2EPage, EventSpy } from '@stencil/core/testing'; +import type { OdsCheckboxCheckedChangeEventDetail, - odsCheckboxDefaultAttributes, - OdsCheckboxEvents, + OdsCheckboxEvent, OdsCheckboxFocusChangeEventDetail, OdsCheckboxUpdatingChangeEventDetail, - OdsComponentAttributes2StringAttributes, - OdsLogger, -} from '@ovhcloud/ods-core'; -import { - odsCheckboxBaseAttributes, - OdsCreateAttributes, - odsGetSimulatedPromise, - OdsStringAttributes2Str -} from '@ovhcloud/ods-testing'; +} from './interfaces/events'; +import type { OdsCheckboxAttribute } from './interfaces/attributes'; +import type { OsdsCheckbox } from './osds-checkbox'; +import { newE2EPage } from '@stencil/core/testing'; +import { OdsLogger } from '@ovhcloud/ods-common-core'; +import { odsComponentAttributes2StringAttributes, odsGetSimulatedPromise, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing'; import { osdsSetPropertyFunction } from '@ovhcloud/ods-stencil/libraries/stencil-testing'; -import '../../components'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; -console.log('1 getOdsWindow()', (getOdsWindow() as any)) describe('e2e:osds-checkbox', () => { let page: E2EPage; let el: E2EElement; @@ -43,7 +24,7 @@ describe('e2e:osds-checkbox', () => { let inputCheckedProperty: boolean; let activeElementId: string | undefined; const logger = new OdsLogger('e2e:osds-checkbox'); - const spyEvent = async (eventName: keyof OdsCheckboxEvents) => await el.spyOnEvent(eventName); + const spyEvent = async (eventName: keyof OdsCheckboxEvent) => await el.spyOnEvent(eventName); async function setup({ attributes = {}, @@ -51,16 +32,16 @@ describe('e2e:osds-checkbox', () => { html = '', htmlOutside = '', onPage, - }: { attributes?: Partial, html?: string, htmlOutside?: string, nativeAttributes?: Partial, onPage?: ({ page }: { page: E2EPage }) => void } = {}) { - const minimalAttributes: OdsCheckboxAttributes = OdsCreateAttributes(attributes, odsCheckboxBaseAttributes); - const stringAttributes = OdsComponentAttributes2StringAttributes(minimalAttributes, odsCheckboxDefaultAttributes); - const nativeStringAttributes = OdsComponentAttributes2StringAttributes>(nativeAttributes, {}); + }: { attributes?: Partial, html?: string, htmlOutside?: string, nativeAttributes?: Partial, onPage?: ({ page }: { page: E2EPage }) => void } = {}) { + const baseAttribute = { ariaLabel: '', checked: false, disabled: false, hasFocus: false, updating: false, value: '' }; + const stringAttributes = odsComponentAttributes2StringAttributes({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE); + const nativeStringAttributes = odsComponentAttributes2StringAttributes>(nativeAttributes, {}); page = await newE2EPage(); onPage && onPage({ page }); await page.setContent(` - + ${html} ${htmlOutside} @@ -70,7 +51,6 @@ describe('e2e:osds-checkbox', () => { el = await page.find('osds-checkbox'); checkboxableElement = await page.find('osds-checkbox:first-child'); inputElement = await page.find('osds-checkbox >>> input[type="checkbox"]'); - console.log('3 getOdsWindow()', (getOdsWindow() as any)) } /** @@ -100,7 +80,7 @@ describe('e2e:osds-checkbox', () => { * @param withError - with error or not */ function getSaveCbk(withError: boolean) { - const cbk: OdsCheckbox['save'] = ({ checked, value }) => { + const cbk: OsdsCheckbox['save'] = ({ checked, value }) => { return odsGetSimulatedPromise(withError, () => { logger.log(`simulated promise result. withError=${withError}, checked=${checked}, value=${value}`); }); @@ -256,7 +236,7 @@ describe('e2e:osds-checkbox', () => { const odsUpdatingChange = await spyEvent('odsUpdatingChange'); await page.waitForChanges(); - await osdsSetPropertyFunction(page, 'osds-checkbox', 'save', getSaveCbk(false)); + await osdsSetPropertyFunction(page, 'osds-checkbox', 'save', getSaveCbk(false)); await page.waitForChanges(); await toggleByClick(); diff --git a/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.scss b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.scss similarity index 100% rename from packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.scss rename to packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.scss diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts new file mode 100644 index 0000000000..04981ee69f --- /dev/null +++ b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts @@ -0,0 +1,285 @@ +// jest.mock('@ovhcloud/ods-core/src/components/checkbox/ods-checkbox-controller'); // keep jest.mock before any import + +import type { OdsCheckboxAttribute } from './interfaces/attributes'; +import type { SpecPage } from '@stencil/core/testing'; +import { newSpecPage } from '@stencil/core/testing'; +import { OsdsCheckbox } from './osds-checkbox'; +import { + odsComponentAttributes2StringAttributes, + odsGetSimulatedPromise, + OdsMockNativeMethod, + odsStringAttributes2Str, + odsUnitTestAttribute, + OdsUnitTestAttributeType, +} from '@ovhcloud/ods-common-testing'; +import { OdsCheckboxController } from './core/ods-checkbox-controller'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; + +describe('spec:osds-checkbox', () => { + let page: SpecPage; + let htmlCheckbox: (OsdsCheckbox & HTMLElement) | null | undefined; + let mainSlot: HTMLElement | null | undefined; + let instance: OsdsCheckbox; + let shadowRoot: ShadowRoot | null | undefined; + let controller: OdsCheckboxController; + /** base html template (avoid boilerplate) */ + const baseHtml = (slots: { unnamed?: string }) => + ` + ${slots.unnamed || slots.unnamed === '' ? slots.unnamed : ``} + `; + + async function setup({ attributes = {}, html = `` }: { attributes?: Partial, html?: string }) { + const baseAttribute = { ariaLabel: '', checked: false, disabled: false, hasFocus: false, updating: false, value: '' }; + const stringAttributes = odsComponentAttributes2StringAttributes({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE); + + // mock setCustomValidity method that does not exist when stencil mock HTMLInputElement + OdsMockNativeMethod(HTMLInputElement.prototype, "focus", jest.fn()); + + page = await newSpecPage({ + components: [OsdsCheckbox], + html: `${html}`, + }); + + instance = page.rootInstance; + + shadowRoot = page.root?.shadowRoot; + htmlCheckbox = shadowRoot?.querySelector('input[type=checkbox]'); + + // note: assigned slot not yet available in HtmlMockedElement of stencil : https://github.com/ionic-team/stencil/issues/2830 + mainSlot = shadowRoot?.querySelector('slot:not([name])'); + + // controller = (OdsCheckboxController as unknown as jest.SpyInstance).mock.instances[ 0 ]; + } + + afterEach(() => { + jest.clearAllMocks(); + }); + + fit('should render', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(shadowRoot).toBeTruthy(); + expect(instance).toBeTruthy(); + }); + + it('should call afterInit', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(controller.afterInit).toHaveBeenCalledWith(); + expect(controller.afterInit).toHaveBeenCalledTimes(1); + }); + + describe('contents', () => { + it('should have a main slot', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(mainSlot).toBeTruthy(); + }); + }); + + it('should have a native html checkbox inside', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(htmlCheckbox).toBeTruthy(); + }); + + describe('attributes', () => { + + const config = { + instance: () => instance, + page: () => page, + root: () => page.root, + wait: () => page.waitForChanges(), + }; + + // todo: make work with properties that can't be processed as attribute + xdescribe('afterSave', () => { + odsUnitTestAttribute({ + name: 'afterSave', + defaultValue: DEFAULT_ATTRIBUTE.afterSave, + value: () => odsGetSimulatedPromise(false, () => undefined), + newValue: () => odsGetSimulatedPromise(true, () => undefined), + setup: (afterSave) => setup({ attributes: { afterSave } }), + ...config, + include: [OdsUnitTestAttributeType.MUTABLE], + exclude: [OdsUnitTestAttributeType.REFLECTED] + }); + }); + + describe('ariaLabel', () => { + odsUnitTestAttribute({ + name: 'ariaLabel', + defaultValue: DEFAULT_ATTRIBUTE.ariaLabel, + value: 'oles', + newValue: 'ipsum', + setup: (ariaLabel) => setup({ attributes: { ariaLabel } }), + ...config, + }); + }); + + describe('ariaLabelledby', () => { + odsUnitTestAttribute({ + name: 'ariaLabelledby', + defaultValue: DEFAULT_ATTRIBUTE.ariaLabelledby, + value: 'oles', + newValue: 'ipsum', + setup: (ariaLabelledby) => setup({ attributes: { ariaLabelledby } }), + ...config, + exclude: [OdsUnitTestAttributeType.REFLECTED, OdsUnitTestAttributeType.MUTABLE, OdsUnitTestAttributeType.PROPERTY] + }); + }); + + // todo: make work with properties that can't be processed as attribute + xdescribe('beforeSave', () => { + odsUnitTestAttribute({ + name: 'beforeSave', + defaultValue: DEFAULT_ATTRIBUTE.beforeSave, + value: () => odsGetSimulatedPromise(false, () => undefined), + newValue: () => odsGetSimulatedPromise(true, () => undefined), + setup: (value) => setup({ attributes: { beforeSave: value } }), + ...config, + include: [OdsUnitTestAttributeType.MUTABLE], + exclude: [OdsUnitTestAttributeType.REFLECTED] + }); + }); + + describe('checked', () => { + odsUnitTestAttribute({ + name: 'checked', + defaultValue: DEFAULT_ATTRIBUTE.checked, + value: false, + newValue: true, + setup: (checked) => setup({ attributes: { checked } }), + ...config, + include: [OdsUnitTestAttributeType.MUTABLE], + }) + }); + + describe('disabled', () => { + odsUnitTestAttribute({ + name: 'disabled', + defaultValue: DEFAULT_ATTRIBUTE.disabled, + value: false, + newValue: true, + setup: (disabled) => setup({ attributes: { disabled } }), + ...config, + }); + }); + + describe('hasFocus', () => { + odsUnitTestAttribute({ + name: 'hasFocus', + defaultValue: DEFAULT_ATTRIBUTE.hasFocus, + value: false, + newValue: true, + setup: (hasFocus) => setup({ attributes: { hasFocus } }), + ...config, + include: [OdsUnitTestAttributeType.MUTABLE] + }); + }); + + describe('label', () => { + odsUnitTestAttribute({ + name: 'label', + defaultValue: DEFAULT_ATTRIBUTE.label, + value: 'oles', + newValue: 'ipsum', + setup: (label) => setup({ attributes: { label } }), + ...config + }); + }); + + describe('name', () => { + odsUnitTestAttribute({ + name: 'name', + defaultValue: DEFAULT_ATTRIBUTE.name, + value: 'oles', + newValue: 'ipsum', + setup: (name) => setup({ attributes: { name } }), + ...config, + }); + }); + + // todo: make work with properties that can't be processed as attribute + xdescribe('save', () => { + odsUnitTestAttribute({ + name: 'save', + value: () => odsGetSimulatedPromise(false, () => undefined), + newValue: () => odsGetSimulatedPromise(true, () => undefined), + setup: (save) => setup({ attributes: { save } }), + defaultValue: DEFAULT_ATTRIBUTE.save, + ...config, + include: [OdsUnitTestAttributeType.MUTABLE], + exclude: [OdsUnitTestAttributeType.REFLECTED] + }); + }); + + describe('updating', () => { + odsUnitTestAttribute({ + name: 'updating', + defaultValue: DEFAULT_ATTRIBUTE.updating, + value: false, + newValue: true, + setup: (updating) => setup({ attributes: { updating } }), + ...config, + include: [OdsUnitTestAttributeType.MUTABLE], + }); + }); + + describe('value', () => { + odsUnitTestAttribute({ + name: 'value', + defaultValue: DEFAULT_ATTRIBUTE.value, + value: 'oles', + newValue: 'ipsum', + setup: (value) => setup({ attributes: { value } }), + ...config, + include: [OdsUnitTestAttributeType.MUTABLE] + }); + }); + }); + + /** + * @see OdsCheckboxEvents + */ + describe('events', () => { + it('odsCheckedChange', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(instance.odsCheckedChange).toBeTruthy(); + }); + + it('odsUpdatingChange', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(instance.odsUpdatingChange).toBeTruthy(); + }); + + it('odsBlur', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(instance.odsBlur).toBeTruthy(); + }); + + it('odsFocus', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + expect(instance.odsFocus).toBeTruthy(); + }); + }); + + /** + * @see OdsCheckboxMethods + */ + describe('methods', () => { + it('should call setButtonTabindex function and buttonTabindex should be set to 1', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + await page.waitForChanges(); + await instance.setTabindex(1); + await page.waitForChanges(); + expect(controller.setTabindex).toHaveBeenCalledWith(1); + }); + + it('should call setFocus function', async () => { + await setup({ attributes: {}, html: baseHtml({}) }); + await page.waitForChanges(); + expect(htmlCheckbox).toBeTruthy(); + await instance.setFocus(); + await page.waitForChanges(); + expect(controller.setFocus).toHaveBeenCalledWith(); + }); + }); + +}); diff --git a/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx similarity index 53% rename from packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx rename to packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx index 89c8cbbabd..c1a60a101a 100644 --- a/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx +++ b/packages-new/components/checkbox/src/components/osds-checkbox/osds-checkbox.tsx @@ -1,76 +1,71 @@ -import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core'; -import { - OdsCheckbox, - OdsCheckboxable, OdsCheckboxAttributeCbk, +import type { HTMLStencilElement } from '@stencil/core/internal'; +import type { OdsCheckboxCheckedChangeEventDetail, - OdsCheckboxController, - odsCheckboxDefaultAttributes, - OdsCheckboxEvents, + OdsCheckboxEvent, OdsCheckboxFocusChangeEventDetail, - OdsCheckboxMethods, OdsCheckboxUpdatingChangeEventDetail, - OdsLogger -} from '@ovhcloud/ods-core'; -import { HTMLStencilElement } from '@stencil/core/internal'; -import { Build } from '@stencil/core'; -import { OdsStencilEvents, OdsStencilMethods } from '@ovhcloud/ods-stencil/libraries/stencil-core'; -import { getOdsWindow } from '@ovhcloud/ods-core'; +} from './interfaces/events'; +import type { OdsCheckboxAttribute, OdsCheckboxAttributeCbk } from './interfaces/attributes'; +import type { OdsCheckboxMethod } from './interfaces/methods'; +import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core'; +import { + OdsCheckboxable, + OdsLogger, +} from '@ovhcloud/ods-common-core'; +import { OdsCheckboxController } from './core/ods-checkbox-controller'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; @Component({ tag: 'osds-checkbox', styleUrl: 'osds-checkbox.scss', shadow: true, }) -export class OsdsCheckbox implements OdsCheckbox, OdsStencilEvents> { +class OsdsCheckbox implements OdsCheckboxMethod, OdsCheckboxEvent, OdsCheckboxAttribute { private static checkboxIds = 0; - /** @see OdsCheckboxAttributes.afterSave */ - @Prop() afterSave?:OdsCheckboxAttributeCbk = odsCheckboxDefaultAttributes.afterSave; - /** @see OdsCheckboxAttributes.ariaLabel */ - @Prop({ reflect: true }) ariaLabel = odsCheckboxDefaultAttributes.ariaLabel; - /** @see OdsCheckboxAttributes.ariaLabelledby */ - @Prop() ariaLabelledby? = odsCheckboxDefaultAttributes.ariaLabelledby; - /** @see OdsCheckboxAttributes.beforeSave */ - @Prop() beforeSave?:OdsCheckboxAttributeCbk = odsCheckboxDefaultAttributes.beforeSave; - /** @see OdsCheckboxBehavior.checkboxableComponent */ - checkboxableComponent: (HTMLStencilElement & OdsCheckboxable) | null = null; - /** @see OdsCheckboxAttributes.checked */ - @Prop({ reflect: true, mutable: true }) checked = odsCheckboxDefaultAttributes.checked; /** @see OdsComponent.controller */ - controller: OdsCheckboxController = new OdsCheckboxController(this as OdsCheckbox); - /** @see OdsCheckboxAttributes.disabled */ - @Prop({ reflect: true}) disabled = odsCheckboxDefaultAttributes.disabled; - /** @see OdsCheckboxAttributes.hasFocus */ - @Prop({ reflect: true, mutable: true }) hasFocus = odsCheckboxDefaultAttributes.hasFocus; - /** @see OdsCheckboxBehavior.hostElement */ + controller = new OdsCheckboxController(this); + private readonly inputId = `ods-checkbox-${OsdsCheckbox.checkboxIds++}`; + private readonly logger = new OdsLogger('OsdsCheckbox'); + @Element() hostElement!: HTMLStencilElement; - /** @see OdsCheckboxBehavior.inputEl */ inputEl?: HTMLInputElement; - /** @see OdsCheckboxAttributes.label */ + checkboxableComponent: (HTMLStencilElement & OdsCheckboxable) | null = null; + @State() tabindex = 0; + + /** @see OdsCheckboxAttribute.afterSave */ + @Prop() afterSave?: OdsCheckboxAttributeCbk = DEFAULT_ATTRIBUTE.afterSave; + /** @see OdsCheckboxAttribute.ariaLabel */ + @Prop({ reflect: true }) ariaLabel = DEFAULT_ATTRIBUTE.ariaLabel; + /** @see OdsCheckboxAttribute.ariaLabelledby */ + @Prop() ariaLabelledby? = DEFAULT_ATTRIBUTE.ariaLabelledby; + /** @see OdsCheckboxAttribute.beforeSave */ + @Prop() beforeSave?: OdsCheckboxAttributeCbk = DEFAULT_ATTRIBUTE.beforeSave; + /** @see OdsCheckboxAttribute.checked */ + @Prop({ reflect: true, mutable: true }) checked = DEFAULT_ATTRIBUTE.checked; + /** @see OdsCheckboxAttribute.disabled */ + @Prop({ reflect: true}) disabled = DEFAULT_ATTRIBUTE.disabled; + /** @see OdsCheckboxAttribute.hasFocus */ + @Prop({ reflect: true, mutable: true }) hasFocus = DEFAULT_ATTRIBUTE.hasFocus; + /** @see OdsCheckboxAttribute.label */ @Prop() label?: string; - /** @see OdsCheckboxAttributes.name */ - @Prop({ reflect: true }) name?: string = odsCheckboxDefaultAttributes.name; - /** @see OdsCheckboxEvents.odsBlur */ + /** @see OdsCheckboxAttribute.name */ + @Prop({ reflect: true }) name?: string = DEFAULT_ATTRIBUTE.name; + /** @see OdsCheckboxAttribute.save */ + @Prop({ mutable: true }) save?:OdsCheckboxAttributeCbk = DEFAULT_ATTRIBUTE.save; + /** @see OdsCheckboxAttribute.updating */ + @Prop({ reflect: true, mutable: true }) updating = DEFAULT_ATTRIBUTE.updating; + /** @see OdsCheckboxAttribute.value */ + @Prop({ reflect: true, mutable: true }) value = DEFAULT_ATTRIBUTE.value; + + /** @see OdsCheckboxEvent.odsBlur */ @Event() odsBlur!: EventEmitter; - /** @see OdsCheckboxEvents.odsCheckedChange */ + /** @see OdsCheckboxEvent.odsCheckedChange */ @Event() odsCheckedChange!: EventEmitter; - /** @see OdsCheckboxEvents.odsFocus */ + /** @see OdsCheckboxEvent.odsFocus */ @Event() odsFocus!: EventEmitter; - /** @see OdsCheckboxEvents.odsUpdatingChange */ + /** @see OdsCheckboxEvent.odsUpdatingChange */ @Event() odsUpdatingChange!: EventEmitter; - /** @see OdsCheckboxAttributes.save */ - @Prop({ mutable: true }) save?:OdsCheckboxAttributeCbk = odsCheckboxDefaultAttributes.save; - /** @see OdsCheckboxBehavior.tabindex */ - @State() tabindex = 0; - /** @see OdsCheckboxAttributes.updating */ - @Prop({ reflect: true, mutable: true }) updating = odsCheckboxDefaultAttributes.updating; - /** @see OdsCheckboxAttributes.value */ - @Prop({ reflect: true, mutable: true }) value = odsCheckboxDefaultAttributes.value; - private readonly inputId = `ods-checkbox-${OsdsCheckbox.checkboxIds++}`; - private readonly logger = new OdsLogger('OsdsCheckbox'); - /** - * @see OdsCheckboxBehavior.afterInit - */ afterInit() { this.controller.afterInit(); } @@ -82,51 +77,29 @@ export class OsdsCheckbox implements OdsCheckbox ); } - - /** - * @see OdsCheckboxMethods.setFocus - */ - @Method() - async setFocus() { - this.controller.setFocus(); - } - - /** - * @see OdsCheckboxMethods.setTabindex - */ - @Method() - async setTabindex(index: number) { - this.controller.setTabindex(index); - } - } + +export { + OsdsCheckbox, +} \ No newline at end of file diff --git a/packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts b/packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts new file mode 100644 index 0000000000..60e4ba5568 --- /dev/null +++ b/packages-new/components/checkbox/src/components/osds-checkbox/public-api.ts @@ -0,0 +1,9 @@ +export { OsdsCheckbox } from './osds-checkbox'; +export { OdsCheckboxAttribute } from './interfaces/attributes'; +export { OdsCheckboxMethod } from './interfaces/methods'; +export { + OdsCheckboxEvent, + OdsCheckboxFocusChangeEventDetail, + OdsCheckboxUpdatingChangeEventDetail, + OdsCheckboxCheckedChangeEventDetail, +} from './interfaces/events'; diff --git a/packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.basic.mdx b/packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.basic.mdx similarity index 100% rename from packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.basic.mdx rename to packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.basic.mdx diff --git a/packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.checked.mdx b/packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.checked.mdx similarity index 100% rename from packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.checked.mdx rename to packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.checked.mdx diff --git a/packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.disabled.mdx b/packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.disabled.mdx similarity index 100% rename from packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.disabled.mdx rename to packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.disabled.mdx diff --git a/packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.standalone.mdx b/packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.standalone.mdx similarity index 100% rename from packages/stencil/components/checkbox/docs/osds-checkbox/properties/usage.standalone.mdx rename to packages-new/components/checkbox/src/docs/osds-checkbox/properties/usage.standalone.mdx diff --git a/packages-new/components/checkbox/src/docs/osds-checkbox/usage.mdx b/packages-new/components/checkbox/src/docs/osds-checkbox/usage.mdx new file mode 100644 index 0000000000..d6d634035f --- /dev/null +++ b/packages-new/components/checkbox/src/docs/osds-checkbox/usage.mdx @@ -0,0 +1,22 @@ +import UsageBasic from './properties/usage.basic.mdx'; +import UsageChecked from './properties/usage.checked.mdx'; +import UsageDisabled from './properties/usage.disabled.mdx'; +import UsageStandalone from './properties/usage.standalone.mdx'; + +## Usage + +### Basic + + + +### Checked + + + +### Disabled + + + +### Standalone + + diff --git a/packages-new/components/checkbox/src/global.dev.ts b/packages-new/components/checkbox/src/global.dev.ts new file mode 100644 index 0000000000..d5bec488c8 --- /dev/null +++ b/packages-new/components/checkbox/src/global.dev.ts @@ -0,0 +1,16 @@ +// ### +// global script file to include only in dev mode with the www dev server. +// it always has to include './components' and './global.ts' +// ### + +import { OdsLogger } from '@ovhcloud/ods-common-core'; +import './components'; +import './global'; +import '@ovhcloud/ods-component-tile'; + +const logger = new OdsLogger('global-dev'); +logger.log('init'); + +(async () => { + await customElements.whenDefined('osds-checkbox'); +})(); \ No newline at end of file diff --git a/packages/stencil/components/checkbox/src/global.prod.ts b/packages-new/components/checkbox/src/global.prod.ts similarity index 100% rename from packages/stencil/components/checkbox/src/global.prod.ts rename to packages-new/components/checkbox/src/global.prod.ts diff --git a/packages/stencil/components/checkbox/src/global.test.ts b/packages-new/components/checkbox/src/global.test.ts similarity index 100% rename from packages/stencil/components/checkbox/src/global.test.ts rename to packages-new/components/checkbox/src/global.test.ts diff --git a/packages/stencil/components/checkbox/src/global.ts b/packages-new/components/checkbox/src/global.ts similarity index 100% rename from packages/stencil/components/checkbox/src/global.ts rename to packages-new/components/checkbox/src/global.ts diff --git a/packages/stencil/components/checkbox/src/index.html b/packages-new/components/checkbox/src/index.html similarity index 80% rename from packages/stencil/components/checkbox/src/index.html rename to packages-new/components/checkbox/src/index.html index 48315cad40..9f7e0c78de 100644 --- a/packages/stencil/components/checkbox/src/index.html +++ b/packages-new/components/checkbox/src/index.html @@ -65,6 +65,26 @@ diff --git a/packages/stencil/components/checkbox/src/index.ts b/packages-new/components/checkbox/src/index.ts similarity index 100% rename from packages/stencil/components/checkbox/src/index.ts rename to packages-new/components/checkbox/src/index.ts diff --git a/packages/stencil/components/checkbox/src/interface.d.ts b/packages-new/components/checkbox/src/interface.d.ts similarity index 100% rename from packages/stencil/components/checkbox/src/interface.d.ts rename to packages-new/components/checkbox/src/interface.d.ts diff --git a/packages-new/components/checkbox/stencil.config.ts b/packages-new/components/checkbox/stencil.config.ts new file mode 100644 index 0000000000..1cd3c293cd --- /dev/null +++ b/packages-new/components/checkbox/stencil.config.ts @@ -0,0 +1,30 @@ +import { getStencilConfig } from '@ovhcloud/ods-common-stencil'; +import * as jestConfig from './jest.config'; + +const args = process.argv.slice(2); + +const config = getStencilConfig({ + namespace: 'osds-checkbox', + args, + jestConfig: jestConfig.default, + reactOutput: { + componentCorePackage: '@ovhcloud/ods-component-checkbox', + // exclude peer dependencies that corresponds to www usage + excludeComponents: [] + }, + vueOutput: { + componentCorePackage: '@ovhcloud/ods-component-checkbox', + excludeComponents: [] + }, + dev: { + globalScript: 'src/global.dev.ts', + }, + prod: { + globalScript: 'src/global.prod.ts' + }, + test: { + globalScript: 'src/global.test.ts', + } +}); + +export { config }; diff --git a/packages/stencil/components/checkbox/tsconfig.dev.json b/packages-new/components/checkbox/tsconfig.dev.json similarity index 100% rename from packages/stencil/components/checkbox/tsconfig.dev.json rename to packages-new/components/checkbox/tsconfig.dev.json diff --git a/packages/stencil/components/checkbox/tsconfig.json b/packages-new/components/checkbox/tsconfig.json similarity index 100% rename from packages/stencil/components/checkbox/tsconfig.json rename to packages-new/components/checkbox/tsconfig.json diff --git a/packages/stencil/components/checkbox/tsconfig.prod.json b/packages-new/components/checkbox/tsconfig.prod.json similarity index 100% rename from packages/stencil/components/checkbox/tsconfig.prod.json rename to packages-new/components/checkbox/tsconfig.prod.json diff --git a/packages/stencil/components/checkbox/tsconfig.test.json b/packages-new/components/checkbox/tsconfig.test.json similarity index 100% rename from packages/stencil/components/checkbox/tsconfig.test.json rename to packages-new/components/checkbox/tsconfig.test.json diff --git a/packages/stencil/components/checkbox/typedoc.json b/packages-new/components/checkbox/typedoc.json similarity index 72% rename from packages/stencil/components/checkbox/typedoc.json rename to packages-new/components/checkbox/typedoc.json index b58206b97f..5f4a48fce5 100644 --- a/packages/stencil/components/checkbox/typedoc.json +++ b/packages-new/components/checkbox/typedoc.json @@ -1,6 +1,6 @@ { "entryPoints": ["src"], - "out": "docs-api/stencil-components-checkbox", + "out": "docs-api/ods-component-checkbox", "tsconfig":"tsconfig.prod.json", "exclude": "**/*+(index|.spec|.e2e|.d).ts", "plugin": "none" diff --git a/packages/stencil/components/checkbox/vue/.gitignore b/packages-new/components/checkbox/vue/.gitignore similarity index 100% rename from packages/stencil/components/checkbox/vue/.gitignore rename to packages-new/components/checkbox/vue/.gitignore diff --git a/packages/stencil/components/checkbox/vue/.npmignore b/packages-new/components/checkbox/vue/.npmignore similarity index 100% rename from packages/stencil/components/checkbox/vue/.npmignore rename to packages-new/components/checkbox/vue/.npmignore diff --git a/packages/stencil/components/checkbox/vue/CHANGELOG.md b/packages-new/components/checkbox/vue/CHANGELOG.md similarity index 100% rename from packages/stencil/components/checkbox/vue/CHANGELOG.md rename to packages-new/components/checkbox/vue/CHANGELOG.md diff --git a/packages/stencil/components/checkbox/vue/package.json b/packages-new/components/checkbox/vue/package.json similarity index 79% rename from packages/stencil/components/checkbox/vue/package.json rename to packages-new/components/checkbox/vue/package.json index 864764e620..b6a0518d48 100644 --- a/packages/stencil/components/checkbox/vue/package.json +++ b/packages-new/components/checkbox/vue/package.json @@ -1,5 +1,5 @@ { - "name": "@ovhcloud/ods-stencil-checkbox-vue", + "name": "@ovhcloud/ods-component-checkbox-vue", "version": "15.0.1", "private": true, "description": "Vue specific wrapper for ods", @@ -20,14 +20,12 @@ "dist/" ], "dependencies": { - "@ovhcloud/ods-stencil-checkbox": "^15.0.1" + "@ovhcloud/ods-component-checkbox": "^15.0.1" }, "peerDependencies": { "vue": ">=3" }, "devDependencies": { - "rimraf": "^3.0.2", - "typescript": "4.7.4", - "vue": "^3.2.41" + "@ovhcloud/ods-vue-dev": "^15.0.1" } } diff --git a/packages/stencil/components/checkbox/vue/tsconfig.cjs.json b/packages-new/components/checkbox/vue/tsconfig.cjs.json similarity index 100% rename from packages/stencil/components/checkbox/vue/tsconfig.cjs.json rename to packages-new/components/checkbox/vue/tsconfig.cjs.json diff --git a/packages/stencil/components/checkbox/vue/tsconfig.json b/packages-new/components/checkbox/vue/tsconfig.json similarity index 100% rename from packages/stencil/components/checkbox/vue/tsconfig.json rename to packages-new/components/checkbox/vue/tsconfig.json diff --git a/packages-new/components/package.json b/packages-new/components/package.json index 5488b01057..bfe84e2b63 100644 --- a/packages-new/components/package.json +++ b/packages-new/components/package.json @@ -7,6 +7,7 @@ "dependencies": { "@ovhcloud/ods-component-breadcrumb": "^15.0.1", "@ovhcloud/ods-component-button": "^15.0.1", + "@ovhcloud/ods-component-checkbox": "^15.0.1", "@ovhcloud/ods-component-chip": "^15.0.1", "@ovhcloud/ods-component-collapsible": "^15.0.1", "@ovhcloud/ods-component-content-addon": "^15.0.1", diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-attribute-cbk.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox-attribute-cbk.ts deleted file mode 100644 index 08f8984d80..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-attribute-cbk.ts +++ /dev/null @@ -1 +0,0 @@ -export type OdsCheckboxAttributeCbk = ({ checked, value }: { checked: boolean, value: HTMLInputElement['value'] }) => Promise; diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-checked-change-event-detail.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox-checked-change-event-detail.ts deleted file mode 100644 index d6424e483f..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-checked-change-event-detail.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface OdsCheckboxCheckedChangeEventDetail { - checked: boolean; - value: string; -} diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-default-attributes.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox-default-attributes.ts deleted file mode 100644 index cb2cf20ef6..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-default-attributes.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { OdsCheckboxAttributes } from './ods-checkbox-attributes'; - -/** - * default attribute values of checkbox - */ -export const odsCheckboxDefaultAttributesDoc = { - afterSave: undefined, - ariaLabel: '', - ariaLabelledby: undefined, - beforeSave: undefined, - checked: false, - hasFocus: false, - disabled: false, - label: undefined, - name: '', - save: undefined, - updating: false, - value: '', -} as const; - -export const odsCheckboxDefaultAttributes = odsCheckboxDefaultAttributesDoc as OdsCheckboxAttributes; diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-events.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox-events.ts deleted file mode 100644 index f41df6bc0f..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-events.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { OdsComponentEvents } from '../ods-component-events'; -import { OdsCheckboxCheckedChangeEventDetail } from './ods-checkbox-checked-change-event-detail'; -import { OdsCheckboxUpdatingChangeEventDetail } from './ods-checkbox-updating-change-event-detail'; -import { OdsCheckboxFocusChangeEventDetail } from './ods-checkbox-focus-change-event-detail'; - -export interface OdsCheckboxEvents extends OdsComponentEvents { - /** - * Event triggered on checkbox blur - * @see OdsCheckboxBehavior.onBlur - * @see OdsCheckboxBehavior.emitBlur - */ - odsBlur: OdsCheckboxFocusChangeEventDetail; - /** - * the checked state changed - * @see OdsCheckboxBehavior.emitChecked - */ - odsCheckedChange: OdsCheckboxCheckedChangeEventDetail; - /** - * Event triggered on checkbox focus - * @see OdsCheckboxBehavior.onFocus - * @see OdsCheckboxBehavior.emitFocus - */ - odsFocus: OdsCheckboxFocusChangeEventDetail; - /** - * the checked state is being changed - * @see OdsCheckboxBehavior.emitUpdating - */ - odsUpdatingChange: OdsCheckboxUpdatingChangeEventDetail; -} diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-focus-change-event-detail.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox-focus-change-event-detail.ts deleted file mode 100644 index 18632d7a65..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-focus-change-event-detail.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { OdsFocusChangeEventDetail } from '../ods-focus-change-event-detail'; - -/** - * event detail of checkbox when focusing and blurring - */ -export interface OdsCheckboxFocusChangeEventDetail extends OdsFocusChangeEventDetail { - value: string; -} diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox-updating-change-event-detail.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox-updating-change-event-detail.ts deleted file mode 100644 index 0035a27a61..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox-updating-change-event-detail.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface OdsCheckboxUpdatingChangeEventDetail { - updating: boolean; - value: string; -} diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox.mock.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox.mock.ts deleted file mode 100644 index dd32818b8f..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox.mock.ts +++ /dev/null @@ -1,64 +0,0 @@ -/* eslint-disable @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars */ -import { OdsCheckbox } from './ods-checkbox'; -import { OdsCheckboxMethods } from './ods-checkbox-methods'; -import { OdsCheckboxEvents } from './ods-checkbox-events'; -import { OdsCheckboxable } from '../../utils/checkbox/ods-checkboxable'; -import { OdsCheckboxController } from './ods-checkbox-controller'; -import { OdsCheckboxFocusChangeEventDetail } from './ods-checkbox-focus-change-event-detail'; -import { OdsCheckboxUpdatingChangeEventDetail } from './ods-checkbox-updating-change-event-detail'; -import { OdsCheckboxCheckedChangeEventDetail } from './ods-checkbox-checked-change-event-detail'; - -/** - * Mocked generic implementation that represents an `OdsCheckbox`. - * it allows to test the controller with a stub implementation. - */ -export class OdsCheckboxMock implements OdsCheckbox { - ariaLabel = ''; - ariaLabelledby = ''; - checkboxableComponent: (HTMLElement & OdsCheckboxable) | null = null; - checked = false; - controller: OdsCheckboxController = jest.fn() as unknown as OdsCheckboxController; - disabled = false; - hasFocus = false; - hostElement!: HTMLElement; - inputEl?: HTMLInputElement; - label = ''; - name: HTMLInputElement["name"] = ''; - odsBlur!: OdsCheckboxFocusChangeEventDetail; - odsCheckedChange!: OdsCheckboxCheckedChangeEventDetail; - odsFocus!: OdsCheckboxFocusChangeEventDetail; - odsUpdatingChange!: OdsCheckboxUpdatingChangeEventDetail; - tabindex = 0; - updating = false; - value: HTMLInputElement["value"] = ''; - - emitBlur = jest.fn(); - - emitChecked = jest.fn(); - - emitFocus = jest.fn(); - - emitUpdating = jest.fn(); - - getTabIndex = jest.fn(); - - handleToggleByClick = jest.fn(); - - handleToggleByKeyEvent = jest.fn() - - onBlur = jest.fn(); - - onFocus = jest.fn(); - - propagateCheckedToChild = jest.fn() - - propagateDisabledToChild = jest.fn() - - propagateHasFocusToChild = jest.fn() - - setFocus = jest.fn(); - - setTabindex = jest.fn() - - afterInit = jest.fn(); -} diff --git a/packages/libraries/core/src/components/checkbox/ods-checkbox.ts b/packages/libraries/core/src/components/checkbox/ods-checkbox.ts deleted file mode 100644 index 77c8da30c7..0000000000 --- a/packages/libraries/core/src/components/checkbox/ods-checkbox.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { OdsComponentGenericMethods } from '../ods-component-generic-methods'; -import { OdsComponentGenericEvents } from '../ods-component-generic-events'; -import { OdsComponent } from '../ods-component'; -import { OdsCheckboxMethods } from './ods-checkbox-methods'; -import { OdsCheckboxEvents } from './ods-checkbox-events'; -import { OdsCheckboxAttributes } from './ods-checkbox-attributes'; -import { OdsCheckboxController } from './ods-checkbox-controller'; -import { OdsCheckboxable } from '../../utils/checkbox/ods-checkboxable'; - -/** - * internal methods to implement. - * public method are in OdsCheckboxMethods - * @see OdsCheckboxMethods - */ -export interface OdsCheckboxBehavior { - /** - * reference to the host element of the component - */ - hostElement: Host; - - /** - * reference to the native input element inside the component. - * could be undefined if the reference is not yet filled. - */ - inputEl?: HTMLInputElement; - - /** - * current tab index parameter. - * this will be ignored in case of component disabled. - * must be `0` by default - */ - tabindex: number; - - /** - * component that have to be managed by the checkbox smart component. - * for instance: a tile, a toggle - */ - checkboxableComponent: (CheckboxableComponent & OdsCheckboxable) | null; - - /** - * emit an event when the checked state changed - * @see OdsCheckboxController.emitChecked - */ - emitChecked(): void; - - /** - * emit an event when the checked state is being updated - * @see OdsCheckboxController.emitUpdating - */ - emitUpdating(): void; - - /** - * propagate disabled attribute to the component (like tile or toggle). - * this method should be call on `disabled` attribute changed. - * this method has to call OdsCheckboxController.propagateDisabledToChild - * @see OdsCheckboxController.propagateDisabledToChild - */ - propagateDisabledToChild(disabled: boolean): void; - - /** - * propagate checked attribute to the component (like tile or toggle). - * this method should be call on `checked` attribute changed. - * this method has to call OdsCheckboxController.propagateCheckedToChild - * @see OdsCheckboxController.propagateCheckedToChild - */ - propagateCheckedToChild(checked: boolean): void; - - /** - * propagate hasFocus attribute to the component (like tile or toggle). - * this method should be call on `hasFocus` attribute changed. - * this method has to call OdsCheckboxController.propagateHasFocusToChild - * @see OdsCheckboxController.propagateHasFocusToChild - */ - propagateHasFocusToChild(checked: boolean): void; - - /** - * handle toggle check on keyboardEvent. - * this method has to call OdsCheckboxController.handleToggleByKeyEvent - * @see OdsCheckboxController.handleToggleByKeyEvent - */ - handleToggleByKeyEvent(event: KeyboardEvent): void; - - /** - * handle toggle check on click MouseEvent. - * this method has to call OdsCheckboxController.handleToggleByClick - * @see OdsCheckboxController.handleToggleByClick - */ - handleToggleByClick(event: MouseEvent): void; - - /** - * method executed after initialization of component - * (`componentDidLoad` with stenciljs for instance). - * this method has to call OdsCheckboxController.afterInit - * @see OdsCheckboxController.afterInit - */ - afterInit(): void; - - /** - * process the blur of the component. - * this method has to call OdsCheckboxController.onBlur - * @see OdsCheckboxController.onBlur - */ - onBlur(): void; - - /** - * process the focus on the component. - * the method should be call when focus event is triggered on component (by click, keyboard) - * this method has to call OdsCheckboxController.onFocus - * @see OdsCheckboxController.onFocus - */ - onFocus(): void; - - /** - * get the current tab index. - * this method has to call OdsCheckboxController.getTabIndex - * @see OdsCheckboxController.getTabIndex - */ - getTabIndex(): number; - - /** - * when a focus is triggered, this method emit the event - */ - emitFocus(): void; - - /** - * when a blur is triggered, this method emit the event - */ - emitBlur(): void; -} - -/** - * interface description of all implementation of `ods-checkbox`. - * each implementation must have defined events, methods, attributes - * and one controller for the common behavior logic - */ -export type OdsCheckbox = OdsComponentGenericMethods, - ComponentEvents extends OdsComponentGenericEvents = OdsComponentGenericEvents> = - OdsComponent; diff --git a/packages/libraries/core/src/components/checkbox/public-api.ts b/packages/libraries/core/src/components/checkbox/public-api.ts deleted file mode 100644 index 6e262cfae9..0000000000 --- a/packages/libraries/core/src/components/checkbox/public-api.ts +++ /dev/null @@ -1,11 +0,0 @@ -// no export of internal : export * from './ods-checkbox.mock'; -export * from './ods-checkbox'; -export * from './ods-checkbox-attribute-cbk'; -export * from './ods-checkbox-attributes'; -export * from './ods-checkbox-checked-change-event-detail'; -export * from './ods-checkbox-controller'; -export * from './ods-checkbox-default-attributes'; -export * from './ods-checkbox-events'; -export * from './ods-checkbox-focus-change-event-detail'; -export * from './ods-checkbox-methods'; -export * from './ods-checkbox-updating-change-event-detail'; diff --git a/packages/libraries/core/src/components/public-api.ts b/packages/libraries/core/src/components/public-api.ts index c8c0fdd491..baa6f6ab18 100644 --- a/packages/libraries/core/src/components/public-api.ts +++ b/packages/libraries/core/src/components/public-api.ts @@ -9,7 +9,6 @@ export * from './cart-manager/public-api'; export * from './cart-section/public-api'; export * from './cart-total/public-api'; export * from './cart/public-api'; -export * from './checkbox/public-api'; export * from './checkbox-button/public-api'; export * from './clipboard/public-api'; export * from './code/public-api'; diff --git a/packages/libraries/testing/src/components/checkbox/ods-checkbox-base-attributes.ts b/packages/libraries/testing/src/components/checkbox/ods-checkbox-base-attributes.ts deleted file mode 100644 index 0979ff0134..0000000000 --- a/packages/libraries/testing/src/components/checkbox/ods-checkbox-base-attributes.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { OdsCheckboxAttributes, odsCheckboxDefaultAttributes } from '@ovhcloud/ods-core'; - -/** - * base attributes value of checkbox - */ -export const odsCheckboxBaseAttributes: OdsCheckboxAttributes = { - ...odsCheckboxDefaultAttributes, - name: 'my-checkbox-name', - value: 'my-value' -}; diff --git a/packages/libraries/testing/src/components/checkbox/public-api.ts b/packages/libraries/testing/src/components/checkbox/public-api.ts deleted file mode 100644 index 05ebe916e7..0000000000 --- a/packages/libraries/testing/src/components/checkbox/public-api.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ods-checkbox-base-attributes'; diff --git a/packages/libraries/testing/src/components/public-api.ts b/packages/libraries/testing/src/components/public-api.ts index 719b0fa094..3e58831171 100644 --- a/packages/libraries/testing/src/components/public-api.ts +++ b/packages/libraries/testing/src/components/public-api.ts @@ -1,6 +1,5 @@ export * from './accordion/public-api'; export * from './cart/public-api'; -export * from './checkbox/public-api'; export * from './checkbox-button/public-api'; export * from './code/public-api'; export * from './flag/public-api'; diff --git a/packages/starters/react-vite/src/demo/Demo.tsx b/packages/starters/react-vite/src/demo/Demo.tsx index 82600435e8..d6c05ebf17 100644 --- a/packages/starters/react-vite/src/demo/Demo.tsx +++ b/packages/starters/react-vite/src/demo/Demo.tsx @@ -3,10 +3,10 @@ import React from 'react'; // you can import react proxy from the independent package import { OsdsButton } from '@ovhcloud/ods-components/button/react'; import { OsdsTile } from '@ovhcloud/ods-components/tile/react'; +import { OsdsCheckbox } from '@ovhcloud/ods-components/checkbox/react'; // you can import multiple react proxies from the grouped package import { - OsdsCheckbox, OsdsCheckboxButton, OsdsMessage, OsdsRadio, diff --git a/packages/starters/react/src/demo/Demo.tsx b/packages/starters/react/src/demo/Demo.tsx index dd7ba5e9a9..6bfe1945c3 100644 --- a/packages/starters/react/src/demo/Demo.tsx +++ b/packages/starters/react/src/demo/Demo.tsx @@ -3,10 +3,10 @@ import React from 'react'; // you can import react proxy from the independent package import { OsdsButton } from '@ovhcloud/ods-components/button/react'; import { OsdsTile } from '@ovhcloud/ods-components/tile/react'; +import { OsdsCheckbox } from '@ovhcloud/ods-components/checkbox/react'; // you can import multiple react proxies from the grouped package import { - OsdsCheckbox, OsdsCheckboxButton, OsdsMessage, OsdsRadio, diff --git a/packages/starters/vue-vite/src/demo/Demo.vue b/packages/starters/vue-vite/src/demo/Demo.vue index 33b6c573ac..f273deffef 100644 --- a/packages/starters/vue-vite/src/demo/Demo.vue +++ b/packages/starters/vue-vite/src/demo/Demo.vue @@ -2,10 +2,10 @@ // you can import react proxy from the independent package import { OsdsButton } from '@ovhcloud/ods-components/button/vue' import { OsdsTile } from '@ovhcloud/ods-components/tile/vue'; +import { OsdsCheckbox } from '@ovhcloud/ods-components/checkbox/vue'; // you can import multiple react proxies from the grouped package import { - OsdsCheckbox, OsdsCheckboxButton, OsdsMessage, OsdsRadio, diff --git a/packages/stencil/components/checkbox/docs/osds-checkbox/usage.mdx b/packages/stencil/components/checkbox/docs/osds-checkbox/usage.mdx deleted file mode 100644 index 25fac73ef6..0000000000 --- a/packages/stencil/components/checkbox/docs/osds-checkbox/usage.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import UsageBasic from '@ovhcloud/ods-stencil-checkbox/docs/osds-checkbox/properties/usage.basic.mdx'; -import UsageChecked from '@ovhcloud/ods-stencil-checkbox/docs/osds-checkbox/properties/usage.checked.mdx'; -import UsageDisabled from '@ovhcloud/ods-stencil-checkbox/docs/osds-checkbox/properties/usage.disabled.mdx'; -import UsageStandalone from '@ovhcloud/ods-stencil-checkbox/docs/osds-checkbox/properties/usage.standalone.mdx'; - -## Usage - -### Basic - - - -### Checked - - - -### Disabled - - - -### Standalone - - diff --git a/packages/stencil/components/checkbox/jest.setup.ts b/packages/stencil/components/checkbox/jest.setup.ts deleted file mode 100644 index 2a63fe8a76..0000000000 --- a/packages/stencil/components/checkbox/jest.setup.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * setup jest file executed for each test and in the test environment - * @see https://jestjs.io/fr/docs/configuration#setupfiles-array - */ - -// import { odsMockWindow } from '@ovhcloud/ods-testing/src/jest/ods-mock-window'; - -console.log('mockkk') -// set a mocked configured config for ODS -// config can be changed on the fly later in tests -// odsMockWindow({ config: { logging: { active: false } } }); - - -interface OdsMockWindow extends Window { - ods?: any; - winId?: number; -} - -const setupConfig: any = { config: { logging: { active: false } } }; -/** - * mock the window for jest testing. - * very useful with stencil in order to manage the MockedWindow of stencil. - * warning: when using `window` with stencil e2e test, each time window is called, a new MockedWindow is created. - * it can lead to misunderstanding, so it is recommended to use this in every e2e tests. - * @param setupConfig- - window's ods config - */ -// export function odsMockWindow(setupConfig: any): void { -// jest.mock('@ovhcloud/ods-core/src/configure/ods-get-window', () => ({ -// getOdsWindow: ():OdsMockWindow | undefined => { -// console.log('[odsMockWindow]', 'get mocked window'); -// // node protection or other env : window may not exist -// if (typeof window !== "undefined") { -// const win: OdsMockWindow = window; -// // set automatically window id in order trace the used window or mocked window by the framework tool like stencil -// win.winId = win.winId ? win.winId : Math.floor(Math.random() * 100000000); -// -// // set automatically setupId in order to avoid doing it into the spec file -// setupConfig.setupId = setupConfig.setupId ? setupConfig.setupId : Math.floor(Math.random() * 100000000); -// // set automatically logging config id in order to avoid doing it into the spec file -// setupConfig.config = setupConfig.config ? setupConfig.config : {}; -// setupConfig.config.id = setupConfig.config.id ? setupConfig.config.id : Math.floor(Math.random() * 100000000); -// -// // set up it into the window if not already done -// !win.ods && (win.ods = setupConfig); -// -// // eslint-disable-next-line no-console -// console.log('want mocked window id=', win.winId, { setupId: win.ods?.setupId, config: win.ods?.config }); -// return win; -// } -// return undefined; -// }, -// })); -// } diff --git a/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts b/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts deleted file mode 100644 index da60818e1d..0000000000 --- a/packages/stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox.spec.ts +++ /dev/null @@ -1,318 +0,0 @@ -// jest.mock('@ovhcloud/ods-core/src/components/checkbox/ods-checkbox-controller'); // keep jest.mock before any import -import { newSpecPage, SpecPage } from '@stencil/core/testing'; -import { OsdsCheckbox } from './osds-checkbox'; -import { - OdsCheckboxAttributes, - OdsCheckboxController, - odsCheckboxDefaultAttributes, - OdsComponentAttributes2StringAttributes, - OdsLogger -} from '@ovhcloud/ods-core'; -import { - odsCheckboxBaseAttributes, - OdsCreateAttributes, - odsGetSimulatedPromise, - OdsInitializeLoggerSpy, - OdsLoggerSpyReferences, - OdsMockNativeMethod, - OdsStringAttributes2Str, - odsUnitTestAttribute, - OdsUnitTestAttributeType -} from '@ovhcloud/ods-testing'; -import { getAttributeContextOptions } from '@ovhcloud/ods-stencil/libraries/stencil-testing'; - -import { OdsClearLoggerSpy } from '@ovhcloud/ods-testing/src/jest/ods-clear-logger-spy'; - - -describe('spec:osds-checkbox', () => { - let page: SpecPage; - let htmlCheckbox: (OsdsCheckbox & HTMLElement) | null | undefined; - let mainSlot: HTMLElement | null | undefined; - let instance: OsdsCheckbox; - let shadowRoot: ShadowRoot | null | undefined; - let loggerSpyReferences: OdsLoggerSpyReferences; - let controller: OdsCheckboxController; - const logger = new OdsLogger('spec:osds-checkbox'); - /** base html template (avoid boilerplate) */ - const baseHtml = (slots: { unnamed?: string }) => - ` - ${slots.unnamed || slots.unnamed === '' ? slots.unnamed : ``} - `; - - async function setup({ attributes = {}, html = `` }: { attributes?: Partial, html?: string }) { - const minimalAttributes: OdsCheckboxAttributes = OdsCreateAttributes(attributes, odsCheckboxBaseAttributes); - const stringAttributes = OdsComponentAttributes2StringAttributes(minimalAttributes, odsCheckboxDefaultAttributes); - - // mock setCustomValidity method that does not exist when stencil mock HTMLInputElement - OdsMockNativeMethod(HTMLInputElement.prototype, "focus", jest.fn()); - - page = await newSpecPage({ - components: [OsdsCheckbox], - html: `${html}`, - }); - - instance = page.rootInstance; - - shadowRoot = page.root?.shadowRoot; - htmlCheckbox = shadowRoot?.querySelector('input[type=checkbox]'); - - // note: assigned slot not yet available in HtmlMockedElement of stencil : https://github.com/ionic-team/stencil/issues/2830 - mainSlot = shadowRoot?.querySelector('slot:not([name])'); - - // controller = (OdsCheckboxController as unknown as jest.SpyInstance).mock.instances[ 0 ]; - } - - beforeEach(() => { - const loggerMocked = new OdsLogger('myLoggerMocked'); - loggerSpyReferences = OdsInitializeLoggerSpy({ loggerMocked, spiedClass: OsdsCheckbox }); - }); - - afterEach(() => { - OdsClearLoggerSpy(loggerSpyReferences); - jest.clearAllMocks(); - }); - - fit('should render', async () => { - logger.log('should render'); - await setup({ attributes: {}, html: baseHtml({}) }); - expect(shadowRoot).toBeTruthy(); - expect(instance).toBeTruthy(); - }); - - it('should call afterInit', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - expect(controller.afterInit).toHaveBeenCalledWith(); - expect(controller.afterInit).toHaveBeenCalledTimes(1); - }); - - describe('contents', () => { - it('should have a main slot', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - expect(mainSlot).toBeTruthy(); - }); - }); - - it('should have a native html checkbox inside', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - expect(htmlCheckbox).toBeTruthy(); - }); - - /** - * @see OdsCheckboxAttributes - */ - describe('attributes', () => { - - const config = { - page: () => page, - instance: () => instance, - setup: async (options) => { - await setup({ attributes: options.attributes, html: baseHtml({}) }) - } - }; - - // todo: make work with properties that can't be processed as attribute - xdescribe('afterSave', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'afterSave', - list: [ - () => odsGetSimulatedPromise(false, () => undefined), - () => odsGetSimulatedPromise(true, () => undefined) - ], - defaultValue: odsCheckboxDefaultAttributes.afterSave, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE], - exclude: [OdsUnitTestAttributeType.REFLECTED] - }); - }); - - describe('ariaLabel', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'ariaLabel', - list: ['oles', 'ipsum'], - defaultValue: odsCheckboxDefaultAttributes.ariaLabel, - ...config - }) - }); - }); - - describe('ariaLabelledby', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'ariaLabelledby', - list: ['oles', 'ipsum'], - defaultValue: odsCheckboxDefaultAttributes.ariaLabelledby, - ...config - }), - exclude: [OdsUnitTestAttributeType.REFLECTED, OdsUnitTestAttributeType.MUTABLE, OdsUnitTestAttributeType.PROPERTY] - }); - }); - - // todo: make work with properties that can't be processed as attribute - xdescribe('beforeSave', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'beforeSave', - list: [ - () => odsGetSimulatedPromise(false, () => undefined), - () => odsGetSimulatedPromise(true, () => undefined) - ], - defaultValue: odsCheckboxDefaultAttributes.beforeSave, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE], - exclude: [OdsUnitTestAttributeType.REFLECTED] - }); - }); - - describe('checked', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'checked', - list: [false, true], - defaultValue: odsCheckboxDefaultAttributes.checked, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE], - }); - }); - - describe('disabled', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'disabled', - list: [true, false], - defaultValue: odsCheckboxDefaultAttributes.disabled, - ...config - }) - }); - }); - - describe('hasFocus', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'hasFocus', - list: [true, false], - defaultValue: odsCheckboxDefaultAttributes.hasFocus, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE] - }); - }); - - describe('label', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'label', - list: ['oles', 'ipsum'], - defaultValue: odsCheckboxDefaultAttributes.label, - ...config - }) - }); - }); - - describe('name', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'name', - list: ['oles', 'ipsum'], - defaultValue: odsCheckboxDefaultAttributes.name, - ...config - }) - }); - }); - - // todo: make work with properties that can't be processed as attribute - xdescribe('save', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'save', - list: [ - () => odsGetSimulatedPromise(false, () => undefined), - () => odsGetSimulatedPromise(true, () => undefined) - ], - defaultValue: odsCheckboxDefaultAttributes.save, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE], - exclude: [OdsUnitTestAttributeType.REFLECTED] - }); - }); - - describe('updating', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'updating', - list: [false, true], - defaultValue: odsCheckboxDefaultAttributes.updating, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE], - }); - }); - - describe('value', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'value', - list: ['checkbox-a', 'checkbox-b'], - defaultValue: odsCheckboxDefaultAttributes.value, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE] - }); - }); - - - }); - - /** - * @see OdsCheckboxEvents - */ - describe('events', () => { - it('odsCheckedChange', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - expect(instance.odsCheckedChange).toBeTruthy(); - }); - - it('odsUpdatingChange', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - expect(instance.odsUpdatingChange).toBeTruthy(); - }); - - it('odsBlur', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - expect(instance.odsBlur).toBeTruthy(); - }); - - it('odsFocus', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - expect(instance.odsFocus).toBeTruthy(); - }); - }); - - /** - * @see OdsCheckboxMethods - */ - describe('methods', () => { - it('should call setButtonTabindex function and buttonTabindex should be set to 1', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - await page.waitForChanges(); - await instance.setTabindex(1); - await page.waitForChanges(); - expect(controller.setTabindex).toHaveBeenCalledWith(1); - }); - - it('should call setFocus function', async () => { - await setup({ attributes: {}, html: baseHtml({}) }); - await page.waitForChanges(); - expect(htmlCheckbox).toBeTruthy(); - await instance.setFocus(); - await page.waitForChanges(); - expect(controller.setFocus).toHaveBeenCalledWith(); - }); - }); - -}); diff --git a/packages/stencil/components/checkbox/src/components/osds-checkbox/public-api.ts b/packages/stencil/components/checkbox/src/components/osds-checkbox/public-api.ts deleted file mode 100644 index 78680cdfbb..0000000000 --- a/packages/stencil/components/checkbox/src/components/osds-checkbox/public-api.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './osds-checkbox'; diff --git a/packages/stencil/components/checkbox/src/global.dev.ts b/packages/stencil/components/checkbox/src/global.dev.ts deleted file mode 100644 index a374dca317..0000000000 --- a/packages/stencil/components/checkbox/src/global.dev.ts +++ /dev/null @@ -1,38 +0,0 @@ -// ### -// global script file to include only in dev mode with the www dev server. -// it always has to include './components' and './global.ts' -// ### - -import { OdsLogger } from '@ovhcloud/ods-core'; -import { OsdsCheckbox } from '@ovhcloud/ods-stencil/components/checkbox/src/components/osds-checkbox/osds-checkbox'; -import './components'; -import './global'; -import '@ovhcloud/ods-component-tile'; - -const logger = new OdsLogger('global-dev'); -logger.log('init'); - -const checkboxA: HTMLOsdsCheckboxElement | null = document.getElementById('checkbox-a') as (HTMLOsdsCheckboxElement); -const checkboxAInfo: HTMLElement | null = document.getElementById('checkbox-a-info'); - -(async () => { - await customElements.whenDefined('osds-checkbox'); -})(); - -if (checkboxA && checkboxAInfo) { - const info: { - name?: OsdsCheckbox['name'] - } = { - name: `${checkboxA.getAttribute('name')}` - }; - - checkboxA.addEventListener('odsValueChange', async (event: Event) => { - const evt = event as any; - logger.log("odsValueChange event", evt.detail); - checkboxAInfo.innerHTML = JSON.stringify(info, undefined, 2) - .replace(/\n/g, '
') - .replace(/ /g, ' '); - }) -} else { - logger.warn('checkboxA or checkboxAInfo not found'); -} diff --git a/packages/stencil/components/checkbox/stencil.config.ts b/packages/stencil/components/checkbox/stencil.config.ts deleted file mode 100644 index 762947bff4..0000000000 --- a/packages/stencil/components/checkbox/stencil.config.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Config } from '@stencil/core'; -import { getStencilConfig } from '@ovhcloud/ods-stencil/libraries/stencil-core'; -import * as jestConfig from './jest.config'; - -const args = process.argv.slice(2); - -const config: Config = { - ...getStencilConfig({ - namespace: 'osds-checkbox', - args, - jestConfig: jestConfig.default, - reactOutput: { - componentCorePackage: '@ovhcloud/ods-stencil/components/checkbox', - // exclude peer dependencies that corresponds to www usage - excludeComponents: [] - }, - vueOutput: { - componentCorePackage: '@ovhcloud/ods-stencil/components/checkbox', - excludeComponents: [] - }, - dev: { - globalScript: 'src/global.dev.ts', - }, - prod: { - globalScript: 'src/global.prod.ts' - }, - test: { - globalScript: 'src/global.test.ts', - } - }) -}; - -export { config }; diff --git a/packages/stencil/components/stencil.config.ts b/packages/stencil/components/stencil.config.ts index d50bce1197..517e47c66f 100644 --- a/packages/stencil/components/stencil.config.ts +++ b/packages/stencil/components/stencil.config.ts @@ -36,6 +36,7 @@ const config: Config = { excludeComponents: [ 'osds-breadcrumb', 'osds-button', + 'osds-checkbox', 'osds-chip', 'osds-collapsible', 'osds-content-addon', @@ -56,6 +57,7 @@ const config: Config = { excludeComponents: [ 'osds-breadcrumb', 'osds-button', + 'osds-checkbox', 'osds-chip', 'osds-collapsible', 'osds-content-addon', @@ -97,7 +99,6 @@ const config: Config = { 'osds-cart-total', ], }, - { components: ['osds-checkbox'] }, { components: ['osds-checkbox-button'] }, { components: ['osds-flag'] }, { components: ['osds-location-tile'] }, diff --git a/packages/stencil/components/tsconfig.components.dev.json b/packages/stencil/components/tsconfig.components.dev.json index e2295a65ed..6338b49f3e 100644 --- a/packages/stencil/components/tsconfig.components.dev.json +++ b/packages/stencil/components/tsconfig.components.dev.json @@ -15,6 +15,7 @@ "cart/src", "checkbox-button/src", "checkbox/src", + "chip/src", "code/src", "flag/src", "location-tile/src", diff --git a/packages/stencil/components/tsconfig.components.prod.json b/packages/stencil/components/tsconfig.components.prod.json index 97b1d06178..2cdfe2ba8c 100644 --- a/packages/stencil/components/tsconfig.components.prod.json +++ b/packages/stencil/components/tsconfig.components.prod.json @@ -16,6 +16,7 @@ "cart/src", "checkbox-button/src", "checkbox/src", + "chip/src", "code/src", "flag/src", "location-tile/src", diff --git a/packages/stencil/components/tsconfig.components.test.json b/packages/stencil/components/tsconfig.components.test.json index 3a7b5e4aeb..d125b4424d 100644 --- a/packages/stencil/components/tsconfig.components.test.json +++ b/packages/stencil/components/tsconfig.components.test.json @@ -15,6 +15,7 @@ "cart/src", "checkbox-button/src", "checkbox/src", + "chip/src", "code/src", "flag/src", "location-tile/src", diff --git a/packages/tools/storybook/stories/components/checkbox/checkbox.specifications.stories.mdx b/packages/tools/storybook/stories/components/checkbox/checkbox.specifications.stories.mdx index efe6bcf50d..2fc9bcdf1c 100644 --- a/packages/tools/storybook/stories/components/checkbox/checkbox.specifications.stories.mdx +++ b/packages/tools/storybook/stories/components/checkbox/checkbox.specifications.stories.mdx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/addon-docs'; -import SpecificationsCheckbox from '@ovhcloud/ods-specifications/components/checkbox/specifications-checkbox.mdx'; +import SpecificationsCheckbox from '@ovhcloud/ods-component-checkbox/documentation/specifications/specifications-checkbox.mdx'; import Notes from '../notes.mdx'; diff --git a/packages/tools/storybook/stories/components/checkbox/checkbox.web-component.stories.page.mdx b/packages/tools/storybook/stories/components/checkbox/checkbox.web-component.stories.page.mdx index 85ef6aee6a..7d74e0b3fe 100644 --- a/packages/tools/storybook/stories/components/checkbox/checkbox.web-component.stories.page.mdx +++ b/packages/tools/storybook/stories/components/checkbox/checkbox.web-component.stories.page.mdx @@ -1,7 +1,7 @@ import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs'; -import Usage from '@ovhcloud/ods-stencil-checkbox/docs/osds-checkbox/usage.mdx'; -import APITable from '@ovhcloud/ods-stencil-checkbox/dist/docs/components/osds-checkbox/readme.md'; +import Usage from '@ovhcloud/ods-component-checkbox/src/docs/osds-checkbox/usage.mdx'; +import APITable from '@ovhcloud/ods-component-checkbox/dist/docs/components/osds-checkbox/readme.md'; diff --git a/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.checkbox-button.ts b/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.checkbox-button.ts index f93babdd0c..eca0fb05aa 100644 --- a/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.checkbox-button.ts +++ b/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.checkbox-button.ts @@ -1,17 +1,10 @@ import { html } from 'lit-html'; -import { unsafeHTML } from 'lit-html/directives/unsafe-html'; - - import { defineCustomElements } from '@ovhcloud/ods-stencil/components/checkbox-button/loader'; - import { extractStoryParams, getTagAttributes } from '../../../core/componentHTMLUtils'; -import { olesIpsum, OlesIpsumGeneration } from '@ovhcloud/ods-core'; -import { OdsLogger } from '@ovhcloud/ods-core/src'; +import { olesIpsum, OlesIpsumGeneration } from '@ovhcloud/ods-common-core'; defineCustomElements(); -const logger = new OdsLogger('OsdsCheckbox-stories-checkbox-button'); - const storyParams = { disabled: { category: 'Misc', diff --git a/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.ts b/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.ts index 45e9e7a8f9..5af2a77bbb 100644 --- a/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.ts +++ b/packages/tools/storybook/stories/components/checkbox/checkbox.web-components.stories.ts @@ -1,11 +1,12 @@ import { extractArgTypes, extractStoryParams, getTagAttributes, } from '../../../core/componentHTMLUtils'; -import changelog from '@ovhcloud/ods-stencil/components/checkbox/CHANGELOG.md'; -import { defineCustomElements } from '@ovhcloud/ods-stencil/components/checkbox/loader'; +import { defineCustomElements } from '@ovhcloud/ods-component-checkbox/loader'; import { html } from 'lit-html'; -import { iframe } from '../../../.storybook/iframe'; -import page from './checkbox.web-component.stories.page.mdx'; import { unsafeHTML } from 'lit-html/directives/unsafe-html'; +// @ts-ignore +import page from './checkbox.web-component.stories.page.mdx'; +// @ts-ignore +import changelog from '@ovhcloud/ods-component-checkbox/CHANGELOG.md'; defineCustomElements(); @@ -38,7 +39,6 @@ export default { id: 'checkbox', parameters: { notes: { - API: iframe('/stencil-components-checkbox/modules/index.html'), changelog, }, docs: { page } diff --git a/scripts/testing-report/index.html b/scripts/testing-report/index.html index 8fc21e078d..93f053b5e4 100644 --- a/scripts/testing-report/index.html +++ b/scripts/testing-report/index.html @@ -101,7 +101,7 @@ {name: 'osds-breadcrumb', id: 'breadcrumb', newArch: true}, {name: 'osds-button', id: 'button', newArch: true}, {name: 'osds-cart', id: 'cart'}, - {name: 'osds-checkbox', id: 'checkbox'}, + {name: 'osds-checkbox', id: 'checkbox', newArch: true}, {name: 'osds-checkbox-button', id: 'checkbox-button'}, {name: 'osds-chip', id: 'chip', newArch: true}, {name: 'osds-clipboard', id: 'clipboard'}, diff --git a/yarn.lock b/yarn.lock index 0fc4b8d8a0..294f400c15 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5533,11 +5533,11 @@ __metadata: languageName: unknown linkType: soft -"@ovhcloud/ods-component-chip-react@workspace:packages-new/components/chip/react": +"@ovhcloud/ods-component-checkbox-react@workspace:packages-new/components/checkbox/react": version: 0.0.0-use.local - resolution: "@ovhcloud/ods-component-chip-react@workspace:packages-new/components/chip/react" + resolution: "@ovhcloud/ods-component-checkbox-react@workspace:packages-new/components/checkbox/react" dependencies: - "@ovhcloud/ods-component-chip": ^15.0.1 + "@ovhcloud/ods-component-checkbox": ^15.0.1 "@ovhcloud/ods-react-dev": ^15.0.1 peerDependencies: react: ">=16.8.6" @@ -5545,25 +5545,25 @@ __metadata: languageName: unknown linkType: soft -"@ovhcloud/ods-component-chip-vue@workspace:packages-new/components/chip/vue": +"@ovhcloud/ods-component-checkbox-vue@workspace:packages-new/components/checkbox/vue": version: 0.0.0-use.local - resolution: "@ovhcloud/ods-component-chip-vue@workspace:packages-new/components/chip/vue" + resolution: "@ovhcloud/ods-component-checkbox-vue@workspace:packages-new/components/checkbox/vue" dependencies: - "@ovhcloud/ods-component-chip": ^15.0.1 + "@ovhcloud/ods-component-checkbox": ^15.0.1 "@ovhcloud/ods-vue-dev": ^15.0.1 peerDependencies: vue: ">=3" languageName: unknown linkType: soft -"@ovhcloud/ods-component-chip@^15.0.1, @ovhcloud/ods-component-chip@workspace:packages-new/components/chip": +"@ovhcloud/ods-component-checkbox@^15.0.1, @ovhcloud/ods-component-checkbox@workspace:packages-new/components/checkbox": version: 0.0.0-use.local - resolution: "@ovhcloud/ods-component-chip@workspace:packages-new/components/chip" + resolution: "@ovhcloud/ods-component-checkbox@workspace:packages-new/components/checkbox" dependencies: "@ovhcloud/ods-common-core": ^15.0.1 "@ovhcloud/ods-common-stencil": ^15.0.1 "@ovhcloud/ods-common-testing": ^15.0.1 - "@ovhcloud/ods-component-icon": ^15.0.1 + "@ovhcloud/ods-component-tile": ^15.0.1 "@ovhcloud/ods-stencil-dev": ^15.0.1 "@ovhcloud/ods-theming": ^15.0.1 languageName: unknown @@ -6014,6 +6014,7 @@ __metadata: "@ovhcloud/ods-component-breadcrumb": ^15.0.1 "@ovhcloud/ods-component-button": ^15.0.1 "@ovhcloud/ods-component-chip": ^15.0.1 + "@ovhcloud/ods-component-checkbox": ^15.0.1 "@ovhcloud/ods-component-collapsible": ^15.0.1 "@ovhcloud/ods-component-content-addon": ^15.0.1 "@ovhcloud/ods-component-icon": ^15.0.1 @@ -6297,9 +6298,9 @@ __metadata: languageName: unknown linkType: soft -"@ovhcloud/ods-stencil-checkbox-react@workspace:packages/stencil/components/checkbox/react": +"@ovhcloud/ods-stencil-chip-react@workspace:packages/stencil/components/chip/react": version: 0.0.0-use.local - resolution: "@ovhcloud/ods-stencil-checkbox-react@workspace:packages/stencil/components/checkbox/react" + resolution: "@ovhcloud/ods-stencil-chip-react@workspace:packages/stencil/components/chip/react" dependencies: "@ovhcloud/ods-stencil-cart": ^15.0.1 "@types/react": 17.0.37 @@ -6315,11 +6316,11 @@ __metadata: languageName: unknown linkType: soft -"@ovhcloud/ods-stencil-checkbox-vue@workspace:packages/stencil/components/checkbox/vue": +"@ovhcloud/ods-stencil-chip-vue@workspace:packages/stencil/components/chip/vue": version: 0.0.0-use.local - resolution: "@ovhcloud/ods-stencil-checkbox-vue@workspace:packages/stencil/components/checkbox/vue" + resolution: "@ovhcloud/ods-stencil-chip-vue@workspace:packages/stencil/components/chip/vue" dependencies: - "@ovhcloud/ods-stencil-checkbox": ^15.0.1 + "@ovhcloud/ods-stencil-chip": ^15.0.1 rimraf: ^3.0.2 typescript: 4.7.4 vue: ^3.2.41 @@ -6328,10 +6329,11 @@ __metadata: languageName: unknown linkType: soft -"@ovhcloud/ods-stencil-checkbox@^15.0.1, @ovhcloud/ods-stencil-checkbox@workspace:packages/stencil/components/checkbox": +"@ovhcloud/ods-stencil-chip@^15.0.1, @ovhcloud/ods-stencil-chip@workspace:packages/stencil/components/chip": version: 0.0.0-use.local - resolution: "@ovhcloud/ods-stencil-checkbox@workspace:packages/stencil/components/checkbox" + resolution: "@ovhcloud/ods-stencil-chip@workspace:packages/stencil/components/chip" dependencies: + "@ovhcloud/ods-component-icon": ^15.0.1 "@ovhcloud/ods-stencil-component": ^15.0.1 "@ovhcloud/ods-stencil-component-dev": ^15.0.1 languageName: unknown