From af1f49c44eaa41c33690d0937f66888feab57202 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Oct 2022 12:19:49 +0200 Subject: [PATCH 01/22] delete html-kitchen-sink example --- .../html-kitchen-sink/.storybook/main.ts | 48 -- .../html-kitchen-sink/.storybook/preview.js | 5 - .../html-kitchen-sink/babel.config.json | 3 - .../examples/html-kitchen-sink/jest.config.js | 11 - code/examples/html-kitchen-sink/package.json | 47 -- .../html-kitchen-sink/postcss.config.js | 8 - .../addon-actions.stories.storyshot | 78 --- .../addon-backgrounds.stories.storyshot | 17 - .../addon-controls.stories.storyshot | 13 - .../addon-docs.stories.storyshot | 31 -- .../addon-jest.stories.storyshot | 3 - .../__snapshots__/button.stories.storyshot | 49 -- .../__snapshots__/loaders.stories.storyshot | 7 - .../source-loader.stories.storyshot | 21 - .../__snapshots__/welcome.stories.storyshot | 101 ---- .../stories/addon-docs.stories.mdx | 58 --- .../stories/addon-jest.stories.js | 10 - .../stories/addon-jest.testresults.json | 105 ---- .../html-kitchen-sink/stories/button.html | 1 - .../stories/button.stories.js | 28 -- .../stories/from-essentials/Button.stories.ts | 44 -- .../stories/from-essentials/Button.ts | 51 -- .../stories/from-essentials/Header.stories.ts | 21 - .../stories/from-essentials/Header.ts | 56 --- .../stories/from-essentials/Page.stories.ts | 25 - .../stories/from-essentials/Page.ts | 78 --- .../__snapshots__/Button.stories.storyshot | 29 -- .../__snapshots__/Header.stories.storyshot | 129 ----- .../__snapshots__/Page.stories.storyshot | 417 ---------------- .../from-essentials/assets/code-brackets.svg | 1 - .../stories/from-essentials/assets/colors.svg | 1 - .../from-essentials/assets/comments.svg | 1 - .../from-essentials/assets/direction.svg | 1 - .../stories/from-essentials/assets/flow.svg | 1 - .../stories/from-essentials/assets/plugin.svg | 1 - .../stories/from-essentials/assets/repo.svg | 1 - .../from-essentials/assets/stackalt.svg | 1 - .../stories/from-essentials/button.css | 30 -- .../stories/from-essentials/header.css | 26 - .../stories/from-essentials/page.css | 69 --- .../html-kitchen-sink/stories/logo.svg | 1 - .../stories/source-loader.stories.js | 26 - .../html-kitchen-sink/stories/welcome.css | 25 - .../html-kitchen-sink/stories/welcome.html | 30 -- .../stories/welcome.stories.js | 8 - .../tests/addon-jest.config.json | 10 - .../tests/addon-jest.test.js | 32 -- .../html-kitchen-sink/tests/htmlshots.test.js | 9 - code/examples/html-kitchen-sink/typings.d.ts | 6 - code/jest.config.js | 1 - .../html-kitchen-sink_manager-dev-posix | 3 - .../html-kitchen-sink_manager-dev-windows | 224 --------- .../html-kitchen-sink_manager-prod-posix | 3 - .../html-kitchen-sink_manager-prod-windows | 224 --------- .../html-kitchen-sink_preview-dev-posix | 223 --------- .../html-kitchen-sink_preview-dev-windows | 468 ------------------ .../html-kitchen-sink_preview-prod-posix | 221 --------- .../html-kitchen-sink_preview-prod-windows | 465 ----------------- code/lib/core-server/src/core-presets.test.ts | 2 +- code/workspace.json | 5 - 60 files changed, 1 insertion(+), 3612 deletions(-) delete mode 100644 code/examples/html-kitchen-sink/.storybook/main.ts delete mode 100644 code/examples/html-kitchen-sink/.storybook/preview.js delete mode 100644 code/examples/html-kitchen-sink/babel.config.json delete mode 100644 code/examples/html-kitchen-sink/jest.config.js delete mode 100644 code/examples/html-kitchen-sink/package.json delete mode 100644 code/examples/html-kitchen-sink/postcss.config.js delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/addon-controls.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/loaders.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/source-loader.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx delete mode 100644 code/examples/html-kitchen-sink/stories/addon-jest.stories.js delete mode 100644 code/examples/html-kitchen-sink/stories/addon-jest.testresults.json delete mode 100644 code/examples/html-kitchen-sink/stories/button.html delete mode 100644 code/examples/html-kitchen-sink/stories/button.stories.js delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/Button.stories.ts delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/Button.ts delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/Header.stories.ts delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/Header.ts delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/Page.stories.ts delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/Page.ts delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/__snapshots__/Button.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/__snapshots__/Header.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/__snapshots__/Page.stories.storyshot delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/code-brackets.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/colors.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/comments.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/direction.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/flow.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/plugin.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/repo.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/assets/stackalt.svg delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/button.css delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/header.css delete mode 100644 code/examples/html-kitchen-sink/stories/from-essentials/page.css delete mode 100644 code/examples/html-kitchen-sink/stories/logo.svg delete mode 100644 code/examples/html-kitchen-sink/stories/source-loader.stories.js delete mode 100644 code/examples/html-kitchen-sink/stories/welcome.css delete mode 100644 code/examples/html-kitchen-sink/stories/welcome.html delete mode 100644 code/examples/html-kitchen-sink/stories/welcome.stories.js delete mode 100644 code/examples/html-kitchen-sink/tests/addon-jest.config.json delete mode 100644 code/examples/html-kitchen-sink/tests/addon-jest.test.js delete mode 100644 code/examples/html-kitchen-sink/tests/htmlshots.test.js delete mode 100644 code/examples/html-kitchen-sink/typings.d.ts delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-windows delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-windows delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-windows delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix delete mode 100644 code/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-windows diff --git a/code/examples/html-kitchen-sink/.storybook/main.ts b/code/examples/html-kitchen-sink/.storybook/main.ts deleted file mode 100644 index f0a928ed525f..000000000000 --- a/code/examples/html-kitchen-sink/.storybook/main.ts +++ /dev/null @@ -1,48 +0,0 @@ -import type { StorybookConfig } from '@storybook/html-webpack5'; - -const mainConfig: StorybookConfig = { - // this dirname is because we run tests from project root - stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], - logLevel: 'debug', - addons: [ - '@storybook/addon-docs', - '@storybook/addon-a11y', - '@storybook/addon-actions', - '@storybook/addon-backgrounds', - '@storybook/addon-controls', - '@storybook/addon-jest', - '@storybook/addon-links', - { - name: '@storybook/addon-postcss', - options: { - postcssLoaderOptions: { - implementation: require('postcss'), // eslint-disable-line global-require - }, - }, - }, - '@storybook/addon-storysource', - '@storybook/addon-viewport', - '@storybook/addon-highlight', - ], - core: { - channelOptions: { allowFunction: false, maxDepth: 10 }, - disableTelemetry: true, - }, - features: { - buildStoriesJson: true, - breakingChangesV7: true, - }, // Test code for built-in stories.json extraction - // - // refs: { - // 'react-ts': { - // title: 'React TS', - // // development - // url: 'http://localhost:9011', - // // production - // // url: 'http://localhost:8080', - // }, - // }, - framework: '@storybook/html-webpack5', -}; - -module.exports = mainConfig; diff --git a/code/examples/html-kitchen-sink/.storybook/preview.js b/code/examples/html-kitchen-sink/.storybook/preview.js deleted file mode 100644 index 9952d3d77794..000000000000 --- a/code/examples/html-kitchen-sink/.storybook/preview.js +++ /dev/null @@ -1,5 +0,0 @@ -export const parameters = { - docs: { - iframeHeight: '200px', - }, -}; diff --git a/code/examples/html-kitchen-sink/babel.config.json b/code/examples/html-kitchen-sink/babel.config.json deleted file mode 100644 index e15ac017a2e2..000000000000 --- a/code/examples/html-kitchen-sink/babel.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["@babel/preset-typescript"] -} diff --git a/code/examples/html-kitchen-sink/jest.config.js b/code/examples/html-kitchen-sink/jest.config.js deleted file mode 100644 index 96bbe6655e13..000000000000 --- a/code/examples/html-kitchen-sink/jest.config.js +++ /dev/null @@ -1,11 +0,0 @@ -const config = require('../../jest.config'); - -module.exports = { - ...config, - roots: [__dirname], - transform: { - ...config.transform, - '.*\\.(html)$': '/node_modules/jest-raw-loader', - }, - moduleFileExtensions: [...config.moduleFileExtensions, 'html'], -}; diff --git a/code/examples/html-kitchen-sink/package.json b/code/examples/html-kitchen-sink/package.json deleted file mode 100644 index 438a57f9468a..000000000000 --- a/code/examples/html-kitchen-sink/package.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "name": "html-kitchen-sink", - "version": "7.0.0-alpha.34", - "private": true, - "description": "", - "keywords": [], - "license": "MIT", - "author": "", - "main": "index.js", - "scripts": { - "build-storybook": "storybook build", - "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json", - "storybook": "storybook dev -p 9006 --no-manager-cache" - }, - "devDependencies": { - "@storybook/addon-a11y": "7.0.0-alpha.34", - "@storybook/addon-actions": "7.0.0-alpha.34", - "@storybook/addon-backgrounds": "7.0.0-alpha.34", - "@storybook/addon-controls": "7.0.0-alpha.34", - "@storybook/addon-docs": "7.0.0-alpha.34", - "@storybook/addon-highlight": "7.0.0-alpha.34", - "@storybook/addon-jest": "7.0.0-alpha.34", - "@storybook/addon-links": "7.0.0-alpha.34", - "@storybook/addon-postcss": "^2.0.0", - "@storybook/addon-storyshots": "7.0.0-alpha.34", - "@storybook/addon-storysource": "7.0.0-alpha.34", - "@storybook/addon-viewport": "7.0.0-alpha.34", - "@storybook/addons": "7.0.0-alpha.34", - "@storybook/client-api": "7.0.0-alpha.34", - "@storybook/core-events": "7.0.0-alpha.34", - "@storybook/html": "7.0.0-alpha.34", - "@storybook/html-webpack5": "7.0.0-alpha.34", - "@storybook/source-loader": "7.0.0-alpha.34", - "autoprefixer": "^10.0.1", - "eventemitter3": "^4.0.7", - "format-json": "^1.0.3", - "global": "^4.4.0", - "postcss": "^8.2.4", - "postcss-color-rebeccapurple": "^6.0.0", - "storybook": "7.0.0-alpha.34" - }, - "storybook": { - "chromatic": { - "projectToken": "e8zolxoyg8o" - } - } -} diff --git a/code/examples/html-kitchen-sink/postcss.config.js b/code/examples/html-kitchen-sink/postcss.config.js deleted file mode 100644 index 253ca7d45395..000000000000 --- a/code/examples/html-kitchen-sink/postcss.config.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - plugins: [ - // eslint-disable-next-line global-require - require('autoprefixer'), - // eslint-disable-next-line global-require - require('postcss-color-rebeccapurple'), - ], -}; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot deleted file mode 100644 index 803a63aafdce..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot +++ /dev/null @@ -1,78 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Actions Deprecated decorators - Multiple actions + config 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Deprecated decorators - Multiple actions 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Deprecated decorators - Multiple actions, object 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Deprecated decorators - Single action 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Hello World 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Multiple actions + config 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Multiple actions 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Multiple actions, object + config 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Multiple actions, object 1`] = ` - -`; - -exports[`Storyshots Addons/Actions Multiple actions, selector 1`] = ` - - -`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot deleted file mode 100644 index 7a5e0008d7b6..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Backgrounds story 1 1`] = ` - - You should be able to switch backgrounds for this story - -`; - -exports[`Storyshots Addons/Backgrounds story 2 1`] = ` - - This one too! - -`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-controls.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/addon-controls.stories.storyshot deleted file mode 100644 index 67525782be1d..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-controls.stories.storyshot +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Controls Bonjour 1`] = ` -
- Bonjour! -
-`; - -exports[`Storyshots Addons/Controls Hello 1`] = ` -
- Hello! -
-`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot deleted file mode 100644 index e4acdbf09b6b..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot +++ /dev/null @@ -1,31 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Docs custom source 1`] = ` -

- Custom source -

-`; - -exports[`Storyshots Addons/Docs function 1`] = ` - -`; - -exports[`Storyshots Addons/Docs heading 1`] = ` -

- Hello World -

-`; - -exports[`Storyshots Addons/Docs standard source 1`] = ` -

- Standard source -

-`; - -exports[`Storyshots Addons/Docs transformed source 1`] = ` -

- Some source -

-`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot deleted file mode 100644 index 437fd6b56c74..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Jest With Tests 1`] = `This story shows test results`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot deleted file mode 100644 index 8402ab0e2536..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot +++ /dev/null @@ -1,49 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Demo Button 1`] = ` - -`; - -exports[`Storyshots Demo Effect 1`] = ` - -`; - -exports[`Storyshots Demo Heading 1`] = ` -

- Hello World -

-`; - -exports[`Storyshots Demo Headings 1`] = ` -
-

- Hello World -

-

- Hello World -

-

- Hello World -

-

- Hello World -

-
-`; - -exports[`Storyshots Demo Script 1`] = ` -
-
- JS alert -
- -
-`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/loaders.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/loaders.stories.storyshot deleted file mode 100644 index 91af9532caf8..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/loaders.stories.storyshot +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Core/Loaders Story 1`] = ` -
- Loaded Value is undefined -
-`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/source-loader.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/source-loader.stories.storyshot deleted file mode 100644 index 8ba05f3c3c96..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/source-loader.stories.storyshot +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/Source loader Button 1`] = ` - -`; - -exports[`Storyshots Addons/Source loader Very simple story 1`] = ` -

- - - - - This is a fragment of HTML - - - - -

-`; diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot deleted file mode 100644 index 8b68425a1eaf..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot +++ /dev/null @@ -1,101 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Welcome Welcome 1`] = ` -
- - -

