feat: add fast-components package (#2677)

* adding base files

* set up example component

* adding description of storybook error

* add test script

* cleanup

* fixing build script and adjusting readme

* removing unnecessary try/catch

* add tree-shaking comment

* adds code owners

* clarify language in readme

* categorize dependencies correctly

.github/CODEOWNERS

@@ -78,4 +78,7 @@ build/ @janechu @nicholasrice @chrisdholt @awentzel
 /packages/fast-figma-plugin-msft/ @nicholasrice @bheston @e-vanaubrey @Jeremy-Knudsen
 
 # fast-element
-/packages/fast-element/ @EisenbergEffect @chrisdholt @janechu @nicholasrice
+/packages/fast-element/ @EisenbergEffect @chrisdholt @janechu @nicholasrice
+
+# fast-components
+/packages/fast-components/ @EisenbergEffect @chrisdholt @janechu @nicholasrice

packages/fast-components/.npmignore

@@ -0,0 +1,7 @@
+# Tests
+__test__/
+*.spec.*
+*.test.*
+
+# Source files
+src/

packages/fast-components/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/fast-components/.prettierignore

@@ -0,0 +1,2 @@
+coverage/*
+dist/*

packages/fast-components/.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+    stories: ["../src/**/*.stories.ts"],
+    webpackFinal: async config => {
+        config.module.rules.push({
+            test: /\.(ts|tsx)$/,
+            use: [
+                {
+                    loader: require.resolve("awesome-typescript-loader"),
+                },
+            ],
+        });
+        config.resolve.extensions.push(".ts");
+
+        return config;
+    },
+};

packages/fast-components/README.md

@@ -0,0 +1,12 @@
+# FAST Components
+
+## Development
+
+To start the component development environment, run `yarn start`.
+
+### Known issue with Storybook site hot-reloading
+
+Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
+`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`
+
+This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.

packages/fast-components/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@microsoft/fast-components",
+  "description": "A library of Web Components",
+  "private": true,
+  "sideEffects": false,
+  "version": "0.0.0",
+  "author": {
+    "name": "Microsoft",
+    "url": "https://discord.gg/FcSNfg4"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Microsoft/fast-dna.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p ./tsconfig.build.json",
+    "clean:dist": "node ../../build/clean.js dist",
+    "prepare": "yarn clean:dist && yarn build",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.ts\"",
+    "prettier:diff": "prettier --config ../../.prettierrc \"**/*.ts\" --list-different",
+    "tslint": "tslint -c ./tslint.json '**/*.ts'",
+    "tslint:fix": "tslint -c ./tslint.json --fix '**/*.ts'",
+    "start": "start-storybook -p 6006",
+    "test": "yarn build-storybook && yarn tslint",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@storybook/cli": "^5.3.13",
+    "@storybook/html": "^5.3.13",
+    "awesome-typescript-loader": "^5.2.1",
+    "prettier": "1.14.3",
+    "typescript": "^3.7.5"
+  },
+  "dependencies": {
+    "@microsoft/fast-element": "^0.0.0"
+  }
+}

packages/fast-components/src/index.ts

@@ -0,0 +1 @@
+export * from "./name-tag";

packages/fast-components/src/name-tag/fixtures/mark.html

@@ -0,0 +1,2 @@
+<fast-name-tag>Mark!</fast-name-tag>
+<fast-name-tag style="--background-color: #00F">Blue Mark!</fast-name-tag>

packages/fast-components/src/name-tag/index.ts

@@ -0,0 +1,14 @@
+import { customElement } from "@microsoft/fast-element";
+import { NameTag } from "./name-tag";
+import { NameTagTemplate } from "./name-tag.template";
+import { NameTagStyles } from "./name-tag.styles";
+
+@customElement({
+    name: "fast-name-tag",
+    template: NameTagTemplate,
+    dependencies: [NameTagStyles],
+})
+export class FASTNameTag extends NameTag {}
+export * from "./name-tag.template";
+export * from "./name-tag.styles";
+export * from "./name-tag";

