feat(arch): move && simplify component Modal

packages-new/components/modal/documentation/specifications/spec.md

@@ -0,0 +1,66 @@
+* [**Interfaces**](#interfaces)
+* [**Classes**](#classes)
+* [**Type alias**](#type-alias)
+* [**Variables**](#variables)
+
+## Interfaces
+
+### OdsModalAttributes
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`color`** | `OdsThemeColorIntent` | ✴️ |  | Color of the modal's header background|
+|**`dismissible`** | _boolean_ |  |  | Defines if the modal is dismissible (displays a close button)|
+|**`headline`** | _string_ |  |  | Text displayed as the modal's headline|
+|**`masked`** | _boolean_ |  |  | Defines if the modal is masked|
+
+### OdsModalMethods
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`close`** | _void_ | ✴️ |  | close the modal|
+|**`open`** | _void_ | ✴️ |  | open the modal|
+
+## Classes
+
+### OdsModalController
+_common controller logic for cmpnt component used by the different implementations._
+_it contains all the glue between framework implementation and the third party service._
+
+#### Methods
+> **close**() => _unknown_
+
+
+> **open**() => _unknown_
+
+
+> **validateAttributes**() => _unknown_
+
+
+
+## Type alias
+
+### OdsModal
+
+interface description of all implementation of `ods-modal`.
+each implementation must have defined events, methods, attributes
+and one controller for the common behavior logic
+
+> - `OdsComponentGenericMethods`
+
+> - `OdsComponentGenericEvents`
+
+### OdsModalAttributes
+
+> _Based on `OdsComponentAttributes`_
+
+### OdsModalEvents
+
+> _Based on `OdsComponentEvents`_
+
+### OdsModalMethods
+
+> _Based on `OdsComponentMethods`_
+
+## Variables
+
+### odsModalDefaultAttributes
+`OdsModalAttributes`

packages/specifications/components/modal/specifications-modal.mdx → packages-new/components/modal/documentation/specifications/specifications-modal.mdx

@@ -1,6 +1,6 @@
 import {Description} from '@storybook/addon-docs';
 
-import Specs from '@ovhcloud/ods-core/src/components/modal/docs/spec.md';
+import Specs from './spec.md';
 import SpecsModalContents from './specifications-modal-contents.mdx';
 import SpecsModalTests from './specifications-modal-tests.mdx';
 

packages/stencil/components/modal/jest.config.ts → packages-new/components/modal/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,8 +15,9 @@ 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: '<rootDir>/../../../..',
+  basePath: '<rootDir>/../../..',
   args
 });
 export default config;

packages/stencil/components/modal/package.json → packages-new/components/modal/package.json

@@ -1,15 +1,14 @@
 {
-  "name": "@ovhcloud/ods-stencil-modal",
+  "name": "@ovhcloud/ods-component-modal",
   "version": "15.0.1",
-  "private": true,
-  "description": "Modal component",
+  "description": "ODS Modal 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": {
@@ -35,13 +34,16 @@
     "test:e2e:ci:screenshot:update": "stencil test --config stencil.config.ts --e2e --ci --screenshot --update-screenshot --passWithNoTests"
   },
   "dependencies": {
+    "@ovhcloud/ods-common-core": "^15.0.1",
+    "@ovhcloud/ods-common-stencil": "^15.0.1",
     "@ovhcloud/ods-component-button": "^15.0.1",
     "@ovhcloud/ods-component-icon": "^15.0.1",
     "@ovhcloud/ods-component-text": "^15.0.1",
-    "@ovhcloud/ods-stencil-component": "^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"
   },
   "publishConfig": {
     "registry": ""

packages/stencil/components/modal/react/package.json → packages-new/components/modal/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ovhcloud/ods-stencil-modal-react",
+  "name": "@ovhcloud/ods-component-modal-react",
   "version": "15.0.1",
   "private": true,
   "description": "React specific wrapper for ods",
@@ -20,19 +20,13 @@
     "dist/"
   ],
   "dependencies": {
-    "@ovhcloud/ods-stencil-modal": "^15.0.1",
-    "tslib": "*"
+    "@ovhcloud/ods-component-modal": "^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"
   }
 }

packages-new/components/modal/src/components/osds-modal/constants/default-attributes.ts

@@ -0,0 +1,13 @@
+import type { OdsModalAttribute } from '../interfaces/attributes';
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+
+const DEFAULT_ATTRIBUTE: OdsModalAttribute = Object.freeze({
+    color: OdsThemeColorIntent.info,
+    dismissible: true,
+    headline: '',
+    masked: false,
+});
+
+export {
+    DEFAULT_ATTRIBUTE,
+};

packages/libraries/core/src/components/modal/ods-modal-controller.ts → packages-new/components/modal/src/components/osds-modal/core/controller.ts

@@ -1,14 +1,15 @@
-import { OdsModal } from './ods-modal';
-import { OdsComponentController } from '../ods-component-controller';
+import { OsdsModal } from '../osds-modal';
 
 /**
  * common controller logic for cmpnt component used by the different implementations.
  * it contains all the glue between framework implementation and the third party service.
  */
-export class OdsModalController extends OdsComponentController<OdsModal> {
+class OdsModalController {
 
-  constructor(component: OdsModal) {
-    super(component);
+  protected component: OsdsModal;
+
+  constructor(component: OsdsModal) {
+    this.component = component;
   }
 
   close() {
@@ -26,3 +27,7 @@ export class OdsModalController extends OdsComponentController<OdsModal> {
     return;
   }
 }
+
+export {
+  OdsModalController
+};

packages/libraries/core/src/components/modal/ods-modal-attributes.ts → packages-new/components/modal/src/components/osds-modal/interfaces/attributes.ts

@@ -1,10 +1,6 @@
-import { OdsComponentAttributes } from '../ods-component-attributes';
-import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import type { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
 
-export interface OdsModalAttributes extends OdsComponentAttributes {
-  /**
-   * Modal attribute description
-   */
+interface OdsModalAttribute {
   /** Color of the modal's header background */
   color: OdsThemeColorIntent;
   /** Defines if the modal is dismissible (displays a close button) */
@@ -14,3 +10,7 @@ export interface OdsModalAttributes extends OdsComponentAttributes {
   /** Defines if the modal is masked */
   masked?: boolean;
 }
+
+export {
+    OdsModalAttribute,
+};

packages-new/components/modal/src/components/osds-modal/interfaces/methods.ts

@@ -0,0 +1,15 @@
+interface OdsModalMethod {
+  /**
+   * close && set display none to the modal
+   */
+  close(): Promise<void>;
+
+  /**
+   * open && display the modal
+   */
+  open(): Promise<void>;
+}
+
+export {
+  OdsModalMethod,
+};

packages/stencil/components/modal/src/components/osds-modal/osds-modal.e2e.screenshot.ts → packages-new/components/modal/src/components/osds-modal/osds-modal.e2e.screenshot.ts

@@ -1,28 +1,24 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import {
-  OdsModalAttributes,
-  OdsComponentAttributes2StringAttributes,
-  odsModalDefaultAttributes,
-} from '@ovhcloud/ods-core';
-import { OdsCreateAttributes, OdsStringAttributes2Str, odsModalBaseAttributes } from '@ovhcloud/ods-testing';
-import { OdsThemeColorIntentList } from '@ovhcloud/ods-theming/src';
+import type { E2EPage } from '@stencil/core/testing';
+import type { OdsModalAttribute } from './interfaces/attributes';
+import { OdsThemeColorIntent, OdsThemeColorIntentList } from '@ovhcloud/ods-theming';
+import { newE2EPage } from '@stencil/core/testing';
+import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
 describe('e2e:osds-modal', () => {
+  const baseAttribute = { color: OdsThemeColorIntent.info, dismissible: true, headline: '', masked: false };
   let page: E2EPage;
-  let el: E2EElement;
 
-  async function setup({ attributes = {}, html = `` }: { attributes?: Partial<OdsModalAttributes>, html?: string } = {}) {
-    const minimalAttributes: OdsModalAttributes = OdsCreateAttributes(attributes, odsModalBaseAttributes);
-    const stringAttributes = OdsComponentAttributes2StringAttributes<OdsModalAttributes>(minimalAttributes, odsModalDefaultAttributes);
+  async function setup({ attributes = {}, html = `` }: { attributes?: Partial<OdsModalAttribute>, html?: string } = {}) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsModalAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
     await page.setContent(`
-      <osds-modal ${OdsStringAttributes2Str(stringAttributes)}>
+      <osds-modal ${odsStringAttributes2Str(stringAttributes)}>
         ${html}
       </osds-modal>
     `);
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
-    el = await page.find('osds-modal');
 
     await page.evaluate(() => {
       const wrapperElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.wrapper') as HTMLElement;

packages/stencil/components/modal/src/components/osds-modal/osds-modal.e2e.ts → packages-new/components/modal/src/components/osds-modal/osds-modal.e2e.ts

@@ -1,17 +1,20 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import { OdsModalAttributes, OdsComponentAttributes2StringAttributes, odsModalDefaultAttributes } from '@ovhcloud/ods-core';
-import { OdsCreateAttributes, OdsStringAttributes2Str, odsModalBaseAttributes } from '@ovhcloud/ods-testing';
+import type { E2EElement, E2EPage } from '@stencil/core/testing';
+import type { OdsModalAttribute } from './interfaces/attributes';
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import { newE2EPage } from '@stencil/core/testing';
+import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
 describe('e2e:osds-modal', () => {
+  const baseAttribute = { color: OdsThemeColorIntent.info, dismissible: true, headline: '', masked: false };
   let page: E2EPage;
   let el: E2EElement;
 
-  async function setup({ attributes }: { attributes: Partial<OdsModalAttributes> }) {
-    const minimalAttributes: OdsModalAttributes = OdsCreateAttributes(attributes, odsModalBaseAttributes);
-    const stringAttributes = OdsComponentAttributes2StringAttributes<OdsModalAttributes>(minimalAttributes, odsModalDefaultAttributes);
+  async function setup({ attributes }: { attributes: Partial<OdsModalAttribute> }) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsModalAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
-    await page.setContent(`<osds-modal ${OdsStringAttributes2Str(stringAttributes)}></osds-modal>`);
+    await page.setContent(`<osds-modal ${odsStringAttributes2Str(stringAttributes)}></osds-modal>`);
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
 
     el = await page.find('osds-modal');