Merge pull request #6 from halkeye/storybook

Storybook

.babelrc

@@ -0,0 +1,30 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "development": true
+      }
+    ],
+    [
+      "@babel/preset-typescript"
+    ],
+    [
+      "@babel/env",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "decoratorsBeforeExport": true,
+        "legacy": false
+      }
+    ],
+    "@babel/proposal-class-properties",
+    "@babel/proposal-object-rest-spread"
+  ]
+}

.eslintrc.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+  "root": true,
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:wc/recommended", "plugin:lit/all", "plugin:storybook/recommended", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+  },
+  "plugins": ["@typescript-eslint"],
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "no-prototype-builtins": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", {
+      "argsIgnorePattern": "^_"
+    }]
+  },
+  "overrides": [{
+    "files": ["rollup.config.js", "web-test-runner.config.js", ".eslintrc.cjs", "*.cjs"],
+    "env": {
+      "node": true
+    }
+  }, {
+    "files": ["*_test.ts", "**/custom_typings/*.ts", "packages/labs/ssr/src/test/integration/tests/**", "packages/labs/ssr/src/lib/util/parse5-utils.ts"],
+    "rules": {
+      "@typescript-eslint/no-explicit-any": "off"
+    }
+  }]
+};

.github/workflows/docs.yml

@@ -40,12 +40,11 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build docs
-        run: npm run docs
+        run: npm run build-storybook
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          # Upload entire repository
-          path: 'docs'
+          path: 'storybook-static'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1

.gitignore

@@ -6,6 +6,7 @@ coverage/
 /test/
 build/
 dist/
+storybook-static/
 custom-elements.json
 # top level source
 jio-*.d.ts

.storybook/main.cjs

@@ -0,0 +1,45 @@
+const path = require('path');
+const postcss = require('postcss');
+
+const processor = postcss(require('../postcss.config.cjs'));
+
+module.exports = {
+  core: {
+    builder: "webpack5",
+    manager: "webpack5",
+  },
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "storybook-dark-mode",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": {
+    "name": "@storybook/web-components-webpack5",
+    "options": {}
+  },
+  webpackFinal: async (config, {}) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    const cssRule = config.module.rules.find(rule => rule.test.toString() === '/\\.css$/');
+    cssRule.use = [
+      {
+        loader: 'lit-css-loader',
+        options: {
+          transform: (rawCSS, {filePath}) => {
+            const {css} = processor.process(rawCSS, {from: filePath})
+            return css;
+          }
+        }
+      }
+    ];
+
+    // Return the altered config
+    return config;
+  },
+}

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+    <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
+    <script src="https://unpkg.com/[email protected]/polyfill-support.js"></script>
+    <script data='ionicons' src='https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.2/ionicons/ionicons.esm.js' type='module'></script>
+    <script data='ionicons' nomodule='' src='https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.2/ionicons/ionicons.js'></script>

.storybook/preview.js

@@ -0,0 +1,15 @@
+import {setCustomElementsManifest} from '@storybook/web-components';
+import customElements from '../custom-elements.json';
+setCustomElementsManifest(customElements);
+
+export const parameters = {
+  // docs: {inlineStories: false, },
+  actions: {argTypesRegex: "^on[A-Z].*"},
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /(^date$|Date$)/,
+      boolean: /^show/,
+    },
+  },
+}

README.md

@@ -1,10 +1,6 @@
-# LitElement TypeScript starter
+# Welcome to Jenkins.io Web Components
 
-This project includes a sample component using LitElement with TypeScript.
-
-This template is generated from the `lit-starter-ts` package in [the main Lit
-repo](https://github.com/lit/lit). Issues and PRs for this template should be
-filed in that repo.
+This is an attempt to build web components that can be used across various jenkins.io based projects
 
 ## Setup
 
@@ -55,16 +51,12 @@ Alternatively the `test:prod` and `test:prod:watch` commands will run your tests
 
 ## Dev Server
 
-This sample uses modern-web.dev's [@web/dev-server](https://www.npmjs.com/package/@web/dev-server) for previewing the project without additional build steps. Web Dev Server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers. See [modern-web.dev's Web Dev Server documentation](https://modern-web.dev/docs/dev-server/overview/) for more information.
-
 To run the dev server and open the project in a new browser tab:
 
 ```bash
-npm run serve
+npm run storybook
 ```
 
-There is a development HTML file located at `/dev/index.html` that you can view at http://localhost:8000/dev/index.html. Note that this command will serve your code using Lit's development mode (with more verbose errors). To serve your code against Lit's production mode, use `npm run serve:prod`.
-
 ## Editing
 
 If you use VS Code, we highly recommend the [lit-plugin extension](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin), which enables some extremely useful features for lit-html templates:
@@ -97,38 +89,3 @@ npm run lint
 
 Prettier has not been configured to run when committing files, but this can be added with Husky and and `pretty-quick`. See the [prettier.io](https://prettier.io/) site for instructions.
 
-## Static Site
-
-This project includes a simple website generated with the [eleventy](11ty.dev) static site generator and the templates and pages in `/docs-src`. The site is generated to `/docs` and intended to be checked in so that GitHub pages can serve the site [from `/docs` on the master branch](https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site).
-
-To enable the site go to the GitHub settings and change the GitHub Pages &quot;Source&quot; setting to &quot;master branch /docs folder&quot;.</p>
-
-To build the site, run:
-
-```bash
-npm run docs
-```
-
-To serve the site locally, run:
-
-```bash
-npm run docs:serve
-```
-
-To watch the site files, and re-build automatically, run:
-
-```bash
-npm run docs:watch
-```
-
-The site will usually be served at http://localhost:8000.
-
-## Bundling and minification
-
-This starter project doesn't include any build-time optimizations like bundling or minification. We recommend publishing components as unoptimized JavaScript modules, and performing build-time optimizations at the application level. This gives build tools the best chance to deduplicate code, remove dead code, and so on.
-
-For information on building application projects that include LitElement components, see [Build for production](https://lit.dev/docs/tools/production/) on the Lit site.
-
-## More information
-
-See [Get started](https://lit.dev/docs/getting-started/) on the Lit site for more information.