Merge branch 'next' into shilman/toc-proof-of-concept

.github/DISCUSSION_TEMPLATE/ideas.yml

@@ -1,6 +1,3 @@
-name: Feature request 💡
-description: Suggest an idea for this project
-title: '[Feature Request]:'
 labels:
   - needs triage
   - feature request
@@ -8,7 +5,7 @@ body:
   - type: textarea
     id: problem
     attributes:
-      label: Is your feature request related to a problem? Please describe
+      label: Is your feature request related to a problem? Please describe.
       description: >-
         A clear and concise description of the problem. E.g. I'm always
         frustrated when [...]

.github/ISSUE_TEMPLATE/config.yml

@@ -2,10 +2,16 @@ blank_issues_enabled: false
 contact_links:
   - name: View documentation 📚
     url: https://storybook.js.org/docs/
-    about: Check out the official docs for answers to common questions
+    about: Check out the official docs for answers to common questions.
+  - name: Feature Requests 💡
+    url: https://github.com/storybookjs/storybook/discussions/new?category=ideas
+    about: Suggest a feature idea for this project.
+  - name: Open an RFC 🦄
+    url: https://github.com/storybookjs/storybook/discussions/new?category=rfc
+    about: Do you want to propose a more involved change to Storybook? Open an RFC (Request for Comments) to start a discussion.
   - name: Questions & discussions 🤔
     url: https://github.com/storybookjs/storybook/discussions
-    about: Ask questions, request features & discuss RFCs
+    about: Ask questions, show off your Storybook, etc. 
   - name: Community Discord 💬
     url: https://discord.gg/storybook
     about: Community discussions, interactive support, contributor help

code/lib/cli/package.json

@@ -65,8 +65,8 @@
     "@storybook/telemetry": "7.1.0-beta.0",
     "@storybook/types": "7.1.0-beta.0",
     "@types/semver": "^7.3.4",
-    "@yarnpkg/fslib": "^3.0.0-rc.48",
-    "@yarnpkg/libzip": "^3.0.0-rc.48",
+    "@yarnpkg/fslib": "3.0.0-rc.46",
+    "@yarnpkg/libzip": "3.0.0-rc.46",
     "chalk": "^4.1.0",
     "commander": "^6.2.1",
     "cross-spawn": "^7.0.3",

code/ui/blocks/src/components/Source.tsx

@@ -1,27 +1,26 @@
 import type { ComponentProps, FunctionComponent } from 'react';
-import React from 'react';
-import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
-import { SyntaxHighlighter } from '@storybook/components';
+import { ThemeProvider, convert, ignoreSsrWarning, styled, themes } from '@storybook/theming';
 
+import React from 'react';
+import { SyntaxHighlighter } from '@storybook/components';
+import type { SyntaxHighlighterProps } from '@storybook/components';
 import { EmptyBlock } from './EmptyBlock';
 
