feat: add color picker to MSFT dev site (#758)

* reordering slot position

* wiring color picker

* adding documentation

* styling color pickers

* cleaning up JSX

* removing unused variable

* fixing linting errors

* renaming Themes to Theme

* preventing custom theme when only changing accent color

* trying to reduce code complexity

* fixing tslint errors

* fixing spelling mistake

Author: nicholasrice

packages/fast-components-react-msft/app/app.tsx

@@ -1,26 +1,28 @@
-import * as React from "react";
-import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";
-import manageJss, { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
-import { DesignSystemDefaults, IDesignSystem } from "@microsoft/fast-components-styles-msft";
-import { IHypertextClassNameContract, IManagedClasses } from "@microsoft/fast-components-class-name-contracts-base";
 import Site, {
     componentFactory,
     formChildFromExamplesFactory,
     IFormChildOption,
     ISiteProps,
     ITheme,
+    ShellSlot,
     SiteCategory,
     SiteCategoryIcon,
     SiteCategoryItem,
     SiteMenu,
     SiteMenuItem,
     SiteTitle,
-    SiteTitleBrand,
+    SiteTitleBrand
 } from "@microsoft/fast-development-site-react";
+import * as React from "react";
+import manageJss, { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
+import { DesignSystemDefaults, IDesignSystem } from "@microsoft/fast-components-styles-msft";
+import { IHypertextClassNameContract, IManagedClasses } from "@microsoft/fast-components-class-name-contracts-base";
+import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";
 import { ComponentStyles, ICSSRules } from "@microsoft/fast-jss-manager";
 import { Direction } from "@microsoft/fast-application-utilities";
 import * as examples from "./examples";
 import Hypertext from "../src/hypertext";
+import ColorPicker, { IColorConfig } from "./color-picker";
 
 /* tslint:disable-next-line */
 const sketchDesignKit = require("./fast-dna-msft-design-kit.sketch");
@@ -36,23 +38,33 @@ const hypertextStyles: ComponentStyles<IHypertextClassNameContract, undefined> =
     }
 };
 
-export interface IAppState {
-    direction: Direction;
-    theme: string;
+enum Theme {
+    dark = "dark",
+    light = "light",
+    custom = "custom"
 }
 
-const themes: ITheme[] = [
-    {id: "light", displayName: "light", background: DesignSystemDefaults.backgroundColor},
-    {id: "dark", displayName: "dark", background: DesignSystemDefaults.foregroundColor}
-];
+export interface IAppState extends IColorConfig {
+    theme: Theme;
+    direction: Direction;
+}
 
 export default class App extends React.Component<{}, IAppState> {
+    private themes: ITheme[] = [
+        {id: Theme.light, displayName: Theme.light, background: DesignSystemDefaults.backgroundColor},
+        {id: Theme.dark, displayName: Theme.dark, background: DesignSystemDefaults.foregroundColor},
+        {id: Theme.custom, displayName: Theme.custom}
+    ];
+
     constructor(props: {}) {
         super(props);
 
         this.state = {
             direction: Direction.ltr,
-            theme: "light"
+            foregroundColor: DesignSystemDefaults.foregroundColor,
+            backgroundColor: DesignSystemDefaults.backgroundColor,
+            accentColor: DesignSystemDefaults.brandColor,
+            theme: Theme.light
         };
     }
 
@@ -62,7 +74,8 @@ export default class App extends React.Component<{}, IAppState> {
                 formChildOptions={formChildOptions}
                 onUpdateDirection={this.handleUpdateDirection}
                 onUpdateTheme={this.handleUpdateTheme}
-                themes={themes}
+                themes={this.themes}
+                activeTheme={this.getThemeById(this.state.theme)}
             >
                 <SiteMenu slot={"header"}>
                     <SiteMenuItem>
@@ -85,15 +98,30 @@ export default class App extends React.Component<{}, IAppState> {
                 <SiteCategory slot={"category"} name={"Components"}>
                     {componentFactory(examples, {...this.generateDesignSystem()})}
                 </SiteCategory>
+                <div slot={ShellSlot.infoBar}>
+                    <ColorPicker
+                        foregroundColor={this.state.foregroundColor}
+                        backgroundColor={this.state.backgroundColor}
+                        accentColor={this.state.accentColor}
+                        onColorUpdate={this.handleColorUpdate}
+                    />
+                </div>
             </Site>
         );
     }
 
+    private getThemeById(id: Theme): ITheme {
+        return this.themes.find((theme: ITheme): boolean => {
+            return theme.id === id;
+        });
+    }
+
     private generateDesignSystem(): IDesignSystem {
         const designSystem: Partial<IDesignSystem> = {
             direction: this.state.direction,
-            foregroundColor: this.state.theme === "dark" ? DesignSystemDefaults.backgroundColor : DesignSystemDefaults.foregroundColor,
-            backgroundColor: this.state.theme === "dark" ? DesignSystemDefaults.foregroundColor : DesignSystemDefaults.backgroundColor
+            foregroundColor: this.state.foregroundColor,
+            backgroundColor: this.state.backgroundColor,
+            brandColor: this.state.accentColor
         };
 
         return Object.assign({}, DesignSystemDefaults, designSystem);
@@ -109,9 +137,40 @@ export default class App extends React.Component<{}, IAppState> {
         });
     }
 
-    private handleUpdateTheme = (theme: string): void => {
-        this.setState({
-            theme
+    private handleUpdateTheme = (theme: Theme): void => {
+        if (theme !== Theme.custom) {
+            this.setState({
+                theme,
+                foregroundColor: theme === Theme.dark ? DesignSystemDefaults.backgroundColor : DesignSystemDefaults.foregroundColor,
+                backgroundColor: theme === Theme.dark ? DesignSystemDefaults.foregroundColor : DesignSystemDefaults.backgroundColor
+            });
+        } else {
+            this.setCustomThemeBackground(this.state.backgroundColor);
+            this.setState({
+                theme
+            });
+        }
+    }
+
+    /**
+     * Handles any changes made by the user to the color picker inputs
+     */
+    private handleColorUpdate = (config: IColorConfig): void => {
+        this.setCustomThemeBackground(config.backgroundColor);
+        this.setState(
+            config.backgroundColor !== this.state.backgroundColor || config.foregroundColor !== this.state.foregroundColor
+            ? { theme: Theme.custom, ...config }
+            : config
+        );
+    }
+
+    /**
+     * Assign a background color to the custom theme so that it can be applied to the background of the examples view
+     * @param value The color to assign
+     */
+    private setCustomThemeBackground(value: string): void {
+        this.themes = this.themes.map((theme: ITheme): ITheme => {
+            return theme.id !== Theme.custom ? theme : Object.assign({}, theme, { background: value});
         });
     }
 }

packages/fast-components-react-msft/app/color-picker.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import { IDesignSystem } from "@microsoft/fast-components-styles-msft";
+
+export interface IColorConfig {
+    foregroundColor: string;
+    backgroundColor: string;
+    accentColor: string;
+}
+
+export interface IColorPickerProps extends IColorConfig {
+    onColorUpdate: (colors: IColorConfig) => void;
+}
+
+export interface IColorPickerManagedClasses {
+    colorPicker: string;
+    colorPicker_label: string;
+}
+
+const styles: ComponentStyles<IColorPickerManagedClasses, IDesignSystem> = {
+    colorPicker: {
+        display: "flex",
+        height: "100%",
+        alignItems: "center"
+    },
+    colorPicker_label: {
+        margin: "0 12px"
+    }
+};
+
+class ColorPicker extends React.Component<IColorPickerProps & IManagedClasses<IColorPickerManagedClasses>, undefined> {
+    /**
+     * Ref object for foreground color input
+     */
+    private foregroundRef: React.RefObject<HTMLInputElement>;
+
+    /**
+     * Ref object for background color input
+     */
+    private backgroundRef: React.RefObject<HTMLInputElement>;
+
+    /**
+     * Ref object for accent color input
+     */
+    private accentRef: React.RefObject<HTMLInputElement>;
+
+    constructor(props: IColorPickerProps) {
+        super(props);
+
+        this.foregroundRef = React.createRef();
+        this.backgroundRef = React.createRef();
+        this.accentRef = React.createRef();
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className={this.props.managedClasses.colorPicker}>
+                {this.createColorInput("foreground", this.props.foregroundColor, "foregroundInput", this.foregroundRef)}
+                {this.createColorInput("background", this.props.backgroundColor, "backgroundInput", this.backgroundRef)}
+                {this.createColorInput("accent", this.props.accentColor, "accentInput", this.accentRef)}
+            </div>
+        );
+    }
+
+    /**
+     * Creates individual label/input elements
+     */
+    private createColorInput(name: string, value: string, id: string, ref: React.RefObject<HTMLInputElement>): JSX.Element {
+        return (
+            <React.Fragment>
+                <label
+                    for={id}
+                    className={this.props.managedClasses.colorPicker_label}
+                >
+                    {name}
+                </label>
+                <input
+                    type="color"
+                    value={this.formatColor(value)}
+                    id={id}
+                    name={name}
+                    onChange={this.handleColorPickerChange}
+                    ref={ref}
+                />
+            </React.Fragment>
+        );
+    }
+
+    /**
+     * Event handler for all color input changes
+     */
+    private handleColorPickerChange = (e: React.FormEvent<HTMLInputElement>): void => {
+        const value: string = e.currentTarget.value;
+        const updatedColorKey: keyof IColorConfig = e.currentTarget === this.foregroundRef.current
+            ? "foregroundColor"
+            : e.currentTarget === this.backgroundRef.current
+            ? "backgroundColor"
+            : "accentColor";
+
+        if (typeof this.props.onColorUpdate === "function") {
+            this.props.onColorUpdate(Object.assign({}, this.props, { [updatedColorKey]: value}));
+        }
+    }
+
+    /**
+     * Ensures that colors are properly formatted
+     * Color input elements don't understand three digit hex values, so we need to convert them to 6
+     */
+    private formatColor(color: string): string {
+        const threeDigitHex: RegExp = /\#([a-fA-F0-9]{3})$/g;
+        const match: string[] | null = threeDigitHex.exec(color);
+
+        return Array.isArray(match)
+            ? `#${match[1].split("").map((character: string) => character + character).join("")}`
+            : color;
+    }
+}
+
+export default manageJss(styles)(ColorPicker);