Skip to content

Commit

Permalink
feat(arch): move && simplify component select
Browse files Browse the repository at this point in the history
  • Loading branch information
dpellier committed Aug 10, 2023
1 parent a26af3d commit 742d2b1
Show file tree
Hide file tree
Showing 165 changed files with 984 additions and 1,021 deletions.
1 change: 1 addition & 0 deletions packages-new/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"@ovhcloud/ods-component-icon": "^15.0.1",
"@ovhcloud/ods-component-input": "^15.0.1",
"@ovhcloud/ods-component-link": "^15.0.1",
"@ovhcloud/ods-component-select": "^15.0.1",
"@ovhcloud/ods-component-spinner": "^15.0.1",
"@ovhcloud/ods-component-text": "^15.0.1",
"@ovhcloud/ods-component-textarea": "^15.0.1",
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
224 changes: 224 additions & 0 deletions packages-new/components/select/documentation/specifications/spec.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
* [**Interfaces**](#interfaces)
* [**Types**](#types)
* [**Classes**](#classes)
* [**Type alias**](#type-alias)
* [**Variables**](#variables)

## Interfaces

### OdsSelectAttributes
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`ariaLabel`** | `null` \| `string` | ✴️ | | The corresponding aria-label describing its content|
|**`ariaLabelledby`** | _string_ | ✴️ | | The id to an external description|
|**`color`** | `primary` | ✴️ | | the primary color of the theme|
|**`defaultValue`** | `OdsInputValue` | ✴️ | | Its corresponding default value. It needs to match with one option so the option will be selected|
|**`disabled`** | _boolean_ | ✴️ | | indicates if the select is entirely disabled.it means no interactions (hover, click, focus, etc)|
|**`flex`** | _boolean_ | ✴️ | | full width or not: see component principles|
|**`opened`** | _boolean_ | | | opened or not|
|**`required`** | _boolean_ | ✴️ | | indicates if a value has to be selected|
|**`size`** | `md` | ✴️ | | size: see component principles|
|**`value`** | `OdsInputValue` | ✴️ | | Its corresponding value. It needs to correspond to the value of the option|

### OdsSelectBehavior
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`anchor`** | `HTMLElement` | ✴️ | | |
|**`el`** | `HTMLElement` | ✴️ | | |
|**`surface`** | `undefined` \| `OcdkSurface` | ✴️ | | |
|**`handleSelectClick`** | _void_ | ✴️ | | |
|**`handleValueChange`** | _void_ | ✴️ | | |
|**`syncReferences`** | _void_ | ✴️ | | |

### OdsSelectEvents
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`odsBlur`** | _void_ | ✴️ | | Event triggered on select blur|
|**`odsFocus`** | _void_ | ✴️ | | Event triggered on select focus|
|**`odsValueChange`** | `OdsSelectValueChangeEventDetail` | ✴️ | | Emitted when the value has changed|

### OdsSelectMethods
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`clear`** | _void_ | ✴️ | | erase the current selection|
|**`getValidity`** | `OdsSelectValidityState` | ✴️ | | get the validity state|
|**`reset`** | _void_ | ✴️ | | reset the value to the initial one (default value)|
|**`setFocus`** | _void_ | ✴️ | | focus the element|
|**`setInputTabindex`** | _void_ | ✴️ | | set tab index on the component|
|**`validate`** | `OdsSelectValidityState` | ✴️ | | check that the select is valid or not.In case of required field, the validation will check the entered valueand set the field in error if it is not fulfilled|

### OdsSelectOptionAttributes
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`selected`** | _boolean_ | | | |
|**`value`** | `OdsInputValue` | ✴️ | | |

### OdsSelectOptionClickEventDetail
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`value`** | `OdsInputValue` | ✴️ | | |

### OdsSelectOptionEvents
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`odsSelectOptionClick`** | `OdsSelectOptionClickEventDetail` | ✴️ | | the select value changed|

### OdsSelectOptionMethods
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`getLabel`** | _string_ | ✴️ | | get label of the element|

### OdsSelectValidityState
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`customError`** | _boolean_ | ✴️ | | |
|**`forbiddenValue`** | _boolean_ | ✴️ | | |
|**`invalid`** | _boolean_ | ✴️ | | |
|**`stepMismatch`** | _boolean_ | ✴️ | | |
|**`valid`** | _boolean_ | ✴️ | | |
|**`valueMissing`** | _boolean_ | ✴️ | | |

### OdsSelectValueChangeEventDetail
|name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`oldValue`** | `OdsInputValue` | | | |
|**`selection`** | `null` \| `OdsSelectOption` | ✴️ | | |
|**`validity`** | `OdsValidityState` | ✴️ | | |
|**`value`** | `OdsInputValue` | ✴️ | | |

## Types

### OdsSelectSize
| |
|:---:|
| `md` |

## Classes

### OdsSelectController
_common controller logic for select component used by the different implementations._
_it contains all the glue between framework implementation and the third party service._

#### Methods
> **closeSurface**() => _unknown_

> **getValidity**() => _unknown_

> **handlerKeyDown**() => _unknown_

> **hasRequiredError**() => _unknown_

> **openSurface**() => _unknown_

> **syncReferences**() => _unknown_


### OdsSelectGroupController
_common controller logic for select group component used by the different implementations._
_it contains all the glue between framework implementation and the third party service._


### OdsSelectOptionController
_common controller logic for select option component used by the different implementations._
_it contains all the glue between framework implementation and the third party service._


## Type alias

### OdsSelect

interface description of all implementation of `ods-select-option`.
each implementation must have defined events, methods, attributes
and one controller for the common behavior logic

> - `OdsComponentGenericMethods`
> - `OdsComponentGenericEvents`
### OdsSelectGroup

interface description of all implementation of `ods-select-group`.
each implementation must have defined events, methods, attributes
and one controller for the common behavior logic

> - `OdsComponentGenericMethods`
> - `OdsComponentGenericEvents`
### OdsSelectOption

interface description of all implementation of `ods-select-option`.
each implementation must have defined events, methods, attributes
and one controller for the common behavior logic

> - `OdsComponentGenericMethods`
> - `OdsComponentGenericEvents`
### OdsSelectOptionClickEvent

> - `OdsSelectOptionClickEventDetail`
### OdsSelectValueChangeEvent

> - `OdsSelectValueChangeEventDetail`
### OdsSelectAttributes

> _Based on `OdsComponentAttributes`_
### OdsSelectEvents

> _Based on `OdsComponentEvents`_
### OdsSelectGroupAttributes

> _Based on `OdsComponentAttributes`_
### OdsSelectGroupEvents

> _Based on `OdsComponentEvents`_
### OdsSelectGroupMethods

> _Based on `OdsComponentMethods`_
### OdsSelectMethods

> _Based on `OdsComponentMethods`_
### OdsSelectOptionAttributes

> _Based on `OdsComponentAttributes`_
### OdsSelectOptionEvents

> _Based on `OdsComponentEvents`_
### OdsSelectOptionMethods

> _Based on `OdsComponentMethods`_
### OdsSelectValidityState

> _Based on `OdsValidityState`_
## Variables

### odsSelectDefaultAttributes
`OdsSelectAttributes`

### odsSelectDefaultAttributesDoc
`OdsSelectAttributes`

### odsSelectGroupDefaultAttributes
`OdsSelectGroupAttributes`

### odsSelectOptionDefaultAttributes
`OdsSelectOptionAttributes`
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {Description} from '@storybook/addon-docs';
import Specs from './spec.md';
import SpecsSelectContents from './specifications-select-contents.mdx';
import SpecsSelectProperties from './specifications-select-properties.mdx';
import SpecsSelectMethods from './specifications-select-methods.mdx';
import SpecsSelectEvents from './specifications-select-events.mdx';

<Description>{Specs}</Description>

## Contents
<SpecsSelectContents />

<SpecsSelectProperties />

<SpecsSelectMethods />

<SpecsSelectEvents />
Original file line number Diff line number Diff line change
@@ -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);

Expand All @@ -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;
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
{
"name": "@ovhcloud/ods-stencil-select",
"name": "@ovhcloud/ods-component-select",
"version": "15.0.1",
"private": true,
"description": "Custom select HTML component",
"description": "ODS Select component",
"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": {
Expand All @@ -33,11 +32,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-stencil-component": "^15.0.1"
"@ovhcloud/ods-theming": "^15.0.1"
},
"devDependencies": {
"@ovhcloud/ods-common-testing": "^15.0.1",
"@ovhcloud/ods-component-content-addon": "^15.0.1",
"@ovhcloud/ods-stencil-component-dev": "^15.0.1"
"@ovhcloud/ods-component-icon": "^15.0.1",
"@ovhcloud/ods-stencil-dev": "^15.0.1"
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@ovhcloud/ods-stencil-select-react",
"name": "@ovhcloud/ods-component-select-react",
"version": "15.0.1",
"private": true,
"description": "React specific wrapper for ods",
Expand All @@ -19,19 +19,13 @@
"dist/"
],
"dependencies": {
"@ovhcloud/ods-stencil-select": "^15.0.1",
"tslib": "*"
"@ovhcloud/ods-component-select": "^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"
}
}
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';

import {
OdsSelectGroupAttributes,
} from '@ovhcloud/ods-core';
import type { E2EElement, E2EPage } from '@stencil/core/testing';
import { newE2EPage } from '@stencil/core/testing';

describe('e2e:osds-select-group', () => {
let page: E2EPage;
let el: E2EElement;

async function setup({
onPage,
}: { attributes?: Partial<OdsSelectGroupAttributes>, html?: string, onPage?: ({ page }: { page: E2EPage }) => void } = {}) {
async function setup({ onPage }: { onPage?: ({ page }: { page: E2EPage }) => void } = {}) {
page = await newE2EPage();
onPage && onPage({ page });

Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';

import {
OdsSelectGroupAttributes,
} from '@ovhcloud/ods-core';
import type { E2EElement, E2EPage } from '@stencil/core/testing';
import { newE2EPage } from '@stencil/core/testing';

describe('e2e:osds-select-group', () => {
let page: E2EPage;
let el: E2EElement;

async function setup({
onPage,
}: { attributes?: Partial<OdsSelectGroupAttributes>, html?: string, onPage?: ({ page }: { page: E2EPage }) => void } = {}) {
async function setup({ onPage }: { onPage?: ({ page }: { page: E2EPage }) => void } = {}) {
page = await newE2EPage();
onPage && onPage({ page });

Expand Down
Loading

0 comments on commit 742d2b1

Please sign in to comment.