-const StyledSyntaxHighlighter: typeof SyntaxHighlighter = styled(SyntaxHighlighter)(
-  ({ theme }) => ({
-    // DocBlocks-specific styling and overrides
-    fontSize: `${theme.typography.size.s2 - 1}px`,
-    lineHeight: '19px',
-    margin: '25px 0 40px',
-    borderRadius: theme.appBorderRadius,
-    boxShadow:
-      theme.base === 'light'
-        ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0'
-        : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-    'pre.prismjs': {
-      padding: 20,
-      background: 'inherit',
-    },
-  })
-);
+const StyledSyntaxHighlighter: React.FunctionComponent<SyntaxHighlighterProps> = styled(
+  SyntaxHighlighter
+)(({ theme }) => ({
+  // DocBlocks-specific styling and overrides
+  fontSize: `${theme.typography.size.s2 - 1}px`,
+  lineHeight: '19px',
+  margin: '25px 0 40px',
+  borderRadius: theme.appBorderRadius,
+  boxShadow:
+    theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+  'pre.prismjs': {
+    padding: 20,
+    background: 'inherit',
+  },
+}));
 
 export enum SourceError {
   NO_STORY = 'There\u2019s no story here.',

code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx

@@ -1,21 +1,57 @@
-import type { ComponentProps } from 'react';
 import React, { Suspense, lazy } from 'react';
 
-const LazySyntaxHighlighter = lazy(() => import('./syntaxhighlighter'));
+import type { ComponentProps } from 'react';
+import type ReactSyntaxHighlighter from './syntaxhighlighter';
+
+let languages: Parameters<typeof ReactSyntaxHighlighter.registerLanguage>[] = [];
+let Comp: typeof ReactSyntaxHighlighter | null = null;
+
+const LazySyntaxHighlighter = lazy(async () => {
+  const { SyntaxHighlighter } = await import('./syntaxhighlighter');
+
+  if (languages.length > 0) {
+    languages.forEach((args) => {
+      SyntaxHighlighter.registerLanguage(...args);
+    });
+    languages = [];
+  }
+
+  if (Comp === null) Comp = SyntaxHighlighter;
+
+  return {
+    default: (props: ComponentProps<typeof SyntaxHighlighter>) => <SyntaxHighlighter {...props} />,
+  };
+});
+
 const LazySyntaxHighlighterWithFormatter = lazy(async () => {
   const [{ SyntaxHighlighter }, { formatter }] = await Promise.all([
     import('./syntaxhighlighter'),
     import('./formatter'),
   ]);
 
+  if (languages.length > 0) {
+    languages.forEach((args) => {
+      SyntaxHighlighter.registerLanguage(...args);
+    });
+    languages = [];
+  }
+
+  if (Comp === null) {
+    Comp = SyntaxHighlighter;
+  }
+
   return {
-    default: (props: ComponentProps<typeof LazySyntaxHighlighter>) => (
+    default: (props: ComponentProps<typeof SyntaxHighlighter>) => (
       <SyntaxHighlighter {...props} formatter={formatter} />
     ),
   };
 });
 
-export const SyntaxHighlighter = (props: ComponentProps<typeof LazySyntaxHighlighter>) => (
+export const SyntaxHighlighter = (
+  props:
+    | ComponentProps<typeof LazySyntaxHighlighter>
+    | ComponentProps<typeof LazySyntaxHighlighterWithFormatter>
+) => (
   <Suspense fallback={<div />}>
     {props.format !== false ? (
       <LazySyntaxHighlighterWithFormatter {...props} />
@@ -24,3 +60,13 @@ export const SyntaxHighlighter = (props: ComponentProps<typeof LazySyntaxHighlig
     )}
   </Suspense>
 );
+
+SyntaxHighlighter.registerLanguage = (
+  ...args: Parameters<typeof ReactSyntaxHighlighter.registerLanguage>
+) => {
+  if (Comp !== null) {
+    Comp.registerLanguage(...args);
+    return;
+  }
+  languages.push(args);
+};

code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx

@@ -1,6 +1,7 @@
+import { ThemeProvider, ensure, themes } from '@storybook/theming';
+
 import type { ComponentProps } from 'react';
 import React from 'react';
-import { ThemeProvider, themes, ensure } from '@storybook/theming';
 import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
 
 export default {
@@ -108,6 +109,24 @@ export const GraphQL = {
   },
 };
 
+export const CustomSyntax = {
+  args: {
+    language: 'scss',
+    children: `// Custom language syntax registered
+div.parent {
+  div.child {
+    color: $red;
+  }
+}`,
+  },
+  loaders: [
+    async () => {
+      const scss = (await import('react-syntax-highlighter/dist/esm/languages/prism/scss')).default;
+      SyntaxHighlighter.registerLanguage('scss', scss);
+    },
+  ],
+};
+
 export const Unsupported = {
   args: {
     language: 'C#',

code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -189,7 +189,7 @@ export interface SyntaxHighlighterState {
 
 // copied from @types/react-syntax-highlighter/index.d.ts
 
-export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
+export const SyntaxHighlighter = ({
   children,
   language = 'jsx',
   copyable = false,
@@ -200,7 +200,7 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
   className = null,
   showLineNumbers = false,
   ...rest
-}) => {
+}: SyntaxHighlighterProps) => {
   if (typeof children !== 'string' || !children.trim()) {
     return null;
   }
@@ -254,4 +254,8 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
   );
 };
 
+SyntaxHighlighter.registerLanguage = (
+  ...args: Parameters<typeof ReactSyntaxHighlighter.registerLanguage>
+) => ReactSyntaxHighlighter.registerLanguage(...args);
+
 export default SyntaxHighlighter;

code/yarn.lock

@@ -6001,8 +6001,8 @@ __metadata:
     "@types/puppeteer-core": ^2.1.0
     "@types/semver": ^7.3.4
     "@types/util-deprecate": ^1.0.0
-    "@yarnpkg/fslib": ^3.0.0-rc.48
-    "@yarnpkg/libzip": ^3.0.0-rc.48
+    "@yarnpkg/fslib": 3.0.0-rc.46
+    "@yarnpkg/libzip": 3.0.0-rc.46
     boxen: ^5.1.2
     chalk: ^4.1.0
     commander: ^6.2.1
@@ -9717,7 +9717,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@yarnpkg/fslib@npm:^3.0.0-rc.48":
+"@yarnpkg/fslib@npm:3.0.0-rc.46":
+  version: 3.0.0-rc.46
+  resolution: "@yarnpkg/fslib@npm:3.0.0-rc.46"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 6b768a511ef65fe2d503580bc5e1b8810c61b0e37b05672f4dcfcdca4c9f515bd08cb26f269f65a56efe6f3ebdba26489f8ac09e4882aa58d3eede50ee472fdc
+  languageName: node
+  linkType: hard
+
+"@yarnpkg/fslib@npm:^3.0.0-rc.46":
   version: 3.0.0-rc.48
   resolution: "@yarnpkg/fslib@npm:3.0.0-rc.48"
   dependencies:
@@ -9726,16 +9735,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@yarnpkg/libzip@npm:^3.0.0-rc.48":
-  version: 3.0.0-rc.48
-  resolution: "@yarnpkg/libzip@npm:3.0.0-rc.48"
+"@yarnpkg/libzip@npm:3.0.0-rc.46":
+  version: 3.0.0-rc.46
+  resolution: "@yarnpkg/libzip@npm:3.0.0-rc.46"
   dependencies:
     "@types/emscripten": ^1.39.6
-    "@yarnpkg/fslib": ^3.0.0-rc.48
+    "@yarnpkg/fslib": ^3.0.0-rc.46
     tslib: ^2.4.0
   peerDependencies:
-    "@yarnpkg/fslib": ^3.0.0-rc.48
-  checksum: ec9930d8ef1d3faceae2e52aa500e87de4a6aeaef92cf65c3df51c60b7da3cbef539339e5b14ee2138e5e06b814393f28ab2ae52d7ea53288ae5e70c7fb9aab5
+    "@yarnpkg/fslib": ^3.0.0-rc.46
+  checksum: 6217994646e25d64a04e8ad34693fdadeee57979bb61f44031537758950206219c3e201f9c7d6fa724296dcfa2e26072289cb00e5d8bb7232176eea8e2b87841
   languageName: node
   linkType: hard
 

docs/configure/frameworks.md

@@ -52,7 +52,7 @@ Every modern web application has unique requirements and relies on various tools
 
 ### NextJS 13 doesn't work with Storybook
 
-The latest release of [NexJS](https://nextjs.org/) introduced breaking changes (e.g., [TurboPack](https://turbo.build/pack), [Server Component](https://nextjs.org/docs/advanced-features/react-18/server-components), [SWC](https://nextjs.org/docs/advanced-features/compiler#why-swc)) that are not yet fully supported by Storybook. The Storybook team is working on adding support for these features. In the meantime, you can still use Storybook alongside your NextJS 13 project if you're not relying on them.
+The latest release of [NextJS](https://nextjs.org/) introduced breaking changes (e.g., [TurboPack](https://turbo.build/pack), [Server Component](https://nextjs.org/docs/advanced-features/react-18/server-components), [SWC](https://nextjs.org/docs/advanced-features/compiler#why-swc)) that are not yet fully supported by Storybook. The Storybook team is working on adding support for these features. In the meantime, you can still use Storybook alongside your NextJS 13 project if you're not relying on them.
 
 ### My framework doesn't work with Storybook
 

docs/contribute/RFC.md

@@ -0,0 +1,55 @@
+---
+title: 'RFC process'
+---
+
+The RFC (Request for Comment) process is intended to provide a consistent and controlled path for new features to enter the project. It helps ensure that new features are well-designed, well-implemented, and well-tested, and they do not conflict with the project's overall direction and scope.
+
+## Goal
+
+Many changes, such as bug fixes and documentation improvements, can be implemented and reviewed via the normal GitHub pull request workflow. Some changes, however, are considered “substantial”, and we ask that these undergo a design process, solicit community input, and reach a consensus among the Storybook core team.
+
+The purpose of the RFC (Request for Comment) process is to:
+
+- Provide a transparent system for proposing new feature ideas.
+- Establish a reliable and well-regulated process for introducing new features into the project.
+- Provide a way for the community to participate in developing new features.
+
+### “Feature Request” vs. “RFC”
+
+A _feature request_ is a straightforward and relatively informal way for Storybook users to suggest a new feature or enhancement to the project. While feature requests can provide valuable insights and ideas, they typically do not involve an in-depth design process or require consensus among the core team. Feature requests are usually open to discussion and may or may not be implemented based on factors like popularity, feasibility, and alignment with the project's goals.
+
+On the other hand, an _RFC_ is a more formalized and structured process for proposing substantial changes or additions to the project. It involves following a defined set of steps to ensure that the proposed feature or modification receives proper consideration, design, and feedback. RFCs are typically used for changes that significantly impact the project, such as introducing new API functionality, removing existing features, or establishing new usage conventions. The RFC process aims to foster discussions, gather feedback from a wider audience, and reach consensus among the core team before integrating the proposed change into the project. Accepted RFCs are more likely to be implemented than regular feature requests.
+
+## The RFC lifecycle
+
+### 1. `Status: Proposed`
+
+Open a new GitHub discussion in the [“RFC” category](https://github.com/storybookjs/storybook/discussions/new?category=rfc). Fill out the form as instructed.
+
+_Details matter_: RFCs that do not present convincing motivation, demonstrate a lack of understanding of the design's impact, or are disingenuous about the drawbacks or alternatives tend to be poorly received.
+
+### 2. `Status: In review`
+
+RFCs tend to remain in this stage for a while, giving the community and core team members time to weigh in. During this period, the author of an RFC should be prepared to revise the proposal, integrate feedback, and build consensus. RFCs that have broad support are much more likely to make progress than those that don't receive any comments.
+
+Every Monday at 11 a.m. (EST), the Storybook core team conducts a weekly triage meeting to review open RFCs as part of the meeting's agenda. The meeting is held in the [Storybook Discord's Watercooler channel](https://discord.com/channels/486522875931656193/486522876388704260). We invite the RFC author(s) and interested members of the community to participate and engage in a more detailed discussion of the RFC. If a core team member deems it necessary, they will be assigned as the "champion" of the RFC. The champion will collaborate with the RFC author and assist them throughout the RFC process.
+
+### 3. `Status: accepted/rejected`
+
+Eventually, the team will decide whether the RFC is a candidate for inclusion in Storybook. On the other hand, an RFC may be rejected by the team after a public discussion has settled and comments have been made summarizing the rationale for rejection.
+
+## Implementing an accepted RFC
+
+The author of an RFC is not obligated to implement it. Of course, the RFC author (like any other developer) is welcome to post an implementation for review after the RFC has been accepted. However, note that the “accepted” status does not indicate priority nor whether it’s being actively worked on.
+
+If you are interested in implementing an "active" RFC, but cannot determine if someone else is already working on it, feel free to ask (e.g., by leaving a comment on the associated issue).
+
+This RFC process took heavy inspiration from the RFC processes from [Rust](https://github.com/rust-lang/rfcs) and [Gatsby](https://www.gatsbyjs.com/contributing/rfc-process/).
+
+## Learn more about contributing to Storybook
+
+- RFC process for authoring feature requests
+- [Code](./code.md) for features and bug fixes
+- [Frameworks](./framework.md) to get started with a new framework
+- [Documentation](./documentation-updates.md) for documentation improvements, typos, and clarifications
+- [Examples](./new-snippets.md) for new snippets and examples

docs/contribute/code.md

@@ -254,11 +254,10 @@ It's troublesome to know which packages you'll change ahead of time, and watchin
 
 </details>
 
-## Other ways to contribute
+## Learn more about contributing to Storybook
 
-Learn about other ways you can contribute to Storybook.
-
-- [**Overview**](./how-to-contribute.md): General guidance
-- [**Docs**](./documentation-updates.md): Typos, clarifications
-- [**Addons**](./../addons/introduction.md): Build an addon and share it with the community
-- [**Frameworks**](./framework.md): Integrate Storybook with your favorite library
+- [RFC process](./RFC.md) for authoring feature requests
+- Code for features and bug fixes
+- [Frameworks](./framework.md) to get started with a new framework
+- [Documentation](./documentation-updates.md) for documentation improvements, typos, and clarifications
+- [Examples](./new-snippets.md) for new snippets and examples

docs/contribute/documentation-updates.md

@@ -22,11 +22,10 @@ Scroll down to the bottom of the document page on GitHub and describe what you c
 
 In the Storybook repository, create a pull request that describes changes and includes additional context that would help maintainers review. Once you submit the PR, a maintainer will guide you through the triage and merge process.
 
-## Other ways to contribute
+## Learn more about contributing to Storybook
 
-Learn about other ways you can contribute to Storybook.
-
-- [**Overview**](./how-to-contribute.md): General guidance
-- [**Code**](./code.md): Features, bug fixes, dependency updates
-- [**Addons**](./../addons/introduction.md): Build an addon and share it with the community
-- [**Frameworks**](./framework.md): Integrate Storybook with your favorite library
+- [RFC process](./RFC.md) for authoring feature requests
+- [Code](./code.md) for features and bug fixes
+- [Frameworks](./framework.md) to get started with a new framework
+- Documentation for documentation improvements, typos, and clarifications
+- [Examples](./new-snippets.md) for new snippets and examples

docs/contribute/framework.md

@@ -144,11 +144,10 @@ Test it in a fresh project using a Storybook set up as close as possible to your
 
 Once it's fully tested and released, please let us know about your framework by either announcing it in the `#showcase` channel of the [Storybook Discord](https://discord.gg/storybook) or tweeting it and mentioning `@storybookjs`. It's our hope that well-made community frameworks can eventually move into the Storybook codebase and be considered "officially" supported.
 
-## Other ways to contribute
+## Learn more about contributing to Storybook
 
-Learn about other ways you can contribute to Storybook.
-
-- [**Contribution overview**](./how-to-contribute.md): General guidance
-- [**Code**](./code.md): Features, bug fixes, dependency updates
-- [**Docs**](./documentation-updates.md): Typos, clarifications
-- [**Addons**](./../addons/introduction.md): Build an addon and share it with the community
+- [RFC process](./RFC.md) for authoring feature requests
+- [Code](./code.md) for features and bug fixes
+- Frameworks to get started with a new framework
+- [Documentation](./documentation-updates.md) for documentation improvements, typos, and clarifications
+- [Examples](./new-snippets.md) for new snippets and examples

docs/contribute/how-to-contribute.md

@@ -6,14 +6,16 @@ Storybook is a community-oriented open source project that welcomes contribution
 
 ## Contributor covenant
 
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.[Continue reading our contributor covenant »](https://github.com/storybookjs/storybook/blob/next/CODE_OF_CONDUCT.md)
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. [Continue reading our contributor covenant »](https://github.com/storybookjs/storybook/blob/next/CODE_OF_CONDUCT.md)
 
 ## Ways to contribute
 
-- [**Code**](./code.md): Features, bug fixes, dependency updates
-- [**Docs**](./documentation-updates.md): Typos, clarifications
-- [**Addons**](./../addons/introduction.md): Build an addon and share it with the community
-- [**Frameworks**](./framework.md): Integrate Storybook with your favorite library
+- [**RFC process**](./RFC.md) for authoring feature requests
+- [**Code**](./code.md) for features and bug fixes
+- [**Frameworks**](./framework.md) to get started with a new framework
+- [**Documentation**](./documentation-updates.md) for documentation improvements, typos, and clarifications
+- [**Examples**](./new-snippets.md) for new snippets and examples
+- [**Addons**](./../addons/introduction.md) for new addons
 
 ## Not sure how to get started?
 

docs/contribute/new-snippets.md

@@ -126,3 +126,11 @@ Go through the documentation and check your work.
 ## Submit your contribution
 
 Finally, commit, push and open a pull request in the Storybook monorepo. Add a clear description of the work you've done, and one of the maintainers will guide you through the merge process.
+
+## Learn more about contributing to Storybook
+
+- [RFC process](./RFC.md) for authoring feature requests
+- [Code](./code.md) for features and bug fixes
+- [Frameworks](./framework.md) to get started with a new framework
+- [Documentation](./documentation-updates.md) for documentation improvements, typos, and clarifications
+- [Examples](./new-snippets.md) for new snippets and examples

docs/toc.js

@@ -680,6 +680,11 @@ module.exports = {
           title: 'How to',
           type: 'link',
         },
+        {
+          pathSegment: 'RFC',
+          title: 'RFC Process',
+          type: 'link',
+        },
         {
           pathSegment: 'code',
           title: 'Code',