fix: sign up throwing error when a secret (salt) was provided but inv…

…alid fix: dashboard runtime imports to improve compilation time fix: improvements to tailwind dashboard helpers to generate styles
jairmilanes · Dec 20, 2022 · 4412032 · 4412032
1 parent d8793c2
commit 4412032
Show file tree

Hide file tree

Showing 24 changed files with 27,650 additions and 29,185 deletions.
diff --git a/src/client/_default_views/_sign-in.hbs b/src/client/_default_views/_sign-in.hbs
@@ -15,7 +15,7 @@
           />
           Hotbars
         </a>
-        {{#embed "_card" title=(i "auth.signIn")}}
+        {{#embed "_card" title=(i "auth.signIn") size="full"}}
           {{#content "body"}}
             <form
               class="space-y-4 md:space-y-6"

diff --git a/src/client/_helpers/attr.js b/src/client/_helpers/attr.js
@@ -9,3 +9,4 @@ module.exports = function (options) {
     return str;
   }, "");
 };
+
diff --git a/src/client/_helpers/index.js b/src/client/_helpers/index.js
@@ -1,3 +1,3 @@
 const tailwind = require("./tailwind");
 
-module.exports.button = tailwind.button;
+module.exports = { tailwind };
diff --git a/src/client/_helpers/tailwind.js b/src/client/_helpers/tailwind.js
@@ -1,5 +1,5 @@
-const requireFresh = require("../_lib/require-fresh")(require);
-const components = requireFresh("../_lib/tailwind");
+// const requireFresh = require("../_lib/require-fresh")(require);
+const components = require("../_lib/tailwind");
 
 const tailwind = module.exports;
 
@@ -22,6 +22,8 @@ tailwind._position = function (position) {
 };
 
 tailwind._button = function (options) {
+  options.hash = options.hash || {};
+
   if (options.hash.color && !options.hash.bg) {
     options.hash.bg = options.hash.color;
   }
@@ -45,7 +47,17 @@ tailwind._input = function (options) {
   return components._input(props);
 };
 
+tailwind._card = function (options) {
+  return components._card(options.hash)
+}
+
+tailwind._cardBody = function (options) {
+  return components._card.body(options.hash);
+}
+
 tailwind._alert = function (options) {
+  options.hash = options.hash || {}
+
   if (options.hash.color && !options.bg) {
     options.hash.bg = options.hash.color;
   }

diff --git a/src/client/_layouts/_default.hbs b/src/client/_layouts/_default.hbs
@@ -12,13 +12,13 @@
     {{#embed "_tailwind-config" }}{{/embed}}
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
-  <body class="bg-slate-200 dark:bg-neutral-800 text-slate-800 dark:text-slate-100 flex flex-col overflow-hidden h-full">
+  <body class="text-slate-800 dark:text-slate-50 bg-gray-100 dark:bg-gray-900 flex flex-col overflow-hidden h-full">
     {{> "_header"}}
 
     <main class="px-5 pb-5 flex-auto flex flex-col {{#if scroll}}overflow-y-scroll{{else}}overflow-hidden{{/if}}">
-      <section class="container mx-auto grid grid-cols-1 py-5">
+      <section class="container mx-auto grid grid-cols-1 py-8">
         {{#if title}}
-          {{> "_heading" size="h3" text=title margin="0" }}
+          {{> "_heading" size="h2" text=title margin="5"}}
         {{/if}}
         {{#block "hero"}}{{/block}}
       </section>

diff --git a/src/client/_lib/clb.js b/src/client/_lib/clb.js
@@ -1,4 +1,5 @@
 const clsx = require("clsx");
+const isObject = (value) => value !== null && typeof value === "object";
 const isBoolean = (maybeBoolean) => typeof maybeBoolean === "boolean";
 const toStringIfBoolean = (value) => (isBoolean(value) ? String(value) : value);
 const isSimpleSubset = (a, b) =>
@@ -7,24 +8,82 @@ const isSimpleSubset = (a, b) =>
 /**
  * Removes undefined values recursively.
  */
-const normalize = (obj, values) => {
-  return JSON.parse(
-    JSON.stringify(obj, function (key, value) {
-      if (!/^_/.test(key) && value === undefined) {
-        return null;
+const normalize = (obj, cb = (k, v) => v) => {
+  return Object.keys(obj)
+    .reduce((result, key) => {
+      if (!/^_/.test(key) && obj[key] === undefined) {
+        return result;
       }
 
-      if (values && typeof value === "string") {
-        const props = Object.keys(values);
-        value = props.reduce((val, prop) => {
-          return val.replace(new RegExp(`%${prop}`, "g"), values[prop]);
-        }, value);
+      if (obj[key] !== null && typeof obj[key] === "object") {
+        const value = cb(key, obj[key]);
+
+        if (value !== undefined) {
+          result[key] = normalize(obj[key], cb);
+        }
+
+        return result;
+      }
+
+      if (/^_/.test(key) && !obj[key]) {
+        return result;
       }
 
-      return /^_/.test(key) && !value ? void 0 : value;
-    }).replace(/null/g, '"undefined"')
+      result[key] = toStringIfBoolean(obj[key]);
+
+      return result;
+    }, {});
+}
+
+const transpile = (classes, values) => {
+  if (typeof classes === "string") {
+    const props = Object.keys(values);
+    classes = props.reduce((val, prop) => {
+      return val.replace(new RegExp(`%${prop}`, "g"), values[prop]);
+    }, classes);
+  }
+  return classes;
+}
+
+const partialPrefixed = (key, val, options) => {
+  if (options.partial) {
+    if (key in options) {
+      return `${options.partial}:${val}`;
+    }
+
+    return undefined;
+  }
+
+  return val;
+}
+
+const themeOption = (themeKey, option, variants) => {
+  const { style } = variants;
+  const themes = ['dark', 'light'];
+
+  // Select theme from style variant if configured
+  if (isObject(variants[themeKey][style])) {
+    return themes.map(
+      theme => variants[themeKey][style][theme]
+    );
+  }
+
+  // Select theme from option
+  if (variants[themeKey][option]) {
+    if (isObject(variants[themeKey][option])) {
+      return themes.map(
+        theme => variants[themeKey][option][theme]
+      );
+    }
+
+    return variants[themeKey][option];
+  }
+
+  // Default behavior, return both themes
+  return themes.map(
+    theme => variants[themeKey][theme]
   );
-};
+}
 
 const clb =
   (schema = {}) =>
@@ -38,58 +97,77 @@ const clb =
     } = schema;
 
     const currentOptions = normalize({
-      ...defaults,
       ...defaultVariants,
+      ...defaults,
       ...options,
     });
 
-    const normalized = normalize(variants, currentOptions);
+    const normalized = normalize(variants,  (key, value) => {
+      if (!options.partial) {
+        return value;
+      }
+
+      if (key in options) {
+        return value;
+      }
+
+      return undefined;
+    });
+
+    const variantNames = Object.keys(normalized);
 
-    const keys = Object.keys(normalized);
+    const sets = [];
 
-    return clsx([
-      base,
-      keys.map((variantName) => {
-        const choice = toStringIfBoolean(currentOptions[variantName]);
-
-        if (variantName === "theme") {
-          const { style } = currentOptions;
-
-          if (
-            normalized["theme"][style] &&
-            typeof normalized["theme"][style] !== "string"
-          ) {
-            return [
-              normalized["theme"][style]["dark"],
-              normalized["theme"][style]["light"],
-            ];
-          }
-
-          if (normalized["theme"][choice]) {
-            if (typeof normalized["theme"][choice] !== "string") {
-              return [
-                normalized["theme"][choice]["dark"],
-                normalized["theme"][choice]["light"],
-              ];
-            }
-            return normalized["theme"][choice];
-          }
-
-          return [normalized["theme"]["dark"], normalized["theme"]["light"]];
+    if (!options.partial) {
+      sets.push(base);
+    }
+
+    variantNames.forEach((variantName) => {
+      const option = currentOptions[variantName];
+      const variant = normalized[variantName];
+
+      if (variantName === "theme") {
+        sets.push(themeOption(variantName, option, normalized));
+      } else {
+        sets.push(partialPrefixed(
+          variantName,
+          variant[option],
+          options
+        ));
+      }
+    });
+
+    const compounds = compoundVariants.reduce(
+      (list, { classes, ...compoundVariantOptions }) => {
+        if (isSimpleSubset(compoundVariantOptions, currentOptions)) {
+          list.push(classes);
         }
+        return list;
+      },
+      []
+    );
+
+    if (compounds.length) {
+      sets.push(compounds);
+    }
+
+    return clsx(sets.reduce((results, line) => {
+      if (!line) {
+        return results;
+      }
+
+      if (Array.isArray(line)) {
+        line
+          .filter(ln => !!ln && typeof ln === "string")
+          .forEach(ln => results.push(transpile(ln, currentOptions)));
+
+        return results;
+      }
+
+      results.push(transpile(line, currentOptions));
 
-        return normalized[variantName][choice];
-      }),
-      compoundVariants.reduce(
-        (list, { classes, ...compoundVariantOptions }) => {
-          if (isSimpleSubset(compoundVariantOptions, currentOptions)) {
-            list.push(classes);
-          }
-          return list;
-        },
-        []
-      ),
-    ]);
+      return results;
+    }, []));
   };
 
 module.exports = clb;
diff --git a/src/client/_lib/require-fresh.js b/src/client/_lib/require-fresh.js
@@ -1,4 +1,8 @@
 module.exports = (req) => {
+  if (!process.env.HOTBARS_DEV) {
+    return req;
+  }
+
   return function requireFresh(module) {
     if (process.env.HOTBARS_DEV) {
       delete req.cache[req.resolve(module)];
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,4 @@ module.exports = function (options) {
		return str;
		}, "");
		};