From b926df4a6f5a020d0b82c02d7a2e12ecc66b7190 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 8 May 2023 12:03:07 +0200 Subject: [PATCH 1/8] Merge pull request #22074 from adityaKrModak/adityaKrModak/fix-list-item-color fix: removed opacity from list-item color --- code/ui/components/src/tooltip/ListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/components/src/tooltip/ListItem.tsx b/code/ui/components/src/tooltip/ListItem.tsx index 64394dcc407..96c5fa3f58a 100644 --- a/code/ui/components/src/tooltip/ListItem.tsx +++ b/code/ui/components/src/tooltip/ListItem.tsx @@ -126,7 +126,7 @@ const Item = styled.a( ({ theme }) => ({ fontSize: theme.typography.size.s1, transition: 'all 150ms ease-out', - color: transparentize(0.5, theme.color.defaultText), + color: theme.color.dark, textDecoration: 'none', cursor: 'pointer', justifyContent: 'space-between', From ee73c10318c42a2f40c0efb2a8dc326ee94708ab Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 8 May 2023 15:29:07 +0200 Subject: [PATCH 2/8] Merge pull request #22308 from storybookjs/fix/testing-react-default-annotations React: Use correct default annotations for composeStories --- .../src/modules/store/csf/testing-utils/index.ts | 6 +++--- .../react/src/__test__/composeStories.test.tsx | 14 +++++++++----- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts index 13cf8142444..955c19eec9f 100644 --- a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts +++ b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts @@ -21,7 +21,7 @@ import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations' import { getValuesFromArgTypes } from '../getValuesFromArgTypes'; import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations'; -let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {}; +let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs([]); export function setProjectAnnotations( projectAnnotations: ProjectAnnotations | ProjectAnnotations[] @@ -33,7 +33,7 @@ export function setProjectAnnotations( export function composeStory( storyAnnotations: LegacyStoryAnnotationsOrFn, componentAnnotations: ComponentAnnotations, - projectAnnotations: ProjectAnnotations = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS, + projectAnnotations: ProjectAnnotations = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS as ProjectAnnotations, defaultConfig: ProjectAnnotations = {}, exportsName?: string ): PreparedStoryFn> { @@ -60,7 +60,7 @@ export function composeStory({ ...projectAnnotations, ...defaultConfig, }); diff --git a/code/renderers/react/src/__test__/composeStories.test.tsx b/code/renderers/react/src/__test__/composeStories.test.tsx index ad5543822b1..8c97d906ab2 100644 --- a/code/renderers/react/src/__test__/composeStories.test.tsx +++ b/code/renderers/react/src/__test__/composeStories.test.tsx @@ -9,8 +9,6 @@ import { setProjectAnnotations, composeStories, composeStory } from '..'; import type { Button } from './Button'; import * as stories from './Button.stories'; -setProjectAnnotations([]); - // example with composeStories, returns an object with all stories composed with args/decorators const { CSF3Primary } = composeStories(stories); @@ -43,15 +41,15 @@ test('reuses args from composeStories', () => { expect(buttonElement).not.toBeNull(); }); -describe('GlobalConfig', () => { - test('renders with default globalConfig', () => { +describe('projectAnnotations', () => { + test('renders with default projectAnnotations', () => { const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default); const { getByText } = render(); const buttonElement = getByText('Hello!'); expect(buttonElement).not.toBeNull(); }); - test('renders with custom globalConfig', () => { + test('renders with custom projectAnnotations via composeStory params', () => { const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, { globalTypes: { locale: { defaultValue: 'pt' } } as any, }); @@ -59,6 +57,12 @@ describe('GlobalConfig', () => { const buttonElement = getByText('Olá!'); expect(buttonElement).not.toBeNull(); }); + + test('renders with custom projectAnnotations via setProjectAnnotations', () => { + setProjectAnnotations([{ parameters: { injected: true } }]); + const Story = composeStory(stories.CSF2StoryWithLocale, stories.default); + expect(Story.parameters?.injected).toBe(true); + }); }); describe('CSF3', () => { From 82e07593e5450126f5a7613ebd71bba2b25b47d2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 8 May 2023 16:44:55 +0200 Subject: [PATCH 3/8] Merge pull request #22377 from storybookjs/valentin/improve-error-message-for-angular-json Improve Error message for Angular.json file not found --- .../lib/cli/src/generators/ANGULAR/helpers.ts | 8 +-- docs/faq.md | 61 ++++++++++--------- 2 files changed, 35 insertions(+), 34 deletions(-) diff --git a/code/lib/cli/src/generators/ANGULAR/helpers.ts b/code/lib/cli/src/generators/ANGULAR/helpers.ts index ece1881d843..d1774e58301 100644 --- a/code/lib/cli/src/generators/ANGULAR/helpers.ts +++ b/code/lib/cli/src/generators/ANGULAR/helpers.ts @@ -2,8 +2,6 @@ import fs from 'fs'; import prompts from 'prompts'; import dedent from 'ts-dedent'; -import { commandLog } from '../../helpers'; - export const ANGULAR_JSON_PATH = 'angular.json'; export const compoDocPreviewPrefix = dedent` @@ -29,11 +27,9 @@ export class AngularJSON { constructor() { if (!fs.existsSync(ANGULAR_JSON_PATH)) { - commandLog( - 'An angular.json file was not found in the current directory. Storybook needs it to work properly.' + throw new Error( + 'An angular.json file was not found in the current working directory. Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located. More info: https://storybook.js.org/docs/angular/faq#error-no-angularjson-file-found' ); - - throw new Error('No angular.json file found'); } const jsonContent = fs.readFileSync(ANGULAR_JSON_PATH, 'utf8'); diff --git a/docs/faq.md b/docs/faq.md index 5d351bbe140..47b3d016f75 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -4,12 +4,13 @@ title: 'Frequently Asked Questions' Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybookjs/storybook/). +- [Error: No angular.json file found](#error-no-angularjson-file-found) - [How can I opt-out of Angular Ivy?](#how-can-i-opt-out-of-angular-ivy) - [How can I opt-out of Angular ngcc?](#how-can-i-opt-out-of-angular-ngcc) - [How can I run coverage tests with Create React App and leave out stories?](#how-can-i-run-coverage-tests-with-create-react-app-and-leave-out-stories) - [I see `ReferenceError: React is not defined` when using Storybook with Next.js](#i-see-referenceerror-react-is-not-defined-when-using-storybook-with-nextjs) -- [How do I fix module resolutions while using pnpm Plug-n-Play](#how-do-i-fix-module-resolution-while-using-pnpm-plug-n-play) - [How do I setup Storybook to share Webpack configuration with Next.js?](#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs) +- [How do I fix module resolution while using pnpm Plug-n-Play?](#how-do-i-fix-module-resolution-while-using-pnpm-plug-n-play) - [How do I setup React Fast Refresh with Storybook?](#how-do-i-setup-react-fast-refresh-with-storybook) - [How do I setup the new React Context Root API with Storybook?](#how-do-i-setup-the-new-react-context-root-api-with-storybook) - [Why is there no addons channel?](#why-is-there-no-addons-channel) @@ -34,7 +35,11 @@ Here are some answers to frequently asked questions. If you have a question, you - [Why isn't Storybook's test runner working?](#why-isnt-storybooks-test-runner-working) - [How does Storybook handle environment variables?](#how-does-storybook-handle-environment-variables) -### How can I opt-out of Angular Ivy? +## Error: No angular.json file found + +Storybook can be set up for both single-project and multi-project Angular workspaces. To set up Storybook for a project, run `npx storybook@latest init` at the root of the workspace where the `angular.json` file is located. During initialization, the `.storybook` folder will be created and the `angular.json` file will be edited to add the Storybook configuration for the selected project. It's important to run the command at the root level to ensure that Storybook detects all projects correctly. + +## How can I opt-out of Angular Ivy? In case you are having trouble with Angular Ivy you can deactivate it in your `main.js`: @@ -55,7 +60,7 @@ export default { }; ``` -### How can I opt-out of Angular ngcc? +## How can I opt-out of Angular ngcc? In case you postinstall ngcc, you can disable it: @@ -78,7 +83,7 @@ export default { Please report any issues related to Ivy in our [GitHub Issue Tracker](https://github.com/storybookjs/storybook/labels/app%3A%20angular) as the support for View Engine will be dropped in a future release of Angular. -### How can I run coverage tests with Create React App and leave out stories? +## How can I run coverage tests with Create React App and leave out stories? Create React App does not allow providing options to Jest in your `package.json`, however you can run `jest` with commandline arguments: @@ -90,14 +95,14 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor 💡 If you're using yarn as a package manager, you'll need to adjust the command accordingly. -### I see `ReferenceError: React is not defined` when using Storybook with Next.js +## I see `ReferenceError: React is not defined` when using Storybook with Next.js Next automatically defines `React` for all of your files via a babel plugin. In Storybook, you can solve this either by: 1. Adding `import React from 'react'` to your component files. 2. Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require) -### How do I setup Storybook to share Webpack configuration with Next.js? +## How do I setup Storybook to share Webpack configuration with Next.js? You can generally reuse Webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example: @@ -112,7 +117,7 @@ export default { }; ``` -### How do I fix module resolution while using pnpm Plug-n-Play? +## How do I fix module resolution while using pnpm Plug-n-Play? In case you are using [pnpm](https://pnpm.io/), you might run into issues with module resolution similar to this when running Storybook: @@ -134,7 +139,7 @@ To fix this, you can wrap the package name inside your Storybook configuration f -### How do I setup React Fast Refresh with Storybook? +## How do I setup React Fast Refresh with Storybook? Fast refresh is an opt-in feature that can be used in Storybook React. There are two ways that you can enable it, go ahead and pick one: @@ -162,7 +167,7 @@ export default { 💡 Fast Refresh only works in development mode with React 16.10 or higher. -### How do I setup the new React Context Root API with Storybook? +## How do I setup the new React Context Root API with Storybook? If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used. @@ -179,7 +184,7 @@ export default { }; ``` -### Why is there no addons channel? +## Why is there no addons channel? A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases: @@ -193,7 +198,7 @@ A common error is that an addon tries to access the "channel", but the channel i 2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192) -### Why aren't Controls visible in the Canvas panel but visible in Docs? +## Why aren't Controls visible in the Canvas panel but visible in Docs? If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows: @@ -205,7 +210,7 @@ export default { }; ``` -### Why aren't the addons working in a composed Storybook? +## Why aren't the addons working in a composed Storybook? Composition is a new feature that we released with version 6.0, and there are still some limitations to it. @@ -213,7 +218,7 @@ For now, the addons you're using in a composed Storybook will not work. We're working on overcoming this limitation, and soon you'll be able to use them as if you are working with a non-composed Storybook. -### Which community addons are compatible with the latest version of Storybook? +## Which community addons are compatible with the latest version of Storybook? Starting with Storybook version 6.0, we've introduced some great features aimed at streamlining your development workflow. @@ -221,7 +226,7 @@ With this, we would like to point out that if you plan on using addons created b We're actively working to provide a better way to address this situation, but in the meantime, we would ask for a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community. -### Is it possible to browse the documentation for past versions of Storybook? +## Is it possible to browse the documentation for past versions of Storybook? With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our migration guide . @@ -308,14 +313,14 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the storiesOf format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future. -### What icons are available for my toolbar or my addon? +## What icons are available for my toolbar or my addon? With the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package, you get a set of icons that you can use to customize your UI. Use the table below as a reference while writing your addon or defining your Storybook global types. Go through this [story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-icon--labels) to see how the icons look. -### I see a "No Preview" error with a Storybook production build +## I see a "No Preview" error with a Storybook production build If you're using the `serve` package to verify your production build of Storybook, you'll get that error. It relates to how `serve` handles rewrites. For instance, `/iframe.html` is rewritten into `/iframe`, and you'll get that error. @@ -329,11 +334,11 @@ npx http-server storybook-static Suppose you don't want to run the command above frequently. Add http-server as a development dependency and create a new script to preview your production build of Storybook. -### Can I use Storybook with Vue 3? +## Can I use Storybook with Vue 3? Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](./get-started/install.md) for instructions. -### Is snapshot testing with Storyshots supported for Vue 3? +## Is snapshot testing with Storyshots supported for Vue 3? Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will automatically detect Vue 3 projects. @@ -341,11 +346,11 @@ If you run into a situation where this is not the case, you can adjust the `conf See our documentation on how to customize the [Storyshots configuration](./writing-tests/snapshot-testing.md). -### Why aren't my code blocks highlighted with Storybook MDX +## Why aren't my code blocks highlighted with Storybook MDX Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) you can use with your code blocks. Currently, there's a know limitation when you try and register a custom language to get syntax highlighting. We're working on a fix for this And will update this section once it's available. -### Why aren't my MDX 2 stories working in Storybook? +## Why aren't my MDX 2 stories working in Storybook? MDX 2 introduced some changes to how the code is rendered. For example, if you enabled it in your Storybook and you have the following code block: @@ -380,7 +385,7 @@ You'll need to update it to make it compatible with MDX 2. See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information. -### Why are my mocked GraphQL queries failing with Storybook's MSW addon? +## Why are my mocked GraphQL queries failing with Storybook's MSW addon? If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following: @@ -414,23 +419,23 @@ export default { With Angular, the most common issue is the placement of the `mockServiceWorker.js` file. Use this [example](https://github.com/mswjs/examples/tree/master/examples/rest-angular/) as a point of reference. -### Can I use other GraphQL providers with Storybook's MSW addon? +## Can I use other GraphQL providers with Storybook's MSW addon? Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/tree/master/packages/docs/src/demos) to learn how to integrate different providers. -### Can I mock GraphQL mutations with Storybook's MSW addon? +## Can I mock GraphQL mutations with Storybook's MSW addon? No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer. -### How can my code detect if it is running in Storybook? +## How can my code detect if it is running in Storybook? You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`. -### Why are my stories not showing up correctly when using certain characters? +## Why are my stories not showing up correctly when using certain characters? Storybook allows you to use most characters while naming your stories. Still, specific characters (e.g., `#`) can lead to issues when Storybook generates the internal identifier for the story, leading to collisions and incorrectly outputting the correct story. We recommend using such characters sparsely. -### Why are the TypeScript examples and documentation using `as` for type safety? +## Why are the TypeScript examples and documentation using `as` for type safety? We're aware that the default Typescript story construct might seem outdated and could potentially introduce a less than ideal way of handling type safety and strictness and could be rewritten as such: @@ -494,11 +499,11 @@ export default { }; ``` -### Why isn't Storybook's test runner working? +## Why isn't Storybook's test runner working? There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. -### How does Storybook handle environment variables? +## How does Storybook handle environment variables? Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook. From 2dc7c7204a4715232a3314891707780969e79190 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 8 May 2023 18:21:20 +0100 Subject: [PATCH 4/8] Merge pull request #22458 from storybookjs/new-styling-recipes Update setup.md with new recipes --- docs/get-started/setup.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md index 3da5d71ad5b..a781b7d7bf8 100644 --- a/docs/get-started/setup.md +++ b/docs/get-started/setup.md @@ -49,6 +49,8 @@ You may have to configure your CSS tooling for Storybook’s rendering environme - [Emotion](https://storybook.js.org/recipes/@emotion/styled/) - [Sass](https://storybook.js.org/recipes/sass/) - [Bootstrap](https://storybook.js.org/recipes/bootstrap/) +- [Less](https://storybook.js.org/recipes/less/) +- [Vanilla-extract](https://storybook.js.org/recipes/@vanilla-extract/css/) Don't see the tool that you're looking for? Check out the [styling and css](../configure/styling-and-css.md) page for more details. From 8fb3dc28dfa75c1a1d4f57c6928151978ab65c7d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 8 May 2023 21:15:23 +0200 Subject: [PATCH 5/8] Merge pull request #20840 from storybookjs/chore_docs_test_runner_add_shard_option Documentation: Add shard option to the test runner documentation --- docs/writing-tests/test-runner.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index b4ca1507b36..2d010b3ee42 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -95,6 +95,7 @@ If you're already using any of those flags in your project, you should be able t | `-u`, `--updateSnapshot` | Use this flag to re-record every snapshot that fails during this test run
`test-storybook -u` | | `--eject` | Creates a local configuration file to override defaults of the test-runner
`test-storybook --eject` | | `--coverage` | Runs [coverage tests](./test-coverage.md) on your stories and components
`test-storybook --coverage` | +| `--shard [index/count]` | Requires CI. Splits the test suite execution into multiple machines
`test-storybook --shard=1/8` | From 103b4e354612a680520eb0bcf9050482c2afc330 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 May 2023 10:20:09 +0200 Subject: [PATCH 6/8] Merge pull request #22162 from storybookjs/fix/scope-sample-styles CLI: Scope styles in sample components from the CLI templates --- .../angular/template/cli/header.component.ts | 2 +- .../angular/template/cli/page.component.ts | 2 +- .../nextjs/template/cli/js/Header.jsx | 2 +- .../nextjs/template/cli/js/Page.jsx | 3 +-- .../nextjs/template/cli/ts-3-8/Header.tsx | 2 +- .../nextjs/template/cli/ts-3-8/Page.tsx | 2 +- .../nextjs/template/cli/ts/Header.tsx | 2 +- .../nextjs/template/cli/ts/Page.tsx | 2 +- code/lib/cli/rendererAssets/common/header.css | 10 +++++----- code/lib/cli/rendererAssets/common/page.css | 20 +++++++++---------- code/renderers/html/template/cli/js/Header.js | 2 +- code/renderers/html/template/cli/js/Page.js | 2 +- .../html/template/cli/ts-3-8/Header.ts | 2 +- .../html/template/cli/ts-3-8/Page.ts | 2 +- .../html/template/cli/ts-4-9/Header.ts | 2 +- .../html/template/cli/ts-4-9/Page.ts | 2 +- code/renderers/preact/template/cli/Header.jsx | 2 +- code/renderers/preact/template/cli/Page.jsx | 2 +- .../react/template/cli/js/Header.jsx | 2 +- code/renderers/react/template/cli/js/Page.jsx | 2 +- .../react/template/cli/ts-3-8/Header.tsx | 2 +- .../react/template/cli/ts-3-8/Page.tsx | 2 +- .../react/template/cli/ts-4-9/Header.tsx | 2 +- .../react/template/cli/ts-4-9/Page.tsx | 2 +- .../svelte/template/cli/js/Header.svelte | 2 +- .../svelte/template/cli/js/Page.svelte | 2 +- .../svelte/template/cli/ts-3-8/Header.svelte | 2 +- .../svelte/template/cli/ts-3-8/Page.svelte | 2 +- .../svelte/template/cli/ts-4-9/Header.svelte | 2 +- .../svelte/template/cli/ts-4-9/Page.svelte | 2 +- code/renderers/vue/template/cli/Header.vue | 2 +- code/renderers/vue/template/cli/Page.vue | 2 +- .../renderers/vue3/template/cli/js/Header.vue | 2 +- code/renderers/vue3/template/cli/js/Page.vue | 2 +- .../vue3/template/cli/ts-3-8/Header.vue | 2 +- .../vue3/template/cli/ts-3-8/Page.vue | 13 +++++++----- .../vue3/template/cli/ts-4-9/Header.vue | 2 +- .../vue3/template/cli/ts-4-9/Page.vue | 13 +++++++----- .../web-components/template/cli/js/Header.js | 2 +- .../web-components/template/cli/js/Page.js | 2 +- .../template/cli/ts-3-8/Header.ts | 2 +- .../template/cli/ts-3-8/Page.ts | 2 +- .../template/cli/ts-4-9/Header.ts | 2 +- .../template/cli/ts-4-9/Page.ts | 2 +- 44 files changed, 71 insertions(+), 66 deletions(-) diff --git a/code/frameworks/angular/template/cli/header.component.ts b/code/frameworks/angular/template/cli/header.component.ts index 603ac7cfeef..2980d3b3202 100644 --- a/code/frameworks/angular/template/cli/header.component.ts +++ b/code/frameworks/angular/template/cli/header.component.ts @@ -4,7 +4,7 @@ import type { User } from './User'; @Component({ selector: 'storybook-header', template: `
-
+
diff --git a/code/frameworks/angular/template/cli/page.component.ts b/code/frameworks/angular/template/cli/page.component.ts index 02cc3f06abc..f3ae4868549 100644 --- a/code/frameworks/angular/template/cli/page.component.ts +++ b/code/frameworks/angular/template/cli/page.component.ts @@ -10,7 +10,7 @@ import type { User } from './User'; (onLogin)="doLogin()" (onCreateAccount)="doCreateAccount()" > -
+

