@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/sdd/Publish.js

@@ -0,0 +1,112 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState, useEffect } from "react";
+import { PublishProgress } from "./PublishProgress";
+import { ExportDeployInfo } from "./ExportDeployInfo";
+import { Button } from "../common/Button";
+import { useDispatch, useSelector } from "../../store";
+import { SmartDesktopDesignerActions } from "../../actions/smartDesktopDesignerActions";
+import { ProgressState } from "../../types/smartDesktopDesignerTypes";
+import { FinsembleIcon } from "../common/FinsembleIcon";
+export const Publish = (props) => {
+    const dispatch = useDispatch();
+    const [currentStep, setCurrentStep] = useState("");
+    const [stepProgress, setStepProgress] = useState([]);
+    const exportContext = useSelector((state) => state.smartDesktopDesigner.export);
+    const { deployInfo, publishError } = exportContext;
+    const tryAgain = () => {
+        setCurrentStep("");
+        setStepProgress([]);
+        dispatch(SmartDesktopDesignerActions.set_deploy_info(null));
+        dispatch(SmartDesktopDesignerActions.set_publish_error(null));
+        props
+            .publishToCosaicCloud()
+            .then((currentDeployInfo) => dispatch(SmartDesktopDesignerActions.set_deploy_info(currentDeployInfo)))
+            .catch((error) => dispatch(SmartDesktopDesignerActions.set_publish_error(error)));
+    };
+    const reset = () => {
+        dispatch(SmartDesktopDesignerActions.set_is_publishing(false));
+        dispatch(SmartDesktopDesignerActions.set_publish_error(null));
+    };
+    const hasError = stepProgress.some((step) => step.state === ProgressState.Error);
+    const didFinish = (stepProgress.length > 0 &&
+        stepProgress.every((step) => {
+            if (step.state === ProgressState.Error) {
+                dispatch(SmartDesktopDesignerActions.set_publish_error(step.error));
+            }
+            return step.state === ProgressState.Finished;
+        })) ||
+        hasError;
+    useEffect(() => {
+        let debounceTimeout = null;
+        if (!didFinish) {
+            debounceTimeout = setInterval(() => {
+                props.getPublishProgress().then((data) => {
+                    setCurrentStep(data.currentStep);
+                    setStepProgress(Object.values(data.steps));
+                    // Finished! When the installer step reaches state "Finished"
+                    if (data.steps["cloud"].state === ProgressState.Finished) {
+                        // dispatch(SmartDesktopDesignerActions.SET_IS_PUBLISHING(false));
+                        clearInterval(debounceTimeout);
+                        reset();
+                    }
+                });
+            }, props.progressCheckInterval);
+        }
+        return () => {
+            if (debounceTimeout) {
+                clearInterval(debounceTimeout);
+            }
+        };
+    }, []);
+    return (React.createElement("div", { className: "export-publish-container" }, publishError ? (React.createElement("div", { className: "export-publish-error" },
+        React.createElement("h3", null, "Your project was not published"),
+        React.createElement("p", null, "An error occurred while trying to publish."),
+        React.createElement("p", { className: "export-publish-error-message" },
+            "\"",
+            publishError,
+            "\""),
+        React.createElement("div", { className: "export-error-actions" },
+            React.createElement(Button, { fashion: "ghost", text: "Cancel", onClick: reset }),
+            React.createElement(Button, { className: "export-error-btn", fashion: "secondary", text: "Try again", onClick: tryAgain })))) : (React.createElement(React.Fragment, null,
+        React.createElement("h2", null, "Publishing..."),
+        React.createElement("div", { className: ["export-publish-progress", hasError ? "export-publish-has-error" : ""].join(" ") }, [
+            {
+                name: "initialize",
+                description: "Creating a location for the project",
+                error: "Failed to create a location for the project",
+            },
+            {
+                name: "zip",
+                description: "Zipping project",
+                error: "Failed to zip the project",
+            },
+            {
+                name: "upload",
+                description: "Uploading project",
+                error: "Failed to upload the project",
+            },
+            {
+                name: "cloud",
+                description: "Creating installer and site",
+                error: "Failed to publish",
+            },
+        ].map((step) => {
+            let data = stepProgress.find((item) => item.step === step.name);
+            return (data && (React.createElement("div", { key: step.name, className: [
+                    "publish-progress-container",
+                    currentStep === step.name ? "publish-current-step" : "",
+                ].join(" ") },
+                React.createElement("div", { className: "publish-progress-icon" }, data.state === ProgressState.Started ? (React.createElement(PublishProgress, Object.assign({}, data))) : data.state === ProgressState.NotStarted ? (React.createElement("div", { className: "publish-progress-pending" })) : data.state === ProgressState.Error ? (React.createElement("div", { className: "publish-progress-error" },
+                    React.createElement(FinsembleIcon, { className: "publish-progress-error-icon", icon: "times", label: "Error" }))) : (React.createElement("div", { className: "publish-progress-success" },
+                    React.createElement(FinsembleIcon, { className: "publish-progress-success-icon", icon: "check", label: "Success" })))),
+                React.createElement("div", { className: "publish-progress-text" }, data.error ? step.error : step.description))));
+        })),
+        deployInfo && (React.createElement("div", { className: "export-publish-uploaded" },
+            React.createElement("h3", null, "Project uploaded"),
+            React.createElement("p", null, "Your project has been uploaded to the cloud. It will take several minutes to generate an installer. Share the installer link with your team. The desktop you've created will be available shortly by downloading and installing from the link."),
+            React.createElement(ExportDeployInfo, null)))))));
+};
+//# sourceMappingURL=Publish.js.map

