feat(arch): move && simplify component clipboard

packages-new/common/core/src/utils/clipboard/public-api.ts

@@ -0,0 +1 @@
+export { writeOnClipboard } from './write-on-clipboard';

packages-new/common/core/src/utils/clipboard/write-on-clipboard.ts

@@ -0,0 +1,8 @@
+export function writeOnClipboard(textToWrite: string): Promise<void> {
+    try {
+        return navigator.clipboard.writeText(textToWrite);        
+    } catch (error) {
+        console.error(error);
+        return Promise.reject(error);
+    }
+}

packages-new/common/core/src/utils/public-api.ts

@@ -1,4 +1,5 @@
 export * from './checkbox/public-api';
+export * from './clipboard/public-api';
 export * from './debounce/public-api';
 export * from './enum/public-api';
 export * from './loading/public-api';

packages-new/common/stencil/package.json

@@ -16,6 +16,7 @@
     "doc:api": "typedoc --plugin none src/*"
   },
   "dependencies": {
+    "@ovhcloud/ods-common-core": "^15.0.1",
     "@ovhcloud/ods-theme-blue-jeans": "^15.0.1",
     "@stencil/core": "~2.18.1"
   },

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

@@ -0,0 +1,55 @@
+* [**Interfaces**](#interfaces)
+* [**Classes**](#classes)
+* [**Type alias**](#type-alias)
+* [**Variables**](#variables)
+
+## Interfaces
+
+### OdsClipboardAttributes
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`disabled`** | _boolean_ |  |  | Disabled the input, the focus, and the tooltip|
+|**`flex`** | _boolean_ |  |  | Indicates if the input is full width or not: see component principles|
+|**`value`** | _string_ | ✴️ |  | Input text value|
+
+### OdsClipboardEvents
+|name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`odsClipboardCopied`** | _string_ | ✴️ |  | |
+
+## Classes
+
+### OdsClipboardController
+#### Methods
+> **handlerClick**() => _unknown_
+
+
+
+## Type alias
+
+### OdsClipboard
+
+interface description of all implementation of `ods-clipboard`.
+each implementation must have defined events, methods, attributes
+and one controller for the common behavior logic
+
+> - `OdsComponentGenericMethods`
+
+> - `OdsComponentGenericEvents`
+
+### OdsClipboardAttributes
+
+> _Based on `OdsComponentAttributes`_
+
+### OdsClipboardEvents
+
+> _Based on `OdsComponentEvents`_
+
+### OdsClipboardMethods
+
+> _Based on `OdsComponentMethods`_
+
+## Variables
+
+### odsClipboardDefaultAttributes
+`OdsClipboardAttributes`

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

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

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

@@ -1,15 +1,14 @@
 {
-  "name": "@ovhcloud/ods-stencil-clipboard",
+  "name": "@ovhcloud/ods-component-clipboard",
   "version": "15.0.1",
-  "private": true,
-  "description": "Clipboard component",
+  "description": "ODS Clipboard 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,12 +34,15 @@
     "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-component-input": "^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/clipboard/react/package.json → packages-new/components/clipboard/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ovhcloud/ods-stencil-clipboard-react",
+  "name": "@ovhcloud/ods-component-clipboard-react",
   "version": "15.0.1",
   "private": true,
   "description": "React specific wrapper for ods",
@@ -20,19 +20,13 @@
     "dist/"
   ],
   "dependencies": {
-    "@ovhcloud/ods-stencil-clipboard": "^15.0.1",
-    "tslib": "*"
+    "@ovhcloud/ods-component-clipboard": "^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/clipboard/src/components/osds-clipboard/constants/default-attributes.ts

@@ -0,0 +1,11 @@
+import type { OdsClipboardAttribute } from '../interfaces/attributes';
+
+const DEFAULT_ATTRIBUTE: OdsClipboardAttribute = Object.freeze({
+  disabled: false,
+  inline: false,
+  value: '',
+});
+
+export {
+  DEFAULT_ATTRIBUTE,
+};

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

@@ -0,0 +1,11 @@
+import { writeOnClipboard } from '@ovhcloud/ods-common-core';
+
+class OdsClipboardController {
+  async handlerClick(value: string): Promise<void> {
+    await writeOnClipboard(value);
+  }
+}
+
+export {
+  OdsClipboardController,
+};

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

@@ -1,12 +1,14 @@
-import { OdsComponentAttributes } from '../ods-component-attributes';
+interface OdsClipboardAttribute {
+  /** Disabled the input, the focus, and the tooltip */
+  disabled?: boolean;
 
-export interface OdsClipboardAttributes extends OdsComponentAttributes {
   /** Indicates if the input is full width or not: see component principles */
-  flex?: boolean;
+  inline?: boolean;
 
   /** Input text value */
   value: string;
-
-  /** Disabled the input, the focus, and the tooltip */
-  disabled?: boolean;
 }
+
+export {
+  OdsClipboardAttribute,
+};

packages-new/components/clipboard/src/components/osds-clipboard/interfaces/events.ts

@@ -0,0 +1,9 @@
+import type { EventEmitter } from '@stencil/core';
+
+interface OdsClipboardEvent {
+    odsClipboardCopied: EventEmitter<string>;
+}
+
+export {
+  OdsClipboardEvent,
+};

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

@@ -1,27 +1,23 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import {
-  OdsClipboardAttributes,
-  OdsComponentAttributes2StringAttributes,
-  odsClipboardDefaultAttributes,
-} from '@ovhcloud/ods-core';
-import { OdsCreateAttributes, OdsStringAttributes2Str } from '@ovhcloud/ods-testing';
+import type { E2EPage } from '@stencil/core/testing';
+import type { OdsClipboardAttribute } from './interfaces/attributes';
+import { newE2EPage } from '@stencil/core/testing';
+import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
 describe('e2e:osds-clipboard', () => {
+  const baseAttribute = { value: '' };
   let page: E2EPage;
-  let el: E2EElement;
 
-  async function setup({ attributes = {}, html = `` }: { attributes?: Partial<OdsClipboardAttributes>, html?: string } = {}) {
-    const minimalAttributes: OdsClipboardAttributes = OdsCreateAttributes(attributes, odsClipboardDefaultAttributes);
-    const stringAttributes = OdsComponentAttributes2StringAttributes<OdsClipboardAttributes>(minimalAttributes, odsClipboardDefaultAttributes);
+  async function setup({ attributes = {}, html = '' }: { attributes?: Partial<OdsClipboardAttribute>, html?: string } = {}) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsClipboardAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
     await page.setContent(`
-      <osds-clipboard ${OdsStringAttributes2Str(stringAttributes)}>
+      <osds-clipboard ${odsStringAttributes2Str(stringAttributes)}>
         ${html}
       </osds-clipboard>
     `);
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
-    el = await page.find('osds-clipboard');
   }
 
   describe('screenshots', () => {

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

@@ -1,8 +1,11 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import { OdsClipboardAttributes, OdsComponentAttributes2StringAttributes, odsClipboardDefaultAttributes } from '@ovhcloud/ods-core';
-import { OdsCreateAttributes, OdsStringAttributes2Str } from '@ovhcloud/ods-testing';
+import type { E2EElement, E2EPage } from '@stencil/core/testing';
+import type { OdsClipboardAttribute } from './interfaces/attributes';
+import { newE2EPage } from '@stencil/core/testing';
+import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
 describe('e2e:osds-clipboard', () => {
+  const baseAttribute = { value: '' };
   let page: E2EPage;
   let el: E2EElement;
   let input: E2EElement;
@@ -11,28 +14,27 @@ describe('e2e:osds-clipboard', () => {
     await page.evaluate(() => {
       let clipboardText = '';
       const clipboard = {
-        writeText: text => new Promise(resolve => resolve(clipboardText = text)),
+        writeText: (text: string) => new Promise(resolve => resolve(clipboardText = text)),
         readText: () => new Promise(resolve => resolve(clipboardText)),
-      }; 
+      };
       (window["navigator"] as any)["clipboard"] = clipboard;
       Object.defineProperty(navigator, 'clipboard', { value: clipboard });
     });
-  } 
+  }
 
-  async function setup({ attributes }: { attributes: Partial<OdsClipboardAttributes> }) {
-    const minimalAttributes: OdsClipboardAttributes = OdsCreateAttributes(attributes, odsClipboardDefaultAttributes);
-    const stringAttributes = OdsComponentAttributes2StringAttributes<OdsClipboardAttributes>(minimalAttributes, odsClipboardDefaultAttributes);
+  async function setup({ attributes = {} }: { attributes?: Partial<OdsClipboardAttribute> } = {}) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsClipboardAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
-    await page.setContent(`<osds-clipboard ${OdsStringAttributes2Str(stringAttributes)}></osds-clipboard>`);
+    await page.setContent(`<osds-clipboard ${odsStringAttributes2Str(stringAttributes)}></osds-clipboard>`);
 
     const origin = await page.evaluate(() => window.origin);
     const browserContext = page.browserContext();
     await browserContext.overridePermissions(origin, ['clipboard-write', 'clipboard-read']);
 
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
     await mockClipboard(page);
-    
+
     el = await page.find('osds-clipboard');
     input = await page.find('osds-clipboard >>> osds-input');
     await page.waitForChanges();
@@ -49,7 +51,7 @@ describe('e2e:osds-clipboard', () => {
 
   it('should copy the input value', async () => {
     const value = 'text to copy';
-    
+
     await setup({ attributes: { value } });
 
     await input.click();
@@ -59,9 +61,9 @@ describe('e2e:osds-clipboard', () => {
 
   it('should copy the input value with keyboard', async () => {
     const value = 'text to copy';
-    
+
     await setup({ attributes: { value } });
-    
+
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
 
@@ -80,13 +82,12 @@ describe('e2e:osds-clipboard', () => {
 
   it('should noy copy the input value with keyboard', async () => {
     const value = 'text to copy';
-    
+
     await setup({ attributes: { value, disabled: true } });
-    
+
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
 
     expect(await page.evaluate(() => navigator.clipboard.readText())).toBe('');
   });
-
 });