Skip to content

Commit 4782c66

Browse files
dpellierdpellier
committed
refactor(stencil): init new arch with text
1 parent 4d00972 commit 4782c66

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+268
-509
lines changed

‎.gitignore

+6-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ yarn-debug.log*
1111
yarn-error.log*
1212
lerna-debug.log*
1313

14+
# Stencil #
15+
.stencil/
16+
dist/
17+
loader/
18+
www/
19+
1420
# Diagnostic reports (https://nodejs.org/api/report.html)
1521
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
1622

@@ -87,7 +93,6 @@ typings/
8793

8894
# Nuxt.js build / generate output
8995
.nuxt
90-
dist
9196

9297
# Gatsby files
9398
.cache/

‎package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,11 @@
1010
"packages/cdk/dev",
1111
"packages/common/*",
1212
"packages/components",
13-
"packages/components/!(loader|custom-elements|custom-elements-bundle)*",
14-
"packages/components/!(loader|custom-elements|custom-elements-bundle)*/react",
15-
"packages/components/!(loader|custom-elements|custom-elements-bundle)*/vue",
13+
"packages/components/src/!(dist|loader)*",
1614
"packages/components-ovh",
1715
"packages/components-ovh/!(loader|custom-elements|custom-elements-bundle)*",
1816
"packages/components-ovh/!(loader|custom-elements|custom-elements-bundle)*/react",
1917
"packages/components-ovh/!(loader|custom-elements|custom-elements-bundle)*/vue",
20-
"packages/examples/*",
2118
"packages/shared-dependencies/*",
2219
"packages/storybook",
2320
"packages/themes/*"

‎packages/common/scripts/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@
66
"license": "Apache-2.0",
77
"bin": {
88
"build-stencil": "./src/build-stencil.js"
9+
},
10+
"dependencies": {
11+
"replace-in-file": "7.0.2"
912
}
1013
}

