feat: add design system documentation structure & UI theme

frontend/.storybook/preview-head.html

@@ -1 +0,0 @@
-<!-- <link href="/css/main.css" rel="stylesheet" type="text/css" /> -->

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 = {

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";

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>

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

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

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>