[Try] Add support for LitElement

app/lit-element/.npmignore

@@ -0,0 +1,3 @@
+docs
+src
+.babelrc

app/lit-element/README.md

@@ -0,0 +1,31 @@
+# Storybook for Polymer
+
+Storybook for polymer is a UI development environment for your Polymer components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+> Storybook for Polymer is at the **EXPERIMENTAL** stage!
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-polymer-app
+npx -p @storybook/cli sb init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
+
+## Polymer Notes
+
+- This is super super experimental, if you want to use this, expect some bugs, and missing features.
+- We're looking for help to support this. If you're a member of the Polymer community and like this project, please help us!
+  If you need any onboarding from us, we're happy to help you in any way!

app/lit-element/bin/build.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/server/build');

app/lit-element/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/lit-element/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@storybook/lit-element",
+  "version": "5.2.0-beta.26",
+  "description": "Storybook for LitElement: Develop LitElement components in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/lit-element",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "app/lit-element"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.2.0-beta.26",
+    "@storybook/core": "5.2.0-beta.26",
+    "common-tags": "^1.8.0",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "html-loader": "^0.5.5",
+    "regenerator-runtime": "^0.12.1",
+    "webpack": "^4.33.0"
+  },
+  "devDependencies": {
+    "lit-element": "^2.2.1"
+  },
+  "peerDependencies": {
+    "babel-loader": "^7.0.0 || ^8.0.0",
+    "lit-element": "^2.2.1"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

app/lit-element/src/client/index.ts

@@ -0,0 +1,14 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  raw,
+} from './preview';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}

app/lit-element/src/client/preview/globals.ts

@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'lit-element';

app/lit-element/src/client/preview/index.ts

@@ -0,0 +1,24 @@
+/* eslint-disable prefer-destructuring */
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+import { ClientApi } from './types';
+
+const framework = 'lit-element';
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
+export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
+export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
+export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
+export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;

app/lit-element/src/client/preview/render.ts

