feat(form-field): rendering, styling, testing and documenting

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

@@ -20,6 +20,7 @@
   "OdsContentAddon",
   "OdsDivider",
   "OdsFlag",
+  "OdsFormField",
   "OdsIcon",
   "OdsInput",
   "OdsLink",
@@ -45,4 +46,4 @@
   "OdsTile",
   "OdsToggle",
   "OdsTooltip"
-]
+]

packages/libraries/core/src/components/form-field/ods-form-field-attributes.ts

@@ -0,0 +1,12 @@
+import { OdsComponentAttributes } from '../ods-component-attributes';
+
+export interface OdsFormFieldAttributes extends OdsComponentAttributes {
+  /**
+   * Indicates if the Form Field shows error or not
+   */
+  error?: string;
+  /**
+   * Indicates if the Form Field is full width or not: see component principles
+   */
+  flex?: boolean;
+}

packages/libraries/core/src/components/form-field/ods-form-field-controller.ts

@@ -0,0 +1,14 @@
+import { OdsFormField } from './ods-form-field';
+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 OdsFormFieldController extends OdsComponentController<OdsFormField> {
+  // private readonly logger = new OdsLogger('OdsFormFieldController');
+
+  constructor(component: OdsFormField) {
+    super(component);
+  }
+}

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

@@ -0,0 +1,8 @@
+import { OdsFormFieldAttributes } from './ods-form-field-attributes';
+
+export const odsFormFieldDefaultAttributesDoc  = {
+  error: '',
+  flex: false,
+} as const;
+
+export const odsFormFieldDefaultAttributes = odsFormFieldDefaultAttributesDoc as OdsFormFieldAttributes;

packages/libraries/core/src/components/form-field/ods-form-field-events.ts

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

packages/libraries/core/src/components/form-field/ods-form-field-methods.ts

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

packages/libraries/core/src/components/form-field/ods-form-field.ts

@@ -0,0 +1,16 @@
+import { OdsFormFieldAttributes } from './ods-form-field-attributes';
+import { OdsFormFieldController } from './ods-form-field-controller';
+import { OdsFormFieldEvents } from './ods-form-field-events';
+import { OdsFormFieldMethods } from './ods-form-field-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-form-field`.
+ * each implementation must have defined events, methods, attributes
+ * and one controller for the common behavior logic
+ */
+export type OdsFormField<ComponentMethods extends OdsComponentGenericMethods<OdsFormFieldMethods> = OdsComponentGenericMethods<OdsFormFieldMethods>,
+  ComponentEvents extends OdsComponentGenericEvents<OdsFormFieldEvents> = OdsComponentGenericEvents<OdsFormFieldEvents>> =
+  OdsComponent<ComponentMethods, ComponentEvents, OdsFormFieldAttributes, OdsFormFieldController>;

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

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

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

@@ -54,3 +54,4 @@ export * from './ods-component-generic-methods';
 export * from './ods-component-methods';
 export * from './ods-focus-change-event-detail';
 export * from './ods-string-attributes';
+export * from './form-field/public-api';

packages/specifications/components/form-field/specifications-form-field-contents.mdx

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

packages/specifications/components/form-field/specifications-form-field-events.mdx

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

packages/specifications/components/form-field/specifications-form-field-methods.mdx

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

packages/specifications/components/form-field/specifications-form-field-properties.mdx

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

packages/specifications/components/form-field/specifications-form-field-tests.mdx

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

packages/specifications/components/form-field/specifications-form-field.mdx

@@ -0,0 +1,13 @@
+import {Description} from '@storybook/addon-docs';
+
+import Specs from '@ovhcloud/ods-core/src/components/form-field/docs/spec.md';
+import SpecsFormFieldContents from './specifications-form-field-contents.mdx';
+import SpecsFormFieldTests from './specifications-form-field-tests.mdx';
+
+<Description>{Specs}</Description>
+
+## Contents
+<SpecsFormFieldContents />
+
+## Tests
+<SpecsFormFieldTests />

packages/stencil/components/form-field/.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/form-field/.npmignore

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

packages/stencil/components/form-field/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/form-field/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/form-field/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/form-field/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ovhcloud/ods-stencil-form-field",
+  "version": "14.0.1",
+  "private": true,
+  "description": "FormField 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/form-field/react/.gitignore

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

packages/stencil/components/form-field/react/.npmignore

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

packages/stencil/components/form-field/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/form-field/react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ovhcloud/ods-stencil-form-field-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-form-field": "^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/form-field/react/tsconfig.cjs.json

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

packages/stencil/components/form-field/react/tsconfig.json

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