WIP: Support web components (or any components)

cypress/projects/web-components/components.js

@@ -0,0 +1,4 @@
+import './components/foo';
+import './components/bar';
+
+export {};

cypress/projects/web-components/components/bar/index.js

@@ -0,0 +1,27 @@
+import { html, css, LitElement } from 'lit';
+
+export class BarComponent extends LitElement {
+  static get styles() {
+    return css`
+      p {
+        color: red;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.name = 'Somebody';
+  }
+
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
+customElements.define('wc-bar', BarComponent);

cypress/projects/web-components/components/foo/index.js

@@ -0,0 +1,28 @@
+import { html, css, LitElement } from 'lit';
+
+export class FooComponent extends LitElement {
+  static get styles() {
+    return css`
+      p {
+        color: blue;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.name = 'Somebody';
+  }
+
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
+
+customElements.define('wc-foo', FooComponent);

cypress/projects/web-components/playroom.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  components: './components',
+  componentHints: () => {
+    return {
+      'wc-bar': {
+        attrs: {
+          name: null,
+        },
+      },
+      'wc-foo': {
+        attrs: {
+          name: null,
+        },
+      },
+    };
+  },
+  scope: './useScope',
+  snippets: './snippets',
+  outputPath: './dist',
+  openBrowser: false,
+  storageKey: 'playroom-example-wc',
+};

cypress/projects/web-components/snippets.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    group: 'Foo',
+    name: 'Default',
+    code: '<Foo>Foo</Foo>',
+  },
+  {
+    group: 'Foo',
+    name: 'Red',
+    code: '<Foo color="red">Red Foo</Foo>',
+  },
+  {
+    group: 'Bar',
+    name: 'Default',
+    code: '<Bar>Bar</Bar>',
+  },
+  {
+    group: 'Bar',
+    name: 'Blue',
+    code: '<Bar color="blue">Blue Bar</Bar>',
+  },
+];

cypress/projects/web-components/useScope.js

@@ -0,0 +1,4 @@
+export default () => ({
+  hello: () => 'HELLO',
+  world: () => 'WORLD',
+});

examples/web-components/components/Bar/Bar.ts

@@ -0,0 +1,15 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+@customElement('wc-bar')
+export class BarComponent extends LitElement {
+  static styles = css`
+    p {
+      color: blue;
+    }
+  `;
+  @property()
+  name = 'Somebody';
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}

examples/web-components/components/Foo/Foo.ts

@@ -0,0 +1,15 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+@customElement('wc-foo')
+export class FooComponent extends LitElement {
+  static styles = css`
+    p {
+      color: red;
+    }
+  `;
+  @property()
+  name = 'Somebody';
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}

examples/web-components/components/index.ts

@@ -0,0 +1,4 @@
+import './Bar/Bar';
+import './Foo/Foo';
+
+export {};

examples/web-components/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "web-components-playroom-example",
+  "private": true,
+  "version": "0.0.0",
+  "description": "Web Components example for Braid Design System",
+  "scripts": {
+    "build": "node ./../../bin/cli build",
+    "start": "node ./../../bin/cli start"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.7.5",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
+    "babel-loader": "^8.0.6",
+    "dedent": "^0.7.0",
+    "lit": "^2.0.0-rc.1"
+  }
+}

examples/web-components/playroom.config.js

@@ -0,0 +1,43 @@
+module.exports = {
+  components: './components/index.ts',
+  componentHints: () => {
+    return {
+      'wc-bar': {
+        attrs: {
+          name: null,
+        },
+      },
+      'wc-foo': {
+        attrs: {
+          name: null,
+        },
+      },
+    };
+  },
+  snippets: './snippets/index.ts',
+  outputPath: './dist',
+  webpackConfig: () => ({
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          include: __dirname,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                '@babel/preset-typescript',
+                '@babel/preset-react',
+              ],
+            },
+          },
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.js', '.ts', '.tsx'],
+    },
+  }),
+};

examples/web-components/snippets/index.ts

@@ -0,0 +1,32 @@
+import dedent from 'dedent';
+
+export default [
+  {
+    group: 'wc-foo',
+    name: 'Default',
+    code: dedent`
+      <wc-foo></wc-foo>
+    `,
+  },
+  {
+    group: 'wc-foo',
+    name: 'With Name',
+    code: dedent`
+      <wc-foo name="Mark"></wc-foo>
+    `,
+  },
+  {
+    group: 'wc-bar',
+    name: 'Default',
+    code: dedent`
+      <wc-bar></wc-bar>
+    `,
+  },
+  {
+    group: 'wc-bar',
+    name: 'With Name',
+    code: dedent`
+      <wc-bar name="Seek"></wc-bar>
+    `,
+  },
+];

examples/web-components/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "components/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}