- Welcome to Storybook for HTML -

- - -

- This is a UI component dev environment for your plain HTML snippets. -

- - -

- - We've added some basic stories inside the - - stories - - directory. - -
- - A story is a single state of one or more UI components. You can have as many stories as you want. - -
- - (Basically a story is like a visual test case.) - -

- - -

- - See these sample - - stories - - - -

- - -

- -

- - -

- - Just like that, you can add your own snippets as stories. - -
- - You can also edit those snippets and see changes right away. - -
- - -

- - -

- - Usually we create stories with smaller UI components in the app. -
- - Have a look at the - - - - Writing Stories - - - - section in our documentation. - -

- - -
-`; diff --git a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx b/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx deleted file mode 100644 index 8ac0ce1377da..000000000000 --- a/code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx +++ /dev/null @@ -1,58 +0,0 @@ -import { Story, Canvas, Meta } from '@storybook/addon-docs'; - -# Storybook Docs for HTML - - - -## Story definition - -Hallelujah! HTML is working out of the box without modification. -How you like them apples?! - - - {'

Hello World

'} - - -## Function stories - - - {() => { - const btn = document.createElement('button'); - btn.innerHTML = 'Hello Button'; - return btn; - }} - - -## Standard source - - - - {'

Standard source

'} - - - -## Custom source - - - - {'

Custom source

'} - - - -## Transformed source - - - `transformed: ${src}` } }} - > - {'

Some source

'} - - - -## Story reference - -You can also reference an existing story from within your MDX file. - - diff --git a/code/examples/html-kitchen-sink/stories/addon-jest.stories.js b/code/examples/html-kitchen-sink/stories/addon-jest.stories.js deleted file mode 100644 index eb80009be86b..000000000000 --- a/code/examples/html-kitchen-sink/stories/addon-jest.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import { withTests as wt } from '@storybook/addon-jest'; -import results from './addon-jest.testresults.json'; - -export default { - title: 'Addons/Jest', - decorators: [wt({ results })], -}; - -export const WithTests = () => 'This story shows test results'; -WithTests.parameters = { jest: 'addon-jest' }; diff --git a/code/examples/html-kitchen-sink/stories/addon-jest.testresults.json b/code/examples/html-kitchen-sink/stories/addon-jest.testresults.json deleted file mode 100644 index 2d270c0f4f92..000000000000 --- a/code/examples/html-kitchen-sink/stories/addon-jest.testresults.json +++ /dev/null @@ -1,105 +0,0 @@ -{ - "numFailedTestSuites": 1, - "numFailedTests": 4, - "numPassedTestSuites": 0, - "numPassedTests": 3, - "numPendingTestSuites": 0, - "numPendingTests": 0, - "numRuntimeErrorTestSuites": 0, - "numTotalTestSuites": 1, - "numTotalTests": 7, - "snapshot": { - "added": 0, - "didUpdate": false, - "failure": false, - "filesAdded": 0, - "filesRemoved": 0, - "filesUnmatched": 0, - "filesUpdated": 0, - "matched": 0, - "total": 0, - "unchecked": 0, - "uncheckedKeys": [], - "unmatched": 0, - "updated": 0 - }, - "startTime": 1525471117521, - "success": false, - "testResults": [ - { - "assertionResults": [ - { - "ancestorTitles": [], - "failureMessages": [], - "fullName": "true should be true", - "location": null, - "status": "passed", - "title": "true should be true" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [], - "fullName": "In a describe: true should still be true", - "location": null, - "status": "passed", - "title": "true should still be true" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [], - "fullName": "In a describe: a list should contain 3 items", - "location": null, - "status": "passed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": ["In a describe: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toEqual(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n\nExpected value to equal:\n \u001b[32m\"everything is awesome\"\u001b[39m\nReceived:\n \u001b[31m\"everything is all right\"\u001b[39m\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:16:39)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "In a describe: everything is awesome", - "location": null, - "status": "failed", - "title": "everything is awesome" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toBe(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n\nExpected value to be:\n \u001b[32mfalse\u001b[39m\nReceived:\n \u001b[31mtrue\u001b[39m\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:22:18)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "A bunch of failing tests: true should still be true", - "location": null, - "status": "failed", - "title": "true should still be true" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31marray\u001b[39m\u001b[2m).toContain(\u001b[22m\u001b[32mvalue\u001b[39m\u001b[2m)\u001b[22m\n\nExpected array:\n \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\nTo contain value:\n \u001b[32m301\u001b[39m\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:26:29)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "A bunch of failing tests: a list should contain 3 items", - "location": null, - "status": "failed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": ["A bunch of failing tests: "], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mfunction\u001b[39m\u001b[2m).toThrow(\u001b[22m\u001b[32mundefined\u001b[39m\u001b[2m)\u001b[22m\n\nExpected the function to throw an error.\nBut it didn't throw anything.\n at Object. (/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js:30:28)\n at Object.asyncFn (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)\n at resolve (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:52:12)\n at new Promise ()\n at mapper (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:39:19)\n at promise.then (/Users/jetbrains/IdeaProjects/storybook/node_modules/jest-jasmine2/build/queue_runner.js:73:82)\n at \n at process._tickCallback (internal/process/next_tick.js:188:7)" - ], - "fullName": "A bunch of failing tests: should work", - "location": null, - "status": "failed", - "title": "should work" - } - ], - "endTime": 1525471122009, - "message": "\u001b[1m\u001b[31m \u001b[1m● \u001b[1mIn a describe: › everything is awesome\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toEqual(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n \n Expected value to equal:\n \u001b[32m\"everything is awesome\"\u001b[39m\n Received:\n \u001b[31m\"everything is all right\"\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 14 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 15 | \u001b[39m test(\u001b[32m'everything is awesome'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 16 | \u001b[39m expect(\u001b[32m'everything is all right'\u001b[39m)\u001b[33m.\u001b[39mtoEqual(\u001b[32m'everything is awesome'\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 17 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 18 | \u001b[39m})\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 19 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:16:39)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › true should still be true\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toBe(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n \n Expected value to be:\n \u001b[32mfalse\u001b[39m\n Received:\n \u001b[31mtrue\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 20 | \u001b[39mdescribe(\u001b[32m'A bunch of failing tests: '\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 21 | \u001b[39m test(\u001b[32m'true should still be true'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 22 | \u001b[39m expect(\u001b[36mtrue\u001b[39m)\u001b[33m.\u001b[39mtoBe(\u001b[36mfalse\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 23 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:22:18)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › a list should contain 3 items\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31marray\u001b[39m\u001b[2m).toContain(\u001b[22m\u001b[32mvalue\u001b[39m\u001b[2m)\u001b[22m\n \n Expected array:\n \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\n To contain value:\n \u001b[32m301\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 26 | \u001b[39m expect([\u001b[32m'a'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'b'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'3'\u001b[39m])\u001b[33m.\u001b[39mtoContain(\u001b[35m301\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 27 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:26:29)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › should work\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mfunction\u001b[39m\u001b[2m).toThrow(\u001b[22m\u001b[32mundefined\u001b[39m\u001b[2m)\u001b[22m\n \n Expected the function to throw an error.\n But it didn't throw anything.\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 30 | \u001b[39m expect(() \u001b[33m=>\u001b[39m {})\u001b[33m.\u001b[39mtoThrow()\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 31 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 32 | \u001b[39m})\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 33 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:30:28)\u001b[2m\u001b[22m\n", - "name": "/Users/jetbrains/IdeaProjects/storybook/examples/official-storybook/tests/addon-jest.test.js", - "startTime": 1525471118647, - "status": "failed", - "summary": "" - } - ], - "wasInterrupted": false -} diff --git a/code/examples/html-kitchen-sink/stories/button.html b/code/examples/html-kitchen-sink/stories/button.html deleted file mode 100644 index 715a59df0454..000000000000 --- a/code/examples/html-kitchen-sink/stories/button.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/code/examples/html-kitchen-sink/stories/button.stories.js b/code/examples/html-kitchen-sink/stories/button.stories.js deleted file mode 100644 index a8f079cafe0f..000000000000 --- a/code/examples/html-kitchen-sink/stories/button.stories.js +++ /dev/null @@ -1,28 +0,0 @@ -import global from 'global'; -import { useEffect } from '@storybook/client-api'; - -const { document } = global; - -export default { - title: 'Demo', -}; - -export const Heading = () => '

Hello World

'; -export const Headings = () => - '

Hello World

Hello World

Hello World

Hello World

'; - -export const Button = () => { - const btn = document.createElement('button'); - btn.innerHTML = 'Hello Button'; - return btn; -}; - -export const Effect = () => { - useEffect(() => { - document.getElementById('button').style.backgroundColor = 'yellow'; - }); - - return ''; -}; - -export const Script = () => '
JS alert
'; diff --git a/code/examples/html-kitchen-sink/stories/from-essentials/Button.stories.ts b/code/examples/html-kitchen-sink/stories/from-essentials/Button.stories.ts deleted file mode 100644 index 5a0f7590faeb..000000000000 --- a/code/examples/html-kitchen-sink/stories/from-essentials/Button.stories.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/html'; -import { createButton, ButtonProps } from './Button'; - -export default { - title: 'Example/Button', - argTypes: { - label: { control: 'text' }, - primary: { control: 'boolean' }, - backgroundColor: { control: 'color' }, - size: { - control: { type: 'select', options: ['small', 'medium', 'large'] }, - }, - onClick: { action: 'onClick' }, - }, -} as Meta; - -const Template: StoryFn = (args) => { - // You can either use a function to create DOM elements or use a plain html string! - // return `
${label}
`; - return createButton(args); -}; - -export const Primary = Template.bind({}); -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/examples/html-kitchen-sink/stories/from-essentials/Button.ts b/code/examples/html-kitchen-sink/stories/from-essentials/Button.ts deleted file mode 100644 index c277d626de61..000000000000 --- a/code/examples/html-kitchen-sink/stories/from-essentials/Button.ts +++ /dev/null @@ -1,51 +0,0 @@ -import global from 'global'; - -import './button.css'; - -const { document } = global; - -export interface ButtonProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: 'small' | 'medium' | 'large'; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; -} - -/** - * Primary UI component for user interaction - */ -export const createButton = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - onClick, -}: ButtonProps) => { - const btn = document.createElement('button'); - btn.type = 'button'; - btn.innerText = label; - btn.addEventListener('click', onClick); - - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' '); - - btn.style.backgroundColor = backgroundColor; - - return btn; -}; diff --git a/code/examples/html-kitchen-sink/stories/from-essentials/Header.stories.ts b/code/examples/html-kitchen-sink/stories/from-essentials/Header.stories.ts deleted file mode 100644 index b1bb5e9f2f9b..000000000000 --- a/code/examples/html-kitchen-sink/stories/from-essentials/Header.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/html'; -import { createHeader, HeaderProps } from './Header'; - -export default { - title: 'Example/Header', - argTypes: { - onLogin: { action: 'onLogin' }, - onLogout: { action: 'onLogout' }, - onCreateAccount: { action: 'onCreateAccount' }, - }, -} as Meta; - -const Template: StoryFn = (args) => createHeader(args); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: {}, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/examples/html-kitchen-sink/stories/from-essentials/Header.ts b/code/examples/html-kitchen-sink/stories/from-essentials/Header.ts deleted file mode 100644 index 8903b9c6441c..000000000000 --- a/code/examples/html-kitchen-sink/stories/from-essentials/Header.ts +++ /dev/null @@ -1,56 +0,0 @@ -import global from 'global'; - -import './header.css'; -import { createButton } from './Button'; - -const { document } = global; - -export interface HeaderProps { - user?: {}; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; -} - -export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: HeaderProps) => { - const header = document.createElement('header'); - - const wrapper = document.createElement('div'); - wrapper.className = 'wrapper'; - - const logo = `
- - - - - - - -

