storybookjs · shilman · May 10, 2021 · Apr 1, 2021 · Apr 2, 2021 · Apr 16, 2021
diff --git a/.gitignore b/.gitignore
@@ -40,4 +40,4 @@ examples/angular-cli/addon-jest.testresults.json
 !/.yarn/plugins
 !/.yarn/sdks
 !/.yarn/versions
-/.pnp.*
+.pnp.*
diff --git a/addons/actions/src/register.tsx b/addons/actions/src/register.tsx
@@ -8,7 +8,7 @@ addons.register(ADDON_ID, (api) => {
   addons.addPanel(PANEL_ID, {
     title() {
       const [actionsCount, setActionsCount] = useState(0);
-      const onEvent = () => setActionsCount(previous => previous + 1);
+      const onEvent = () => setActionsCount((previous) => previous + 1);
       const onChange = () => setActionsCount(0);
 
       useEffect(() => {

diff --git a/addons/docs/README.md b/addons/docs/README.md
@@ -79,17 +79,17 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
 
 Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:
 
-|                   | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Riot | Mithril | Marko |
-| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :--: | :-----: | :---: |
-| MDX stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
-| CSF stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
-| StoriesOf stories |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
-| Source            |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
-| Notes / Info      |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
-| Props table       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
-| Props controls    |   +   |  +  |    +    |       |                |      |        |        |      |         |       |
-| Description       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
-| Inline stories    |   +   |  +  |    +    |       |       +        |  +   |        |        |      |         |       |
+|                   | React | Vue | Angular | Ember | Web Components | Marko | HTML | Svelte | Preact | Riot | Mithril | Marko |
+| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :---: | :--: | :----: | :----: | :--: | :-----: | :---: |
+| MDX stories       |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
+| CSF stories       |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
+| StoriesOf stories |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
+| Source            |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
+| Notes / Info      |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
+| Props table       |   +   |  +  |    +    |   +   |       +        |  WIP  |      |        |        |      |         |       |
+| Props controls    |   +   |  +  |    +    |       |                |  WIP  |      |        |        |      |         |       |
+| Description       |   +   |  +  |    +    |   +   |       +        |  WIP  |      |        |        |      |         |       |
+| Inline stories    |   +   |  +  |    +    |       |       +        |  WIP  |  +   |        |        |      |         |       |
 
 **Note:** `#` = WIP support
 
@@ -139,6 +139,7 @@ Add the following to your Jest configuration:
 - [Angular](https://github.com/storybookjs/storybook/tree/next/addons/docs/angular)
 - [Ember](https://github.com/storybookjs/storybook/tree/next/addons/docs/ember)
 - [Web Components](https://github.com/storybookjs/storybook/tree/next/addons/docs/web-components)
+- [Lit](https://github.com/storybookjs/storybook/tree/next/addons/docs/lit)
 - [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/addons/docs/common)
 
 ## Preset options

diff --git a/addons/docs/common/README.md b/addons/docs/common/README.md
@@ -2,7 +2,7 @@
 
 Storybook Docs transforms your Storybook stories into world-class component documentation. Docs supports [all web frameworks that Storybook supports](../README.md#framework-support).
 
-Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.
+Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md)/[Lit](../lit/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations.
 
 - [Installation](#installation)
 - [DocsPage](#docspage)

diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md
@@ -198,6 +198,6 @@ With that flag, now the docs addon will show all code blocks open by default.
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) / [Lit](../lit/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/faq.md b/addons/docs/docs/faq.md
@@ -44,6 +44,6 @@ This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) / [Lit](../lit/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/mdx.md b/addons/docs/docs/mdx.md
@@ -195,6 +195,6 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) / [Lit](../lit/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/multiframework.md b/addons/docs/docs/multiframework.md
@@ -32,7 +32,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
 
 This appends `vue-docgen-loader` to the existing configuration, which at this point will also include modifications made by the common preset.
 
-For props tables and descriptions, both of which are described in more detail below, it defines a file [config.tsx](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/config.tsx).
+For props tables and descriptions, both of which are described in more detail below, it defines a file [config.jsx](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/config.jsx).
 
 ## Arg tables
 
@@ -160,6 +160,6 @@ This configures the `jsxDecorator` to be run on every story.
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) / [Lit](../lit/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/props-tables.md b/addons/docs/docs/props-tables.md
@@ -19,7 +19,7 @@ Storybook Docs automatically generates props tables for components in supported
 
 ## Usage
 
-For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue](../vue/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md).
+For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue](../vue/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md), [Lit](../lit/README.md).
 
 ### DocsPage
 
@@ -259,10 +259,11 @@ This package relies on a variety of sub-packages to extract property information
 | Angular        | `compodoc`                               | [Docs](../angular/README.md#props-tables)        | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22)        |
 | Web-components | `custom-elements.json`                   | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) |
 | Ember          | `yui-doc`                                | [Docs](../ember/README.md#props-tables)          | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22)          |
+| Lit -- ⚠️ WIP  | WIP                                      | [Docs](../lit/README.md#props-tables)            | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) |
 
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) / [Lit](../lit/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/recipes.md b/addons/docs/docs/recipes.md
@@ -339,6 +339,6 @@ Rest of your file...
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) / [Lit](../lit/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/docs/theming.md b/addons/docs/docs/theming.md
@@ -92,6 +92,6 @@ addParameters({
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
-- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md)
+- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) / [Lit](../lit/README.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/lit/README.md b/addons/docs/lit/README.md
@@ -0,0 +1,46 @@
+<h1>Storybook Docs for Lit</h1>
+
+- [Installation](#installation)
+- [Props tables](#props-tables)
+- [Stories not inline](#stories-not-inline)
+- [More resources](#more-resources)
+
+## Installation
+
+- Be sure to check the [installation section of the general addon-docs page](../README.md) before proceeding.
+
+WIP
+
+## Props tables
+
+WIP
+
+## Stories not inline
+
+By default stories are rendered inline.
+For web components that is usually fine as they are style encapsulated via shadow dom.
+However when you have a style tag in you template it might be best to show them in an iframe.
+
+To always use iframes you can set
+
+```js
+addParameters({
+  docs: {
+    inlineStories: false,
+  },
+});
+```
+
+or add it to individual stories.
+
+```js
+<Story inline={false} />
+```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
diff --git a/addons/docs/lit/index.js b/addons/docs/lit/index.js
@@ -0,0 +1 @@
+module.exports = require('../dist/esm/frameworks/lit/index');
diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -44,6 +44,7 @@
     "react/**/*",
     "vue/**/*",
     "web-components/**/*",
+    "lit/**/*",
     "README.md",
     "*.js",
     "*.d.ts",
@@ -102,6 +103,7 @@
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
     "@storybook/angular": "6.3.0-alpha.21",
+    "@storybook/lit": "6.3.0-alpha.21",
     "@storybook/react": "6.3.0-alpha.21",
     "@storybook/vue": "6.3.0-alpha.21",
     "@storybook/web-components": "6.3.0-alpha.21",
@@ -135,9 +137,11 @@
   },
   "peerDependencies": {
     "@storybook/angular": "6.3.0-alpha.21",
+    "@storybook/lit": "6.3.0-alpha.21",
     "@storybook/vue": "6.3.0-alpha.21",
     "@storybook/vue3": "6.3.0-alpha.21",
     "@storybook/web-components": "6.3.0-alpha.21",
+    "lit": "^2.0.0-rc.1",
     "lit-html": "^1.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
@@ -150,6 +154,9 @@
     "@storybook/angular": {
       "optional": true
     },
+    "@storybook/lit": {
+      "optional": true
+    },
     "@storybook/vue": {
       "optional": true
     },
@@ -159,6 +166,9 @@
     "@storybook/web-components": {
       "optional": true
     },
+    "lit": {
+      "optional": true
+    },
     "lit-html": {
       "optional": true
     },

diff --git a/addons/docs/src/frameworks/lit/config.ts b/addons/docs/src/frameworks/lit/config.ts
@@ -0,0 +1,8 @@
+import { prepareForInline } from './prepareForInline';
+
+export const parameters = {
+  docs: {
+    inlineStories: true,
+    prepareForInline,
+  },
+};
diff --git a/addons/docs/src/frameworks/lit/prepareForInline.ts b/addons/docs/src/frameworks/lit/prepareForInline.ts
@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, TemplateResult } from 'lit';
+
+export const prepareForInline = (storyFn: () => TemplateResult) => {
+  const inlineStory = class Story extends React.Component {
+    readonly wrapperRef: React.RefObject<HTMLElement>;
+
+    constructor(props: unknown) {
+      super(props);
+      this.wrapperRef = React.createRef();
+    }
+
+    componentDidMount() {
+      render(storyFn(), this.wrapperRef.current);
+    }
+
+    render() {
+      return React.createElement('div', { ref: this.wrapperRef });
+    }
+  };
+  return React.createElement(inlineStory);
+};
diff --git a/app/lit/.eslintrc.js b/app/lit/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  rules: {
+    'import/extensions': 0,
+  },
+};