feat(clipboard): generate component

packages/libraries/core/src/components/clipboard/ods-clipboard-attributes.ts

@@ -0,0 +1,7 @@
+import { OdsComponentAttributes } from '../ods-component-attributes';
+
+export interface OdsClipboardAttributes extends OdsComponentAttributes {
+  /**
+   * Clipboard attribute description
+   */
+}

packages/libraries/core/src/components/clipboard/ods-clipboard-controller.ts

@@ -0,0 +1,21 @@
+import { OdsClipboard } from './ods-clipboard';
+import { OdsComponentController } from '../ods-component-controller';
+
+/**
+ * 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 OdsClipboardController extends OdsComponentController<OdsClipboard> {
+  // private readonly logger = new OdsLogger('OdsClipboardController');
+
+  constructor(component: OdsClipboard) {
+    super(component);
+  }
+
+  /**
+   * Attributes validation documentation
+   */
+  validateAttributes(): void {
+      return;
+  }
+}

packages/libraries/core/src/components/clipboard/ods-clipboard-default-attributes.ts

@@ -0,0 +1,7 @@
+import { OdsClipboardAttributes } from './ods-clipboard-attributes';
+
+export const odsClipboardDefaultAttributesDoc  = {
+    // default attributes
+} as const;
+
+export const odsClipboardDefaultAttributes = odsClipboardDefaultAttributesDoc as OdsClipboardAttributes;

packages/libraries/core/src/components/clipboard/ods-clipboard-events.ts

@@ -0,0 +1,5 @@
+import { OdsComponentEvents } from '../ods-component-events';
+
+export interface OdsClipboardEvents extends OdsComponentEvents {
+    // Events
+}

packages/libraries/core/src/components/clipboard/ods-clipboard-methods.ts

@@ -0,0 +1,5 @@
+import { OdsComponentMethods } from '../ods-component-methods';
+
+export interface OdsClipboardMethods extends OdsComponentMethods {
+    // Methods
+}

packages/libraries/core/src/components/clipboard/ods-clipboard.ts

@@ -0,0 +1,16 @@
+import { OdsClipboardAttributes } from './ods-clipboard-attributes';
+import { OdsClipboardController } from './ods-clipboard-controller';
+import { OdsClipboardEvents } from './ods-clipboard-events';
+import { OdsClipboardMethods } from './ods-clipboard-methods';
+import { OdsComponent } from '../ods-component';
+import { OdsComponentGenericEvents } from '../ods-component-generic-events';
+import { OdsComponentGenericMethods } from '../ods-component-generic-methods';
+
+/**
+ * interface description of all implementation of `ods-clipboard`.
+ * each implementation must have defined events, methods, attributes
+ * and one controller for the common behavior logic
+ */
+export type OdsClipboard<ComponentMethods extends OdsComponentGenericMethods<OdsClipboardMethods> = OdsComponentGenericMethods<OdsClipboardMethods>,
+  ComponentEvents extends OdsComponentGenericEvents<OdsClipboardEvents> = OdsComponentGenericEvents<OdsClipboardEvents>> =
+  OdsComponent<ComponentMethods, ComponentEvents, OdsClipboardAttributes, OdsClipboardController>;

packages/libraries/core/src/components/clipboard/public-api.ts

@@ -0,0 +1,6 @@
+export * from './ods-clipboard';
+export * from './ods-clipboard-attributes';
+export * from './ods-clipboard-controller';
+export * from './ods-clipboard-default-attributes';
+export * from './ods-clipboard-events';
+export * from './ods-clipboard-methods';

packages/libraries/core/src/components/component-types.json

@@ -15,6 +15,7 @@
   "OdsCheckbox",
   "OdsCheckboxButton",
   "OdsChip",
+  "OdsClipboard",
   "OdsCode",
   "OdsCollapsible",
   "OdsContentAddon",

packages/libraries/core/src/components/public-api.ts

@@ -13,6 +13,7 @@ export * from './cart/public-api';
 export * from './checkbox/public-api';
 export * from './checkbox-button/public-api';
 export * from './chip/public-api';
