Add example for Lit TS (#350)

# This PR has bugs

This PR adds an example for Lit TS to the examples directory. It is not extensive and doubles as a working example of #345 .

## To Reproduce Bug

- Run `yarn storybook` and see that the Simple Greeting component has blue text.
- Run `yarn build-storybook` and `yarn preview-storybook` to see that the component text did not accept the SASS styles from step 1.

examples/lit-ts/.storybook/main.ts

@@ -0,0 +1,18 @@
+const { mergeConfig } = require('vite');
+const postcssLit = require('rollup-plugin-postcss-lit');
+
+module.exports = {
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  framework: '@storybook/web-components',
+  features: { buildStoriesJson: true },
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      // prettier-ignore
+      plugins: [postcssLit({ include: ['**/*.scss', '**/*.scss\?*'] })],
+    });
+  },
+};

examples/lit-ts/.storybook/preview.ts

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

examples/lit-ts/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "example-lit-ts",
+  "private": true,
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "lit": "^2.2.2"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6005",
+    "build-storybook": "build-storybook",
+    "preview-storybook": "http-server storybook-static --port 6005 --silent",
+    "test": "wait-on tcp:6005 && test-storybook --stories-json --url 'http://localhost:6005'",
+    "test-ci": "npm-run-all -p --race test preview-storybook"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.5.0-alpha.58",
+    "@storybook/addon-docs": "^6.5.0-alpha.58",
+    "@storybook/addon-essentials": "^6.5.0-alpha.58",
+    "@storybook/addon-links": "^6.5.0-alpha.58",
+    "@storybook/builder-vite": "workspace:*",
+    "@storybook/test-runner": "^0.0.4",
+    "@storybook/web-components": "^6.5.0-alpha.58",
+    "http-server": "^14.1.0",
+    "jest": "^27.5.1",
+    "npm-run-all": "^4.1.5",
+    "rollup-plugin-postcss-lit": "^2.0.0",
+    "sass": "^1.50.1",
+    "vite": "2.9.0",
+    "wait-on": "^6.0.1"
+  }
+}

examples/lit-ts/scss.d.ts

@@ -0,0 +1,5 @@
+declare module '*.scss' {
+  import { CSSResultGroup } from 'lit';
+  const styles: CSSResultGroup;
+  export default styles;
+}

examples/lit-ts/stories/Introduction.stories.mdx

@@ -0,0 +1,198 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .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 code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in <code>src/stories/Introduction.stories.mdx</code>
+</div>

examples/lit-ts/stories/SimpleGreeting.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { html } from 'lit';
+import './SimpleGreeting.ts';
+
+<Meta
+  title="Example/Simple Greeting"
+  component="simple-greeting"
+  argTypes={{
+    name: 'World',
+  }}
+/>
+
+<Canvas withSource="open">
+  <Story
+    name="Simple Greeting"
+    component="simple-greeting"
+    args={{
+      name: 'World',
+    }}
+  >
+    {(args) => html` <simple-greeting name="${args.name}"></simple-greeting> `}
+  </Story>
+</Canvas>

examples/lit-ts/stories/SimpleGreeting.ts

@@ -0,0 +1,15 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import style from './simplegreeting.scss';
+
+@customElement('simple-greeting')
+export class SimpleGreeting extends LitElement {
+  static styles = [style];
+
+  @property()
+  name = 'Somebody';
+
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}