Fix Export

2024-11-14 11:14:24 +00:00 · 2024-06-27 03:50:54 +01:00 · 2024-06-27 03:50:54 +01:00 · d3e01494db
commit d3e01494db
parent 3c1e19a9ad
4 changed files with 157 additions and 63 deletions
--- a/docs/_react/bulma-customizer/src/App.jsx
+++ b/docs/_react/bulma-customizer/src/App.jsx
@ -142,30 +142,31 @@ const PAGE_IDS = {
  Layout: ["footer", "hero", "media", "section"],
  Export: ["export"],
 };
-const LOCAL_STORAGE_KEY = "bulma-customizer-vars"
+const LOCAL_STORAGE_KEY = "bulma-customizer-vars";

 export const CustomizerContext = createContext({
  isOpen: false,
+  showExport: false,
  cssvars: {},
  saved: {},
  currentTab: "",
  currentPage: "",
-  showExport: false,
  getVar: () => {},
  changeTab: () => {},
  changePage: () => {},
  updateVar: () => {},
+  hideExport: () => {},
 });

 function App() {
  const styleRef = useRef();
  const initialContext = {
-    isOpen: true,
+    isOpen: false,
+    showExport: false,
    cssvars: {},
    saved: {},
    currentTab: "Global Variables",
    currentPage: "colors",
-    showExport: true,
    getVar: (id) => {
      return context.cssvars[id];
    },
@ -199,6 +200,29 @@ function App() {
        };
      });
    },
+    resetVars: () => {
+      setContext((context) => {
+        const cssvars = {};
+
+        for (const [key, value] of Object.entries(context.cssvars)) {
+          const item = { ...value, current: value.start };
+          cssvars[key] = item;
+        }
+
+        return {
+          ...context,
+          cssvars,
+        };
+      });
+    },
+    hideExport: () => {
+      setContext((context) => {
+        return {
+          ...context,
+          showExport: false,
+        };
+      });
+    },
  };
  const [context, setContext] = useState(() => {
    const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
@ -243,7 +267,7 @@ function App() {
        showExport: !context.showExport,
      };
    });