package/react/components/sdd/Publish.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Publish.js","sourceRoot":"","sources":["../../../src/components/sdd/Publish.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\nimport { PublishProgress } from \"./PublishProgress\";\nimport { ExportDeployInfo } from \"./ExportDeployInfo\";\nimport { Button } from \"../common/Button\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { useDispatch, useSelector } from \"../../store\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { ProgressState } from \"../../types/smartDesktopDesignerTypes\";\nimport { ExportProps } from \"./Export\";\nimport { FinsembleIcon } from \"../common/FinsembleIcon\";\nimport { FEA } from \"@finsemble/finsemble-api\";\n\ntype ProgressItem = FEA.ProgressItem;\n\nexport type PublishProps = ExportProps;\n\nexport const Publish = (props: PublishProps) => {\n\tconst dispatch = useDispatch();\n\n\tconst [currentStep, setCurrentStep] = useState(\"\");\n\tconst [stepProgress, setStepProgress] = useState([] as Array<ProgressItem>);\n\n\tconst exportContext = useSelector((state: RootState) => state.smartDesktopDesigner.export);\n\n\tconst { deployInfo, publishError } = exportContext;\n\n\tconst tryAgain = () => {\n\t\tsetCurrentStep(\"\");\n\t\tsetStepProgress([]);\n\t\tdispatch(SmartDesktopDesignerActions.set_deploy_info(null));\n\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(null));\n\n\t\tprops\n\t\t\t.publishToCosaicCloud()\n\t\t\t.then((currentDeployInfo) => dispatch(SmartDesktopDesignerActions.set_deploy_info(currentDeployInfo)))\n\t\t\t.catch((error) => dispatch(SmartDesktopDesignerActions.set_publish_error(error)));\n\t};\n\n\tconst reset = () => {\n\t\tdispatch(SmartDesktopDesignerActions.set_is_publishing(false));\n\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(null));\n\t};\n\n\tconst hasError = stepProgress.some((step) => step.state === ProgressState.Error);\n\n\tconst didFinish =\n\t\t(stepProgress.length > 0 &&\n\t\t\tstepProgress.every((step) => {\n\t\t\t\tif (step.state === ProgressState.Error) {\n\t\t\t\t\tdispatch(SmartDesktopDesignerActions.set_publish_error(step.error));\n\t\t\t\t}\n\t\t\t\treturn step.state === ProgressState.Finished;\n\t\t\t})) ||\n\t\thasError;\n\n\tuseEffect(() => {\n\t\tlet debounceTimeout: any = null;\n\t\tif (!didFinish) {\n\t\t\tdebounceTimeout = setInterval(() => {\n\t\t\t\tprops.getPublishProgress().then((data) => {\n\t\t\t\t\tsetCurrentStep(data.currentStep);\n\t\t\t\t\tsetStepProgress(Object.values(data.steps));\n\n\t\t\t\t\t// Finished! When the installer step reaches state \"Finished\"\n\t\t\t\t\tif (data.steps[\"cloud\"].state === ProgressState.Finished) {\n\t\t\t\t\t\t// dispatch(SmartDesktopDesignerActions.SET_IS_PUBLISHING(false));\n\t\t\t\t\t\tclearInterval(debounceTimeout);\n\t\t\t\t\t\treset();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}, props.progressCheckInterval);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (debounceTimeout) {\n\t\t\t\tclearInterval(debounceTimeout);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div className=\"export-publish-container\">\n\t\t\t{publishError ? (\n\t\t\t\t<div className=\"export-publish-error\">\n\t\t\t\t\t<h3>Your project was not published</h3>\n\n\t\t\t\t\t<p>An error occurred while trying to publish.</p>\n\t\t\t\t\t<p className=\"export-publish-error-message\">&quot;{publishError}&quot;</p>\n\n\t\t\t\t\t<div className=\"export-error-actions\">\n\t\t\t\t\t\t<Button fashion=\"ghost\" text=\"Cancel\" onClick={reset} />\n\t\t\t\t\t\t<Button className=\"export-error-btn\" fashion=\"secondary\" text=\"Try again\" onClick={tryAgain} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<h2>Publishing...</h2>\n\n\t\t\t\t\t<div className={[\"export-publish-progress\", hasError ? \"export-publish-has-error\" : \"\"].join(\" \")}>\n\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"initialize\",\n\t\t\t\t\t\t\t\tdescription: \"Creating a location for the project\",\n\t\t\t\t\t\t\t\terror: \"Failed to create a location for the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"zip\",\n\t\t\t\t\t\t\t\tdescription: \"Zipping project\",\n\t\t\t\t\t\t\t\terror: \"Failed to zip the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"upload\",\n\t\t\t\t\t\t\t\tdescription: \"Uploading project\",\n\t\t\t\t\t\t\t\terror: \"Failed to upload the project\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"cloud\",\n\t\t\t\t\t\t\t\tdescription: \"Creating installer and site\",\n\t\t\t\t\t\t\t\terror: \"Failed to publish\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t].map((step) => {\n\t\t\t\t\t\t\tlet data = stepProgress.find((item) => item.step === step.name);\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\tdata && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={step.name}\n\t\t\t\t\t\t\t\t\t\tclassName={[\n\t\t\t\t\t\t\t\t\t\t\t\"publish-progress-container\",\n\t\t\t\t\t\t\t\t\t\t\tcurrentStep === step.name ? \"publish-current-step\" : \"\",\n\t\t\t\t\t\t\t\t\t\t].join(\" \")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-icon\">\n\t\t\t\t\t\t\t\t\t\t\t{/* eslint-disable no-nested-ternary */}\n\t\t\t\t\t\t\t\t\t\t\t{data.state === ProgressState.Started ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<PublishProgress {...data}></PublishProgress>\n\t\t\t\t\t\t\t\t\t\t\t) : data.state === ProgressState.NotStarted ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-pending\"></div>\n\t\t\t\t\t\t\t\t\t\t\t) : data.state === ProgressState.Error ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-error\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FinsembleIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"publish-progress-error-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel=\"Error\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></FinsembleIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-success\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<FinsembleIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"publish-progress-success-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"check\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel=\"Success\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t></FinsembleIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"publish-progress-text\">{data.error ? step.error : step.description}</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t\t{deployInfo && (\n\t\t\t\t\t\t<div className=\"export-publish-uploaded\">\n\t\t\t\t\t\t\t<h3>Project uploaded</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tYour project has been uploaded to the cloud. It will take several minutes to generate an installer.\n\t\t\t\t\t\t\t\tShare the installer link with your team. The desktop you&apos;ve created will be available shortly by\n\t\t\t\t\t\t\t\tdownloading and installing from the link.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<ExportDeployInfo />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/sdd/PublishProgress.d.ts

