Merge pull request #4825 from penpot/ladybenko-8224-setup-ds

Setup design system

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",
+        },
+      ],
+    },
   },
 };
 

frontend/shadow-cljs.edn

@@ -92,12 +92,8 @@
    {:base
     {:entries []}
 
-    :icons
-    {:exports {default app.main.ui.icons/default}
-     :depends-on #{:base}}
-
     :components
-    {:exports {:default app.main.ui.components/default}
+    {:exports {:default app.main.ui.ds/default}
      :depends-on #{:base}}}
 
    :compiler-options

frontend/src/app/main/ui/components/buttons/simple_button.scss

@@ -1,13 +0,0 @@
-.button {
-  font-family: monospace;
-
-  display: flex;
-  align-items: center;
-  column-gap: 0.5rem;
-
-  svg {
-    width: 16px;
-    height: 16px;
-    stroke: #000;
-  }
-}

frontend/src/app/main/ui/ds.cljs

@@ -0,0 +1,15 @@
+;; 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
+  (:require
+   [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 simple-button
+       :StoryWrapper sb/story-wrapper})

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]))

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} />

frontend/src/app/main/ui/ds/buttons/simple_button.scss

@@ -0,0 +1,7 @@
+@use "../colors.scss" as *;
+
+.button {
+  appearance: none;
+  border: 0;
+  background: var(--color-accent-primary);
+}

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 = {
     </Components.StoryWrapper>
   ),
 };
-
-export const WithIcon = {
-  render: () => (
-    <Components.StoryWrapper>
-      <Components.SimpleButton>
-        {Icons.AddRefactor}
-        Simple Button
-      </Components.SimpleButton>
-    </Components.StoryWrapper>
-  ),
-};

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};
+}

frontend/src/app/main/ui/ds/storybook.cljs

@@ -1,20 +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.components
+(ns app.main.ui.ds.storybook
+  (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.ui.components.buttons.simple-button :as sb]
    [rumext.v2 :as mf]))
 
 (mf/defc story-wrapper
   {::mf/wrap-props false}
   [{:keys [children]}]
-  [:.default children])
+  [:article {:class (stl/css :story-wrapper)}
-
+   [:section {:class "default"} children]
-(def default
+   [:section {:class "light"} children]])
-  "A export used for storybook"
-  #js {:SimpleButton sb/simple-button
-       :StoryWrapper story-wrapper})

frontend/src/app/main/ui/ds/storybook.scss

@@ -0,0 +1,6 @@
+@use "./colors.scss";
+
+.story-wrapper {
+  display: grid;
+  row-gap: 1rem;
+}