@@ -0,0 +1,50 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+import { TemplateResult, LitElement } from 'lit-element';
+import { RenderMainArgs } from './types';
+
+const rootElement = document.getElementById('root');
+
+export default function renderMain({
+  storyFn,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  forceRender,
+}: RenderMainArgs) {
+  const element = storyFn();
+
+  if (!element) {
+    showError({
+      title: `Expecting a LitElement component from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the Polymer component from the story?
+        Use "() => '<your-component-name></your-component-name\>'" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  showMain();
+  if (typeof element === 'string') {
+    rootElement.innerHTML = element;
+  } else if (element instanceof TemplateResult) {
+    // `render` stores the TemplateInstance in the Node and tries to update based on that.
+    // Since we reuse `rootElement` for all stories, remove the stored instance first.
+    // But forceRender means that it's the same story, so we want too keep the state in that case.
+    if (!forceRender || !rootElement.querySelector('[id="root-inner"]')) {
+      rootElement.innerHTML = '<div id="root-inner"></div>';
+    }
+    const renderTo = rootElement.querySelector('[id="root-inner"]');
+
+    // Use lit-html's render function that is being used at lit-element
+    // internally to cover the case using only html`...` instead of
+    // lit-element which makes using lit-html and lit-element at the same
+    // time.
+    LitElement.render(element, renderTo, { scopeName: '' });
+  } else {
+    rootElement.innerHTML = '';
+    rootElement.appendChild(element);
+  }
+}

app/lit-element/src/client/preview/types.ts

@@ -0,0 +1,38 @@
+import { StoryFn, ClientStoryApi, Loadable } from '@storybook/addons';
+import { TemplateResult } from 'lit-element';
+
+export type StoryFnLitElementReturnType = TemplateResult | string | Node;
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => StoryFn<StoryFnLitElementReturnType>;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ClientApi extends ClientStoryApi<StoryFnLitElementReturnType> {
+  setAddon(addon: any): void;
+  configure(loader: Loadable, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any;
+  load: (...args: any[]) => void;
+}

app/lit-element/src/server/build.ts

@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);

app/lit-element/src/server/framework-preset-lit-element.ts

@@ -0,0 +1,21 @@
+import { Configuration } from 'webpack';
+
+export function webpack(config: Configuration) {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.html$/,
+          use: [
+            {
+              loader: require.resolve('html-loader'),
+            },
+          ],
+        },
+      ],
+    },
+  };
+}

app/lit-element/src/server/index.ts

@@ -0,0 +1,4 @@
+import { buildDev } from '@storybook/core/server';
+import options from './options';
+
+buildDev(options);

app/lit-element/src/server/options.ts

@@ -0,0 +1,6 @@
+const packageJson = require('../../package.json');
+
+export default {
+  packageJson,
+  frameworkPresets: [require.resolve('./framework-preset-lit-element.js')],
+};

app/lit-element/src/typings.d.ts

@@ -0,0 +1,2 @@
+declare module '@storybook/core/*';
+declare module 'global';

app/lit-element/standalone.js

@@ -0,0 +1,8 @@
+const build = require('@storybook/core/standalone');
+const frameworkOptions = require('./dist/server/options').default;
+
+async function buildStandalone(options) {
+  return build(options, frameworkOptions);
+}
+
+module.exports = buildStandalone;

app/lit-element/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"],
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.test.*"
+  ]
+}

examples/lit-element-kitchen-sink/.storybook/addons.js

@@ -0,0 +1,10 @@
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-events/register';
+import '@storybook/addon-jest/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-viewport/register';

examples/lit-element-kitchen-sink/.storybook/config.js

@@ -0,0 +1,22 @@
+import { configure, addParameters, addDecorator } from '@storybook/lit-element';
+import { withA11y } from '@storybook/addon-a11y';
+
+addDecorator(withA11y);
+
+addParameters({
+  a11y: {
+    config: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
+  options: {
+    hierarchyRootSeparator: /\|/,
+    docs: {
+      iframeHeight: '200px',
+    },
+  },
+});
+
+configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module);

examples/lit-element-kitchen-sink/.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/html/preset'];

examples/lit-element-kitchen-sink/.storybook/webpack.config.js

@@ -0,0 +1,4 @@
+module.exports = async ({ config }) => {
+  config.module.rules[0].include.push(/node_modules(?:\/|\\)lit-element|lit-html/);
+  return config;
+};

examples/lit-element-kitchen-sink/jest.config.js

@@ -0,0 +1,11 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  transform: {
+    ...config.transform,
+    '.*\\.(html)$': '<rootDir>/node_modules/jest-raw-loader',
+  },
+  moduleFileExtensions: [...config.moduleFileExtensions, 'html'],
+};

examples/lit-element-kitchen-sink/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "lit-element-kitchen-sink",
+  "version": "5.2.0-beta.26",
+  "private": true,
+  "description": "",
+  "keywords": [],
+  "license": "MIT",
+  "author": "",
+  "main": "index.js",
+  "scripts": {
+    "build-storybook": "build-storybook",
+    "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
+    "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
+    "storybook": "start-storybook -p 9006"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "5.2.0-beta.26",
+    "@storybook/addon-actions": "5.2.0-beta.26",
+    "@storybook/addon-backgrounds": "5.2.0-beta.26",
+    "@storybook/addon-centered": "5.2.0-beta.26",
+    "@storybook/addon-docs": "5.2.0-beta.26",
+    "@storybook/addon-events": "5.2.0-beta.26",
+    "@storybook/addon-jest": "5.2.0-beta.26",
+    "@storybook/addon-knobs": "5.2.0-beta.26",
+    "@storybook/addon-links": "5.2.0-beta.26",
+    "@storybook/addon-notes": "5.2.0-beta.26",
+    "@storybook/addon-options": "5.2.0-beta.26",
+    "@storybook/addon-storyshots": "5.2.0-beta.26",
+    "@storybook/addon-storysource": "5.2.0-beta.26",
+    "@storybook/addon-viewport": "5.2.0-beta.26",
+    "@storybook/addons": "5.2.0-beta.26",
+    "@storybook/client-api": "5.2.0-beta.26",
+    "@storybook/core": "5.2.0-beta.26",
+    "@storybook/core-events": "5.2.0-beta.26",
+    "@storybook/html": "5.2.0-beta.26",
+    "@storybook/source-loader": "5.2.0-beta.26",
+    "@storybook/lit-element": "5.2.0-beta.26",
+    "eventemitter3": "^4.0.0",
+    "format-json": "^1.0.3",
+    "global": "^4.3.2"
+  },
+  "dependencies": {
+    "lit-element": "^2.1.1"
+  }
+}