From 128fe8690e106489b14a2d4157c944726e6b18fc Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 6 Oct 2022 22:31:55 -0400 Subject: [PATCH 01/81] Vite: Set default `base` to `"./"` for subfolder deployments --- code/lib/builder-vite/src/vite-config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index a973f01940fa..452bab0f3d7c 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/code/lib/builder-vite/src/vite-config.ts @@ -45,6 +45,8 @@ export async function commonConfig( configFile: false, cacheDir: 'node_modules/.vite-storybook', root: path.resolve(options.configDir, '..'), + // Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238 + base: './', plugins: await pluginConfig(options), resolve: { preserveSymlinks: isPreservingSymlinks(), From 6826f77114bd011d14df463ab452fbbd66df117e Mon Sep 17 00:00:00 2001 From: Michael Kuckuk <8076094+LBBO@users.noreply.github.com> Date: Sat, 22 Oct 2022 15:36:44 +0200 Subject: [PATCH 02/81] Pass staticDir to config file during init --- code/lib/cli/src/generators/baseGenerator.ts | 2 +- code/lib/cli/src/generators/configure.ts | 1 + code/lib/cli/src/js-package-manager/JsPackageManager.ts | 9 ++------- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 00e6ebae3e52..2e363aa902b7 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -192,6 +192,7 @@ export async function baseGenerator( addons: pnp ? addons.map(wrapForPnp) : addons, extensions, commonJs, + ...(staticDir ? { staticDirs: [staticDir] } : null), ...extraMain, ...(type !== 'framework' ? { @@ -237,7 +238,6 @@ export async function baseGenerator( if (addScripts) { packageManager.addStorybookCommandInScripts({ port: 6006, - staticFolder: staticDir, }); } diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index 6c64d716e49d..b55bc7ed98d3 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -6,6 +6,7 @@ interface ConfigureMainOptions { addons: string[]; extensions?: string[]; commonJs?: boolean; + staticDirs?: string[]; /** * Extra values for main.js * diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index 73eb0bf15450..fd4bd5c90b07 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -305,17 +305,12 @@ export abstract class JsPackageManager { public addStorybookCommandInScripts(options?: { port: number; - staticFolder?: string; preCommand?: string; }) { const sbPort = options?.port ?? 6006; - const storybookCmd = options?.staticFolder - ? `storybook dev -p ${sbPort} -s ${options.staticFolder}` - : `storybook dev -p ${sbPort}`; + const storybookCmd = `storybook dev -p ${sbPort}`; - const buildStorybookCmd = options?.staticFolder - ? `storybook build -s ${options.staticFolder}` - : `storybook build`; + const buildStorybookCmd = `storybook build`; const preCommand = options?.preCommand ? this.getRunCommand(options.preCommand) : undefined; this.addScripts({ From 9eb5c406cfeb379ca96ecb18a40e52323726dd1a Mon Sep 17 00:00:00 2001 From: Michael Kuckuk <8076094+LBBO@users.noreply.github.com> Date: Sat, 22 Oct 2022 15:36:59 +0200 Subject: [PATCH 03/81] Fix typo --- code/lib/cli/src/generators/configure.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index b55bc7ed98d3..945b061759ed 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -13,7 +13,7 @@ interface ConfigureMainOptions { * In order to provide non-serializable data like functions, you can use * { value: '%%yourFunctionCall()%%' } * - * '%% and %%' will be replace. + * '%% and %%' will be replaced. * */ [key: string]: any; From 6c74ed36f1bdc230de3398a5268abc2de2acefb6 Mon Sep 17 00:00:00 2001 From: Michael Kuckuk <8076094+LBBO@users.noreply.github.com> Date: Sat, 22 Oct 2022 15:46:21 +0200 Subject: [PATCH 04/81] Fix relative static path so interface for generators doesn't change --- code/lib/cli/src/generators/baseGenerator.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 2e363aa902b7..a6f8c216f2e8 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -1,3 +1,4 @@ +import path from 'path'; import fse from 'fs-extra'; import { dedent } from 'ts-dedent'; import { NpmOptions } from '../NpmOptions'; @@ -192,7 +193,7 @@ export async function baseGenerator( addons: pnp ? addons.map(wrapForPnp) : addons, extensions, commonJs, - ...(staticDir ? { staticDirs: [staticDir] } : null), + ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), ...extraMain, ...(type !== 'framework' ? { From ffb04a295f537e581d9f49e3aec6309a1b2d061c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 27 Oct 2022 23:11:18 +0200 Subject: [PATCH 05/81] migrate preview-web to tsup --- code/lib/preview-web/package.json | 21 +++++++++++++++++---- code/lib/preview-web/src/PreviewWeb.tsx | 2 -- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/code/lib/preview-web/package.json b/code/lib/preview-web/package.json index 34efd26215e4..69eb8d9d32c6 100644 --- a/code/lib/preview-web/package.json +++ b/code/lib/preview-web/package.json @@ -20,9 +20,17 @@ }, "license": "MIT", "sideEffects": false, - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", "files": [ "dist/**/*", "README.md", @@ -31,7 +39,7 @@ ], "scripts": { "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "node ../../../scripts/prepare.js" + "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addons": "7.0.0-alpha.44", @@ -57,5 +65,10 @@ "publishConfig": { "access": "public" }, + "bundler": { + "entries": [ + "./src/index.ts" + ] + }, "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3" } diff --git a/code/lib/preview-web/src/PreviewWeb.tsx b/code/lib/preview-web/src/PreviewWeb.tsx index 71185cfaa8ab..98d03eb46f68 100644 --- a/code/lib/preview-web/src/PreviewWeb.tsx +++ b/code/lib/preview-web/src/PreviewWeb.tsx @@ -64,8 +64,6 @@ export class PreviewWeb extends Preview; From e95559ca26feab3c086551d1b052d975ffc471c1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 27 Oct 2022 23:45:10 +0200 Subject: [PATCH 06/81] fixes --- code/lib/core-client/src/start.test.ts | 7 ++++--- code/lib/preview-web/package.json | 14 +++++++++++++- code/lib/preview-web/src/PreviewWeb.mockdata.ts | 14 ++++++++------ 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/code/lib/core-client/src/start.test.ts b/code/lib/core-client/src/start.test.ts index 255660db0ff4..554a9f207465 100644 --- a/code/lib/core-client/src/start.test.ts +++ b/code/lib/core-client/src/start.test.ts @@ -7,16 +7,17 @@ import { waitForQuiescence, emitter, mockChannel, -} from '@storybook/preview-web/dist/cjs/PreviewWeb.mockdata'; + // @ts-expect-error (Converted from ts-ignore) +} from '@storybook/preview-web/dist/PreviewWeb.mockdata'; // @ts-expect-error (Converted from ts-ignore) -import { WebView } from '@storybook/preview-web/dist/cjs/WebView'; +import { WebView } from '@storybook/preview-web/dist/WebView'; import type { Store_ModuleExports, Path, Loadable } from '@storybook/types'; import { setGlobalRender } from '@storybook/client-api'; import global from 'global'; import { start as realStart } from './start'; -jest.mock('@storybook/preview-web/dist/cjs/WebView'); +jest.mock('@storybook/preview-web/dist/WebView'); jest.spyOn(WebView.prototype, 'prepareForDocs').mockReturnValue('docs-root'); jest.spyOn(WebView.prototype, 'prepareForStory').mockReturnValue('story-root'); diff --git a/code/lib/preview-web/package.json b/code/lib/preview-web/package.json index 69eb8d9d32c6..614d7f7dfc7f 100644 --- a/code/lib/preview-web/package.json +++ b/code/lib/preview-web/package.json @@ -26,6 +26,16 @@ "import": "./dist/index.mjs", "types": "./dist/index.d.ts" }, + "./PreviewWeb.mockdata": { + "require": "./dist/PreviewWeb.mockdata.js", + "import": "./dist/PreviewWeb.mockdata.mjs", + "types": "./dist/PreviewWeb.mockdata.d.ts" + }, + "./WebView": { + "require": "./dist/WebView.js", + "import": "./dist/WebView.mjs", + "types": "./dist/WebView.d.ts" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -67,7 +77,9 @@ }, "bundler": { "entries": [ - "./src/index.ts" + "./src/index.ts", + "./src/WebView.ts", + "./src/PreviewWeb.mockdata.ts" ] }, "gitHead": "d4965bd328d8f83c279560c7bc8428e490b275f3" diff --git a/code/lib/preview-web/src/PreviewWeb.mockdata.ts b/code/lib/preview-web/src/PreviewWeb.mockdata.ts index 99d92dbf140b..1e4fb4d71d03 100644 --- a/code/lib/preview-web/src/PreviewWeb.mockdata.ts +++ b/code/lib/preview-web/src/PreviewWeb.mockdata.ts @@ -1,3 +1,5 @@ +/// ; + import { EventEmitter } from 'events'; import { DOCS_RENDERED, @@ -7,8 +9,8 @@ import { STORY_RENDER_PHASE_CHANGED, STORY_THREW_EXCEPTION, } from '@storybook/core-events'; -import { StoryIndex, TeardownRenderToDOM } from '@storybook/store'; -import { RenderPhase } from './PreviewWeb'; +import type { Store_StoryIndex, Store_TeardownRenderToDOM } from '@storybook/types'; +import type { RenderPhase } from './render/StoryRender'; export const componentOneExports = { default: { @@ -42,7 +44,7 @@ export const extraComponentOneExports = { e: {}, }; export const importFn = jest.fn( - async (path) => + async (path: string) => ({ './src/ComponentOne.stories.js': componentOneExports, './src/ComponentTwo.stories.js': componentTwoExports, @@ -55,7 +57,7 @@ export const docsRenderer = { render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()), unmount: jest.fn(), }; -export const teardownRenderToDOM: jest.Mock = jest.fn(); +export const teardownRenderToDOM: jest.Mock = jest.fn(); export const projectAnnotations = { globals: { a: 'b' }, globalTypes: {}, @@ -66,7 +68,7 @@ export const projectAnnotations = { }; export const getProjectAnnotations = jest.fn(() => projectAnnotations as any); -export const storyIndex: StoryIndex = { +export const storyIndex: Store_StoryIndex = { v: 4, entries: { 'component-one--docs': { @@ -146,7 +148,7 @@ export const waitForEvents = ( // ensure you call `mockChannel.emit.mockClear()` before `waitFor...` if ( mockChannel.emit.mock.calls.find( - (call) => events.includes(call[0]) && predicate(...call.slice(1)) + (call: string[]) => events.includes(call[0]) && predicate(...call.slice(1)) ) ) { return Promise.resolve(null); From ba6bfb7a020721254ea892e85949d68076d0b55c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=B4=8E=E0=B4=A4=E0=B4=BF=E0=B4=B0=E0=B4=BE=E0=B4=B3?= =?UTF-8?q?=E0=B4=BF=E0=B4=95=E0=B5=8D=E0=B4=95=E0=B5=8A=E0=B4=B0=E0=B5=81?= =?UTF-8?q?=20=E0=B4=AA=E0=B5=8B=E0=B4=B0=E0=B4=BE=E0=B4=B3=E0=B4=BF?= <108031802+pankali@users.noreply.github.com> Date: Fri, 28 Oct 2022 01:49:56 +0200 Subject: [PATCH 07/81] Update Code of Conduct to Contributor Covenant v2.1 --- CODE_OF_CONDUCT.md | 135 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 107 insertions(+), 28 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 522981138eb7..45d257b29a9b 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,54 +1,133 @@ + # Contributor Covenant Code of Conduct ## Our Pledge -In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone, regardless of age, body +size, visible or invisible disability, ethnicity, sex characteristics, gender +identity and expression, level of experience, education, socio-economic status, +nationality, personal appearance, race, caste, color, religion, or sexual +identity and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, +diverse, inclusive, and healthy community. ## Our Standards -Examples of behavior that contributes to creating a positive environment include: +Examples of behavior that contributes to a positive environment for our +community include: -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members +* Demonstrating empathy and kindness toward other people +* Being respectful of differing opinions, viewpoints, and experiences +* Giving and gracefully accepting constructive feedback +* Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +* Focusing on what is best not just for us as individuals, but for the overall + community -Examples of unacceptable behavior by participants include: +Examples of unacceptable behavior include: -- The use of sexualized language or imagery and unwelcome sexual attention or advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a professional setting +* The use of sexualized language or imagery, and sexual attention or advances of + any kind +* Trolling, insulting or derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or email address, + without their explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting -## Our Responsibilities +## Enforcement Responsibilities -Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. +Community leaders are responsible for clarifying and enforcing our standards of +acceptable behavior and will take appropriate and fair corrective action in +response to any behavior that they deem inappropriate, threatening, offensive, +or harmful. -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. +Community leaders have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, and will communicate reasons for moderation +decisions when appropriate. ## Scope -This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. +This Code of Conduct applies within all community spaces, and also applies when +an individual is officially representing the community in public spaces. +Examples of representing our community include using an official e-mail address, +posting via an official social media account, or acting as an appointed +representative at an online or offline event. ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members: +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported to the community leaders responsible for enforcement at +[INSERT CONTACT METHOD]. +All complaints will be reviewed and investigated promptly and fairly. + +All community leaders are obligated to respect the privacy and security of the +reporter of any incident. + +## Enforcement Guidelines + +Community leaders will follow these Community Impact Guidelines in determining +the consequences for any action they deem in violation of this Code of Conduct: + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed +unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing +clarity around the nature of the violation and an explanation of why the +behavior was inappropriate. A public apology may be requested. -Norbert de Langen ~ @ndelangen - `ndelangen@me.com` -Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com` -Tom Coleman ~ @tmeasday - `tom@thesnail.org` -Michael Shilman ~ @shilman - `michael@lab80.co` -Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru` +### 2. Warning -The steering committee will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. +**Community Impact**: A violation through a single incident or series of +actions. -Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. +**Consequence**: A warning with consequences for continued behavior. No +interaction with the people involved, including unsolicited interaction with +those enforcing the Code of Conduct, for a specified period of time. This +includes avoiding interactions in community spaces as well as external channels +like social media. Violating these terms may lead to a temporary or permanent +ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including +sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public +communication with the community for a specified period of time. No public or +private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. +Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community +standards, including sustained inappropriate behavior, harassment of an +individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within the +community. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 2.1, available at +[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. + +Community Impact Guidelines were inspired by +[Mozilla's code of conduct enforcement ladder][Mozilla CoC]. + +For answers to common questions about this code of conduct, see the FAQ at +[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at +[https://www.contributor-covenant.org/translations][translations]. -[homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ +[homepage]: https://www.contributor-covenant.org +[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html +[Mozilla CoC]: https://github.com/mozilla/diversity +[FAQ]: https://www.contributor-covenant.org/faq +[translations]: https://www.contributor-covenant.org/translations From 2aff120a62f44978d0b9d8c337222a4759eb4938 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 28 Oct 2022 13:31:16 +0800 Subject: [PATCH 08/81] CSF-tools: Add source extraction WIP --- code/lib/csf-tools/package.json | 1 + code/lib/csf-tools/src/CsfFile.test.ts | 1 - code/lib/csf-tools/src/CsfFile.ts | 21 +++ code/lib/csf-tools/src/enrichCsf.test.ts | 163 +++++++++++++++++++++++ code/lib/csf-tools/src/enrichCsf.ts | 30 +++++ code/lib/csf-tools/src/index.ts | 1 + 6 files changed, 216 insertions(+), 1 deletion(-) create mode 100644 code/lib/csf-tools/src/enrichCsf.test.ts create mode 100644 code/lib/csf-tools/src/enrichCsf.ts diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 1719730842dc..66ca69e4ef0d 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -44,6 +44,7 @@ "dependencies": { "@babel/generator": "^7.12.11", "@babel/parser": "^7.12.11", + "@babel/template": "^7.12.11", "@babel/traverse": "^7.12.11", "@babel/types": "^7.12.11", "@storybook/csf": "next", diff --git a/code/lib/csf-tools/src/CsfFile.test.ts b/code/lib/csf-tools/src/CsfFile.test.ts index 68298961abfd..7ca7ff83acb0 100644 --- a/code/lib/csf-tools/src/CsfFile.test.ts +++ b/code/lib/csf-tools/src/CsfFile.test.ts @@ -5,7 +5,6 @@ import { dedent } from 'ts-dedent'; import yaml from 'js-yaml'; import { loadCsf } from './CsfFile'; -// @ts-expect-error (Converted from ts-ignore) expect.addSnapshotSerializer({ print: (val: any) => yaml.dump(val).trimEnd(), test: (val) => typeof val !== 'string', diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts index db10bc4b9305..a6844d06ba72 100644 --- a/code/lib/csf-tools/src/CsfFile.ts +++ b/code/lib/csf-tools/src/CsfFile.ts @@ -212,6 +212,27 @@ export class CsfFile { this._meta = meta; } + getStoryExport(key: string) { + let node = this._storyExports[key] as t.Node; + node = t.isVariableDeclarator(node) ? node.init : node; + if (t.isCallExpression(node)) { + const { callee, arguments: bindArguments } = node; + if ( + t.isMemberExpression(callee) && + t.isIdentifier(callee.object) && + t.isIdentifier(callee.property) && + callee.property.name === 'bind' && + (bindArguments.length === 0 || + (bindArguments.length === 1 && + t.isObjectExpression(bindArguments[0]) && + bindArguments[0].properties.length === 0)) + ) { + node = this._templates[callee.object.name]; + } + } + return node; + } + parse() { // eslint-disable-next-line @typescript-eslint/no-this-alias const self = this; diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts new file mode 100644 index 000000000000..7978c77bfe00 --- /dev/null +++ b/code/lib/csf-tools/src/enrichCsf.test.ts @@ -0,0 +1,163 @@ +/// ; +/* eslint-disable no-underscore-dangle */ + +import { dedent } from 'ts-dedent'; +import { loadCsf } from './CsfFile'; +import { enrichCsf, extractSource } from './enrichCsf'; + +expect.addSnapshotSerializer({ + print: (val: any) => val, + test: (val) => true, +}); + +const source = (csfExport: string) => { + const code = dedent` + export default { title: 'Button' } + ${csfExport} + `; + const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle }).parse(); + const exportNode = Object.values(csf._storyExports)[0]; + return extractSource(exportNode); +}; + +describe('extractSource', () => { + it('csf1', () => { + expect( + source(dedent` + export const Basic = () => - 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..dbc6760c0809 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: () => '@storybook/cli', })); jest.mock('fs-extra', () => ({ @@ -68,27 +69,31 @@ 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'); expect(copySpy).toHaveBeenNthCalledWith( 1, - 'rendererAssets/common', + '@storybook/cli/rendererAssets/common', './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..00ebb767831f 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[SupportedLanguage.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/package.json b/code/package.json index bf4fc165e6ff..bd86904b42de 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-tests": "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 f1ac24365580..b0982f3a8173 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 100% rename from code/lib/cli/rendererAssets/html/ts/Button.stories.ts rename to code/renderers/html/template/cli/ts/Button.stories.ts 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 100% rename from code/lib/cli/rendererAssets/html/ts/Page.stories.ts rename to code/renderers/html/template/cli/ts/Page.stories.ts 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 1fec4e5f8ec5..3e3211c9361f 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 99% rename from code/lib/cli/rendererAssets/preact/Page.jsx rename to code/renderers/preact/template/cli/Page.jsx index a88603626679..4344c071980c 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'; 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 6d0de34ceac6..e8a348b53d7a 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 100% rename from code/lib/cli/rendererAssets/react/js/Page.jsx rename to code/renderers/react/template/cli/js/Page.jsx 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 100% rename from code/lib/cli/rendererAssets/react/ts/Page.tsx rename to code/renderers/react/template/cli/ts/Page.tsx 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 02aa43f5a510..2980d0cd1df4 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 5381fd59c6cb..b0035fc86510 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 a4e238740cff..52141ecbaa18 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 539842d17c09..71d4ed7828e1 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 a08e573ed0d8..4634190ed5a9 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 2c8173b4b2c7..c9745b97b162 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" } From 96e68e49209a7f0884d8e3afee18235c78e6d065 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Oct 2022 11:05:22 +0200 Subject: [PATCH 54/81] Migrate JS templates to CSF3 --- .../ember/template/cli/1-Button.stories.js | 62 +++++++++-------- .../html/template/cli/js/Button.stories.js | 48 ++++++------- .../html/template/cli/js/Header.stories.js | 15 ++-- .../html/template/cli/js/Page.stories.js | 19 +++--- .../preact/template/cli/Button.stories.jsx | 37 +++++----- .../preact/template/cli/Header.stories.jsx | 14 ++-- .../preact/template/cli/Page.stories.jsx | 17 ++--- .../react/template/cli/js/Button.stories.jsx | 37 +++++----- .../react/template/cli/js/Header.stories.jsx | 15 ++-- .../react/template/cli/js/Page.stories.jsx | 17 ++--- .../svelte/template/cli/Button.stories.js | 50 +++++++------- .../svelte/template/cli/Header.stories.js | 31 ++++----- .../svelte/template/cli/Page.stories.js | 30 ++++---- .../vue/template/cli/Button.stories.js | 48 ++++++------- .../vue/template/cli/Header.stories.js | 27 ++++---- .../vue/template/cli/Page.stories.js | 26 +++---- .../vue3/template/cli/Button.stories.js | 68 +++++++++++-------- .../vue3/template/cli/Header.stories.js | 43 ++++++------ .../vue3/template/cli/Page.stories.js | 35 ++++++---- .../template/cli/js/Button.stories.js | 40 +++++------ .../template/cli/js/Header.stories.js | 15 ++-- .../template/cli/js/Page.stories.js | 19 +++--- 22 files changed, 376 insertions(+), 337 deletions(-) diff --git a/code/frameworks/ember/template/cli/1-Button.stories.js b/code/frameworks/ember/template/cli/1-Button.stories.js index 5be754973287..9aff5c61cb45 100644 --- a/code/frameworks/ember/template/cli/1-Button.stories.js +++ b/code/frameworks/ember/template/cli/1-Button.stories.js @@ -5,6 +5,10 @@ import { linkTo } from '@storybook/addon-links'; // More on default export: https://storybook.js.org/docs/ember/writing-stories/introduction#default-export export default { title: 'Button', + render: (args) => ({ + template: hbs``, + context: args, + }), // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes argTypes: { label: { control: 'text' }, @@ -12,46 +16,46 @@ export default { }; // More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args -const Template = (args) => ({ - template: hbs``, - context: args, -}); - -export const Text = Template.bind({}); -// More on args: https://storybook.js.org/docs/ember/writing-stories/args -Text.args = { - label: 'Button', - onClick: action('onClick'), +export const Text = { + args: { + label: 'Button', + onClick: action('onClick'), + }, }; -export const Emoji = Template.bind({}); -Emoji.args = { - label: '😀 😎 👍 💯', +export const Emoji = { + args: { + label: '😀 😎 👍 💯', + }, }; -export const TextWithAction = () => ({ - template: hbs` +export const TextWithAction = { + render: () => ({ + template: hbs` `, - context: { - onClick: () => action('This was clicked')(), + context: { + onClick: () => action('This was clicked')(), + }, + }), + name: 'With an action', + parameters: { + notes: 'My notes on a button with emojis', }, -}); - -TextWithAction.storyName = 'With an action'; -TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; +}; -export const ButtonWithLinkToAnotherStory = () => ({ - template: hbs` +export const ButtonWithLinkToAnotherStory = { + render: () => ({ + template: hbs` `, - context: { - onClick: linkTo('example-introduction--page'), - }, -}); - -ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; + context: { + onClick: linkTo('example-introduction--page'), + }, + }), + name: 'button with link to another story', +}; diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js index 63d4f9147145..cdc3d1bfb20b 100644 --- a/code/renderers/html/template/cli/js/Button.stories.js +++ b/code/renderers/html/template/cli/js/Button.stories.js @@ -3,6 +3,12 @@ import { createButton } from './Button'; // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export export default { title: 'Example/Button', + // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args + render: ({ label, ...args }) => { + // You can either use a function to create DOM elements or use a plain html string! + // return `
${label}
`; + return createButton({ label, ...args }); + }, // More on argTypes: https://storybook.js.org/docs/html/api/argtypes argTypes: { backgroundColor: { control: 'color' }, @@ -16,33 +22,29 @@ export default { }, }; -// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args -const Template = ({ label, ...args }) => { - // You can either use a function to create DOM elements or use a plain html string! - // return `
${label}
`; - return createButton({ label, ...args }); -}; - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/html/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', +export const Primary = { + args: { + primary: true, + label: 'Button', + }, }; -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', +export const Secondary = { + args: { + label: 'Button', + }, }; -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', +export const Large = { + args: { + size: 'large', + label: 'Button', + }, }; -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', +export const Small = { + args: { + size: 'small', + label: 'Button', + }, }; diff --git a/code/renderers/html/template/cli/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js index 553f3f8760f2..8cc98e523abd 100644 --- a/code/renderers/html/template/cli/js/Header.stories.js +++ b/code/renderers/html/template/cli/js/Header.stories.js @@ -2,6 +2,7 @@ import { createHeader } from './Header'; export default { title: 'Example/Header', + render: (args) => createHeader(args), parameters: { // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout layout: 'fullscreen', @@ -14,14 +15,12 @@ export default { }, }; -const Template = (args) => createHeader(args); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: { - name: 'Jane Doe', +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, }, }; -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; +export const LoggedOut = {}; diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js index 3305bde25d9e..047e0ac7ca5e 100644 --- a/code/renderers/html/template/cli/js/Page.stories.js +++ b/code/renderers/html/template/cli/js/Page.stories.js @@ -3,21 +3,22 @@ import { createPage } from './Page'; export default { title: 'Example/Page', + render: () => createPage(), parameters: { // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout layout: 'fullscreen', }, }; -const Template = () => createPage(); - -export const LoggedOut = Template.bind({}); - -export const LoggedIn = Template.bind({}); +export const LoggedOut = {}; // More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing -LoggedIn.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { name: /Log in/i }); - await userEvent.click(loginButton); +export const LoggedIn = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = await canvas.getByRole('button', { + name: /Log in/i, + }); + await userEvent.click(loginButton); + }, }; diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx index 080a4bfc3d61..a26bd4ea2839 100644 --- a/code/renderers/preact/template/cli/Button.stories.jsx +++ b/code/renderers/preact/template/cli/Button.stories.jsx @@ -12,28 +12,29 @@ export default { }; // More on component templates: https://storybook.js.org/docs/preact/writing-stories/introduction#using-args -const Template = (args) =>