@@ -0,0 +1,9 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React from "react";
+export declare type PublishProgressProps = {
+    percentComplete: number;
+};
+export declare const PublishProgress: React.FunctionComponent<PublishProgressProps>;

package/react/components/sdd/PublishProgress.js

@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React from "react";
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
+export const PublishProgress = ({ percentComplete }) => (React.createElement("div", { className: "publish-progress-indicator", style: { width: 24, height: 24 } },
+    React.createElement(CircularProgressbar
+    // strokeWidth={24}
+    // reduction={0}
+    // hideBall={true}
+    // progress={percentComplete}
+    , { 
+        // strokeWidth={24}
+        // reduction={0}
+        // hideBall={true}
+        // progress={percentComplete}
+        value: percentComplete, strokeWidth: 15, styles: buildStyles({
+            pathTransitionDuration: 0.5,
+            pathColor: `#42a5ba`,
+            trailColor: "#373b43",
+            backgroundColor: "#3e98c7",
+        }) })));
+//# sourceMappingURL=PublishProgress.js.map

package/react/components/sdd/PublishProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PublishProgress.js","sourceRoot":"","sources":["../../../src/components/sdd/PublishProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAM9E,MAAM,CAAC,MAAM,eAAe,GAAkD,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACtG,6BAAK,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,oBAAC,mBAAmB;IACnB,mBAAmB;IACnB,gBAAgB;IAChB,kBAAkB;IAClB,6BAA6B;;QAH7B,mBAAmB;QACnB,gBAAgB;QAChB,kBAAkB;QAClB,6BAA6B;QAC7B,KAAK,EAAE,eAAe,EACtB,WAAW,EAAE,EAAE,EACf,MAAM,EAAE,WAAW,CAAC;YACnB,sBAAsB,EAAE,GAAG;YAC3B,SAAS,EAAE,SAAS;YACpB,UAAU,EAAE,SAAS;YACrB,eAAe,EAAE,SAAS;SAC1B,CAAC,GACoB,CAClB,CACN,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React from \"react\";\n\nimport { CircularProgressbar, buildStyles } from \"react-circular-progressbar\";\n\nexport type PublishProgressProps = {\n\tpercentComplete: number;\n};\n\nexport const PublishProgress: React.FunctionComponent<PublishProgressProps> = ({ percentComplete }) => (\n\t<div className=\"publish-progress-indicator\" style={{ width: 24, height: 24 }}>\n\t\t<CircularProgressbar\n\t\t\t// strokeWidth={24}\n\t\t\t// reduction={0}\n\t\t\t// hideBall={true}\n\t\t\t// progress={percentComplete}\n\t\t\tvalue={percentComplete}\n\t\t\tstrokeWidth={15}\n\t\t\tstyles={buildStyles({\n\t\t\t\tpathTransitionDuration: 0.5,\n\t\t\t\tpathColor: `#42a5ba`,\n\t\t\t\ttrailColor: \"#373b43\",\n\t\t\t\tbackgroundColor: \"#3e98c7\",\n\t\t\t})}\n\t\t></CircularProgressbar>\n\t</div>\n);\n"]}

