From 6c02686a2e94e0b7360b1f288fe694ee5852c9ee Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 12 Oct 2022 11:36:26 +0200 Subject: [PATCH] Move all templates out of cli into renderers --- code/.eslintrc.js | 7 ++ code/frameworks/angular/package.json | 14 ++-- code/frameworks/angular/preset.js | 2 +- code/frameworks/angular/renderer.d.ts | 2 +- code/frameworks/angular/renderer.js | 2 +- .../server/framework-preset-angular-docs.ts | 2 +- .../angular/template/cli/.eslintrc.json | 5 ++ .../angular/template/cli}/Button.stories.ts | 0 .../angular/template/cli}/Header.stories.ts | 0 .../angular/template/cli}/Page.stories.ts | 0 .../angular/template/cli}/User.ts | 0 .../angular/template/cli}/button.component.ts | 0 .../angular/template/cli}/header.component.ts | 0 .../angular/template/cli}/page.component.ts | 0 .../doc-button/doc-button.component.ts | 2 +- .../doc-injectable/doc-injectable.service.ts | 2 +- code/frameworks/angular/tsconfig.build.json | 21 ++++++ code/frameworks/angular/tsconfig.json | 16 +---- code/frameworks/ember/package.json | 1 + .../ember/template/cli}/1-Button.stories.js | 0 code/frameworks/nextjs/package.json | 1 + .../nextjs/template/cli/.eslintrc.json | 7 ++ .../nextjs/template/cli}/js/Button.jsx | 0 .../template/cli}/js/Button.stories.jsx | 0 .../nextjs/template/cli}/js/Header.jsx | 4 +- .../template/cli}/js/Header.stories.jsx | 0 .../template/cli}/js/Introduction.stories.mdx | 0 .../nextjs/template/cli}/js/Page.jsx | 6 +- .../nextjs/template/cli}/js/Page.stories.jsx | 0 .../template/cli}/ts/Button.stories.tsx | 2 +- .../nextjs/template/cli}/ts/Button.tsx | 0 .../template/cli}/ts/Header.stories.tsx | 0 .../nextjs/template/cli}/ts/Header.tsx | 0 .../template/cli}/ts/Introduction.stories.mdx | 0 .../nextjs/template/cli}/ts/Page.stories.tsx | 0 .../nextjs/template/cli}/ts/Page.tsx | 6 +- code/frameworks/nextjs/tsconfig.json | 2 +- .../aurelia/1-Button.stories.ts | 49 ------------- code/lib/cli/rendererAssets/aurelia/button.ts | 28 -------- .../marionette/index.stories.js | 20 ------ .../rendererAssets/marko/1-Button.stories.js | 24 ------- .../lib/cli/rendererAssets/marko/Button.marko | 13 ---- code/lib/cli/rendererAssets/mithril/Button.js | 22 ------ .../rendererAssets/mithril/Button.stories.js | 43 ------------ code/lib/cli/rendererAssets/mithril/Header.js | 51 -------------- .../rendererAssets/mithril/Header.stories.js | 20 ------ code/lib/cli/rendererAssets/mithril/Page.js | 70 ------------------- .../rendererAssets/mithril/Page.stories.js | 24 ------- code/lib/cli/rendererAssets/rax/Button.js | 26 ------- .../cli/rendererAssets/rax/Button.stories.js | 40 ----------- code/lib/cli/rendererAssets/rax/Header.js | 44 ------------ .../cli/rendererAssets/rax/Header.stories.js | 17 ----- code/lib/cli/rendererAssets/rax/Page.js | 64 ----------------- .../cli/rendererAssets/rax/Page.stories.js | 21 ------ .../rendererAssets/riot/1-Button.stories.js | 52 -------------- code/lib/cli/rendererAssets/riot/MyButton.tag | 24 ------- .../src/automigrate/fixes/angular12.test.ts | 13 +++- .../automigrate/fixes/builder-vite.test.ts | 13 +++- .../cli/src/automigrate/fixes/cra5.test.ts | 13 +++- .../automigrate/fixes/eslint-plugin.test.ts | 10 ++- .../automigrate/fixes/new-frameworks.test.ts | 13 +++- .../cli/src/automigrate/fixes/npm7.test.ts | 2 +- .../src/automigrate/fixes/sb-scripts.test.ts | 6 +- .../cli/src/automigrate/fixes/vue3.test.ts | 6 +- .../src/automigrate/fixes/webpack5.test.ts | 13 +++- code/lib/cli/src/detect.test.ts | 42 ++++++----- code/lib/cli/src/detect.ts | 11 ++- code/lib/cli/src/dirs.ts | 9 ++- code/lib/cli/src/generators/ANGULAR/index.ts | 4 +- code/lib/cli/src/generators/AURELIA/index.ts | 4 +- .../cli/src/generators/REACT_NATIVE/index.ts | 4 +- code/lib/cli/src/generators/SERVER/index.ts | 4 +- code/lib/cli/src/generators/baseGenerator.ts | 10 +-- code/lib/cli/src/helpers.test.ts | 21 +++--- code/lib/cli/src/helpers.ts | 38 ++++++---- .../src/js-package-manager/NPMProxy.test.ts | 4 ++ .../src/js-package-manager/Yarn1Proxy.test.ts | 4 ++ .../src/js-package-manager/Yarn2Proxy.test.ts | 4 ++ code/lib/cli/src/project_types.ts | 3 +- .../core-server/src/utils/summarizeIndex.ts | 2 +- code/package.json | 1 + code/renderers/html/package.json | 1 + .../html/template/cli/.eslintrc.json | 6 ++ .../html/template/cli}/js/Button.js | 0 .../html/template/cli}/js/Button.stories.js | 0 .../html/template/cli}/js/Header.js | 0 .../html/template/cli}/js/Header.stories.js | 0 .../html/template/cli}/js/Page.js | 0 .../html/template/cli}/js/Page.stories.js | 0 .../html/template/cli}/ts/Button.stories.ts | 2 +- .../html/template/cli}/ts/Button.ts | 0 .../html/template/cli}/ts/Header.stories.ts | 4 +- .../html/template/cli}/ts/Header.ts | 0 .../html/template/cli}/ts/Page.stories.ts | 2 +- .../html/template/cli}/ts/Page.ts | 0 code/renderers/html/tsconfig.json | 2 +- code/renderers/preact/package.json | 1 + .../preact/template/cli/.eslintrc.json | 7 ++ .../preact/template/cli}/Button.jsx | 0 .../preact/template/cli}/Button.stories.jsx | 0 .../preact/template/cli}/Header.jsx | 4 +- .../preact/template/cli}/Header.stories.jsx | 0 .../preact/template/cli}/Page.jsx | 7 +- .../preact/template/cli}/Page.stories.jsx | 0 code/renderers/preact/tsconfig.json | 2 +- code/renderers/react/package.json | 1 + .../react/template/cli/.eslintrc.json | 5 ++ .../react/template/cli}/js/Button.jsx | 0 .../react/template/cli}/js/Button.stories.jsx | 0 .../react/template/cli}/js/Header.jsx | 4 +- .../react/template/cli}/js/Header.stories.jsx | 0 .../react/template/cli}/js/Page.jsx | 6 +- .../react/template/cli}/js/Page.stories.jsx | 0 .../react/template/cli}/ts/Button.stories.tsx | 0 .../react/template/cli}/ts/Button.tsx | 0 .../react/template/cli}/ts/Header.stories.tsx | 0 .../react/template/cli}/ts/Header.tsx | 0 .../react/template/cli}/ts/Page.stories.tsx | 0 .../react/template/cli}/ts/Page.tsx | 2 +- code/renderers/react/tsconfig.json | 5 +- code/renderers/server/package.json | 1 + .../server/template/cli}/button.stories.json | 0 .../server/template/cli}/header.stories.json | 0 .../server/template/cli}/page.stories.json | 0 code/renderers/server/tsconfig.json | 2 +- code/renderers/svelte/package.json | 1 + .../svelte/template/cli}/Button.stories.js | 0 .../svelte/template/cli}/Button.svelte | 0 .../svelte/template/cli}/Header.stories.js | 0 .../svelte/template/cli}/Header.svelte | 0 .../svelte/template/cli}/Page.stories.js | 0 .../svelte/template/cli}/Page.svelte | 0 code/renderers/svelte/tsconfig.json | 2 +- code/renderers/vue/package.json | 1 + .../vue/template/cli}/Button.stories.js | 0 .../vue/template/cli}/Button.vue | 0 .../vue/template/cli}/Header.stories.js | 0 .../vue/template/cli}/Header.vue | 0 .../vue/template/cli}/Page.stories.js | 0 .../vue/template/cli}/Page.vue | 0 code/renderers/vue/tsconfig.json | 5 +- code/renderers/vue3/package.json | 1 + .../vue3/template/cli}/Button.stories.js | 0 .../vue3/template/cli}/Button.vue | 0 .../vue3/template/cli}/Header.stories.js | 0 .../vue3/template/cli}/Header.vue | 0 .../vue3/template/cli}/Page.stories.js | 0 .../vue3/template/cli}/Page.vue | 0 code/renderers/vue3/tsconfig.json | 5 +- code/renderers/web-components/package.json | 1 + .../template/cli/.eslintrc.json | 5 ++ .../web-components/template/cli}/js/Button.js | 0 .../template/cli}/js/Button.stories.js | 0 .../web-components/template/cli}/js/Header.js | 0 .../template/cli}/js/Header.stories.js | 0 .../web-components/template/cli}/js/Page.js | 0 .../template/cli}/js/Page.stories.js | 0 .../template/cli}/ts/Button.stories.ts | 0 .../web-components/template/cli}/ts/Button.ts | 0 .../template/cli}/ts/Header.stories.ts | 4 +- .../web-components/template/cli}/ts/Header.ts | 6 +- .../template/cli}/ts/Page.stories.ts | 0 .../web-components/template/cli}/ts/Page.ts | 6 +- code/renderers/web-components/tsconfig.json | 2 +- code/yarn.lock | 12 ++++ package.json | 3 +- 166 files changed, 341 insertions(+), 787 deletions(-) create mode 100644 code/frameworks/angular/template/cli/.eslintrc.json rename code/{lib/cli/rendererAssets/angular => frameworks/angular/template/cli}/Button.stories.ts (100%) rename code/{lib/cli/rendererAssets/angular => frameworks/angular/template/cli}/Header.stories.ts (100%) rename code/{lib/cli/rendererAssets/angular => frameworks/angular/template/cli}/Page.stories.ts (100%) rename code/{lib/cli/rendererAssets/angular => frameworks/angular/template/cli}/User.ts (100%) rename code/{lib/cli/rendererAssets/angular => frameworks/angular/template/cli}/button.component.ts (100%) rename code/{lib/cli/rendererAssets/angular => frameworks/angular/template/cli}/header.component.ts (100%) rename code/{lib/cli/rendererAssets/angular => frameworks/angular/template/cli}/page.component.ts (100%) create mode 100644 code/frameworks/angular/tsconfig.build.json rename code/{lib/cli/rendererAssets/ember => frameworks/ember/template/cli}/1-Button.stories.js (100%) create mode 100644 code/frameworks/nextjs/template/cli/.eslintrc.json rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/js/Button.jsx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/js/Button.stories.jsx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/js/Header.jsx (95%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/js/Header.stories.jsx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/js/Introduction.stories.mdx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/js/Page.jsx (93%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/js/Page.stories.jsx (100%) rename code/{lib/cli/rendererAssets/react => frameworks/nextjs/template/cli}/ts/Button.stories.tsx (97%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/ts/Button.tsx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/ts/Header.stories.tsx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/ts/Header.tsx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/ts/Introduction.stories.mdx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/ts/Page.stories.tsx (100%) rename code/{lib/cli/rendererAssets/nextjs => frameworks/nextjs/template/cli}/ts/Page.tsx (94%) delete mode 100644 code/lib/cli/rendererAssets/aurelia/1-Button.stories.ts delete mode 100644 code/lib/cli/rendererAssets/aurelia/button.ts delete mode 100644 code/lib/cli/rendererAssets/marionette/index.stories.js delete mode 100644 code/lib/cli/rendererAssets/marko/1-Button.stories.js delete mode 100644 code/lib/cli/rendererAssets/marko/Button.marko delete mode 100644 code/lib/cli/rendererAssets/mithril/Button.js delete mode 100644 code/lib/cli/rendererAssets/mithril/Button.stories.js delete mode 100644 code/lib/cli/rendererAssets/mithril/Header.js delete mode 100644 code/lib/cli/rendererAssets/mithril/Header.stories.js delete mode 100644 code/lib/cli/rendererAssets/mithril/Page.js delete mode 100644 code/lib/cli/rendererAssets/mithril/Page.stories.js delete mode 100644 code/lib/cli/rendererAssets/rax/Button.js delete mode 100644 code/lib/cli/rendererAssets/rax/Button.stories.js delete mode 100644 code/lib/cli/rendererAssets/rax/Header.js delete mode 100644 code/lib/cli/rendererAssets/rax/Header.stories.js delete mode 100644 code/lib/cli/rendererAssets/rax/Page.js delete mode 100644 code/lib/cli/rendererAssets/rax/Page.stories.js delete mode 100644 code/lib/cli/rendererAssets/riot/1-Button.stories.js delete mode 100644 code/lib/cli/rendererAssets/riot/MyButton.tag create mode 100644 code/renderers/html/template/cli/.eslintrc.json rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/js/Button.js (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/js/Button.stories.js (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/js/Header.js (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/js/Header.stories.js (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/js/Page.js (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/js/Page.stories.js (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/ts/Button.stories.ts (95%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/ts/Button.ts (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/ts/Header.stories.ts (95%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/ts/Header.ts (100%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/ts/Page.stories.ts (92%) rename code/{lib/cli/rendererAssets/html => renderers/html/template/cli}/ts/Page.ts (100%) create mode 100644 code/renderers/preact/template/cli/.eslintrc.json rename code/{lib/cli/rendererAssets/preact => renderers/preact/template/cli}/Button.jsx (100%) rename code/{lib/cli/rendererAssets/preact => renderers/preact/template/cli}/Button.stories.jsx (100%) rename code/{lib/cli/rendererAssets/preact => renderers/preact/template/cli}/Header.jsx (95%) rename code/{lib/cli/rendererAssets/preact => renderers/preact/template/cli}/Header.stories.jsx (100%) rename code/{lib/cli/rendererAssets/preact => renderers/preact/template/cli}/Page.jsx (94%) rename code/{lib/cli/rendererAssets/preact => renderers/preact/template/cli}/Page.stories.jsx (100%) create mode 100644 code/renderers/react/template/cli/.eslintrc.json rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/js/Button.jsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/js/Button.stories.jsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/js/Header.jsx (95%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/js/Header.stories.jsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/js/Page.jsx (94%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/js/Page.stories.jsx (100%) rename code/{lib/cli/rendererAssets/nextjs => renderers/react/template/cli}/ts/Button.stories.tsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/ts/Button.tsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/ts/Header.stories.tsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/ts/Header.tsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/ts/Page.stories.tsx (100%) rename code/{lib/cli/rendererAssets/react => renderers/react/template/cli}/ts/Page.tsx (96%) rename code/{lib/cli/rendererAssets/server => renderers/server/template/cli}/button.stories.json (100%) rename code/{lib/cli/rendererAssets/server => renderers/server/template/cli}/header.stories.json (100%) rename code/{lib/cli/rendererAssets/server => renderers/server/template/cli}/page.stories.json (100%) rename code/{lib/cli/rendererAssets/svelte => renderers/svelte/template/cli}/Button.stories.js (100%) rename code/{lib/cli/rendererAssets/svelte => renderers/svelte/template/cli}/Button.svelte (100%) rename code/{lib/cli/rendererAssets/svelte => renderers/svelte/template/cli}/Header.stories.js (100%) rename code/{lib/cli/rendererAssets/svelte => renderers/svelte/template/cli}/Header.svelte (100%) rename code/{lib/cli/rendererAssets/svelte => renderers/svelte/template/cli}/Page.stories.js (100%) rename code/{lib/cli/rendererAssets/svelte => renderers/svelte/template/cli}/Page.svelte (100%) rename code/{lib/cli/rendererAssets/vue => renderers/vue/template/cli}/Button.stories.js (100%) rename code/{lib/cli/rendererAssets/vue => renderers/vue/template/cli}/Button.vue (100%) rename code/{lib/cli/rendererAssets/vue => renderers/vue/template/cli}/Header.stories.js (100%) rename code/{lib/cli/rendererAssets/vue => renderers/vue/template/cli}/Header.vue (100%) rename code/{lib/cli/rendererAssets/vue => renderers/vue/template/cli}/Page.stories.js (100%) rename code/{lib/cli/rendererAssets/vue => renderers/vue/template/cli}/Page.vue (100%) rename code/{lib/cli/rendererAssets/vue3 => renderers/vue3/template/cli}/Button.stories.js (100%) rename code/{lib/cli/rendererAssets/vue3 => renderers/vue3/template/cli}/Button.vue (100%) rename code/{lib/cli/rendererAssets/vue3 => renderers/vue3/template/cli}/Header.stories.js (100%) rename code/{lib/cli/rendererAssets/vue3 => renderers/vue3/template/cli}/Header.vue (100%) rename code/{lib/cli/rendererAssets/vue3 => renderers/vue3/template/cli}/Page.stories.js (100%) rename code/{lib/cli/rendererAssets/vue3 => renderers/vue3/template/cli}/Page.vue (100%) create mode 100644 code/renderers/web-components/template/cli/.eslintrc.json rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/js/Button.js (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/js/Button.stories.js (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/js/Header.js (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/js/Header.stories.js (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/js/Page.js (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/js/Page.stories.js (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/ts/Button.stories.ts (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/ts/Button.ts (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/ts/Header.stories.ts (91%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/ts/Header.ts (96%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/ts/Page.stories.ts (100%) rename code/{lib/cli/rendererAssets/web-components => renderers/web-components/template/cli}/ts/Page.ts (97%) diff --git a/code/.eslintrc.js b/code/.eslintrc.js index f8ebbcc1b788..a22b9fd2de0e 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -150,5 +150,12 @@ module.exports = { 'no-undef': 'off', // ignore "window" undef errors }, }, + { + // Because those templates reference css files in other directory. + files: ['**/template/cli/**/*'], + rules: { + 'import/no-unresolved': 'off', + }, + }, ], }; diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 591cd5c96194..3a8c328cdd9d 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -20,18 +20,18 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/types/index.js", - "module": "dist/types/index.js", - "types": "dist/types/index.d.ts", + "main": "dist/index.js", + "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" ], "scripts": { - "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "node ../../../scripts/prepare.js" + "check": "../../../scripts/node_modules/.bin/tsc", + "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\"" }, "dependencies": { "@storybook/addons": "7.0.0-alpha.45", @@ -77,11 +77,13 @@ "@angular/platform-browser": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@nrwl/workspace": "14.6.1", + "@types/rimraf": "^3.0.2", "@types/tmp": "^0.2.3", "cross-spawn": "^7.0.3", "jest": "^27.5.1", "jest-preset-angular": "^12.0.0", "jest-specific-snapshot": "^5.0.0", + "rimraf": "^3.0.2", "tmp": "^0.2.1", "typescript": "~4.6.3", "webpack": "5", @@ -119,6 +121,6 @@ "publishConfig": { "access": "public" }, - "builders": "dist/types/builders/builders.json", + "builders": "dist/builders/builders.json", "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" } diff --git a/code/frameworks/angular/preset.js b/code/frameworks/angular/preset.js index 4e043393776c..a83f95279e7f 100644 --- a/code/frameworks/angular/preset.js +++ b/code/frameworks/angular/preset.js @@ -1 +1 @@ -module.exports = require('./dist/types/preset'); +module.exports = require('./dist/preset'); diff --git a/code/frameworks/angular/renderer.d.ts b/code/frameworks/angular/renderer.d.ts index 9b8e24508eb3..1bea89cf1a7e 100644 --- a/code/frameworks/angular/renderer.d.ts +++ b/code/frameworks/angular/renderer.d.ts @@ -1 +1 @@ -export * from './dist/types/renderer.d'; +export * from './dist/renderer.d'; diff --git a/code/frameworks/angular/renderer.js b/code/frameworks/angular/renderer.js index 9b405c226f4e..42130de99ec7 100644 --- a/code/frameworks/angular/renderer.js +++ b/code/frameworks/angular/renderer.js @@ -1 +1 @@ -module.exports = require('./dist/types/renderer'); +module.exports = require('./dist/renderer'); diff --git a/code/frameworks/angular/src/server/framework-preset-angular-docs.ts b/code/frameworks/angular/src/server/framework-preset-angular-docs.ts index f1574ba7263f..8fcb77e3c3b7 100644 --- a/code/frameworks/angular/src/server/framework-preset-angular-docs.ts +++ b/code/frameworks/angular/src/server/framework-preset-angular-docs.ts @@ -4,5 +4,5 @@ import { hasDocsOrControls } from '@storybook/docs-tools'; export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; - return [...entry, path.join(__dirname, '../../../dist/types/client/docs/config')]; + return [...entry, path.join(__dirname, '../../../dist/client/docs/config')]; }; diff --git a/code/frameworks/angular/template/cli/.eslintrc.json b/code/frameworks/angular/template/cli/.eslintrc.json new file mode 100644 index 000000000000..57c1b3246cb7 --- /dev/null +++ b/code/frameworks/angular/template/cli/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "@typescript-eslint/consistent-type-imports": ["error", { "disallowTypeAnnotations": false }] + } +} diff --git a/code/lib/cli/rendererAssets/angular/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts similarity index 100% rename from code/lib/cli/rendererAssets/angular/Button.stories.ts rename to code/frameworks/angular/template/cli/Button.stories.ts diff --git a/code/lib/cli/rendererAssets/angular/Header.stories.ts b/code/frameworks/angular/template/cli/Header.stories.ts similarity index 100% rename from code/lib/cli/rendererAssets/angular/Header.stories.ts rename to code/frameworks/angular/template/cli/Header.stories.ts diff --git a/code/lib/cli/rendererAssets/angular/Page.stories.ts b/code/frameworks/angular/template/cli/Page.stories.ts similarity index 100% rename from code/lib/cli/rendererAssets/angular/Page.stories.ts rename to code/frameworks/angular/template/cli/Page.stories.ts diff --git a/code/lib/cli/rendererAssets/angular/User.ts b/code/frameworks/angular/template/cli/User.ts similarity index 100% rename from code/lib/cli/rendererAssets/angular/User.ts rename to code/frameworks/angular/template/cli/User.ts diff --git a/code/lib/cli/rendererAssets/angular/button.component.ts b/code/frameworks/angular/template/cli/button.component.ts similarity index 100% rename from code/lib/cli/rendererAssets/angular/button.component.ts rename to code/frameworks/angular/template/cli/button.component.ts diff --git a/code/lib/cli/rendererAssets/angular/header.component.ts b/code/frameworks/angular/template/cli/header.component.ts similarity index 100% rename from code/lib/cli/rendererAssets/angular/header.component.ts rename to code/frameworks/angular/template/cli/header.component.ts diff --git a/code/lib/cli/rendererAssets/angular/page.component.ts b/code/frameworks/angular/template/cli/page.component.ts similarity index 100% rename from code/lib/cli/rendererAssets/angular/page.component.ts rename to code/frameworks/angular/template/cli/page.component.ts diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts index 085a6fc568b0..dbcf44c06ec5 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts @@ -68,7 +68,7 @@ export class DocButtonComponent { /** Test null default value. */ @Input() - public aNullValue = null; + public aNullValue: string | null = null; /** Test null default value. */ @Input() diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts index b6ad136fec33..e269ceae5a95 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts @@ -21,7 +21,7 @@ export class DocInjectableService { /** * Get posts from Backend. */ - getPosts() { + getPosts(): unknown[] { return []; } } diff --git a/code/frameworks/angular/tsconfig.build.json b/code/frameworks/angular/tsconfig.build.json new file mode 100644 index 000000000000..e6ebc0167a55 --- /dev/null +++ b/code/frameworks/angular/tsconfig.build.json @@ -0,0 +1,21 @@ +{ + "extends": "../../tsconfig.json", + "compileOnSave": false, + "compilerOptions": { + "target": "ES2020", + "module": "CommonJS", + "lib": ["es2020", "dom"], + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + "declaration": true, + "outDir": "dist", + "types": ["node"], + "skipLibCheck": true, + "resolveJsonModule": true, + "allowJs": true, + "pretty": true, + "noErrorTruncation": true, + "listEmittedFiles": false + }, + "include": ["src/**/*", "src/**/*.json"] +} diff --git a/code/frameworks/angular/tsconfig.json b/code/frameworks/angular/tsconfig.json index b39fe09252f0..9779c817bf5a 100644 --- a/code/frameworks/angular/tsconfig.json +++ b/code/frameworks/angular/tsconfig.json @@ -1,17 +1,7 @@ { - "extends": "../../tsconfig.json", - "compileOnSave": false, + "extends": "./tsconfig.build.json", "compilerOptions": { - "target": "ES2020", - "module": "CommonJS", - "lib": ["es2020", "dom"], - "experimentalDecorators": true, - "emitDecoratorMetadata": true, - "outDir": "dist", - "types": ["node"], - "skipLibCheck": true, - "resolveJsonModule": true, - "allowJs": true + "noEmit": true }, - "include": ["src/**/*", "src/**/*.json"] + "include": ["src/**/*", "src/**/*.json", "template/**/*"] } diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index d22823d0629f..cf810033ce84 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -21,6 +21,7 @@ "types": "dist/types/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/lib/cli/rendererAssets/ember/1-Button.stories.js b/code/frameworks/ember/template/cli/1-Button.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/ember/1-Button.stories.js rename to code/frameworks/ember/template/cli/1-Button.stories.js diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 4b83dc862fbe..86579205d5e7 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -48,6 +48,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "types/**/*", "README.md", "*.js", diff --git a/code/frameworks/nextjs/template/cli/.eslintrc.json b/code/frameworks/nextjs/template/cli/.eslintrc.json new file mode 100644 index 000000000000..2ce44cb74ab3 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "rules": { + "import/no-extraneous-dependencies": "off", + "import/extensions": "off", + "react/no-unknown-property": "off" + } +} diff --git a/code/lib/cli/rendererAssets/nextjs/js/Button.jsx b/code/frameworks/nextjs/template/cli/js/Button.jsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Button.jsx rename to code/frameworks/nextjs/template/cli/js/Button.jsx diff --git a/code/lib/cli/rendererAssets/nextjs/js/Button.stories.jsx b/code/frameworks/nextjs/template/cli/js/Button.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Button.stories.jsx rename to code/frameworks/nextjs/template/cli/js/Button.stories.jsx diff --git a/code/lib/cli/rendererAssets/nextjs/js/Header.jsx b/code/frameworks/nextjs/template/cli/js/Header.jsx similarity index 95% rename from code/lib/cli/rendererAssets/nextjs/js/Header.jsx rename to code/frameworks/nextjs/template/cli/js/Header.jsx index 59787aed890e..3862422ed8ec 100644 --- a/code/lib/cli/rendererAssets/nextjs/js/Header.jsx +++ b/code/frameworks/nextjs/template/cli/js/Header.jsx @@ -46,7 +46,9 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( ); Header.propTypes = { - user: PropTypes.shape({}), + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), onLogin: PropTypes.func.isRequired, onLogout: PropTypes.func.isRequired, onCreateAccount: PropTypes.func.isRequired, diff --git a/code/lib/cli/rendererAssets/nextjs/js/Header.stories.jsx b/code/frameworks/nextjs/template/cli/js/Header.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Header.stories.jsx rename to code/frameworks/nextjs/template/cli/js/Header.stories.jsx diff --git a/code/lib/cli/rendererAssets/nextjs/js/Introduction.stories.mdx b/code/frameworks/nextjs/template/cli/js/Introduction.stories.mdx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Introduction.stories.mdx rename to code/frameworks/nextjs/template/cli/js/Introduction.stories.mdx diff --git a/code/lib/cli/rendererAssets/nextjs/js/Page.jsx b/code/frameworks/nextjs/template/cli/js/Page.jsx similarity index 93% rename from code/lib/cli/rendererAssets/nextjs/js/Page.jsx rename to code/frameworks/nextjs/template/cli/js/Page.jsx index c5fffe953be5..1d87e18a453d 100644 --- a/code/lib/cli/rendererAssets/nextjs/js/Page.jsx +++ b/code/frameworks/nextjs/template/cli/js/Page.jsx @@ -41,7 +41,11 @@ export const Page = () => {

Get a guided tutorial on component-driven development at{' '} - + Storybook tutorials . Read more in the{' '} diff --git a/code/lib/cli/rendererAssets/nextjs/js/Page.stories.jsx b/code/frameworks/nextjs/template/cli/js/Page.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Page.stories.jsx rename to code/frameworks/nextjs/template/cli/js/Page.stories.jsx diff --git a/code/lib/cli/rendererAssets/react/ts/Button.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx similarity index 97% rename from code/lib/cli/rendererAssets/react/ts/Button.stories.tsx rename to code/frameworks/nextjs/template/cli/ts/Button.stories.tsx index 435f55a9ef58..1b371df29f48 100644 --- a/code/lib/cli/rendererAssets/react/ts/Button.stories.tsx +++ b/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Button.tsx b/code/frameworks/nextjs/template/cli/ts/Button.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Button.tsx rename to code/frameworks/nextjs/template/cli/ts/Button.tsx diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Header.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Header.stories.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Header.stories.tsx rename to code/frameworks/nextjs/template/cli/ts/Header.stories.tsx diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Header.tsx b/code/frameworks/nextjs/template/cli/ts/Header.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Header.tsx rename to code/frameworks/nextjs/template/cli/ts/Header.tsx diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Introduction.stories.mdx b/code/frameworks/nextjs/template/cli/ts/Introduction.stories.mdx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Introduction.stories.mdx rename to code/frameworks/nextjs/template/cli/ts/Introduction.stories.mdx diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Page.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Page.stories.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Page.stories.tsx rename to code/frameworks/nextjs/template/cli/ts/Page.stories.tsx diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Page.tsx b/code/frameworks/nextjs/template/cli/ts/Page.tsx similarity index 94% rename from code/lib/cli/rendererAssets/nextjs/ts/Page.tsx rename to code/frameworks/nextjs/template/cli/ts/Page.tsx index 522d34294ae2..ed709f9a51cf 100644 --- a/code/lib/cli/rendererAssets/nextjs/ts/Page.tsx +++ b/code/frameworks/nextjs/template/cli/ts/Page.tsx @@ -45,7 +45,11 @@ export const Page: React.VFC = () => {

Get a guided tutorial on component-driven development at{' '} - + Storybook tutorials . Read more in the{' '} diff --git a/code/frameworks/nextjs/tsconfig.json b/code/frameworks/nextjs/tsconfig.json index 76d943e5d483..4461940be450 100644 --- a/code/frameworks/nextjs/tsconfig.json +++ b/code/frameworks/nextjs/tsconfig.json @@ -5,6 +5,6 @@ "resolveJsonModule": true, "skipLibCheck": true }, - "include": ["src/**/*"], + "include": ["src/**/*", "template/**/*"], "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"] } diff --git a/code/lib/cli/rendererAssets/aurelia/1-Button.stories.ts b/code/lib/cli/rendererAssets/aurelia/1-Button.stories.ts deleted file mode 100644 index edefbdafbce7..000000000000 --- a/code/lib/cli/rendererAssets/aurelia/1-Button.stories.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import { linkTo } from '@storybook/addon-links'; - -import Button from './button'; - -export default { - title: 'Button', - component: Button, - argTypes: { - label: { control: 'text' }, - }, -}; - -const Template = (args) => ({ - component: Button, - props: args, -}); - -export const Text = Template.bind({}); -Text.args = { - label: 'Button', - onClick: action('onClick'), -}; - -export const Emoji = Template.bind({}); -Emoji.args = { - label: '😀 😎 👍 💯', -}; - -export const TextWithAction = () => ({ - component: Button, - props: { - label: 'Trigger Action', - onClick: () => action('This was clicked')(), - }, -}); - -TextWithAction.storyName = 'With an action'; -TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; - -export const ButtonWithLinkToAnotherStory = () => ({ - component: Button, - props: { - label: 'Go to Welcome Story', - onClick: linkTo('example-introduction--page'), - }, -}); - -ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/code/lib/cli/rendererAssets/aurelia/button.ts b/code/lib/cli/rendererAssets/aurelia/button.ts deleted file mode 100644 index 0c0f67b462dd..000000000000 --- a/code/lib/cli/rendererAssets/aurelia/button.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { customElement, bindable } from 'aurelia'; - -@customElement({ - name: 'storybook-button-component', - template: ` - - `, -}) -export default class Button { - @bindable() - label = ''; - - @bindable() - onClick: MouseEvent; -} diff --git a/code/lib/cli/rendererAssets/marionette/index.stories.js b/code/lib/cli/rendererAssets/marionette/index.stories.js deleted file mode 100644 index a21a55194725..000000000000 --- a/code/lib/cli/rendererAssets/marionette/index.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import { View } from 'backbone.marionette'; - -import { storiesOf } from '@storybook/marionette'; - -storiesOf('Demo', module).add( - 'button', - () => - new View({ - template: () => '', - ui: { - button: '#my_button', - }, - triggers: { - 'click @ui.button': 'click', - }, - onClick() { - console.log('button clicked'); - }, - }) -); diff --git a/code/lib/cli/rendererAssets/marko/1-Button.stories.js b/code/lib/cli/rendererAssets/marko/1-Button.stories.js deleted file mode 100644 index aac4f18f0a60..000000000000 --- a/code/lib/cli/rendererAssets/marko/1-Button.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import Button from './Button.marko'; - -// More on default export: https://storybook.js.org/docs/marko/writing-stories/introduction#default-export -export default { - title: 'Button', - // More on argTypes: https://storybook.js.org/docs/marko/api/argtypes - argTypes: { - label: { control: 'text' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/marko/writing-stories/introduction#using-args -const Template = (args) => ({ - component: Button, - input: args, -}); - -export const Text = Template.bind({}); -// More on args: https://storybook.js.org/docs/marko/writing-stories/args -Text.args = { - label: 'Button', - onClick: action('onClick'), -}; diff --git a/code/lib/cli/rendererAssets/marko/Button.marko b/code/lib/cli/rendererAssets/marko/Button.marko deleted file mode 100644 index 3824ce9303ec..000000000000 --- a/code/lib/cli/rendererAssets/marko/Button.marko +++ /dev/null @@ -1,13 +0,0 @@ -class { - onCreate(input) { - this.onClick = input.onClick; - } - - handleClick() { - this.input.onClick(); - } -} - -

- -
diff --git a/code/lib/cli/rendererAssets/mithril/Button.js b/code/lib/cli/rendererAssets/mithril/Button.js deleted file mode 100644 index db8dc2ba36c0..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Button.js +++ /dev/null @@ -1,22 +0,0 @@ -/** @jsx m */ - -import m from 'mithril'; -import './button.css'; - -export const Button = { - view: ({ label, attrs }) => { - const mode = attrs.primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - const size = attrs.size || 'medium'; - - return ( - - ); - }, -}; diff --git a/code/lib/cli/rendererAssets/mithril/Button.stories.js b/code/lib/cli/rendererAssets/mithril/Button.stories.js deleted file mode 100644 index 04206d6045c7..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Button.stories.js +++ /dev/null @@ -1,43 +0,0 @@ -import m from 'mithril'; - -import { Button } from './Button'; - -// More on default export: https://storybook.js.org/docs/mithril/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // More on argTypes: https://storybook.js.org/docs/mithril/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - onClick: { action: 'onClick' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/mithril/writing-stories/introduction#using-args -const Template = ({ label, ...args }) => ({ - view: () => m(Button, args, label), -}); - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/mithril/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/mithril/Header.js b/code/lib/cli/rendererAssets/mithril/Header.js deleted file mode 100644 index fed4b72c7cdb..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Header.js +++ /dev/null @@ -1,51 +0,0 @@ -/** @jsx m */ - -import m from 'mithril'; - -import { Button } from './Button'; -import './header.css'; - -export const Header = { - view: ({ attrs }) => ( -
-
-
- - - - - - - -

Acme

-
- {m( - 'div', - ...(attrs.user - ? [m(Button, { size: 'small', onClick: attrs.onLogout }, 'Log out')] - : [ - m(Button, { size: 'small', onClick: attrs.onLogin }, 'Log in'), - m( - Button, - { - primary: true, - size: 'small', - onClick: attrs.onCreateAccount, - }, - 'Sign up' - ), - ]) - )} -
-
- ), -}; diff --git a/code/lib/cli/rendererAssets/mithril/Header.stories.js b/code/lib/cli/rendererAssets/mithril/Header.stories.js deleted file mode 100644 index ff779e9ff6e9..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Header.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import m from 'mithril'; - -import { Header } from './Header'; - -export default { - title: 'Example/Header', - component: Header, -}; - -const Template = ({ label, ...args }) => ({ - view: () => m(Header, args, label), -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: {}, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/mithril/Page.js b/code/lib/cli/rendererAssets/mithril/Page.js deleted file mode 100644 index 199957740cf4..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Page.js +++ /dev/null @@ -1,70 +0,0 @@ -/** @jsx m */ - -import m from 'mithril'; - -import { Header } from './Header'; -import './page.css'; - -export const Page = { - view: ({ attrs }) => ( -
-
- {m(Header, { - user: attrs.user, - onLogin: attrs.onLogin, - onLogout: attrs.onLogout, - onCreateAccount: attrs.onCreateAccount, - })} -
-
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page - data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
- ), -}; diff --git a/code/lib/cli/rendererAssets/mithril/Page.stories.js b/code/lib/cli/rendererAssets/mithril/Page.stories.js deleted file mode 100644 index 73804bf69e65..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Page.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import m from 'mithril'; - -import { Page } from './Page'; -import * as HeaderStories from './Header.stories'; - -export default { - title: 'Example/Page', - component: Page, -}; - -const Template = ({ label, ...args }) => ({ - view: () => m(Page, args, label), -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - // More on composing args: https://storybook.js.org/docs/mithril/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = { - ...HeaderStories.LoggedOut.args, -}; diff --git a/code/lib/cli/rendererAssets/rax/Button.js b/code/lib/cli/rendererAssets/rax/Button.js deleted file mode 100644 index 8ad47a2d04f8..000000000000 --- a/code/lib/cli/rendererAssets/rax/Button.js +++ /dev/null @@ -1,26 +0,0 @@ -import './button.css'; -import { createElement } from 'rax'; - -/** - * Primary UI component for user interaction - */ -export const Button = ({ primary, backgroundColor, size, label, ...props }) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - return ( - - ); -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/code/lib/cli/rendererAssets/rax/Button.stories.js b/code/lib/cli/rendererAssets/rax/Button.stories.js deleted file mode 100644 index 5d4627f2750f..000000000000 --- a/code/lib/cli/rendererAssets/rax/Button.stories.js +++ /dev/null @@ -1,40 +0,0 @@ -import { createElement } from 'rax'; - -import { Button } from './Button'; - -// More on default export: https://storybook.js.org/docs/rax/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - // More on argTypes: https://storybook.js.org/docs/rax/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - onClick: { action: 'onClick' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/rax/writing-stories/introduction#using-args -const Template = (args) => - - - - - diff --git a/code/lib/cli/src/automigrate/fixes/angular12.test.ts b/code/lib/cli/src/automigrate/fixes/angular12.test.ts index fde8f9893dd5..02da0ae88506 100644 --- a/code/lib/cli/src/automigrate/fixes/angular12.test.ts +++ b/code/lib/cli/src/automigrate/fixes/angular12.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { angular12 } from './angular12'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkAngular12 = async ({ packageJson, main }) => { +const checkAngular12 = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts b/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts index 19aef0c1cd84..6981d288c265 100644 --- a/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts +++ b/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { builderVite } from './builder-vite'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkBuilderVite = async ({ packageJson = {}, main }) => { +const checkBuilderVite = async ({ + packageJson = {}, + main, +}: { + packageJson?: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/cra5.test.ts b/code/lib/cli/src/automigrate/fixes/cra5.test.ts index 191b813058f6..db3066f6f5a8 100644 --- a/code/lib/cli/src/automigrate/fixes/cra5.test.ts +++ b/code/lib/cli/src/automigrate/fixes/cra5.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { cra5 } from './cra5'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkCra5 = async ({ packageJson, main }) => { +const checkCra5 = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts index df110b9f0990..a82ee63fed52 100644 --- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts +++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts @@ -1,7 +1,8 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; +import * as path from 'path'; import { dedent } from 'ts-dedent'; -import type { JsPackageManager } from '../../js-package-manager'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { eslintPlugin } from './eslint-plugin'; // eslint-disable-next-line global-require, jest/no-mocks-import @@ -12,6 +13,11 @@ const checkEslint = async ({ main = {}, hasEslint = true, eslintExtension = 'js', +}: { + packageJson: PackageJson; + main?: Partial & Record; + hasEslint?: boolean; + eslintExtension?: string; }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts index ecad50520b26..c0f46684d844 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { newFrameworks } from './new-frameworks'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkNewFrameworks = async ({ packageJson, main }) => { +const checkNewFrameworks = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial & Record; +}) => { if (main) { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ diff --git a/code/lib/cli/src/automigrate/fixes/npm7.test.ts b/code/lib/cli/src/automigrate/fixes/npm7.test.ts index 83346ccdfaf1..4ed22b8aa18e 100644 --- a/code/lib/cli/src/automigrate/fixes/npm7.test.ts +++ b/code/lib/cli/src/automigrate/fixes/npm7.test.ts @@ -3,7 +3,7 @@ import { npm7 } from './npm7'; const mockExecuteCommand = jest.fn(); class MockedNPMProxy extends NPMProxy { - executeCommand(...args) { + executeCommand(...args: Parameters) { return mockExecuteCommand(...args); } } diff --git a/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts b/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts index c54074534afe..35661e88af20 100644 --- a/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts +++ b/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts @@ -1,7 +1,7 @@ -import type { JsPackageManager } from '../../js-package-manager'; -import { sbScripts, getStorybookScripts } from './sb-scripts'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; +import { getStorybookScripts, sbScripts } from './sb-scripts'; -const checkSbScripts = async ({ packageJson }) => { +const checkSbScripts = async ({ packageJson }: { packageJson: PackageJson }) => { const packageManager = { retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }), } as JsPackageManager; diff --git a/code/lib/cli/src/automigrate/fixes/vue3.test.ts b/code/lib/cli/src/automigrate/fixes/vue3.test.ts index 1b935ea87f43..6ca7a23eef61 100644 --- a/code/lib/cli/src/automigrate/fixes/vue3.test.ts +++ b/code/lib/cli/src/automigrate/fixes/vue3.test.ts @@ -1,12 +1,12 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { vue3 } from './vue3'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkVue3 = async ({ packageJson, main }) => { +const checkVue3 = async ({ packageJson, main }: { packageJson: PackageJson; main: unknown }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/webpack5.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5.test.ts index 34e3a02e5e5c..c231fa477e4c 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { webpack5 } from './webpack5'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkWebpack5 = async ({ packageJson, main }) => { +const checkWebpack5 = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts index 5490cf2012d3..597e2fc7818d 100644 --- a/code/lib/cli/src/detect.test.ts +++ b/code/lib/cli/src/detect.test.ts @@ -1,19 +1,14 @@ -import fs from 'fs'; +import * as fs from 'fs'; import { getBowerJson } from './helpers'; -import { isStorybookInstalled, detectFrameworkPreset, detect, detectLanguage } from './detect'; +import { detect, detectFrameworkPreset, detectLanguage, isStorybookInstalled } from './detect'; import { ProjectType, SUPPORTED_RENDERERS, SupportedLanguage } from './project_types'; import type { PackageJsonWithMaybeDeps } from './js-package-manager'; -import { readPackageJson } from './js-package-manager'; jest.mock('./helpers', () => ({ getBowerJson: jest.fn(), })); -jest.mock('./js-package-manager', () => ({ - readPackageJson: jest.fn(), -})); - jest.mock('fs', () => ({ existsSync: jest.fn(), stat: jest.fn(), @@ -285,28 +280,39 @@ const MOCK_FRAMEWORK_FILES: { describe('Detect', () => { it(`should return type HTML if html option is passed`, () => { - (readPackageJson as jest.Mock).mockImplementation(() => true); expect(detect({ dependencies: {} }, { html: true })).toBe(ProjectType.HTML); }); it(`should return type UNDETECTED if neither packageJson or bowerJson exist`, () => { - (readPackageJson as jest.Mock).mockImplementation(() => false); (getBowerJson as jest.Mock).mockImplementation(() => false); expect(detect(undefined)).toBe(ProjectType.UNDETECTED); }); - it(`should return language typescript if the dependency is present`, () => { - expect( - detectLanguage({ - dependencies: { - typescript: '1.0.0', - }, - }) - ).toBe(SupportedLanguage.TYPESCRIPT); + it(`should return language legacy typescript if the dependency is present`, () => { + expect(detectLanguage({ dependencies: { typescript: '1.0.0' } })).toBe( + SupportedLanguage.TYPESCRIPT_LEGACY + ); + }); + + it(`should return language typescript if the dependency is >TS4.9`, () => { + expect(detectLanguage({ dependencies: { typescript: '4.9.1' } })).toBe( + SupportedLanguage.TYPESCRIPT + ); + }); + + it(`should return language typescript if the dependency is =TS4.9`, () => { + expect(detectLanguage({ dependencies: { typescript: '4.9.0' } })).toBe( + SupportedLanguage.TYPESCRIPT + ); + }); + + it(`should return language typescript if the dependency is =TS4.9beta`, () => { + expect(detectLanguage({ dependencies: { typescript: '^4.9.0-beta' } })).toBe( + SupportedLanguage.TYPESCRIPT + ); }); it(`should return language javascript by default`, () => { - (readPackageJson as jest.Mock).mockImplementation(() => true); expect(detectLanguage()).toBe(SupportedLanguage.JAVASCRIPT); }); diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index 2bc9e17d88a3..6896858d1b51 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.ts @@ -1,6 +1,7 @@ import path from 'path'; import fs from 'fs'; import findUp from 'find-up'; +import semver from 'semver'; import type { TemplateConfiguration, TemplateMatcher } from './project_types'; import { @@ -12,7 +13,7 @@ import { CoreBuilder, } from './project_types'; import { getBowerJson, paddedLog } from './helpers'; -import type { PackageJson, JsPackageManager, PackageJsonWithMaybeDeps } from './js-package-manager'; +import type { JsPackageManager, PackageJson, PackageJsonWithMaybeDeps } from './js-package-manager'; import { detectNextJS } from './detect-nextjs'; const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs']; @@ -155,8 +156,14 @@ export function detectLanguage(packageJson?: PackageJson) { return language; } - if (hasDependency(packageJson || bowerJson, 'typescript')) { + if ( + hasDependency(packageJson || bowerJson, 'typescript', (version) => + semver.gte(semver.coerce(version), '4.9.0') + ) + ) { language = SupportedLanguage.TYPESCRIPT; + } else if (hasDependency(packageJson || bowerJson, 'typescript')) { + language = SupportedLanguage.TYPESCRIPT_LEGACY; } return language; diff --git a/code/lib/cli/src/dirs.ts b/code/lib/cli/src/dirs.ts index e95e6bb4852d..69a411752360 100644 --- a/code/lib/cli/src/dirs.ts +++ b/code/lib/cli/src/dirs.ts @@ -1,5 +1,12 @@ import { dirname } from 'path'; +import type { SupportedFrameworks, SupportedRenderers } from './project_types'; -export function getBaseDir() { +export function getCliDir() { return dirname(require.resolve('@storybook/cli/package.json')); } + +export function getRendererDir(renderer: SupportedFrameworks | SupportedRenderers) { + return dirname( + require.resolve(`@storybook/${renderer}/package.json`, { paths: [process.cwd()] }) + ); +} diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 72027a25a08d..83b553310224 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -8,7 +8,7 @@ import { getBaseTsConfigName, } from './angular-helpers'; import { writeFileAsJson, copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; import { CoreBuilder } from '../../project_types'; @@ -50,7 +50,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'angular' ); - const templateDir = join(getBaseDir(), 'templates', 'angular'); + const templateDir = join(getCliDir(), 'templates', 'angular'); copyTemplate(templateDir); editAngularAppTsConfig(); diff --git a/code/lib/cli/src/generators/AURELIA/index.ts b/code/lib/cli/src/generators/AURELIA/index.ts index 47a0e9cad1c7..bb7c66d4d0be 100644 --- a/code/lib/cli/src/generators/AURELIA/index.ts +++ b/code/lib/cli/src/generators/AURELIA/index.ts @@ -1,6 +1,6 @@ import { join } from 'path'; import { writeFileAsJson, readFileAsJson, copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; @@ -25,7 +25,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'aurelia', { extraPackages: ['aurelia'], }); - const templateDir = join(getBaseDir(), 'templates', 'aurelia'); + const templateDir = join(getCliDir(), 'templates', 'aurelia'); copyTemplate(templateDir); }; diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index d74f6971a54b..24aab9afa6cb 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -2,7 +2,7 @@ import { join } from 'path'; import chalk from 'chalk'; import shell from 'shelljs'; import { getBabelDependencies, paddedLog, copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; import type { JsPackageManager } from '../../js-package-manager'; import type { NpmOptions } from '../../NpmOptions'; @@ -69,7 +69,7 @@ const generator = async ( }); } - const templateDir = join(getBaseDir(), 'templates', 'react-native'); + const templateDir = join(getCliDir(), 'templates', 'react-native'); copyTemplate(templateDir); }; diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts index 833c0443c15d..8653c25dba25 100755 --- a/code/lib/cli/src/generators/SERVER/index.ts +++ b/code/lib/cli/src/generators/SERVER/index.ts @@ -2,14 +2,14 @@ import { join } from 'path'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; import { copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'server', { extensions: ['json'], }); - const templateDir = join(getBaseDir(), 'templates', 'server'); + const templateDir = join(getCliDir(), 'templates', 'server'); copyTemplate(templateDir); }; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 6a8d9060d6a1..81d1da558f43 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -206,11 +206,6 @@ export async function baseGenerator( await configurePreview(rendererId); - if (addComponents) { - const templateLocation = hasFrameworkTemplates(framework) ? framework : rendererId; - await copyComponents(templateLocation, language); - } - // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516 if (frameworkPackages.find((pkg) => pkg.match(/^@storybook\/.*-vite$/))) { const previewHead = dedent` @@ -246,4 +241,9 @@ export async function baseGenerator( if (addESLint) { packageManager.addESLintConfig(); } + + if (addComponents) { + const templateLocation = hasFrameworkTemplates(framework) ? framework : rendererId; + await copyComponents(templateLocation, language); + } } diff --git a/code/lib/cli/src/helpers.test.ts b/code/lib/cli/src/helpers.test.ts index 10218ba0ba53..ea4b83c8846c 100644 --- a/code/lib/cli/src/helpers.test.ts +++ b/code/lib/cli/src/helpers.test.ts @@ -9,7 +9,8 @@ jest.mock('fs', () => ({ existsSync: jest.fn(), })); jest.mock('./dirs', () => ({ - getBaseDir: () => '', + getRendererDir: (renderer) => `@storybook/${renderer}/`, + getCliDir: () => '', })); jest.mock('fs-extra', () => ({ @@ -68,11 +69,13 @@ describe('Helpers', () => { `( `should copy $expected when folder $exists exists for language $language`, async ({ language, exists, expected }) => { - const componentsDirectory = exists.map((folder: string) => `rendererAssets/react/${folder}`); - const expectedDirectory = `rendererAssets/react${expected}`; - (fse.pathExists as jest.Mock).mockImplementation((filePath) => { - return componentsDirectory.includes(filePath) || filePath === 'rendererAssets/react'; - }); + const componentsDirectory = exists.map( + (folder: string) => `@storybook/react/template/cli/${folder}` + ); + (fse.pathExists as jest.Mock).mockImplementation( + (filePath) => + componentsDirectory.includes(filePath) || filePath === '@storybook/react/template/cli' + ); await helpers.copyComponents('react', language); const copySpy = jest.spyOn(fse, 'copy'); @@ -82,13 +85,15 @@ describe('Helpers', () => { './stories', expect.anything() ); + + const expectedDirectory = `@storybook/react/template/cli${expected}`; expect(copySpy).toHaveBeenNthCalledWith(2, expectedDirectory, './stories', expect.anything()); } ); it(`should copy to src folder when exists`, async () => { (fse.pathExists as jest.Mock).mockImplementation((filePath) => { - return filePath === 'rendererAssets/react' || filePath === './src'; + return filePath === '@storybook/react/template/cli' || filePath === './src'; }); await helpers.copyComponents('react', SupportedLanguage.JAVASCRIPT); expect(fse.copy).toHaveBeenCalledWith(expect.anything(), './src/stories', expect.anything()); @@ -96,7 +101,7 @@ describe('Helpers', () => { it(`should copy to root folder when src doesn't exist`, async () => { (fse.pathExists as jest.Mock).mockImplementation((filePath) => { - return filePath === 'rendererAssets/react'; + return filePath === '@storybook/react/template/cli'; }); await helpers.copyComponents('react', SupportedLanguage.JAVASCRIPT); expect(fse.copy).toHaveBeenCalledWith(expect.anything(), './stories', expect.anything()); diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index f353c6ba0f40..f903c43397e9 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -6,14 +6,14 @@ import chalk from 'chalk'; import { satisfies } from 'semver'; import stripJsonComments from 'strip-json-comments'; -import type { SupportedFrameworks, SupportedRenderers, SupportedLanguage } from './project_types'; - +import { getCliDir, getRendererDir } from './dirs'; import type { JsPackageManager, PackageJson, PackageJsonWithDepsAndDevDeps, } from './js-package-manager'; -import { getBaseDir } from './dirs'; +import type { SupportedFrameworks, SupportedRenderers } from './project_types'; +import { SupportedLanguage } from './project_types'; import storybookMonorepoPackages from './versions'; const logger = console; @@ -191,23 +191,35 @@ export async function copyComponents( language: SupportedLanguage ) { const languageFolderMapping: Record = { - javascript: 'js', - typescript: 'ts', + [SupportedLanguage.JAVASCRIPT]: 'js', + [SupportedLanguage.TYPESCRIPT]: 'ts', + [SupportedLanguage.TYPESCRIPT_LEGACY]: 'ts-legacy', }; const componentsPath = async () => { - const baseDir = getBaseDir(); - const assetsRoot = join(baseDir, 'rendererAssets'); - const assetsRenderer = join(assetsRoot, renderer); - const assetsLanguage = join(assetsRenderer, languageFolderMapping[language]); + const baseDir = getRendererDir(renderer); + const assetsDir = join(baseDir, 'template/cli'); + const assetsLanguage = join(assetsDir, languageFolderMapping[language]); + const assetsJS = join(assetsDir, languageFolderMapping.javascript); + const assetsTSLegacy = join( + assetsDir, + languageFolderMapping[SupportedLanguage.TYPESCRIPT_LEGACY] + ); + const assetsTS = join(assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT]); + if (await fse.pathExists(assetsLanguage)) { return assetsLanguage; } - const assetsJS = join(assetsRenderer, languageFolderMapping.javascript); + if (language === SupportedLanguage.TYPESCRIPT && (await fse.pathExists(assetsTSLegacy))) { + return assetsTSLegacy; + } + if (language === SupportedLanguage.TYPESCRIPT_LEGACY && (await fse.pathExists(assetsTS))) { + return assetsTS; + } if (await fse.pathExists(assetsJS)) { return assetsJS; } - if (await fse.pathExists(assetsRenderer)) { - return assetsRenderer; + if (await fse.pathExists(assetsDir)) { + return assetsDir; } throw new Error(`Unsupported renderer: ${renderer}`); }; @@ -220,7 +232,7 @@ export async function copyComponents( }; const destinationPath = await targetPath(); - await fse.copy(join(getBaseDir(), 'rendererAssets/common'), destinationPath, { overwrite: true }); + await fse.copy(join(getCliDir(), 'rendererAssets/common'), destinationPath, { overwrite: true }); await fse.copy(await componentsPath(), destinationPath, { overwrite: true }); } diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts index 9350b0eae96c..b622e2caaa80 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts @@ -226,6 +226,8 @@ describe('NPM Proxy', () => { jest.spyOn(npmProxy, 'retrievePackageJson').mockImplementation( jest.fn(() => ({ + dependencies: {}, + devDependencies: {}, overrides: { bar: 'x.x.x', }, @@ -238,6 +240,8 @@ describe('NPM Proxy', () => { npmProxy.addPackageResolutions(versions); expect(writePackageSpy).toHaveBeenCalledWith({ + dependencies: {}, + devDependencies: {}, overrides: { ...versions, bar: 'x.x.x', diff --git a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts index c9087095df63..9128506f8429 100644 --- a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts @@ -149,6 +149,8 @@ describe('Yarn 1 Proxy', () => { jest.spyOn(yarn1Proxy, 'retrievePackageJson').mockImplementation( jest.fn(() => ({ + dependencies: {}, + devDependencies: {}, resolutions: { bar: 'x.x.x', }, @@ -161,6 +163,8 @@ describe('Yarn 1 Proxy', () => { yarn1Proxy.addPackageResolutions(versions); expect(writePackageSpy).toHaveBeenCalledWith({ + dependencies: {}, + devDependencies: {}, resolutions: { ...versions, bar: 'x.x.x', diff --git a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts index 11d3368993b2..581c48d9d52e 100644 --- a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts @@ -155,6 +155,8 @@ describe('Yarn 2 Proxy', () => { jest.spyOn(yarn2Proxy, 'retrievePackageJson').mockImplementation( jest.fn(() => ({ + dependencies: {}, + devDependencies: {}, resolutions: { bar: 'x.x.x', }, @@ -167,6 +169,8 @@ describe('Yarn 2 Proxy', () => { yarn2Proxy.addPackageResolutions(versions); expect(writePackageSpy).toHaveBeenCalledWith({ + dependencies: {}, + devDependencies: {}, resolutions: { ...versions, bar: 'x.x.x', diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index f24334a062e3..3d99bb07a666 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -1,4 +1,4 @@ -import { validRange, minVersion } from 'semver'; +import { minVersion, validRange } from 'semver'; function ltMajor(versionRange: string, major: number) { // Uses validRange to avoid a throw from minVersion if an invalid range gets passed @@ -93,6 +93,7 @@ export type Builder = CoreBuilder | (string & {}); export enum SupportedLanguage { JAVASCRIPT = 'javascript', + TYPESCRIPT_LEGACY = 'typescript-legacy', TYPESCRIPT = 'typescript', } diff --git a/code/lib/core-server/src/utils/summarizeIndex.ts b/code/lib/core-server/src/utils/summarizeIndex.ts index 7093abab55ae..21023cd14984 100644 --- a/code/lib/core-server/src/utils/summarizeIndex.ts +++ b/code/lib/core-server/src/utils/summarizeIndex.ts @@ -1,4 +1,4 @@ -import { Store_StoryIndex } from '@storybook/types'; +import type { Store_StoryIndex } from '@storybook/types'; export function summarizeIndex(storyIndex: Store_StoryIndex) { let storyCount = 0; diff --git a/code/package.json b/code/package.json index 5b8bb5994c8b..8c4811cae006 100644 --- a/code/package.json +++ b/code/package.json @@ -57,6 +57,7 @@ "changelog": "pr-log --sloppy --cherry-pick", "changelog:next": "pr-log --sloppy --since-prerelease", "check": "NODE_ENV=production node ../scripts/check-package.js", + "ci": "yarn task --task check --no-link --start-from=install && yarn lint && yarn test", "coverage": "codecov", "danger": "danger", "generate-repros": "zx ../scripts/repros-generator/index.mjs", diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 2b1d67e4339b..0f2e70288cf8 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -41,6 +41,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/renderers/html/template/cli/.eslintrc.json b/code/renderers/html/template/cli/.eslintrc.json new file mode 100644 index 000000000000..78bb9bdaa3b1 --- /dev/null +++ b/code/renderers/html/template/cli/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "rules": { + "no-undef": "off", + "import/extensions": "off" + } +} diff --git a/code/lib/cli/rendererAssets/html/js/Button.js b/code/renderers/html/template/cli/js/Button.js similarity index 100% rename from code/lib/cli/rendererAssets/html/js/Button.js rename to code/renderers/html/template/cli/js/Button.js diff --git a/code/lib/cli/rendererAssets/html/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/html/js/Button.stories.js rename to code/renderers/html/template/cli/js/Button.stories.js diff --git a/code/lib/cli/rendererAssets/html/js/Header.js b/code/renderers/html/template/cli/js/Header.js similarity index 100% rename from code/lib/cli/rendererAssets/html/js/Header.js rename to code/renderers/html/template/cli/js/Header.js diff --git a/code/lib/cli/rendererAssets/html/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/html/js/Header.stories.js rename to code/renderers/html/template/cli/js/Header.stories.js diff --git a/code/lib/cli/rendererAssets/html/js/Page.js b/code/renderers/html/template/cli/js/Page.js similarity index 100% rename from code/lib/cli/rendererAssets/html/js/Page.js rename to code/renderers/html/template/cli/js/Page.js diff --git a/code/lib/cli/rendererAssets/html/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/html/js/Page.stories.js rename to code/renderers/html/template/cli/js/Page.stories.js diff --git a/code/lib/cli/rendererAssets/html/ts/Button.stories.ts b/code/renderers/html/template/cli/ts/Button.stories.ts similarity index 95% rename from code/lib/cli/rendererAssets/html/ts/Button.stories.ts rename to code/renderers/html/template/cli/ts/Button.stories.ts index 456189912ddb..5c361f64b112 100644 --- a/code/lib/cli/rendererAssets/html/ts/Button.stories.ts +++ b/code/renderers/html/template/cli/ts/Button.stories.ts @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/html'; +import type { Meta, StoryFn } from 'renderers/html/dist'; import type { ButtonProps } from './Button'; import { createButton } from './Button'; diff --git a/code/lib/cli/rendererAssets/html/ts/Button.ts b/code/renderers/html/template/cli/ts/Button.ts similarity index 100% rename from code/lib/cli/rendererAssets/html/ts/Button.ts rename to code/renderers/html/template/cli/ts/Button.ts diff --git a/code/lib/cli/rendererAssets/html/ts/Header.stories.ts b/code/renderers/html/template/cli/ts/Header.stories.ts similarity index 95% rename from code/lib/cli/rendererAssets/html/ts/Header.stories.ts rename to code/renderers/html/template/cli/ts/Header.stories.ts index 5df408031296..ed54d8fd8d3b 100644 --- a/code/lib/cli/rendererAssets/html/ts/Header.stories.ts +++ b/code/renderers/html/template/cli/ts/Header.stories.ts @@ -20,7 +20,9 @@ const Template: StoryFn = (args) => createHeader(args); export const LoggedIn = Template.bind({}); LoggedIn.args = { - user: {}, + user: { + name: 'John Doe', + }, }; export const LoggedOut = Template.bind({}); diff --git a/code/lib/cli/rendererAssets/html/ts/Header.ts b/code/renderers/html/template/cli/ts/Header.ts similarity index 100% rename from code/lib/cli/rendererAssets/html/ts/Header.ts rename to code/renderers/html/template/cli/ts/Header.ts diff --git a/code/lib/cli/rendererAssets/html/ts/Page.stories.ts b/code/renderers/html/template/cli/ts/Page.stories.ts similarity index 92% rename from code/lib/cli/rendererAssets/html/ts/Page.stories.ts rename to code/renderers/html/template/cli/ts/Page.stories.ts index 057863b93bec..a3cf65d08d36 100644 --- a/code/lib/cli/rendererAssets/html/ts/Page.stories.ts +++ b/code/renderers/html/template/cli/ts/Page.stories.ts @@ -1,5 +1,5 @@ import { within, userEvent } from '@storybook/testing-library'; -import type { Meta, StoryFn } from '@storybook/html'; +import type { Meta, StoryFn } from 'renderers/html/dist'; import { createPage } from './Page'; export default { diff --git a/code/lib/cli/rendererAssets/html/ts/Page.ts b/code/renderers/html/template/cli/ts/Page.ts similarity index 100% rename from code/lib/cli/rendererAssets/html/ts/Page.ts rename to code/renderers/html/template/cli/ts/Page.ts diff --git a/code/renderers/html/tsconfig.json b/code/renderers/html/tsconfig.json index d9463d503988..f3e444ef0f7a 100644 --- a/code/renderers/html/tsconfig.json +++ b/code/renderers/html/tsconfig.json @@ -3,6 +3,6 @@ "compilerOptions": { "strict": true }, - "include": ["src/**/*"], + "include": ["src/**/*", "template/**/*"], "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] } diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 8c67113f52d4..625f775a2b52 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -41,6 +41,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/renderers/preact/template/cli/.eslintrc.json b/code/renderers/preact/template/cli/.eslintrc.json new file mode 100644 index 000000000000..8040ae0ce9f0 --- /dev/null +++ b/code/renderers/preact/template/cli/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "rules": { + "import/extensions": "off", + "react/react-in-jsx-scope": "off", + "import/no-extraneous-dependencies": "off" + } +} diff --git a/code/lib/cli/rendererAssets/preact/Button.jsx b/code/renderers/preact/template/cli/Button.jsx similarity index 100% rename from code/lib/cli/rendererAssets/preact/Button.jsx rename to code/renderers/preact/template/cli/Button.jsx diff --git a/code/lib/cli/rendererAssets/preact/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/preact/Button.stories.jsx rename to code/renderers/preact/template/cli/Button.stories.jsx diff --git a/code/lib/cli/rendererAssets/preact/Header.jsx b/code/renderers/preact/template/cli/Header.jsx similarity index 95% rename from code/lib/cli/rendererAssets/preact/Header.jsx rename to code/renderers/preact/template/cli/Header.jsx index 9a81e7788225..99ee8c54b51f 100644 --- a/code/lib/cli/rendererAssets/preact/Header.jsx +++ b/code/renderers/preact/template/cli/Header.jsx @@ -45,7 +45,9 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( ); Header.propTypes = { - user: PropTypes.shape({}), + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), onLogin: PropTypes.func.isRequired, onLogout: PropTypes.func.isRequired, onCreateAccount: PropTypes.func.isRequired, diff --git a/code/lib/cli/rendererAssets/preact/Header.stories.jsx b/code/renderers/preact/template/cli/Header.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/preact/Header.stories.jsx rename to code/renderers/preact/template/cli/Header.stories.jsx diff --git a/code/lib/cli/rendererAssets/preact/Page.jsx b/code/renderers/preact/template/cli/Page.jsx similarity index 94% rename from code/lib/cli/rendererAssets/preact/Page.jsx rename to code/renderers/preact/template/cli/Page.jsx index a88603626679..1d1a84276e03 100644 --- a/code/lib/cli/rendererAssets/preact/Page.jsx +++ b/code/renderers/preact/template/cli/Page.jsx @@ -1,5 +1,4 @@ import { useState } from 'preact/hooks'; - import { Header } from './Header'; import './page.css'; @@ -41,7 +40,11 @@ export const Page = () => {

Get a guided tutorial on component-driven development at{' '} - + Storybook tutorials . Read more in the{' '} diff --git a/code/lib/cli/rendererAssets/preact/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/preact/Page.stories.jsx rename to code/renderers/preact/template/cli/Page.stories.jsx diff --git a/code/renderers/preact/tsconfig.json b/code/renderers/preact/tsconfig.json index 88fbabf6e314..52a6b92704df 100644 --- a/code/renderers/preact/tsconfig.json +++ b/code/renderers/preact/tsconfig.json @@ -4,6 +4,6 @@ "strict": true, "resolveJsonModule": true }, - "include": ["src/**/*"], + "include": ["src/**/*", "template/**/*"], "exclude": ["src/**/*.test.*"] } diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 65b7bff5c701..9b76e7343cd6 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -41,6 +41,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "types/**/*", "README.md", "*.js", diff --git a/code/renderers/react/template/cli/.eslintrc.json b/code/renderers/react/template/cli/.eslintrc.json new file mode 100644 index 000000000000..40ece4a0aa18 --- /dev/null +++ b/code/renderers/react/template/cli/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "import/extensions": "off" + } +} diff --git a/code/lib/cli/rendererAssets/react/js/Button.jsx b/code/renderers/react/template/cli/js/Button.jsx similarity index 100% rename from code/lib/cli/rendererAssets/react/js/Button.jsx rename to code/renderers/react/template/cli/js/Button.jsx diff --git a/code/lib/cli/rendererAssets/react/js/Button.stories.jsx b/code/renderers/react/template/cli/js/Button.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/react/js/Button.stories.jsx rename to code/renderers/react/template/cli/js/Button.stories.jsx diff --git a/code/lib/cli/rendererAssets/react/js/Header.jsx b/code/renderers/react/template/cli/js/Header.jsx similarity index 95% rename from code/lib/cli/rendererAssets/react/js/Header.jsx rename to code/renderers/react/template/cli/js/Header.jsx index 59787aed890e..3862422ed8ec 100644 --- a/code/lib/cli/rendererAssets/react/js/Header.jsx +++ b/code/renderers/react/template/cli/js/Header.jsx @@ -46,7 +46,9 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( ); Header.propTypes = { - user: PropTypes.shape({}), + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), onLogin: PropTypes.func.isRequired, onLogout: PropTypes.func.isRequired, onCreateAccount: PropTypes.func.isRequired, diff --git a/code/lib/cli/rendererAssets/react/js/Header.stories.jsx b/code/renderers/react/template/cli/js/Header.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/react/js/Header.stories.jsx rename to code/renderers/react/template/cli/js/Header.stories.jsx diff --git a/code/lib/cli/rendererAssets/react/js/Page.jsx b/code/renderers/react/template/cli/js/Page.jsx similarity index 94% rename from code/lib/cli/rendererAssets/react/js/Page.jsx rename to code/renderers/react/template/cli/js/Page.jsx index c5fffe953be5..03dba2fd6aa9 100644 --- a/code/lib/cli/rendererAssets/react/js/Page.jsx +++ b/code/renderers/react/template/cli/js/Page.jsx @@ -41,7 +41,11 @@ export const Page = () => {

Get a guided tutorial on component-driven development at{' '} - + Storybook tutorials . Read more in the{' '} diff --git a/code/lib/cli/rendererAssets/react/js/Page.stories.jsx b/code/renderers/react/template/cli/js/Page.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/react/js/Page.stories.jsx rename to code/renderers/react/template/cli/js/Page.stories.jsx diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Button.stories.tsx b/code/renderers/react/template/cli/ts/Button.stories.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Button.stories.tsx rename to code/renderers/react/template/cli/ts/Button.stories.tsx diff --git a/code/lib/cli/rendererAssets/react/ts/Button.tsx b/code/renderers/react/template/cli/ts/Button.tsx similarity index 100% rename from code/lib/cli/rendererAssets/react/ts/Button.tsx rename to code/renderers/react/template/cli/ts/Button.tsx diff --git a/code/lib/cli/rendererAssets/react/ts/Header.stories.tsx b/code/renderers/react/template/cli/ts/Header.stories.tsx similarity index 100% rename from code/lib/cli/rendererAssets/react/ts/Header.stories.tsx rename to code/renderers/react/template/cli/ts/Header.stories.tsx diff --git a/code/lib/cli/rendererAssets/react/ts/Header.tsx b/code/renderers/react/template/cli/ts/Header.tsx similarity index 100% rename from code/lib/cli/rendererAssets/react/ts/Header.tsx rename to code/renderers/react/template/cli/ts/Header.tsx diff --git a/code/lib/cli/rendererAssets/react/ts/Page.stories.tsx b/code/renderers/react/template/cli/ts/Page.stories.tsx similarity index 100% rename from code/lib/cli/rendererAssets/react/ts/Page.stories.tsx rename to code/renderers/react/template/cli/ts/Page.stories.tsx diff --git a/code/lib/cli/rendererAssets/react/ts/Page.tsx b/code/renderers/react/template/cli/ts/Page.tsx similarity index 96% rename from code/lib/cli/rendererAssets/react/ts/Page.tsx rename to code/renderers/react/template/cli/ts/Page.tsx index 522d34294ae2..8d048fa10880 100644 --- a/code/lib/cli/rendererAssets/react/ts/Page.tsx +++ b/code/renderers/react/template/cli/ts/Page.tsx @@ -45,7 +45,7 @@ export const Page: React.VFC = () => {

Get a guided tutorial on component-driven development at{' '} - + Storybook tutorials . Read more in the{' '} diff --git a/code/renderers/react/tsconfig.json b/code/renderers/react/tsconfig.json index 253b957ea68b..48c7724b6914 100644 --- a/code/renderers/react/tsconfig.json +++ b/code/renderers/react/tsconfig.json @@ -3,8 +3,9 @@ "compilerOptions": { "strict": true, "skipLibCheck": true, - "resolveJsonModule": true + "resolveJsonModule": true, + "allowJs": true }, - "include": ["src/**/*"], + "include": ["src/**/*", "template/**/*"], "exclude": ["src/docs/**/*.test.*", "src/**/__testfixtures__/**"] } diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 6313d1bba1e3..276d08190844 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -41,6 +41,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/lib/cli/rendererAssets/server/button.stories.json b/code/renderers/server/template/cli/button.stories.json similarity index 100% rename from code/lib/cli/rendererAssets/server/button.stories.json rename to code/renderers/server/template/cli/button.stories.json diff --git a/code/lib/cli/rendererAssets/server/header.stories.json b/code/renderers/server/template/cli/header.stories.json similarity index 100% rename from code/lib/cli/rendererAssets/server/header.stories.json rename to code/renderers/server/template/cli/header.stories.json diff --git a/code/lib/cli/rendererAssets/server/page.stories.json b/code/renderers/server/template/cli/page.stories.json similarity index 100% rename from code/lib/cli/rendererAssets/server/page.stories.json rename to code/renderers/server/template/cli/page.stories.json diff --git a/code/renderers/server/tsconfig.json b/code/renderers/server/tsconfig.json index a535f39c8deb..43706ac831fe 100644 --- a/code/renderers/server/tsconfig.json +++ b/code/renderers/server/tsconfig.json @@ -1,5 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], + "include": ["src/**/*", "template/**/*"], "exclude": ["src/__tests__/**/*"] } diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index b99b4ca2712f..ee65ed3c2174 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -45,6 +45,7 @@ "files": [ "dist/**/*", "templates/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/lib/cli/rendererAssets/svelte/Button.stories.js b/code/renderers/svelte/template/cli/Button.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/svelte/Button.stories.js rename to code/renderers/svelte/template/cli/Button.stories.js diff --git a/code/lib/cli/rendererAssets/svelte/Button.svelte b/code/renderers/svelte/template/cli/Button.svelte similarity index 100% rename from code/lib/cli/rendererAssets/svelte/Button.svelte rename to code/renderers/svelte/template/cli/Button.svelte diff --git a/code/lib/cli/rendererAssets/svelte/Header.stories.js b/code/renderers/svelte/template/cli/Header.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/svelte/Header.stories.js rename to code/renderers/svelte/template/cli/Header.stories.js diff --git a/code/lib/cli/rendererAssets/svelte/Header.svelte b/code/renderers/svelte/template/cli/Header.svelte similarity index 100% rename from code/lib/cli/rendererAssets/svelte/Header.svelte rename to code/renderers/svelte/template/cli/Header.svelte diff --git a/code/lib/cli/rendererAssets/svelte/Page.stories.js b/code/renderers/svelte/template/cli/Page.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/svelte/Page.stories.js rename to code/renderers/svelte/template/cli/Page.stories.js diff --git a/code/lib/cli/rendererAssets/svelte/Page.svelte b/code/renderers/svelte/template/cli/Page.svelte similarity index 100% rename from code/lib/cli/rendererAssets/svelte/Page.svelte rename to code/renderers/svelte/template/cli/Page.svelte diff --git a/code/renderers/svelte/tsconfig.json b/code/renderers/svelte/tsconfig.json index 1179ad52bc32..f660105084e7 100644 --- a/code/renderers/svelte/tsconfig.json +++ b/code/renderers/svelte/tsconfig.json @@ -6,6 +6,6 @@ "strict": true, "resolveJsonModule": true }, - "include": ["src/**/*"], + "include": ["src/**/*", "src/**/*.svelte", "template/**/*", "template/**/*.svelte"], "exclude": [] } diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index fd6ccb1a5048..27df8db87d8a 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -41,6 +41,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/lib/cli/rendererAssets/vue/Button.stories.js b/code/renderers/vue/template/cli/Button.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/vue/Button.stories.js rename to code/renderers/vue/template/cli/Button.stories.js diff --git a/code/lib/cli/rendererAssets/vue/Button.vue b/code/renderers/vue/template/cli/Button.vue similarity index 100% rename from code/lib/cli/rendererAssets/vue/Button.vue rename to code/renderers/vue/template/cli/Button.vue diff --git a/code/lib/cli/rendererAssets/vue/Header.stories.js b/code/renderers/vue/template/cli/Header.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/vue/Header.stories.js rename to code/renderers/vue/template/cli/Header.stories.js diff --git a/code/lib/cli/rendererAssets/vue/Header.vue b/code/renderers/vue/template/cli/Header.vue similarity index 100% rename from code/lib/cli/rendererAssets/vue/Header.vue rename to code/renderers/vue/template/cli/Header.vue diff --git a/code/lib/cli/rendererAssets/vue/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/vue/Page.stories.js rename to code/renderers/vue/template/cli/Page.stories.js diff --git a/code/lib/cli/rendererAssets/vue/Page.vue b/code/renderers/vue/template/cli/Page.vue similarity index 100% rename from code/lib/cli/rendererAssets/vue/Page.vue rename to code/renderers/vue/template/cli/Page.vue diff --git a/code/renderers/vue/tsconfig.json b/code/renderers/vue/tsconfig.json index 5e57c9488c3f..0c2ba872c20e 100644 --- a/code/renderers/vue/tsconfig.json +++ b/code/renderers/vue/tsconfig.json @@ -3,11 +3,12 @@ "compilerOptions": { "strict": true, "skipLibCheck": true, - "resolveJsonModule": true + "resolveJsonModule": true, + "allowJs": true }, "vueCompilerOptions": { "target": 2 }, - "include": ["src/**/*", "src/**/*.vue"], + "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"], "exclude": [] } diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index bf83b60f0fa3..ccaf5706be75 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -41,6 +41,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/lib/cli/rendererAssets/vue3/Button.stories.js b/code/renderers/vue3/template/cli/Button.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/vue3/Button.stories.js rename to code/renderers/vue3/template/cli/Button.stories.js diff --git a/code/lib/cli/rendererAssets/vue3/Button.vue b/code/renderers/vue3/template/cli/Button.vue similarity index 100% rename from code/lib/cli/rendererAssets/vue3/Button.vue rename to code/renderers/vue3/template/cli/Button.vue diff --git a/code/lib/cli/rendererAssets/vue3/Header.stories.js b/code/renderers/vue3/template/cli/Header.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/vue3/Header.stories.js rename to code/renderers/vue3/template/cli/Header.stories.js diff --git a/code/lib/cli/rendererAssets/vue3/Header.vue b/code/renderers/vue3/template/cli/Header.vue similarity index 100% rename from code/lib/cli/rendererAssets/vue3/Header.vue rename to code/renderers/vue3/template/cli/Header.vue diff --git a/code/lib/cli/rendererAssets/vue3/Page.stories.js b/code/renderers/vue3/template/cli/Page.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/vue3/Page.stories.js rename to code/renderers/vue3/template/cli/Page.stories.js diff --git a/code/lib/cli/rendererAssets/vue3/Page.vue b/code/renderers/vue3/template/cli/Page.vue similarity index 100% rename from code/lib/cli/rendererAssets/vue3/Page.vue rename to code/renderers/vue3/template/cli/Page.vue diff --git a/code/renderers/vue3/tsconfig.json b/code/renderers/vue3/tsconfig.json index e64d6d3146b4..50385a87bc0c 100644 --- a/code/renderers/vue3/tsconfig.json +++ b/code/renderers/vue3/tsconfig.json @@ -3,8 +3,9 @@ "compilerOptions": { "strict": true, "resolveJsonModule": true, - "skipLibCheck": true + "skipLibCheck": true, + "allowJs": true }, - "include": ["src/**/*", "src/**/*.vue"], + "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"], "exclude": [] } diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 0b2f3319cba1..1d3be157068b 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -43,6 +43,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" diff --git a/code/renderers/web-components/template/cli/.eslintrc.json b/code/renderers/web-components/template/cli/.eslintrc.json new file mode 100644 index 000000000000..40ece4a0aa18 --- /dev/null +++ b/code/renderers/web-components/template/cli/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "import/extensions": "off" + } +} diff --git a/code/lib/cli/rendererAssets/web-components/js/Button.js b/code/renderers/web-components/template/cli/js/Button.js similarity index 100% rename from code/lib/cli/rendererAssets/web-components/js/Button.js rename to code/renderers/web-components/template/cli/js/Button.js diff --git a/code/lib/cli/rendererAssets/web-components/js/Button.stories.js b/code/renderers/web-components/template/cli/js/Button.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/web-components/js/Button.stories.js rename to code/renderers/web-components/template/cli/js/Button.stories.js diff --git a/code/lib/cli/rendererAssets/web-components/js/Header.js b/code/renderers/web-components/template/cli/js/Header.js similarity index 100% rename from code/lib/cli/rendererAssets/web-components/js/Header.js rename to code/renderers/web-components/template/cli/js/Header.js diff --git a/code/lib/cli/rendererAssets/web-components/js/Header.stories.js b/code/renderers/web-components/template/cli/js/Header.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/web-components/js/Header.stories.js rename to code/renderers/web-components/template/cli/js/Header.stories.js diff --git a/code/lib/cli/rendererAssets/web-components/js/Page.js b/code/renderers/web-components/template/cli/js/Page.js similarity index 100% rename from code/lib/cli/rendererAssets/web-components/js/Page.js rename to code/renderers/web-components/template/cli/js/Page.js diff --git a/code/lib/cli/rendererAssets/web-components/js/Page.stories.js b/code/renderers/web-components/template/cli/js/Page.stories.js similarity index 100% rename from code/lib/cli/rendererAssets/web-components/js/Page.stories.js rename to code/renderers/web-components/template/cli/js/Page.stories.js diff --git a/code/lib/cli/rendererAssets/web-components/ts/Button.stories.ts b/code/renderers/web-components/template/cli/ts/Button.stories.ts similarity index 100% rename from code/lib/cli/rendererAssets/web-components/ts/Button.stories.ts rename to code/renderers/web-components/template/cli/ts/Button.stories.ts diff --git a/code/lib/cli/rendererAssets/web-components/ts/Button.ts b/code/renderers/web-components/template/cli/ts/Button.ts similarity index 100% rename from code/lib/cli/rendererAssets/web-components/ts/Button.ts rename to code/renderers/web-components/template/cli/ts/Button.ts diff --git a/code/lib/cli/rendererAssets/web-components/ts/Header.stories.ts b/code/renderers/web-components/template/cli/ts/Header.stories.ts similarity index 91% rename from code/lib/cli/rendererAssets/web-components/ts/Header.stories.ts rename to code/renderers/web-components/template/cli/ts/Header.stories.ts index 7d0c8c12a672..f196f465a13c 100644 --- a/code/lib/cli/rendererAssets/web-components/ts/Header.stories.ts +++ b/code/renderers/web-components/template/cli/ts/Header.stories.ts @@ -10,7 +10,9 @@ const Template: StoryFn = (args) => Header(args); export const LoggedIn = Template.bind({}); LoggedIn.args = { - user: {}, + user: { + name: 'Jonh Doe', + }, }; export const LoggedOut = Template.bind({}); diff --git a/code/lib/cli/rendererAssets/web-components/ts/Header.ts b/code/renderers/web-components/template/cli/ts/Header.ts similarity index 96% rename from code/lib/cli/rendererAssets/web-components/ts/Header.ts rename to code/renderers/web-components/template/cli/ts/Header.ts index c9c6d0fbdbe3..5299f2de17ed 100644 --- a/code/lib/cli/rendererAssets/web-components/ts/Header.ts +++ b/code/renderers/web-components/template/cli/ts/Header.ts @@ -3,8 +3,12 @@ import { html } from 'lit-html'; import { Button } from './Button'; import './header.css'; +type User = { + name: string; +}; + export interface HeaderProps { - user?: {}; + user?: User; onLogin: () => void; onLogout: () => void; onCreateAccount: () => void; diff --git a/code/lib/cli/rendererAssets/web-components/ts/Page.stories.ts b/code/renderers/web-components/template/cli/ts/Page.stories.ts similarity index 100% rename from code/lib/cli/rendererAssets/web-components/ts/Page.stories.ts rename to code/renderers/web-components/template/cli/ts/Page.stories.ts diff --git a/code/lib/cli/rendererAssets/web-components/ts/Page.ts b/code/renderers/web-components/template/cli/ts/Page.ts similarity index 97% rename from code/lib/cli/rendererAssets/web-components/ts/Page.ts rename to code/renderers/web-components/template/cli/ts/Page.ts index 19e8265157f4..dd81e9da0f29 100644 --- a/code/lib/cli/rendererAssets/web-components/ts/Page.ts +++ b/code/renderers/web-components/template/cli/ts/Page.ts @@ -2,8 +2,12 @@ import { html } from 'lit-html'; import { Header } from './Header'; import './page.css'; +type User = { + name: string; +}; + export interface PageProps { - user?: {}; + user?: User; onLogin: () => void; onLogout: () => void; onCreateAccount: () => void; diff --git a/code/renderers/web-components/tsconfig.json b/code/renderers/web-components/tsconfig.json index de81d5667307..e94885a0058c 100644 --- a/code/renderers/web-components/tsconfig.json +++ b/code/renderers/web-components/tsconfig.json @@ -1,5 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], + "include": ["src/**/*", "template/**/*"], "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] } diff --git a/code/yarn.lock b/code/yarn.lock index 363d89520afe..6bbe5f6d94d6 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6003,6 +6003,7 @@ __metadata: "@types/node": ^16.0.0 "@types/react": ^16.14.23 "@types/react-dom": ^16.9.14 + "@types/rimraf": ^3.0.2 "@types/semver": ^7.3.4 "@types/tmp": ^0.2.3 core-js: ^3.8.2 @@ -6015,6 +6016,7 @@ __metadata: react: ^16.14.0 react-dom: ^16.14.0 read-pkg-up: ^7.0.1 + rimraf: ^3.0.2 semver: ^7.3.7 telejson: ^6.0.8 tmp: ^0.2.1 @@ -9055,6 +9057,16 @@ __metadata: languageName: node linkType: hard +"@types/rimraf@npm:^3.0.2": + version: 3.0.2 + resolution: "@types/rimraf@npm:3.0.2" + dependencies: + "@types/glob": "*" + "@types/node": "*" + checksum: 08beaf5d5ac6d6ecb76df74e3f873453feab079b5993f7cdd00bf2789bc2dea6917d5d24e75a5346fe201f396fa8a6eccb1291f97695997e34733f9663228a86 + languageName: node + linkType: hard + "@types/sass@npm:^1.16.0": version: 1.43.1 resolution: "@types/sass@npm:1.43.1" diff --git a/package.json b/package.json index 2f9c386c989a..53323d12fdcd 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "get-template": "cd scripts; yarn get-template", "test": "cd code; yarn test", "lint": "cd code; yarn lint", - "nx": "cd code; yarn nx" + "nx": "cd code; yarn nx", + "ci": "cd code; yarn ci" }, "packageManager": "yarn@3.2.4" }