feat(scripts): update component generator for new arch

Author: dpellier

scripts/component-generator/plopfile.js

@@ -7,23 +7,15 @@ module.exports = function (plop) {
   const destinationPath = `${process.cwd()}/packages`;
   const packagePrefix = '@ovhcloud/ods';
 
-  plop.setActionType('yarn-install', function () {
+  plop.setActionType('yarn-install', function() {
     spawnSync('yarn', []);
   });
 
-  plop.setActionType('lerna-add-dependency', function (answers, config, plop) {
-    const componentsDirName = plop.getHelper('suffix-join')(answers.prefix, componentsBaseDirName);
-    const libPrefix = plop.getHelper('suffix-join')(answers.prefix, 'component');
-    const dependency = `${packagePrefix}-${libPrefix}-${answers.name}@${libVersion}`;
-
-    spawnSync('lerna', ['--scope', `${packagePrefix}-${componentsDirName}`, 'exec', '--', 'yarn', 'add', dependency]);
-  });
-
-  plop.setHelper('prefix-join', function (prefix, text) {
+  plop.setHelper('prefix-join', function(prefix, text) {
     return prefix ? `${prefix}-${text}` : text;
   });
 
-  plop.setHelper('suffix-join', function (suffix, text) {
+  plop.setHelper('suffix-join', function(suffix, text) {
     return suffix ? `${text}-${suffix}` : text;
   });
 
@@ -50,7 +42,7 @@ module.exports = function (plop) {
       type: 'input',
       name: 'name',
       message: 'Type the component name using kebab-case, without any "ods-" prefix (ex: text, search-bar, ...):',
-      validate: function(value) {
+      validate: function (value) {
         if (/.+/.test(value)) {
           return true;
         }
@@ -63,10 +55,14 @@ module.exports = function (plop) {
       templateFiles: 'templates/component/**/*',
       stripExtensions: ['hbs'],
       globOptions: { dot: true },
-      destination: `${destinationPath}/{{ suffix-join prefix "${componentsBaseDirName}" }}/{{name}}`,
+      destination: `${destinationPath}/{{ suffix-join prefix "${componentsBaseDirName}" }}/src/{{name}}`,
       data: {
         'component-version': libVersion,
       },
+    }, {
+      type: 'append',
+      path: `${destinationPath}/{{ suffix-join prefix "${componentsBaseDirName}" }}/src/index.ts`,
+      template: "export * from './{{name}}/src';",
     }, {
       type: 'addMany',
       base: 'templates/storybook',
@@ -76,8 +72,6 @@ module.exports = function (plop) {
       destination: `${destinationPath}/storybook/stories/{{ suffix-join prefix "${componentsBaseDirName}" }}/{{name}}`,
     }, {
       type: 'yarn-install',
-    }, {
-      type: 'lerna-add-dependency',
     }],
   });
 };

scripts/component-generator/templates/component/package.json.hbs

@@ -1,6 +1,7 @@
 {
   "name": "@ovhcloud/ods-component-{{> component-name }}",
   "version": "{{ component-version }}",
+  "private": true,
   "description": "ODS {{> componentName }} component",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -11,13 +12,8 @@
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "scripts": {
-    "build:ci": "build-stencil",
-    "build:prod": "build-stencil prod",
-    "build:react": "npm --prefix react run build",
-    "build:stencil": "stencil build --prod --config stencil.config.ts",
-    "build:vue": "npm --prefix vue run build",
     "clean": "rimraf .stencil coverage custom-elements custom-elements-bundle dist docs-api loader screenshot www",
-    "doc": "typedoc --json ./docs-api/typedoc.json --pretty && node ../../../scripts/generate-typedoc-md.js",
+    "doc": "typedoc --json ./docs-api/typedoc.json --pretty && node ../../../../scripts/generate-typedoc-md.js",
     "doc:api": "typedoc",
     "generate:licence": "npx generate-license-file --input package.json --output THIRD-PARTY-LICENCES --overwrite",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
@@ -38,7 +34,6 @@
     "@ovhcloud/ods-common-theming": "{{ component-version }}"
   },
   "devDependencies": {
-    "@ovhcloud/ods-common-scripts": "{{ component-version }}",
     "@ovhcloud/ods-common-testing": "{{ component-version }}",
     "@ovhcloud/ods-stencil-dev": "{{ component-version }}"
   }

scripts/component-generator/templates/component/react/.gitignore

@@ -1,7 +1,7 @@
 /**
- * Declare here all all the external ODS component that you need to run the current component
+ * Import here all the external ODS component that you need to run the current component
  * when running dev server (yarn start) or e2e tests
  *
  * ex:
- *   import '@ovhcloud/ods-component-text';
-  */
+ *   import '../../text/src';
+ */

scripts/component-generator/templates/component/react/.npmignore

@@ -5,7 +5,6 @@ import jestConfig from './jest.config';
 export const config = getStencilConfig({
   args: process.argv.slice(2),
   componentCorePackage: '@ovhcloud/ods-component-{{> component-name }}',
-  excludeComponents: [],
   jestConfig,
   namespace: 'osds-{{> component-name }}',
 });

scripts/component-generator/templates/component/react/CHANGELOG.md

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../../tsconfig.json",
   "include": [
     "src"
   ]

scripts/component-generator/templates/component/react/package.json.hbs

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.prod.json",
+  "extends": "../../tsconfig.prod.json",
   "include": [
     "src"
   ]

scripts/component-generator/templates/component/react/tsconfig.cjs.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.test.json",
+  "extends": "../../tsconfig.test.json",
   "include": [
     "src"
   ]

scripts/component-generator/templates/component/react/tsconfig.json

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import Specifications from '@ovhcloud/ods-{{> component-dir}}/{{ name }}/documentation/specifications/specifications-{{> component-name }}.mdx';
+import Specifications from '@ovhcloud/ods-{{> component-dir}}/src/{{ name }}/documentation/specifications/specifications-{{> component-name }}.mdx';
 
 <Meta title="ODS Components/Content/{{> componentName }} [{{ level }}]/Specifications" />
 

scripts/component-generator/templates/component/src/globals.ts

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import Usage from '@ovhcloud/ods-{{> component-dir}}/{{ name }}/documentation/usage-guidelines/usage.mdx';
+import Usage from '@ovhcloud/ods-{{> component-dir}}/src/{{ name }}/documentation/usage-guidelines/usage.mdx';
 
 <Meta title="ODS Components/Content/{{> componentName }} [{{ level }}]/Usage Guidelines" />
 

scripts/component-generator/templates/component/stencil.config.ts.hbs

@@ -1,8 +1,8 @@
-import { defineCustomElements } from '@ovhcloud/ods-{{> component-dir}}/{{ name }}/loader';
+import { defineCustomElement } from '@ovhcloud/ods-{{> component-dir}}/dist/components/osds-{{ name }}';
 import { html } from 'lit-html';
 import { extractArgTypes, extractStoryParams, getTagAttributes } from '../../../core/componentHTMLUtils';
 
-defineCustomElements();
+defineCustomElement();
 
 /* Default story parameters  */
 const storyParams = {};