package/react/components/sdd/SmartDesktopDesigner.d.ts

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+/// <reference types="react" />
+import "../../assets/css/finsemble.css";
+import "./css/styles.css";
+import { SmartDesktopClient } from "./smartDesktopClient";
+export declare type ThemeConfig = {
+    currentTheme: string;
+    defaultTheme: string;
+    themes: {
+        Default: Record<string, string>;
+        [index: string]: Record<string, string>;
+    };
+};
+export interface SmartDesktopDesignerProps {
+    views?: any[];
+    getConfig?: typeof FSBL.Clients.ConfigClient.getValues;
+    resetProject?: typeof SmartDesktopClient.resetProject;
+    getSDServerInfo?: typeof SmartDesktopClient.getSDServerInfo;
+    getTheme?: typeof SmartDesktopClient.getTheme;
+    getProjectSettings?: typeof SmartDesktopClient.getProjectSettings;
+    updateProjectSettings?: typeof SmartDesktopClient.updateProjectSettings;
+    onThemeUpdated?: typeof SmartDesktopClient.onThemeUpdated;
+    selectProjectPath?: typeof SmartDesktopClient.selectProjectPath;
+    restartFinsemble?: () => void;
+    setDefaults?: () => Promise<void>;
+}
+export declare const SmartDesktopDesigner: ({ views, getConfig, getTheme, resetProject, getSDServerInfo, getProjectSettings, updateProjectSettings, onThemeUpdated, selectProjectPath, restartFinsemble, setDefaults, }: SmartDesktopDesignerProps) => JSX.Element;

package/react/components/sdd/SmartDesktopDesigner.js

@@ -0,0 +1,142 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+/* If you rename "SmartDesktopDesigner" to something else (it's been Maker UI, Jumpstart, and DesktopProjectEditor in the past), grep for the following terms (case insensitive):
+ * "SmartDesktop", "Smart Desktop", "SDD", "SDServer", "SMART_DESKTOP"
+ */
+import React, { useState, useEffect, useRef } from "react";
+import FloatingFocus from "@q42/floating-focus-a11y";
+import "../../assets/css/finsemble.css";
+import "./css/styles.css";
+import { Navigation } from "./Navigation";
+import { CurrentView } from "./CurrentView";
+import { getCSSVars } from "./common/getCSSVars";
+import { useSelector, useDispatch } from "../../store";
+import { SmartDesktopDesignerActions } from "../../actions/smartDesktopDesignerActions";
+import { ContentHeader } from "./ContentHeader";
+import { Button } from "../common/Button";
+import defaultViews from "./common/views";
+import { setDefaults as defaultSetDefaults } from "./common/setPreloadDefaults";
+import { SmartDesktopClient } from "./smartDesktopClient";
+// The package FloatingFocus injects a focus indicator that moves around the page, but only for
+// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.
+new FloatingFocus();
+// If you want to make changes to the indicator, the styles are being maintained in assets/css/focus.css
+/**
+ * Initializes the Default theme with the CSS variables that are hard baked into Finsemble's UI library.
+ * These might be overridden by what is stored in the project's theme.css file.
+ * @returns An object containing the current theme.
+ */
+const getDefaultTheme = () => {
+    let globalCssVars = {};
+    const docStyle = window.getComputedStyle(document.documentElement);
+    getCSSVars(document.styleSheets).forEach((varName) => {
+        globalCssVars[varName] = docStyle.getPropertyValue(varName).trim();
+    });
+    return globalCssVars;
+};
+let themeConfig = {
+    currentTheme: "Default",
+    defaultTheme: "Default",
+    themes: {
+        Default: getDefaultTheme(),
+    },
+};
+export const SmartDesktopDesigner = ({ views = defaultViews, getConfig = (params, callback) => FSBL.Clients.ConfigClient.getValues(params, callback), getTheme = () => SmartDesktopClient.getTheme(), resetProject = () => SmartDesktopClient.resetProject(), getSDServerInfo = () => SmartDesktopClient.getSDServerInfo(), getProjectSettings = () => SmartDesktopClient.getProjectSettings(), updateProjectSettings = (settings) => SmartDesktopClient.updateProjectSettings(settings), onThemeUpdated = (callback) => SmartDesktopClient.onThemeUpdated(callback), selectProjectPath = () => SmartDesktopClient.selectProjectPath(), restartFinsemble = () => FSBL.System.Application.getCurrent().restart(), setDefaults = async () => {
+    await defaultSetDefaults();
+}, }) => {
+    const dispatch = useDispatch();
+    const [theme, setTheme] = useState(themeConfig);
+    const [sdServerInfo, setSDServerInfo] = useState({ enabled: false, applicationRoot: "" });
+    const [version, setVersion] = useState("");
+    const project = useSelector((state) => state.smartDesktopDesigner.projectInfo);
+    const setProject = (value) => {
+        dispatch(SmartDesktopDesignerActions.set_project_info(value));
+    };
+    const themeListenerRef = useRef((addListenerErr, { data }) => {
+        const newTheme = Object.assign({}, themeConfig);
+        newTheme.themes.Default = Object.assign({}, newTheme.themes.Default);
+        for (let [key, value] of Object.entries(data)) {
+            newTheme.themes.Default[key] = value;
+        }
+        setTheme(newTheme);
+    });
+    useEffect(() => {
+        setDefaults();
+        // Initialize the local theme with data from theme.css (via REST)
+        getTheme().then((response) => {
+            if (!response.theme)
+                return;
+            const newTheme = Object.assign({}, themeConfig);
+            newTheme.themes.Default = Object.assign({}, newTheme.themes.Default);
+            Object.entries(response.theme).forEach(([key, value]) => {
+                newTheme.themes.Default[key] = value;
+            });
+            setTheme(newTheme);
+        });
+        // Initialize the local version number with the current FSBL version
+        FSBL.getFSBLInfo().then((info) => setVersion(info.FSBLVersion));
+        // Initialize the local project info based on data obtained from config of sdServerInfo
+        getConfig(null, async (err, newConfig) => {
+            var _a, _b, _c, _d;
+            if (err) {
+                FSBL.Clients.Logger.system.error("SmartDesktopDesigner", err);
+                return;
+            }
+            const { settings } = await getProjectSettings();
+            const projectPath = (_a = settings === null || settings === void 0 ? void 0 : settings.path) !== null && _a !== void 0 ? _a : project.path;
+            const jsInfo = await getSDServerInfo();
+            if (!jsInfo.enabled) {
+                FSBL.Clients.Logger.system.error("Smart Desktop Designer started without the Smart Desktop Server being enabled. Check FEA configuration.");
+            }
+            else {
+                FSBL.Clients.Logger.system.log(`DPS application root: ${jsInfo.applicationRoot}`);
+            }
+            FSBL.Clients.Logger.system.log(`DPS info: ${JSON.stringify(jsInfo)}`);
+            FSBL.Clients.Logger.system.log(`NewConfig info: ${JSON.stringify(newConfig)}`);
+            setProject(Object.assign(Object.assign({}, project), { name: ((_b = jsInfo === null || jsInfo === void 0 ? void 0 : jsInfo.projectConfig) === null || _b === void 0 ? void 0 : _b.name) || "", path: projectPath, export: Object.assign(Object.assign({}, project.export), { toolbarIcon: "/assets/img/Finsemble_Toolbar_Icon.png", installerIcon: "/assets/img/installer_icon.ico", taskbarIcon: (_c = newConfig === null || newConfig === void 0 ? void 0 : newConfig.startup_app) === null || _c === void 0 ? void 0 : _c.applicationIcon, systemTrayIcon: (_d = newConfig === null || newConfig === void 0 ? void 0 : newConfig.finsemble) === null || _d === void 0 ? void 0 : _d.systemTrayIcon, splashScreenImage: newConfig === null || newConfig === void 0 ? void 0 : newConfig.splashScreenImage }) }));
+            // This should be done last as it's checked for initial rendering
+            // Otherwise, inital values will be cached within states of sub components
+            // "Untitled project" will show as project.name since it will be "", e.g.
+            setSDServerInfo(jsInfo);
+        });
+        const removeHandler = onThemeUpdated(themeListenerRef.current);
+        return () => {
+            removeHandler();
+        };
+    }, []);
+    const clickResetProjectButton = () => {
+        const resetProjectHelper = async () => {
+            const [err] = await resetProject();
+            if (err)
+                alert(`Project failed to reset: ${err.message}`);
+        };
+        FSBL.Clients.DialogManager.open("yesNo", {
+            title: "Are you sure?",
+            question: `Your project will be set back to factory defaults. You will lose all customizations except the name of the project. Finsemble will then be restarted.`,
+            hideModalOnClose: true,
+            showNegativeButton: false,
+            affirmativeResponseLabel: "Reset Project",
+        }, (err, response) => {
+            if (response.choice === "affirmative") {
+                resetProjectHelper();
+            }
+        });
+    };
+    return sdServerInfo.enabled ? (React.createElement("div", { className: "config-container" },
+        React.createElement("div", { className: "project-container" },
+            React.createElement("div", { className: "nav-container" },
+                React.createElement(Navigation, { views: views }),
+                React.createElement("div", { className: "bottom-nav-wrapper" },
+                    React.createElement("div", { className: "nav-anchor-reset" },
+                        React.createElement("div", { className: "version-info" }, version && `Finsemble version ${version}`),
+                        React.createElement(Button, { fashion: "danger", text: "Reset project", onClick: () => {
+                                clickResetProjectButton();
+                            } })))),
+            React.createElement("div", { className: "content-container" },
+                React.createElement(ContentHeader, { name: project.name }),
+                React.createElement("div", { className: "view-container" },
+                    React.createElement(CurrentView, { views: views, theme: theme })))))) : (React.createElement(React.Fragment, null));
+};
+//# sourceMappingURL=SmartDesktopDesigner.js.map