Acme

-
`; - - wrapper.insertAdjacentHTML('afterbegin', logo); - - const account = document.createElement('div'); - if (user) { - account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout })); - } else { - account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin })); - account.appendChild( - createButton({ - size: 'small', - label: 'Sign up', - onClick: onCreateAccount, - primary: true, - }) - ); - } - wrapper.appendChild(account); - header.appendChild(wrapper); - - return header; -}; diff --git a/code/examples/html-kitchen-sink/stories/from-essentials/Page.stories.ts b/code/examples/html-kitchen-sink/stories/from-essentials/Page.stories.ts deleted file mode 100644 index a02738368cdb..000000000000 --- a/code/examples/html-kitchen-sink/stories/from-essentials/Page.stories.ts +++ /dev/null @@ -1,25 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/html'; -import { createPage } from './Page'; -import * as HeaderStories from './Header.stories'; -import { HeaderProps } from './Header'; - -export default { - title: 'Example/Page', - argTypes: { - onLogin: { action: 'onLogin' }, - onLogout: { action: 'onLogout' }, - onCreateAccount: { action: 'onCreateAccount' }, - }, -} as Meta; - -const Template: StoryFn = (args) => createPage(args); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - ...HeaderStories.LoggedIn.args, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = { - ...HeaderStories.LoggedOut.args, -}; diff --git a/code/examples/html-kitchen-sink/stories/from-essentials/Page.ts b/code/examples/html-kitchen-sink/stories/from-essentials/Page.ts deleted file mode 100644 index accf23d14c00..000000000000 --- a/code/examples/html-kitchen-sink/stories/from-essentials/Page.ts +++ /dev/null @@ -1,78 +0,0 @@ -import global from 'global'; - -import './page.css'; -import { createHeader } from './Header'; - -const { document } = global; - -export interface PageProps { - user?: {}; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; -} - -export const createPage = ({ user, onLogout, onLogin, onCreateAccount }: PageProps) => { - const article = document.createElement('article'); - - const header = createHeader({ onLogin, onLogout, onCreateAccount, user }); - article.appendChild(header); - const section = ` -
-

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 -
-
-`; - - article.insertAdjacentHTML('beforeend', section); - - return article; -}; diff --git a/code/examples/html-kitchen-sink/stories/from-essentials/__snapshots__/Button.stories.storyshot b/code/examples/html-kitchen-sink/stories/from-essentials/__snapshots__/Button.stories.storyshot deleted file mode 100644 index 91d7916acb88..000000000000 --- a/code/examples/html-kitchen-sink/stories/from-essentials/__snapshots__/Button.stories.storyshot +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Example/Button Large 1`] = ` -`; diff --git a/code/renderers/html/template/components/Form.js b/code/renderers/html/template/components/Form.js new file mode 100644 index 000000000000..56ae1040c62d --- /dev/null +++ b/code/renderers/html/template/components/Form.js @@ -0,0 +1 @@ +export const Form = `
`; diff --git a/code/renderers/html/template/components/Html.js b/code/renderers/html/template/components/Html.js new file mode 100644 index 000000000000..b3d2937eae16 --- /dev/null +++ b/code/renderers/html/template/components/Html.js @@ -0,0 +1 @@ +export const Html = `
`; diff --git a/code/renderers/html/template/components/Pre.js b/code/renderers/html/template/components/Pre.js new file mode 100644 index 000000000000..da479a2f96f3 --- /dev/null +++ b/code/renderers/html/template/components/Pre.js @@ -0,0 +1 @@ +export const Pre = `
`;
diff --git a/code/renderers/html/template/components/index.js b/code/renderers/html/template/components/index.js
new file mode 100644
index 000000000000..4d08c9813587
--- /dev/null
+++ b/code/renderers/html/template/components/index.js
@@ -0,0 +1,9 @@
+import globalThis from 'global';
+
+import { Button } from './Button';
+import { Pre } from './Pre';
+import { Form } from './Form';
+import { Html } from './Html';
+
+globalThis.Components = { Button, Pre, Form, Html };
+globalThis.storybookRenderer = 'html';

