chore: add an initial version of the Creator site (microsoft#2998)

lerna.json

@@ -2,7 +2,8 @@
   "packages": [
     "packages/**/*",
     "sites/fast-color-explorer",
-    "sites/fast-component-explorer"
+    "sites/fast-component-explorer",
+    "sites/fast-creator"
   ],
   "version": "independent",
   "npmClient": "yarn",

package.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "private": true,
   "workspaces": {
-    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer"],
+    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer", "sites/fast-creator"],
     "nohoist": ["**/react-syntax-highlighter"]
   },
   "repository": {

sites/fast-creator/.eslintignore

@@ -0,0 +1,8 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint www
+www

sites/fast-creator/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "@typescript-eslint/no-unused-vars": "off",
+        "react/display-name": "off",
+    },
+};

sites/fast-creator/.npmrc

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

sites/fast-creator/.prettierignore

@@ -0,0 +1,3 @@
+coverage/*
+dist/*
+www/*

sites/fast-creator/README.md

@@ -0,0 +1,15 @@
+# Introduction 
+Application for UI testing and development.
+
+## Getting Started
+Follow setup instructions in (https://github.com/Microsoft/fast-dna/blob/master/CONTRIBUTING.md)(https://github.com/Microsoft/fast-dna/blob/master/CONTRIBUTING.md)
+
+- Running the app locally: `yarn start`
+- Build production app: `yarn build`
+
+## Testing
+- Run all tests: `yarn test`
+- eslint all files: `yarn eslint`
+
+## Troubleshooting
+- The application uses service-workers, which means views might not update as expected during the development process. To ensure files are updated when changed, you can configure your developer tools to update the assets on reload: (https://stackoverflow.com/questions/40783790/disable-service-workers-when-in-development-mode).

sites/fast-creator/app/app.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter, Route } from "react-router-dom";
+import { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
+import Creator from "./creator";
+import { creatorDesignSystem } from "./creator.design-system";
+import Preview from "./preview";
+
+/**
+ * Create the root node
+ */
+export default class App extends React.Component<{}, {}> {
+    public render(): React.ReactNode {
+        return (
+            <BrowserRouter>
+                <div>
+                    <DesignSystemProvider designSystem={creatorDesignSystem}>
+                        <Route component={Creator} exact={true} path="/" />
+                    </DesignSystemProvider>
+                    <Route component={Preview} exact={true} path="/preview" />
+                </div>
+            </BrowserRouter>
+        );
+    }
+}

sites/fast-creator/app/components/accent-color-picker/accent-color-picker.props.ts

@@ -0,0 +1,5 @@
+export interface AccentColorPickerProps {
+    id: string;
+    accentBaseColor: string;
+    onAccentColorPickerChange: any;
+}

sites/fast-creator/app/components/accent-color-picker/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Label } from "@microsoft/fast-components-react-msft";
+import { selectorStyle } from "../style";
+import { AccentColorPickerProps } from "./accent-color-picker.props";
+
+export const AccentColorPicker: React.FC<AccentColorPickerProps> = ({
+    accentBaseColor,
+    onAccentColorPickerChange,
+    id,
+}: React.PropsWithChildren<AccentColorPickerProps>): React.ReactElement => {
+    return (
+        <div style={{ display: "flex", alignItems: "center" }}>
+            <Label htmlFor={id} style={selectorStyle}>
+                Accent color
+            </Label>
+            <input
+                type={"color"}
+                id={id}
+                value={accentBaseColor}
+                onChange={onAccentColorPickerChange}
+                style={{
+                    padding: "0",
+                    background: "#454545",
+                    width: "22px",
+                    height: "22px",
+                    border: "none",
+                }}
+            />
+        </div>
+    );
+};
+
+export * from "./accent-color-picker.props";

sites/fast-creator/app/components/dimension/dimension.props.ts

@@ -0,0 +1,8 @@
+export interface DimensionProps {
+    width: number;
+    height: number;
+    onDimensionChange: any;
+    onUpdateWidth: any;
+    onUpdateHeight: any;
+    onUpdateOrientation: any;
+}

