From 5e0ea7801aa7404a9e2dc726be254d53353b649c Mon Sep 17 00:00:00 2001 From: skhamvon Date: Fri, 11 Aug 2023 14:28:00 +0200 Subject: [PATCH] feat(flag): migrate to new archi --- .../common/core/src/content/public-api.ts | 2 + packages-new/common/core/src/public-api.ts | 1 + .../components/flag/.gitignore | 0 .../components/flag/.npmignore | 0 .../components/flag/CHANGELOG.md | 0 .../components/flag/THIRD-PARTY-LICENCES | 0 .../flag/documentation/specifications/spec.md | 74 +++++++++ .../specifications-flag-contents.mdx | 0 .../specifications-flag-events.mdx | 0 .../specifications-flag-methods.mdx | 0 .../specifications-flag-properties.mdx | 2 +- .../specifications-flag-tests.mdx | 0 .../specifications-flag-types.mdx | 0 .../specifications/specifications-flag.mdx | 15 ++ .../components/flag/jest.config.ts | 5 +- .../components/flag/jest.setup.ts | 3 +- .../components/flag/package.json | 13 +- .../components/flag/react/.gitignore | 0 .../components/flag/react/.npmignore | 0 .../components/flag/react/CHANGELOG.md | 0 .../components/flag/react/package.json | 11 +- .../components/flag/react/tsconfig.cjs.json | 0 .../components/flag/react/tsconfig.json | 0 .../osds-flag/constants/default-attributes.ts | 16 ++ .../osds-flag/core/controller.spec.ts | 141 +++++++++--------- .../components/osds-flag/core/controller.ts | 30 ++-- .../osds-flag/interfaces/attributes.ts | 25 ++++ .../osds-flag/osds-flag.e2e.screenshot.ts | 27 ++-- .../src/components/osds-flag/osds-flag.e2e.ts | 40 ++--- .../src/components/osds-flag/osds-flag.scss | 0 .../components/osds-flag/osds-flag.spec.ts | 108 ++++++-------- .../src/components/osds-flag/osds-flag.tsx | 28 ++-- .../src/components/osds-flag/public-api.ts | 2 + .../flag/src/docs/osds-flag/usage.mdx | 2 +- .../components/flag/src/global.dev.ts | 5 +- .../components/flag/src/global.prod.ts | 0 .../components/flag/src/global.test.ts | 2 - .../components/flag/src/global.ts | 2 +- .../components/flag/src/index.html | 0 .../components/flag/src/index.ts | 0 .../components/flag/stencil.config.ts | 10 +- .../components/flag/tsconfig.dev.json | 0 .../components/flag/tsconfig.json | 0 .../components/flag/tsconfig.prod.json | 0 .../components/flag/tsconfig.test.json | 0 .../components/flag/typedoc.json | 2 +- .../components/flag/vue/.gitignore | 0 .../components/flag/vue/.npmignore | 0 .../components/flag/vue/CHANGELOG.md | 0 .../components/flag/vue/package.json | 8 +- .../components/flag/vue/tsconfig.cjs.json | 0 .../components/flag/vue/tsconfig.json | 0 .../components/flag/ods-flag-attributes.ts | 22 --- .../src/components/flag/ods-flag-behavior.ts | 38 ----- .../flag/ods-flag-controller.mock.ts | 39 ----- .../flag/ods-flag-default-attributes.ts | 12 -- .../src/components/flag/ods-flag-events.ts | 4 - .../src/components/flag/ods-flag-methods.ts | 4 - .../core/src/components/flag/ods-flag.mock.ts | 19 --- .../core/src/components/flag/ods-flag.ts | 17 --- .../core/src/components/flag/public-api.ts | 8 - .../core/src/components/public-api.ts | 1 - .../flag/ods-flag-base-attributes.ts | 11 -- .../testing/src/components/flag/public-api.ts | 1 - .../testing/src/components/public-api.ts | 1 - .../components/flag/specifications-flag.mdx | 15 -- .../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 +- .../src/components/osds-flag/public-api.ts | 1 - 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 - .../flag/flag.specifications.stories.mdx | 2 +- .../flag/flag.web-component.stories.page.mdx | 4 +- .../flag/flag.web-components.stories.ts | 8 +- scripts/testing-report/index.html | 2 +- yarn.lock | 78 +++++----- 79 files changed, 386 insertions(+), 487 deletions(-) create mode 100644 packages-new/common/core/src/content/public-api.ts rename {packages/stencil => packages-new}/components/flag/.gitignore (100%) rename {packages/stencil => packages-new}/components/flag/.npmignore (100%) rename {packages/stencil => packages-new}/components/flag/CHANGELOG.md (100%) rename {packages/stencil => packages-new}/components/flag/THIRD-PARTY-LICENCES (100%) create mode 100644 packages-new/components/flag/documentation/specifications/spec.md rename {packages/specifications/components/flag => packages-new/components/flag/documentation/specifications}/specifications-flag-contents.mdx (100%) rename {packages/specifications/components/flag => packages-new/components/flag/documentation/specifications}/specifications-flag-events.mdx (100%) rename {packages/specifications/components/flag => packages-new/components/flag/documentation/specifications}/specifications-flag-methods.mdx (100%) rename {packages/specifications/components/flag => packages-new/components/flag/documentation/specifications}/specifications-flag-properties.mdx (65%) rename {packages/specifications/components/flag => packages-new/components/flag/documentation/specifications}/specifications-flag-tests.mdx (100%) rename {packages/specifications/components/flag => packages-new/components/flag/documentation/specifications}/specifications-flag-types.mdx (100%) create mode 100644 packages-new/components/flag/documentation/specifications/specifications-flag.mdx rename {packages/stencil => packages-new}/components/flag/jest.config.ts (76%) rename {packages/stencil => packages-new}/components/flag/jest.setup.ts (84%) rename {packages/stencil => packages-new}/components/flag/package.json (85%) rename {packages/stencil => packages-new}/components/flag/react/.gitignore (100%) rename {packages/stencil => packages-new}/components/flag/react/.npmignore (100%) rename {packages/stencil => packages-new}/components/flag/react/CHANGELOG.md (100%) rename {packages/stencil => packages-new}/components/flag/react/package.json (74%) rename {packages/stencil => packages-new}/components/flag/react/tsconfig.cjs.json (100%) rename {packages/stencil => packages-new}/components/flag/react/tsconfig.json (100%) create mode 100644 packages-new/components/flag/src/components/osds-flag/constants/default-attributes.ts rename packages/libraries/core/src/components/flag/ods-flag-controller.spec.ts => packages-new/components/flag/src/components/osds-flag/core/controller.spec.ts (52%) rename packages/libraries/core/src/components/flag/ods-flag-controller.ts => packages-new/components/flag/src/components/osds-flag/core/controller.ts (79%) create mode 100644 packages-new/components/flag/src/components/osds-flag/interfaces/attributes.ts rename {packages/stencil => packages-new}/components/flag/src/components/osds-flag/osds-flag.e2e.screenshot.ts (63%) rename {packages/stencil => packages-new}/components/flag/src/components/osds-flag/osds-flag.e2e.ts (75%) rename {packages/stencil => packages-new}/components/flag/src/components/osds-flag/osds-flag.scss (100%) rename {packages/stencil => packages-new}/components/flag/src/components/osds-flag/osds-flag.spec.ts (68%) rename {packages/stencil => packages-new}/components/flag/src/components/osds-flag/osds-flag.tsx (72%) create mode 100644 packages-new/components/flag/src/components/osds-flag/public-api.ts rename {packages/stencil => packages-new}/components/flag/src/docs/osds-flag/usage.mdx (95%) rename {packages/stencil => packages-new}/components/flag/src/global.dev.ts (77%) rename {packages/stencil => packages-new}/components/flag/src/global.prod.ts (100%) rename {packages/stencil => packages-new}/components/flag/src/global.test.ts (98%) rename {packages/stencil => packages-new}/components/flag/src/global.ts (81%) rename {packages/stencil => packages-new}/components/flag/src/index.html (100%) rename {packages/stencil => packages-new}/components/flag/src/index.ts (100%) rename {packages/stencil => packages-new}/components/flag/stencil.config.ts (74%) rename {packages/stencil => packages-new}/components/flag/tsconfig.dev.json (100%) rename {packages/stencil => packages-new}/components/flag/tsconfig.json (100%) rename {packages/stencil => packages-new}/components/flag/tsconfig.prod.json (100%) rename {packages/stencil => packages-new}/components/flag/tsconfig.test.json (100%) rename {packages/stencil => packages-new}/components/flag/typedoc.json (74%) rename {packages/stencil => packages-new}/components/flag/vue/.gitignore (100%) rename {packages/stencil => packages-new}/components/flag/vue/.npmignore (100%) rename {packages/stencil => packages-new}/components/flag/vue/CHANGELOG.md (100%) rename {packages/stencil => packages-new}/components/flag/vue/package.json (79%) rename {packages/stencil => packages-new}/components/flag/vue/tsconfig.cjs.json (100%) rename {packages/stencil => packages-new}/components/flag/vue/tsconfig.json (100%) delete mode 100644 packages/libraries/core/src/components/flag/ods-flag-attributes.ts delete mode 100644 packages/libraries/core/src/components/flag/ods-flag-behavior.ts delete mode 100644 packages/libraries/core/src/components/flag/ods-flag-controller.mock.ts delete mode 100644 packages/libraries/core/src/components/flag/ods-flag-default-attributes.ts delete mode 100644 packages/libraries/core/src/components/flag/ods-flag-events.ts delete mode 100644 packages/libraries/core/src/components/flag/ods-flag-methods.ts delete mode 100644 packages/libraries/core/src/components/flag/ods-flag.mock.ts delete mode 100644 packages/libraries/core/src/components/flag/ods-flag.ts delete mode 100644 packages/libraries/core/src/components/flag/public-api.ts delete mode 100644 packages/libraries/testing/src/components/flag/ods-flag-base-attributes.ts delete mode 100644 packages/libraries/testing/src/components/flag/public-api.ts delete mode 100644 packages/specifications/components/flag/specifications-flag.mdx delete mode 100644 packages/stencil/components/flag/src/components/osds-flag/public-api.ts diff --git a/packages-new/common/core/src/content/public-api.ts b/packages-new/common/core/src/content/public-api.ts new file mode 100644 index 0000000000..07520f0f32 --- /dev/null +++ b/packages-new/common/core/src/content/public-api.ts @@ -0,0 +1,2 @@ +export * from './ods-load-content'; +export * from './ods-svg-validator'; diff --git a/packages-new/common/core/src/public-api.ts b/packages-new/common/core/src/public-api.ts index 7100eb0a78..651aecee99 100644 --- a/packages-new/common/core/src/public-api.ts +++ b/packages-new/common/core/src/public-api.ts @@ -4,6 +4,7 @@ */ export * from './a11y/public-api'; export * from './components/public-api'; +export * from './content/public-api'; export * from './configure/public-api'; export * from './element/public-api'; export * from './form/public-api'; diff --git a/packages/stencil/components/flag/.gitignore b/packages-new/components/flag/.gitignore similarity index 100% rename from packages/stencil/components/flag/.gitignore rename to packages-new/components/flag/.gitignore diff --git a/packages/stencil/components/flag/.npmignore b/packages-new/components/flag/.npmignore similarity index 100% rename from packages/stencil/components/flag/.npmignore rename to packages-new/components/flag/.npmignore diff --git a/packages/stencil/components/flag/CHANGELOG.md b/packages-new/components/flag/CHANGELOG.md similarity index 100% rename from packages/stencil/components/flag/CHANGELOG.md rename to packages-new/components/flag/CHANGELOG.md diff --git a/packages/stencil/components/flag/THIRD-PARTY-LICENCES b/packages-new/components/flag/THIRD-PARTY-LICENCES similarity index 100% rename from packages/stencil/components/flag/THIRD-PARTY-LICENCES rename to packages-new/components/flag/THIRD-PARTY-LICENCES diff --git a/packages-new/components/flag/documentation/specifications/spec.md b/packages-new/components/flag/documentation/specifications/spec.md new file mode 100644 index 0000000000..27e14daaa9 --- /dev/null +++ b/packages-new/components/flag/documentation/specifications/spec.md @@ -0,0 +1,74 @@ +* [**Interfaces**](#interfaces) +* [**Classes**](#classes) +* [**Type alias**](#type-alias) +* [**Variables**](#variables) + +## Interfaces + +### OdsFlagAttributes +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`assetPath`** | `undefined` \| `string` | ✴️ | | override the `ODS` directory path of the assets.if not set, the configured path in `ODS` will be used.| +|**`iso`** | `undefined` \| `ODS_COUNTRY_ISO_CODE` | ✴️ | | Flag ISO country code| +|**`lazy`** | _boolean_ | ✴️ | | allow to lazy load the content only when it's visible| +|**`src`** | `undefined` \| `string` | ✴️ | | override with custom src to the svg file.| + +### OdsFlagBehavior +|name | Type | Required | Default | Description| +|---|---|:---:|---|---| +|**`hostElement`** | `Host` | ✴️ | | reference to the host element of the component| +|**`getAssetPath`** | _string_ | ✴️ | | get the asset directory path in witch the content is serve.could be like `build/` or empty.in addition, the `ODS` asset path will be used.| +|**`load`** | _void_ | ✴️ | | trigger the content load.should be triggered when `iso`, `assetPath` and `src` attributes changed.should call controller's method `load` and change the svg content with the one received.should define the `aria-label` to use with `iso` code.| +|**`onDestroy`** | _void_ | ✴️ | | clean up thing.should call controller's method `onDestroy`| +|**`onInit`** | _void_ | ✴️ | | initialization of the component.should call the controller's `onInit` method and store the state of visibility.| + +## Classes + +### OdsFlagController +_common controller logic for flag component used by the different implementations._ +_it contains all the glue between framework implementation and the third party service._ + +#### Methods +> **load**() => _unknown_ + + +> **onDestroy**() => _unknown_ + + +> **onInit**() => _unknown_ + + +> **validateISO**() => _unknown_ + + + +### OdsFlagMock + +## Type alias + +### OdsFlag + +interface description of all implementation of `ods-flag`. +each implementation must have defined events, methods, attributes +and one controller for the common behavior logic + +> - `OdsComponentGenericMethods` + +> - `OdsComponentGenericEvents` + +### OdsFlagAttributes + +> _Based on `OdsComponentAttributes`_ + +### OdsFlagEvents + +> _Based on `OdsComponentEvents`_ + +### OdsFlagMethods + +> _Based on `OdsComponentMethods`_ + +## Variables + +### odsFlagDefaultAttributes +`OdsFlagAttributes` \ No newline at end of file diff --git a/packages/specifications/components/flag/specifications-flag-contents.mdx b/packages-new/components/flag/documentation/specifications/specifications-flag-contents.mdx similarity index 100% rename from packages/specifications/components/flag/specifications-flag-contents.mdx rename to packages-new/components/flag/documentation/specifications/specifications-flag-contents.mdx diff --git a/packages/specifications/components/flag/specifications-flag-events.mdx b/packages-new/components/flag/documentation/specifications/specifications-flag-events.mdx similarity index 100% rename from packages/specifications/components/flag/specifications-flag-events.mdx rename to packages-new/components/flag/documentation/specifications/specifications-flag-events.mdx diff --git a/packages/specifications/components/flag/specifications-flag-methods.mdx b/packages-new/components/flag/documentation/specifications/specifications-flag-methods.mdx similarity index 100% rename from packages/specifications/components/flag/specifications-flag-methods.mdx rename to packages-new/components/flag/documentation/specifications/specifications-flag-methods.mdx diff --git a/packages/specifications/components/flag/specifications-flag-properties.mdx b/packages-new/components/flag/documentation/specifications/specifications-flag-properties.mdx similarity index 65% rename from packages/specifications/components/flag/specifications-flag-properties.mdx rename to packages-new/components/flag/documentation/specifications/specifications-flag-properties.mdx index a3b494773e..707a9e8f38 100644 --- a/packages/specifications/components/flag/specifications-flag-properties.mdx +++ b/packages-new/components/flag/documentation/specifications/specifications-flag-properties.mdx @@ -1,3 +1,3 @@ | Name | Type | Default value | Description | |----------|----------------------------------------------|---------------|---------------------------------------------| -| `iso` | **_COUNTRY_FLAG_ISO_CODE_** from `@ovhcloud/ods-core` | - | Country iso code for the corresponding flag | +| `iso` | **_COUNTRY_FLAG_ISO_CODE_** from `@ovhcloud/ods-common-core` | - | Country iso code for the corresponding flag | diff --git a/packages/specifications/components/flag/specifications-flag-tests.mdx b/packages-new/components/flag/documentation/specifications/specifications-flag-tests.mdx similarity index 100% rename from packages/specifications/components/flag/specifications-flag-tests.mdx rename to packages-new/components/flag/documentation/specifications/specifications-flag-tests.mdx diff --git a/packages/specifications/components/flag/specifications-flag-types.mdx b/packages-new/components/flag/documentation/specifications/specifications-flag-types.mdx similarity index 100% rename from packages/specifications/components/flag/specifications-flag-types.mdx rename to packages-new/components/flag/documentation/specifications/specifications-flag-types.mdx diff --git a/packages-new/components/flag/documentation/specifications/specifications-flag.mdx b/packages-new/components/flag/documentation/specifications/specifications-flag.mdx new file mode 100644 index 0000000000..39b6d2eddd --- /dev/null +++ b/packages-new/components/flag/documentation/specifications/specifications-flag.mdx @@ -0,0 +1,15 @@ +import {Description} from '@storybook/addon-docs'; +import Specs from './spec.md'; +import SpecsFlagContents from './specifications-flag-contents.mdx'; +import SpecsFlagTests from './specifications-flag-tests.mdx'; + +## Description +The flag component grow to the size of the parent's container + +{Specs} + +## Contents + + +## Tests + diff --git a/packages/stencil/components/flag/jest.config.ts b/packages-new/components/flag/jest.config.ts similarity index 76% rename from packages/stencil/components/flag/jest.config.ts rename to packages-new/components/flag/jest.config.ts index e7a1d5419c..f0b09927e2 100644 --- a/packages/stencil/components/flag/jest.config.ts +++ b/packages-new/components/flag/jest.config.ts @@ -1,5 +1,5 @@ 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); @@ -15,9 +15,10 @@ const args = process.argv.slice(2); * }; * ``` */ +// @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/flag/jest.setup.ts b/packages-new/components/flag/jest.setup.ts similarity index 84% rename from packages/stencil/components/flag/jest.setup.ts rename to packages-new/components/flag/jest.setup.ts index 86728b155d..18cbecce03 100644 --- a/packages/stencil/components/flag/jest.setup.ts +++ b/packages-new/components/flag/jest.setup.ts @@ -5,10 +5,9 @@ // import { odsMockWindow } from '@ovhcloud/ods-testing/src/jest/ods-mock-window'; -console.log('jest setup'); jest.mock('@ovhcloud/ods-core/src/configure/ods-get-window', () => ({ getOdsWindow: () => { - console.log('[odsMockWindow]', 'get mocked window YEAH2'); + console.log('[odsMockWindow]', 'get mocked window'); return window; } })); diff --git a/packages/stencil/components/flag/package.json b/packages-new/components/flag/package.json similarity index 85% rename from packages/stencil/components/flag/package.json rename to packages-new/components/flag/package.json index 893d418813..ccc2192c6d 100644 --- a/packages/stencil/components/flag/package.json +++ b/packages-new/components/flag/package.json @@ -1,15 +1,15 @@ { - "name": "@ovhcloud/ods-stencil-flag", + "name": "@ovhcloud/ods-component-flag", "version": "15.0.1", "private": true, - "description": "Flag component", + "description": "ODS Flag 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/components.d.ts", + "types": "dist/types/index.d.ts", "collection": "dist/collection/collection-manifest.json", "collection:main": "dist/collection/index.js", "scripts": { @@ -36,11 +36,14 @@ "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-theming": "^15.0.1", "flag-icons": "^6.6.6", "workbox-build": "4.3.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/flag/react/.gitignore b/packages-new/components/flag/react/.gitignore similarity index 100% rename from packages/stencil/components/flag/react/.gitignore rename to packages-new/components/flag/react/.gitignore diff --git a/packages/stencil/components/flag/react/.npmignore b/packages-new/components/flag/react/.npmignore similarity index 100% rename from packages/stencil/components/flag/react/.npmignore rename to packages-new/components/flag/react/.npmignore diff --git a/packages/stencil/components/flag/react/CHANGELOG.md b/packages-new/components/flag/react/CHANGELOG.md similarity index 100% rename from packages/stencil/components/flag/react/CHANGELOG.md rename to packages-new/components/flag/react/CHANGELOG.md diff --git a/packages/stencil/components/flag/react/package.json b/packages-new/components/flag/react/package.json similarity index 74% rename from packages/stencil/components/flag/react/package.json rename to packages-new/components/flag/react/package.json index 413d78a077..e72551b1fe 100644 --- a/packages/stencil/components/flag/react/package.json +++ b/packages-new/components/flag/react/package.json @@ -1,5 +1,5 @@ { - "name": "@ovhcloud/ods-stencil-flag-react", + "name": "@ovhcloud/ods-component-flag-react", "version": "15.0.1", "private": true, "description": "React specific wrapper for ods", @@ -20,18 +20,13 @@ "dist/" ], "dependencies": { - "tslib": "*" + "@ovhcloud/ods-component-flag": "^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/flag/react/tsconfig.cjs.json b/packages-new/components/flag/react/tsconfig.cjs.json similarity index 100% rename from packages/stencil/components/flag/react/tsconfig.cjs.json rename to packages-new/components/flag/react/tsconfig.cjs.json diff --git a/packages/stencil/components/flag/react/tsconfig.json b/packages-new/components/flag/react/tsconfig.json similarity index 100% rename from packages/stencil/components/flag/react/tsconfig.json rename to packages-new/components/flag/react/tsconfig.json diff --git a/packages-new/components/flag/src/components/osds-flag/constants/default-attributes.ts b/packages-new/components/flag/src/components/osds-flag/constants/default-attributes.ts new file mode 100644 index 0000000000..cdf3486d59 --- /dev/null +++ b/packages-new/components/flag/src/components/osds-flag/constants/default-attributes.ts @@ -0,0 +1,16 @@ +import type { OdsFlagAttribute } from '../interfaces/attributes'; +import { ODS_COUNTRY_ISO_CODE } from '@ovhcloud/ods-common-core'; + +/** + * default attribute values of flag + */ +const DEFAULT_ATTRIBUTE: OdsFlagAttribute = Object.freeze({ + iso: ODS_COUNTRY_ISO_CODE.FR, + lazy: false, + src: '', + assetPath: '', +}); + +export { + DEFAULT_ATTRIBUTE, +}; diff --git a/packages/libraries/core/src/components/flag/ods-flag-controller.spec.ts b/packages-new/components/flag/src/components/osds-flag/core/controller.spec.ts similarity index 52% rename from packages/libraries/core/src/components/flag/ods-flag-controller.spec.ts rename to packages-new/components/flag/src/components/osds-flag/core/controller.spec.ts index eed7405562..e3a9fd7020 100644 --- a/packages/libraries/core/src/components/flag/ods-flag-controller.spec.ts +++ b/packages-new/components/flag/src/components/osds-flag/core/controller.spec.ts @@ -1,61 +1,67 @@ -jest.mock('../../content/ods-load-content'); // keep jest.mock before any import -jest.mock('../../utils/string/ods-get-src'); // keep jest.mock before any import -jest.mock('../../utils/path/ods-get-asset-path'); // keep jest.mock before any import -import { odsGetSrc } from '../../utils/string/ods-get-src'; -import { odsGetAssetPath } from '../../utils/path/ods-get-asset-path'; -import { ODS_COUNTRY_ISO_CODE, OdsCountryIsoCodeList } from '../../i18n/ods-country-iso-codes.types'; -import { OdsFlag } from './ods-flag'; -import { OdsFlagController } from './ods-flag-controller'; -import { OdsFlagMock } from './ods-flag.mock'; +let mockOnDestroy = jest.fn(); +let mockLoad = jest.fn(); +let mockOdsGetSrc = jest.fn(); +let mockWaitUntilVisible = jest.fn(); + +jest.mock('@ovhcloud/ods-common-core', () => ({ + ...jest.requireActual('@ovhcloud/ods-common-core'), + odsGetAssetPath: jest.fn(), + odsGetSrc: mockOdsGetSrc, + OdsLoadContent: jest.fn().mockImplementation(() => ({ + onDestroy: mockOnDestroy, + load: mockLoad, + waitUntilVisible: mockWaitUntilVisible, + })), +})) + +import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing'; +import { OdsClearLoggerSpy, OdsInitializeLoggerSpy } from '@ovhcloud/ods-common-testing'; import { - OdsClearLoggerSpy, - OdsInitializeLoggerSpy, - OdsLoggerSpyReferences -} from '@ovhcloud/ods-testing/src'; -let spyOnValidateISO: jest.SpyInstance>; -let spyOnGetUrl: jest.SpyInstance>; -let spyOnGetAssetPath: jest.SpyInstance>; -import { OdsLogger } from '../../logger/ods-logger'; -import { Ods } from '../../configure/ods'; -import { OdsLoadContent } from '../../content/ods-load-content'; -import { OdsFlagBehavior } from './ods-flag-behavior'; - -type GetSrcType = jest.Mock, Parameters>; -type OdsGetAssetPathType = jest.Mock, Parameters>; - -describe('spec:ods-flag-controller', () => { + Ods, + OdsLogger, + odsGetAssetPath, + odsGetSrc, + ODS_COUNTRY_ISO_CODE, + OdsCountryIsoCodeList +} from '@ovhcloud/ods-common-core'; +import { OsdsFlag } from '../osds-flag'; +import { OdsFlagController } from './controller'; + +class OdsFlagMock extends OsdsFlag { + constructor(attribute: Partial) { + super(); + Object.assign(this, attribute) + } + + beforeRender = jest.fn(); + controller: OdsFlagController = jest.fn() as unknown as OdsFlagController; + getAssetPath = jest.fn(); + load = jest.fn(); + onDestroy = jest.fn(); + onInit = jest.fn(); +} + +describe('ods-flag-controller', () => { let controller: OdsFlagController; - let loadContent: OdsLoadContent; - let loadContentSpy: jest.SpyInstance; - let component: OdsFlag; + let component: OsdsFlag; let loggerSpyReferences: OdsLoggerSpyReferences; - let odsGetSrcFct: GetSrcType; - let odsGetAssetPathFct: OdsGetAssetPathType; - let el: HTMLElement; + let spyOnValidateISO: jest.SpyInstance>; + let spyOnGetUrl: jest.SpyInstance>; + let spyOnGetAssetPath: jest.SpyInstance>; Ods.instance().logging(false); - const logger = new OdsLogger('spec:ods-flag-controller'); - function setup(attributes: Partial = {}) { - component = { ...component, ...attributes }; + function setup(attributes: Partial = {}) { + component = new OdsFlagMock(attributes); controller = new OdsFlagController(component); - - loadContentSpy = (OdsLoadContent as unknown as jest.SpyInstance); - - loadContent = loadContentSpy.mock.instances[ 0 ]; } beforeEach(() => { - component = new OdsFlagMock(); - el = document.createElement('div') as HTMLElement; - component.hostElement = el; const loggerMocked = new OdsLogger('myLoggerMocked'); loggerSpyReferences = OdsInitializeLoggerSpy({ loggerMocked: loggerMocked as never, spiedClass: OdsFlagController }); - odsGetSrcFct = odsGetSrc as unknown as GetSrcType; - odsGetAssetPathFct = odsGetAssetPath as unknown as OdsGetAssetPathType; }); afterEach(() => { @@ -95,39 +101,37 @@ describe('spec:ods-flag-controller', () => { }); describe('load', () => { - - beforeEach(() => { - }); - it('should call validation of iso', () => { setup(); - spyOnValidateISO = jest.spyOn(controller, 'validateISO').mockImplementation((iso) => { - logger.log(`resolving validateISO`, iso); - }); + spyOnValidateISO = jest.spyOn(controller, 'validateISO'); controller.load(true); expect(spyOnValidateISO).toHaveBeenCalled(); }); - it('should call load management', () => { + it('should call load with no url', () => { setup(); controller.load(true); - expect(loadContent.load).toHaveBeenCalledTimes(1); + // expect(loadContent.load).toHaveBeenCalledTimes(1); + expect(mockLoad).toHaveBeenCalledWith('', true, true, true); }); - it('should call getUrl', () => { - // todo To remove since getUrl is a private method? + + it('should call load with url', () => { + const dummyUrl = 'dummy url' setup(); // @ts-ignore - spyOnGetUrl = jest.spyOn(controller, 'getUrl'); - controller.load(true, false); + spyOnGetUrl = jest.spyOn(controller, 'getUrl').mockReturnValueOnce(dummyUrl); + controller.load(false, false); expect(spyOnGetUrl).toHaveBeenCalled(); + expect(mockLoad).toHaveBeenCalledWith(dummyUrl, false, true, false); }); describe('standard svg', () => { it('should call the asset path of ods', () => { setup(); controller.load(true); - expect(odsGetAssetPathFct).toHaveBeenNthCalledWith(1, 'fr.svg', undefined); + expect(odsGetAssetPath).toHaveBeenNthCalledWith(1, 'fr.svg', ''); }); + it('should call getAssetPath from component', () => { setup(); const path = 'my-mocked-path'; @@ -135,30 +139,31 @@ describe('spec:ods-flag-controller', () => { controller.load(true); expect(spyOnGetAssetPath).toHaveBeenCalled(); }); + it('should call load with correct path', () => { setup(); const path = 'my-mocked-path'; spyOnGetAssetPath = jest.spyOn(component, 'getAssetPath').mockImplementation(() => path); controller.load(true); - expect(loadContent.load).toHaveBeenNthCalledWith(1, 'my-mocked-path', true, true, true); + expect(mockLoad).toHaveBeenNthCalledWith(1, 'my-mocked-path', true, true, true); }); }); describe('getSrc', () => { it('should call GetSrc function', () => { const src = 'my/src/fr.svg'; - setup({src}); + setup({ src }); controller.load(true); - expect(odsGetSrcFct).toHaveBeenNthCalledWith(1, 'my/src/fr.svg'); + expect(odsGetSrc).toHaveBeenNthCalledWith(1, 'my/src/fr.svg'); }); }); describe('custom svg src', () => { it('should manage an url with src', () => { setup({src: 'my/src/fr.svg'}); - odsGetSrcFct.mockImplementation(() => 'my-mocked-result'); + mockOdsGetSrc.mockReturnValueOnce('my-mocked-result'); controller.load(true); - expect(loadContent.load).toHaveBeenNthCalledWith(1, 'my-mocked-result', true, true, true); + expect(mockLoad).toHaveBeenNthCalledWith(1, 'my-mocked-result', true, true, true); }); }); @@ -168,7 +173,7 @@ describe('spec:ods-flag-controller', () => { it('should call load management destroy', () => { setup(); controller.onDestroy(); - expect(loadContent.onDestroy).toHaveBeenCalledTimes(1); + expect(mockOnDestroy).toHaveBeenCalledTimes(1); }); }); @@ -176,22 +181,22 @@ describe('spec:ods-flag-controller', () => { it('should call waitUntilVisible of load management', () => { setup(); controller.onInit(() => undefined, true); - expect(loadContent.waitUntilVisible).toHaveBeenCalledTimes(1); + expect(mockWaitUntilVisible).toHaveBeenCalledTimes(1); }); + it('should call load of component once visible', () => { setup(); - jest.spyOn(loadContent, 'waitUntilVisible').mockImplementation((_host, _margin, cb) => cb()); - controller.onInit(() => true, true); + mockWaitUntilVisible.mockImplementation((_host, _margin, cb) => cb()); controller.onInit(() => true, true); expect(component.load).toHaveBeenCalledTimes(1); }); + it('should call onBecomeVisible cbk once visible', () => { let visible = false; setup(); - jest.spyOn(loadContent, 'waitUntilVisible').mockImplementation((_host, _margin, cb) => cb()); + mockWaitUntilVisible.mockImplementation((_host, _margin, cb) => cb()); controller.onInit(() => visible = true, true); expect(visible).toEqual(true); }); }); - }); }); diff --git a/packages/libraries/core/src/components/flag/ods-flag-controller.ts b/packages-new/components/flag/src/components/osds-flag/core/controller.ts similarity index 79% rename from packages/libraries/core/src/components/flag/ods-flag-controller.ts rename to packages-new/components/flag/src/components/osds-flag/core/controller.ts index 607adcccc5..2ea3f58bb7 100644 --- a/packages/libraries/core/src/components/flag/ods-flag-controller.ts +++ b/packages-new/components/flag/src/components/osds-flag/core/controller.ts @@ -1,25 +1,29 @@ -import { ODS_COUNTRY_ISO_CODE, OdsCountryIsoCodeList } from '../../i18n/ods-country-iso-codes.types'; -import { OdsComponentController } from '../ods-component-controller'; -import { OdsFlag } from './ods-flag'; -import { OdsLogger } from '../../logger/ods-logger'; -import { odsIsTermInEnum } from '../../types/guard/ods-is-term-in-enum'; -import { OdsLoadContent } from '../../content/ods-load-content'; -import { OdsSvgValidator } from '../../content/ods-svg-validator'; -import { odsGetSrc } from '../../utils/string/ods-get-src'; -import { odsGetAssetPath } from '../../utils/path/ods-get-asset-path'; +import type { OsdsFlag } from '../osds-flag'; + +import { + ODS_COUNTRY_ISO_CODE, + OdsCountryIsoCodeList, + OdsLogger, + odsIsTermInEnum, + OdsLoadContent, + OdsSvgValidator, + odsGetSrc, + odsGetAssetPath +} from '@ovhcloud/ods-common-core'; /** * common controller logic for flag component used by the different implementations. * it contains all the glue between framework implementation and the third party service. */ -export class OdsFlagController extends OdsComponentController { +class OdsFlagController { private readonly logger = new OdsLogger('OdsFlagController'); + protected component: OsdsFlag; private svgLoadContent = new OdsLoadContent([ (content) => OdsSvgValidator.validateContent(content) ]); - constructor(component: OdsFlag) { - super(component); + constructor(component: OsdsFlag) { + this.component = component } /** @@ -98,3 +102,5 @@ export class OdsFlagController extends OdsComponentController { return this.component.getAssetPath(`${path}`); } } + +export { OdsFlagController } diff --git a/packages-new/components/flag/src/components/osds-flag/interfaces/attributes.ts b/packages-new/components/flag/src/components/osds-flag/interfaces/attributes.ts new file mode 100644 index 0000000000..badf72e7bb --- /dev/null +++ b/packages-new/components/flag/src/components/osds-flag/interfaces/attributes.ts @@ -0,0 +1,25 @@ +import type { ODS_COUNTRY_ISO_CODE } from '@ovhcloud/ods-common-core'; + +interface OdsFlagAttribute { + /** + * override the `ODS` directory path of the assets. + * if not set, the configured path in `ODS` will be used. + */ + assetPath?: string; + /** + * Flag ISO country code + */ + iso?: ODS_COUNTRY_ISO_CODE; + /** + * allow to lazy load the content only when it's visible + */ + lazy: boolean; + /** + * override with custom src to the svg file. + */ + src?: string; +} + +export { + OdsFlagAttribute, +}; diff --git a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.e2e.screenshot.ts b/packages-new/components/flag/src/components/osds-flag/osds-flag.e2e.screenshot.ts similarity index 63% rename from packages/stencil/components/flag/src/components/osds-flag/osds-flag.e2e.screenshot.ts rename to packages-new/components/flag/src/components/osds-flag/osds-flag.e2e.screenshot.ts index 2e3e0c8876..5348131024 100644 --- a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.e2e.screenshot.ts +++ b/packages-new/components/flag/src/components/osds-flag/osds-flag.e2e.screenshot.ts @@ -1,32 +1,30 @@ -import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing'; -import { - OdsComponentAttributes2StringAttributes, - OdsFlagAttributes, - odsFlagDefaultAttributes, -} from '@ovhcloud/ods-core'; -import { OdsCreateAttributes, OdsStringAttributes2Str, odsFlagBaseAttributes } from '@ovhcloud/ods-testing'; -import { OdsCountryIsoCodeList } from '@ovhcloud/ods-core'; +import type { E2EElement, E2EPage } from '@stencil/core/testing'; +import type { OdsFlagAttribute } from './interfaces/attributes'; +import { ODS_COUNTRY_ISO_CODE, OdsCountryIsoCodeList } from '@ovhcloud/ods-common-core'; +import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing'; +import { newE2EPage } from '@stencil/core/testing'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; describe('e2e:osds-flag', () => { + const baseAttribute = { iso: ODS_COUNTRY_ISO_CODE.FR, lazy: false }; let page: E2EPage; let el: E2EElement; - async function setup({ attributes }: { attributes: Partial }) { - const minimalAttributes: OdsFlagAttributes = OdsCreateAttributes(attributes, odsFlagBaseAttributes); - const stringAttributes = OdsComponentAttributes2StringAttributes(minimalAttributes, odsFlagDefaultAttributes); + async function setup({ attributes = {} }: { attributes: Partial }) { + const stringAttributes = odsComponentAttributes2StringAttributes({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE); page = await newE2EPage(); - await page.setContent(``); + await page.setContent(``); await page.evaluate(() => document.body.style.setProperty('margin', '0px')); el = await page.find('osds-flag'); } - xdescribe('screenshots', () => { + describe('screenshots', () => { OdsCountryIsoCodeList.forEach((iso) => { it(`The flag ${iso} is displaying correctly`, async () => { await setup({ - attributes: { iso }, + attributes: { iso, assetPath: `./dist/flags/flags-4x3/` }, }); await page.waitForChanges(); await page.evaluate(() => { @@ -53,5 +51,4 @@ describe('e2e:osds-flag', () => { expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 }); }); }); - }); diff --git a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.e2e.ts b/packages-new/components/flag/src/components/osds-flag/osds-flag.e2e.ts similarity index 75% rename from packages/stencil/components/flag/src/components/osds-flag/osds-flag.e2e.ts rename to packages-new/components/flag/src/components/osds-flag/osds-flag.e2e.ts index fa417b18ea..3e40815c8e 100644 --- a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.e2e.ts +++ b/packages-new/components/flag/src/components/osds-flag/osds-flag.e2e.ts @@ -1,23 +1,18 @@ - -import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing'; -import { - Ods, - ODS_COUNTRY_ISO_CODE, - OdsComponentAttributes2StringAttributes, - OdsFlagAttributes, - odsFlagDefaultAttributes, - OdsWindow, - odsSetup, -} from '@ovhcloud/ods-core'; -import { OdsCreateAttributes, odsFlagBaseAttributes, OdsStringAttributes2Str } from '@ovhcloud/ods-testing'; +import type { E2EElement, E2EPage } from '@stencil/core/testing'; +import type { HTTPRequest as pRequest } from 'puppeteer'; +import type { OdsFlagAttribute } from './interfaces/attributes'; +import { Ods, ODS_COUNTRY_ISO_CODE, OdsWindow, odsSetup } from '@ovhcloud/ods-common-core'; +import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing'; import { odsSetE2eInterceptRequest } from '@ovhcloud/ods-stencil/libraries/stencil-testing'; -import { HTTPRequest as pRequest } from 'puppeteer'; import { Build } from '@stencil/core'; +import { newE2EPage } from '@stencil/core/testing'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes' // eslint-disable-next-line no-var declare var window: OdsWindow; describe('e2e:osds-flag', () => { + const baseAttribute = { iso: ODS_COUNTRY_ISO_CODE.FR, lazy: false }; let page: E2EPage; let el: E2EElement; let isoProperty: ODS_COUNTRY_ISO_CODE; @@ -25,9 +20,8 @@ describe('e2e:osds-flag', () => { let myCbk: (request: pRequest) => void; let spaceBefore = ``; - async function setup({ attributes, html = '', cbkInterceptorRequest, outsideViewport }: { attributes: Partial, html?: string, cbkInterceptorRequest?: (request: pRequest) => void, outsideViewport?: boolean }) { - const minimalAttributes: OdsFlagAttributes = OdsCreateAttributes(attributes, odsFlagBaseAttributes); - const stringAttributes = OdsComponentAttributes2StringAttributes(minimalAttributes, odsFlagDefaultAttributes); + async function setup({ attributes = {}, cbkInterceptorRequest, outsideViewport }: { attributes: Partial, html?: string, cbkInterceptorRequest?: (request: pRequest) => void, outsideViewport?: boolean }) { + const stringAttributes = odsComponentAttributes2StringAttributes({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE); page = await newE2EPage(); cbkInterceptorRequest && odsSetE2eInterceptRequest(page, cbkInterceptorRequest); @@ -37,12 +31,11 @@ describe('e2e:osds-flag', () => { } await page.setContent(` -${spaceBefore} -`); + ${spaceBefore} + `); await page.evaluate(() => document.body.style.setProperty('margin', '0px')); el = await page.find('osds-flag'); - } beforeEach( async () => { @@ -113,7 +106,7 @@ ${spaceBefore} }); it('should load with custom path', async () => { - await setup({ attributes: {iso: ODS_COUNTRY_ISO_CODE.FR ,assetPath: '../flags-custom-path/'}, cbkInterceptorRequest: myCbk}); + await setup({ attributes: { iso: ODS_COUNTRY_ISO_CODE.FR ,assetPath: '../flags-custom-path/' }, cbkInterceptorRequest: myCbk }); const pattern = /^https?:\/\/localhost(:\d+)?\/[\w\/]*flags-custom-path\/fr\.svg/; expect(url).toMatch(pattern); }); @@ -130,7 +123,7 @@ ${spaceBefore} request.continue(); } }; - await setup({ attributes: {iso: ODS_COUNTRY_ISO_CODE.FR, src: '../flags-custom-src-path/it.svg'}, cbkInterceptorRequest: myCbk }); + await setup({ attributes: { iso: ODS_COUNTRY_ISO_CODE.FR, src: '../flags-custom-src-path/it.svg' }, cbkInterceptorRequest: myCbk }); const pattern = /^https?:\/\/localhost(:\d+)?\/flags-custom-src-path\/it.svg/; expect(url).toMatch(pattern); }); @@ -138,12 +131,12 @@ ${spaceBefore} describe('lazy', () => { it('should load if visible', async () => { - await setup({ attributes: {iso: ODS_COUNTRY_ISO_CODE.FR, lazy: true}, cbkInterceptorRequest: myCbk }); + await setup({ attributes: { iso: ODS_COUNTRY_ISO_CODE.FR, lazy: true }, cbkInterceptorRequest: myCbk }); const pattern = /^https?:\/\/localhost(:\d+)?(\/.*)?\/fr\.svg$/; expect(url).toMatch(pattern); }); it('should not load if hidden', async () => { - await setup({ attributes: {iso: ODS_COUNTRY_ISO_CODE.FR, lazy: true}, cbkInterceptorRequest: myCbk, outsideViewport: true }); + await setup({ attributes: { iso: ODS_COUNTRY_ISO_CODE.FR, lazy: true }, cbkInterceptorRequest: myCbk, outsideViewport: true }); expect(url).toBe(''); }); }); @@ -169,5 +162,4 @@ ${spaceBefore} expect(svgContent).toEqual(''); Build.isBrowser = old; }); - }); diff --git a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.scss b/packages-new/components/flag/src/components/osds-flag/osds-flag.scss similarity index 100% rename from packages/stencil/components/flag/src/components/osds-flag/osds-flag.scss rename to packages-new/components/flag/src/components/osds-flag/osds-flag.scss diff --git a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.spec.ts b/packages-new/components/flag/src/components/osds-flag/osds-flag.spec.ts similarity index 68% rename from packages/stencil/components/flag/src/components/osds-flag/osds-flag.spec.ts rename to packages-new/components/flag/src/components/osds-flag/osds-flag.spec.ts index d1f3027a3b..52ea74c516 100644 --- a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.spec.ts +++ b/packages-new/components/flag/src/components/osds-flag/osds-flag.spec.ts @@ -1,36 +1,18 @@ -jest.mock('@stencil/core/internal', () => { - const originalModule = jest.requireActual('@stencil/core/internal'); - return { - ...originalModule, - getAssetPath: jest.fn() - }; -}); -jest.mock('@ovhcloud/ods-core/src/components/flag/ods-flag-controller'); -import { mockOdsFlagController } from '@ovhcloud/ods-core/src/components/flag/ods-flag-controller.mock'; -mockOdsFlagController(); - -import { - ODS_COUNTRY_ISO_CODE, - OdsComponentAttributes2StringAttributes, - OdsCountryIsoCodeList, - OdsFlagAttributes, - OdsFlagController, - odsFlagDefaultAttributes, -} from '@ovhcloud/ods-core'; -import { - OdsCreateAttributes, - odsFlagBaseAttributes, - OdsStringAttributes2Str, - odsUnitTestAttribute, - OdsUnitTestAttributeType -} from '@ovhcloud/ods-testing'; -import { newSpecPage, SpecPage } from '@stencil/core/testing'; +jest.mock('./core/controller') + +import type { SpecPage } from '@stencil/core/testing'; +import type { OdsFlagAttribute } from './interfaces/attributes'; +import { ODS_COUNTRY_ISO_CODE, OdsComponentAttributes2StringAttributes } from '@ovhcloud/ods-common-core'; +import { odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing'; import { Build } from '@stencil/core'; -import { OsdsFlag } from './osds-flag'; -import { getAttributeContextOptions } from '@ovhcloud/ods-stencil/libraries/stencil-testing'; +import { newSpecPage } from '@stencil/core/testing'; import { getAssetPath } from '@stencil/core/internal'; +import { OdsFlagController } from './core/controller'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes' +import { OsdsFlag } from './osds-flag'; describe('spec:osds-flag', () => { + const baseAttribute = { iso: ODS_COUNTRY_ISO_CODE.FR, lazy: false }; let page: SpecPage; let root: HTMLElement | undefined; let divEl: HTMLElement | null | undefined; @@ -38,13 +20,12 @@ describe('spec:osds-flag', () => { let shadowRoot: ShadowRoot | null | undefined; let controller: OdsFlagController; - async function setup({ attributes = {} }: { attributes?: Partial } = {}) { - const minimalAttributes: OdsFlagAttributes = OdsCreateAttributes(attributes, odsFlagBaseAttributes); - const stringAttributes = OdsComponentAttributes2StringAttributes(minimalAttributes, odsFlagDefaultAttributes); + async function setup({ attributes = {} }: { attributes?: Partial } = {}) { + const stringAttributes = OdsComponentAttributes2StringAttributes({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE); page = await newSpecPage({ components: [OsdsFlag], - html: ``, + html: ``, }); root = page.root; @@ -75,51 +56,51 @@ describe('spec:osds-flag', () => { const config = { page: () => page, instance: () => instance, - setup + root: () => page.root, + wait: () => page.waitForChanges(), }; describe('iso', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'iso', - list: OdsCountryIsoCodeList, - defaultValue: odsFlagDefaultAttributes.iso, - ...config - }), - include: [OdsUnitTestAttributeType.MUTABLE] + odsUnitTestAttribute({ + name: 'iso', + defaultValue: DEFAULT_ATTRIBUTE.iso, + newValue: ODS_COUNTRY_ISO_CODE.ES, + value: ODS_COUNTRY_ISO_CODE.FR, + setup: (value) => setup({ attributes: { ['iso']: value } }), + ...config }); }); describe('src', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'src', - list: [undefined, 'my/path.svg'], - defaultValue: odsFlagDefaultAttributes.src, - ...config - }) + odsUnitTestAttribute({ + name: 'src', + defaultValue: DEFAULT_ATTRIBUTE.src, + newValue: '', + value: 'my/path.svg', + setup: (value) => setup({ attributes: { ['src']: value } }), + ...config }); }); describe('assetPath', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'assetPath', - list: [undefined, 'my/path/'], - defaultValue: odsFlagDefaultAttributes.assetPath, - ...config - }) + odsUnitTestAttribute({ + name: 'assetPath', + defaultValue: DEFAULT_ATTRIBUTE.assetPath, + newValue: '', + value: 'my/path', + setup: (value) => setup({ attributes: { ['assetPath']: value } }), + ...config }); }); describe('lazy', () => { - odsUnitTestAttribute({ - ...getAttributeContextOptions({ - name: 'lazy', - list: [false, true], - defaultValue: odsFlagDefaultAttributes.lazy, - ...config - }) + odsUnitTestAttribute({ + name: 'lazy', + defaultValue: DEFAULT_ATTRIBUTE.lazy, + newValue: false, + value: true, + setup: (value) => setup({ attributes: { ['lazy']: value } }), + ...config }); }); @@ -222,5 +203,4 @@ describe('spec:osds-flag', () => { expect(divEl).toBeTruthy(); expect(divEl?.innerHTML).toEqual(''); }); - }); diff --git a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.tsx b/packages-new/components/flag/src/components/osds-flag/osds-flag.tsx similarity index 72% rename from packages/stencil/components/flag/src/components/osds-flag/osds-flag.tsx rename to packages-new/components/flag/src/components/osds-flag/osds-flag.tsx index 391a8f89b6..b9d8e2f03e 100644 --- a/packages/stencil/components/flag/src/components/osds-flag/osds-flag.tsx +++ b/packages-new/components/flag/src/components/osds-flag/osds-flag.tsx @@ -1,35 +1,27 @@ +import type { OdsFlagAttribute } from './interfaces/attributes'; +import { OdsLogger, odsHasAriaHidden, ODS_COUNTRY_ISO_CODE } from '@ovhcloud/ods-common-core' import { Build, Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'; -import { - ODS_COUNTRY_ISO_CODE, - OdsFlag, - OdsFlagController, - odsFlagDefaultAttributes, - OdsFlagEvents, - OdsFlagMethods, - odsHasAriaHidden, - OdsLogger -} from '@ovhcloud/ods-core'; -import { OdsStencilEvents, OdsStencilMethods } from '@ovhcloud/ods-stencil/libraries/stencil-core'; -import { HTMLStencilElement } from '@stencil/core/internal'; +import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; +import { OdsFlagController } from './core/controller' @Component({ tag: 'osds-flag', styleUrl: 'osds-flag.scss', shadow: true }) -export class OsdsFlag implements OdsFlag, OdsStencilEvents> { +export class OsdsFlag implements OdsFlagAttribute { controller: OdsFlagController = new OdsFlagController(this); - @Element() hostElement!: HTMLStencilElement; + @Element() hostElement!: HTMLElement; /** @see OdsFlagAttributes.assetPath */ - @Prop({ reflect: true }) assetPath = odsFlagDefaultAttributes.assetPath; + @Prop({ reflect: true }) assetPath = DEFAULT_ATTRIBUTE.assetPath; /** @see OdsFlagAttributes.iso */ - @Prop({ reflect: true, mutable: true }) iso: ODS_COUNTRY_ISO_CODE | undefined = odsFlagDefaultAttributes.iso; + @Prop({ reflect: true, mutable: true }) iso?: ODS_COUNTRY_ISO_CODE = DEFAULT_ATTRIBUTE.iso; /** @see OdsFlagAttributes.lazy */ - @Prop({ reflect: true }) lazy = odsFlagDefaultAttributes.lazy; + @Prop({ reflect: true }) lazy = DEFAULT_ATTRIBUTE.lazy; /** @see OdsFlagAttributes.src */ - @Prop({ reflect: true }) src = odsFlagDefaultAttributes.src; + @Prop({ reflect: true }) src = DEFAULT_ATTRIBUTE.src; @State() private ariaLabel?: string; @State() private visible = false; diff --git a/packages-new/components/flag/src/components/osds-flag/public-api.ts b/packages-new/components/flag/src/components/osds-flag/public-api.ts new file mode 100644 index 0000000000..90b4f83f7c --- /dev/null +++ b/packages-new/components/flag/src/components/osds-flag/public-api.ts @@ -0,0 +1,2 @@ +export type { OdsFlagAttribute } from './interfaces/attributes' +export { OsdsFlag } from './osds-flag' diff --git a/packages/stencil/components/flag/src/docs/osds-flag/usage.mdx b/packages-new/components/flag/src/docs/osds-flag/usage.mdx similarity index 95% rename from packages/stencil/components/flag/src/docs/osds-flag/usage.mdx rename to packages-new/components/flag/src/docs/osds-flag/usage.mdx index f8ec9e4c25..4bf3f52695 100644 --- a/packages/stencil/components/flag/src/docs/osds-flag/usage.mdx +++ b/packages-new/components/flag/src/docs/osds-flag/usage.mdx @@ -1,4 +1,4 @@ -import GenericStyle from '@ovhcloud/ods-core/docs/generic-style.mdx'; +import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx'; diff --git a/packages/stencil/components/flag/src/global.dev.ts b/packages-new/components/flag/src/global.dev.ts similarity index 77% rename from packages/stencil/components/flag/src/global.dev.ts rename to packages-new/components/flag/src/global.dev.ts index bcface960f..9e11fec66f 100644 --- a/packages/stencil/components/flag/src/global.dev.ts +++ b/packages-new/components/flag/src/global.dev.ts @@ -5,9 +5,8 @@ import './components'; import './global'; -import { OdsLogger } from '@ovhcloud/ods-core'; -import { Ods, odsSetup } from '@ovhcloud/ods-core'; -import { OsdsFlag } from '@ovhcloud/ods-stencil/components/flag/src'; +import { Ods, odsSetup, OdsLogger } from '@ovhcloud/ods-common-core'; +import { OsdsFlag } from './components/osds-flag/osds-flag'; odsSetup(); diff --git a/packages/stencil/components/flag/src/global.prod.ts b/packages-new/components/flag/src/global.prod.ts similarity index 100% rename from packages/stencil/components/flag/src/global.prod.ts rename to packages-new/components/flag/src/global.prod.ts diff --git a/packages/stencil/components/flag/src/global.test.ts b/packages-new/components/flag/src/global.test.ts similarity index 98% rename from packages/stencil/components/flag/src/global.test.ts rename to packages-new/components/flag/src/global.test.ts index e126fb694b..51f8df8940 100644 --- a/packages/stencil/components/flag/src/global.test.ts +++ b/packages-new/components/flag/src/global.test.ts @@ -2,6 +2,4 @@ // global script file to include only in test mode. // it always has to include './global.ts' // ### - import './global'; - diff --git a/packages/stencil/components/flag/src/global.ts b/packages-new/components/flag/src/global.ts similarity index 81% rename from packages/stencil/components/flag/src/global.ts rename to packages-new/components/flag/src/global.ts index 156aed63ff..38a9dd3c98 100644 --- a/packages/stencil/components/flag/src/global.ts +++ b/packages-new/components/flag/src/global.ts @@ -3,7 +3,7 @@ // it allows to initialize some stuff of the library, after the component itself // ### -import { OdsLogger } from '@ovhcloud/ods-core'; +import { OdsLogger } from '@ovhcloud/ods-common-core'; const logger = new OdsLogger('flag.global'); logger.log('init'); diff --git a/packages/stencil/components/flag/src/index.html b/packages-new/components/flag/src/index.html similarity index 100% rename from packages/stencil/components/flag/src/index.html rename to packages-new/components/flag/src/index.html diff --git a/packages/stencil/components/flag/src/index.ts b/packages-new/components/flag/src/index.ts similarity index 100% rename from packages/stencil/components/flag/src/index.ts rename to packages-new/components/flag/src/index.ts diff --git a/packages/stencil/components/flag/stencil.config.ts b/packages-new/components/flag/stencil.config.ts similarity index 74% rename from packages/stencil/components/flag/stencil.config.ts rename to packages-new/components/flag/stencil.config.ts index 0da19bab73..c7c368313c 100644 --- a/packages/stencil/components/flag/stencil.config.ts +++ b/packages-new/components/flag/stencil.config.ts @@ -1,6 +1,6 @@ import * as jestConfig from './jest.config'; import { Config } from '@stencil/core'; -import { getStencilConfig } from '@ovhcloud/ods-stencil/libraries/stencil-core'; +import { getStencilConfig } from '@ovhcloud/ods-common-stencil'; const args = process.argv.slice(2); @@ -9,12 +9,12 @@ const config: Config = getStencilConfig({ args, jestConfig: jestConfig.default, reactOutput: { - componentCorePackage: '@ovhcloud/ods-stencil/components/flag', + componentCorePackage: '@ovhcloud/ods-component-flag', // exclude peer dependencies that corresponds to www usage excludeComponents: [] }, vueOutput: { - componentCorePackage: '@ovhcloud/ods-stencil/components/flag', + componentCorePackage: '@ovhcloud/ods-component-flag', excludeComponents: [] }, dev: { @@ -33,7 +33,7 @@ config.outputTargets?.forEach(output => { output.copy = output.copy || []; output.copy.push( { - src: '../../../../../node_modules/flag-icons/flags/4x3/', + src: '../../../../node_modules/flag-icons/flags/4x3/', dest: `${output.type === 'dist-custom-elements' ? 'dist/' : ''}flags/flags-4x3/`, } ); @@ -41,7 +41,7 @@ config.outputTargets?.forEach(output => { if (output.type === 'www') { output.copy = output.copy || []; output.copy.push({ - src: '../../../../../node_modules/flag-icons/flags/4x3/', + src: '../../../../node_modules/flag-icons/flags/4x3/', dest: 'flags-custom-path/' }); } diff --git a/packages/stencil/components/flag/tsconfig.dev.json b/packages-new/components/flag/tsconfig.dev.json similarity index 100% rename from packages/stencil/components/flag/tsconfig.dev.json rename to packages-new/components/flag/tsconfig.dev.json diff --git a/packages/stencil/components/flag/tsconfig.json b/packages-new/components/flag/tsconfig.json similarity index 100% rename from packages/stencil/components/flag/tsconfig.json rename to packages-new/components/flag/tsconfig.json diff --git a/packages/stencil/components/flag/tsconfig.prod.json b/packages-new/components/flag/tsconfig.prod.json similarity index 100% rename from packages/stencil/components/flag/tsconfig.prod.json rename to packages-new/components/flag/tsconfig.prod.json diff --git a/packages/stencil/components/flag/tsconfig.test.json b/packages-new/components/flag/tsconfig.test.json similarity index 100% rename from packages/stencil/components/flag/tsconfig.test.json rename to packages-new/components/flag/tsconfig.test.json diff --git a/packages/stencil/components/flag/typedoc.json b/packages-new/components/flag/typedoc.json similarity index 74% rename from packages/stencil/components/flag/typedoc.json rename to packages-new/components/flag/typedoc.json index 2d005a6b51..825fd78106 100644 --- a/packages/stencil/components/flag/typedoc.json +++ b/packages-new/components/flag/typedoc.json @@ -1,6 +1,6 @@ { "entryPoints": ["src"], - "out": "docs-api/stencil-components-flag", + "out": "docs-api/ods-component-flag", "tsconfig":"tsconfig.prod.json", "exclude": "**/*+(index|.spec|.e2e|.d).ts", "plugin": "none" diff --git a/packages/stencil/components/flag/vue/.gitignore b/packages-new/components/flag/vue/.gitignore similarity index 100% rename from packages/stencil/components/flag/vue/.gitignore rename to packages-new/components/flag/vue/.gitignore diff --git a/packages/stencil/components/flag/vue/.npmignore b/packages-new/components/flag/vue/.npmignore similarity index 100% rename from packages/stencil/components/flag/vue/.npmignore rename to packages-new/components/flag/vue/.npmignore diff --git a/packages/stencil/components/flag/vue/CHANGELOG.md b/packages-new/components/flag/vue/CHANGELOG.md similarity index 100% rename from packages/stencil/components/flag/vue/CHANGELOG.md rename to packages-new/components/flag/vue/CHANGELOG.md diff --git a/packages/stencil/components/flag/vue/package.json b/packages-new/components/flag/vue/package.json similarity index 79% rename from packages/stencil/components/flag/vue/package.json rename to packages-new/components/flag/vue/package.json index bd190d0845..79a04c133f 100644 --- a/packages/stencil/components/flag/vue/package.json +++ b/packages-new/components/flag/vue/package.json @@ -1,5 +1,5 @@ { - "name": "@ovhcloud/ods-stencil-flag-vue", + "name": "@ovhcloud/ods-component-flag-vue", "version": "15.0.1", "private": true, "description": "Vue specific wrapper for ods", @@ -20,14 +20,12 @@ "dist/" ], "dependencies": { - "@ovhcloud/ods-stencil-flag": "^15.0.1" + "@ovhcloud/ods-component-flag": "^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/flag/vue/tsconfig.cjs.json b/packages-new/components/flag/vue/tsconfig.cjs.json similarity index 100% rename from packages/stencil/components/flag/vue/tsconfig.cjs.json rename to packages-new/components/flag/vue/tsconfig.cjs.json diff --git a/packages/stencil/components/flag/vue/tsconfig.json b/packages-new/components/flag/vue/tsconfig.json similarity index 100% rename from packages/stencil/components/flag/vue/tsconfig.json rename to packages-new/components/flag/vue/tsconfig.json diff --git a/packages/libraries/core/src/components/flag/ods-flag-attributes.ts b/packages/libraries/core/src/components/flag/ods-flag-attributes.ts deleted file mode 100644 index eb94f95337..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag-attributes.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ODS_COUNTRY_ISO_CODE } from '../../i18n/ods-country-iso-codes.types'; -import { OdsComponentAttributes } from '../ods-component-attributes'; - -export interface OdsFlagAttributes extends OdsComponentAttributes { - /** - * Flag ISO country code - */ - iso: ODS_COUNTRY_ISO_CODE | undefined; - /** - * allow to lazy load the content only when it's visible - */ - lazy: boolean; - /** - * override with custom src to the svg file. - */ - src: string | undefined; - /** - * override the `ODS` directory path of the assets. - * if not set, the configured path in `ODS` will be used. - */ - assetPath: string | undefined; -} diff --git a/packages/libraries/core/src/components/flag/ods-flag-behavior.ts b/packages/libraries/core/src/components/flag/ods-flag-behavior.ts deleted file mode 100644 index 09e3720bbe..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag-behavior.ts +++ /dev/null @@ -1,38 +0,0 @@ -export interface OdsFlagBehavior { - /** - * reference to the host element of the component - */ - hostElement: Host; - - /** - * get the asset directory path in witch the content is serve. - * could be like `build/` or empty. - * in addition, the `ODS` asset path will be used. - * @see OdsFlagController.getUrlForIso - * @param url - computed url to override - */ - getAssetPath(url: string): string; - - /** - * trigger the content load. - * should be triggered when `iso`, `assetPath` and `src` attributes changed. - * should call controller's method `load` and change the svg content with the one received. - * should define the `aria-label` to use with `iso` code. - * @see OdsFlagController.load - */ - load(): void; - - /** - * clean up thing. - * should call controller's method `onDestroy` - * @see OdsFlagController.onDestroy - */ - onDestroy(): void; - - /** - * initialization of the component. - * should call the controller's `onInit` method and store the state of visibility. - * @see OdsFlagController.onInit - */ - onInit(): void; -} diff --git a/packages/libraries/core/src/components/flag/ods-flag-controller.mock.ts b/packages/libraries/core/src/components/flag/ods-flag-controller.mock.ts deleted file mode 100644 index 59f9774050..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag-controller.mock.ts +++ /dev/null @@ -1,39 +0,0 @@ -// import { OdsComponentController } from '../ods-component-controller'; -// import { OdsFlag } from './ods-flag'; -// import { OdsFlagController, tyty } from './ods-flag-controller'; -// import { OdsLogger } from '../../logger/ods-logger'; -// import { OdsLoadContent } from '../../content/ods-load-content'; -// import { OdsSvgValidator } from '../../content/ods-svg-validator'; -// import { OdsFlagMock } from './ods-flag.mock'; -// -// export class OdsFlagControllerMock extends OdsComponentController implements tyty { -// static svgContent = ''; -// -// static changeResponse(svgContent: string) { -// this.svgContent = svgContent; -// } -// -// load(_isVisible:boolean, _isBrowser:boolean): Promise { -// return new Promise(resolve => resolve(OdsFlagControllerMock.svgContent)); -// } -// } -// -// export const OdsFlagControllerMocked2: jest.MockedClass = { -// -// component: new OdsFlagMock(), -// logger: new OdsLogger('OdsFlagController mocked'), -// svgLoadContent: new OdsLoadContent([ -// (content) => OdsSvgValidator.validateContent(content) -// ]), -// load: jest.fn().mockImplementation(() => new Promise(resolve => resolve(''))), -// onInit: jest.fn(), -// onDestroy: jest.fn(), -// validateISO: jest.fn(), -// getUrl: jest.fn(), -// getUrlForIso: jest.fn() -// } - -export function mockOdsFlagController() { - - -} diff --git a/packages/libraries/core/src/components/flag/ods-flag-default-attributes.ts b/packages/libraries/core/src/components/flag/ods-flag-default-attributes.ts deleted file mode 100644 index 73bfbf6a57..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag-default-attributes.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { OdsFlagAttributes } from './ods-flag-attributes'; -import { ODS_COUNTRY_ISO_CODE } from '../../i18n/ods-country-iso-codes.types'; - -/** - * default attribute values of flag - */ -export const odsFlagDefaultAttributesDoc = { - iso: ODS_COUNTRY_ISO_CODE.FR, - lazy: false -} as const; - -export const odsFlagDefaultAttributes = odsFlagDefaultAttributesDoc as OdsFlagAttributes; diff --git a/packages/libraries/core/src/components/flag/ods-flag-events.ts b/packages/libraries/core/src/components/flag/ods-flag-events.ts deleted file mode 100644 index 1b1a88f946..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag-events.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { OdsComponentEvents } from '../ods-component-events'; - -export interface OdsFlagEvents extends OdsComponentEvents { -} diff --git a/packages/libraries/core/src/components/flag/ods-flag-methods.ts b/packages/libraries/core/src/components/flag/ods-flag-methods.ts deleted file mode 100644 index 9f73d0651d..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag-methods.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { OdsComponentMethods } from '../ods-component-methods'; - -export interface OdsFlagMethods extends OdsComponentMethods { -} diff --git a/packages/libraries/core/src/components/flag/ods-flag.mock.ts b/packages/libraries/core/src/components/flag/ods-flag.mock.ts deleted file mode 100644 index 814046ffe1..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag.mock.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ODS_COUNTRY_ISO_CODE } from "../../i18n/ods-country-iso-codes.types"; -import { OdsFlag } from "./ods-flag"; -import { OdsFlagController } from "./ods-flag-controller"; -import { OdsFlagEvents } from "./ods-flag-events"; -import { OdsFlagMethods } from "./ods-flag-methods"; - -export class OdsFlagMock implements OdsFlag { - assetPath = undefined; - beforeRender = jest.fn(); - controller: OdsFlagController = jest.fn() as unknown as OdsFlagController; - getAssetPath = jest.fn(); - hostElement!: HTMLElement; - iso = ODS_COUNTRY_ISO_CODE.FR; - lazy = false; - load = jest.fn(); - onDestroy = jest.fn(); - onInit = jest.fn(); - src = undefined; -} diff --git a/packages/libraries/core/src/components/flag/ods-flag.ts b/packages/libraries/core/src/components/flag/ods-flag.ts deleted file mode 100644 index 1a0c62edbd..0000000000 --- a/packages/libraries/core/src/components/flag/ods-flag.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { OdsComponent } from '../ods-component'; -import { OdsComponentGenericEvents } from '../ods-component-generic-events'; -import { OdsComponentGenericMethods } from '../ods-component-generic-methods'; -import { OdsFlagAttributes } from './ods-flag-attributes'; -import { OdsFlagBehavior } from './ods-flag-behavior'; -import { OdsFlagController } from './ods-flag-controller'; -import { OdsFlagEvents } from './ods-flag-events'; -import { OdsFlagMethods } from './ods-flag-methods'; - -/** - * interface description of all implementation of `ods-flag`. - * each implementation must have defined events, methods, attributes - * and one controller for the common behavior logic - */ -export type OdsFlag = OdsComponentGenericMethods, - ComponentEvents extends OdsComponentGenericEvents = OdsComponentGenericEvents> = - OdsComponent; diff --git a/packages/libraries/core/src/components/flag/public-api.ts b/packages/libraries/core/src/components/flag/public-api.ts deleted file mode 100644 index c349bcea80..0000000000 --- a/packages/libraries/core/src/components/flag/public-api.ts +++ /dev/null @@ -1,8 +0,0 @@ -export * from './ods-flag'; -export * from './ods-flag-attributes'; -export * from './ods-flag-behavior'; -export * from './ods-flag-controller'; -export * from './ods-flag-default-attributes'; -export * from './ods-flag-events'; -export * from './ods-flag-methods'; -export * from './ods-flag.mock'; diff --git a/packages/libraries/core/src/components/public-api.ts b/packages/libraries/core/src/components/public-api.ts index 83939ab20d..d308005002 100644 --- a/packages/libraries/core/src/components/public-api.ts +++ b/packages/libraries/core/src/components/public-api.ts @@ -11,7 +11,6 @@ export * from './cart-total/public-api'; export * from './cart/public-api'; export * from './clipboard/public-api'; export * from './code/public-api'; -export * from './flag/public-api'; export * from './form-field/public-api'; export * from './location-tile/public-api'; export * from './popover/public-api'; diff --git a/packages/libraries/testing/src/components/flag/ods-flag-base-attributes.ts b/packages/libraries/testing/src/components/flag/ods-flag-base-attributes.ts deleted file mode 100644 index 031c914c69..0000000000 --- a/packages/libraries/testing/src/components/flag/ods-flag-base-attributes.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { OdsFlagAttributes } from '@ovhcloud/ods-core'; - -/** - * base attributes value of flag - */ -export const odsFlagBaseAttributes: OdsFlagAttributes = { - iso: undefined, - lazy: false, - src: undefined, - assetPath: undefined -}; diff --git a/packages/libraries/testing/src/components/flag/public-api.ts b/packages/libraries/testing/src/components/flag/public-api.ts deleted file mode 100644 index 6da4f414fd..0000000000 --- a/packages/libraries/testing/src/components/flag/public-api.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ods-flag-base-attributes'; diff --git a/packages/libraries/testing/src/components/public-api.ts b/packages/libraries/testing/src/components/public-api.ts index 4fdf73aebb..d138dce3c3 100644 --- a/packages/libraries/testing/src/components/public-api.ts +++ b/packages/libraries/testing/src/components/public-api.ts @@ -1,7 +1,6 @@ export * from './accordion/public-api'; export * from './cart/public-api'; export * from './code/public-api'; -export * from './flag/public-api'; export * from './location-tile/public-api'; export * from './message/public-api'; export * from './popover/public-api'; diff --git a/packages/specifications/components/flag/specifications-flag.mdx b/packages/specifications/components/flag/specifications-flag.mdx deleted file mode 100644 index 46c4142411..0000000000 --- a/packages/specifications/components/flag/specifications-flag.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import {Description} from '@storybook/addon-docs'; -import Specs from '@ovhcloud/ods-core/src/components/flag/docs/spec.md'; -import SpecsFlagContents from '@ovhcloud/ods-specifications/components/flag/specifications-flag-contents.mdx'; -import SpecsFlagTests from '@ovhcloud/ods-specifications/components/flag/specifications-flag-tests.mdx'; - -## Description -The flag component grow to the size of the parent's container - -{Specs} - -## Contents - - -## Tests - diff --git a/packages/starters/react-vite/src/demo/Demo.tsx b/packages/starters/react-vite/src/demo/Demo.tsx index 5ae36f4b2b..72c8362d97 100644 --- a/packages/starters/react-vite/src/demo/Demo.tsx +++ b/packages/starters/react-vite/src/demo/Demo.tsx @@ -13,8 +13,8 @@ import { OsdsRadio, OsdsRadioGroup, OsdsToggle, - OsdsFlag } from '@ovhcloud/ods-stencil/components/react'; +import { OsdsFlag } from '@ovhcloud/ods-component-flag/react' // each type you import types from ODS, you will need to import the core import { Ods, OdsExternalLogger, OdsMessageType, ODS_COUNTRY_ISO_CODE } from '@ovhcloud/ods-core'; diff --git a/packages/starters/react/src/demo/Demo.tsx b/packages/starters/react/src/demo/Demo.tsx index a15758c6df..cef365c982 100644 --- a/packages/starters/react/src/demo/Demo.tsx +++ b/packages/starters/react/src/demo/Demo.tsx @@ -13,8 +13,8 @@ import { OsdsRadio, OsdsRadioGroup, OsdsToggle, - OsdsFlag } from '@ovhcloud/ods-stencil/components/react'; +import { OsdsFlag } from '@ovhcloud/ods-component-flag/react' // each type you import types from ODS, you will need to import the core import { Ods, OdsExternalLogger, OdsMessageType, ODS_COUNTRY_ISO_CODE } from '@ovhcloud/ods-core'; diff --git a/packages/starters/vue-vite/src/demo/Demo.vue b/packages/starters/vue-vite/src/demo/Demo.vue index 69eb3f68b7..01a3a36c20 100644 --- a/packages/starters/vue-vite/src/demo/Demo.vue +++ b/packages/starters/vue-vite/src/demo/Demo.vue @@ -12,8 +12,8 @@ import { OsdsRadio, OsdsRadioGroup, OsdsToggle, - OsdsFlag } from '@ovhcloud/ods-stencil/components/vue'; +import { OsdsFlag } from '@ovhcloud/ods-component-flag/vue' // each type you import types from ODS, you will need to import the core import { Ods, OdsExternalLogger, OdsMessageType, ODS_COUNTRY_ISO_CODE } from '@ovhcloud/ods-core'; diff --git a/packages/stencil/components/flag/src/components/osds-flag/public-api.ts b/packages/stencil/components/flag/src/components/osds-flag/public-api.ts deleted file mode 100644 index f4823532b0..0000000000 --- a/packages/stencil/components/flag/src/components/osds-flag/public-api.ts +++ /dev/null @@ -1 +0,0 @@ -export { OsdsFlag } from './osds-flag' diff --git a/packages/stencil/components/stencil.config.ts b/packages/stencil/components/stencil.config.ts index b061db6105..7ace712228 100644 --- a/packages/stencil/components/stencil.config.ts +++ b/packages/stencil/components/stencil.config.ts @@ -42,6 +42,7 @@ const config: Config = { 'osds-collapsible', 'osds-content-addon', 'osds-divider', + 'osds-flag', 'osds-icon', 'osds-input', 'osds-link', @@ -67,6 +68,7 @@ const config: Config = { 'osds-checkbox-button', 'osds-content-addon', 'osds-divider', + 'osds-flag', 'osds-icon', 'osds-input', 'osds-link', @@ -107,7 +109,6 @@ const config: Config = { 'osds-cart-total', ], }, - { components: ['osds-flag'] }, { components: ['osds-location-tile'] }, { components: ['osds-message'] }, { components: ['osds-popover'] }, diff --git a/packages/stencil/components/tsconfig.components.dev.json b/packages/stencil/components/tsconfig.components.dev.json index 745e52d150..64b2ad51ed 100644 --- a/packages/stencil/components/tsconfig.components.dev.json +++ b/packages/stencil/components/tsconfig.components.dev.json @@ -14,7 +14,6 @@ "accordion/src", "cart/src", "code/src", - "flag/src", "location-tile/src", "message/src", "popover/src", diff --git a/packages/stencil/components/tsconfig.components.prod.json b/packages/stencil/components/tsconfig.components.prod.json index c98818b8fd..89ee644811 100644 --- a/packages/stencil/components/tsconfig.components.prod.json +++ b/packages/stencil/components/tsconfig.components.prod.json @@ -15,7 +15,6 @@ "accordion/src", "cart/src", "code/src", - "flag/src", "location-tile/src", "message/src", "popover/src", diff --git a/packages/stencil/components/tsconfig.components.test.json b/packages/stencil/components/tsconfig.components.test.json index 66fede995c..e198291730 100644 --- a/packages/stencil/components/tsconfig.components.test.json +++ b/packages/stencil/components/tsconfig.components.test.json @@ -14,7 +14,6 @@ "accordion/src", "cart/src", "code/src", - "flag/src", "location-tile/src", "message/src", "popover/src", diff --git a/packages/tools/storybook/stories/components/flag/flag.specifications.stories.mdx b/packages/tools/storybook/stories/components/flag/flag.specifications.stories.mdx index b18c18c419..5d8b43e48f 100644 --- a/packages/tools/storybook/stories/components/flag/flag.specifications.stories.mdx +++ b/packages/tools/storybook/stories/components/flag/flag.specifications.stories.mdx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/addon-docs'; -import SpecificationsFlag from '@ovhcloud/ods-specifications/components/flag/specifications-flag.mdx'; +import SpecificationsFlag from '@ovhcloud/ods-component-flag/documentation/specifications/specifications-flag.mdx'; import Notes from '../notes.mdx'; diff --git a/packages/tools/storybook/stories/components/flag/flag.web-component.stories.page.mdx b/packages/tools/storybook/stories/components/flag/flag.web-component.stories.page.mdx index 032b815d37..ad66681b14 100644 --- a/packages/tools/storybook/stories/components/flag/flag.web-component.stories.page.mdx +++ b/packages/tools/storybook/stories/components/flag/flag.web-component.stories.page.mdx @@ -1,7 +1,7 @@ import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs'; -import Usage from '@ovhcloud/ods-stencil-flag/src/docs/osds-flag/usage.mdx'; -import APITable from '@ovhcloud/ods-stencil-flag/dist/docs/components/osds-flag/readme.md'; +import Usage from '@ovhcloud/ods-component-flag/src/docs/osds-flag/usage.mdx'; + import APITable from '@ovhcloud/ods-component-flag/dist/docs/components/osds-flag/readme.md'; diff --git a/packages/tools/storybook/stories/components/flag/flag.web-components.stories.ts b/packages/tools/storybook/stories/components/flag/flag.web-components.stories.ts index b7dc00af8b..cde04f4de5 100644 --- a/packages/tools/storybook/stories/components/flag/flag.web-components.stories.ts +++ b/packages/tools/storybook/stories/components/flag/flag.web-components.stories.ts @@ -1,10 +1,9 @@ import { html } from 'lit-html'; -import { iframe } from '../../../.storybook/iframe'; -import { defineCustomElements } from '@ovhcloud/ods-stencil-flag/loader'; +import { defineCustomElements } from '@ovhcloud/ods-component-flag/loader'; -import { odsSetup, Ods } from '@ovhcloud/ods-core'; -import changelog from '@ovhcloud/ods-stencil-flag/CHANGELOG.md'; +import { odsSetup, Ods } from '@ovhcloud/ods-common-core'; +import changelog from '@ovhcloud/ods-component-flag/CHANGELOG.md'; import page from './flag.web-component.stories.page.mdx'; import { getTagAttributes } from '../../../core/componentHTMLUtils'; @@ -18,7 +17,6 @@ export default { id: 'flag', parameters: { notes: { - API: iframe('stencil-components-flag/modules/index.html'), changelog, }, docs: { page } diff --git a/scripts/testing-report/index.html b/scripts/testing-report/index.html index 9c0b45261a..cc27da06c6 100644 --- a/scripts/testing-report/index.html +++ b/scripts/testing-report/index.html @@ -109,7 +109,7 @@ {name: 'osds-collapsible', id: 'collapsible', newArch: true}, {name: 'osds-content-addon', id: 'content-addon', newArch: true}, {name: 'osds-divider', id: 'divider', newArch: true}, - {name: 'osds-flag', id: 'flag'}, + {name: 'osds-flag', id: 'flag', newArch: true}, {name: 'osds-icon', id: 'icon', newArch: true}, {name: 'osds-input', id: 'input', newArch: true}, {name: 'osds-link', id: 'link', newArch: true}, diff --git a/yarn.lock b/yarn.lock index 9ca4455327..40b619758c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5747,6 +5747,43 @@ __metadata: languageName: unknown linkType: soft +"@ovhcloud/ods-component-flag-react@workspace:packages-new/components/flag/react": + version: 0.0.0-use.local + resolution: "@ovhcloud/ods-component-flag-react@workspace:packages-new/components/flag/react" + dependencies: + "@ovhcloud/ods-component-flag": ^15.0.1 + "@ovhcloud/ods-react-dev": ^15.0.1 + peerDependencies: + react: ">=16.8.6" + react-dom: ">=16.8.6" + languageName: unknown + linkType: soft + +"@ovhcloud/ods-component-flag-vue@workspace:packages-new/components/flag/vue": + version: 0.0.0-use.local + resolution: "@ovhcloud/ods-component-flag-vue@workspace:packages-new/components/flag/vue" + dependencies: + "@ovhcloud/ods-component-flag": ^15.0.1 + "@ovhcloud/ods-vue-dev": ^15.0.1 + peerDependencies: + vue: ">=3" + languageName: unknown + linkType: soft + +"@ovhcloud/ods-component-flag@^15.0.1, @ovhcloud/ods-component-flag@workspace:packages-new/components/flag": + version: 0.0.0-use.local + resolution: "@ovhcloud/ods-component-flag@workspace:packages-new/components/flag" + dependencies: + "@ovhcloud/ods-common-core": ^15.0.1 + "@ovhcloud/ods-common-stencil": ^15.0.1 + "@ovhcloud/ods-common-testing": ^15.0.1 + "@ovhcloud/ods-stencil-dev": ^15.0.1 + "@ovhcloud/ods-theming": ^15.0.1 + flag-icons: ^6.6.6 + workbox-build: 4.3.1 + languageName: unknown + linkType: soft + "@ovhcloud/ods-component-generator@workspace:packages/tools/generator/component": version: 0.0.0-use.local resolution: "@ovhcloud/ods-component-generator@workspace:packages/tools/generator/component" @@ -6659,47 +6696,6 @@ __metadata: languageName: unknown linkType: soft -"@ovhcloud/ods-stencil-flag-react@workspace:packages/stencil/components/flag/react": - version: 0.0.0-use.local - resolution: "@ovhcloud/ods-stencil-flag-react@workspace:packages/stencil/components/flag/react" - dependencies: - "@types/react": 17.0.37 - "@types/react-dom": 17.0.11 - react: 16.14.0 - react-dom: 16.14.0 - rimraf: ^3.0.2 - tslib: "*" - typescript: 4.7.4 - peerDependencies: - react: ">=16.8.6" - react-dom: ">=16.8.6" - languageName: unknown - linkType: soft - -"@ovhcloud/ods-stencil-flag-vue@workspace:packages/stencil/components/flag/vue": - version: 0.0.0-use.local - resolution: "@ovhcloud/ods-stencil-flag-vue@workspace:packages/stencil/components/flag/vue" - dependencies: - "@ovhcloud/ods-stencil-flag": ^15.0.1 - rimraf: ^3.0.2 - typescript: 4.7.4 - vue: ^3.2.41 - peerDependencies: - vue: ">=3" - languageName: unknown - linkType: soft - -"@ovhcloud/ods-stencil-flag@^15.0.1, @ovhcloud/ods-stencil-flag@workspace:packages/stencil/components/flag": - version: 0.0.0-use.local - resolution: "@ovhcloud/ods-stencil-flag@workspace:packages/stencil/components/flag" - dependencies: - "@ovhcloud/ods-stencil-component": ^15.0.1 - "@ovhcloud/ods-stencil-component-dev": ^15.0.1 - flag-icons: ^6.6.6 - workbox-build: 4.3.1 - languageName: unknown - linkType: soft - "@ovhcloud/ods-stencil-form-field-react@workspace:packages/stencil/components/form-field/react": version: 0.0.0-use.local resolution: "@ovhcloud/ods-stencil-form-field-react@workspace:packages/stencil/components/form-field/react"