feat: adds fast-development-site for testing component libraries (#7)

* feat: adds fast-development-site for testing component libraries * updates the locations of interfaces for the development site * updates tslint rules in development site because they already extend react rules * updates exports to be future proof for development site and add a null check
microsoft · Mar 3, 2018 · 53ce962 · 53ce962
1 parent e70acfd
commit 53ce962
Show file tree

Hide file tree

Showing 23 changed files with 12,053 additions and 288 deletions.
diff --git a/...act-jss-manager/.github/issue_template.md → .github/issue_template.md b/...act-jss-manager/.github/issue_template.md → .github/issue_template.md
diff --git a/...-manager/.github/pull_request_template.md → .github/pull_request_template.md b/...-manager/.github/pull_request_template.md → .github/pull_request_template.md
diff --git a/.gitignore b/.gitignore
@@ -57,3 +57,5 @@ typings/
 # dotenv environment variables file
 .env
 
+# Ignore distribution directory 
+dist/
diff --git a/packages/fast-development-site/README.md b/packages/fast-development-site/README.md
@@ -0,0 +1,2 @@
+# FAST development site
+This is the development site which can be used to create a react environment for a group of react or web components.
diff --git a/packages/fast-development-site/app/app.tsx b/packages/fast-development-site/app/app.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import Site, { ISiteProps, ICategoryProps } from "../src";
+
+import Button from "./components/button";
+import Paragraph from "./components/paragraph";
+import PolymerHeading from "./components/polymer-heading";
+
+const items: ICategoryProps[] = [
+    {
+        name: "components",
+        items: [
+            {
+                name: "button",
+                component: Button,
+                data: [
+                    {
+                        children: "foo"
+                    },
+                    {
+                        children: "bar"
+                    },
+                    {
+                        children: "bat"
+                    }
+                ]
+            },
+            {
+                name: "paragraph",
+                component: Paragraph,
+                data: [{}, {}, {}, {}]
+            },
+            {
+                name: "polymer-heading",
+                component: PolymerHeading,
+                type: "polymer",
+                data: [
+                    {
+                        class: "foo",
+                        children: "Heading 1"
+                    },
+                    {
+                        class: "bar",
+                        children: "Heading 2"
+                    },
+                    {
+                        class: "bat",
+                        children: "Heading 3"
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+const render: any = (): void => {
+    ReactDOM.render(
+        <Site categories={items} />,
+        document.getElementById("root")
+    );
+};
+
+render();
diff --git a/packages/fast-development-site/app/components/button.tsx b/packages/fast-development-site/app/components/button.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+class Button extends React.Component<{}, {}> {
+
+    public render(): JSX.Element {
+        return (
+            <button>
+                {this.props.children}
+            </button>
+        );
+    }
+}
+
+export default Button;
diff --git a/packages/fast-development-site/app/components/paragraph.tsx b/packages/fast-development-site/app/components/paragraph.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+class Paragraph extends React.Component<{}, {}> {
+
+    public render(): JSX.Element {
+        return (
+            <p>
+                paragraph
+            </p>
+        );
+    }
+}
+
+export default Paragraph;
diff --git a/packages/fast-development-site/app/components/polymer-heading.ts b/packages/fast-development-site/app/components/polymer-heading.ts
@@ -0,0 +1,31 @@
+import {
+    Element as PolymerElement
+} from "../../node_modules/@polymer/polymer/polymer-element.js";
+
+export default class PolymerHeading extends PolymerElement {
+    private class: string;
+
+    constructor() {
+        super();
+
+        this.class = "";
+    }
+
+    static get is(): string {
+        return "polymer-heading";
+    }
+
+    static get template(): string {
+        const style: string = `<style></style>`;
+        const element: string = `<h2 class="[[class]]"><slot></slot></h2>`;
+        return style + element;
+    }
+
+    static get properties(): any {
+        return {
+            class: String
+        };
+    }
+}
+
+customElements.define(PolymerHeading.is, PolymerHeading);
diff --git a/packages/fast-development-site/app/index.html b/packages/fast-development-site/app/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>FAST development app</title>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,3 +57,5 @@ typings/ @@
     # dotenv environment variables file
     .env
+    # Ignore distribution directory
+    dist/
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# FAST development site
		This is the development site which can be used to create a react environment for a group of react or web components.