GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 23:11:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19430 from storybookjs/shilman/delete-web-components-kitchen-sink

Browse Source 
Web-components: Port template stories and delete web-components-kitchen-sink
This commit is contained in:
Michael Shilman 2022-10-11 11:30:58 +08:00 committed by GitHub
commit b257ae7793
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 213 additions and 7301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.circleci/config.yml
View File

@ -125,7 +125,7 @@ jobs:
executor:
class: medium+
name: sb_node_14_browsers
parallelism: 11
parallelism: 9
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'

13
code/examples/web-components-kitchen-sink/.babelrc
View File

@ -1,13 +0,0 @@
{
"presets": [
["@babel/preset-env", { "targets": { "chrome": "100" } }],
"@babel/preset-typescript"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-class-properties",
],
"assumptions": {
"setPublicClassFields": true
}
}

10
code/examples/web-components-kitchen-sink/.eslintrc.js
View File

@ -1,10 +0,0 @@
module.exports = {
extends: ['../../.eslintrc.js'],
env: {
browser: true,
},
rules: {
'import/extensions': [0],
'import/no-unresolved': [0],
},
};

27
code/examples/web-components-kitchen-sink/.storybook/main.js
View File

@ -1,27 +0,0 @@
module.exports = {
logLevel: 'debug',
stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
addons: [
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-a11y',
'@storybook/addon-actions',
'@storybook/addon-backgrounds',
'@storybook/addon-interactions',
'@storybook/addon-links',
'@storybook/addon-storysource',
'@storybook/addon-viewport',
'@storybook/addon-toolbars',
'@storybook/addon-highlight',
],
core: {
channelOptions: { allowFunction: false, maxDepth: 10 },
disableTelemetry: true,
},
features: {
interactionsDebugger: true,
buildStoriesJson: true,
breakingChangesV7: true,
},
framework: '@storybook/web-components-webpack5',
};

34
code/examples/web-components-kitchen-sink/.storybook/preview.js
View File

@ -1,34 +0,0 @@
import { setCustomElementsManifest } from '@storybook/web-components';
import customElementsManifest from '../custom-elements.json';
setCustomElementsManifest(customElementsManifest);
// TODO: Remove support of 0.x CustomElementManifest format in 7.0
// import customElements from '../custom-elements-experimental.json';
// setCustomElements(customElements);
export const parameters = {
docs: {
iframeHeight: '200px',
},
chromatic: { delay: 3000 },
};
export const globalTypes = {
locale: {
name: 'Locale',
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: [
{ value: 'en', right: '🇺🇸', title: 'English' },
{ value: 'es', right: '🇪🇸', title: 'Español' },
{ value: 'fr', right: '🇫🇷', title: 'Français' },
{ value: 'zh', right: '🇨🇳', title: '中文' },
{ value: 'kr', right: '🇰🇷', title: '한국어' },
],
},
},
};

2
code/examples/web-components-kitchen-sink/.yarnrc.yml
View File

@ -1,2 +0,0 @@
# FIXME: Hack to make the CI happy; to remove as soon as we are using `workspace:*` in our deps instead of pin versions
enableImmutableInstalls: false

7
code/examples/web-components-kitchen-sink/README.md
View File

@ -1,7 +0,0 @@
# Storybook Web Components Demo
This example directory represents the application you wish to integrate storybook into.
Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.
When developing things in `@storybook/web-components` you can run `yarn build web-components --watch` in the root folder of the monorepo and both changes in the example code or in `@storybook/web-components` will be reflected in the UI.

523
code/examples/web-components-kitchen-sink/custom-elements.json
View File