-  }
+  };

  // Get the computed styles of all cssvars
  useEffect(() => {
@ -433,7 +457,7 @@ function App() {
  // Update the styling when the cssvars change
  useEffect(() => {
    const rules = {};
-    const storedVars = {}
+    const storedVars = {};

    Object.values(context.cssvars).forEach((cssvar) => {
      const { id, current, start, scope, unit } = cssvar;
@ -470,7 +494,9 @@ function App() {
  }, [context.cssvars]);

  // Computed values
-  const isExportAvailable = Object.values(context.cssvars).some(item => item.current != item.start);
+  // const isExportAvailable = Object.values(context.cssvars).some(
+  //   (item) => item.current != item.start,
+  // );

  // Styles
  const tabsStyle = {
@ -488,12 +514,15 @@ function App() {

  const exportClass = classNames({
    [cn.button]: true,
-    "button is-primary is-outlined": true,
+    "is-hidden": !context.isOpen,
+    "button is-primary is-outlined": !context.showExport,
+    "button is-primary": context.showExport,
  });

  const buttonClass = classNames({
    [cn.button]: true,
-    "button is-primary": true,
+    "button is-primary": !context.isOpen,
+    "button is-danger is-outlined": context.isOpen,
  });

  return (
@ -502,44 +531,50 @@ function App() {
        <style ref={styleRef} />

        <div className={customizerClass}>
-          {context.showExport ? PAGE_TO_COMPONENT.export : <> <div className={controlsClass}>
-            <div className="select" style={tabsStyle}>
-              <select onChange={handleTabChange} value={context.currentTab}>
-                {TAB_IDS.map((tabId) => {
+          {context.showExport ? (
+            PAGE_TO_COMPONENT.export
+          ) : (
+            <>
+              {" "}
+              <div className={controlsClass}>
+                <div className="select" style={tabsStyle}>
+                  <select onChange={handleTabChange} value={context.currentTab}>
+                    {TAB_IDS.map((tabId) => {
+                      return (
+                        <option key={tabId} value={tabId}>
+                          {unslug(tabId)}
+                        </option>
+                      );
+                    })}
+                  </select>
+                </div>
+
+                {PAGE_IDS[context.currentTab].map((pageId) => {
+                  const buttonClass = classNames({
+                    button: true,
+                    "is-primary": pageId === context.currentPage,
+                  });
+
                  return (
-                    <option key={tabId} value={tabId}>
-                      {unslug(tabId)}
-                    </option>
+                    <button
+                      className={buttonClass}
+                      key={pageId}
+                      onClick={(e) => handlePageChange(e, pageId)}
+                    >
+                      {unslug(pageId)}
+                    </button>
                  );
                })}
-              </select>
-            </div>
-
-            {PAGE_IDS[context.currentTab].map((pageId) => {
-              const buttonClass = classNames({
-                button: true,
-                "is-primary": pageId === context.currentPage,
-              });
-
-              return (
-                <button
-                  className={buttonClass}
-                  key={pageId}
-                  onClick={(e) => handlePageChange(e, pageId)}
-                >
-                  {unslug(pageId)}
-                </button>
-              );
-            })}
-          </div>
-
-          {PAGE_TO_COMPONENT[context.currentPage]}</>}
+              </div>
+              {PAGE_TO_COMPONENT[context.currentPage]}
+            </>
+          )}
        </div>

        <div className={cn.buttons}>
-          {isExportAvailable && <button className={exportClass} onClick={handleExport}>
+          <button className={exportClass} onClick={handleExport}>
            Export
-          </button>}
+          </button>

          <button className={buttonClass} onClick={handleOpening}>
            {context.isOpen ? "Close Customizer" : "Open Customizer"}
--- a/docs/_react/bulma-customizer/src/components/Color.jsx
+++ b/docs/_react/bulma-customizer/src/components/Color.jsx
@ -156,7 +156,7 @@ function Color({ color }) {
    updateVar(cssvar.id, value);
  };

-  if (!h) {
+  if (!h || !s || !l) {
    return;
  }

--- a/docs/_react/bulma-customizer/src/components/Export.jsx
+++ b/docs/_react/bulma-customizer/src/components/Export.jsx
@ -6,9 +6,37 @@ import Highlighter from "components/Highlighter";
 import cn from "./Export.module.css";

 function Export() {
-  const { cssvars } = useContext(CustomizerContext);
+  const { cssvars, resetVars, hideExport } = useContext(CustomizerContext);

  const [css, setCSS] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  const handleReset = (event) => {
+    event.preventDefault();
+
+    if (window.confirm("Are you sure?")) {
+      resetVars();
+    }
+  };
+
+  const handleGo = (event) => {
+    event.preventDefault();
+    hideExport();
+  };
+
+  const copyToClipboard = async (event) => {
+    event.preventDefault();
+
+    try {
+      await navigator.clipboard.writeText(css);
+      setCopied(true);
+      window.setTimeout(() => {
+        setCopied(false);
+      }, 500);
+    } catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  };

  useEffect(() => {
    const rules = {};
@ -43,30 +71,53 @@ function Export() {

  return (
    <div className={cn.main}>
-      {css ? (
-        <>
-          <div className={cn.body}>
-            <p className="title is-5">Export</p>
+      <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>
+        {css ? (
+          <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 className="buttons are-small">
+              {copied ? (
+                <span className="button is-success">Copied!</span>
+              ) : (
+                <button onClick={copyToClipboard} className="button is-primary">
+                  Copy
+                </button>
+              )}
+              <button
+                onClick={handleReset}
+                className="button is-danger is-outlined"
+              >
+                Reset
+              </button>
            </div>
          </div>
+        ) : (
+          <>
+            <div className={cn.explanation}>
+              <p>
+                Customize CSS variables in the other pages and come back here to
+                find the generated CSS.
+              </p>
+            </div>

-          <Highlighter PreTag="div" language="css">
-            {css.trim()}
-          </Highlighter>
-        </>
-      ) : (
-        <div className={cn.explanation}>
-          Customize CSS variables in the other pages and come back here to find
-          the generated CSS.
-        </div>
+            <div className={cn.go}>
+              <button className="button is-primary" onClick={handleGo}>
+                Let&apos;s go!
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {css && (
+        <Highlighter PreTag="div" language="css">
+          {css.trim()}
+        </Highlighter>
      )}
    </div>
  );
--- a/docs/_react/bulma-customizer/src/components/Export.module.css
+++ b/docs/_react/bulma-customizer/src/components/Export.module.css
@ -3,11 +3,11 @@
 }

 .body {
-  padding: 0.5rem 1rem ;
+  padding: 0.5rem 1rem;
 }

 .body :global(.title) {
-  margin-bottom: 0;
+  margin-bottom: 0.25rem;
 }

 .explanation {
@ -15,7 +15,15 @@
  align-items: center;
  justify-content: space-between;

+  p {
+    padding: 3px 0;
+  }
+
  div {
    flex-wrap: nowrap;
  }
 }
+
+.go {
+  margin-top: 0.5rem;
+}