From 2ce214c5678fa8877d1b8dc94c9754124cc32ce2 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 09:23:08 +0200
Subject: [PATCH 11/22] add empty file

---
 code/renderers/html/template/stories/README.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 code/renderers/html/template/stories/README.md

diff --git a/code/renderers/html/template/stories/README.md b/code/renderers/html/template/stories/README.md
new file mode 100644
index 000000000000..37d8743baec7
--- /dev/null
+++ b/code/renderers/html/template/stories/README.md
@@ -0,0 +1 @@
+Placeholder until we write some render-specific stories

From a0b73ef27d0da6c37f34b806f32c9c590063cafe Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 09:44:16 +0200
Subject: [PATCH 12/22] fix parallelism

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index ea1175a21594..f6e783bfbc40 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -336,7 +336,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 14
+    parallelism: 13
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From 758f64b3e81c659880f89a040bd21749c5f0ab00 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 13:50:59 +0200
Subject: [PATCH 13/22] add a default render-function to the html renderer

---
 code/renderers/html/src/config.ts             |  2 +-
 code/renderers/html/src/public-api.ts         |  4 +--
 code/renderers/html/src/render.ts             | 30 +++++++++++++++++++
 code/renderers/html/src/types.ts              |  2 +-
 .../html/template/components/Html.js          |  2 +-
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/code/renderers/html/src/config.ts b/code/renderers/html/src/config.ts
index c6789abef54a..467adde9dcbf 100644
--- a/code/renderers/html/src/config.ts
+++ b/code/renderers/html/src/config.ts
@@ -2,4 +2,4 @@ import { parameters as docsParams } from './docs/config';
 
 export const parameters = { framework: 'html' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
-export { renderToDOM } from './render';
+export { renderToDOM, render } from './render';
diff --git a/code/renderers/html/src/public-api.ts b/code/renderers/html/src/public-api.ts
index 00360e68d6ab..c23e1655a13f 100644
--- a/code/renderers/html/src/public-api.ts
+++ b/code/renderers/html/src/public-api.ts
@@ -3,7 +3,7 @@ import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 import type { HtmlFramework, IStorybookSection } from './types';
 
-import { renderToDOM } from './render';
+import { renderToDOM, render } from './render';
 
 const FRAMEWORK = 'html';
 
@@ -16,7 +16,7 @@ interface ClientApi extends ClientStoryApi {
   raw: () => any; // todo add type
 }
 
-const api = start(renderToDOM);
+const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({
diff --git a/code/renderers/html/src/render.ts b/code/renderers/html/src/render.ts
index 5fc59b80554f..812acf6e51ef 100644
--- a/code/renderers/html/src/render.ts
+++ b/code/renderers/html/src/render.ts
@@ -5,10 +5,40 @@ import global from 'global';
 import { dedent } from 'ts-dedent';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { RenderContext } from '@storybook/store';
+import { ArgsStoryFn } from '@storybook/csf';
 import type { HtmlFramework } from './types';
 
 const { Node } = global;
 
+export const render: ArgsStoryFn = (args, context) => {
+  const { id, component: Component } = context;
+
+  if (typeof Component === 'string') {
+    let output = Component;
+    Object.keys(args).forEach((key) => {
+      output = output.replace(`{{${key}}}`, args[key]);
+    });
+    return output;
+  }
+  if (Component instanceof HTMLElement) {
+    const output = Component.cloneNode(true) as HTMLElement;
+    Object.keys(args).forEach((key) => {
+      output.setAttribute(
+        key,
+        typeof args[key] === 'string' ? args[key] : JSON.stringify(args[key])
+      );
+    });
+
+    return output;
+  }
+
+  console.warn(dedent`
+    Storybook's HTML renderer only supports rendering DOM elements and strings.
+    Received: ${Component}
+  `);
+  throw new Error(`Unable to render story ${id}`);
+};
+
 export function renderToDOM(
   { storyFn, kind, name, showMain, showError, forceRemount }: RenderContext,
   domElement: Element
diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts
index 3eaccd27a6f9..d4770abb7a6f 100644
--- a/code/renderers/html/src/types.ts
+++ b/code/renderers/html/src/types.ts
@@ -21,7 +21,7 @@ export interface ShowErrorArgs {
 }
 
 export type HtmlFramework = {
-  component: HTMLElement;
+  component: string | HTMLElement;
   storyResult: StoryFnHtmlReturnType;
 };
 
diff --git a/code/renderers/html/template/components/Html.js b/code/renderers/html/template/components/Html.js
index b3d2937eae16..e9f4a4c84c52 100644
--- a/code/renderers/html/template/components/Html.js
+++ b/code/renderers/html/template/components/Html.js
@@ -1 +1 @@
-export const Html = `
`;
+export const Html = `
{{content}}
`;

From bea1278e97af800d0bda2552644393c9b0f9e99d Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 15:11:26 +0200
Subject: [PATCH 14/22] fix publish script

---
 scripts/next-repro-generators/generate-repros.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scripts/next-repro-generators/generate-repros.ts b/scripts/next-repro-generators/generate-repros.ts
index de7803d2fe9d..e816723c3c5d 100755
--- a/scripts/next-repro-generators/generate-repros.ts
+++ b/scripts/next-repro-generators/generate-repros.ts
@@ -106,8 +106,6 @@ const runGenerators = async (
 
   let controller: AbortController;
   if (localRegistry) {
-    // @ts-expect-error (Converted from ts-ignore)
-    await publish.run();
     console.log(`⚙️ Starting local registry: ${LOCAL_REGISTRY_URL}`);
     controller = await runRegistry({ debug: true });
   }

From fa9b2aad2365c2d6301b41d1c9a934f33b58d76d Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 16:40:59 +0200
Subject: [PATCH 15/22] make the html components more feature complete

---
 code/renderers/html/src/render.ts             |  3 +++
 code/renderers/html/src/types.ts              |  4 +--
 .../html/template/components/Button.js        | 10 +++++++-
 .../html/template/components/Form.js          | 25 ++++++++++++++++++-
 .../renderers/html/template/components/Pre.js |  2 +-
 5 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/code/renderers/html/src/render.ts b/code/renderers/html/src/render.ts
index 812acf6e51ef..7dc568763373 100644
--- a/code/renderers/html/src/render.ts
+++ b/code/renderers/html/src/render.ts
@@ -31,6 +31,9 @@ export const render: ArgsStoryFn = (args, context) => {
 
     return output;
   }
+  if (typeof Component === 'function') {
+    return Component(args, context);
+  }
 
   console.warn(dedent`
     Storybook's HTML renderer only supports rendering DOM elements and strings.
diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts
index d4770abb7a6f..fe77683fe4fd 100644
--- a/code/renderers/html/src/types.ts
+++ b/code/renderers/html/src/types.ts
@@ -1,4 +1,4 @@
-import type { StoryContext as DefaultStoryContext } from '@storybook/csf';
+import type { ArgsStoryFn, StoryContext as DefaultStoryContext } from '@storybook/csf';
 import { parameters } from './config';
 
 export type { RenderContext } from '@storybook/core-client';
@@ -21,7 +21,7 @@ export interface ShowErrorArgs {
 }
 
 export type HtmlFramework = {
-  component: string | HTMLElement;
+  component: string | HTMLElement | ArgsStoryFn;
   storyResult: StoryFnHtmlReturnType;
 };
 
diff --git a/code/renderers/html/template/components/Button.js b/code/renderers/html/template/components/Button.js
index b5ba24313318..89f72d0cc443 100644
--- a/code/renderers/html/template/components/Button.js
+++ b/code/renderers/html/template/components/Button.js
@@ -1 +1,9 @@
-export const Button = ``;
+/* eslint-disable no-undef */
+export const Button = (args) => {
+  const button = document.createElement('button');
+
+  button.innerHTML = args.children;
+  button.addEventListener('click', args.onClick);
+
+  return button;
+};
diff --git a/code/renderers/html/template/components/Form.js b/code/renderers/html/template/components/Form.js
index 56ae1040c62d..2aec4296f559 100644
--- a/code/renderers/html/template/components/Form.js
+++ b/code/renderers/html/template/components/Form.js
@@ -1 +1,24 @@
-export const Form = `
`;
+/* eslint-disable no-undef */
+export const Form = ({ complete, value, setValue, onSubmit }) => {
+  const container = document.createElement('div');
+
+  container.innerHTML = `
+    

+      
+      
+      ${complete ? '
Completed!!
' : ''}
+    

+  `;
+
+  const form = container.querySelector('form');
+  form.onSubmit = (e) => onSubmit();
+
+  const input = container.querySelector('[data-testid="value"]');
+  input.value = value;
+  input.onInput = (e) => setValue(e.target.value);
+
+  return container;
+};
diff --git a/code/renderers/html/template/components/Pre.js b/code/renderers/html/template/components/Pre.js
index da479a2f96f3..d49ab8bf8f9e 100644
--- a/code/renderers/html/template/components/Pre.js
+++ b/code/renderers/html/template/components/Pre.js
@@ -1 +1 @@
-export const Pre = `
`;
+export const Pre = (args) => `
${JSON.stringify(args, null, 2)}
`;

From 1c0e74fa9c81fdaacc79ccf9229b42e2c801f7f9 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 16:58:23 +0200
Subject: [PATCH 16/22] fix parallelism

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 61b2882f2a3e..ef957c52781c 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -324,7 +324,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 14
+    parallelism: 15
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From 13cbc4de8bedcd43152dafa7a26bdb288266b732 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 17:01:34 +0200
Subject: [PATCH 17/22] add testing id to html Pre component

---
 code/renderers/html/template/components/Pre.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/html/template/components/Pre.js b/code/renderers/html/template/components/Pre.js
index d49ab8bf8f9e..6af3f746a4b1 100644
--- a/code/renderers/html/template/components/Pre.js
+++ b/code/renderers/html/template/components/Pre.js
@@ -1 +1 @@
-export const Pre = (args) => `
${JSON.stringify(args, null, 2)}
`;
+export const Pre = (args) => `
${JSON.stringify(args, null, 2)}
`;

From bd4bb69baa7390c7878bcd9326c6cfc744af4d58 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 17:44:00 +0200
Subject: [PATCH 18/22] fix pre component for html to mimick what the other
 frameworks are doing

---
 code/renderers/html/template/components/Pre.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/code/renderers/html/template/components/Pre.js b/code/renderers/html/template/components/Pre.js
index 6af3f746a4b1..b0d077e1d091 100644
--- a/code/renderers/html/template/components/Pre.js
+++ b/code/renderers/html/template/components/Pre.js
@@ -1 +1,15 @@
-export const Pre = (args) => `
${JSON.stringify(args, null, 2)}
`;
+/* eslint-disable no-undef */
+export const Pre = (args) => {
+  const pre = document.createElement('pre');
+
+  pre.setAttribute('data-testid', 'pre');
+  pre.style = args.style;
+
+  if (args.object) {
+    pre.textContent = JSON.stringify(args.object, null, 2);
+  } else {
+    pre.textContent = args.text;
+  }
+
+  return pre;
+};

From a7c5745240c14c8071860758400464f69cb3a4f2 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 18:05:03 +0200
Subject: [PATCH 19/22] cancel form submit event in html Form component

---
 code/renderers/html/template/components/Form.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/code/renderers/html/template/components/Form.js b/code/renderers/html/template/components/Form.js
index 2aec4296f559..f11cc4205053 100644
--- a/code/renderers/html/template/components/Form.js
+++ b/code/renderers/html/template/components/Form.js
@@ -14,7 +14,10 @@ export const Form = ({ complete, value, setValue, onSubmit }) => {
   `;
 
   const form = container.querySelector('form');
-  form.onSubmit = (e) => onSubmit();
+  form.onSubmit = (e) => {
+    e.preventDefault();
+    onSubmit(e);
+  };
 
   const input = container.querySelector('[data-testid="value"]');
   input.value = value;

From ce2f7978f387e00863549434325ff8cf5d9d24ac Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 10 Oct 2022 18:05:33 +0200
Subject: [PATCH 20/22] fix

---
 code/renderers/html/template/components/Form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/html/template/components/Form.js b/code/renderers/html/template/components/Form.js
index f11cc4205053..421347637a24 100644
--- a/code/renderers/html/template/components/Form.js
+++ b/code/renderers/html/template/components/Form.js
@@ -3,7 +3,7 @@ export const Form = ({ complete, value, setValue, onSubmit }) => {
   const container = document.createElement('div');
 
   container.innerHTML = `
-    

+