package/react/components/sdd/SmartDesktopDesigner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartDesktopDesigner.js","sourceRoot":"","sources":["../../../src/components/sdd/SmartDesktopDesigner.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\n/* If you rename \"SmartDesktopDesigner\" to something else (it's been Maker UI, Jumpstart, and DesktopProjectEditor in the past), grep for the following terms (case insensitive):\n * \"SmartDesktop\", \"Smart Desktop\", \"SDD\", \"SDServer\", \"SMART_DESKTOP\"\n */\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\nimport \"../../assets/css/finsemble.css\";\nimport \"./css/styles.css\";\nimport { Navigation } from \"./Navigation\";\nimport { CurrentView } from \"./CurrentView\";\nimport { getCSSVars } from \"./common/getCSSVars\";\nimport { useSelector, useDispatch } from \"../../store\";\nimport { RootState } from \"../../reducers/rootReducer\";\nimport { ProjectSaveData } from \"../../types/smartDesktopDesignerTypes\";\nimport { SmartDesktopDesignerActions } from \"../../actions/smartDesktopDesignerActions\";\nimport { FEA } from \"@finsemble/finsemble-api\";\nimport { ContentHeader } from \"./ContentHeader\";\nimport { Button } from \"../common/Button\";\nimport defaultViews from \"./common/views\";\nimport { setDefaults as defaultSetDefaults } from \"./common/setPreloadDefaults\";\nimport { SmartDesktopClient } from \"./smartDesktopClient\";\n\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\nnew FloatingFocus();\n// If you want to make changes to the indicator, the styles are being maintained in assets/css/focus.css\n\n/**\n * Initializes the Default theme with the CSS variables that are hard baked into Finsemble's UI library.\n * These might be overridden by what is stored in the project's theme.css file.\n * @returns An object containing the current theme.\n */\nconst getDefaultTheme = () => {\n\tlet globalCssVars: any = {};\n\tconst docStyle = window.getComputedStyle(document.documentElement);\n\tgetCSSVars(document.styleSheets).forEach((varName: any) => {\n\t\tglobalCssVars[varName] = docStyle.getPropertyValue(varName).trim();\n\t});\n\n\treturn globalCssVars;\n};\n\nexport type ThemeConfig = {\n\tcurrentTheme: string;\n\tdefaultTheme: string;\n\tthemes: {\n\t\tDefault: Record<string, string>;\n\t\t[index: string]: Record<string, string>;\n\t};\n};\n\nlet themeConfig: ThemeConfig = {\n\tcurrentTheme: \"Default\",\n\tdefaultTheme: \"Default\",\n\tthemes: {\n\t\tDefault: getDefaultTheme(),\n\t},\n};\n\nexport interface SmartDesktopDesignerProps {\n\tviews?: any[];\n\tgetConfig?: typeof FSBL.Clients.ConfigClient.getValues;\n\tresetProject?: typeof SmartDesktopClient.resetProject;\n\tgetSDServerInfo?: typeof SmartDesktopClient.getSDServerInfo;\n\tgetTheme?: typeof SmartDesktopClient.getTheme;\n\tgetProjectSettings?: typeof SmartDesktopClient.getProjectSettings;\n\tupdateProjectSettings?: typeof SmartDesktopClient.updateProjectSettings;\n\tonThemeUpdated?: typeof SmartDesktopClient.onThemeUpdated;\n\tselectProjectPath?: typeof SmartDesktopClient.selectProjectPath;\n\trestartFinsemble?: () => void;\n\tsetDefaults?: () => Promise<void>;\n}\n\nexport const SmartDesktopDesigner = ({\n\tviews = defaultViews,\n\tgetConfig = (params: any, callback: any) => FSBL.Clients.ConfigClient.getValues(params, callback),\n\tgetTheme = () => SmartDesktopClient.getTheme(),\n\tresetProject = () => SmartDesktopClient.resetProject(),\n\tgetSDServerInfo = () => SmartDesktopClient.getSDServerInfo(),\n\tgetProjectSettings = () => SmartDesktopClient.getProjectSettings(),\n\tupdateProjectSettings = (settings: any) => SmartDesktopClient.updateProjectSettings(settings),\n\tonThemeUpdated = (callback: any) => SmartDesktopClient.onThemeUpdated(callback),\n\tselectProjectPath = () => SmartDesktopClient.selectProjectPath(),\n\trestartFinsemble = () => FSBL.System.Application.getCurrent().restart(),\n\tsetDefaults = async () => {\n\t\tawait defaultSetDefaults();\n\t},\n}: SmartDesktopDesignerProps) => {\n\tconst dispatch = useDispatch();\n\n\tconst [theme, setTheme] = useState(themeConfig);\n\tconst [sdServerInfo, setSDServerInfo] = useState({ enabled: false, applicationRoot: \"\" } as FEA.SDServerInfo);\n\tconst [version, setVersion] = useState(\"\");\n\n\tconst project = useSelector((state: RootState) => state.smartDesktopDesigner.projectInfo);\n\n\tconst setProject = (value: ProjectSaveData) => {\n\t\tdispatch(SmartDesktopDesignerActions.set_project_info(value));\n\t};\n\n\tconst themeListenerRef = useRef((addListenerErr: any, { data }: { data: Record<string, string> }) => {\n\t\tconst newTheme = { ...themeConfig };\n\t\tnewTheme.themes.Default = { ...newTheme.themes.Default };\n\n\t\tfor (let [key, value] of Object.entries(data)) {\n\t\t\tnewTheme.themes.Default[key] = value;\n\t\t}\n\t\tsetTheme(newTheme);\n\t});\n\n\tuseEffect(() => {\n\t\tsetDefaults();\n\t\t// Initialize the local theme with data from theme.css (via REST)\n\t\tgetTheme().then((response) => {\n\t\t\tif (!response.theme) return;\n\t\t\tconst newTheme = { ...themeConfig };\n\t\t\tnewTheme.themes.Default = { ...newTheme.themes.Default };\n\n\t\t\tObject.entries(response.theme).forEach(([key, value]) => {\n\t\t\t\tnewTheme.themes.Default[key] = value;\n\t\t\t});\n\n\t\t\tsetTheme(newTheme);\n\t\t});\n\n\t\t// Initialize the local version number with the current FSBL version\n\t\tFSBL.getFSBLInfo().then((info) => setVersion(info.FSBLVersion));\n\n\t\t// Initialize the local project info based on data obtained from config of sdServerInfo\n\t\tgetConfig(null, async (err: any, newConfig: any) => {\n\t\t\tif (err) {\n\t\t\t\tFSBL.Clients.Logger.system.error(\"SmartDesktopDesigner\", err);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { settings } = await getProjectSettings();\n\n\t\t\tconst projectPath = settings?.path ?? project.path;\n\n\t\t\tconst jsInfo = await getSDServerInfo();\n\t\t\tif (!jsInfo.enabled) {\n\t\t\t\tFSBL.Clients.Logger.system.error(\n\t\t\t\t\t\"Smart Desktop Designer started without the Smart Desktop Server being enabled. Check FEA configuration.\"\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tFSBL.Clients.Logger.system.log(`DPS application root: ${jsInfo.applicationRoot}`);\n\t\t\t}\n\t\t\tFSBL.Clients.Logger.system.log(`DPS info: ${JSON.stringify(jsInfo)}`);\n\t\t\tFSBL.Clients.Logger.system.log(`NewConfig info: ${JSON.stringify(newConfig)}`);\n\n\t\t\tsetProject({\n\t\t\t\t...project,\n\t\t\t\tname: jsInfo?.projectConfig?.name || \"\",\n\t\t\t\tpath: projectPath,\n\t\t\t\texport: {\n\t\t\t\t\t...project.export,\n\t\t\t\t\ttoolbarIcon: \"/assets/img/Finsemble_Toolbar_Icon.png\",\n\t\t\t\t\tinstallerIcon: \"/assets/img/installer_icon.ico\",\n\t\t\t\t\ttaskbarIcon: newConfig?.startup_app?.applicationIcon,\n\t\t\t\t\tsystemTrayIcon: newConfig?.finsemble?.systemTrayIcon,\n\t\t\t\t\tsplashScreenImage: newConfig?.splashScreenImage,\n\t\t\t\t},\n\t\t\t});\n\n\t\t\t// This should be done last as it's checked for initial rendering\n\t\t\t// Otherwise, inital values will be cached within states of sub components\n\t\t\t// \"Untitled project\" will show as project.name since it will be \"\", e.g.\n\t\t\tsetSDServerInfo(jsInfo);\n\t\t});\n\n\t\tconst removeHandler = onThemeUpdated(themeListenerRef.current);\n\t\treturn () => {\n\t\t\tremoveHandler();\n\t\t};\n\t}, []);\n\n\tconst clickResetProjectButton = () => {\n\t\tconst resetProjectHelper = async () => {\n\t\t\tconst [err] = await resetProject();\n\t\t\tif (err) alert(`Project failed to reset: ${err.message}`);\n\t\t};\n\t\tFSBL.Clients.DialogManager.open(\n\t\t\t\"yesNo\",\n\t\t\t{\n\t\t\t\ttitle: \"Are you sure?\",\n\t\t\t\tquestion: `Your project will be set back to factory defaults. You will lose all customizations except the name of the project. Finsemble will then be restarted.`,\n\t\t\t\thideModalOnClose: true,\n\t\t\t\tshowNegativeButton: false,\n\t\t\t\taffirmativeResponseLabel: \"Reset Project\",\n\t\t\t},\n\t\t\t(err: any, response: { choice: string }) => {\n\t\t\t\tif (response.choice === \"affirmative\") {\n\t\t\t\t\tresetProjectHelper();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t};\n\n\treturn sdServerInfo.enabled ? (\n\t\t<div className=\"config-container\">\n\t\t\t<div className=\"project-container\">\n\t\t\t\t<div className=\"nav-container\">\n\t\t\t\t\t<Navigation views={views}></Navigation>\n\n\t\t\t\t\t<div className=\"bottom-nav-wrapper\">\n\t\t\t\t\t\t<div className=\"nav-anchor-reset\">\n\t\t\t\t\t\t\t<div className=\"version-info\">{version && `Finsemble version ${version}`}</div>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tfashion=\"danger\"\n\t\t\t\t\t\t\t\ttext=\"Reset project\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tclickResetProjectButton();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"content-container\">\n\t\t\t\t\t<ContentHeader name={project.name} />\n\t\t\t\t\t<div className=\"view-container\">\n\t\t\t\t\t\t<CurrentView views={views} theme={theme}></CurrentView>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t) : (\n\t\t<></>\n\t);\n};\n"]}

