From b94562ca00c35ae69c0913f37667f97a34a85079 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sat, 10 Jul 2021 01:18:07 +0900 Subject: [PATCH 1/3] feat: support STORYBOOK_PREVIEW_HTML_LANG to change the lang attribute in the preview frame --- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 2 +- lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 1 + lib/core-common/src/templates/index.ejs | 2 +- lib/manager-webpack4/src/manager-webpack.config.ts | 1 + lib/manager-webpack5/src/manager-webpack.config.ts | 1 + 5 files changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index d34bda094520..86bead82387a 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -15,7 +15,6 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import FilterWarningsPlugin from 'webpack-filter-warnings-plugin'; import themingPaths from '@storybook/theming/paths'; - import { toRequireContextString, stringifyEnvs, @@ -166,6 +165,7 @@ export default async ({ }, headHtmlSnippet, bodyHtmlSnippet, + lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en', }), minify: { collapseWhitespace: true, diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 6a2b7618352e..9f9d021fd31a 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -166,6 +166,7 @@ export default async ({ }, headHtmlSnippet, bodyHtmlSnippet, + lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en', }), minify: { collapseWhitespace: true, diff --git a/lib/core-common/src/templates/index.ejs b/lib/core-common/src/templates/index.ejs index 987898611ebc..b775ca17cbcb 100644 --- a/lib/core-common/src/templates/index.ejs +++ b/lib/core-common/src/templates/index.ejs @@ -1,5 +1,5 @@ - + <%= options.title || 'Storybook'%> diff --git a/lib/manager-webpack4/src/manager-webpack.config.ts b/lib/manager-webpack4/src/manager-webpack.config.ts index 7bdd2b4d0958..ab101a7c02d2 100644 --- a/lib/manager-webpack4/src/manager-webpack.config.ts +++ b/lib/manager-webpack4/src/manager-webpack.config.ts @@ -99,6 +99,7 @@ export default async ({ PREVIEW_URL: previewUrl, // global preview URL }, headHtmlSnippet, + lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en', }), template, }) as any) as WebpackPluginInstance, diff --git a/lib/manager-webpack5/src/manager-webpack.config.ts b/lib/manager-webpack5/src/manager-webpack.config.ts index da4368fa1293..e87d5b9f59bb 100644 --- a/lib/manager-webpack5/src/manager-webpack.config.ts +++ b/lib/manager-webpack5/src/manager-webpack.config.ts @@ -99,6 +99,7 @@ export default async ({ PREVIEW_URL: previewUrl, // global preview URL }, headHtmlSnippet, + lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en', }), template, }) as any) as WebpackPluginInstance, From d972ee89096beaed09c9ca037d9d116a0006ee39 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sat, 10 Jul 2021 01:18:34 +0900 Subject: [PATCH 2/3] test: update the snapshot --- .../welcome-storybook.stories.storyshot | 46 +++++++++---------- .../story-styles.stories.storyshot | 4 +- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot index cce66c723f4c..9e2b2d1a9a20 100644 --- a/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot @@ -3,47 +3,47 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `

Welcome to storybook

This is a UI component dev environment for your app.

We've added some basic stories inside the src/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 @@ -51,7 +51,7 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = ` for a component called Button @@ -59,26 +59,26 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = ` .

Just like that, you can add your own components as stories.
You can also edit those components and see changes right away.
(Try editing the Button stories located at src/stories/index.js @@ -86,15 +86,15 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = ` .)

Usually we create stories with smaller UI components in the app.
Have a look at the

NOTE:
Have a look at the .storybook/webpack.config.js diff --git a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot index 9e96c5f03b1b..7307da48a797 100644 --- a/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot @@ -3,7 +3,7 @@ exports[`Storyshots Core / Story host styles With Args 1`] = ` @@ -19,7 +19,7 @@ exports[`Storyshots Core / Story host styles With Args 1`] = ` exports[`Storyshots Core / Story host styles With story template 1`] = ` From 713ad3a97ef0f2b538dab4fd3f3fbe2408f38681 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sat, 10 Jul 2021 01:33:58 +0900 Subject: [PATCH 3/3] chore: revert an unnecessary diff --- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 86bead82387a..63ab5d78ae70 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -15,6 +15,7 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import FilterWarningsPlugin from 'webpack-filter-warnings-plugin'; import themingPaths from '@storybook/theming/paths'; + import { toRequireContextString, stringifyEnvs,