Add Color module

docs/_react/bulma-customizer/src/App.jsx

@@ -1,54 +1,44 @@
 import { createContext, useEffect, useState } from "react";
+import classNames from "classnames";
+
+import Colors from "./pages/Colors";
+
+import { CSSVAR_KEYS, SUFFIX_TO_KIND } from "./constants";
+import { unslug } from "./utils";
 
 import "../../../../css/bulma.css";
-import cn from "./App.module.css";
+import Scheme from "./pages/Scheme";
 
-import Color from "./components/Color";
-
-const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
-
-const KEYS = [
-  "scheme-h",
-  "primary-h",
-  "primary-s",
-  "primary-l",
-  "link-h",
-  "link-s",
-  "link-l",
-  "info-h",
-  "info-s",
-  "info-l",
-  "success-h",
-  "success-s",
-  "success-l",
-  "warning-h",
-  "warning-s",
-  "warning-l",
-  "danger-h",
-  "danger-s",
-  "danger-l",
-  "skeleton-lines-gap",
-];
 const UNITS = ["deg", "rem", "em", "%"];
-const SUFFIX_TO_KIND = {
-  "-h": "hue",
-  "-s": "saturation",
-  "-l": "lightness",
-  "-gap": "gap",
+const PAGE_TO_COMPONENT = {
+  colors: <Colors />,
+  scheme: <Scheme />,
 };
+const PAGE_IDS = ["scheme", "colors"];
 
 export const CustomizerContext = createContext({
   cssvars: {},
+  currentPage: "",
   getVar: () => {},
+  changeTab: () => {},
   updateVar: () => {},
 });
 
 function App() {
   const initialContext = {
     cssvars: {},
+    currentPage: "colors",
     getVar: (id) => {
       return context.cssvars[id];
     },
+    changeTab: (pageId) => {
+      setContext((context) => {
+        return {
+          ...context,
+          currentPage: pageId,
+        };
+      });
+    },
     updateVar: (id, newValue) => {
       setContext((context) => {
         const { start, unit } = context.cssvars[id];
@@ -78,12 +68,18 @@ function App() {
   };
   const [context, setContext] = useState(initialContext);
 
+  const handleTabChange = (event, pageId) => {
+    event.preventDefault();
+    context.changeTab(pageId);
+  };
+
   useEffect(() => {
     const rootStyle = window.getComputedStyle(document.documentElement);
 
     const cssvars = {};
+    const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat();
 
-    KEYS.map((key) => {
+    allKeys.map((key) => {
       const original = rootStyle.getPropertyValue(`--bulma-${key}`);
       const suffix = Object.keys(SUFFIX_TO_KIND).find((kind) =>
         key.endsWith(kind),
@@ -109,43 +105,28 @@ function App() {
     });
   }, []);
 
-  // useEffect(() => {
-  //   Object.values(context.cssvars).forEach((cssvar) => {
-  //     const { id, current, unit } = cssvar;
-  //     const computedValue = `${current}${unit}`;
-
-  //     document.documentElement.style.setProperty(
-  //       `--bulma-${id}`,
-  //       computedValue,
-  //     );
-  //   });
-  // }, [context.cssvars]);
-
-  // useEffect(() => {
-  //   const computedValue = `${current}${unit}`;
-
-  //   if (current === start) {
-  //     document.documentElement.style.removeProperty(`--bulma-${id}`);
-  //   } else {
-  //     document.documentElement.style.setProperty(
-  //       `--bulma-${id}`,
-  //       computedValue,
-  //     );
-  //   }
-  // }, [id, start, unit, value]);
-
   return (
     <CustomizerContext.Provider value={context}>
       <section className="section">
-        <div className="card">
-          <div className="card-content">
-            <div className={cn.colors}>
-              {COLORS.map((color) => {
-                return <Color key={color} color={color} />;
-              })}
-            </div>
-          </div>
+        <div className="buttons">
+          {PAGE_IDS.map((pageId) => {
+            const buttonClass = classNames({
+              button: true,
+            });
+
+            return (
+              <button
+                className={buttonClass}
+                key={pageId}
+                onClick={(e) => handleTabChange(e, pageId)}
+              >
+                {unslug(pageId)}
+              </button>
+            );
+          })}
         </div>
+
+        {PAGE_TO_COMPONENT[context.currentPage]}
       </section>
     </CustomizerContext.Provider>
   );

docs/_react/bulma-customizer/src/App.module.css

@@ -1,2 +0,0 @@
-.colors {
-}

docs/_react/bulma-customizer/src/components/Color.jsx

@@ -202,9 +202,19 @@ function Color({ color }) {
           <p>{name}</p>
         </div>
 
-        <button className="button is-small" onClick={handleHexInput}>
-          Enter a Hex code
-        </button>
+        <div className="buttons are-small">
+          <button className="button" onClick={handleHexInput}>
+            Enter a Hex code
+          </button>
+
+          <button
+            className="button"
+            onClick={handleReset}
+            disabled={isDisabled}
+          >
+            Reset
+          </button>
+        </div>
 
         <div className="is-hidden field has-addons">
           <p className="control">
@@ -273,9 +283,6 @@ function Color({ color }) {
 
       <div className={cn.side}>
         <button className={`button is-${color}`}>{name}</button>
-        <button className="button" onClick={handleReset} disabled={isDisabled}>
-          Reset
-        </button>
       </div>
     </div>
   );

docs/_react/bulma-customizer/src/components/Color.module.css

@@ -3,7 +3,7 @@
   flex-wrap: wrap;
   gap: 1.5rem;
   border-bottom: 1px solid var(--bulma-border);
-  padding: 1.25rem;
+  padding: 1.25rem 0;
 }
 
 .side {

docs/_react/bulma-customizer/src/components/Slider.jsx

@@ -10,6 +10,7 @@ const RANGES = {
   saturation: [0, 100, 1],
   lightness: [0, 100, 1],
   gap: [0, 100, 1],
+  delta: [0, 100, 1],
   any: [0, 100, 1],
 };
 
@@ -28,7 +29,7 @@ const valueToX = (value, width, min, max) => {
 function Slider({ id, color, kind }) {
   const { cssvars, updateVar } = useContext(CustomizerContext);
   const { start, current } = cssvars[id];
-  const [min, max] = RANGES[kind];
+  const [min, max] = kind ? RANGES[kind] : RANGES.any;
 
   const sliderRef = useRef(null);
   const handleRef = useRef(null);
@@ -129,11 +130,13 @@ function Slider({ id, color, kind }) {
     [cn[kind]]: true,
   });
 
-  const mainStyle = {
-    "--h": `var(--bulma-${color}-h)`,
-    "--s": `var(--bulma-${color}-s)`,
-    "--l": `var(--bulma-${color}-l)`,
-  };
+  const mainStyle = color
+    ? {
+        "--h": `var(--bulma-${color}-h)`,
+        "--s": `var(--bulma-${color}-s)`,
+        "--l": `var(--bulma-${color}-l)`,
+      }
+    : {};
 
   const handleStyle = {
     transform: `translateX(${x}px)`,

docs/_react/bulma-customizer/src/constants.js

@@ -0,0 +1,51 @@
+export const SUFFIX_TO_KIND = {
+  "-h": "hue",
+  "-s": "saturation",
+  "-l": "lightness",
+  "-gap": "gap",
+  "-delta": "delta",
+};
+
+export const CSSVAR_KEYS = {
+  scheme: [
+    "scheme-h",
+    "scheme-s",
+    "light-l",
+    "light-invert-l",
+    "dark-l",
+    "dark-invert-l",
+    "soft-l",
+    "bold-l",
+    "soft-invert-l",
+    "bold-invert-l",
+    "hover-background-l-delta",
+    "active-background-l-delta",
+    "hover-border-l-delta",
+    "active-border-l-delta",
+    "hover-color-l-delta",
+    "active-color-l-delta",
+    "hover-shadow-a-delta",
+    "active-shadow-a-delta",
+  ],
+  colors: [
+    "primary-h",
+    "primary-s",
+    "primary-l",
+    "link-h",
+    "link-s",
+    "link-l",
+    "info-h",
+    "info-s",
+    "info-l",
+    "success-h",
+    "success-s",
+    "success-l",
+    "warning-h",
+    "warning-s",
+    "warning-l",
+    "danger-h",
+    "danger-s",
+    "danger-l",
+    "skeleton-lines-gap",
+  ],
+};

docs/_react/bulma-customizer/src/pages/Colors.jsx

@@ -0,0 +1,15 @@
+import Color from "../components/Color";
+
+const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
+
+function Colors() {
+  return (
+    <div>
+      {COLORS.map((color) => {
+        return <Color key={color} color={color} />;
+      })}
+    </div>
+  );
+}
+
+export default Colors;

docs/_react/bulma-customizer/src/pages/Scheme.jsx

@@ -0,0 +1,16 @@
+import Slider from "../components/Slider";
+import { CSSVAR_KEYS } from "../constants";
+
+function Scheme() {
+  const schemeIds = CSSVAR_KEYS.scheme;
+
+  return (
+    <div>
+      {schemeIds.map((schemeId) => {
+        return <Slider key={schemeId} id={schemeId} />;
+      })}
+    </div>
+  );
+}
+
+export default Scheme;

docs/_react/bulma-customizer/src/utils.js

@@ -0,0 +1,9 @@
+export function unslug(slug) {
+  // Replace hyphens and underscores with spaces
+  let result = slug.replace(/[-_]/g, " ");
+
+  // Capitalize the first letter of each word
+  return result.replace(/\b\w/g, function (char) {
+    return char.toUpperCase();
+  });
+}

docs/_react/bulma-customizer/vite.config.js

@@ -4,6 +4,7 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
+    emptyOutDir: true,
     outDir: "../../assets/javascript/bulma-customizer",
     rollupOptions: {
       output: {

docs/customizer.html

@@ -3,14 +3,14 @@ layout: default
 theme: customizer
 route: customizer
 ---
-{% include global/header.html %}
 
-{%
-  include docs/hero.html
-  title="The Bulma Customizer"
-  subtitle="Gorgeous websites built with Bulma."
-%}
+{% include global/header.html %} {% include docs/hero.html title="The Bulma
+Customizer" subtitle="Gorgeous websites built with Bulma." %}
 
 <div id="root"></div>
 
+<link
+  rel="stylesheet"
+  href="{{ site.url }}/assets/javascript/bulma-customizer/index.css"
+/>
 <script src="{{ site.url }}/assets/javascript/bulma-customizer/index.js"></script>