+export * from './clipboard/public-api';
 export * from './code/public-api';
 export * from './content-addon/public-api';
 export * from './divider/public-api';

packages/specifications/components/clipboard/specifications-clipboard-contents.mdx

@@ -0,0 +1,3 @@
+| Name    | default | Description |
+|---------|---------|-------------|
+| -       | ''      |             |

packages/specifications/components/clipboard/specifications-clipboard-events.mdx

@@ -0,0 +1 @@
+_none_

packages/specifications/components/clipboard/specifications-clipboard-methods.mdx

@@ -0,0 +1 @@
+_none_

packages/specifications/components/clipboard/specifications-clipboard-properties.mdx

@@ -0,0 +1,3 @@
+| Name | Type | default | Description |
+|------|------|---------|-------------|
+|      |      |         |             |

packages/specifications/components/clipboard/specifications-clipboard-tests.mdx

@@ -0,0 +1 @@
+_none_

packages/specifications/components/clipboard/specifications-clipboard.mdx

@@ -0,0 +1,13 @@
+import {Description} from '@storybook/addon-docs';
+
+[//]: # (import Specs from '@ovhcloud/ods-core/src/components/clipboard/docs/spec.md';)
+import SpecsClipboardContents from './specifications-clipboard-contents.mdx';
+import SpecsClipboardTests from './specifications-clipboard-tests.mdx';
+
+[//]: # (<Description>{Specs}</Description>)
+
+## Contents
+<SpecsClipboardContents />
+
+## Tests
+<SpecsClipboardTests />

packages/stencil/components/clipboard/.gitignore

@@ -0,0 +1,33 @@
+dist/
+custom-elements/
+custom-elements-bundle/
+www/
+loader/
+docs-api
+src/components.d.ts
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+screenshot/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+src/**/readme.md

packages/stencil/components/clipboard/.npmignore

@@ -0,0 +1,4 @@
+!dist/
+!loader/
+!docs-api/
+src/

packages/stencil/components/clipboard/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/stencil/components/clipboard/THIRD-PARTY-LICENCES

@@ -0,0 +1,5 @@
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file
+
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file

packages/stencil/components/clipboard/jest.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from '@jest/types';
+import { OdsGetJestConfig } from '@ovhcloud/ods-testing';
+
+const args = process.argv.slice(2);
+
+/**
+ * synchronous config for jest.
+ *
+ * example with async config :
+ * ```typescript
+ * export default async (): Promise<Config.InitialOptions> => {
+ *   return {
+ *     verbose: true,
+ *   };
+ * };
+ * ```
+ */
+const config: Config.InitialOptions = OdsGetJestConfig({
+  basePath: '<rootDir>/../../../..',
+  args
+});
+export default config;

packages/stencil/components/clipboard/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ovhcloud/ods-stencil-clipboard",
+  "version": "14.0.1",
+  "private": true,
+  "description": "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",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "scripts": {
+    "build:prod": "npm run build:stencil --if-present && npm run build:react --if-present && npm run build:vue --if-present",
+    "build": "echo \"use build:prod\"",
+    "build:stencil": "stencil build --docs --prod --config stencil.config.ts",
+    "build:react": "npm --prefix react run build",
+    "build:vue": "npm --prefix vue run build",
+    "watch": "stencil build --docs --watch --dev --config stencil.config.ts",
+    "start": "stencil build --docs --dev --watch --serve",
+    "ignore:rm": "git clean -Xdf",
+    "generate": "stencil generate",
+    "doc:api": "typedoc",
+    "generate:licence": "npx generate-license-file --input package.json --output THIRD-PARTY-LICENCES --overwrite",
+    "test": "yarn run test:spec && yarn run test:e2e",
+    "test:spec": "stencil test --spec --config stencil.config.ts --coverage",
+    "test:spec:ci": "stencil test --config stencil.config.ts  --spec --ci --coverage",
+    "test:e2e": "stencil test --e2e --config stencil.config.ts",
+    "test:e2e:screenshot": "stencil test --e2e --screenshot --config stencil.config.ts --passWithNoTests",
+    "test:e2e:screenshot:update": "stencil test --e2e --screenshot --config stencil.config.ts --update-screenshot --passWithNoTests",
+    "test:e2e:ci": "stencil test --config stencil.config.ts --e2e --ci",
+    "test:e2e:ci:screenshot": "stencil test --config stencil.config.ts --e2e --ci --screenshot --passWithNoTests",
+    "test:e2e:ci:screenshot:update": "stencil test --config stencil.config.ts --e2e --ci --screenshot --update-screenshot --passWithNoTests"
+  },
+  "dependencies": {
+    "@ovhcloud/ods-stencil-component": "^14.0.1"
+  },
+  "devDependencies": {
+    "@ovhcloud/ods-stencil-component-dev": "^14.0.1"
+  },
+  "publishConfig": {
+    "registry": ""
+  }
+}

packages/stencil/components/clipboard/react/.gitignore

@@ -0,0 +1,2 @@
+dist/
+src/

packages/stencil/components/clipboard/react/.npmignore

@@ -0,0 +1,2 @@
+!dist/
+src/

packages/stencil/components/clipboard/react/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/stencil/components/clipboard/react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ovhcloud/ods-stencil-clipboard-react",
+  "version": "14.0.1",
+  "private": true,
+  "description": "React specific wrapper for ods",
+  "keywords": [],
+  "author": "OVH SAS",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rimraf dist",
+    "compile": "npm run compile:esm && npm run compile:cjs",
+    "compile:esm": "tsc -p tsconfig.json",
+    "compile:cjs": "tsc -p tsconfig.cjs.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "dependencies": {
+    "@ovhcloud/ods-stencil-clipboard": "^14.0.1",
+    "tslib": "*"
+  },
+  "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"
+  }
+}