packages/fast-components/src/name-tag/name-tag.stories.ts

@@ -0,0 +1,11 @@
+import { FASTNameTag } from ".";
+import MarkTemplate from "./fixtures/mark.html";
+
+// Prevent tree-shaking
+FASTNameTag;
+
+export default {
+    title: "Name tag",
+};
+
+export const Mark = () => MarkTemplate;

packages/fast-components/src/name-tag/name-tag.styles.ts

@@ -0,0 +1,63 @@
+import { css } from "@microsoft/fast-element";
+
+export const NameTagStyles = css`
+    :host {
+        --depth: 4;
+        --background-color: #f00;
+        --border-radius: 4;
+
+        display: block;
+        color: white;
+        background: var(--background-color);
+        border-radius: var(--border-radius);
+        min-width: 325px;
+        max-width: 500px;
+        text-align: center;
+        box-shadow: 0 0 calc(var(--depth) * 1px) rgba(0, 0, 0, 0.5);
+    }
+
+    .header {
+        margin: 16px 0;
+        position: relative;
+    }
+
+    h3 {
+        font-weight: bold;
+        font-family: "Source Sans Pro";
+        letter-spacing: 4px;
+        font-size: 32px;
+        margin: 0;
+        padding: 0;
+    }
+
+    h4 {
+        font-family: sans-serif;
+        font-size: 18px;
+        margin: 0;
+        padding: 0;
+    }
+
+    .body {
+        background: white;
+        color: black;
+        padding: 32px 8px;
+        font-size: 42px;
+        font-family: cursive;
+    }
+
+    .footer {
+        height: 16px;
+        background: var(--background-color);
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+    }
+
+    ::slotted(img) {
+        border-radius: 50%;
+        height: 64px;
+        width: 64px;
+        box-shadow: 0 0 calc(var(--depth) / 2px) rgba(0, 0, 0, 0.5);
+        position: absolute;
+        left: 16px;
+        top: -4px;
+    }
+`;

packages/fast-components/src/name-tag/name-tag.template.ts

@@ -0,0 +1,16 @@
+import { html } from "@microsoft/fast-element";
+import { NameTag } from "./name-tag";
+
+export const NameTagTemplate = html<NameTag>`
+  <div class="header">
+    <slot name="avatar"></slot>
+    <h3>${x => x.greeting.toUpperCase()}</h3>
+    <h4>my name is</h4>
+  </div>
+
+  <div class="body">
+    <slot></slot>
+  </div>
+
+  <div class="footer"></div>
+`;

packages/fast-components/src/name-tag/name-tag.ts

@@ -0,0 +1,6 @@
+import { attr, FastElement } from "@microsoft/fast-element";
+
+export class NameTag extends FastElement {
+    @attr
+    public greeting: string = "Hello";
+}

packages/fast-components/src/storybook-typings.d.ts

@@ -0,0 +1,4 @@
+declare module "*.html" {
+    const value: string;
+    export default value;
+}

packages/fast-components/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+    "exclude": [
+        "**/*.stories.ts",
+        "./src/storybook-typings.d.ts"
+    ]
+}

packages/fast-components/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "baseUrl": ".",
+        "strictNullChecks": true,
+        "experimentalDecorators": true,
+        "skipLibCheck": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts"
+    ]
+}

packages/fast-components/tslint.json

@@ -0,0 +1,22 @@
+{
+    "extends": [
+        "@microsoft/fast-tslint-rules",
+        "tslint-config-prettier"
+    ],
+    "rules": {
+        "typedef": [
+            true,
+            "call-signature",
+            "parameter",
+            "property-declaration",
+            "member-variable-declarations"
+        ]
+    },
+    "linterOptions": {
+        "exclude": [
+            "node_modules/**",
+            "dist/**",
+            "src/**/*.stories.ts"
+        ]
+    }
+}