feat(phone-number): step 1 init component with simple input

ovh · Sep 25, 2023 · c60e794 · c60e794
1 parent 871c2f3
commit c60e794
Show file tree

Hide file tree

Showing 49 changed files with 709 additions and 0 deletions.
diff --git a/packages-new/components/phone-number/.gitignore b/packages-new/components/phone-number/.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
diff --git a/packages-new/components/phone-number/.npmignore b/packages-new/components/phone-number/.npmignore
@@ -0,0 +1,4 @@
+!dist/
+!loader/
+!docs-api/
+src/
diff --git a/packages-new/components/phone-number/CHANGELOG.md b/packages-new/components/phone-number/CHANGELOG.md
diff --git a/packages-new/components/phone-number/THIRD-PARTY-LICENCES b/packages-new/components/phone-number/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
diff --git a/packages-new/components/phone-number/documentation/specifications/spec.md b/packages-new/components/phone-number/documentation/specifications/spec.md
diff --git a/...ne-number/documentation/specifications/specifications-phone-number-contents.mdx b/...ne-number/documentation/specifications/specifications-phone-number-contents.mdx
@@ -0,0 +1,3 @@
+| Name    | default | Description |
+|---------|---------|-------------|
+| -       | ''      |             |
diff --git a/...hone-number/documentation/specifications/specifications-phone-number-events.mdx b/...hone-number/documentation/specifications/specifications-phone-number-events.mdx
@@ -0,0 +1 @@
+_none_
diff --git a/...one-number/documentation/specifications/specifications-phone-number-methods.mdx b/...one-number/documentation/specifications/specifications-phone-number-methods.mdx
@@ -0,0 +1 @@
+_none_
diff --git a/...-number/documentation/specifications/specifications-phone-number-properties.mdx b/...-number/documentation/specifications/specifications-phone-number-properties.mdx
@@ -0,0 +1,3 @@
+| Name | Type | default | Description |
+|------|------|---------|-------------|
+|      |      |         |             |
diff --git a/...phone-number/documentation/specifications/specifications-phone-number-tests.mdx b/...phone-number/documentation/specifications/specifications-phone-number-tests.mdx
@@ -0,0 +1 @@
+_none_
diff --git a/...nents/phone-number/documentation/specifications/specifications-phone-number.mdx b/...nents/phone-number/documentation/specifications/specifications-phone-number.mdx
@@ -0,0 +1,12 @@
+import {Description} from '@storybook/addon-docs';
+import Specs from './spec.md';
+import SpecsPhoneNumberContents from './specifications-phone-number-contents.mdx';
+import SpecsPhoneNumberTests from './specifications-phone-number-tests.mdx';
+
+<Description>{Specs}</Description>
+
+## Contents
+<SpecsPhoneNumberContents />
+
+## Tests
+<SpecsPhoneNumberTests />
diff --git a/packages-new/components/phone-number/jest.config.ts b/packages-new/components/phone-number/jest.config.ts
@@ -0,0 +1,23 @@
+import type { Config } from '@jest/types';
+import { OdsGetJestConfig } from '@ovhcloud/ods-common-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,
+ *   };
+ * };
+ * ```
+ */
+// @ts-ignore until dependencies are fixed to one unique version of @jest/types
+const config: Config.InitialOptions = OdsGetJestConfig({
+  basePath: '<rootDir>/../../..',
+  args
+});
+export default config;
diff --git a/packages-new/components/phone-number/package.json b/packages-new/components/phone-number/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@ovhcloud/ods-component-phone-number",
+  "version": "15.0.1",
+  "description": "ODS Phone number 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/index.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-common-core": "^15.0.1",
+    "@ovhcloud/ods-common-stencil": "^15.0.1",
+    "@ovhcloud/ods-common-theming": "^15.0.1",
+    "@ovhcloud/ods-component-input": "^15.0.1"
+  },
+  "devDependencies": {
+    "@ovhcloud/ods-common-testing": "^15.0.1",
+    "@ovhcloud/ods-stencil-dev": "^15.0.1"
+  }
+}
diff --git a/packages-new/components/phone-number/react/.gitignore b/packages-new/components/phone-number/react/.gitignore
@@ -0,0 +1,2 @@
+dist/
+src/
diff --git a/packages-new/components/phone-number/react/.npmignore b/packages-new/components/phone-number/react/.npmignore
@@ -0,0 +1,2 @@
+!dist/
+src/
diff --git a/packages-new/components/phone-number/react/CHANGELOG.md b/packages-new/components/phone-number/react/CHANGELOG.md
@@ -0,0 +1,6 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+[Latest version](https://ovhcloud.design/latest/?path=/docs/design-system-changelog--page)
diff --git a/packages-new/components/phone-number/react/package.json b/packages-new/components/phone-number/react/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@ovhcloud/ods-component-phone-number-react",
+  "version": "15.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-component-phone-number": "^15.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
+  },
+  "devDependencies": {
+    "@ovhcloud/ods-react-dev": "^15.0.1"
+  }
+}
diff --git a/packages-new/components/phone-number/react/tsconfig.cjs.json b/packages-new/components/phone-number/react/tsconfig.cjs.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "module": "CommonJS",
+    "declaration": false,
+    "declarationDir": null
+  }
+}
diff --git a/packages-new/components/phone-number/react/tsconfig.json b/packages-new/components/phone-number/react/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "declarationDir": "dist/types"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/.../components/phone-number/src/components/osds-phone-number/constants/default-attributes.ts b/.../components/phone-number/src/components/osds-phone-number/constants/default-attributes.ts
@@ -0,0 +1,12 @@
+import type { OdsPhoneNumberAttribute } from '../interfaces/attributes';
+
+const DEFAULT_ATTRIBUTE: OdsPhoneNumberAttribute = Object.freeze({
+  clearable: false,
+  disabled: false,
+  error: false,
+  value: '',
+});
+
+export {
+  DEFAULT_ATTRIBUTE,
+};
diff --git a/...ges-new/components/phone-number/src/components/osds-phone-number/interfaces/attributes.ts b/...ges-new/components/phone-number/src/components/osds-phone-number/interfaces/attributes.ts
@@ -0,0 +1,13 @@
+interface OdsPhoneNumberAttribute {
+  /** Ability to clear the phone number value */
+  clearable?: boolean;
+  disabled?: boolean;
+  /** Indicates if the phone number shows error or not */
+  error?: boolean;
+  /** Current value of the phone number */
+  value: string;
+}
+
+export {
+  OdsPhoneNumberAttribute,
+};
diff --git a/...ponents/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.screenshot.ts b/...ponents/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.screenshot.ts
@@ -0,0 +1,53 @@
+import type { E2EElement, E2EPage } from '@stencil/core/testing';
+import type { OdsPhoneNumberAttribute } 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-phone-number', () => {
+  const baseAttribute = { ariaLabel: '', forbiddenValues: [], value: '' };
+  let page: E2EPage;
+  let el: E2EElement;
+
+  async function setup({ attributes = {}, onPage }: { attributes?: Partial<OdsPhoneNumberAttribute>, onPage?: ({ page }: { page: E2EPage }) => void } = {}) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsPhoneNumberAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
+
+    page = await newE2EPage();
+    onPage && onPage({ page });
+
+    await page.setContent(`<osds-phone-number ${odsStringAttributes2Str(stringAttributes)}></osds-phone-number>`);
+    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+
+    el = await page.find('osds-phone-number');
+  }
+
+  describe('attributes', () => {
+    [false, true].forEach((disabled) => {
+      [false, true].forEach((error) => {
+        [false, true].forEach((clearable) => {
+          ['', 'value'].forEach((value) => {
+            it([disabled, error, clearable,,value].join(', '), async () => {
+              await setup({
+                attributes: {
+                  disabled,
+                  error,
+                  clearable,
+                  value,
+                },
+              });
+              await page.waitForChanges();
+
+              await page.evaluate(() => {
+                const element = document.querySelector('osds-phone-number') as HTMLElement;
+                return { width: element.clientWidth, height: element.clientHeight };
+              });
+              await page.setViewport({ width: 600, height:600 });
+              const results = await page.compareScreenshot('phone-number', { fullPage: false, omitBackground: true });
+              expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 })
+            });
+          });
+        });
+      });
+    });
+  })
+});
diff --git a/...ges-new/components/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.ts b/...ges-new/components/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.ts
@@ -0,0 +1,27 @@
+import type { OdsPhoneNumberAttribute } from './interfaces/attributes';
+import type { E2EElement, E2EPage } from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
+import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
+
+describe('e2e:osds-phone-number', () => {
+  const baseAttribute = { value: '' };
+  let page: E2EPage;
+  let el: E2EElement;
+
+  async function setup({ attributes }: { attributes: Partial<OdsPhoneNumberAttribute> }) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsPhoneNumberAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
+
+    page = await newE2EPage();
+    await page.setContent(`<osds-phone-number ${odsStringAttributes2Str(stringAttributes)}></osds-phone-number>`);
+    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+
+    el = await page.find('osds-phone-number');
+  }
+
+  it('should render', async () => {
+    await setup({ attributes: {} });
+    expect(el).not.toBeNull();
+    expect(el).toHaveClass('hydrated');
+  });
+});
diff --git a/packages-new/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss b/packages-new/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss
@@ -0,0 +1,3 @@
+@import '~@ovhcloud/ods-common-theming/color/ods-theming-color';
+@import '~@ovhcloud/ods-common-theming/ods-theme';
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		@import '~@ovhcloud/ods-common-theming/color/ods-theming-color';
		@import '~@ovhcloud/ods-common-theming/ods-theme';