Pages in Storybook

We recommend building UIs with a diff --git a/code/frameworks/nextjs/template/cli/js/Header.jsx b/code/frameworks/nextjs/template/cli/js/Header.jsx index 3862422ed8e..39e5226cffc 100644 --- a/code/frameworks/nextjs/template/cli/js/Header.jsx +++ b/code/frameworks/nextjs/template/cli/js/Header.jsx @@ -6,7 +6,7 @@ import './header.css'; export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (

-
+
diff --git a/code/frameworks/nextjs/template/cli/js/Page.jsx b/code/frameworks/nextjs/template/cli/js/Page.jsx index c5fffe953be..6db1e0ac3f3 100644 --- a/code/frameworks/nextjs/template/cli/js/Page.jsx +++ b/code/frameworks/nextjs/template/cli/js/Page.jsx @@ -14,8 +14,7 @@ export const Page = () => { onLogout={() => setUser(undefined)} onCreateAccount={() => setUser({ name: 'Jane Doe' })} /> - -
+

Pages in Storybook

We recommend building UIs with a{' '} diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx index dc3f3c19c31..01504601311 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx @@ -16,7 +16,7 @@ interface HeaderProps { export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (

-
+
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx index ec054e81389..e1174830139 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx @@ -19,7 +19,7 @@ export const Page: React.FC = () => { onCreateAccount={() => setUser({ name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a{' '} diff --git a/code/frameworks/nextjs/template/cli/ts/Header.tsx b/code/frameworks/nextjs/template/cli/ts/Header.tsx index dc3f3c19c31..01504601311 100644 --- a/code/frameworks/nextjs/template/cli/ts/Header.tsx +++ b/code/frameworks/nextjs/template/cli/ts/Header.tsx @@ -16,7 +16,7 @@ interface HeaderProps { export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (

-
+
diff --git a/code/frameworks/nextjs/template/cli/ts/Page.tsx b/code/frameworks/nextjs/template/cli/ts/Page.tsx index ec054e81389..e1174830139 100644 --- a/code/frameworks/nextjs/template/cli/ts/Page.tsx +++ b/code/frameworks/nextjs/template/cli/ts/Page.tsx @@ -19,7 +19,7 @@ export const Page: React.FC = () => { onCreateAccount={() => setUser({ name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a{' '} diff --git a/code/lib/cli/rendererAssets/common/header.css b/code/lib/cli/rendererAssets/common/header.css index 44c549da27c..d9a70528a3a 100644 --- a/code/lib/cli/rendererAssets/common/header.css +++ b/code/lib/cli/rendererAssets/common/header.css @@ -1,4 +1,4 @@ -.wrapper { +.storybook-header { font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 15px 20px; @@ -7,12 +7,12 @@ justify-content: space-between; } -svg { +.storybook-header svg { display: inline-block; vertical-align: top; } -h1 { +.storybook-header h1 { font-weight: 700; font-size: 20px; line-height: 1; @@ -21,11 +21,11 @@ h1 { vertical-align: top; } -button + button { +.storybook-header button + button { margin-left: 10px; } -.welcome { +.storybook-header .welcome { color: #333; font-size: 14px; margin-right: 10px; diff --git a/code/lib/cli/rendererAssets/common/page.css b/code/lib/cli/rendererAssets/common/page.css index fb64fe46294..098dad11850 100644 --- a/code/lib/cli/rendererAssets/common/page.css +++ b/code/lib/cli/rendererAssets/common/page.css @@ -1,4 +1,4 @@ -section { +.storybook-page { font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 24px; @@ -8,7 +8,7 @@ section { color: #333; } -section h2 { +.storybook-page h2 { font-weight: 700; font-size: 32px; line-height: 1; @@ -17,25 +17,25 @@ section h2 { vertical-align: top; } -section p { +.storybook-page p { margin: 1em 0; } -section a { +.storybook-page a { text-decoration: none; color: #1ea7fd; } -section ul { +.storybook-page ul { padding-left: 30px; margin: 1em 0; } -section li { +.storybook-page li { margin-bottom: 8px; } -section .tip { +.storybook-page .tip { display: inline-block; border-radius: 1em; font-size: 11px; @@ -48,14 +48,14 @@ section .tip { vertical-align: top; } -section .tip-wrapper { +.storybook-page .tip-wrapper { font-size: 13px; line-height: 20px; margin-top: 40px; margin-bottom: 40px; } -section .tip-wrapper svg { +.storybook-page .tip-wrapper svg { display: inline-block; height: 12px; width: 12px; @@ -64,6 +64,6 @@ section .tip-wrapper svg { margin-top: 3px; } -section .tip-wrapper svg path { +.storybook-page .tip-wrapper svg path { fill: #1ea7fd; } diff --git a/code/renderers/html/template/cli/js/Header.js b/code/renderers/html/template/cli/js/Header.js index 925652350ed..30b4c5156ad 100644 --- a/code/renderers/html/template/cli/js/Header.js +++ b/code/renderers/html/template/cli/js/Header.js @@ -5,7 +5,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => { const header = document.createElement('header'); const wrapper = document.createElement('div'); - wrapper.className = 'wrapper'; + wrapper.className = 'storybook-header'; const logo = `

diff --git a/code/renderers/html/template/cli/js/Page.js b/code/renderers/html/template/cli/js/Page.js index a2b56d7cd5f..227cddeb025 100644 --- a/code/renderers/html/template/cli/js/Page.js +++ b/code/renderers/html/template/cli/js/Page.js @@ -34,7 +34,7 @@ export const createPage = () => { article.appendChild(header); const section = ` -
+

Pages in Storybook

We recommend building UIs with a diff --git a/code/renderers/html/template/cli/ts-3-8/Header.ts b/code/renderers/html/template/cli/ts-3-8/Header.ts index 94a31e6b531..7bee7625965 100644 --- a/code/renderers/html/template/cli/ts-3-8/Header.ts +++ b/code/renderers/html/template/cli/ts-3-8/Header.ts @@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade const header = document.createElement('header'); const wrapper = document.createElement('div'); - wrapper.className = 'wrapper'; + wrapper.className = 'storybook-header'; const logo = `

diff --git a/code/renderers/html/template/cli/ts-3-8/Page.ts b/code/renderers/html/template/cli/ts-3-8/Page.ts index 4c4028ff1d9..3ff4211d8a8 100644 --- a/code/renderers/html/template/cli/ts-3-8/Page.ts +++ b/code/renderers/html/template/cli/ts-3-8/Page.ts @@ -38,7 +38,7 @@ export const createPage = () => { article.appendChild(header); const section = ` -
+

Pages in Storybook

We recommend building UIs with a diff --git a/code/renderers/html/template/cli/ts-4-9/Header.ts b/code/renderers/html/template/cli/ts-4-9/Header.ts index 94a31e6b531..7bee7625965 100644 --- a/code/renderers/html/template/cli/ts-4-9/Header.ts +++ b/code/renderers/html/template/cli/ts-4-9/Header.ts @@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade const header = document.createElement('header'); const wrapper = document.createElement('div'); - wrapper.className = 'wrapper'; + wrapper.className = 'storybook-header'; const logo = `

diff --git a/code/renderers/html/template/cli/ts-4-9/Page.ts b/code/renderers/html/template/cli/ts-4-9/Page.ts index 4c4028ff1d9..3ff4211d8a8 100644 --- a/code/renderers/html/template/cli/ts-4-9/Page.ts +++ b/code/renderers/html/template/cli/ts-4-9/Page.ts @@ -38,7 +38,7 @@ export const createPage = () => { article.appendChild(header); const section = ` -
+

Pages in Storybook

We recommend building UIs with a diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx index 99ee8c54b51..8a722e57d33 100644 --- a/code/renderers/preact/template/cli/Header.jsx +++ b/code/renderers/preact/template/cli/Header.jsx @@ -5,7 +5,7 @@ import './header.css'; export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (

-
+
diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx index 4344c071980..12ca119d0b0 100644 --- a/code/renderers/preact/template/cli/Page.jsx +++ b/code/renderers/preact/template/cli/Page.jsx @@ -14,7 +14,7 @@ export const Page = () => { onCreateAccount={() => setUser({ name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a{' '} diff --git a/code/renderers/react/template/cli/js/Header.jsx b/code/renderers/react/template/cli/js/Header.jsx index 3862422ed8e..39e5226cffc 100644 --- a/code/renderers/react/template/cli/js/Header.jsx +++ b/code/renderers/react/template/cli/js/Header.jsx @@ -6,7 +6,7 @@ import './header.css'; export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (

-
+
diff --git a/code/renderers/react/template/cli/js/Page.jsx b/code/renderers/react/template/cli/js/Page.jsx index c5fffe953be..c421401138e 100644 --- a/code/renderers/react/template/cli/js/Page.jsx +++ b/code/renderers/react/template/cli/js/Page.jsx @@ -15,7 +15,7 @@ export const Page = () => { onCreateAccount={() => setUser({ name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a{' '} diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx index dc3f3c19c31..01504601311 100644 --- a/code/renderers/react/template/cli/ts-3-8/Header.tsx +++ b/code/renderers/react/template/cli/ts-3-8/Header.tsx @@ -16,7 +16,7 @@ interface HeaderProps { export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (

-
+
diff --git a/code/renderers/react/template/cli/ts-3-8/Page.tsx b/code/renderers/react/template/cli/ts-3-8/Page.tsx index 885f2b41f1e..994d8908ed4 100644 --- a/code/renderers/react/template/cli/ts-3-8/Page.tsx +++ b/code/renderers/react/template/cli/ts-3-8/Page.tsx @@ -19,7 +19,7 @@ export const Page: React.FC = () => { onCreateAccount={() => setUser({ name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a{' '} diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx index dc3f3c19c31..01504601311 100644 --- a/code/renderers/react/template/cli/ts-4-9/Header.tsx +++ b/code/renderers/react/template/cli/ts-4-9/Header.tsx @@ -16,7 +16,7 @@ interface HeaderProps { export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (

-
+
diff --git a/code/renderers/react/template/cli/ts-4-9/Page.tsx b/code/renderers/react/template/cli/ts-4-9/Page.tsx index ec054e81389..e1174830139 100644 --- a/code/renderers/react/template/cli/ts-4-9/Page.tsx +++ b/code/renderers/react/template/cli/ts-4-9/Page.tsx @@ -19,7 +19,7 @@ export const Page: React.FC = () => { onCreateAccount={() => setUser({ name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a{' '} diff --git a/code/renderers/svelte/template/cli/js/Header.svelte b/code/renderers/svelte/template/cli/js/Header.svelte index 8350b35fd66..a9c08f75db7 100644 --- a/code/renderers/svelte/template/cli/js/Header.svelte +++ b/code/renderers/svelte/template/cli/js/Header.svelte @@ -20,7 +20,7 @@

-
+
diff --git a/code/renderers/svelte/template/cli/js/Page.svelte b/code/renderers/svelte/template/cli/js/Page.svelte index d545d908e50..acc473c2518 100644 --- a/code/renderers/svelte/template/cli/js/Page.svelte +++ b/code/renderers/svelte/template/cli/js/Page.svelte @@ -13,7 +13,7 @@ on:createAccount={() => (user = { name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a diff --git a/code/renderers/svelte/template/cli/ts-3-8/Header.svelte b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte index e3b8d039f86..cb6f82d5e66 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Header.svelte +++ b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte @@ -20,7 +20,7 @@

-
+
diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.svelte b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte index c2c6369f565..94cdb07ecd3 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Page.svelte +++ b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte @@ -13,7 +13,7 @@ on:createAccount={() => (user = { name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a diff --git a/code/renderers/svelte/template/cli/ts-4-9/Header.svelte b/code/renderers/svelte/template/cli/ts-4-9/Header.svelte index e3b8d039f86..cb6f82d5e66 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Header.svelte +++ b/code/renderers/svelte/template/cli/ts-4-9/Header.svelte @@ -20,7 +20,7 @@

-
+
diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.svelte b/code/renderers/svelte/template/cli/ts-4-9/Page.svelte index c2c6369f565..94cdb07ecd3 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Page.svelte +++ b/code/renderers/svelte/template/cli/ts-4-9/Page.svelte @@ -13,7 +13,7 @@ on:createAccount={() => (user = { name: 'Jane Doe' })} /> -
+

Pages in Storybook

We recommend building UIs with a diff --git a/code/renderers/vue/template/cli/Header.vue b/code/renderers/vue/template/cli/Header.vue index bb35153df5f..4164c64bb14 100644 --- a/code/renderers/vue/template/cli/Header.vue +++ b/code/renderers/vue/template/cli/Header.vue @@ -1,6 +1,6 @@