From 8bcc2a4932c2db176835298a347507d9663f25b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Thu, 1 Aug 2024 14:54:57 +0200
Subject: [PATCH] :sparkles: Compile storybook target in release and a separate
 DS stylesheet

---
 frontend/.storybook/preview-head.html |  2 +-
 frontend/package.json                 |  4 +--
 frontend/scripts/_helpers.js          | 41 +++++++++++++++++++++++++++
 frontend/scripts/compile-storybook.js |  7 +++++
 frontend/shadow-cljs.edn              |  2 +-
 5 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 frontend/scripts/compile-storybook.js

diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html
index e943079ee..9985b3804 100644
--- a/frontend/.storybook/preview-head.html
+++ b/frontend/.storybook/preview-head.html
@@ -1,4 +1,4 @@
-<link href="/css/main.css" rel="stylesheet" type="text/css" />
+<link href="/css/ds.css" rel="stylesheet" type="text/css" />
 <style>
   body {
     overflow-y: scroll;
diff --git a/frontend/package.json b/frontend/package.json
index fee783f99..b3af76cbc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,11 +32,11 @@
     "translations:find-unused": "node ./scripts/find-unused-translations.js",
     "compile": "node ./scripts/compile.js",
     "compile:cljs": "clojure -M:dev:shadow-cljs compile main",
+    "compile:storybook": "node ./scripts/compile-storybook.js",
     "watch": "node ./scripts/watch.js",
     "e2e:server": "node ./scripts/e2e-server.js",
     "e2e:test": "playwright test --project default",
-    "storybook:compile": "yarn run compile && clojure -M:dev:shadow-cljs compile storybook",
-    "storybook:release": "yarn run compile && clojure -M:dev:shadow-cljs compile storybook && yarn run storybook build",
+    "storybook:compile": "yarn run compile:storybook && clojure -M:dev:shadow-cljs release storybook",
     "storybook:server": "yarn run storybook dev -p 6006 --no-open",
     "storybook:watch": "concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"yarn run storybook:server\" \"yarn run watch\"",
     "storybook:build": "yarn run storybook:compile && storybook build"
diff --git a/frontend/scripts/_helpers.js b/frontend/scripts/_helpers.js
index 4b72301e8..34e7c00fd 100644
--- a/frontend/scripts/_helpers.js
+++ b/frontend/scripts/_helpers.js
@@ -82,6 +82,31 @@ export async function compileSassDebug(worker) {
   return `${result.css}\n`;
 }
 
+export async function compileSassStorybook(worker) {
+  const limitFn = pLimit(4);
+  const sourceDir = ph.join("src", "app", "main", "ui", "ds");
+
+  const dsFiles = (await fs.readdir(sourceDir, { recursive: true }))
+    .filter(isSassFile)
+    .map((filename) => ph.join(sourceDir, filename));
+  const procs = [compileSass(worker, "resources/styles/main-default.scss", {})];
+
+  for (let path of dsFiles) {
+    const proc = limitFn(() => compileSass(worker, path, { modules: true }));
+    procs.push(proc);
+  }
+
+  const result = await Promise.all(procs);
+  return result.reduce(
+    (acc, item) => {
+      acc.index[item.outputPath] = item.css;
+      acc.items.push(item.outputPath);
+      return acc;
+    },
+    { index: {}, items: [] },
+  );
+}
+
 export async function compileSassAll(worker) {
   const limitFn = pLimit(4);
   const sourceDir = "src";
@@ -394,6 +419,22 @@ async function generateTemplates() {
   await fs.writeFile("./resources/public/rasterizer.html", content);
 }
 
+export async function compileStorybookStyles() {
+  const worker = startWorker();
+  const start = process.hrtime();
+
+  log.info("init: compile storybook styles");
+  let result = await compileSassStorybook(worker);
+  result = concatSass(result);
+
+  await fs.mkdir("./resources/public/css", { recursive: true });
+  await fs.writeFile("./resources/public/css/ds.css", result);
+
+  const end = process.hrtime(start);
+  log.info("done: compile storybook styles", `(${ppt(end)})`);
+  worker.terminate();
+}
+
 export async function compileStyles() {
   const worker = startWorker();
   const start = process.hrtime();
diff --git a/frontend/scripts/compile-storybook.js b/frontend/scripts/compile-storybook.js
new file mode 100644
index 000000000..c0eb37a36
--- /dev/null
+++ b/frontend/scripts/compile-storybook.js
@@ -0,0 +1,7 @@
+import * as h from "./_helpers.js";
+
+await h.compileStorybookStyles();
+await h.copyAssets();
+await h.compileSvgSprites();
+await h.compileTemplates();
+await h.compilePolyfills();
diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn
index ebd3062c5..608357a29 100644
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@@ -93,7 +93,7 @@
     {:entries []}
 
     :components
-    {:exports {:default app.main.ui.ds/default}
+    {:exports {default app.main.ui.ds/default}
      :depends-on #{:base}}}
 
    :compiler-options