From 24b607cad326c47028f1a98df57e77f7fa2be5e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 28 Jun 2024 14:01:09 +0200 Subject: [PATCH 1/3] :lipstick: Move the stub design system component to its own ds folder --- frontend/shadow-cljs.edn | 2 +- frontend/src/app/main/ui/{components.cljs => ds.cljs} | 4 ++-- .../app/main/ui/{components => ds}/buttons/simple_button.cljs | 2 +- .../app/main/ui/{components => ds}/buttons/simple_button.mdx | 0 .../app/main/ui/{components => ds}/buttons/simple_button.scss | 0 .../ui/{components => ds}/buttons/simple_button.stories.jsx | 0 .../main/ui/{components => ds}/buttons/simple_button.test.mjs | 0 7 files changed, 4 insertions(+), 4 deletions(-) rename frontend/src/app/main/ui/{components.cljs => ds.cljs} (85%) rename frontend/src/app/main/ui/{components => ds}/buttons/simple_button.cljs (82%) rename frontend/src/app/main/ui/{components => ds}/buttons/simple_button.mdx (100%) rename frontend/src/app/main/ui/{components => ds}/buttons/simple_button.scss (100%) rename frontend/src/app/main/ui/{components => ds}/buttons/simple_button.stories.jsx (100%) rename frontend/src/app/main/ui/{components => ds}/buttons/simple_button.test.mjs (100%) diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn index 7a5b4c4ff1..f223b5f715 100644 --- a/frontend/shadow-cljs.edn +++ b/frontend/shadow-cljs.edn @@ -97,7 +97,7 @@ :depends-on #{:base}} :components - {:exports {:default app.main.ui.components/default} + {:exports {:default app.main.ui.ds/default} :depends-on #{:base}}} :compiler-options diff --git a/frontend/src/app/main/ui/components.cljs b/frontend/src/app/main/ui/ds.cljs similarity index 85% rename from frontend/src/app/main/ui/components.cljs rename to frontend/src/app/main/ui/ds.cljs index 6119114fc6..ad5992c752 100644 --- a/frontend/src/app/main/ui/components.cljs +++ b/frontend/src/app/main/ui/ds.cljs @@ -4,9 +4,9 @@ ;; ;; Copyright (c) KALEIDOS INC -(ns app.main.ui.components +(ns app.main.ui.ds (:require - [app.main.ui.components.buttons.simple-button :as sb] + [app.main.ui.ds.buttons.simple-button :as sb] [rumext.v2 :as mf])) (mf/defc story-wrapper diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.cljs b/frontend/src/app/main/ui/ds/buttons/simple_button.cljs similarity index 82% rename from frontend/src/app/main/ui/components/buttons/simple_button.cljs rename to frontend/src/app/main/ui/ds/buttons/simple_button.cljs index fb4bdd9952..095ed987ba 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/simple_button.cljs @@ -1,4 +1,4 @@ -(ns app.main.ui.components.buttons.simple-button +(ns app.main.ui.ds.buttons.simple-button (:require-macros [app.main.style :as stl]) (:require [rumext.v2 :as mf])) diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.mdx b/frontend/src/app/main/ui/ds/buttons/simple_button.mdx similarity index 100% rename from frontend/src/app/main/ui/components/buttons/simple_button.mdx rename to frontend/src/app/main/ui/ds/buttons/simple_button.mdx diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.scss b/frontend/src/app/main/ui/ds/buttons/simple_button.scss similarity index 100% rename from frontend/src/app/main/ui/components/buttons/simple_button.scss rename to frontend/src/app/main/ui/ds/buttons/simple_button.scss diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx b/frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx similarity index 100% rename from frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx rename to frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.test.mjs b/frontend/src/app/main/ui/ds/buttons/simple_button.test.mjs similarity index 100% rename from frontend/src/app/main/ui/components/buttons/simple_button.test.mjs rename to frontend/src/app/main/ui/ds/buttons/simple_button.test.mjs From 2bb7726180c21c25bfd4dcb42762552b93dd774e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 28 Jun 2024 14:03:09 +0200 Subject: [PATCH 2/3] :paperclip: Remove unneeded icons export in the storybook target --- frontend/shadow-cljs.edn | 4 ---- .../app/main/ui/ds/buttons/simple_button.stories.jsx | 12 ------------ 2 files changed, 16 deletions(-) diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn index f223b5f715..ebd3062c5f 100644 --- a/frontend/shadow-cljs.edn +++ b/frontend/shadow-cljs.edn @@ -92,10 +92,6 @@ {:base {:entries []} - :icons - {:exports {default app.main.ui.icons/default} - :depends-on #{:base}} - :components {:exports {:default app.main.ui.ds/default} :depends-on #{:base}}} diff --git a/frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx b/frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx index d53eaf6380..d4bb348fd3 100644 --- a/frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx +++ b/frontend/src/app/main/ui/ds/buttons/simple_button.stories.jsx @@ -1,7 +1,6 @@ import * as React from "react"; import Components from "@target/components"; -import Icons from "@target/icons"; export default { title: "Buttons/Simple Button", @@ -15,14 +14,3 @@ export const Default = { ), }; - -export const WithIcon = { - render: () => ( - - - {Icons.AddRefactor} - Simple Button - - - ), -}; From b5aba58aac728a0b58d72d2bcbc019c634bfd364 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 28 Jun 2024 15:03:25 +0200 Subject: [PATCH 3/3] :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 de50ecbf73..132a209181 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 ad5992c752..ede983b450 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 6c93cc3a21..2c8636cb69 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 ` - -Simple buttons can also have **icons**: - - \ 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 e1d162fbc1..a83a9c5d73 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 0000000000..1cb92881e0 --- /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 0000000000..ad0f360d73 --- /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 0000000000..4f680715e4 --- /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; +}