package/react/components/sdd/ThemePage.css

@@ -0,0 +1,92 @@
+.appearance-options legend {
+	user-select: none;
+}
+
+.appearance-options label {
+	display: inline-block;
+	width: 50%;
+}
+
+.theme-edit {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.theme-color-picker-text {
+	margin-left: 1em;
+	width: 6em;
+}
+
+.color-picker .current-color {
+	width: 3em;
+	height: 3em;
+	border: 1px solid #ccc;
+}
+
+.color-picker .current-color-popup {
+	position: absolute;
+}
+
+.theme-settings h2 {
+	margin-top: 2em;
+	margin-bottom: 2em;
+	border-bottom: 2px solid #ccc;
+}
+
+.theme-settings legend {
+	font-weight: bold;
+}
+
+.appearance-options {
+	margin-bottom: 3em;
+}
+
+.appearance-options-field {
+	display: flex;
+	align-items: center;
+	margin-bottom: 0.5em;
+}
+
+.appearance-options-field label {
+	width: 33.3%;
+	opacity: 0.75;
+}
+
+.appearance-options-header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 1em;
+}
+
+.appearance-options-header legend {
+	font-size: 1.25em;
+	margin-right: 1em;
+}
+
+.theme-settings-actions {
+	display: block;
+	text-align: right;
+	margin-bottom: 3em;
+}
+
+.theme-settings-actions button {
+	margin-left: 0.9em;
+	display: inline-block;
+}
+
+.theme-settings-reset-action {
+	background-color: #f26666;
+}
+
+.theme-settings-save-action {
+	background-color: #42a5ba;
+}
+
+.appearance-options-field .tooltip-icon {
+	margin-left: 10px;
+}

