mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 12:21:05 +08:00
Merge pull request #21106 from storybookjs/shilman/drop-lit1-support
Web-components: Drop lit1 support
This commit is contained in:
Michael Shilman
GitHub
commit
02c36278c8
@ -2,7 +2,6 @@
|
||||
|
||||
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
|
||||
- [7.0 breaking changes](#70-breaking-changes)
|
||||
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
|
||||
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
|
||||
- [ESM format in Main.js](#esm-format-in-mainjs)
|
||||
- [Modern browser support](#modern-browser-support)
|
||||
@ -37,6 +36,7 @@
|
||||
- [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
|
||||
- [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
|
||||
- [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
|
||||
- [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support)
|
||||
- [Addon authors](#addon-authors)
|
||||
- [register.js removed](#registerjs-removed)
|
||||
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
|
||||
@ -756,6 +756,10 @@ setup((app) => {
|
||||
});
|
||||
```
|
||||
|
||||
#### Web-components: dropped lit-html v1 support
|
||||
|
||||
In v6.x `@storybook/web-components` had a peer dependency on `lit-html` v1 or v2. In 7.0 we've dropped support for `lit-html` v1 and now uses `lit` v2 instead. Please upgrade your project's `lit-html` dependency if you're still on 1.x.
|
||||
|
||||
### Addon authors
|
||||
|
||||
#### register.js removed
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"version": "7.0.0-beta.48",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit",
|
||||
"lit-html",
|
||||
"storybook",
|
||||
"web-components"
|
||||
@ -58,11 +59,11 @@
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lit-html": "2.0.2",
|
||||
"lit": "2.3.1",
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lit-html": "^1.4.1 || ^2.0.0",
|
||||
"lit": "^2.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
|
||||
@ -30,7 +30,9 @@ module.exports = {
|
||||
'^.+\\.(t|j)sx?$': '@swc/jest',
|
||||
'^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
|
||||
},
|
||||
transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|@mdx-js)'],
|
||||
transformIgnorePatterns: [
|
||||
'/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|lit|@mdx-js|@lit)',
|
||||
],
|
||||
testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
|
||||
testPathIgnorePatterns: [
|
||||
'/storybook-static/',
|
||||
|
||||
@ -3,7 +3,7 @@ import type { Generator } from '../types';
|
||||
|
||||
const generator: Generator = async (packageManager, npmOptions, options) => {
|
||||
return baseGenerator(packageManager, npmOptions, options, 'web-components', {
|
||||
extraPackages: ['lit-html'],
|
||||
extraPackages: ['lit'],
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"version": "7.0.0-beta.48",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit",
|
||||
"lit-html",
|
||||
"storybook",
|
||||
"web-components"
|
||||
@ -59,11 +60,11 @@
|
||||
"babel-plugin-bundled-import-meta": "^0.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lit-html": "2.0.2",
|
||||
"lit": "2.3.1",
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lit-html": "^1.4.1 || ^2.0.0"
|
||||
"lit": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
|
||||
@ -9,6 +9,7 @@ export const webpack: StorybookConfig['webpack'] = (config) => {
|
||||
test: [
|
||||
new RegExp(`src(.*)\\.js$`),
|
||||
new RegExp(`packages(\\/|\\\\)*(\\/|\\\\)src(\\/|\\\\)(.*)\\.js$`),
|
||||
new RegExp(`node_modules(\\/|\\\\)lit\\/(.*)\\.js$`),
|
||||
new RegExp(`node_modules(\\/|\\\\)lit-html(.*)\\.js$`),
|
||||
new RegExp(`node_modules(\\/|\\\\)lit-element(.*)\\.js$`),
|
||||
new RegExp(`node_modules(\\/|\\\\)@open-wc(.*)\\.js$`),
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"version": "7.0.0-beta.48",
|
||||
"description": "Storybook web-components renderer",
|
||||
"keywords": [
|
||||
"lit",
|
||||
"lit-html",
|
||||
"storybook",
|
||||
"web-components"
|
||||
@ -64,12 +65,11 @@
|
||||
"@types/node": "^16.0.0",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"lit": "2.3.1",
|
||||
"lit-html": "2.0.2",
|
||||
"typescript": "~4.9.3",
|
||||
"web-component-analyzer": "^1.1.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lit-html": "^1.4.1 || ^2.0.0"
|
||||
"lit": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export const Welcome = () => html`
|
||||
<div class="main">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { html } from 'lit-html';
|
||||
import { styleMap } from 'lit-html/directives/style-map.js';
|
||||
import { html } from 'lit';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { addons, useEffect } from '@storybook/preview-api';
|
||||
import { SNIPPET_RENDERED } from '@storybook/docs-tools';
|
||||
import type { StoryContext } from '../types';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { render } from 'lit-html';
|
||||
import { render } from 'lit';
|
||||
import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/types';
|
||||
import { addons, useEffect } from '@storybook/preview-api';
|
||||
import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
|
||||
|
||||
@ -29,11 +29,11 @@ const runWebComponentsAnalyzer = (inputPath: string) => {
|
||||
};
|
||||
|
||||
describe('web-components component properties', () => {
|
||||
// we need to mock lit-html and dynamically require custom-elements
|
||||
// because lit-html is distributed as ESM not CJS
|
||||
// we need to mock lit and dynamically require custom-elements
|
||||
// because lit is distributed as ESM not CJS
|
||||
// https://github.com/Polymer/lit-html/issues/516
|
||||
jest.mock('lit-html', () => {});
|
||||
jest.mock('lit-html/directive-helpers.js', () => {});
|
||||
jest.mock('lit', () => {});
|
||||
jest.mock('lit/directive-helpers.js', () => {});
|
||||
// eslint-disable-next-line global-require
|
||||
const { extractArgTypesFromElements } = require('./custom-elements');
|
||||
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
import { dedent } from 'ts-dedent';
|
||||
import { render as litRender } from 'lit-html';
|
||||
import { render as litRender } from 'lit';
|
||||
// Keep `.js` extension to avoid issue with Webpack (related to export map?)
|
||||
|
||||
import { isTemplateResult } from 'lit-html/directive-helpers.js';
|
||||
import { isTemplateResult } from 'lit/directive-helpers.js';
|
||||
import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api';
|
||||
import type { RenderContext, ArgsStoryFn } from '@storybook/types';
|
||||
import type { WebComponentsRenderer } from './types';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
|
||||
import type { TemplateResult, SVGTemplateResult } from 'lit-html';
|
||||
import type { TemplateResult, SVGTemplateResult } from 'lit';
|
||||
|
||||
export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { html } from 'lit-html';
|
||||
import { styleMap } from 'lit-html/directives/style-map.js';
|
||||
import { html } from 'lit';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import './button.css';
|
||||
|
||||
/**
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import { Button } from './Button';
|
||||
import './header.css';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
import { Header } from './Header';
|
||||
import './page.css';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { html } from 'lit-html';
|
||||
import { styleMap } from 'lit-html/directives/style-map.js';
|
||||
import { html } from 'lit';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import './button.css';
|
||||
|
||||
export interface ButtonProps {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import { Button } from './Button';
|
||||
import './header.css';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
import { Header } from './Header';
|
||||
import './page.css';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
import { html, LitElement } from 'lit';
|
||||
|
||||
import { styleMap } from 'lit-html/directives/style-map.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
|
||||
const { customElements } = globalThis;
|
||||
|
||||
|
||||
@ -6233,10 +6233,10 @@ __metadata:
|
||||
"@types/node": ^16.0.0
|
||||
babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0
|
||||
babel-plugin-bundled-import-meta: ^0.3.1
|
||||
lit-html: 2.0.2
|
||||
lit: 2.3.1
|
||||
typescript: ~4.9.3
|
||||
peerDependencies:
|
||||
lit-html: ^1.4.1 || ^2.0.0
|
||||
lit: ^2.0.0
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
@ -6969,10 +6969,10 @@ __metadata:
|
||||
"@storybook/preset-web-components-webpack": 7.0.0-beta.48
|
||||
"@storybook/web-components": 7.0.0-beta.48
|
||||
"@types/node": ^16.0.0
|
||||
lit-html: 2.0.2
|
||||
lit: 2.3.1
|
||||
typescript: ~4.9.3
|
||||
peerDependencies:
|
||||
lit-html: ^1.4.1 || ^2.0.0
|
||||
lit: ^2.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
languageName: unknown
|
||||
@ -6993,12 +6993,11 @@ __metadata:
|
||||
"@types/node": ^16.0.0
|
||||
cross-spawn: ^7.0.3
|
||||
lit: 2.3.1
|
||||
lit-html: 2.0.2
|
||||
ts-dedent: ^2.0.0
|
||||
typescript: ~4.9.3
|
||||
web-component-analyzer: ^1.1.6
|
||||
peerDependencies:
|
||||
lit-html: ^1.4.1 || ^2.0.0
|
||||
lit: ^2.0.0
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
@ -19623,15 +19622,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lit-html@npm:2.0.2":
|
||||
version: 2.0.2
|
||||
resolution: "lit-html@npm:2.0.2"
|
||||
dependencies:
|
||||
"@types/trusted-types": ^2.0.2
|
||||
checksum: 3a199fdc8a2a914cae0f4bcb61582d15ca671a84e34db387651d4009be9c41951c8d29381a8d858c2037efb4fce6f4eccf51d4da545d9dd419651b0b42b1b88b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lit-html@npm:^2.2.0, lit-html@npm:^2.3.0":
|
||||
version: 2.6.1
|
||||
resolution: "lit-html@npm:2.6.1"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Button',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// card-component.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
import { useChannel } from '@storybook/preview-api';
|
||||
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
|
||||
import './card-component';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'img',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'img',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'MyComponent',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// CSF 2
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'components/Button',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, Story } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'components/Button',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'List',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
// 👇 We're importing the necessary stories from ListItem
|
||||
import { Selected, Unselected } from './ListItem.stories';
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
// 👇 We're importing the necessary stories from ListItem
|
||||
import { Selected, Unselected } from './ListItem.stories';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
|
||||
import { Unchecked } from './ListItem.stories';
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
|
||||
const meta: Meta = {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyList.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
// 👇 Import the stories of MyListItem
|
||||
import { Unchecked } from './MyListItem.stories';
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
// 👇 Import the stories of MyListItem
|
||||
import { Unchecked } from './my-list-item.stories';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'List',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'MyComponent',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'MyComponent',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'Path/To/MyComponent',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
/*
|
||||
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import { StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// MyComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'MyComponent',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Page.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'Page',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Page',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export const decorators = [(story) => html`<div style="margin: 3em">${story()}</div>`],
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// Table.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
|
||||
export default {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/web-components';
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
|
||||
const meta: Meta = {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```js
|
||||
// YourComponent.stories.js
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
export default {
|
||||
title: 'YourComponent',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
```ts
|
||||
// YourComponent.stories.ts
|
||||
|
||||
import { html } from 'lit-html';
|
||||
import { html } from 'lit';
|
||||
|
||||
import type { Meta } from '@storybook/web-components';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user