@ -1,523 +0,0 @@
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "demo-wc-card.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "demo-wc-card",
"declaration": {
"name": "DemoWcCard",
"module": "/src/stories/misc/to-update/DemoWcCard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/typings.d.ts",
"declarations": [],
"exports": []
},
{
"kind": "javascript-module",
"path": "src/components/sb-button.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SbButton",
"cssProperties": [
{
"description": "Controls the color of bar",
"name": "--sb-primary-color",
"default": "#1ea7fd"
}
],
"members": [
{
"kind": "field",
"name": "primary",
"type": {
"text": "boolean"
},
"description": "Set button in primary mode",
"privacy": "public",
"attribute": "primary"
},
{
"kind": "field",
"name": "backgroundColor",
"type": {
"text": "string | undefined"
},
"privacy": "public",
"attribute": "background-color"
},
{
"kind": "field",
"name": "size",
"type": {
"text": "'small' | 'medium' | 'large'"
},
"default": "'medium'",
"privacy": "public",
"attribute": "size"
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"privacy": "public",
"attribute": "label",
"reflects": true
},
{
"kind": "method",
"name": "onClick",
"privacy": "private"
}
],
"events": [
{
"name": "sb-button:click",
"type": {
"text": "CustomEvent"
},
"description": "Custom event send when the button is clicked"
}
],
"attributes": [
{
"type": {
"text": "string"
},
"description": "Label of the button",
"name": "label",
"fieldName": "label"
},
{
"type": {
"text": "string"
},
"description": "Size of the button, can be \"small\", \"medium\" or \"large\"; default is \"medium\".",
"name": "size",
"fieldName": "size"
},
{
"type": {
"text": "string"
},
"description": "Color of the button's background",
"name": "backgroundColor"
},
{
"name": "primary",
"fieldName": "primary"
},
{
"name": "background-color",
"fieldName": "backgroundColor"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "sb-button",
"summary": "This is a simple Storybook Button",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "SbButton",
"declaration": {
"name": "SbButton",
"module": "src/components/sb-button.ts"
}
},
{
"kind": "custom-element-definition",
"name": "sb-button",
"declaration": {
"name": "SbButton",
"module": "src/components/sb-button.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/sb-header.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SbHeader",
"members": [
{
"kind": "field",
"name": "user",
"type": {
"text": "{} | undefined"
},
"privacy": "public",
"attribute": "user",
"reflects": true
},
{
"kind": "method",
"name": "dispatchCustomEvent",
"privacy": "private",
"parameters": [
{
"name": "eventName",
"type": {
"text": "string"
}
}
]
},
{
"kind": "method",
"name": "logInOutButton",
"privacy": "private"
}
],
"events": [
{
"type": {
"text": "CustomEvent"
}
},
{
"type": {
"text": "CustomEvent"
},
"description": "Event send when user clicks on create account button",
"name": "sb-header:createAccount"
},
{
"type": {
"text": "CustomEvent"
},
"description": "Event send when user clicks on login button",
"name": "sb-header:login"
},
{
"type": {
"text": "CustomEvent"
},
"description": "Event send when user clicks on logout button",
"name": "sb-header:logout"
}
],
"attributes": [
{
"type": {
"text": "Object"
},
"description": "User of the app",
"name": "user",
"fieldName": "user"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "sb-header",
"summary": "This is a simple Storybook Header",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "SbHeader",
"declaration": {
"name": "SbHeader",
"module": "src/components/sb-header.ts"
}
},
{
"kind": "custom-element-definition",
"name": "sb-header",
"declaration": {
"name": "SbHeader",
"module": "src/components/sb-header.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/sb-page.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "SbPage",
"members": [
{
"kind": "field",
"name": "user",
"type": {
"text": "{} | undefined"
},
"privacy": "public",
"attribute": "user",
"reflects": true
}
],
"attributes": [
{
"type": {
"text": "Object"
},
"description": "User of the app",
"name": "user",
"fieldName": "user"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "sb-page",
"summary": "This is a simple Storybook Page",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "SbPage",
"declaration": {
"name": "SbPage",
"module": "src/components/sb-page.ts"
}
},
{
"kind": "custom-element-definition",
"name": "sb-page",
"declaration": {
"name": "SbPage",
"module": "src/components/sb-page.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/stories/addons/interactions/counter.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "Counter",
"members": [
{
"kind": "field",
"name": "count",
"type": {
"text": "number"
},
"default": "0",
"privacy": "public",
"attribute": "count"
},
{
"kind": "field",
"name": "decrement"
},
{
"kind": "field",
"name": "increment"
}
],
"attributes": [
{
"name": "count",
"fieldName": "count"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "sb-counter",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "Counter",
"declaration": {
"name": "Counter",
"module": "src/stories/addons/interactions/counter.ts"
}
},
{
"kind": "custom-element-definition",
"name": "sb-counter",
"declaration": {
"name": "Counter",
"module": "src/stories/addons/interactions/counter.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/stories/misc/to-update/DemoWcCard.js",
"declarations": [
{
"kind": "class",
"description": "This is a container looking like a card with a back and front side you can switch",
"name": "DemoWcCard",
"cssProperties": [
{
"description": "Header font size",
"name": "--demo-wc-card-header-font-size"
},
{
"description": "Font color for front",
"name": "--demo-wc-card-front-color"
},
{
"description": "Font color for back",
"name": "--demo-wc-card-back-color"
}
],
"cssParts": [
{
"description": "Front of the card",
"name": "front"
},
{
"description": "Back of the card",
"name": "back"
}
],
"slots": [
{
"description": "This is an unnamed slot (the default slot)",
"name": ""
}
],
"members": [
{
"kind": "method",
"name": "toggle"
},
{
"kind": "field",
"name": "backSide",
"type": {
"text": "boolean"
},
"description": "Indicates that the back of the card is shown",
"default": "false",
"privacy": "public",
"attribute": "back-side",
"reflects": true
},
{
"kind": "field",
"name": "header",
"type": {
"text": "string"
},
"description": "Header message",
"default": "'Your Message'",
"privacy": "public",
"attribute": "header"
},
{
"kind": "field",
"name": "rows",
"type": {
"text": "array"
},
"description": "Data rows",
"default": "[]",
"privacy": "public",
"attribute": "rows"
}
],
"events": [
{
"name": "side-changed",
"type": {
"text": "CustomEvent"
},
"description": "Fires whenever it switches between front/back"
}
],
"attributes": [
{
"name": "back-side",
"fieldName": "backSide"
},
{
"name": "header",
"fieldName": "header"
},
{
"name": "rows",
"fieldName": "rows"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "demo-wc-card",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "DemoWcCard",
"declaration": {
"name": "DemoWcCard",
"module": "src/stories/misc/to-update/DemoWcCard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/stories/misc/to-update/demoWcCardStyle.css.js",
"declarations": [
{
"kind": "variable",
"name": "demoWcCardStyle",
"default": "css`\n :host {\n display: block;\n position: relative;\n width: 250px;\n height: 200px;\n border-radius: 10px;\n transform-style: preserve-3d;\n transition: all 0.8s ease;\n }\n\n .header {\n font-weight: bold;\n font-size: var(--demo-wc-card-header-font-size, 16px);\n text-align: center;\n }\n\n .content {\n padding: 20px 10px 0 10px;\n flex-grow: 1;\n }\n\n .footer {\n display: flex;\n }\n\n dl {\n margin: 0;\n text-align: left;\n }\n\n dd {\n margin-left: 15px;\n }\n\n button {\n border-radius: 15px;\n width: 30px;\n height: 30px;\n background: #fff;\n border: 1px solid #ccc;\n color: #000;\n font-size: 21px;\n line-height: 27px;\n font-weight: bold;\n cursor: pointer;\n margin: 5px;\n }\n\n .note {\n flex-grow: 1;\n color: #666;\n font-size: 16px;\n font-weight: bold;\n text-align: left;\n padding-top: 15px;\n }\n\n :host([back-side]) {\n transform: rotateY(180deg);\n }\n\n #front,\n #back {\n position: absolute;\n width: 250px;\n box-sizing: border-box;\n box-shadow: #ccc 3px 3px 2px 1px;\n padding: 10px;\n display: flex;\n flex-flow: column;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 10px;\n backface-visibility: hidden;\n overflow: hidden;\n }\n\n #front {\n background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);\n color: var(--demo-wc-card-front-color, #000);\n }\n\n #back {\n background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);\n color: var(--demo-wc-card-back-color, #fff);\n text-align: center;\n transform: rotateY(180deg) translate3d(0px, 0, 1px);\n }\n\n #back .note {\n color: #fff;\n }\n`"
}
],
"exports": [
{
"kind": "js",
"name": "demoWcCardStyle",
"declaration": {
"name": "demoWcCardStyle",
"module": "src/stories/misc/to-update/demoWcCardStyle.css.js"
}
}
]
}
]
}

3
code/examples/web-components-kitchen-sink/demo-wc-card.js
View File

@ -1,3 +0,0 @@
import { DemoWcCard } from './src/stories/misc/to-update/DemoWcCard.js';
customElements.define('demo-wc-card', DemoWcCard);

99
code/examples/web-components-kitchen-sink/package.json
View File

@ -1,99 +0,0 @@
{
"name": "web-components-kitchen-sink",
"version": "7.0.0-alpha.35",
"private": true,
"description": "",
"keywords": [],
"license": "MIT",
"author": "",
"main": "index.js",
"scripts": {
"build-storybook": "storybook build",
"generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\" --exclude \"./storybook-static\"",
"storybook": "storybook dev -p 9006 --no-manager-cache"
},
"resolutions": {
"@babel/plugin-proposal-decorators": "^7.17.9",
"@storybook/addon-a11y": "link:../../addons/a11y",
"@storybook/addon-actions": "link:../../addons/actions",
"@storybook/addon-backgrounds": "link:../../addons/backgrounds",
"@storybook/addon-controls": "link:../../addons/controls",
"@storybook/addon-docs": "link:../../addons/docs",
"@storybook/addon-highlight": "link:../../addons/highlight",
"@storybook/addon-interactions": "link:../../addons/interactions",
"@storybook/addon-links": "link:../../addons/links",
"@storybook/addon-storyshots": "link:../../addons/storyshots/storyshots-core",
"@storybook/addon-storysource": "link:../../addons/storysource",
"@storybook/addon-toolbars": "link:../../addons/toolbars",
"@storybook/addon-viewport": "link:../../addons/viewport",
"@storybook/addons": "link:../../lib/addons",
"@storybook/api": "link:../../lib/api",
"@storybook/builder-manager": "link:../../lib/builder-manager",
"@storybook/builder-webpack5": "link:../../lib/builder-webpack5",
"@storybook/channel-postmessage": "link:../../lib/channel-postmessage",
"@storybook/channel-websocket": "link:../../lib/channel-websocket",
"@storybook/channels": "link:../../lib/channels",
"@storybook/cli": "link:../../lib/cli",
"@storybook/client-api": "link:../../lib/client-api",
"@storybook/client-logger": "link:../../lib/client-logger",
"@storybook/codemod": "link:../../lib/codemod",
"@storybook/components": "link:../../lib/components",
"@storybook/core-client": "link:../../lib/core-client",
"@storybook/core-common": "link:../../lib/core-common",
"@storybook/core-events": "link:../../lib/core-events",
"@storybook/core-server": "link:../../lib/core-server",
"@storybook/core-webpack": "link:../../lib/core-webpack",
"@storybook/csf": "0.0.2--canary.0899bb7.0",
"@storybook/csf-tools": "link:../../lib/csf-tools",
"@storybook/docs-tools": "link:../../lib/docs-tools",
"@storybook/jest": "^0.0.10",
"@storybook/mdx1-csf": "canary",
"@storybook/node-logger": "link:../../lib/node-logger",
"@storybook/postinstall": "link:../../lib/postinstall",
"@storybook/preset-web-components-webpack": "link:../../presets/web-components-webpack",
"@storybook/preview-web": "link:../../lib/preview-web",
"@storybook/router": "link:../../lib/router",
"@storybook/source-loader": "link:../../lib/source-loader",
"@storybook/store": "link:../../lib/store",
"@storybook/telemetry": "link:../../lib/telemetry",
"@storybook/testing-library": "0.0.14-next.0",
"@storybook/theming": "link:../../lib/theming",
"@storybook/ui": "link:../../lib/ui",
"@storybook/web-components": "link:../../renderers/web-components",
"@storybook/web-components-webpack5": "link:../../frameworks/web-components-webpack5",
"babel-plugin-macros": "3.1.0",
"fork-ts-checker-webpack-plugin": "^7.2.6",
"storybook": "portal:../../lib/cli-storybook",
"typescript": "~4.6.3"
},
"dependencies": {
"lit": "^2.0.2",
"react": "^16.8.0"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@custom-elements-manifest/analyzer": "^0.5.7",
"@storybook/addon-a11y": "*",
"@storybook/addon-actions": "*",
"@storybook/addon-backgrounds": "*",
"@storybook/addon-controls": "*",
"@storybook/addon-docs": "*",
"@storybook/addon-jest": "*",
"@storybook/addon-links": "*",
"@storybook/addon-storyshots": "*",
"@storybook/addon-storysource": "*",
"@storybook/addon-viewport": "*",
"@storybook/web-components": "*",
"@storybook/web-components-webpack5": "*",
"global": "^4.4.0",
"jest": "^26.6.3",
"storybook": "*",
"typescript": "~4.6.3"
},
"customElements": "custom-elements.json",
"storybook": {
"chromatic": {
"projectToken": "npm5gsofwkf"
}
}
}

50
code/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
View File

@ -1,50 +0,0 @@
import type { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import './sb-button';
import type { SbButton } from './sb-button';
export default {
title: 'Example/Button',
// Need to set the tag to make addon-docs works properly with CustomElementsManifest
component: 'sb-button',
argTypes: {
onClick: { action: 'onClick' },
},
parameters: {
actions: {
handles: ['click', 'sb-button:click'],
},
},
} as Meta;
const Template: Story<SbButton> = ({ primary, backgroundColor, size, label }) =>
html`<sb-button
?primary="${primary}"
size="${ifDefined(size)}"
label="${ifDefined(label)}"
background-color="${ifDefined(backgroundColor)}"
></sb-button>`;
export const Primary: Story<SbButton> = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
export const Secondary: Story<SbButton> = Template.bind({});
Secondary.args = {
label: 'Button',
};
export const Large: Story<SbButton> = Template.bind({});
Large.args = {
size: 'large',
label: 'Button',
};
export const Small: Story<SbButton> = Template.bind({});
Small.args = {
size: 'small',
label: 'Button',
};

107
code/examples/web-components-kitchen-sink/src/components/sb-button.ts
View File

@ -1,107 +0,0 @@
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
/**
* @attr {string} label - Label of the button
* @attr {string} size - Size of the button, can be "small", "medium" or "large"; default is "medium".
* @attr {string} backgroundColor - Color of the button's background
*
* @cssprop [--sb-primary-color=#1ea7fd] - Controls the color of bar
*
* @prop {boolean} primary - Set button in primary mode
*
* @event {CustomEvent} sb-button:click - Custom event send when the button is clicked
*
* @summary This is a simple Storybook Button
*
* @tag sb-button
*/
@customElement('sb-button')
export class SbButton extends LitElement {
static get styles() {
return css`
.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
}
.storybook-button--primary {
color: white;
background-color: var(--sb-primary-color, #1ea7fd);
}
.storybook-button--secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
}
.storybook-button--small {
font-size: 12px;
padding: 10px 16px;
}
.storybook-button--medium {
font-size: 14px;
padding: 11px 20px;
}
.storybook-button--large {
font-size: 16px;
padding: 12px 24px;
}
`;
}
// Currently TS decorators are not reflected so we have to use static `properties` function
// https://github.com/Polymer/lit-html/issues/1476
static get properties() {
return {
label: { type: String, reflect: true },
primary: { type: Boolean },
size: { type: String },
backgroundColor: { type: String, attribute: 'background-color' },
};
}
primary?: boolean;
backgroundColor?: string;
// FIXME: default value is overridden by `undefined` when the attribute isn't
// defined in Story's args
size: 'small' | 'medium' | 'large' = 'medium';
label = '';
private onClick() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent('sb-button:click', options));
}
render() {
const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
const style = styleMap({ backgroundColor: this.backgroundColor ?? null });
return html`
<button
type="button"
class=${['storybook-button', `storybook-button--${this.size ?? 'medium'}`, mode].join(' ')}
style=${style}
@click="${this.onClick}"
>
${this.label}
</button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'sb-button': SbButton;
}
}

38
code/examples/web-components-kitchen-sink/src/components/sb-header.stories.ts
View File

@ -1,38 +0,0 @@
import type { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import './sb-header';
import type { SbHeader } from './sb-header';
export default {
title: 'Example/Header',
component: 'sb-header',
} as Meta;
interface SbHeaderProps extends SbHeader {
onSbHeaderCreateAccount: (event: Event) => void;
onSbHeaderLogin: (event: Event) => void;
onSbHeaderLogout: (event: Event) => void;
}
const Template: Story<SbHeaderProps> = ({
user,
onSbHeaderCreateAccount,
onSbHeaderLogin,
onSbHeaderLogout,
}) => {
return html`<sb-header
@sb-header:createAccount=${onSbHeaderCreateAccount}
@sb-header:login=${onSbHeaderLogin}
@sb-header:logout=${onSbHeaderLogout}
.user=${user}
></sb-header>`;
};
export const LoggedIn: Story<SbHeaderProps> = Template.bind({});
LoggedIn.args = {
user: {},
};
export const LoggedOut: Story<SbHeaderProps> = Template.bind({});
LoggedOut.args = {};

124
code/examples/web-components-kitchen-sink/src/components/sb-header.ts
View File

@ -1,124 +0,0 @@
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import './sb-button';
/**
* @attr {Object} user - User of the app
*
* @event {CustomEvent} sb-header:createAccount - Event send when user clicks on create account button
* @event {CustomEvent} sb-header:login - Event send when user clicks on login button
* @event {CustomEvent} sb-header:logout - Event send when user clicks on logout button
*
* @summary This is a simple Storybook Header
*
* @tag sb-header
*/
@customElement('sb-header')
export class SbHeader extends LitElement {
static get styles() {
return css`
.wrapper {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
svg {
display: inline-block;
vertical-align: top;
}
h1 {
font-weight: 900;
font-size: 20px;
line-height: 1;
margin: 6px 0 6px 10px;
display: inline-block;
vertical-align: top;
}
button + button {
margin-left: 10px;
}
`;
}
// Currently TS decorators are not reflected so we have to use static `properties` function
// https://github.com/Polymer/lit-html/issues/1476
static get properties() {
return {
user: { type: Object, reflect: true },
};
}
user?: {};
private dispatchCustomEvent(eventName: string) {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent(`sb-header:${eventName}`, options));
}
render() {
return html`
<header>
<div class="wrapper">
<div>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
fill="#FFF"
/>
<path
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
fill="#555AB9"
/>
<path
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
fill="#91BAF8"
/>
</g>
</svg>
<h1>Acme</h1>
</div>
<div>
${this.logInOutButton()}
<sb-button
size="small"
@sb-button:click="${() => this.dispatchCustomEvent('createAccount')}"
label="Sign up"
>
</sb-button>
</div>
</div>
</header>
`;
}
private logInOutButton() {
return this.user
? html`<sb-button
size="small"
@sb-button:click="${() => this.dispatchCustomEvent('logout')}"
label="Log out"
></sb-button>`
: html`<sb-button
size="small"
@sb-button:click="${() => this.dispatchCustomEvent('login')}"
label="Log in"
></sb-button>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'sb-header': SbHeader;
}
}

24
code/examples/web-components-kitchen-sink/src/components/sb-page.stories.ts
View File

@ -1,24 +0,0 @@
import type { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import * as HeaderStories from './sb-header.stories';
import './sb-page';
import type { SbPage } from './sb-page';
export default {
title: 'Example/Page',
component: 'sb-page',
} as Meta;
const Template: Story<SbPage> = ({ user }) => html`<sb-page .user="${user}"></sb-page>`;
export const LoggedIn: Story<SbPage> = Template.bind({});
LoggedIn.args = {
...HeaderStories.LoggedIn.args,
};
export const LoggedOut: Story<SbPage> = Template.bind({});
LoggedOut.args = {
...HeaderStories.LoggedOut.args,
};

160
code/examples/web-components-kitchen-sink/src/components/sb-page.ts
View File

@ -1,160 +0,0 @@
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import './sb-header';
/**
* @attr {Object} user - User of the app
*
* @summary This is a simple Storybook Page
*
* @tag sb-page
*/
@customElement('sb-page')
export class SbPage extends LitElement {
static get styles() {
return css`
section {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
padding: 48px 20px;
margin: 0 auto;
max-width: 600px;
color: #333;
}
h2 {
font-weight: 900;
font-size: 32px;
line-height: 1;
margin: 0 0 4px;
display: inline-block;
vertical-align: top;
}
p {
margin: 1em 0;
}
a {
text-decoration: none;
color: #1ea7fd;
}
ul {
padding-left: 30px;
margin: 1em 0;
}
li {
margin-bottom: 8px;
}
.tip {
display: inline-block;
border-radius: 1em;
font-size: 11px;
line-height: 12px;
font-weight: 700;
background: #e7fdd8;
color: #66bf3c;
padding: 4px 12px;
margin-right: 10px;
vertical-align: top;
}
.tip-wrapper {
font-size: 13px;
line-height: 20px;
margin-top: 40px;
margin-bottom: 40px;
}
.tip-wrapper svg {
display: inline-block;
height: 12px;
width: 12px;
margin-right: 4px;
vertical-align: top;
margin-top: 3px;
}
.tip-wrapper svg path {
fill: #1ea7fd;
}
`;
}
// Currently TS decorators are not reflected so we have to use static `properties` function
// https://github.com/Polymer/lit-html/issues/1476
static get properties() {
return {
user: { type: Object, reflect: true },
};
}
user?: {};
render() {
return html`
<article>
<sb-header .user="${this.user}"> </sb-header>
<section>
<h2>Pages in Storybook</h2>
<p>
We recommend building UIs with a
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
<strong>component-driven</strong> </a
>process starting with atomic components and ending with pages.
</p>
<p>
Render pages with mock data. This makes it easy to build and review page states without
needing to navigate to them in your app. Here are some handy patterns for managing page
data in Storybook:
</p>
<ul>
<li>
Use a higher-level connected component. Storybook helps you compose such data from the
"args" of child component stories
</li>
<li>
Assemble data in the page component from your services. You can mock these services
out using Storybook.
</li>
</ul>
<p>
Get a guided tutorial on component-driven development at
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
Storybook tutorials
</a>
. Read more in the
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
docs
</a>
.
</p>
<div className="tip-wrapper">
<span className="tip">Tip</span> Adjust the width of the canvas with the
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
id="a"
fill="#999"
/>
</g>
</svg>
Viewports addon in the toolbar
</div>
</section>
</article>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'sb-page': SbPage;
}
}

62
code/examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts
View File

@ -1,62 +0,0 @@
import { html } from 'lit';
import type { Meta, StoryFn } from '@storybook/web-components';
export default {
title: 'Addons / Actions',
} as Meta;
const Template: StoryFn = () => html`<button>Click Me!</button>`;
export const Story1 = Template.bind({});
Story1.storyName = 'Simple `click` handler';
Story1.parameters = {
actions: {
handles: ['click'],
},
};
export const Story2 = Template.bind({});
Story2.storyName = 'Multiple actions';
Story2.parameters = {
actions: {
handles: ['click', 'contextmenu'],
},
};
export const Story3 = Template.bind({});
Story3.storyName = 'Multiple actions + config';
Story3.parameters = {
actions: {
handles: ['click', 'contextmenu', { clearOnStoryChange: false }],
},
};
export const Story4 = Template.bind({});
Story4.storyName = 'Multiple actions, object';
Story4.parameters = {
actions: {
handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
},
};
export const Story5 = () => html`
<div>Clicks on this button will be logged: <button class="btn" type="button">Button</button></div>
`;
Story5.storyName = 'Multiple actions, selector';
Story5.parameters = {
actions: {
handles: [{ 'click .btn': 'clicked', contextmenu: 'right clicked' }],
},
};
export const Story6 = Template.bind({});
Story6.storyName = 'Multiple actions, object + config';
Story6.parameters = {
actions: {
handles: [{ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false }],
},
};

30
code/examples/web-components-kitchen-sink/src/stories/addons/interactions/addon-interactions.stories.ts
View File

@ -1,30 +0,0 @@
import { html } from 'lit';
import type { Meta, StoryFn } from '@storybook/web-components';
import { expect } from '@storybook/jest';
import { within, userEvent } from '@storybook/testing-library';
import './counter';
import type { Counter } from './counter';
export default {
title: 'Addons/Interactions',
component: 'sb-counter',
} as Meta;
const Template: StoryFn<Counter> = () => html`<sb-counter></sb-counter>`;
export const Default = Template.bind({});
Default.play = async ({ canvasElement }) => {
const canvas = within(canvasElement.querySelector('sb-counter').shadowRoot);
await userEvent.click(canvas.getByTestId('increment'));
await userEvent.click(canvas.getByTestId('increment'));
await userEvent.click(canvas.getByTestId('increment'));
await expect(canvas.getByTestId('count').textContent).toEqual('You clicked 3 times');
await userEvent.click(canvas.getByTestId('decrement'));
await expect(canvas.getByTestId('count').textContent).toEqual('You clicked 2 times');
};

35
code/examples/web-components-kitchen-sink/src/stories/addons/interactions/counter.ts
View File

@ -1,35 +0,0 @@
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('sb-counter')
export class Counter extends LitElement {
static get properties() {
return {
count: { type: Number },
};
}
count = 0;
decrement = () => {
this.count -= 1;
};
increment = () => {
this.count += 1;
};
render() {
const { count } = this;
return html`
<h1>Lit Element - Counter</h1>
<h2 data-testid="count">You clicked ${count} times</h2>
<button type="button" data-testid="decrement" @click=${() => this.decrement()}>
Decrement
</button>
<button type="button" data-testid="increment" @click=${() => this.increment()}>
Increment
</button>
`;
}
}

17
code/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts
View File

@ -1,17 +0,0 @@
import { html } from 'lit';
export default {
title: 'Misc. / Script Tag',
};
export const InTemplate = () => html`
<div>JS alert</div>
<script>
alert('hello');
</script>
`;
export const InString = () => '<div>JS alert</div><script>alert("hello")</script>';
export const TypeModule = () =>
'<div>JS alert from module</div><script type="module">alert("hello from module"); export const a = 1;</script>';

88
code/examples/web-components-kitchen-sink/src/stories/misc/to-update/addon-docs.stories.mdx
View File

@ -1,88 +0,0 @@
import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs';
import { html } from 'lit';
import '../../../../demo-wc-card.js';
# Storybook Docs for Web Components
<Meta title="Misc. / Addons - Docs" />
## Story definition
A story can be a simple return of `html`
<Story name="simple" height="220px">
{html` <demo-wc-card>Hello World</demo-wc-card> `}
</Story>
## API
You can show the api table of a web component at any point in your documentation.
<ArgsTable of="demo-wc-card" />
## Function stories
Or a function
<Story name="function" height="220px">
{() => {
const rows = [
{ header: 'health', value: '200' },
{ header: 'mana', value: '100' },
];
return html`
<demo-wc-card back-side .rows=${rows}> A card with data on the back </demo-wc-card>
`;
}}
</Story>
## Wrapper
You can also wrap your live demos in a nice little wrapper.
<Canvas withToolbar>
<Story name="wrapper" height="220px">
{html` <demo-wc-card>Hello World</demo-wc-card> `}
</Story>
</Canvas>
## Story reference
You can also reference an existing story from within your MDX file.
<Canvas withToolbar>
<Story id="welcome--welcome" height="500px" inline={false} />
</Canvas>
## 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.
```
<Story inline={false} />
```
<Canvas withToolbar>
<Story name="notInline" height="220px">
{html`
<style>
p { color: red; }
</style>
<p>Makes all p tags red... so best to not render inline</pd>
`}
</Story>
</Canvas>

1
code/examples/web-components-kitchen-sink/src/typings.d.ts vendored
View File

@ -1 +0,0 @@
declare module '*.mdx';

13
code/examples/web-components-kitchen-sink/tsconfig.json
View File

@ -1,13 +0,0 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"strict": true,
"moduleResolution": "node",
"strictBindCallApply": true,
"experimentalDecorators": true,
"resolveJsonModule": true
},
"include": ["src/**/*"],
"exclude": ["src/**/*.stories.ts"]
}

9
code/examples/web-components-kitchen-sink/web-components-storyshots.test.js
View File

@ -1,9 +0,0 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
initStoryshots({
framework: 'web-components',
integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
configPath: path.join(__dirname, '.storybook'),
test: multiSnapshotWithOptions(),
});

5784
code/examples/web-components-kitchen-sink/yarn.lock
View File

File diff suppressed because it is too large Load Diff

62
code/lib/core-server/src/core-presets.test.ts
View File

@ -176,35 +176,41 @@ const prepareSnap = (get: any, name): Pick<Configuration, 'module' | 'entry' | '
const snap = (name: string) => `__snapshots__/${name}`;
describe.each([['web-components-kitchen-sink']])('%s', (example) => {
describe.each([
['manager', managerExecutor],
['preview', previewExecutor],
])('%s', (component, executor) => {
beforeEach(async () => {
jest.clearAllMocks();
await cache.clear();
});
// FIXME: we no longer have test cases
// eslint-disable-next-line jest/no-disabled-tests
describe.skip('FIXME', () => {
describe.each([[]])('%s', (example) => {
describe.each([
['manager', managerExecutor],
['preview', previewExecutor],
])('%s', (component, executor) => {
beforeEach(async () => {
jest.clearAllMocks();
await cache.clear();
});
it.each([
['prod', buildStaticStandalone],
['dev', buildDevStandalone],
])('%s', async (mode, builder) => {
const options = {
...baseOptions,
configDir: path.resolve(`${__dirname}/../../../examples/${example}/.storybook`),
// Only add an outputDir in production mode.
outputDir:
mode === 'prod' ? await mkdtemp(path.join(os.tmpdir(), 'storybook-static-')) : undefined,
ignorePreview: component === 'manager',
managerCache: component === 'preview',
packageJson,
};
await builder(options);
const config = prepareSnap(executor.get, component);
expect(config).toMatchSpecificSnapshot(
snap(`${example}_${component}-${mode}-${SNAPSHOT_OS}`)
);
it.each([
['prod', buildStaticStandalone],
['dev', buildDevStandalone],
])('%s', async (mode, builder) => {
const options = {
...baseOptions,
configDir: path.resolve(`${__dirname}/../../../examples/${example}/.storybook`),
// Only add an outputDir in production mode.
outputDir:
mode === 'prod'
? await mkdtemp(path.join(os.tmpdir(), 'storybook-static-'))
: undefined,
ignorePreview: component === 'manager',
managerCache: component === 'preview',
packageJson,
};
await builder(options);
const config = prepareSnap(executor.get, component);
expect(config).toMatchSpecificSnapshot(
snap(`${example}_${component}-${mode}-${SNAPSHOT_OS}`)
);
});
});
});
});

1
code/package.json
View File

@ -46,7 +46,6 @@
"presets/*",
"examples-native/*",
"examples/*",
"!examples/web-components-kitchen-sink",
"lib/*",
"lib/cli/test/run/*"
]

1
code/renderers/web-components/template/stories/README.md
View File

@ -1 +0,0 @@
Placeholder until we write some render-specific stories

0
code/examples/web-components-kitchen-sink/custom-elements-experimental.json → code/renderers/web-components/template/stories/custom-elements-experimental.json
View File

162
code/renderers/web-components/template/stories/custom-elements.json Normal file
View File

@ -0,0 +1,162 @@
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "demo-wc-card/index.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "demo-wc-card",
"declaration": {
"name": "DemoWcCard",
"module": "demo-wc-card/DemoWcCard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "demo-wc-card/DemoWcCard.js",
"declarations": [
{
"kind": "class",
"description": "This is a container looking like a card with a back and front side you can switch",
"name": "DemoWcCard",
"cssProperties": [
{
"description": "Header font size",
"name": "--demo-wc-card-header-font-size"
},
{
"description": "Font color for front",
"name": "--demo-wc-card-front-color"
},
{
"description": "Font color for back",
"name": "--demo-wc-card-back-color"
}
],
"cssParts": [
{
"description": "Front of the card",
"name": "front"
},
{
"description": "Back of the card",
"name": "back"
}
],
"slots": [
{
"description": "This is an unnamed slot (the default slot)",
"name": ""
}
],
"members": [
{
"kind": "method",
"name": "toggle"
},
{
"kind": "field",
"name": "backSide",
"type": {
"text": "boolean"
},
"description": "Indicates that the back of the card is shown",
"default": "false",
"privacy": "public",
"attribute": "back-side",
"reflects": true
},
{
"kind": "field",
"name": "header",
"type": {
"text": "string"
},
"description": "Header message",
"default": "'Your Message'",
"privacy": "public",
"attribute": "header"
},
{
"kind": "field",
"name": "rows",
"type": {
"text": "array"
},
"description": "Data rows",
"default": "[]",
"privacy": "public",
"attribute": "rows"
}
],
"events": [
{
"name": "side-changed",
"type": {
"text": "CustomEvent"
},
"description": "Fires whenever it switches between front/back"
}
],
"attributes": [
{
"name": "back-side",
"fieldName": "backSide"
},
{
"name": "header",
"fieldName": "header"
},
{
"name": "rows",
"fieldName": "rows"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "demo-wc-card",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "DemoWcCard",
"declaration": {
"name": "DemoWcCard",
"module": "demo-wc-card/DemoWcCard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "demo-wc-card/demoWcCardStyle.css.js",
"declarations": [
{
"kind": "variable",
"name": "demoWcCardStyle",
"default": "css`\n :host {\n display: block;\n position: relative;\n width: 250px;\n height: 200px;\n border-radius: 10px;\n transform-style: preserve-3d;\n transition: all 0.8s ease;\n }\n\n .header {\n font-weight: bold;\n font-size: var(--demo-wc-card-header-font-size, 16px);\n text-align: center;\n }\n\n .content {\n padding: 20px 10px 0 10px;\n flex-grow: 1;\n }\n\n .footer {\n display: flex;\n }\n\n dl {\n margin: 0;\n text-align: left;\n }\n\n dd {\n margin-left: 15px;\n }\n\n button {\n border-radius: 15px;\n width: 30px;\n height: 30px;\n background: #fff;\n border: 1px solid #ccc;\n color: #000;\n font-size: 21px;\n line-height: 27px;\n font-weight: bold;\n cursor: pointer;\n margin: 5px;\n }\n\n .note {\n flex-grow: 1;\n color: #666;\n font-size: 16px;\n font-weight: bold;\n text-align: left;\n padding-top: 15px;\n }\n\n :host([back-side]) {\n transform: rotateY(180deg);\n }\n\n #front,\n #back {\n position: absolute;\n width: 250px;\n box-sizing: border-box;\n box-shadow: #ccc 3px 3px 2px 1px;\n padding: 10px;\n display: flex;\n flex-flow: column;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 10px;\n backface-visibility: hidden;\n overflow: hidden;\n }\n\n #front {\n background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);\n color: var(--demo-wc-card-front-color, #000);\n }\n\n #back {\n background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);\n color: var(--demo-wc-card-back-color, #fff);\n text-align: center;\n transform: rotateY(180deg) translate3d(0px, 0, 1px);\n }\n\n #back .note {\n color: #fff;\n }\n`"
}
],
"exports": [
{
"kind": "js",
"name": "demoWcCardStyle",
"declaration": {
"name": "demoWcCardStyle",
"module": "demo-wc-card/demoWcCardStyle.css.js"
}
}
]
}
]
}

9
code/examples/web-components-kitchen-sink/src/stories/issues/11831-unknown-component.stories.ts → code/renderers/web-components/template/stories/demo-wc-card.stories.js
View File

@ -1,12 +1,11 @@
import { html } from 'lit';
import type { Meta, StoryFn } from '@storybook/web-components';
import './demo-wc-card';
export default {
title: 'Issues / 11831 Unknown component',
component: 'unknown-component',
} as Meta;
component: 'demo-wc-card',
};
const Template: StoryFn = ({ backSide, header, rows }) =>
const Template = ({ backSide, header, rows }) =>
html`
<demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
>A simple card</demo-wc-card

1
code/examples/web-components-kitchen-sink/src/stories/misc/to-update/DemoWcCard.js → code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
View File

@ -1,5 +1,6 @@
import global from 'global';
import { LitElement, html } from 'lit';
// eslint-disable-next-line import/extensions
import { demoWcCardStyle } from './demoWcCardStyle.css.js';
const { CustomEvent } = global;

0
code/examples/web-components-kitchen-sink/src/stories/misc/to-update/demoWcCardStyle.css.js → code/renderers/web-components/template/stories/demo-wc-card/demoWcCardStyle.css.js
View File

5
code/renderers/web-components/template/stories/demo-wc-card/index.js Normal file
View File

@ -0,0 +1,5 @@
// eslint-disable-next-line import/extensions
import { DemoWcCard } from './DemoWcCard.js';
// eslint-disable-next-line no-undef
customElements.define('demo-wc-card', DemoWcCard);

6
code/renderers/web-components/template/stories/preview.js Normal file
View File

@ -0,0 +1,6 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { setCustomElementsManifest } from '@storybook/web-components';
import customElementsManifest from './custom-elements.json';
setCustomElementsManifest(customElementsManifest);

5
code/workspace.json
View File

@ -475,11 +475,6 @@
"root": "examples/vue-kitchen-sink",
"type": "library",
"implicitDependencies": []
},
"web-components-kitchen-sink": {
"root": "examples/web-components-kitchen-sink",
"type": "library",
"implicitDependencies": []
}
}
}