package/react/components/sdd/ThemePage.d.ts

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+/// <reference types="react" />
+import "./ThemePage.css";
+export declare type ThemeBundle = {
+    [key: string]: string;
+};
+export declare type ThemePageProps = {
+    updateThemes: (id: string, newValue: string) => void;
+    theme: ThemeBundle;
+};
+export declare const ThemePage: ({ updateThemes, theme }: ThemePageProps) => JSX.Element;

package/react/components/sdd/ThemePage.js

@@ -0,0 +1,106 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React from "react";
+import { Tooltip } from "../common/Tooltip";
+import { ColorPicker, colorToRGBA, RGBA_CHANNEL } from "../common/ColorPicker";
+import "./ThemePage.css";
+export const ThemePage = ({ updateThemes, theme }) => {
+    const onUpdateColor = (id, newColor) => {
+        if (id === "font-color") {
+            const rgba = colorToRGBA(newColor), rgb = [rgba[RGBA_CHANNEL.RED], rgba[RGBA_CHANNEL.GREEN], rgba[RGBA_CHANNEL.BLUE]], alpha = 0.3; // (rgba[RGBA_CHANNEL.ALPHA] / 255)
+            updateThemes(`--toolbar-separator`, `1px solid rgba(${rgb.join(", ")}, ${alpha})`);
+        }
+        updateThemes(`--${id}`, newColor);
+    };
+    const generateColorPicker = (id) => (React.createElement(ColorPicker, { id: id, startColor: theme[`--${id}`] || "", updateColor: (newColor) => {
+            onUpdateColor(id, newColor);
+        } }));
+    return (React.createElement("div", { className: "theme-settings" },
+        React.createElement("div", { className: "theme-colors" },
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Font settings")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "font-color" }, "Primary font color"),
+                    generateColorPicker("font-color"),
+                    React.createElement(Tooltip, null, "Main text color. Make sure there is enough contrast against the primary background.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "core-primary-5" }, "Secondary font color"),
+                    generateColorPicker("core-primary-5"),
+                    React.createElement(Tooltip, null, "Secondary text color. Make sure there is enough contrast against the primary background.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "font-color-2" }, "Contrast color"),
+                    generateColorPicker("font-color-2"),
+                    React.createElement(Tooltip, null, "Color of text that is not against a typical background. Make it light if you have a light theme, or dark if you have a dark theme.")))),
+        React.createElement("div", { className: "theme-colors" },
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Brand color"),
+                    React.createElement(Tooltip, null, "The primary accent color that affects icons, form elements, buttons.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-primary" }, "Primary"),
+                    generateColorPicker("accent-primary")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-primary-1" }, "On mouseover"),
+                    generateColorPicker("accent-primary-1"))),
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Background color"),
+                    React.createElement(Tooltip, null, "Background color of desktop components such as the Toolbar and window Titlebar.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "core-primary" }, "Primary background"),
+                    generateColorPicker("core-primary")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "core-primary-1" }, "Secondary background"),
+                    generateColorPicker("core-primary-1"))),
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Navigation buttons"),
+                    React.createElement(Tooltip, null, "Background color for navigation buttons.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "core-primary-2" }, "Primary"),
+                    generateColorPicker("core-primary-2"))),
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Highlights and mouseover colors"),
+                    React.createElement(Tooltip, null, "Colors used to highlight particular elements or when a user mouses over selected elements.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "core-primary-3" }, "Primary"),
+                    generateColorPicker("core-primary-3")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "core-primary-4" }, "Secondary"),
+                    generateColorPicker("core-primary-4"))),
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Success"),
+                    React.createElement(Tooltip, null, "Color of messages indicating success and affirmations, such as checkmark icons.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-positive" }, "Primary"),
+                    generateColorPicker("accent-positive")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-positive-1" }, "On mouseover"),
+                    generateColorPicker("accent-positive-1"))),
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Reminders and warnings"),
+                    React.createElement(Tooltip, null, "Color of non-critical alerts.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-aware" }, "Primary"),
+                    generateColorPicker("accent-aware")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-aware-1" }, "On mouseover"),
+                    generateColorPicker("accent-aware-1"))),
+            React.createElement("fieldset", { className: "appearance-options" },
+                React.createElement("div", { className: "appearance-options-header" },
+                    React.createElement("legend", null, "Errors"),
+                    React.createElement(Tooltip, null, "Color of critical errors and information.")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-negative" }, "Primary"),
+                    generateColorPicker("accent-negative")),
+                React.createElement("div", { className: "appearance-options-field" },
+                    React.createElement("label", { htmlFor: "accent-negative-1" }, "On mouseover"),
+                    generateColorPicker("accent-negative-1"))))));
+};
+//# sourceMappingURL=ThemePage.js.map