From b5aba58aac728a0b58d72d2bcbc019c634bfd364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Fri, 28 Jun 2024 15:03:25 +0200
Subject: [PATCH] :sparkles: Make storybook wrapper to render both dark and
 light themes

---
 frontend/.storybook/preview.js                | 15 ++++++++++--
 frontend/src/app/main/ui/ds.cljs              | 13 ++++-------
 .../app/main/ui/ds/buttons/simple_button.mdx  |  4 ----
 .../app/main/ui/ds/buttons/simple_button.scss | 16 ++++---------
 frontend/src/app/main/ui/ds/colors.scss       | 23 +++++++++++++++++++
 frontend/src/app/main/ui/ds/storybook.cljs    | 18 +++++++++++++++
 frontend/src/app/main/ui/ds/storybook.scss    |  6 +++++
 7 files changed, 69 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/app/main/ui/ds/colors.scss
 create mode 100644 frontend/src/app/main/ui/ds/storybook.cljs
 create mode 100644 frontend/src/app/main/ui/ds/storybook.scss

diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index de50ecbf7..132a20918 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -1,5 +1,3 @@
-import "../resources/public/css/main.css";
-
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -10,6 +8,19 @@ const preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: "dark",
+      values: [
+        {
+          name: "dark",
+          value: "#18181a",
+        },
+        {
+          name: "light",
+          value: "#fff",
+        },
+      ],
+    },
   },
 };
 
diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index ad5992c75..ede983b45 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -6,15 +6,10 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.main.ui.ds.buttons.simple-button :as sb]
-   [rumext.v2 :as mf]))
-
-(mf/defc story-wrapper
-  {::mf/wrap-props false}
-  [{:keys [children]}]
-  [:.default children])
+   [app.main.ui.ds.buttons.simple-button :refer [simple-button]]
+   [app.main.ui.ds.storybook :as sb]))
 
 (def default
   "A export used for storybook"
-  #js {:SimpleButton sb/simple-button
-       :StoryWrapper story-wrapper})
+  #js {:SimpleButton simple-button
+       :StoryWrapper sb/story-wrapper})
diff --git a/frontend/src/app/main/ui/ds/buttons/simple_button.mdx b/frontend/src/app/main/ui/ds/buttons/simple_button.mdx
index 6c93cc3a2..2c8636cb6 100644
--- a/frontend/src/app/main/ui/ds/buttons/simple_button.mdx
+++ b/frontend/src/app/main/ui/ds/buttons/simple_button.mdx
@@ -10,7 +10,3 @@ This is an example of **markdown** docs within storybook, for the component `<Si
 Here's how we can render a simple button:
 
 <Canvas of={SimpleButtonStories.Default} />
-
-Simple buttons can also have **icons**:
-
-<Canvas of={SimpleButtonStories.WithIcon} />
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/buttons/simple_button.scss b/frontend/src/app/main/ui/ds/buttons/simple_button.scss
index e1d162fbc..a83a9c5d7 100644
--- a/frontend/src/app/main/ui/ds/buttons/simple_button.scss
+++ b/frontend/src/app/main/ui/ds/buttons/simple_button.scss
@@ -1,13 +1,7 @@
+@use "../colors.scss" as *;
+
 .button {
-  font-family: monospace;
-
-  display: flex;
-  align-items: center;
-  column-gap: 0.5rem;
-
-  svg {
-    width: 16px;
-    height: 16px;
-    stroke: #000;
-  }
+  appearance: none;
+  border: 0;
+  background: var(--color-accent-primary);
 }
diff --git a/frontend/src/app/main/ui/ds/colors.scss b/frontend/src/app/main/ui/ds/colors.scss
new file mode 100644
index 000000000..1cb92881e
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/colors.scss
@@ -0,0 +1,23 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+// Accent colors
+$mint-150: #7efff5;
+$purple-700: #6911d4;
+
+// Background colors
+$white: #fff;
+$gray-950: #18181a;
+
+:global(.light) {
+  --color-accent-primary: #{$mint-150};
+  --color-background-primary: #{$white};
+}
+
+:global(.default) {
+  --color-accent-primary: #{$purple-700};
+  --color-background-primary: #{$gray-950};
+}
diff --git a/frontend/src/app/main/ui/ds/storybook.cljs b/frontend/src/app/main/ui/ds/storybook.cljs
new file mode 100644
index 000000000..ad0f360d7
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/storybook.cljs
@@ -0,0 +1,18 @@
+
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.storybook
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [rumext.v2 :as mf]))
+
+(mf/defc story-wrapper
+  {::mf/wrap-props false}
+  [{:keys [children]}]
+  [:article {:class (stl/css :story-wrapper)}
+   [:section {:class "default"} children]
+   [:section {:class "light"} children]])
diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss
new file mode 100644
index 000000000..4f680715e
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/storybook.scss
@@ -0,0 +1,6 @@
+@use "./colors.scss";
+
+.story-wrapper {
+  display: grid;
+  row-gap: 1rem;
+}