sites/fast-creator/app/components/dimension/index.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { ActionTrigger, NumberField } from "@microsoft/fast-components-react-msft";
+import { rotateGlyph } from "../../icons/rotate";
+import { DimensionProps } from "./dimension.props";
+
+export const Dimension: React.FC<DimensionProps> = ({
+    width,
+    height,
+    onDimensionChange,
+    onUpdateWidth,
+    onUpdateHeight,
+    onUpdateOrientation,
+}: React.PropsWithChildren<DimensionProps>): React.ReactElement => {
+    return (
+        <div style={{ display: "flex", alignItems: "center", marginLeft: 4 }}>
+            <NumberField
+                value={width}
+                onChange={onDimensionChange(onUpdateWidth)}
+                style={{
+                    width: "64px",
+                }}
+            />
+            <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden={true}
+                style={{ marginRight: 4, marginLeft: 4 }}
+            >
+                <path
+                    d="M3.5 3.49997L10.5 10.5"
+                    stroke="#F2F2F2"
+                    strokeWidth="2"
+                    strokeMiterlimit="10"
+                />
+                <path
+                    d="M3.5 10.5L10.5 3.49997"
+                    stroke="#F2F2F2"
+                    strokeWidth="2"
+                    strokeMiterlimit="10"
+                />
+            </svg>
+            <NumberField
+                value={height}
+                onChange={onDimensionChange(onUpdateHeight)}
+                style={{
+                    width: "64px",
+                    marginRight: 4,
+                }}
+            />
+            <ActionTrigger
+                glyph={rotateGlyph}
+                aria-label={"Rotate axis"}
+                onClick={onUpdateOrientation}
+            />
+        </div>
+    );
+};
+
+export * from "./dimension.props";

sites/fast-creator/app/components/direction-switch/direction-switch.props.ts

@@ -0,0 +1,7 @@
+import { Direction } from "@microsoft/fast-jss-utilities";
+
+export interface DirectionSwitchProps {
+    id: string;
+    direction: Direction;
+    onUpdateDirection: any;
+}

sites/fast-creator/app/components/direction-switch/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Label, Toggle } from "@microsoft/fast-components-react-msft";
+import { Direction } from "@microsoft/fast-web-utilities";
+import { selectorStyle } from "../style";
+import { DirectionSwitchProps } from "./direction-switch.props";
+
+export const DirectionSwitch: React.FC<DirectionSwitchProps> = ({
+    id,
+    direction,
+    onUpdateDirection,
+}: React.PropsWithChildren<DirectionSwitchProps>): React.ReactElement => {
+    return (
+        <div style={{ display: "flex", alignItems: "center" }}>
+            <Label htmlFor={id} style={selectorStyle}>
+                RTL
+            </Label>
+            <Toggle
+                inputId={id}
+                onClick={onUpdateDirection}
+                selected={direction === Direction.rtl}
+                selectedMessage={""}
+                unselectedMessage={""}
+                statusMessageId={"direction"}
+            />
+        </div>
+    );
+};
+
+export * from "./direction-switch.props";

sites/fast-creator/app/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./accent-color-picker";
+export * from "./dimension";
+export * from "./direction-switch";
+export * from "./project-file-transfer";
+export * from "./theme-selector";