‎packages/common/scripts/src/build-stencil.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@
44
* There is a weird issue with Stencil v4 where the dist/types directory is not present after the first build.
55
* This occurs only on components that have multiple sub-components (ex: select)
66
* (see: https://github.com/ionic-team/stencil/issues/4834)
7+
* (should be fixed by: https://github.com/ionic-team/stencil/issues/5091, wait for the release and test)
78
*
89
* To avoid the issue we check the result of the first build and run another one in case the types are not present.
910
* --------------------------------------------------------------------------*/
1011

1112
const { execSync } = require('child_process');
1213
const fs = require('fs');
14+
const replace = require('replace-in-file');
1315

1416
try {
15-
const isProd = process.argv[2] === 'prod';
17+
//const isProd = process.argv[2] === 'prod';
18+
const isProd = true;
1619

1720
execSync('npm run build:stencil', { stdio: 'inherit' });
1821

@@ -21,7 +24,24 @@ try {
2124
execSync('npm run build:stencil', { stdio: 'inherit' });
2225
}
2326

27+
// TODO see if those take long time or not to see if we still need the build:ci
2428
if (isProd) {
29+
const reactGeneratedFilePath = 'react/src/components/stencil-generated/index.ts';
30+
const vueGeneratedFilePath = 'vue/src/components/stencil-generated/index.ts';
31+
32+
// The stencil build does not generate a correct path for the JSX interface
33+
// (see https://github.com/ionic-team/stencil-ds-output-targets/issues/404)
34+
// So we need to manually fix it
35+
if (!fs.existsSync(reactGeneratedFilePath) || !fs.existsSync(vueGeneratedFilePath)) {
36+
throw new Error(`Cannot find either ${reactGeneratedFilePath} or ${vueGeneratedFilePath}`);
37+
}
38+
39+
replace.sync({
40+
files: [reactGeneratedFilePath, vueGeneratedFilePath],
41+
from: 'import type { JSX } from \'@ovhcloud/ods-components/dist/components\';',
42+
to: 'import type { JSX } from \'@ovhcloud/ods-components\';',
43+
});
44+
2545
// Those two could be run in parallel, but it causes CI issue for now, to investigate
2646
execSync('npm run build:react', { stdio: 'inherit' });
2747
execSync('npm run build:vue', { stdio: 'inherit' });

‎packages/common/stencil/src/config/stencil-config.ts

+8-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { Config as JestConfig } from '@jest/types';
22
import type { Config as StencilConfig } from '@stencil/core';
3-
43
import { reactOutputTarget } from '@stencil/react-output-target';
54
import { sass } from '@stencil/sass';
65
import { vueOutputTarget } from '@stencil/vue-output-target';
@@ -9,20 +8,23 @@ import * as autoprefixer from 'autoprefixer';
98
import * as nodeSassPackageImporter from 'node-sass-package-importer';
109
import { inlineSvg } from 'stencil-inline-svg';
1110

12-
function getStencilConfig({ args, componentCorePackage, devScript, excludeComponents = [], jestConfig = {}, namespace }: {
11+
function getStencilConfig({ args, componentCorePackage, devScript, jestConfig = {}, namespace, tsconfig }: {
1312
args: string[],
1413
componentCorePackage: string,
15-
excludeComponents?: string[],
1614
devScript?: string,
1715
jestConfig: JestConfig.InitialOptions,
1816
namespace: string,
17+
tsconfig?: string,
1918
}): StencilConfig {
2019
const isCi = args.some((arg) => arg.match(/(--|:)ci/g));
2120
const isDev = args.includes('--dev');
2221
const isProd = args.includes('--prod');
2322
const isTest = args.includes('--e2e') || args.includes('--spec');
2423

2524
function getTsConfig() {
25+
if (tsconfig) {
26+
return tsconfig;
27+
}
2628
if (isProd) {
2729
return 'tsconfig.prod.json';
2830
}
@@ -40,17 +42,10 @@ function getStencilConfig({ args, componentCorePackage, devScript, excludeCompon
4042
namespace,
4143
outputTargets: [
4244
{
43-
dir: 'dist',
4445
esmLoaderPath: '../loader',
4546
type: 'dist',
4647
},
4748
{
48-
dir: 'custom-elements',
49-
copy: isProd ? [{
50-
dest: 'custom-elements',
51-
src: '../../../common/stencil/src/scripts/custom-elements', // TODO get rid of this indirect module reference
52-
warn: true,
53-
}] : [],
5449
generateTypeDeclarations: true,
5550
includeGlobalScripts: false,
5651
type: 'dist-custom-elements',
@@ -117,20 +112,19 @@ function getStencilConfig({ args, componentCorePackage, devScript, excludeCompon
117112
if (isProd) {
118113
return {
119114
...baseConfig,
115+
enableCache: false,
120116
outputTargets: baseConfig.outputTargets?.concat([
121117
reactOutputTarget({
122118
componentCorePackage,
123-
customElementsDir: 'custom-elements',
124-
excludeComponents,
119+
customElementsDir: 'dist/components',
125120
includeDefineCustomElements: false,
126121
includeImportCustomElements: true,
127122
includePolyfills: false,
128123
proxiesFile: './react/src/components/stencil-generated/index.ts',
129124
}),
130125
vueOutputTarget({
131126
componentCorePackage,
132-
customElementsDir: 'custom-elements',
133-
excludeComponents,
127+
customElementsDir: 'dist/components',
134128
includeDefineCustomElements: false,
135129
includeImportCustomElements: true,
136130
includePolyfills: false,

‎packages/common/stencil/src/scripts/custom-elements/custom-elements.d.ts

-7
This file was deleted.

‎packages/common/stencil/src/scripts/custom-elements/package.json

-9
This file was deleted.

‎packages/components/package.json

+14-44
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,22 @@
44
"description": "ODS Components",
55
"author": "OVH SAS",
66
"license": "Apache-2.0",
7-
"dependencies": {
8-
"@ovhcloud/ods-component-accordion": "16.6.0",
9-
"@ovhcloud/ods-component-breadcrumb": "16.6.0",
10-
"@ovhcloud/ods-component-button": "16.6.0",
11-
"@ovhcloud/ods-component-cart": "16.6.0",
12-
"@ovhcloud/ods-component-checkbox": "16.6.0",
13-
"@ovhcloud/ods-component-checkbox-button": "16.6.0",
14-
"@ovhcloud/ods-component-chip": "16.6.0",
15-
"@ovhcloud/ods-component-clipboard": "16.6.0",
16-
"@ovhcloud/ods-component-code": "16.6.0",
17-
"@ovhcloud/ods-component-collapsible": "16.6.0",
18-
"@ovhcloud/ods-component-content-addon": "16.6.0",
19-
"@ovhcloud/ods-component-datagrid": "16.6.0",
20-
"@ovhcloud/ods-component-datepicker": "16.6.0",
21-
"@ovhcloud/ods-component-divider": "16.6.0",
22-
"@ovhcloud/ods-component-flag": "16.6.0",
23-
"@ovhcloud/ods-component-form-field": "16.6.0",
24-
"@ovhcloud/ods-component-icon": "16.6.0",
25-
"@ovhcloud/ods-component-input": "16.6.0",
26-
"@ovhcloud/ods-component-link": "16.6.0",
27-
"@ovhcloud/ods-component-medium": "16.6.0",
28-
"@ovhcloud/ods-component-menu": "16.6.0",
29-
"@ovhcloud/ods-component-message": "16.6.0",
30-
"@ovhcloud/ods-component-modal": "16.6.0",
31-
"@ovhcloud/ods-component-pagination": "16.6.0",
32-
"@ovhcloud/ods-component-password": "16.6.0",
33-
"@ovhcloud/ods-component-phone-number": "16.6.0",
34-
"@ovhcloud/ods-component-popover": "16.6.0",
35-
"@ovhcloud/ods-component-progress-bar": "16.6.0",
36-
"@ovhcloud/ods-component-quantity": "16.6.0",
37-
"@ovhcloud/ods-component-radio": "16.6.0",
38-
"@ovhcloud/ods-component-radio-button": "16.6.0",
39-
"@ovhcloud/ods-component-range": "16.6.0",
40-
"@ovhcloud/ods-component-search-bar": "16.6.0",
41-
"@ovhcloud/ods-component-select": "16.6.0",
42-
"@ovhcloud/ods-component-skeleton": "16.6.0",
43-
"@ovhcloud/ods-component-spinner": "16.6.0",
44-
"@ovhcloud/ods-component-switch": "16.6.0",
45-
"@ovhcloud/ods-component-tabs": "16.6.0",
46-
"@ovhcloud/ods-component-text": "16.6.0",
47-
"@ovhcloud/ods-component-textarea": "16.6.0",
48-
"@ovhcloud/ods-component-tile": "16.6.0",
49-
"@ovhcloud/ods-component-toggle": "16.6.0",
50-
"@ovhcloud/ods-component-tooltip": "16.6.0"
7+
"main": "dist/index.cjs.js",
8+
"module": "dist/index.js",
9+
"es2015": "dist/esm/index.js",
10+
"es2017": "dist/esm/index.js",
11+
"jsnext:main": "dist/esm/index.js",
12+
"types": "dist/types/index.d.ts",
13+
"collection": "dist/collection/collection-manifest.json",
14+
"collection:main": "dist/collection/index.js",
15+
"scripts": {
16+
"build:prod": "build-stencil",
17+
"build:stencil": "stencil build --docs --prod --config stencil.config.ts",
18+
"build:react": "npm --prefix react run build",
19+
"build:vue": "npm --prefix vue run build"
5120
},
5221
"devDependencies": {
22+
"@ovhcloud/ods-common-scripts": "16.6.0",
5323
"@ovhcloud/ods-dev": "16.6.0"
5424
}
5525
}

‎packages/components/text/react/.gitignore ‎packages/components/react/.gitignore

File renamed without changes.

‎packages/components/text/react/.npmignore ‎packages/components/react/.npmignore

File renamed without changes.

‎packages/components/text/react/package.json ‎packages/components/react/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
2-
"name": "@ovhcloud/ods-component-text-react",
2+
"name": "@ovhcloud/ods-components-react",
33
"version": "16.6.0",
44
"private": true,
55
"description": "React specific wrapper for ods",
66
"keywords": [],
7+
"author": "OVH SAS",
78
"license": "Apache-2.0",
89
"scripts": {
910
"build": "npm run clean && npm run compile",
@@ -19,7 +20,7 @@
1920
"dist/"
2021
],
2122
"dependencies": {
22-
"@ovhcloud/ods-component-text": "16.6.0"
23+
"@ovhcloud/ods-components": "16.6.0"
2324
},
2425
"peerDependencies": {
2526
"react": ">=16.8.6",

‎packages/components/text/react/tsconfig.cjs.json ‎packages/components/react/tsconfig.cjs.json

File renamed without changes.

‎packages/components/text/vue/tsconfig.json ‎packages/components/react/tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": "../../tsconfig.vue.json",
2+
"extends": "../tsconfig.react.json",
33
"compilerOptions": {
44
"outDir": "dist/esm",
55
"declarationDir": "dist/types"

‎packages/components/src/form-field/src/components/osds-form-field/readme.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# osds-form-field
2+
3+
4+
5+
<!-- Auto Generated Below -->
6+
7+
8+
## Properties
9+
10+
| Property | Attribute | Description | Type | Default |
11+
| -------- | --------- | -------------------------------------------------------------------------- | ---------------------- | -------------------------- |
12+
| `error` | `error` | Indicates if the Form Field shows error or not | `string \| undefined` | `DEFAULT_ATTRIBUTE.error` |
13+
| `inline` | `inline` | Indicates if the Form Field is full width or not: see component principles | `boolean \| undefined` | `DEFAULT_ATTRIBUTE.inline` |
14+
15+
16+
## Slots
17+
18+
| Slot | Description |
19+
| ------------- | ----------------- |
20+
| `"(unnamed)"` | FormField content |
21+
22+
23+
## Dependencies
24+
25+
### Depends on
26+
27+
- [osds-text](../../../../text/src/components/osds-text)
28+
29+
### Graph
30+
```mermaid
31+
graph TD;
32+
osds-form-field --> osds-text
33+
style osds-form-field fill:#f9f,stroke:#333,stroke-width:4px
34+
```
35+
36+
----------------------------------------------
37+
38+
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/components/src/index.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export * from './components';
2+
3+
// export * from './button/src';
4+
// export * from './checkbox/src';
5+
// export * from './checkbox-button/src';
6+
// export * from './datagrid/src';
7+
// export * from './divider/src';
8+
// export * from './icon/src';
9+
// export * from './menu/src';
10+
// export * from './popover/src';
11+
export * from './text/src';

‎packages/components/src/link/src/components/osds-link/readme.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# osds-link
2+
3+
4+
5+
<!-- Auto Generated Below -->
6+
7+
8+
## Properties
9+
10+
| Property | Attribute | Description | Type | Default |
11+
| ---------------- | ---------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
12+
| `color` | `color` | Link color theme | `ODS_THEME_COLOR_INTENT.accent \| ODS_THEME_COLOR_INTENT.default \| ODS_THEME_COLOR_INTENT.error \| ODS_THEME_COLOR_INTENT.info \| ODS_THEME_COLOR_INTENT.primary \| ODS_THEME_COLOR_INTENT.promotion \| ODS_THEME_COLOR_INTENT.success \| ODS_THEME_COLOR_INTENT.text \| ODS_THEME_COLOR_INTENT.warning \| undefined` | `DEFAULT_ATTRIBUTE.color` |
13+
| `contrasted` | `contrasted` | Link design as contrasted version | `boolean \| undefined` | `DEFAULT_ATTRIBUTE.contrasted` |
14+
| `disabled` | `disabled` | Link should be disabled or not | `boolean \| undefined` | `DEFAULT_ATTRIBUTE.disabled` |
15+
| `download` | `download` | Link as download source | `string \| undefined` | `DEFAULT_ATTRIBUTE.download` |
16+
| `href` | `href` | Link URL | `string \| undefined` | `DEFAULT_ATTRIBUTE.href` |
17+
| `referrerpolicy` | `referrerpolicy` | Link referrer policy | `ODS_LINK_REFERRER_POLICY.noReferrer \| ODS_LINK_REFERRER_POLICY.noReferrerWhenDowngrade \| ODS_LINK_REFERRER_POLICY.origin \| ODS_LINK_REFERRER_POLICY.originWhenCrossOrigin \| ODS_LINK_REFERRER_POLICY.sameOrigin \| ODS_LINK_REFERRER_POLICY.strictOriginWhenCrossOrigin \| ODS_LINK_REFERRER_POLICY.unsafeUrl \| undefined` | `DEFAULT_ATTRIBUTE.referrerpolicy` |
18+
| `rel` | `rel` | Link relationship | `OdsHTMLAnchorElementRel.alternate \| OdsHTMLAnchorElementRel.author \| OdsHTMLAnchorElementRel.bookmark \| OdsHTMLAnchorElementRel.external \| OdsHTMLAnchorElementRel.help \| OdsHTMLAnchorElementRel.license \| OdsHTMLAnchorElementRel.me \| OdsHTMLAnchorElementRel.next \| OdsHTMLAnchorElementRel.nofollow \| OdsHTMLAnchorElementRel.noopener \| OdsHTMLAnchorElementRel.noreferrer \| OdsHTMLAnchorElementRel.opener \| OdsHTMLAnchorElementRel.prev \| OdsHTMLAnchorElementRel.search \| OdsHTMLAnchorElementRel.tag \| undefined` | `DEFAULT_ATTRIBUTE.rel` |
19+
| `target` | `target` | Link target type If href is set the default value `_self` is set | `OdsHTMLAnchorElementTarget._blank \| OdsHTMLAnchorElementTarget._parent \| OdsHTMLAnchorElementTarget._self \| OdsHTMLAnchorElementTarget._top \| undefined` | `DEFAULT_ATTRIBUTE.target` |
20+
| `type` | `type` | Link type (for download source) | `string \| undefined` | `DEFAULT_ATTRIBUTE.type` |
21+
22+
23+
## Slots
24+
25+
| Slot | Description |
26+
| ------------- | ------------------------ |
27+
| `"(unnamed)"` | Link content |
28+
| `"end"` | Fixed end link content |
29+
| `"start"` | Fixed start link content |
30+
31+
32+
## Shadow Parts
33+
34+
| Part | Description |
35+
| -------- | ----------- |
36+
| `"link"` | |
37+
38+
39+
----------------------------------------------
40+
41+
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/components/text/.gitignore ‎packages/components/src/text/.gitignore

File renamed without changes.

‎packages/components/text/.npmignore ‎packages/components/src/text/.npmignore

File renamed without changes.

‎packages/components/text/CHANGELOG.md ‎packages/components/src/text/CHANGELOG.md

File renamed without changes.

‎packages/components/text/THIRD-PARTY-LICENCES ‎packages/components/src/text/THIRD-PARTY-LICENCES

File renamed without changes.

‎packages/components/text/documentation/specifications/spec.md ‎packages/components/src/text/documentation/specifications/spec.md

File renamed without changes.

‎packages/components/text/documentation/specifications/specifications-text.mdx ‎packages/components/src/text/documentation/specifications/specifications-text.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/properties/sizes/usage.body.mdx ‎packages/components/src/text/documentation/usage-guidelines/properties/sizes/usage.body.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/properties/sizes/usage.button.mdx ‎packages/components/src/text/documentation/usage-guidelines/properties/sizes/usage.button.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/properties/sizes/usage.caption.mdx ‎packages/components/src/text/documentation/usage-guidelines/properties/sizes/usage.caption.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/properties/sizes/usage.heading.mdx ‎packages/components/src/text/documentation/usage-guidelines/properties/sizes/usage.heading.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/properties/sizes/usage.subheading.mdx ‎packages/components/src/text/documentation/usage-guidelines/properties/sizes/usage.subheading.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/properties/usage.colors.mdx ‎packages/components/src/text/documentation/usage-guidelines/properties/usage.colors.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/properties/usage.levels.mdx ‎packages/components/src/text/documentation/usage-guidelines/properties/usage.levels.mdx

File renamed without changes.

‎packages/components/text/documentation/usage-guidelines/usage.mdx ‎packages/components/src/text/documentation/usage-guidelines/usage.mdx

File renamed without changes.

‎packages/components/text/jest.config.ts ‎packages/components/src/text/jest.config.ts

File renamed without changes.

0 commit comments

Comments
 (0)