feat(arch): move && simplify component chip

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

@@ -0,0 +1,80 @@
+* [**Interfaces**](#interfaces)
+* [**Types**](#types)
+* [**Classes**](#classes)
+* [**Type alias**](#type-alias)
+* [**Variables**](#variables)
+
+## Interfaces
+
+### OdsChipAttributes
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`color`** | `OdsThemeColorIntent` |  |  | Chip color theme|
+|**`contrasted`** | _boolean_ |  |  | Chip is in contrasterd mode or not|
+|**`disabled`** | _boolean_ |  |  | Chip is disabled or not|
+|**`flex`** | _boolean_ |  |  | Chip as flex|
+|**`removable`** | _boolean_ |  |  | If the chip can be removed or not|
+|**`selectable`** | _boolean_ |  |  | If the chip can be selected or not|
+|**`size`** | `OdsChipSize` |  |  | Chip size|
+|**`variant`** | `OdsChipVariant` |  |  | Chip variant|
+
+### OdsChipBehavior
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`beforeRender`** | _void_ | ✴️ |  | before render component functionshould be called before component render.it have to check the validity of attributes.|
+
+## Types
+
+### OdsChipSize
+|  |
+|:---:|
+| `md` |
+| `sm` |
+
+### OdsChipVariant
+|  |
+|:---:|
+| `flat` |
+| `stroked` |
+
+## Classes
+
+### OdsChipController
+_common controller logic for chip component used by the different implementations._
+_it contains all the glue between framework implementation and the third party service._
+
+#### Methods
+> **validateAttributes**() => _unknown_
+
+
+
+### OdsChipMock
+
+## Type alias
+
+### OdsChip
+
+interface description of all implementation of `ods-chip`.
+each implementation must have defined events, methods, attributes
+and one controller for the common behavior logic
+
+> - `OdsComponentGenericMethods`
+
+> - `OdsComponentGenericEvents`
+
+### OdsChipAttributes
+
+> _Based on `OdsComponentAttributes`_
+
+### OdsChipEvents
+
+> _Based on `OdsComponentEvents`_
+
+### OdsChipMethods
+
+> _Based on `OdsComponentMethods`_
+
+## Variables
+
+### odsChipDefaultAttributes
+`OdsChipAttributes`

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

@@ -1,5 +1,5 @@
 import {Description} from '@storybook/addon-docs';
-import Specs from '@ovhcloud/ods-core/src/components/chip/docs/spec.md';
+import Specs from './spec.md';
 import SpecsChipContents from './specifications-chip-contents.mdx';
 import SpecsChipTests from './specifications-chip-tests.mdx';
 

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

@@ -1,15 +1,14 @@
 {
-  "name": "@ovhcloud/ods-stencil-chip",
+  "name": "@ovhcloud/ods-component-chip",
   "version": "15.0.1",
-  "private": true,
-  "description": "Chip component",
+  "description": "ODS Chip 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,10 +34,13 @@
     "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-icon": "^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"
   }
 }

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

@@ -1,5 +1,5 @@
 {
-  "name": "@ovhcloud/ods-stencil-chip-react",
+  "name": "@ovhcloud/ods-component-chip-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-chip": "^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/chip/src/components/osds-chip/constants/chip-size.ts

@@ -0,0 +1,11 @@
+enum ODS_CHIP_SIZE {
+  sm = 'sm',
+  md = 'md',
+}
+
+const ODS_CHIP_SIZES = Object.freeze(Object.values(ODS_CHIP_SIZE));
+
+export {
+  ODS_CHIP_SIZE,
+  ODS_CHIP_SIZES,
+};

packages-new/components/chip/src/components/osds-chip/constants/chip-variant.ts

@@ -0,0 +1,11 @@
+enum ODS_CHIP_VARIANT {
+  flat = 'flat',
+  stroked = 'stroked',
+}
+
+const ODS_CHIP_VARIANTS = Object.freeze(Object.values(ODS_CHIP_VARIANT));
+
+export {
+  ODS_CHIP_VARIANT,
+  ODS_CHIP_VARIANTS,
+};

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

@@ -0,0 +1,19 @@
+import type { OdsChipAttribute } from '../interfaces/attributes';
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import { ODS_CHIP_SIZE } from './chip-size';
+import { ODS_CHIP_VARIANT } from './chip-variant';
+
+const DEFAULT_ATTRIBUTE: OdsChipAttribute = Object.freeze({
+  color: OdsThemeColorIntent.default,
+  contrasted: false,
+  disabled: false,
+  inline: false,
+  removable: false,
+  selectable: false,
+  size: ODS_CHIP_SIZE.md,
+  variant: ODS_CHIP_VARIANT.flat,
+});
+
+export {
+  DEFAULT_ATTRIBUTE,
+};

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

@@ -1,33 +1,32 @@
-import {
-  OdsClearLoggerSpy,
-  OdsInitializeLoggerSpy,
-  OdsLoggerSpyReferences
-} from '@ovhcloud/ods-testing/src';
-
-import { Ods } from '../../configure/ods';
-import { OdsChip } from './ods-chip';
-import { OdsChipController } from './ods-chip-controller';
-import { OdsChipMock } from './ods-chip-mock';
-import { OdsChipSize } from './ods-chip-size';
-import { OdsChipVariant } from './ods-chip-variant';
-import { OdsLogger } from '../../logger/ods-logger';
+import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing';
+import { Ods, OdsLogger } from '@ovhcloud/ods-common-core';
+import { OdsClearLoggerSpy, OdsInitializeLoggerSpy } from '@ovhcloud/ods-common-testing';
 import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import { ODS_CHIP_SIZE } from '../constants/chip-size';
+import { ODS_CHIP_VARIANT } from '../constants/chip-variant';
+import { OdsChipController } from './controller';
+import { OsdsChip } from '../osds-chip';
+
+class OdsChipMock extends OsdsChip {
+  constructor(attribute: Partial<OsdsChip>) {
+    super();
+    Object.assign(this, attribute)
+  }
+}
 
 describe('spec:ods-chip-controller', () => {
   let controller: OdsChipController;
-  let component: OdsChip;
+  let component: OsdsChip;
   let loggerSpyReferences: OdsLoggerSpyReferences;
 
   Ods.instance().logging(false);
 
-  function setup(attributes: Partial<OdsChip> = {}) {
-    component = { ...component, ...attributes };
+  function setup(attributes: Partial<OsdsChip> = {}) {
+    component = new OdsChipMock(attributes);
     controller = new OdsChipController(component);
   }
 
   beforeEach(() => {
-    component = new OdsChipMock();
-
     const loggerMocked = new OdsLogger('myLoggerMocked');
     loggerSpyReferences = OdsInitializeLoggerSpy({
       loggerMocked: loggerMocked as never,
@@ -44,8 +43,8 @@ describe('spec:ods-chip-controller', () => {
     beforeEach(() => {
       setup({
         color: OdsThemeColorIntent.default,
-        size: OdsChipSize.md,
-        variant: OdsChipVariant.flat
+        size: ODS_CHIP_SIZE.md,
+        variant: ODS_CHIP_VARIANT.flat
       });
     })
     describe('methods:validateAttributes', () => {
@@ -66,7 +65,7 @@ describe('spec:ods-chip-controller', () => {
 
       it('should call console.warn with wrong size', () => {
         const expected = 'The size attribute must have a value from [sm, md]';
-        component.size = 'size' as OdsChipSize;
+        component.size = 'size' as ODS_CHIP_SIZE;
 
         controller.validateAttributes();
 
@@ -76,7 +75,7 @@ describe('spec:ods-chip-controller', () => {
 
       it('should call console.warn with wrong variant', () => {
         const expected = 'The variant attribute must have a value from [flat, stroked]';
-        component.variant = 'variant' as OdsChipVariant;
+        component.variant = 'variant' as ODS_CHIP_VARIANT;
 
         controller.validateAttributes();
 

packages-new/components/chip/src/components/osds-chip/core/controller.ts

@@ -0,0 +1,44 @@
+import type { OsdsChip } from '../osds-chip';
+import { OdsLogger, OdsWarnComponentAttribute } from '@ovhcloud/ods-common-core';
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import { ODS_CHIP_SIZE } from '../constants/chip-size';
+import { ODS_CHIP_VARIANT } from '../constants/chip-variant';
+
+class OdsChipController {
+  private component: OsdsChip;
+  private readonly logger = new OdsLogger('OdsChipController');
+
+  constructor(component: OsdsChip) {
+    this.component = component;
+  }
+
+  /**
+   * validating that the color, the size and the variant have correct values
+   * and warn the user if not
+   */
+  validateAttributes(): void {
+    const logger = this.logger;
+    OdsWarnComponentAttribute<OdsThemeColorIntent, OsdsChip>({
+      logger,
+      attributeValues: OdsThemeColorIntent as Record<string, unknown>,
+      attributeName: 'color',
+      attribute: this.component.color
+    });
+    OdsWarnComponentAttribute<ODS_CHIP_SIZE, OsdsChip>({
+      logger,
+      attributeValues: ODS_CHIP_SIZE as Record<string, unknown>,
+      attributeName: 'size',
+      attribute: this.component.size
+    });
+    OdsWarnComponentAttribute<ODS_CHIP_VARIANT, OsdsChip>({
+      logger,
+      attributeValues: ODS_CHIP_VARIANT as Record<string, unknown>,
+      attributeName: 'variant',
+      attribute: this.component.variant
+    });
+  }
+}
+
+export {
+  OdsChipController,
+};

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

@@ -1,9 +1,8 @@
-import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
-import { OdsChipSize } from './ods-chip-size';
-import { OdsChipVariant } from './ods-chip-variant';
-import { OdsComponentAttributes } from '../ods-component-attributes';
+import type { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import type { ODS_CHIP_SIZE } from '../constants/chip-size';
+import type { ODS_CHIP_VARIANT } from '../constants/chip-variant';
 
-export interface OdsChipAttributes extends OdsComponentAttributes {
+interface OdsChipAttribute {
   /**
    * Chip color theme
    */
@@ -17,9 +16,9 @@ export interface OdsChipAttributes extends OdsComponentAttributes {
    */
   disabled?: boolean
   /**
-   * Chip as flex
+   * Chip as inline
    */
-  flex?: boolean
+  inline?: boolean
   /**
    * If the chip can be removed or not
    */
@@ -31,9 +30,13 @@ export interface OdsChipAttributes extends OdsComponentAttributes {
   /**
    * Chip size
    */
-  size?: OdsChipSize
+  size?: ODS_CHIP_SIZE
   /**
    * Chip variant
    */
-  variant?: OdsChipVariant
+  variant?: ODS_CHIP_VARIANT
 }
+
+export {
+  OdsChipAttribute,
+};