sites/fast-creator/app/components/project-file-transfer/index.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import ActionTrigger from "@microsoft/fast-components-react-msft/dist/action-trigger/action-trigger";
+import { downChevron, upChevron } from "../../icons/chevrons";
+import { ProjectFileTransferProps } from "./project-file-transfer.props";
+
+export const ProjectFileTransfer: React.FC<ProjectFileTransferProps> = ({
+    projectFile,
+    onUpdateProjectFile,
+}: React.PropsWithChildren<ProjectFileTransferProps>): React.ReactElement => {
+    const downloadElementId: string = "hiddenProjectFileDownloadElement";
+    const uploadElementId: string = "hiddenProjectFileUploadElement";
+
+    function handleDownloadOnClick(e: React.MouseEvent<HTMLButtonElement>): void {
+        e.preventDefault();
+        (document.getElementById(downloadElementId) as HTMLAnchorElement).click();
+    }
+
+    function handleUploadOnChange(e: React.ChangeEvent<HTMLInputElement>): void {
+        const reader: FileReader = new FileReader();
+
+        reader.onload = (event: any): void => {
+            if (event.target && event.target.result && reader.result) {
+                onUpdateProjectFile(JSON.parse((reader as any).result));
+            }
+        };
+
+        if (e.target.files) {
+            reader.readAsText(e.target.files[0]);
+        }
+    }
+
+    return (
+        <div style={{ position: "absolute", bottom: "0", padding: "10px" }}>
+            <div style={{ position: "relative", display: "inline-block" }}>
+                <input
+                    id={uploadElementId}
+                    type={"file"}
+                    accept={"text/json"}
+                    style={{
+                        opacity: "0",
+                        width: "32px",
+                        height: "24px",
+                        position: "absolute",
+                        left: "0",
+                        border: "none",
+                        padding: "0",
+                        zIndex: 1,
+                        cursor: "pointer",
+                    }}
+                    onChange={handleUploadOnChange}
+                />
+                <ActionTrigger
+                    glyph={upChevron}
+                    title={"upload a project file"}
+                    tabIndex={-1}
+                />
+            </div>
+            <div
+                style={{
+                    position: "relative",
+                    display: "inline-block",
+                    marginLeft: "4px",
+                }}
+            >
+                <ActionTrigger
+                    glyph={downChevron}
+                    title={"download a project file"}
+                    onClick={handleDownloadOnClick}
+                />
+                <a
+                    id={downloadElementId}
+                    style={{ display: "none" }}
+                    href={
+                        "data:text/json;charset=utf-8," +
+                        encodeURIComponent(JSON.stringify(projectFile))
+                    }
+                    download={`project-file-${Date.now()}.json`}
+                />
+            </div>
+        </div>
+    );
+};
+
+export * from "./project-file-transfer.props";

sites/fast-creator/app/components/project-file-transfer/project-file-transfer.props.ts

@@ -0,0 +1,10 @@
+import { ProjectFile } from "app/creator.props";
+
+export interface ProjectFileTransferProps {
+    /**
+     * The current project file in use
+     */
+    projectFile: ProjectFile;
+
+    onUpdateProjectFile: (projectFile: ProjectFile) => void;
+}

sites/fast-creator/app/components/style.ts

@@ -0,0 +1 @@
+export const selectorStyle = { margin: "0 4px 0 8px" };

sites/fast-creator/app/components/theme-selector/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Label, Toggle } from "@microsoft/fast-components-react-msft";
+import { StandardLuminance } from "@microsoft/fast-components-styles-msft";
+import { selectorStyle } from "../style";
+import { ThemeSelectorProps } from "./theme-selector.props";
+
+export const ThemeSelector: React.FC<ThemeSelectorProps> = ({
+    id,
+    theme,
+    onUpdateTheme,
+}: React.PropsWithChildren<ThemeSelectorProps>): React.ReactElement => {
+    return (
+        <div style={{ display: "flex", alignItems: "center" }}>
+            <Label htmlFor={id} style={selectorStyle}>
+                Dark mode
+            </Label>
+            <Toggle
+                inputId={id}
+                onClick={onUpdateTheme}
+                selectedMessage={""}
+                unselectedMessage={""}
+                statusMessageId={"theme"}
+                selected={theme === StandardLuminance.DarkMode}
+            />
+        </div>
+    );
+};
+
+export * from "./theme-selector.props";

sites/fast-creator/app/components/theme-selector/theme-selector.props.ts

@@ -0,0 +1,7 @@
+import { StandardLuminance } from "@microsoft/fast-components-styles-msft";
+
+export interface ThemeSelectorProps {
+    id: string;
+    theme: StandardLuminance;
+    onUpdateTheme: any;
+}