From 8d71293bafd93c91b6d01fb9360529c3bfefd1b0 Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Fri, 12 Apr 2024 14:53:22 +0200
Subject: [PATCH] feat: add design system documentation structure & UI theme

---
 frontend/.storybook/preview-head.html         |  1 -
 frontend/.storybook/preview.js                |  2 +-
 frontend/resources/styles/storybook.scss      | 28 ++++++++++++++
 .../ui/components/avatar/avatar.stories.jsx   | 37 +++++++++++++++++++
 .../ui/components/buttons/simple_button.cljs  |  5 +--
 .../ui/components/buttons/simple_button.scss  |  9 -----
 .../buttons/simple_button.stories.jsx         | 10 ++---
 7 files changed, 72 insertions(+), 20 deletions(-)
 create mode 100644 frontend/resources/styles/storybook.scss

diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html
index e43ccd245..e69de29bb 100644
--- a/frontend/.storybook/preview-head.html
+++ b/frontend/.storybook/preview-head.html
@@ -1 +0,0 @@
-<!-- <link href="/css/main.css" rel="stylesheet" type="text/css" /> -->
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index e1ef68f7e..df91524cb 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -1,4 +1,4 @@
-// import "../resources/public/css/main.css";
+import "../resources/styles/storybook.scss";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
diff --git a/frontend/resources/styles/storybook.scss b/frontend/resources/styles/storybook.scss
new file mode 100644
index 000000000..28fff0a7c
--- /dev/null
+++ b/frontend/resources/styles/storybook.scss
@@ -0,0 +1,28 @@
+// 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
+
+//#################################################
+// Import libraries
+//#################################################
+
+@use "sass:color";
+
+//#################################################
+// MAIN STYLES
+//#################################################
+
+@import "common/dependencies/colors";
+@import "common/dependencies/helpers";
+@import "common/dependencies/mixin";
+@import "common/dependencies/fonts";
+@import "common/dependencies/reset";
+@import "common/dependencies/animations";
+@import "common/dependencies/z-index";
+@import "common/dependencies/highlightjs-theme";
+
+@import "common/refactor/color-defs.scss";
+@import "common/refactor/themes.scss";
+@import "common/refactor/design-tokens.scss";
diff --git a/frontend/src/app/main/ui/components/avatar/avatar.stories.jsx b/frontend/src/app/main/ui/components/avatar/avatar.stories.jsx
index 1c7d2a078..1c071ce2d 100644
--- a/frontend/src/app/main/ui/components/avatar/avatar.stories.jsx
+++ b/frontend/src/app/main/ui/components/avatar/avatar.stories.jsx
@@ -1,11 +1,48 @@
 import * as React from "react";
 
 import Components from "@target/components";
+// export default {
+//   title: "Components/Avatar",
+// };
+
 export default {
   title: "Components/Avatar",
+  argTypes: {
+    url: {
+      description: "Avatar URL",
+      control: "text",
+    },
+    shape: {
+      description: "Avatar shape",
+      control: "select",
+      options: ["rounded", "square"],
+    },
+    size: {
+      description: "Avatar size",
+      control: "select",
+      options: ["XL", "M", "XS"],
+    },
+    name: {
+      description: "Avatar name",
+      control: "text",
+    },
+    color: {
+      description: "Avatar default color",
+      control: "range",
+      min: 1,
+      max: 9,
+    },
+  },
 };
 
 export const Default = {
+  args: {
+    url: "http://penpot.app",
+    shape: "rounded",
+    size: "M",
+    name: "Helena Kristaw",
+    color: 1,
+  },
   render: () => (
     <Components.StoryWrapper>
       <div>Avatar</div>
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.cljs b/frontend/src/app/main/ui/components/buttons/simple_button.cljs
index fb4bdd995..a958395c0 100644
--- a/frontend/src/app/main/ui/components/buttons/simple_button.cljs
+++ b/frontend/src/app/main/ui/components/buttons/simple_button.cljs
@@ -4,7 +4,6 @@
    [rumext.v2 :as mf]))
 
 (mf/defc simple-button
-  {::mf/wrap-props false}
-  [{:keys [on-click children]}]
-  [:button {:on-click on-click :class (stl/css :button)} children])
+  [{:keys [children]}]
+  [:button {:class (stl/css :button)} children])
 
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.scss b/frontend/src/app/main/ui/components/buttons/simple_button.scss
index e1d162fbc..1d6731474 100644
--- a/frontend/src/app/main/ui/components/buttons/simple_button.scss
+++ b/frontend/src/app/main/ui/components/buttons/simple_button.scss
@@ -1,13 +1,4 @@
 .button {
-  font-family: monospace;
-
   display: flex;
   align-items: center;
-  column-gap: 0.5rem;
-
-  svg {
-    width: 16px;
-    height: 16px;
-    stroke: #000;
-  }
 }
diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx b/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx
index fae62eb07..8ced151ac 100644
--- a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx
+++ b/frontend/src/app/main/ui/components/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: "Components/Simple Button",
@@ -9,21 +8,20 @@ export default {
   argTypes: {
     variant: {
       description: "type description",
+      control: "select",
       options: ["primary", "secondary"],
-      control: { type: "radio" },
     },
     children: {
       description: "Call to action",
-      control: {
-        type: "text",
-      },
+      control: "text",
     },
   },
 };
 
 export const Default = {
   args: {
-    children: "SimpleButton",
+    children: "call to action",
+    variant: "primary",
   },
   render: (args) => (
     <Components.StoryWrapper>