@corva/ui 0.38.0-5 → 0.38.0-6

package/rollup.config.js

@@ -0,0 +1,124 @@
+import babel from '@rollup/plugin-babel';
+import resolve, { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import { terser } from 'rollup-plugin-terser';
+import cleanup from 'rollup-plugin-cleanup';
+import postcss from 'rollup-plugin-postcss';
+import visualizer from 'rollup-plugin-visualizer';
+import externals from 'rollup-plugin-node-externals';
+import renameNodeModules from 'rollup-plugin-rename-node-modules';
+import injectProcessEnv from 'rollup-plugin-inject-process-env';
+import serve from 'rollup-plugin-serve';
+import livereload from 'rollup-plugin-livereload';
+import postcssImport from 'postcss-import';
+import copy from 'rollup-plugin-copy';
+
+const extensions = ['.js', '.jsx'];
+
+const isLocalBuild = process.env.NODE_ENV === 'local';
+// NOTE: Prod build for npmjs registry
+const isProduction = process.env.NODE_ENV === 'production';
+
+const config = [
+  {
+    input: isLocalBuild
+      ? './src/exampleApp/index.js'
+      : [
+          './src/index.js',
+          './src/CLI/index.js',
+          './src/cjs/devcenter/webpack/DevServerEntryPoint.js',
+          './src/cjs/devcenter/webpack/DevServerIsolatedAppEntryPoint.js',
+        ],
+    plugins: [
+      postcss({
+        extract: false,
+        minimize: isProduction,
+        plugins: [postcssImport()],
+        autoModules: false,
+        modules: {
+          globalModulePaths: [/node_modules/, /global/],
+        },
+      }),
+      // NOTE: This plugin automatically adds all devDeps and peerDeps as externals
+      // Those dependencies will NOT be bundled
+      !isLocalBuild && externals({ deps: true }),
+      babel({
+        exclude: 'node_modules/**',
+        extensions,
+        babelHelpers: 'runtime',
+      }),
+
+      resolve({ browser: true }),
+      commonjs({ include: 'node_modules/**' }),
+      json(),
+      copy({
+        targets: [
+          {
+            src: ['./src/cjs/devcenter/webpack/public'],
+            dest: './dist/cjs/devcenter/webpack/',
+          },
+          {
+            src: './src/styles',
+            dest: './dist',
+          },
+          {
+            src: './src/index.d.ts',
+            dest: './dist',
+          },
+        ],
+      }),
+
+      isLocalBuild && injectProcessEnv({ NODE_ENV: 'development' }),
+      // NOTE: Use terser and cleanup only for production build without active watcher
+      isProduction && terser(),
+      isProduction && cleanup({ comments: false }),
+
+      // NOTE: See https://github.com/rollup/rollup/issues/3684
+      !isLocalBuild && renameNodeModules('ext-esm'),
+
+      isProduction &&
+        visualizer({
+          filename: 'dist/stats.html',
+          gzipSize: true,
+          brotliSize: true,
+        }),
+      isLocalBuild && serve({ open: true, contentBase: ['public', 'dist'], port: 10001 }),
+      isLocalBuild && livereload({ watch: 'dist' }),
+    ],
+    output: {
+      format: 'esm',
+      preserveModules: !isLocalBuild,
+      preserveModulesRoot: 'src',
+      sourcemap: !isProduction,
+      ...(isLocalBuild ? { file: 'dist/bundle.js' } : { dir: 'dist' }),
+    },
+    external: isLocalBuild ? [] : [/@babel\/runtime/],
+    treeshake: true,
+  },
+];
+
+if (!isLocalBuild)
+  config.push({
+    input: './src/cjs/index.js',
+    plugins: [
+      babel({ exclude: 'node_modules/**', extensions, babelHelpers: 'runtime' }),
+      nodeResolve({ preferBuiltins: true, browser: false }),
+      commonjs({
+        include: 'node_modules/**',
+      }),
+      json(),
+      terser(),
+      cleanup({ comments: false }),
+      renameNodeModules('ext-cjs'),
+    ],
+    output: {
+      format: 'cjs',
+      dir: 'dist',
+      exports: 'auto',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  });
+
+export default config;

package/scripts/build.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+rm -rf dist/*
+mkdir -p dist
+cp {LICENSE,README.md,package.json,.npmignore} dist/
+NODE_ENV=$1 rollup -c $2

package/scripts/generateCssThemesVariables.mjs

@@ -0,0 +1,52 @@
+import lodash from 'lodash';
+import fs from 'fs';
+import { lightThemeVariables, darkThemeVariables } from '../src/config/theme/themeVariables.mjs';
+
+const GENERATED_THEME_VARIABLES_OUTPUT_PATH = './src/styles/generatedThemesVariables.global.css';
+
+function flattenObject(obj, prefix = '--', resultObj = {}) {
+  Object.entries(obj).forEach(([key, value]) => {
+    const kebabCasedKey = lodash.kebabCase(key);
+
+    if (lodash.isPlainObject(value)) {
+      flattenObject(value, `${prefix}${kebabCasedKey}-`, resultObj);
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      resultObj[`${prefix}${kebabCasedKey}`] = value;
+    }
+  });
+
+  return resultObj;
+}
+
+function getCssVariablesFromKeyValueMap(keyValueMap) {
+  return Object.entries(keyValueMap).reduce((accum, [key, value]) => {
+    return `${accum}${key}:${value};`;
+  }, '');
+}
+
+function getCssThemesVariables(configs) {
+  return configs.reduce((accum, { themeSelector, themeVariables }) => {
+    const flattenedThemeObj = flattenObject(themeVariables);
+    const cssVariablesString = getCssVariablesFromKeyValueMap(flattenedThemeObj);
+
+    return `${accum}${themeSelector}{${cssVariablesString}}`;
+  }, '');
+}
+
+const cssThemesVariables = getCssThemesVariables([
+  {
+    themeSelector: '[data-corva-theme-light]',
+    themeVariables: lightThemeVariables,
+  },
+  {
+    themeSelector: '[data-corva-theme-dark]',
+    themeVariables: darkThemeVariables,
+  },
+]);
+
+fs.writeFileSync(
+  GENERATED_THEME_VARIABLES_OUTPUT_PATH,
+  `/* This file was fully generated via the the script that uses our MUI theme variables object as a source */
+${cssThemesVariables}`
+);

package/src/CLI/assets/DevCenterLogo.js

@@ -0,0 +1,58 @@
+import { memo } from 'react';
+
+function DevCenterLogo() {
+  return (
+    <svg
+      width="126"
+      height="16"
+      viewBox="0 0 126 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.26083 0.113338H0.38581C0.296207 0.115508 0.210873 0.152064 0.147488 0.215434C0.0841031 0.278803 0.0475255 0.364128 0.045334 0.45373L0 15.6363C0.0014007 15.7283 0.0370538 15.8165 0.0999964 15.8837C0.162939 15.9508 0.248651 15.9921 0.340392 15.9994H8.26083C8.76932 16.0022 9.27334 15.9045 9.74395 15.7118C10.2145 15.5192 10.6424 15.2355 11.0031 14.877C11.3637 14.5185 11.6499 14.0923 11.8453 13.6228C12.0407 13.1533 12.1414 12.6499 12.1416 12.1414V3.97134C12.1414 3.46285 12.0407 2.95941 11.8453 2.48995C11.6499 2.02049 11.3637 1.59427 11.003 1.23577C10.6424 0.877264 10.2145 0.593552 9.74394 0.400929C9.27334 0.208307 8.76932 0.110572 8.26083 0.113338ZM9.10056 12.0506C9.10335 12.3124 9.00215 12.5645 8.81918 12.7518C8.6362 12.939 8.38642 13.0459 8.12466 13.0491H3.33605C3.24646 13.0469 3.16115 13.0104 3.09778 12.947C3.03441 12.8836 2.99785 12.7983 2.99566 12.7087V3.33593C2.99784 3.24634 3.03441 3.16103 3.09777 3.09766C3.16114 3.03429 3.24646 2.99773 3.33605 2.99554H8.1246C8.25303 2.99456 8.38036 3.01914 8.4992 3.06783C8.61804 3.11652 8.72601 3.18835 8.81683 3.27916C8.90765 3.36996 8.9795 3.47792 9.02821 3.59675C9.07692 3.71559 9.10151 3.84292 9.10056 3.97134V12.0506Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M37.7859 0.113939H35.108C35.0287 0.110818 34.9504 0.133437 34.885 0.178419C34.8195 0.223402 34.7704 0.288337 34.7449 0.363536L31.1819 11.325C31.1605 11.3894 31.1194 11.4454 31.0644 11.4851C31.0094 11.5249 30.9433 11.5462 30.8755 11.5462C30.8076 11.5462 30.7415 11.5249 30.6865 11.4851C30.6315 11.4454 30.5904 11.3894 30.5691 11.325L27.006 0.386182C26.9817 0.308456 26.9335 0.240347 26.8684 0.191491C26.8032 0.142634 26.7243 0.115504 26.6429 0.113939H14.1382C14.0487 0.116122 13.9633 0.152686 13.9 0.216055C13.8366 0.279423 13.8 0.36474 13.7979 0.45433V15.6596C13.8 15.7492 13.8366 15.8345 13.9 15.8979C13.9633 15.9612 14.0487 15.9978 14.1382 16H25.6347C25.9307 16 26.1527 15.7787 26.0788 15.4836L25.4127 13.3444C25.374 13.2584 25.3118 13.185 25.2332 13.1328C25.1547 13.0805 25.0629 13.0516 24.9686 13.0494H21.3374L21.3375 13.0497H17.0885C17.0013 13.0526 16.9165 13.0207 16.8527 12.9612C16.7889 12.9016 16.7513 12.8192 16.7481 12.732V9.8498C16.7513 9.76258 16.7889 9.68015 16.8527 9.6206C16.9165 9.56104 17.0013 9.52922 17.0885 9.5321H22.9664C23.056 9.5299 23.1413 9.49333 23.2047 9.42997C23.2681 9.3666 23.3046 9.28129 23.3068 9.19171V6.96761C23.3117 6.92172 23.3062 6.87533 23.2908 6.83183C23.2754 6.78833 23.2505 6.74883 23.2179 6.7162C23.1852 6.68357 23.1457 6.65865 23.1022 6.64325C23.0587 6.62786 23.0123 6.62238 22.9664 6.62722H17.0885C17.0013 6.63009 16.9165 6.59825 16.8527 6.53868C16.7889 6.47912 16.7513 6.39668 16.7481 6.30945V3.33649C16.7503 3.2469 16.7869 3.16159 16.8503 3.09822C16.9136 3.03485 16.999 2.99829 17.0885 2.9961H24.2373C24.3188 2.99769 24.3976 3.02484 24.4628 3.0737C24.528 3.12256 24.5761 3.19067 24.6005 3.2684L28.6854 15.7277C28.6999 15.8023 28.7391 15.8699 28.7968 15.9193C28.8545 15.9687 28.9273 15.9972 29.0032 16H32.7478C32.8237 15.9972 32.8964 15.9687 32.9541 15.9193C33.0118 15.8698 33.051 15.8023 33.0655 15.7277C33.0655 15.7277 38.0583 0.499636 38.0583 0.45433C38.0706 0.413264 38.0728 0.369819 38.0646 0.327728C38.0565 0.285637 38.0382 0.246157 38.0114 0.212679C37.9846 0.179201 37.9501 0.152726 37.9108 0.135527C37.8716 0.118328 37.8287 0.11092 37.7859 0.113939Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M57.9825 11.3019H55.6223C55.5773 11.3011 55.5327 11.3093 55.491 11.3261C55.4493 11.3429 55.4115 11.368 55.3797 11.3997C55.3479 11.4315 55.3229 11.4694 55.3061 11.511C55.2893 11.5527 55.281 11.5974 55.2819 11.6423V12.0508C55.2847 12.3126 55.1835 12.5647 55.0005 12.752C54.8175 12.9392 54.5677 13.0461 54.306 13.0493H50.811C50.5469 13.047 50.2943 12.9411 50.1075 12.7543C49.9207 12.5676 49.8148 12.3149 49.8125 12.0508V3.83544C49.812 3.7082 49.837 3.58216 49.8862 3.46479C49.9353 3.34742 50.0075 3.24113 50.0986 3.15222C50.1896 3.06331 50.2975 2.99359 50.416 2.94722C50.5345 2.90084 50.6611 2.87875 50.7883 2.88225H54.1925C54.3209 2.88129 54.4483 2.90588 54.5671 2.95458C54.6859 3.00329 54.7939 3.07514 54.8847 3.16595C54.9755 3.25676 55.0473 3.36472 55.096 3.48355C55.1447 3.60238 55.1693 3.72971 55.1683 3.85813V4.38014C55.1675 4.42507 55.1757 4.46971 55.1925 4.51139C55.2094 4.55307 55.2344 4.59093 55.2662 4.6227C55.2979 4.65448 55.3358 4.67952 55.3775 4.69633C55.4192 4.71314 55.4638 4.72137 55.5087 4.72053H57.869C57.9139 4.72137 57.9585 4.71314 58.0002 4.69633C58.0419 4.67952 58.0798 4.65448 58.1115 4.6227C58.1433 4.59093 58.1684 4.55307 58.1852 4.51139C58.202 4.46971 58.2102 4.42507 58.2094 4.38014V3.85813C58.2092 3.34963 58.1085 2.84619 57.9131 2.37673C57.7177 1.90727 57.4315 1.48104 57.0709 1.12253C56.7103 0.764021 56.2824 0.480301 55.8118 0.287671C55.3412 0.095041 54.8372 -0.00270228 54.3287 5.6983e-05H50.5614C50.0529 -0.00270599 49.5489 0.0950344 49.0783 0.287662C48.6077 0.48029 48.1798 0.764009 47.8192 1.12252C47.4586 1.48103 47.1723 1.90726 46.977 2.37672C46.7816 2.84619 46.6809 3.34963 46.6807 3.85813V12.1416C46.6809 12.6501 46.7816 13.1536 46.9769 13.6231C47.1723 14.0925 47.4585 14.5188 47.8192 14.8773C48.1798 15.2358 48.6077 15.5195 49.0783 15.7121C49.5489 15.9048 50.0529 16.0025 50.5614 15.9997H54.4422C54.9506 16.0025 55.4547 15.9047 55.9253 15.7121C56.3959 15.5195 56.8238 15.2358 57.1844 14.8773C57.545 14.5187 57.8312 14.0925 58.0266 13.623C58.222 13.1536 58.3227 12.6501 58.3229 12.1416V11.6423C58.3237 11.5974 58.3155 11.5527 58.2987 11.511C58.2819 11.4694 58.2569 11.4315 58.2251 11.3997C58.1933 11.3679 58.1554 11.3429 58.1138 11.3261C58.0721 11.3093 58.0274 11.3011 57.9825 11.3019Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M70.7809 0.113281H60.4322C60.3426 0.115468 60.2573 0.152033 60.1939 0.215401C60.1305 0.278769 60.094 0.364084 60.0918 0.453673V15.659C60.094 15.7486 60.1306 15.8339 60.1939 15.8972C60.2573 15.9606 60.3426 15.9972 60.4322 15.9994H70.7809C70.8705 15.9972 70.9558 15.9606 71.0192 15.8972C71.0825 15.8339 71.1191 15.7486 71.1213 15.659V13.3895C71.1191 13.2999 71.0825 13.2146 71.0192 13.1512C70.9558 13.0878 70.8705 13.0513 70.7809 13.0491H63.3825C63.2953 13.052 63.2104 13.0202 63.1466 12.9606C63.0828 12.901 63.0452 12.8186 63.0421 12.7314V9.84918C63.0452 9.76195 63.0828 9.67953 63.1466 9.61997C63.2104 9.56042 63.2953 9.5286 63.3825 9.53149H69.2604C69.35 9.52929 69.4353 9.49272 69.4987 9.42935C69.562 9.36599 69.5986 9.28068 69.6008 9.19109V6.967C69.6056 6.92111 69.6002 6.87472 69.5848 6.83122C69.5694 6.78772 69.5444 6.74821 69.5118 6.71558C69.4792 6.68295 69.4397 6.65803 69.3962 6.64264C69.3527 6.62724 69.3063 6.62177 69.2604 6.62661H63.3825C63.2953 6.62947 63.2104 6.59763 63.1466 6.53806C63.0828 6.47849 63.0452 6.39606 63.0421 6.30882V3.33588C63.0443 3.24629 63.0809 3.16097 63.1442 3.0976C63.2076 3.03423 63.2929 2.99767 63.3825 2.99549H70.7809C70.8681 2.99835 70.9529 2.96651 71.0168 2.90694C71.0806 2.84737 71.1181 2.76493 71.1213 2.6777V0.453687C71.1191 0.364094 71.0825 0.278774 71.0192 0.215402C70.9558 0.152031 70.8705 0.115465 70.7809 0.113281Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M98.0292 0.113281H82.6953C82.6057 0.115468 82.5204 0.152033 82.457 0.215401C82.3936 0.278769 82.3571 0.364084 82.3549 0.453673V9.39529C82.3582 9.43892 82.3525 9.48278 82.338 9.52407C82.3235 9.56537 82.3006 9.60321 82.2707 9.6352C82.2409 9.6672 82.2047 9.69264 82.1645 9.70994C82.1243 9.72723 82.0809 9.736 82.0372 9.73568C81.9785 9.73658 81.9206 9.72246 81.869 9.69465C81.8174 9.66684 81.7737 9.62628 81.7422 9.57682L75.9097 0.294814C75.8787 0.243079 75.8357 0.199574 75.7844 0.167988C75.733 0.136402 75.6748 0.117665 75.6146 0.113366H73.1636C73.074 0.115549 72.9887 0.152113 72.9254 0.215482C72.862 0.27885 72.8254 0.364167 72.8232 0.453757V15.659C72.8254 15.7486 72.862 15.8339 72.9254 15.8972C72.9887 15.9606 73.074 15.9972 73.1636 15.9994H75.6146C75.7018 15.9962 75.7843 15.9586 75.8438 15.8948C75.9034 15.831 75.9352 15.7462 75.9324 15.659V7.14855C75.9291 7.10491 75.9348 7.06106 75.9493 7.01976C75.9638 6.97847 75.9867 6.94062 76.0165 6.90863C76.0464 6.87664 76.0826 6.85119 76.1228 6.83389C76.163 6.8166 76.2063 6.80783 76.2501 6.80815C76.3087 6.80725 76.3666 6.82138 76.4183 6.84919C76.4699 6.87699 76.5136 6.91756 76.5451 6.96701L81.901 15.7724C81.9418 15.8441 82.0014 15.9031 82.0735 15.9432C82.1455 15.9832 82.2272 16.0027 82.3095 15.9994H85.1463C85.2335 15.9963 85.316 15.9587 85.3755 15.8949C85.4351 15.8311 85.4669 15.7463 85.464 15.659V3.06351H90.1316C90.2188 3.06064 90.3036 3.09248 90.3674 3.15205C90.4312 3.21162 90.4688 3.29405 90.4719 3.38128V15.659C90.469 15.7462 90.5009 15.8311 90.5605 15.8949C90.6201 15.9587 90.7025 15.9963 90.7898 15.9994H93.3316C93.4188 15.9962 93.5012 15.9586 93.5607 15.8948C93.6203 15.831 93.6521 15.7462 93.6492 15.659V3.38128C93.6576 3.29191 93.6999 3.20914 93.7675 3.15002C93.835 3.09091 93.9227 3.05995 94.0124 3.06351H98.0292C98.1188 3.06134 98.2042 3.02479 98.2676 2.96142C98.3309 2.89805 98.3675 2.81272 98.3697 2.72312V0.453687C98.3675 0.364074 98.331 0.278738 98.2676 0.215363C98.2042 0.151989 98.1188 0.115437 98.0292 0.113281Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M110.284 0.113281H99.9351C99.8455 0.115465 99.7602 0.152029 99.6968 0.215397C99.6335 0.278766 99.5969 0.364083 99.5947 0.453673V15.659C99.5969 15.7486 99.6335 15.8339 99.6969 15.8972C99.7602 15.9606 99.8455 15.9972 99.9351 15.9994H110.284C110.373 15.9972 110.459 15.9606 110.522 15.8972C110.586 15.8339 110.622 15.7486 110.624 15.659V13.3895C110.622 13.2999 110.586 13.2146 110.522 13.1512C110.459 13.0878 110.373 13.0513 110.284 13.0491H102.885C102.798 13.052 102.713 13.0202 102.65 12.9606C102.586 12.901 102.548 12.8186 102.545 12.7314V9.84918C102.548 9.76195 102.586 9.67952 102.65 9.61997C102.713 9.56042 102.798 9.5286 102.885 9.53149H108.763C108.853 9.52929 108.938 9.49272 109.002 9.42935C109.065 9.36599 109.102 9.28068 109.104 9.19109V6.967C109.109 6.92111 109.103 6.87472 109.088 6.83122C109.072 6.78772 109.047 6.74821 109.015 6.71558C108.982 6.68295 108.943 6.65803 108.899 6.64263C108.856 6.62724 108.809 6.62176 108.763 6.62661H102.885C102.798 6.62947 102.713 6.59763 102.65 6.53806C102.586 6.47849 102.548 6.39606 102.545 6.30882V3.33588C102.547 3.24629 102.584 3.16097 102.647 3.0976C102.711 3.03423 102.796 2.99767 102.885 2.99549H110.284C110.371 2.99835 110.456 2.96651 110.52 2.90694C110.584 2.84737 110.621 2.76493 110.624 2.6777V0.453687C110.622 0.364094 110.586 0.278774 110.522 0.215402C110.459 0.152031 110.373 0.115465 110.284 0.113281Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M125.375 15.6817L122.743 11.2109C124.195 10.7343 125.012 9.3726 125.012 7.64787V3.97134C125.012 3.46285 124.911 2.95941 124.716 2.48995C124.521 2.02049 124.234 1.59427 123.874 1.23577C123.513 0.877267 123.085 0.593555 122.615 0.400933C122.144 0.20831 121.64 0.110574 121.132 0.113338H112.825C112.736 0.115508 112.65 0.152064 112.587 0.215433C112.524 0.278803 112.487 0.364128 112.485 0.45373L112.439 15.6363C112.441 15.7284 112.477 15.8166 112.539 15.8837C112.602 15.9509 112.688 15.9921 112.78 15.9994H115.276C115.366 15.9973 115.451 15.9607 115.515 15.8973C115.578 15.834 115.615 15.7486 115.617 15.6591V3.58552C115.619 3.49592 115.655 3.41061 115.719 3.34725C115.782 3.28388 115.868 3.24732 115.957 3.24513H120.859C120.988 3.24418 121.115 3.26877 121.234 3.31748C121.353 3.36619 121.461 3.43804 121.551 3.52885C121.642 3.61966 121.714 3.72763 121.763 3.84645C121.811 3.96528 121.836 4.09261 121.835 4.22102V7.48901C121.838 7.75075 121.737 8.00291 121.554 8.19013C121.371 8.37735 121.121 8.48431 120.859 8.48754H118.022C117.931 8.48327 117.841 8.50711 117.764 8.55583C117.687 8.60454 117.626 8.67579 117.591 8.75991L116.888 10.757C116.859 10.8274 116.849 10.9036 116.857 10.979C116.865 11.0543 116.892 11.1265 116.934 11.1893C116.977 11.252 117.034 11.3033 117.101 11.3387C117.168 11.3742 117.243 11.3926 117.319 11.3924H119.339C119.399 11.3949 119.458 11.4129 119.51 11.4447C119.562 11.4765 119.604 11.521 119.634 11.574L119.861 11.9371L122.13 15.7044C122.171 15.7904 122.236 15.8634 122.316 15.9154C122.396 15.9675 122.489 15.9965 122.584 15.9994H125.126C125.166 16.0049 125.207 15.9998 125.245 15.9844C125.283 15.9691 125.316 15.9442 125.342 15.9121C125.367 15.88 125.383 15.8418 125.389 15.8014C125.395 15.761 125.39 15.7198 125.375 15.6817Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export default memo(DevCenterLogo);

package/src/CLI/components/App/App.css

@@ -0,0 +1,22 @@
+.app {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  touch-action: manipulation;
+}
+
+.appContent {
+  padding: 10px;
+  flex-grow: 1;
+  position: relative;
+}
+
+.pdfAppContent {
+  padding: 30px 0;
+  background-color: white;
+}
+
+.lightAppContent {
+  background-color: white;
+  color: black;
+}

package/src/CLI/components/App/App.js

@@ -0,0 +1,70 @@
+import { useReducer, useEffect } from 'react';
+import classNames from 'classnames';
+import { MuiThemeProvider } from '@material-ui/core';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import MomentUtils from '@date-io/moment';
+import moment from 'moment';
+
+import { isPDFReportView } from '~/CLI/hocs/utils';
+import { NotificationsContainer } from '~/components';
+import { THEMES } from '~/constants/theme';
+import { darkTheme, lightTheme } from '~/config/theme';
+import { setThemeVariables } from '~/utils/themeVariables';
+
+import { LOGIN_ROUTE_REG_EXP } from '../../constants';
+import { AppBar } from './components';
+import { AuthContext } from '../../context';
+import { useProvideAuth } from '../../hocs/effects';
+import { LOCAL_STORAGE_APP_THEME_KEY } from '../../hocs/constants';
+
+import styles from './App.css';
+
+// eslint-disable-next-line react/prop-types
+function App({ children, router }) {
+  const auth = useProvideAuth(router);
+  const isAppReady = !LOGIN_ROUTE_REG_EXP.test(router.location.pathname) && !auth.loading;
+
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  const selectedTheme = localStorage.getItem(LOCAL_STORAGE_APP_THEME_KEY) ?? THEMES.DARK;
+
+  // Force dark theme for login page. Force light theme for PDF reports view
+  const isDarkTheme = !isAppReady || (!isPDFReportView && selectedTheme === THEMES.DARK);
+
+  useEffect(() => setThemeVariables(isDarkTheme), [isDarkTheme]);
+
+  const toggleTheme = () => {
+    localStorage.setItem(LOCAL_STORAGE_APP_THEME_KEY, isDarkTheme ? THEMES.LIGHT : THEMES.DARK);
+    forceUpdate(); // NOTE: Force update to rerender the app with next theme
+  };
+
+  return (
+    <AuthContext.Provider value={auth}>
+      <MuiThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+        <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
+          <>
+            {!isAppReady && children}
+
+            {isAppReady && (
+              <div className={styles.app}>
+                <NotificationsContainer />
+                <AppBar toggleTheme={toggleTheme} />
+                <div
+                  className={classNames(
+                    styles.appContent,
+                    isPDFReportView && styles.pdfAppContent,
+                    !isDarkTheme && styles.lightAppContent
+                  )}
+                >
+                  {children}
+                </div>
+              </div>
+            )}
+          </>
+        </MuiPickersUtilsProvider>
+      </MuiThemeProvider>
+    </AuthContext.Provider>
+  );
+}
+
+export default App;

package/src/CLI/components/App/components/AppBar/AppBar.js

@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  AppBar as AppBarComponent,
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Tooltip,
+  Typography,
+  makeStyles,
+  useTheme,
+} from '@material-ui/core';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+
+import SwitchControl from '~/components/SwitchControl';
+import DevCenterLogo from '~/CLI/assets/DevCenterLogo';
+import { useAuth } from '~/CLI/context';
+import { isPDFReportView } from '~/CLI/hocs/utils';
+import { LOCAL_STORAGE_PDF_REPORT_VIEW_KEY } from '~/CLI/hocs/constants';
+
+const PAGE_NAME = 'AppBar';
+
+const useStyles = makeStyles(_theme => ({
+  grow: { flexGrow: 1 },
+  flex: { display: 'flex' },
+  appBar: { backgroundColor: 'rgb(30, 31, 31)' },
+  iconButtonRoot: { borderRadius: 'unset' },
+  userProfileIcon: { marginLeft: 4 },
+  headerControl: { marginRight: 32 },
+  formControlLabel: { fontSize: 14 },
+}));
+
+const MENU_ID = 'app-bar-menu';
+
+function AppBar({ toggleTheme }) {
+  const classes = useStyles();
+  const { user, logout } = useAuth();
+  const theme = useTheme();
+
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const isMenuOpen = Boolean(anchorEl);
+
+  const handleProfileMenuOpen = event => setAnchorEl(event.currentTarget);
+  const handleMenuClose = () => setAnchorEl(null);
+  const handleLogout = () => {
+    logout();
+    handleMenuClose();
+  };
+  const userInitials = `${user?.first_name?.[0]}${user?.last_name?.[0]}`.toUpperCase();
+
+  const togglePDFReportView = e => {
+    localStorage.setItem(LOCAL_STORAGE_PDF_REPORT_VIEW_KEY, e.target.checked);
+    window.location.reload();
+  };
+
+  return (
+    <div>
+      <AppBarComponent position="static" className={classes.appBar}>
+        <Toolbar>
+          <DevCenterLogo />
+          <div className={classes.grow} />
+          <FormControlLabel
+            control={
+              <Checkbox
+                data-testid={`${PAGE_NAME}_pdfReport`}
+                checked={isPDFReportView}
+                size="small"
+                onChange={togglePDFReportView}
+              />
+            }
+            label="PDF report view"
+            classes={{ label: classes.formControlLabel }}
+            className={classes.headerControl}
+          />
+
+          {!isPDFReportView && (
+            <Tooltip
+              title="Switch to light theme to tune your app for PDF reports"
+              placement="bottom"
+            >
+              <div>
+                <SwitchControl
+                  data-testid={`${PAGE_NAME}_themeSwitch`}
+                  className={classes.headerControl}
+                  leftLabel="Dark Theme"
+                  rightLabel="Light Theme"
+                  onChange={toggleTheme}
+                  checked={theme.isLightTheme}
+                  size="small"
+                  title=""
+                />
+              </div>
+            </Tooltip>
+          )}
+          <div>
+            <IconButton
+              edge="end"
+              aria-label="account of current user"
+              aria-controls={MENU_ID}
+              aria-haspopup="true"
+              onClick={handleProfileMenuOpen}
+              color="inherit"
+              className={classes.iconButtonRoot}
+            >
+              <div className={classes.flex}>
+                <Typography data-testid={`${PAGE_NAME}_userInitials`}>{userInitials}</Typography>
+                <AccountCircle className={classes.userProfileIcon} />
+              </div>
+            </IconButton>
+          </div>
+        </Toolbar>
+      </AppBarComponent>
+      <Menu
+        data-testid={`${PAGE_NAME}_userDropdown`}
+        anchorEl={anchorEl}
+        id={MENU_ID}
+        keepMounted
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={isMenuOpen}
+        onClose={handleMenuClose}
+      >
+        <MenuItem data-testid={`${PAGE_NAME}_signOutMenuItem`} onClick={handleLogout}>
+          Sign Out
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+}
+
+AppBar.propTypes = {
+  toggleTheme: PropTypes.func.isRequired,
+};
+
+export default AppBar;

package/src/CLI/components/App/components/AppBar/index.js

@@ -0,0 +1 @@
+export { default } from './AppBar';

package/src/CLI/components/App/components/index.js

@@ -0,0 +1 @@
+export { default as AppBar } from './AppBar';

package/src/CLI/components/App/index.js

@@ -0,0 +1 @@
+export { default } from './App';

package/src/CLI/components/index.js

@@ -0,0 +1 @@
+export { default as App } from './App';

package/src/CLI/constants/index.js

@@ -0,0 +1,3 @@
+export const LOGIN_ROUTE_REG_EXP = new RegExp('^/login.*$');
+
+export const NEED_HELP_EXTERNAL_LINK = 'https://app.corva.ai/login/help';

package/src/CLI/context/auth.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react';
+
+export const AuthContext = createContext();
+export const useAuth = () => useContext(AuthContext);

package/src/CLI/context/index.js

@@ -0,0 +1 @@
+export { useAuth, AuthContext } from './auth';

package/src/CLI/hocs/constants.js

@@ -0,0 +1,2 @@
+export const LOCAL_STORAGE_APP_THEME_KEY = 'APP_THEME';
+export const LOCAL_STORAGE_PDF_REPORT_VIEW_KEY = 'PDF_REPORT_VIEW';

package/src/CLI/hocs/effects/index.js

@@ -0,0 +1 @@
+export { default as useProvideAuth } from './useProvideAuth';

package/src/CLI/hocs/effects/useProvideAuth.js

@@ -0,0 +1,89 @@
+import { useEffect, useState, useRef } from 'react';
+
+import { get } from 'lodash';
+import Auth from '~/clients/auth0';
+
+import { post } from '~/clients/api/apiCore';
+import * as jsonApi from '~/clients/jsonApi';
+import { updateUserUnits } from '~/utils/convert';
+import { LOGIN_ROUTE_REG_EXP } from '../../constants';
+
+const patchEnvFile = options =>
+  fetch('/dotenv', {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options),
+  });
+
+function useProvideAuth(router) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const auth0Ref = useRef();
+
+  if (!auth0Ref.current) auth0Ref.current = new Auth();
+
+  async function fetchCurrentUser() {
+    setLoading(true);
+
+    const currentUser = await jsonApi.getCurrentUser();
+
+    if (!currentUser) {
+      router.push('/login');
+    } else {
+      setUser(currentUser);
+      updateUserUnits({
+        userUnits: currentUser.unit_system,
+        companyUnits: get(currentUser, 'company.unit_system'),
+      });
+    }
+
+    setLoading(false);
+  }
+
+  // eslint-disable-next-line consistent-return
+  const login = async (credentials, onFinishLogin) => {
+    try {
+      setError(null);
+      setLoading(true);
+      const response = await post('/v1/user_token', { auth: credentials });
+      patchEnvFile({ AUTH_TOKEN: response.jwt });
+
+      // NOTE: Set jwt token to localStorage
+    } catch (e) {
+      console.error(e);
+      setLoading(false);
+      return setError('Wrong user name or password');
+    }
+    fetchCurrentUser().then(onFinishLogin);
+  };
+
+  const logout = async () => {
+    patchEnvFile({ AUTH_TOKEN: '' });
+    await jsonApi.logout();
+    router.push('/login');
+  };
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    const isLoginPage = LOGIN_ROUTE_REG_EXP.test(router.location.pathname);
+
+    if (isLoginPage) {
+      return setLoading(false);
+    }
+
+    // NOTE: Token found. Try fetching current user to check if the token is valid
+    fetchCurrentUser();
+  }, []);
+
+  return {
+    user,
+    loading,
+    error,
+    login,
+    logout,
+    auth0: auth0Ref.current,
+  };
+}
+
+export default useProvideAuth;

package/src/CLI/hocs/utils.js

@@ -0,0 +1,28 @@
+import { DEFAULT_APP_SIZE } from '~/constants/apps';
+
+import { LOCAL_STORAGE_PDF_REPORT_VIEW_KEY } from './constants';
+
+export function getLocalAppData(appKey) {
+  return JSON.parse(localStorage.getItem(appKey)) || {};
+}
+
+export function updateLocalAppData(appKey, newData) {
+  const localAppData = getLocalAppData(appKey) || {};
+  localStorage.setItem(appKey, JSON.stringify({ ...localAppData, ...newData }));
+}
+
+export const isPDFReportView = JSON.parse(
+  localStorage.getItem(LOCAL_STORAGE_PDF_REPORT_VIEW_KEY) || 'false'
+);
+
+export const getAppCoordinates = manifest => {
+  const INITIAL_SIZE = manifest?.application?.ui?.initial_size ?? DEFAULT_APP_SIZE;
+
+  return (
+    getLocalAppData(manifest?.application?.key).coordinates || {
+      ...INITIAL_SIZE,
+      x: 0,
+      y: 0,
+    }
+  );
+};