Add Export toggle

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

@@ -39,7 +39,7 @@
     font-size: 1rem;
     overflow: auto;
     padding: 1em 1.25em;
-    margin: 0.5rem -0.5rem;
+    margin: 0.5rem -0.5rem -0.5rem;
   }
 
   & > .language-css {

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

@@ -142,12 +142,15 @@ const PAGE_IDS = {
   Layout: ["footer", "hero", "media", "section"],
   Export: ["export"],
 };
+const LOCAL_STORAGE_KEY = "bulma-customizer-vars"
 
 export const CustomizerContext = createContext({
   isOpen: false,
   cssvars: {},
+  saved: {},
   currentTab: "",
   currentPage: "",
+  showExport: false,
   getVar: () => {},
   changeTab: () => {},
   changePage: () => {},
@@ -159,8 +162,10 @@ function App() {
   const initialContext = {
     isOpen: true,
     cssvars: {},
-    currentTab: "Export",
-    currentPage: "export",
+    saved: {},
+    currentTab: "Global Variables",
+    currentPage: "colors",
+    showExport: true,
     getVar: (id) => {
       return context.cssvars[id];
     },
@@ -195,7 +200,17 @@ function App() {
       });
     },
   };
-  const [context, setContext] = useState(initialContext);
+  const [context, setContext] = useState(() => {
+    const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+    if (saved) {
+      const initialValue = JSON.parse(saved);
+      initialContext.cssvars = initialValue;
+      initialContext.saved = initialValue;
+    }
+
+    return initialContext;
+  });
 
   const handleTabChange = (event) => {
     event.preventDefault();
@@ -220,6 +235,17 @@ function App() {
     });
   };
 
+  const handleExport = (event) => {
+    event.preventDefault();
+    setContext((context) => {
+      return {
+        ...context,
+        showExport: !context.showExport,
+      };
+    });
+  }
+
+  // Get the computed styles of all cssvars
   useEffect(() => {
     const styles = {
       root: window.getComputedStyle(document.documentElement),
@@ -282,6 +308,12 @@ function App() {
         return;
       }
 
+      // Keep the value saved in localStorage
+      if (key in context.saved) {
+        cssvars[key] = context.saved[key];
+        return;
+      }
+
       let original;
       let scope = ":root";
 
@@ -396,10 +428,12 @@ function App() {
         cssvars,
       };
     });
-  }, []);
+  }, [context.saved]);
 
+  // Update the styling when the cssvars change
   useEffect(() => {
     const rules = {};
+    const storedVars = {}
 
     Object.values(context.cssvars).forEach((cssvar) => {
       const { id, current, start, scope, unit } = cssvar;
@@ -408,6 +442,8 @@ function App() {
         return;
       }
 
+      storedVars[id] = cssvar;
+
       const computedValue = `${current}${unit}`;
       const declaration = `--bulma-${id}: ${computedValue} !important;`;
 
@@ -429,8 +465,14 @@ function App() {
     if (styleRef) {
       styleRef.current.innerHTML = content;
     }
+
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(storedVars));
   }, [context.cssvars]);
 
+  // Computed values
+  const isExportAvailable = Object.values(context.cssvars).some(item => item.current != item.start);
+
+  // Styles
   const tabsStyle = {
     "--bulma-tabs-link-active-color": "var(--bulma-primary)",
   };
@@ -440,6 +482,15 @@ function App() {
     [cn.open]: context.isOpen,
   });
 
+  const controlsClass = classNames({
+    [cn.controls]: true,
+  });
+
+  const exportClass = classNames({
+    [cn.button]: true,
+    "button is-primary is-outlined": true,
+  });
+
   const buttonClass = classNames({
     [cn.button]: true,
     "button is-primary": true,
@@ -451,7 +502,7 @@ function App() {
         <style ref={styleRef} />
 
         <div className={customizerClass}>
-          <div className={cn.controls}>
+          {context.showExport ? PAGE_TO_COMPONENT.export : <> <div className={controlsClass}>
             <div className="select" style={tabsStyle}>
               <select onChange={handleTabChange} value={context.currentTab}>
                 {TAB_IDS.map((tabId) => {
@@ -482,12 +533,18 @@ function App() {
             })}
           </div>
 
-          {PAGE_TO_COMPONENT[context.currentPage]}
+          {PAGE_TO_COMPONENT[context.currentPage]}</>}
         </div>
 
-        <button className={buttonClass} onClick={handleOpening}>
-          {context.isOpen ? "Close Customizer" : "Open Customizer"}
-        </button>
+        <div className={cn.buttons}>
+          {isExportAvailable && <button className={exportClass} onClick={handleExport}>
+            Export
+          </button>}
+
+          <button className={buttonClass} onClick={handleOpening}>
+            {context.isOpen ? "Close Customizer" : "Open Customizer"}
+          </button>
+        </div>
       </div>
     </CustomizerContext.Provider>
   );

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

@@ -1,14 +1,13 @@
 .app {
+  background-color: red;
   --var-item-side-width: 12rem;
   --var-item-slider-width: 30rem;
   --var-item-padding: 1rem;
   --var-item-gap: 1rem;
   bottom: 1rem;
-  overflow: auto;
+  overflow: hidden;
   position: fixed;
   right: 1rem;
-  top: 1rem;
-  width: 33rem;
   z-index: 100;
 }
 
@@ -19,10 +18,14 @@
   transition-duration: 300ms;
   transition-property: opacity, transform;
   transform: scale(0.98) translate(2px, 2px);
-  margin-bottom: 4rem;
   opacity: 0;
   pointer-events: none;
-  min-height: 100%;
+  width: 33rem;
+  top: 1rem;
+  position: fixed;
+  bottom: 4.5rem;
+  right: 1rem;
+  overflow-y: auto;
 }
 
 .open {
@@ -38,8 +41,10 @@
   padding: 0.5rem;
 }
 
-.button {
-  bottom: 1.5rem;
-  right: 1.5rem;
+.buttons {
+  display: flex;
+  gap: 0.5rem;
+  bottom: 1rem;
+  right: 1rem;
   position: fixed;
 }

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

@@ -45,8 +45,17 @@ function Export() {
     <div className={cn.main}>
       {css ? (
         <>
-          <div className={cn.explanation}>
-            Insert this CSS <em>after</em> importing Bulma.
+          <div className={cn.body}>
+            <p className="title is-5">Export</p>
+
+            <div className={cn.explanation}>
+              <p>Insert this CSS <em>after</em> importing Bulma.</p>
+
+              <div className="buttons are-small">
+                <button className="button is-primary">Copy</button>
+                <button className="button is-danger is-outlined">Reset</button>
+              </div>
+            </div>
           </div>
 
           <Highlighter PreTag="div" language="css">

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

@@ -2,6 +2,20 @@
   padding: 0.5rem;
 }
 
-.explanation {
-  padding: 0 1rem 0.5rem;
+.body {
+  padding: 0.5rem 1rem ;
+}
+
+.body :global(.title) {
+  margin-bottom: 0;
+}
+
+.explanation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  div {
+    flex-wrap: nowrap;
+  }
 }