feat(arch): move && simplify component content-addon

packages-new/components/content-addon/documentation/specifications/spec.md

@@ -0,0 +1,39 @@
+* [**Classes**](#classes)
+* [**Type alias**](#type-alias)
+* [**Variables**](#variables)
+
+## Classes
+
+### OdsContentAddonController
+_common controller logic for content-addon component used by the different implementations._
+_it contains all the glue between framework implementation and the third party service._
+
+
+## Type alias
+
+### OdsContentAddon
+
+interface description of all implementation of `ods-content-addon`.
+each implementation must have defined events, methods, attributes
+and one controller for the common behavior logic
+
+> - `OdsComponentGenericMethods`
+
+> - `OdsComponentGenericEvents`
+
+### OdsContentAddonAttributes
+
+> _Based on `OdsComponentAttributes`_
+
+### OdsContentAddonEvents
+
+> _Based on `OdsComponentEvents`_
+
+### OdsContentAddonMethods
+
+> _Based on `OdsComponentMethods`_
+
+## Variables
+
+### odsContentAddonDefaultAttributes
+`OdsContentAddonAttributes`

packages/specifications/components/content-addon/specifications-content-addon.mdx → packages-new/components/content-addon/documentation/specifications/specifications-content-addon.mdx

@@ -1,7 +1,7 @@
 import {Description} from '@storybook/addon-docs';
-import Specs from '@ovhcloud/ods-core/src/components/content-addon/docs/spec.md';
-import SpecsContentAddonContents from '@ovhcloud/ods-specifications/components/content-addon/specifications-content-addon-contents.mdx';
-import SpecsContentAddonTests from '@ovhcloud/ods-specifications/components/content-addon/specifications-content-addon-tests.mdx';
+import Specs from './spec.md';
+import SpecsContentAddonContents from './specifications-content-addon-contents.mdx';
+import SpecsContentAddonTests from './specifications-content-addon-tests.mdx';
 
 ## Description
 The content addon is a layout component that displays a main content with optional information around it.

packages/stencil/components/content-addon/jest.config.ts → packages-new/components/content-addon/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/content-addon/package.json → packages-new/components/content-addon/package.json

@@ -1,15 +1,14 @@
 {
-  "name": "@ovhcloud/ods-stencil-content-addon",
+  "name": "@ovhcloud/ods-component-content-addon",
   "version": "15.0.1",
-  "private": true,
-  "description": "Content Addon component",
+  "description": "ODS Content Addon 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,9 +34,12 @@
     "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"
   },
   "devDependencies": {
-    "@ovhcloud/ods-stencil-component-dev": "^15.0.1"
+    "@ovhcloud/ods-common-testing": "^15.0.1",
+    "@ovhcloud/ods-stencil-dev": "^15.0.1"
   }
 }

packages/stencil/components/content-addon/react/package.json → packages-new/components/content-addon/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ovhcloud/ods-stencil-content-addon-react",
+  "name": "@ovhcloud/ods-component-content-addon-react",
   "version": "15.0.1",
   "private": true,
   "description": "React specific wrapper for ods",
@@ -20,19 +20,13 @@
     "dist/"
   ],
   "dependencies": {
-    "@ovhcloud/ods-stencil-cart": "^15.0.1",
-    "tslib": "*"
+    "@ovhcloud/ods-component-content-addon": "^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/stencil/components/content-addon/src/components/osds-content-addon/osds-content-addon.e2e.screenshot.ts → packages-new/components/content-addon/src/components/osds-content-addon/osds-content-addon.e2e.screenshot.ts

@@ -1,23 +1,15 @@
-import { E2EPage, newE2EPage } from '@stencil/core/testing';
-import {
-  OdsComponentAttributes2StringAttributes,
-  OdsContentAddonAttributes,
-  OdsLogger,
-  odsContentAddonDefaultAttributes,
-} from '@ovhcloud/ods-core';
-import { OdsCreateAttributes, OdsStringAttributes2Str, odsContentAddonBaseAttributes } from '@ovhcloud/ods-testing';
+import type { E2EPage } from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
+import { OdsLogger } from '@ovhcloud/ods-common-core';
 
 const logger = new OdsLogger('osds-content-addon-e2e');
 
 describe('e2e:osds-content-addon', () => {
   let page: E2EPage;
 
-  async function setup({ attributes, html }: { attributes: Partial<OdsContentAddonAttributes>, html: string }) {
-    const minimalAttributes: OdsContentAddonAttributes = OdsCreateAttributes(attributes, odsContentAddonBaseAttributes);
-    const stringAttributes = OdsComponentAttributes2StringAttributes<OdsContentAddonAttributes>(minimalAttributes, odsContentAddonDefaultAttributes);
-
+  async function setup({ html }: { html: string }) {
     page = await newE2EPage();
-    await page.setContent(`<osds-content-addon ${OdsStringAttributes2Str(stringAttributes)}>${html}</osds-content-addon>`);
+    await page.setContent(`<osds-content-addon>${html}</osds-content-addon>`);
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
 
     const root = await page.find('osds-content-addon');
@@ -52,7 +44,7 @@ describe('e2e:osds-content-addon', () => {
   describe('screenshots', () => {
     it('check with all slots', async () => {
       await setup({
-        attributes: {}, html: `
+        html: `
         <span slot='top'>Top</span>
         <span slot='bottom'>Bottom</span>
         <span slot='start'>Start</span>
@@ -73,9 +65,7 @@ describe('e2e:osds-content-addon', () => {
     describe('screenshots for each slot', () => {
       slots.forEach(({ slotName, html }) => {
         it(slotName, async () => {
-          await setup({
-            attributes: {}, html,
-          });
+          await setup({ html });
 
           await page.waitForChanges();
           await page.setViewport({ width: 600, height:600 });

packages-new/components/content-addon/src/components/osds-content-addon/osds-content-addon.e2e.ts

@@ -0,0 +1,29 @@
+import type { E2EElement, E2EPage } from '@stencil/core/testing';
+import { OdsLogger } from '@ovhcloud/ods-common-core';
+import { newE2EPage } from '@stencil/core/testing';
+
+const logger = new OdsLogger('osds-content-addon-e2e');
+
+describe('e2e:osds-content-addon', () => {
+  let page: E2EPage;
+  let el: E2EElement;
+
+  async function setup() {
+    page = await newE2EPage();
+    await page.setContent(`<osds-content-addon></osds-content-addon>`);
+    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+
+    el = await page.find('osds-content-addon');
+
+    const root = await page.find('osds-content-addon');
+    const activeElId = await page.evaluate(() => document);
+    logger.log(activeElId);
+    logger.log(root);
+  }
+
+  it('should render', async () => {
+    await setup();
+    expect(el).not.toBeNull();
+    expect(el).toHaveClass('hydrated');
+  });
+});

packages-new/components/content-addon/src/components/osds-content-addon/osds-content-addon.spec.ts

@@ -0,0 +1,60 @@
+import type { SpecPage } from '@stencil/core/testing';
+import { newSpecPage } from '@stencil/core/testing';
+import { OsdsContentAddon } from './osds-content-addon';
+
+describe('spec:osds-content-addon', () => {
+  let page: SpecPage;
+  let slotTop: HTMLElement | null | undefined;
+  let slotBottom: HTMLElement | null | undefined;
+  let slotStart: HTMLElement | null | undefined;
+  let slotEnd: HTMLElement | null | undefined;
+  let slotMain: HTMLElement | null | undefined;
+
+  async function setup() {
+    page = await newSpecPage({
+      components: [OsdsContentAddon],
+      html: `<osds-content-addon></osds-content-addon>`,
+    });
+
+    // note: assigned slot not yet available in HtmlMockedElement of stencil : https://github.com/ionic-team/stencil/issues/2830
+    slotTop = page.root?.shadowRoot?.querySelector('slot[name=top]');
+    slotBottom = page.root?.shadowRoot?.querySelector('slot[name=bottom]');
+    slotStart = page.root?.shadowRoot?.querySelector('slot[name=start]');
+    slotEnd = page.root?.shadowRoot?.querySelector('slot[name=end]');
+    slotMain = page.root?.shadowRoot?.querySelector('slot[name=main]');
+  }
+
+  it('should render', async () => {
+    await setup();
+    expect(page.root?.shadowRoot).toBeTruthy();
+    expect(page.rootInstance).toBeTruthy();
+  });
+
+
+  describe('contents', () => {
+    it('should have a top slot', async () => {
+      await setup();
+      expect(slotTop).toBeTruthy();
+    });
+
+    it('should have a bottom slot', async () => {
+      await setup();
+      expect(slotBottom).toBeTruthy();
+    });
+
+    it('should have a start slot', async () => {
+      await setup();
+      expect(slotStart).toBeTruthy();
+    });
+
+    it('should have an end slot', async () => {
+      await setup();
+      expect(slotEnd).toBeTruthy();
+    });
+
+    it('should have a main slot', async () => {
+      await setup();
+      expect(slotMain).toBeTruthy();
+    });
+  });
+});

packages/stencil/components/content-addon/src/components/osds-content-addon/osds-content-addon.tsx → packages-new/components/content-addon/src/components/osds-content-addon/osds-content-addon.tsx

@@ -1,29 +1,26 @@
 import { Component, Element, Host, h } from '@stencil/core';
-import { OdsContentAddon, OdsContentAddonController, OdsContentAddonEvents, OdsContentAddonMethods } from '@ovhcloud/ods-core';
-import { OdsStencilEvents, OdsStencilMethods } from '@ovhcloud/ods-stencil/libraries/stencil-core';
 
 @Component({
   tag: 'osds-content-addon',
   styleUrl: 'osds-content-addon.scss',
   shadow: true,
 })
-export class OsdsContentAddon implements OdsContentAddon<OdsStencilMethods<OdsContentAddonMethods>, OdsStencilEvents<OdsContentAddonEvents>> {
-  controller: OdsContentAddonController = new OdsContentAddonController(this);
-
+export class OsdsContentAddon {
   @Element() el!: HTMLElement;
 
   render() {
     return (
       <Host>
         <span class="osds-content-addon">
           <slot name={'top'}></slot>
+
           <span class={'inset-grid'}>
             <slot name={'start'}></slot>
             <slot name={'main'}></slot>
             <slot name={'end'}></slot>
           </span>
-          <slot name={'bottom'}></slot>
 
+          <slot name={'bottom'}></slot>
         </span>
       </Host>
     );

packages-new/components/content-addon/src/components/osds-content-addon/public-api.ts

@@ -0,0 +1 @@
+export { OsdsContentAddon } from './osds-content-addon';

packages/stencil/components/content-addon/src/docs/osds-content-addon/usage.mdx → packages-new/components/content-addon/src/docs/osds-content-addon/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';
 
 <GenericStyle />
 

packages/stencil/components/content-addon/src/global.dev.ts → packages-new/components/content-addon/src/global.dev.ts

@@ -5,7 +5,7 @@
 
 import './components';
 import './global';
-import { OdsLogger } from '@ovhcloud/ods-core';
+import { OdsLogger } from '@ovhcloud/ods-common-core';
 
 const logger = new OdsLogger('global-dev');
 logger.log('init');

packages/stencil/components/content-addon/src/global.ts → packages-new/components/content-addon/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('content-addon.global');
 logger.log('init');

packages/stencil/components/content-addon/stencil.config.ts → packages-new/components/content-addon/stencil.config.ts

@@ -1,5 +1,5 @@
 import { Config } from '@stencil/core';
-import { getStencilConfig } from '@ovhcloud/ods-stencil/libraries/stencil-core';
+import { getStencilConfig } from '@ovhcloud/ods-common-stencil';
 import * as jestConfig from './jest.config';
 
 const args = process.argv.slice(2);
@@ -9,12 +9,11 @@ export const config: Config = getStencilConfig({
   args,
   jestConfig: jestConfig.default,
   reactOutput: {
-    componentCorePackage: '@ovhcloud/ods-stencil/components/content-addon',
-    // exclude peer dependencies that corresponds to www usage
+    componentCorePackage: '@ovhcloud/ods-component-content-addon',
     excludeComponents: []
   },
   vueOutput: {
-    componentCorePackage: '@ovhcloud/ods-stencil/components/content-addon',
+    componentCorePackage: '@ovhcloud/ods-component-content-addon',
     excludeComponents: []
   },
   dev: {

packages/stencil/components/content-addon/typedoc.json → packages-new/components/content-addon/typedoc.json

@@ -1,6 +1,6 @@
 {
   "entryPoints": ["src"],
-  "out": "docs-api/stencil-components-content-addon",
+  "out": "docs-api/ods-component-content-addon",
   "tsconfig":"tsconfig.prod.json",
   "exclude": "**/*+(index|.spec|.e2e|.d).ts",
   "plugin": "none"

packages/stencil/components/content-addon/vue/package.json → packages-new/components/content-addon/vue/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ovhcloud/ods-stencil-content-addon-vue",
+  "name": "@ovhcloud/ods-component-content-addon-vue",
   "version": "15.0.1",
   "private": true,
   "description": "Vue specific wrapper for ods",
@@ -20,14 +20,12 @@
     "dist/"
   ],
   "dependencies": {
-    "@ovhcloud/ods-stencil-content-addon": "^15.0.1"
+    "@ovhcloud/ods-component-content-addon": "^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"
   }
 }

packages-new/components/package.json

@@ -8,6 +8,7 @@
     "@ovhcloud/ods-component-breadcrumb": "^15.0.1",
     "@ovhcloud/ods-component-button": "^15.0.1",
     "@ovhcloud/ods-component-collapsible": "^15.0.1",
+    "@ovhcloud/ods-component-content-addon": "^15.0.1",
     "@ovhcloud/ods-component-icon": "^15.0.1",
     "@ovhcloud/ods-component-input": "^15.0.1",
     "@ovhcloud/ods-component-link": "^15.0.1",