packages/stencil/components/clipboard/react/tsconfig.cjs.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "module": "CommonJS",
+    "declaration": false,
+    "declarationDir": null
+  }
+}

packages/stencil/components/clipboard/react/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "declarationDir": "dist/types"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

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

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

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

@@ -0,0 +1,28 @@
+import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
+import { OdsClipboardAttributes, OdsComponentAttributes2StringAttributes, odsClipboardDefaultAttributes } from '@ovhcloud/ods-core';
+import { OdsCreateAttributes, OdsStringAttributes2Str, odsClipboardBaseAttributes } from '@ovhcloud/ods-testing';
+
+describe('e2e:osds-clipboard', () => {
+  let page: E2EPage;
+  let el: E2EElement;
+
+  async function setup({ attributes }: { attributes: Partial<OdsClipboardAttributes> }) {
+    const minimalAttributes: OdsClipboardAttributes = OdsCreateAttributes(attributes, odsClipboardBaseAttributes);
+    const stringAttributes = OdsComponentAttributes2StringAttributes<OdsClipboardAttributes>(minimalAttributes, odsClipboardDefaultAttributes);
+
+    page = await newE2EPage();
+    await page.setContent(`<osds-clipboard ${OdsStringAttributes2Str(stringAttributes)}></osds-clipboard>`);
+    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+
+    el = await page.find('osds-clipboard');
+  }
+
+  it('should render', async () => {
+    await setup({ attributes: {} });
+    expect(el).not.toBeNull();
+    expect(el).toHaveClass('hydrated');
+
+    // E2E testing
+  });
+
+});

packages/stencil/components/clipboard/src/components/osds-clipboard/osds-clipboard.scss

@@ -0,0 +1,24 @@
+@import 'styles/osds-clipboard.mixins';
+@import 'styles/osds-clipboard.color';
+@import 'styles/osds-clipboard.size';
+@import 'styles/osds-clipboard.typography';
+@import '~@ovhcloud/ods-theming/color/ods-theming-color';
+@import '~@ovhcloud/ods-theming/ods-theme';
+
+// CSS targeted only for this component
+// /!\ for theming purposes, it has to be done in theming files
+// (i.e. packages/libraries/theming/...)
+:host {
+
+}
+
+:host([attribute]) {
+
+}
+
+// apply the theme template for the component
+@include ods-theme-component() {
+  @include osds-clipboard-theme-color();
+  @include osds-clipboard-theme-size();
+  @include osds-clipboard-theme-typography();
+}