From 810f03dc221747eb03f5425f4a4fafff7053e095 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Tue, 12 Apr 2022 12:44:17 -0400
Subject: [PATCH 01/10] feat(core): Adds ability to load components for app and
 hide certain sections in UI

---
 packages/core/app/APP                        |   0
 packages/core/app/App.js                     |   3 +-
 packages/core/app/app-components-loader.cjs  |  13 ++
 packages/core/app/components/SideBar.js      | 179 ++++++++++++-------
 packages/core/app/webpackConfigGenerator.cjs |  15 +-
 packages/core/package.json                   |   2 +-
 packages/core/src/commands/build.cjs         |  19 +-
 packages/core/src/commands/dev.cjs           |  23 ++-
 packages/core/src/commands/utils.cjs         |   8 +
 packages/core/src/function-set-up.js         |   4 +-
 packages/core/src/mechanic.js                |  21 ++-
 packages/engine-svg/index.js                 |   2 +-
 12 files changed, 210 insertions(+), 79 deletions(-)
 create mode 100644 packages/core/app/APP
 create mode 100644 packages/core/app/app-components-loader.cjs

diff --git a/packages/core/app/APP b/packages/core/app/APP
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/core/app/App.js b/packages/core/app/App.js
index 660dcf09..af7364b7 100644
--- a/packages/core/app/App.js
+++ b/packages/core/app/App.js
@@ -11,10 +11,11 @@ import functions from "./FUNCTIONS";
 import * as css from "./App.module.css";
 
 const Layout = ({ funcName, functions, mainRef, iframeRef }) => {
+  const { settings } = functions[funcName];
   return (
     <div className={css.root}>
       <SideBar name={funcName} exports={functions[funcName]} iframe={iframeRef} mainRef={mainRef}>
-        <Nav name={funcName} functions={functions} />
+        {!settings.hideNavigation && <Nav name={funcName} functions={functions} />}
       </SideBar>
       <main className={css.main} ref={mainRef}>
         <iframe
diff --git a/packages/core/app/app-components-loader.cjs b/packages/core/app/app-components-loader.cjs
new file mode 100644
index 00000000..1e3d41ea
--- /dev/null
+++ b/packages/core/app/app-components-loader.cjs
@@ -0,0 +1,13 @@
+const path = require("path");
+const { getOptions } = require("loader-utils");
+
+module.exports = function () {
+  const { appCompsPath } = getOptions(this);
+
+  const result = `
+import * as components from "${appCompsPath.split(path.sep).join("/")}";
+export const appComponents = components;
+`;
+  // console.log(result);
+  return result;
+};
diff --git a/packages/core/app/components/SideBar.js b/packages/core/app/components/SideBar.js
index 40083a71..fcfc201a 100644
--- a/packages/core/app/components/SideBar.js
+++ b/packages/core/app/components/SideBar.js
@@ -12,6 +12,12 @@ import { Button, Toggle } from "@mechanic-design/ui-components";
 import { Input } from "./Input.js";
 import { useInteractiveInputs } from "./utils/useInteractiveInputs.js";
 
+import { appComponents } from "../APP";
+
+const AsideComponent = appComponents.SideBar
+  ? appComponents.SideBar
+  : ({ children }) => <aside className={css.root}>{children}</aside>;
+
 import * as css from "./SideBar.module.css";
 
 export const SideBar = ({ name, exports: functionExports, iframe, mainRef, children }) => {
@@ -25,7 +31,15 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   const {
     inputs,
     presets: exportedPresets,
-    settings: { persistRandomOnExport, showStateExport }
+    settings: {
+      persistRandomOnExport,
+      showStateExport,
+      hidePresets,
+      hideScaleToFit,
+      hideAutoRefresh,
+      hideGenerate,
+      showMultipleExports
+    }
   } = functionExports;
   const presets = getPossiblePresets(exportedPresets ?? {});
   const canScale = !!(inputs.width && inputs.height);
@@ -34,12 +48,13 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   const [values, setValues] = useValues(name, inputs, exportedPresets);
   const handleOnChange = (e, name, value) => setValues(name, value);
 
-  const getRunConfig = (lastRun, isPreview, random, scale) => ({
+  const getRunConfig = (lastRun, isPreview, random, scale, exportType) => ({
     isPreview,
     lastRun,
     boundingClient: mainRef.current.getBoundingClientRect(),
     scale: scale && canScale && scaleToFit,
-    randomSeed: random
+    randomSeed: random,
+    exportType: exportType
   });
 
   const preview = async () => {
@@ -49,10 +64,10 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
     );
   };
 
-  const handleExport = async () => {
+  const handleExport = async type => {
     const run = iframe.current.contentWindow?.run;
     setLastRun(lastRun =>
-      run?.(name, values, getRunConfig(lastRun, false, seedHistory.current, false))
+      run?.(name, values, getRunConfig(lastRun, false, seedHistory.current, false, type))
     );
   };
 
@@ -72,20 +87,22 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   useShortcuts(handleExport);
 
   return (
-    <aside className={css.root}>
+    <AsideComponent>
       <div className={css.section}>{children}</div>
       <div className={css.sep} />
 
       <div className={cn(css.edge, css.top)} />
       <div className={css.inputs}>
-        <Input
-          className={css.input}
-          key="input-preset"
-          name="preset"
-          values={values}
-          inputDef={{ type: "text", options: presets, default: NO_PRESET_VALUE }}
-          onChange={handleOnChange}
-        />
+        {!hidePresets && (
+          <Input
+            className={css.input}
+            key="input-preset"
+            name="preset"
+            values={values}
+            inputDef={{ type: "text", options: presets, default: NO_PRESET_VALUE }}
+            onChange={handleOnChange}
+          />
+        )}
         {Object.entries(inputs).map(([name, input]) => (
           <Input
             className={css.input}
@@ -100,63 +117,97 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
       <div className={cn(css.edge, css.bottom)} />
 
       <div className={css.section}>
-        <div className={css.row}>
-          <Toggle
-            status={canScale && scaleToFit}
-            disabled={!canScale || lastRun === undefined}
-            onClick={() => setScaleToFit(scaleToFit => !scaleToFit)}>
-            Scale to Fit
-          </Toggle>
-          {!canScale && <span className={css.error}>Inputs missing for scaling</span>}
-        </div>
-        <div className={css.sep} />
-        <div className={css.row}>
-          <Toggle
-            className={css.grow}
-            status={autoRefreshOn}
-            onClick={() => setAutoRefreshOn(autoRefreshOn => !autoRefreshOn)}
-            disabled={!iframeLoaded || lastRun === undefined}>
-            Auto-refresh
-          </Toggle>
-        </div>
+        {!hideScaleToFit && (
+          <div className={css.row}>
+            <Toggle
+              status={canScale && scaleToFit}
+              disabled={!canScale || lastRun === undefined}
+              onClick={() => setScaleToFit(scaleToFit => !scaleToFit)}>
+              Scale to Fit
+            </Toggle>
+            {!canScale && <span className={css.error}>Inputs missing for scaling</span>}
+          </div>
+        )}
+
+        {!hideAutoRefresh && (
+          <>
+            <div className={css.sep} />
+            <div className={css.row}>
+              <Toggle
+                className={css.grow}
+                status={autoRefreshOn}
+                onClick={() => setAutoRefreshOn(autoRefreshOn => !autoRefreshOn)}
+                disabled={!iframeLoaded || lastRun === undefined}>
+                Auto-refresh
+              </Toggle>
+            </div>
+          </>
+        )}
+
+        {!hideGenerate && (
+          <>
+            <div className={css.sep} />
+            <div className={cn(css.row, css.noWrapRow, { [css.withUndo]: persistRandom })}>
+              {persistRandom && (
+                <Button
+                  className={cn(css.grow, css.undo)}
+                  onClick={() => setSeedHistory.undo()}
+                  disabled={!iframeLoaded || !setSeedHistory.canUndo || lastRun === undefined}>
+                  {"<"}
+                </Button>
+              )}
+              <Button
+                className={cn(css.grow)}
+                onClick={() => setSeedHistory.set()}
+                disabled={!iframeLoaded || lastRun === undefined}>
+                {iframeLoaded ? "Generate" : "Loading content"}
+              </Button>
+              {persistRandom && (
+                <Button
+                  className={cn(css.grow, css.redo)}
+                  onClick={() => setSeedHistory.redo()}
+                  disabled={!iframeLoaded || lastRun === undefined || !setSeedHistory.canRedo}>
+                  {">"}
+                </Button>
+              )}
+            </div>
+          </>
+        )}
+
         <div className={css.sep} />
-        <div className={cn(css.row, css.noWrapRow, { [css.withUndo]: persistRandom })}>
-          {persistRandom && (
+        {!showMultipleExports ? (
+          <div className={cn(css.row, css.noWrapRow)}>
             <Button
-              className={cn(css.grow, css.undo)}
-              onClick={() => setSeedHistory.undo()}
-              disabled={!iframeLoaded || !setSeedHistory.canUndo || lastRun === undefined}>
-              {"<"}
+              className={css.grow}
+              primary={iframeLoaded}
+              onClick={() => handleExport()}
+              disabled={!iframeLoaded || lastRun === undefined}>
+              {lastRun === undefined ? "Error" : iframeLoaded ? "Export" : "Loading content"}
             </Button>
-          )}
-          <Button
-            className={cn(css.grow)}
-            onClick={() => setSeedHistory.set()}
-            disabled={!iframeLoaded || lastRun === undefined}>
-            {iframeLoaded ? "Generate" : "Loading content"}
-          </Button>
-          {persistRandom && (
+          </div>
+        ) : (
+          <>
             <Button
-              className={cn(css.grow, css.redo)}
-              onClick={() => setSeedHistory.redo()}
-              disabled={!iframeLoaded || lastRun === undefined || !setSeedHistory.canRedo}>
-              {">"}
+              className={css.grow}
+              primary={iframeLoaded}
+              onClick={() => handleExport("svg")}
+              disabled={!iframeLoaded || lastRun === undefined}>
+              {lastRun === undefined ? "Error" : iframeLoaded ? "Export SVG" : "Loading content"}
             </Button>
-          )}
-        </div>
-        <div className={css.sep} />
-        <div className={cn(css.row, css.noWrapRow)}>
-          <Button
-            className={css.grow}
-            primary={iframeLoaded}
-            onClick={handleExport}
-            disabled={!iframeLoaded || lastRun === undefined}>
-            {lastRun === undefined ? "Error" : iframeLoaded ? "Export" : "Loading content"}
-          </Button>
-        </div>
+            <div className={css.sep} />
+            <Button
+              className={css.grow}
+              primary={iframeLoaded}
+              onClick={() => handleExport("png")}
+              disabled={!iframeLoaded || lastRun === undefined}>
+              {lastRun === undefined ? "Error" : iframeLoaded ? "Export PNG" : "Loading content"}
+            </Button>
+          </>
+        )}
+
         <div className={css.sep} />
       </div>
-    </aside>
+    </AsideComponent>
   );
 };
 
diff --git a/packages/core/app/webpackConfigGenerator.cjs b/packages/core/app/webpackConfigGenerator.cjs
index 1158298b..6228f180 100644
--- a/packages/core/app/webpackConfigGenerator.cjs
+++ b/packages/core/app/webpackConfigGenerator.cjs
@@ -7,7 +7,12 @@ const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 
 const { resolve } = require;
 
-module.exports = function (modeParameter, designFunctions, inputsData, distDir, publicPath) {
+module.exports = function (
+  modeParameter,
+  { designFunctions, inputsData, appCompsPath },
+  distDir,
+  publicPath
+) {
   const mode = modeParameter === "dev" ? "development" : "production";
   const isProduction = mode === "production";
 
@@ -77,6 +82,13 @@ module.exports = function (modeParameter, designFunctions, inputsData, distDir,
     ]
   };
 
+  const appComponents = {
+    test: /APP/,
+    use: [
+      { loader: path.resolve(__dirname, "./app-components-loader.cjs"), options: { appCompsPath } }
+    ]
+  };
+
   const mechanicCss = {
     test: /\.(css)$/,
     issuer: isMechanicCondition,
@@ -249,6 +261,7 @@ module.exports = function (modeParameter, designFunctions, inputsData, distDir,
         js,
         functions,
         inputs,
+        appComponents,
         mechanicCss,
         functionsCss,
         mechanicFonts,
diff --git a/packages/core/package.json b/packages/core/package.json
index d850ef07..27d219f1 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -75,7 +75,7 @@
     "regenerator-runtime": "^0.13.1",
     "seedrandom": "^3.0.5",
     "style-loader": "^3.2.1",
-    "svgo": "^2.3.1",
+    "svgo": "^2.8.0",
     "tmp": "^0.2.1",
     "use-immer": "^0.6.0",
     "webpack": "^5.39.1",
diff --git a/packages/core/src/commands/build.cjs b/packages/core/src/commands/build.cjs
index d1937b99..3afedaa9 100644
--- a/packages/core/src/commands/build.cjs
+++ b/packages/core/src/commands/build.cjs
@@ -5,6 +5,7 @@ const {
   getFunctionsPath,
   getInputsPath,
   generateInputScript,
+  getAppCompsPath,
   generateFuncTempScripts,
   greet,
   goodbye
@@ -42,6 +43,19 @@ const command = async argv => {
     spinner.succeed(`Custom inputs directory not found. No custom inputs being used!`);
   }
 
+  // Seek custom app components path
+  spinner.start("Seeking custom app components directory...");
+  const appCompsPath = await getAppCompsPath(argv.appCompsPath, config);
+  if (appCompsPath) {
+    spinner.succeed(
+      `Custom app components directory found: ${success(path.relative(".", appCompsPath))}`
+    );
+  } else {
+    spinner.succeed(
+      `Custom app components directory not found. No custom app components being used!`
+    );
+  }
+
   // Seek functions path
   spinner.start("Seeking design function directory...");
   const functionsPath = await getFunctionsPath(argv.functionsPath, config);
@@ -56,7 +70,7 @@ const command = async argv => {
 
   spinner.start("Generating temp files to serve...");
   const [customInputs, inputScriptContent] = generateInputScript(inputsPath);
-  const inputs = { inputsPath, inputScriptContent, customInputs };
+  const inputsData = { inputsPath, inputScriptContent, customInputs };
   const [designFunctions] = generateFuncTempScripts(functionsPath);
   spinner.succeed("Temp files created!");
 
@@ -68,8 +82,7 @@ const command = async argv => {
   spinner.start("Loading webpack compilation...");
   const webpackConfig = webpackConfigGenerator(
     "prod",
-    designFunctions,
-    inputs,
+    { designFunctions, inputsData, appCompsPath },
     distDir,
     publicPath
   );
diff --git a/packages/core/src/commands/dev.cjs b/packages/core/src/commands/dev.cjs
index 419555cc..8ce834f9 100644
--- a/packages/core/src/commands/dev.cjs
+++ b/packages/core/src/commands/dev.cjs
@@ -12,6 +12,7 @@ const {
   getInputsPath,
   setCustomInterrupt,
   generateInputScript,
+  getAppCompsPath,
   generateFuncTempScripts,
   greet,
   goodbye
@@ -48,6 +49,19 @@ const command = async argv => {
     spinner.succeed(`Custom inputs directory not found. No custom inputs being used!`);
   }
 
+  // Seek custom app components path
+  spinner.start("Seeking custom app components directory...");
+  const appCompsPath = await getAppCompsPath(argv.appCompsPath, config);
+  if (appCompsPath) {
+    spinner.succeed(
+      `Custom app components directory found: ${success(path.relative(".", appCompsPath))}`
+    );
+  } else {
+    spinner.succeed(
+      `Custom app components directory not found. No custom app components being used!`
+    );
+  }
+
   // Seek functions path
   spinner.start("Seeking design function directory...");
   const functionsPath = await getFunctionsPath(argv.functionsPath, config);
@@ -100,13 +114,18 @@ const command = async argv => {
 
   spinner.start("Generating temp files to serve...");
   const [customInputs, inputScriptContent] = generateInputScript(inputsPath);
-  const inputs = { inputsPath, inputScriptContent, customInputs };
+  const inputsData = { inputsPath, inputScriptContent, customInputs };
   const [designFunctions, funcsTempDirObj] = generateFuncTempScripts(functionsPath);
   spinner.succeed("Temp files created!");
   spinner.start("Loading webpack compilation...");
 
   // Load webpack middleware to load mechanic app
-  const webpackConfig = webpackConfigGenerator("dev", designFunctions, inputs, null, "/");
+  const webpackConfig = webpackConfigGenerator(
+    "dev",
+    { designFunctions, inputsData, appCompsPath },
+    null,
+    "/"
+  );
   const compiler = webpack(webpackConfig);
   // https://stackoverflow.com/questions/43921770/webpack-dev-middleware-pass-through-for-all-routes
   app.use(history());
diff --git a/packages/core/src/commands/utils.cjs b/packages/core/src/commands/utils.cjs
index a1e90531..0fc582c9 100644
--- a/packages/core/src/commands/utils.cjs
+++ b/packages/core/src/commands/utils.cjs
@@ -28,6 +28,13 @@ const getInputsPath = async (inputsPath, config) => {
   return exists ? fullPath : null;
 };
 
+const getAppCompsPath = async (appCompsPath, config) => {
+  const relativePath = appCompsPath || config.appCompsPath || "./app";
+  const fullPath = path.resolve(relativePath);
+  const exists = await fs.pathExists(fullPath);
+  return exists ? fullPath : null;
+};
+
 const searchExports = (dir, callback, depth = 0) => {
   const files = fs.readdirSync(dir);
   files.forEach(file => {
@@ -129,6 +136,7 @@ module.exports = {
   getConfig,
   getFunctionsPath,
   getInputsPath,
+  getAppCompsPath,
   generateInputScript,
   generateFuncTempScripts,
   setCustomInterrupt,
diff --git a/packages/core/src/function-set-up.js b/packages/core/src/function-set-up.js
index 9fe6d6cf..eeed2613 100644
--- a/packages/core/src/function-set-up.js
+++ b/packages/core/src/function-set-up.js
@@ -68,12 +68,12 @@ const setUp = (inputsDefs, designFunction, inputErrors) => {
     validator.validateSettings();
     validator.validateInputs();
 
-    window.run = (functionName, values, lastRun, isPreview) => {
+    window.run = (functionName, values, config) => {
       try {
         validator.validateValues(values);
         const preparedValues = validator.prepareValues(values);
         const engine = designFunction.settings.engine.run;
-        const mechanic = engine(functionName, designFunction, preparedValues, lastRun, isPreview);
+        const mechanic = engine(functionName, designFunction, preparedValues, config);
         return mechanic ? mechanic : null;
       } catch (error) {
         showError(`There was an error running ${functionName} function and/or engine.`, error);
diff --git a/packages/core/src/mechanic.js b/packages/core/src/mechanic.js
index 1059cf42..d4635286 100644
--- a/packages/core/src/mechanic.js
+++ b/packages/core/src/mechanic.js
@@ -29,7 +29,9 @@ export class Mechanic {
    */
   constructor(settings, baseValues, config) {
     const values = Object.assign({}, baseValues);
-    const { lastRun, boundingClient, scale, randomSeed } = config;
+    const { lastRun, boundingClient, scale, randomSeed, isPreview, exportType } = config;
+
+    values._isPreview = isPreview;
 
     const persistRandomOnExport =
       !settings.hasOwnProperty("persistRandomOnExport") || settings.persistRandomOnExport;
@@ -68,6 +70,7 @@ export class Mechanic {
     this.settings = settings;
     this.values = values;
     this.functionState = lastRun?.functionState ?? {};
+    this.exportType = exportType;
   }
 
   /**
@@ -122,7 +125,7 @@ export class Mechanic {
         this.svgFrames = [];
       }
 
-      el = svgAppendStyles(el, extras.head);
+      if (this.settings.ignoreStyles !== true) el = svgAppendStyles(el, extras.head);
 
       this.svgFrames.push(svgToDataUrl(svgPrepare(el, this.serializer)));
       if (!this.svgSize) {
@@ -146,7 +149,7 @@ export class Mechanic {
   async done(el, extras = {}) {
     if (!this.settings.animated) {
       if (isSVG(el)) {
-        el = svgAppendStyles(el, extras.head);
+        if (this.settings.ignoreStyles !== true) el = svgAppendStyles(el, extras.head);
 
         this.serializer = new XMLSerializer();
 
@@ -155,7 +158,17 @@ export class Mechanic {
         if (this.settings.optimize !== false) {
           svgString = svgOptimize(svgString, this.settings.optimize);
         }
-        this.svgData = svgToDataUrl(svgString);
+        const data = svgToDataUrl(svgString);
+        if (this.exportType === "png") {
+          const cacheCanvas = document.createElement("canvas");
+          const size = extractSvgSize(el);
+          cacheCanvas.width = size.width;
+          cacheCanvas.height = size.height;
+          await dataUrlToCanvas(data, cacheCanvas);
+          this.canvasData = cacheCanvas.toDataURL();
+        } else {
+          this.svgData = data;
+        }
       } else if (isCanvas(el)) {
         this.canvasData = el.toDataURL();
       } else {
diff --git a/packages/engine-svg/index.js b/packages/engine-svg/index.js
index 4d69b4c7..2901641b 100644
--- a/packages/engine-svg/index.js
+++ b/packages/engine-svg/index.js
@@ -4,7 +4,7 @@ const root = document.getElementById("root");
 const head = document.querySelector("head");
 
 export const run = (functionName, func, values, config) => {
-  const { isPreview } = config;
+  const { isPreview, exportType } = config;
 
   root.innerHTML = "";
 

From 1f5a0cce3a8d17152ac9d1c461f5e9808892b8d3 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Tue, 3 May 2022 15:57:43 -0400
Subject: [PATCH 02/10] feat(core): Adds ability to hide feedback button

---
 packages/core/app/App.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core/app/App.js b/packages/core/app/App.js
index af7364b7..7e4b03cd 100644
--- a/packages/core/app/App.js
+++ b/packages/core/app/App.js
@@ -14,6 +14,9 @@ const Layout = ({ funcName, functions, mainRef, iframeRef }) => {
   const { settings } = functions[funcName];
   return (
     <div className={css.root}>
+      {!settings.hideFeedback && (
+        <Feedback href="https://forms.gle/uBTn8oVThZHVghV89">Got feedback?</Feedback>
+      )}
       <SideBar name={funcName} exports={functions[funcName]} iframe={iframeRef} mainRef={mainRef}>
         {!settings.hideNavigation && <Nav name={funcName} functions={functions} />}
       </SideBar>
@@ -35,7 +38,6 @@ const AppComponent = () => {
   const firstFunctionName = Object.keys(functions)[0];
   return (
     <div className={css.base}>
-      <Feedback href="https://forms.gle/uBTn8oVThZHVghV89">Got feedback?</Feedback>
       <Switch>
         {Object.keys(functions).map((name, i) => (
           <Route

From d29e6c05e70f9f6e5c4a23aae8da058a55bf9cc2 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Tue, 3 May 2022 15:58:33 -0400
Subject: [PATCH 03/10] feat(core): Adds ability to append an extra component
 in bottom section of app

---
 packages/core/app/components/SideBar.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/app/components/SideBar.js b/packages/core/app/components/SideBar.js
index fcfc201a..0caa2680 100644
--- a/packages/core/app/components/SideBar.js
+++ b/packages/core/app/components/SideBar.js
@@ -31,6 +31,7 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   const {
     inputs,
     presets: exportedPresets,
+    ExtraUi,
     settings: {
       persistRandomOnExport,
       showStateExport,
@@ -117,6 +118,7 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
       <div className={cn(css.edge, css.bottom)} />
 
       <div className={css.section}>
+        {ExtraUi && <ExtraUi values={values} onChange={handleOnChange} />}
         {!hideScaleToFit && (
           <div className={css.row}>
             <Toggle

From 828b606e13d9384e2cac93653ebe1631906da5c8 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Tue, 3 May 2022 16:12:56 -0400
Subject: [PATCH 04/10] feat(core): Adds ability to serve static folder

---
 package-lock.json                            | 220 ++++++++++++++++++-
 packages/core/app/webpackConfigGenerator.cjs |   4 +
 packages/core/package.json                   |   1 +
 3 files changed, 218 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f635bb57..6fbb293c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
 				"classnames": "^2.2.6",
 				"clean-webpack-plugin": "^3.0.0",
 				"connect-history-api-fallback": "^1.6.0",
+				"copy-webpack-plugin": "^10.2.4",
 				"css-loader": "^6.2.0",
 				"css-minimizer-webpack-plugin": "^3.0.1",
 				"execa": "^5.1.1",
@@ -55,7 +56,7 @@
 				"serve": "^11.0.2",
 				"style-loader": "^3.2.1",
 				"stylelint-config-prettier": "^8.0.2",
-				"svgo": "^2.3.1",
+				"svgo": "^2.8.0",
 				"terser-webpack-plugin": "^5.1.3",
 				"tmp": "^0.2.1",
 				"use-immer": "^0.6.0",
@@ -6111,6 +6112,130 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/copy-webpack-plugin": {
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
+			"integrity": "sha512-xFVltahqlsRcyyJqQbDY6EYTtyQZF9rf+JPjwHObLdPFMEISqkFkr7mFoVOC6BfYS/dNThyoQKvziugm+OnwBg==",
+			"dependencies": {
+				"fast-glob": "^3.2.7",
+				"glob-parent": "^6.0.1",
+				"globby": "^12.0.2",
+				"normalize-path": "^3.0.0",
+				"schema-utils": "^4.0.0",
+				"serialize-javascript": "^6.0.0"
+			},
+			"engines": {
+				"node": ">= 12.20.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.1.0"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/ajv": {
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+			"integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/array-union": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
+			"integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/globby": {
+			"version": "12.2.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
+			"integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
+			"dependencies": {
+				"array-union": "^3.0.1",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.7",
+				"ignore": "^5.1.9",
+				"merge2": "^1.4.1",
+				"slash": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+		},
+		"node_modules/copy-webpack-plugin/node_modules/schema-utils": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+			"integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.8.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.0.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/slash": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+			"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/core-js-compat": {
 			"version": "3.21.1",
 			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
@@ -9933,9 +10058,9 @@
 			}
 		},
 		"node_modules/is-glob": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-			"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -23718,6 +23843,87 @@
 			"resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
 			"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
 		},
+		"copy-webpack-plugin": {
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
+			"integrity": "sha512-xFVltahqlsRcyyJqQbDY6EYTtyQZF9rf+JPjwHObLdPFMEISqkFkr7mFoVOC6BfYS/dNThyoQKvziugm+OnwBg==",
+			"requires": {
+				"fast-glob": "^3.2.7",
+				"glob-parent": "^6.0.1",
+				"globby": "^12.0.2",
+				"normalize-path": "^3.0.0",
+				"schema-utils": "^4.0.0",
+				"serialize-javascript": "^6.0.0"
+			},
+			"dependencies": {
+				"ajv": {
+					"version": "8.11.0",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+					"integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+					"requires": {
+						"fast-deep-equal": "^3.1.1",
+						"json-schema-traverse": "^1.0.0",
+						"require-from-string": "^2.0.2",
+						"uri-js": "^4.2.2"
+					}
+				},
+				"ajv-keywords": {
+					"version": "5.1.0",
+					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+					"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+					"requires": {
+						"fast-deep-equal": "^3.1.3"
+					}
+				},
+				"array-union": {
+					"version": "3.0.1",
+					"resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
+					"integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw=="
+				},
+				"glob-parent": {
+					"version": "6.0.2",
+					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+					"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+					"requires": {
+						"is-glob": "^4.0.3"
+					}
+				},
+				"globby": {
+					"version": "12.2.0",
+					"resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
+					"integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
+					"requires": {
+						"array-union": "^3.0.1",
+						"dir-glob": "^3.0.1",
+						"fast-glob": "^3.2.7",
+						"ignore": "^5.1.9",
+						"merge2": "^1.4.1",
+						"slash": "^4.0.0"
+					}
+				},
+				"json-schema-traverse": {
+					"version": "1.0.0",
+					"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+					"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+				},
+				"schema-utils": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+					"integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+					"requires": {
+						"@types/json-schema": "^7.0.9",
+						"ajv": "^8.8.0",
+						"ajv-formats": "^2.1.1",
+						"ajv-keywords": "^5.0.0"
+					}
+				},
+				"slash": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+					"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew=="
+				}
+			}
+		},
 		"core-js-compat": {
 			"version": "3.21.1",
 			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
@@ -26634,9 +26840,9 @@
 			}
 		},
 		"is-glob": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-			"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
 			"requires": {
 				"is-extglob": "^2.1.1"
 			}
diff --git a/packages/core/app/webpackConfigGenerator.cjs b/packages/core/app/webpackConfigGenerator.cjs
index 6228f180..ee43f905 100644
--- a/packages/core/app/webpackConfigGenerator.cjs
+++ b/packages/core/app/webpackConfigGenerator.cjs
@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
 
 const { resolve } = require;
 
@@ -223,6 +224,9 @@ module.exports = function (
       template: path.resolve(__dirname, "./index.html"),
       chunks: ["app"]
     }),
+    new CopyPlugin({
+      patterns: [{ from: "./static/", to: "static" }]
+    }),
     ...Object.keys(designFunctions).map(
       name =>
         new HtmlWebpackPlugin({
diff --git a/packages/core/package.json b/packages/core/package.json
index 27d219f1..2a96ed85 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -53,6 +53,7 @@
     "classnames": "^2.2.6",
     "clean-webpack-plugin": "^3.0.0",
     "connect-history-api-fallback": "^1.6.0",
+    "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.2.0",
     "express": "^4.17.1",
     "fs-extra": "^10.0.0",

From 9252d3616d5529c1c9e2a2628da781338a494ca3 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Wed, 4 May 2022 00:06:42 -0400
Subject: [PATCH 05/10] fix: Removed unused variable

---
 packages/engine-svg/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/engine-svg/index.js b/packages/engine-svg/index.js
index 2901641b..4d69b4c7 100644
--- a/packages/engine-svg/index.js
+++ b/packages/engine-svg/index.js
@@ -4,7 +4,7 @@ const root = document.getElementById("root");
 const head = document.querySelector("head");
 
 export const run = (functionName, func, values, config) => {
-  const { isPreview, exportType } = config;
+  const { isPreview } = config;
 
   root.innerHTML = "";
 

From 973a10ed159e13d93a7a643a2f96c9cf4aaaf370 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Wed, 4 May 2022 12:38:56 -0400
Subject: [PATCH 06/10] feat(core): Adds support for autoRefresh and scaleToFit
 settings

---
 packages/core/app/components/SideBar.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/core/app/components/SideBar.js b/packages/core/app/components/SideBar.js
index 0caa2680..0e17a1d8 100644
--- a/packages/core/app/components/SideBar.js
+++ b/packages/core/app/components/SideBar.js
@@ -21,13 +21,6 @@ const AsideComponent = appComponents.SideBar
 import * as css from "./SideBar.module.css";
 
 export const SideBar = ({ name, exports: functionExports, iframe, mainRef, children }) => {
-  const [scaleToFit, setScaleToFit] = useState(true);
-  const [autoRefreshOn, setAutoRefreshOn] = useState(true);
-  const [lastRun, setLastRun] = useState(null);
-  const [seedHistory, setSeedHistory] = useSeedHistory(name);
-
-  const iframeLoaded = useIframeLoaded(iframe, name);
-
   const {
     inputs,
     presets: exportedPresets,
@@ -37,7 +30,9 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
       showStateExport,
       hidePresets,
       hideScaleToFit,
+      scaleToFit: scaleToFitInit,
       hideAutoRefresh,
+      autoRefresh: autoRefreshInit,
       hideGenerate,
       showMultipleExports
     }
@@ -46,6 +41,13 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   const canScale = !!(inputs.width && inputs.height);
   const persistRandom = persistRandomOnExport === undefined || persistRandomOnExport;
 
+  const [scaleToFit, setScaleToFit] = useState(scaleToFitInit ?? true);
+  const [autoRefreshOn, setAutoRefreshOn] = useState(autoRefreshInit ?? true);
+  const [lastRun, setLastRun] = useState(null);
+  const [seedHistory, setSeedHistory] = useSeedHistory(name);
+
+  const iframeLoaded = useIframeLoaded(iframe, name);
+
   const [values, setValues] = useValues(name, inputs, exportedPresets);
   const handleOnChange = (e, name, value) => setValues(name, value);
 
@@ -61,14 +63,14 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   const preview = async () => {
     const run = iframe.current.contentWindow?.run;
     setLastRun(lastRun =>
-      run?.(name, values, getRunConfig(lastRun, true, seedHistory.current, true))
+      run ? run(name, values, getRunConfig(lastRun, true, seedHistory.current, true)) : null
     );
   };
 
   const handleExport = async type => {
     const run = iframe.current.contentWindow?.run;
     setLastRun(lastRun =>
-      run?.(name, values, getRunConfig(lastRun, false, seedHistory.current, false, type))
+      run ? run(name, values, getRunConfig(lastRun, false, seedHistory.current, false, type)) : null
     );
   };
 
@@ -119,6 +121,7 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
 
       <div className={css.section}>
         {ExtraUi && <ExtraUi values={values} onChange={handleOnChange} />}
+
         {!hideScaleToFit && (
           <div className={css.row}>
             <Toggle

From 40426cc5da49f3e0da5b86d9694f6c205930060b Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Wed, 4 May 2022 12:39:43 -0400
Subject: [PATCH 07/10] fix(core): Adds error throws for not supported types of
 exports

---
 packages/core/src/mechanic.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/mechanic.js b/packages/core/src/mechanic.js
index d4635286..92025f6a 100644
--- a/packages/core/src/mechanic.js
+++ b/packages/core/src/mechanic.js
@@ -170,9 +170,19 @@ export class Mechanic {
           this.svgData = data;
         }
       } else if (isCanvas(el)) {
-        this.canvasData = el.toDataURL();
+        if (this.exportType === "svg") {
+          throw new MechanicError("Cannot export SVG of Canvas element. Try PNG.");
+        } else {
+          this.canvasData = el.toDataURL();
+        }
       } else {
-        this.htmlData = await htmlToDataUrl(el);
+        if (this.exportType === "svg") {
+          throw new MechanicError(
+            "Mechanic currently doesn't support HTML to SVG conversion. Try PNG."
+          );
+        } else {
+          this.htmlData = await htmlToDataUrl(el);
+        }
       }
     } else {
       if (!supportsFormatWebP()) {

From e887f8626ec04bf8d92099f29d17d3f106aaa417 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Wed, 4 May 2022 12:40:22 -0400
Subject: [PATCH 08/10] docs: Adds changelog for changes

---
 packages/core/CHANGELOG.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index a3fe9c55..950c7bff 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Support to import custom `SideBar` component in `app/` folder that replaces sidebar in Mechanic UI.
+- New design function export `ExtraUi`, expected to be a React component that's added to the bottom section of sidebar, on top of default toggles and buttons.
+- Support for SVG and PNG exports for SVG based engines like `engine-react` and `engine-svg`.
+- New `hideFeedback` design function setting. When true, Mechanic's feedback button is hidden. Defaults to false.
+- New `hideNavigation` design function setting. When true, the navigation input that let's users select a design function is hidden. Defaults to false.
+- New `hidePresets` design function setting. When true, preset selection input is hidden. Defaults to false.
+- New `hideScaleToFit` design function setting. When true, Scale to Fit toggle is hidden. Defaults to false.
+- New `scaleToFit` design function setting. When false, Scale to Fit will be off initially. Defaults to true.
+- New `hideAutoRefresh` design function setting. When true, Auto Refresh toggle is hidden. Defaults to false.
+- New `autoRefresh` design function setting. When false, Auto Refresh will be off initially. Defaults to true.
+- New `hideGenerate` design function setting. When true, Generate button is hidden. Defaults to false.
+- New `showMultipleExports` design function setting. When false, single export button is shown. When true, two separate export buttons are shown: one for PNG export and another for SVG export. Defaults to false.
+- New `ignoreStyles` design function setting. When true, CSS in iframe is injected into design function's SVG output. Defaults to false.
+- Support to serve `static/` folder for all design functions.
+- `_isPreview` value is passed to design function handler in `inputs` argument.
+
 ## 2.0.0-beta - 2022-03-24
 
 ### Added

From a09737dda919ff91b733e8fdb92a5ffce67a2517 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Thu, 5 May 2022 09:30:44 -0400
Subject: [PATCH 09/10] fix(core): Changed name of initialAutoRefresh and
 initialScaleToFit and fixed typo

---
 packages/core/CHANGELOG.md              | 8 ++++----
 packages/core/app/components/SideBar.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 93fc1493..d029ee5d 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -13,12 +13,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - New design function export `ExtraUi`, expected to be a React component that's added to the bottom section of sidebar, on top of default toggles and buttons.
 - Support for SVG and PNG exports for SVG based engines like `engine-react` and `engine-svg`.
 - New `hideFeedback` design function setting. When true, Mechanic's feedback button is hidden. Defaults to false.
-- New `hideNavigation` design function setting. When true, the navigation input that let's users select a design function is hidden. Defaults to false.
+- New `hideNavigation` design function setting. When true, the navigation input that lets users select a design function is hidden. Defaults to false.
 - New `hidePresets` design function setting. When true, preset selection input is hidden. Defaults to false.
 - New `hideScaleToFit` design function setting. When true, Scale to Fit toggle is hidden. Defaults to false.
-- New `scaleToFit` design function setting. When false, Scale to Fit will be off initially. Defaults to true.
+- New `initialScaleToFit` design function setting. When false, Scale to Fit will be off initially. Defaults to true.
 - New `hideAutoRefresh` design function setting. When true, Auto Refresh toggle is hidden. Defaults to false.
-- New `autoRefresh` design function setting. When false, Auto Refresh will be off initially. Defaults to true.
+- New `initialAutoRefresh` design function setting. When false, Auto Refresh will be off initially. Defaults to true.
 - New `hideGenerate` design function setting. When true, Generate button is hidden. Defaults to false.
 - New `showMultipleExports` design function setting. When false, single export button is shown. When true, two separate export buttons are shown: one for PNG export and another for SVG export. Defaults to false.
 - New `ignoreStyles` design function setting. When true, CSS in iframe is injected into design function's SVG output. Defaults to false.
@@ -142,7 +142,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Changed how design functions are bundled, instead of a single functions bundle that mixes definitions, one per design function bundle is generated through temporal scripts. This let's CSS stylings to not get mixed in the loaded iframe of the app.
+- Changed how design functions are bundled, instead of a single functions bundle that mixes definitions, one per design function bundle is generated through temporal scripts. This lets CSS stylings to not get mixed in the loaded iframe of the app.
 - Improved language and logs in main Mechanic commands (`dev`, `build`, `serve`)
 - Updated app loading page to use rotating mini Mechanic logo.
 
diff --git a/packages/core/app/components/SideBar.js b/packages/core/app/components/SideBar.js
index 0e17a1d8..08f70fa8 100644
--- a/packages/core/app/components/SideBar.js
+++ b/packages/core/app/components/SideBar.js
@@ -30,9 +30,9 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
       showStateExport,
       hidePresets,
       hideScaleToFit,
-      scaleToFit: scaleToFitInit,
+      initialScaleToFit,
       hideAutoRefresh,
-      autoRefresh: autoRefreshInit,
+      initialAutoRefresh,
       hideGenerate,
       showMultipleExports
     }
@@ -41,8 +41,8 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   const canScale = !!(inputs.width && inputs.height);
   const persistRandom = persistRandomOnExport === undefined || persistRandomOnExport;
 
-  const [scaleToFit, setScaleToFit] = useState(scaleToFitInit ?? true);
-  const [autoRefreshOn, setAutoRefreshOn] = useState(autoRefreshInit ?? true);
+  const [scaleToFit, setScaleToFit] = useState(initialScaleToFit ?? true);
+  const [autoRefreshOn, setAutoRefreshOn] = useState(initialAutoRefresh ?? true);
   const [lastRun, setLastRun] = useState(null);
   const [seedHistory, setSeedHistory] = useSeedHistory(name);
 

From ef74e7a6dd1c125b67d35bc20b72c4a8a8cb6867 Mon Sep 17 00:00:00 2001
From: Fernando Florenzano Hernandez <f.florenzano94@gmail.com>
Date: Thu, 5 May 2022 09:59:51 -0400
Subject: [PATCH 10/10] docs(changelog): Updates changelogs for next release,
 and cleans uoo recent versioning

---
 CHANGELOG.md                          | 67 +++++++++++++++++++++++++--
 packages/cli/CHANGELOG.md             |  2 +-
 packages/core/CHANGELOG.md            | 31 +++++++++++--
 packages/create-mechanic/CHANGELOG.md |  6 +++
 packages/engine-canvas/CHANGELOG.md   |  2 +-
 packages/engine-p5/CHANGELOG.md       |  2 +-
 packages/engine-react/CHANGELOG.md    |  2 +-
 packages/engine-svg/CHANGELOG.md      |  2 +-
 packages/ui-components/CHANGELOG.md   | 21 ++++++---
 9 files changed, 116 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 550515f8..51e07f90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,61 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [2.0.0-beta] - 2022-04-14
+## [2.0.0-beta.5] - 2022-05-04
+
+### Added
+
+- Support to import custom `SideBar` component in `app/` folder that replaces sidebar in Mechanic UI.
+- New design function export `ExtraUi`, expected to be a React component that's added to the bottom section of sidebar, on top of default toggles and buttons.
+- Support for SVG and PNG exports for SVG based engines like `engine-react` and `engine-svg`.
+- New `hideFeedback` design function setting. When true, Mechanic's feedback button is hidden. Defaults to false.
+- New `hideNavigation` design function setting. When true, the navigation input that lets users select a design function is hidden. Defaults to false.
+- New `hidePresets` design function setting. When true, preset selection input is hidden. Defaults to false.
+- New `hideScaleToFit` design function setting. When true, Scale to Fit toggle is hidden. Defaults to false.
+- New `initialScaleToFit` design function setting. When false, Scale to Fit will be off initially. Defaults to true.
+- New `hideAutoRefresh` design function setting. When true, Auto Refresh toggle is hidden. Defaults to false.
+- New `initialAutoRefresh` design function setting. When false, Auto Refresh will be off initially. Defaults to true.
+- New `hideGenerate` design function setting. When true, Generate button is hidden. Defaults to false.
+- New `showMultipleExports` design function setting. When false, single export button is shown. When true, two separate export buttons are shown: one for PNG export and another for SVG export. Defaults to false.
+- New `ignoreStyles` design function setting. When true, CSS in iframe is injected into design function's SVG output. Defaults to false.
+- Support to serve `static/` folder for all design functions.
+- `_isPreview` value is passed to design function handler in `inputs` argument.
+
+### Changed
+
+- Changed filename from `[name][timestamp].[ext]` to `[filename]-[timestamp].[ext]` for better readability
+
+## [2.0.0-beta.4] - 2022-04-14
+
+### Fixed
+
+- Adds `immer` as dependency.
+- Updated width of number value display to `ch` units in slider so it does not overflow
+
+## [2.0.0-beta.3] - 2022-03-24
+
+### Changed
+
+- Preview / Randomize button was renamed to Generate and styled as a single button with undo / redo
+
+### Fixed
+
+- Update script checks that dependency file exist before requiring.
+
+## [2.0.0-beta.2] - 2022-03-18
+
+### Fixed
+
+- Error capturing during df render
+- Typos in input validation
+
+## [2.0.0-beta.1] - 2022-03-17
+
+### Fixed
+
+- Captured instance when animation only calls done and never frame.
+
+## [2.0.0-beta.0] - 2022-03-16
 
 ### Added
 
@@ -26,7 +80,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Generated script from function loader is now written in ESM
 - Updated PostCSS dependencies: `postcss-loader`and `postcss-preset-env`
 - Generalized and streamlined input validation, and added basic inputs definitions and behaviors
-- Renamed original width and height values passed from `_widthOriginal` and `_heightOriginal`to just `_width`and `_height`.
+- Renamed original width and height values passed from `_widthOriginal` and `_heightOriginal`to just `_width`and `_height`
 
 ### Fixed
 
@@ -201,8 +255,13 @@ Beta release
 
 First logged release
 
-[unreleased]: https://github.com/designsystemsinternational/mechanic/compare/v2.0.0...main
-[2.0.0-beta]: https://github.com/designsystemsinternational/mechanic/releases/tag/v2.0.0-beta.3
+[unreleased]: https://github.com/designsystemsinternational/mechanic/compare/v2.0.0-beta.5...main
+[2.0.0-beta.5]: https://github.com/designsystemsinternational/mechanic/releases/tag/v2.0.0-beta.5
+[2.0.0-beta.4]: https://github.com/designsystemsinternational/mechanic/releases/tag/v2.0.0-beta.4
+[2.0.0-beta.3]: https://github.com/designsystemsinternational/mechanic/releases/tag/v2.0.0-beta.3
+[2.0.0-beta.2]: https://github.com/designsystemsinternational/mechanic/releases/tag/v2.0.0-beta.2
+[2.0.0-beta.1]: https://github.com/designsystemsinternational/mechanic/releases/tag/v2.0.0-beta.1
+[2.0.0-beta.0]: https://github.com/designsystemsinternational/mechanic/releases/tag/v2.0.0-beta.0
 [1.2.0]: https://github.com/designsystemsinternational/mechanic/releases/tag/v1.2.0
 [1.1.0]: https://github.com/designsystemsinternational/mechanic/releases/tag/v1.1.0
 [1.0.0]: https://github.com/designsystemsinternational/mechanic/releases/tag/v1.0.0
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 96947810..67f82b84 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## 2.0.0-beta - 2022-03-24
+## 2.0.0-beta.0 - 2022-03-24
 
 ### Added
 
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index d029ee5d..83cc7d36 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 2.0.0-beta.5 - 2022-05-04
+
 ### Added
 
 - Support to import custom `SideBar` component in `app/` folder that replaces sidebar in Mechanic UI.
@@ -29,7 +31,32 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Changed filename from `[name][timestamp].[ext]` to `[filename]-[timestamp].[ext]` for better readability
 
-## 2.0.0-beta - 2022-03-24
+## 2.0.0-beta.4 - 2022-04-14
+
+### Fixed
+
+- Adds `immer` as dependency.
+
+## 2.0.0-beta.3 - 2022-03-24
+
+### Changed
+
+- Preview / Randomize button was renamed to Generate and styled as a single button with undo / redo
+
+## 2.0.0-beta.2 - 2022-03-18
+
+### Fixed
+
+- Error capturing during df render
+- Typos in input validation
+
+## 2.0.0-beta.1 - 2022-03-17
+
+### Fixed
+
+- Captured instance when animation only calls done and never frame.
+
+## 2.0.0-beta.0 - 2022-03-16
 
 ### Added
 
@@ -50,14 +77,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated PostCSS dependencies: `postcss-loader`and `postcss-preset-env`
 - Generalized and streamlined input validation, and added basic inputs definitions and behaviors
 - Renamed original width and height values passed from `_widthOriginal` and `_heightOriginal`to just `_width`and `_height`.
-- Preview / Randomize button was renamed to Generate and styled as a single button with undo / redo
 
 ### Fixed
 
 - Feedback tag gets lifted
 - Added array case to local storage input values serialization
 - Allows nested URLs in app that redirect to first level of URL (to main design functions)
-- Captured instance when animation only calls done and never frame.
 
 ## 1.2.0 - 2022-02-14
 
diff --git a/packages/create-mechanic/CHANGELOG.md b/packages/create-mechanic/CHANGELOG.md
index 6978ee17..7dc4531e 100644
--- a/packages/create-mechanic/CHANGELOG.md
+++ b/packages/create-mechanic/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 2.0.0-beta.3 - 2022-03-24
+
+### Fixed
+
+- Update script checks that dependency file exist before requiring.
+
 ## 1.2.0 - 2022-02-14
 
 ### Fixed
diff --git a/packages/engine-canvas/CHANGELOG.md b/packages/engine-canvas/CHANGELOG.md
index f62eb80b..4c033a40 100644
--- a/packages/engine-canvas/CHANGELOG.md
+++ b/packages/engine-canvas/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## 2.0.0-beta - 2022-03-24
+## 2.0.0-beta.0 - 2022-03-16
 
 ### Added
 
diff --git a/packages/engine-p5/CHANGELOG.md b/packages/engine-p5/CHANGELOG.md
index e8525f24..3a31889b 100644
--- a/packages/engine-p5/CHANGELOG.md
+++ b/packages/engine-p5/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## 2.0.0-beta - 2022-03-24
+## 2.0.0-beta.0 - 2022-03-16
 
 ### Added
 
diff --git a/packages/engine-react/CHANGELOG.md b/packages/engine-react/CHANGELOG.md
index 28b917d2..9b41119e 100644
--- a/packages/engine-react/CHANGELOG.md
+++ b/packages/engine-react/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## 2.0.0-beta - 2022-03-24
+## 2.0.0-beta.0 - 2022-03-16
 
 ### Added
 
diff --git a/packages/engine-svg/CHANGELOG.md b/packages/engine-svg/CHANGELOG.md
index b5feba85..ce09da37 100644
--- a/packages/engine-svg/CHANGELOG.md
+++ b/packages/engine-svg/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## 2.0.0-beta - 2022-03-24
+## 2.0.0-beta.0 - 2022-03-16
 
 ### Added
 
diff --git a/packages/ui-components/CHANGELOG.md b/packages/ui-components/CHANGELOG.md
index ce78e7c8..299c231f 100644
--- a/packages/ui-components/CHANGELOG.md
+++ b/packages/ui-components/CHANGELOG.md
@@ -7,7 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## 2.0.0-beta - 2022-03-24
+## 2.0.0-beta.4 - 2022-04-14
+
+### Fixed
+
+- Updated width of number value display to `ch` units in slider so it does not overflow
+
+## 2.0.0-beta.3 - 2022-03-24
+
+### Changed
+
+- Button was changed to prevent it to be focused and disabled at the same time.
+- The `common` disabled state was changed to prevent events from triggering behind a disabled element.
+
+## 2.0.0-beta.0 - 2022-03-16
 
 ### Added
 
@@ -18,12 +31,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reset border width in buttons that are both disabled and on focus
 - Updated `html-loader` dependency to match one in `core`
 - Updated PostCSS dependencies: `postcss-loader`and `postcss-preset-env`
-- Button was changed to prevent it to be focused and disabled at the same time.
-- The `common` disabled state was changed to prevent events from triggering behind a disabled element.
-
-### Fixed
-
-- Updated width of number value display to `ch` units in slider so it does not overflow
 
 ## 0.6.4 - 2021-09-14