🎉 Add Storybook to the project

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

@@ -0,0 +1,11 @@
+(ns app.main.ui.components.buttons.simple-button
+  (:require-macros [app.main.style :as stl])
+  (:require
+    [app.common.data.macros :as dm]
+    [rumext.v2 :as mf]))
+
+(mf/defc simple-button
+  {::mf/wrap-props false}
+  [{:keys [on-click children]}]
+    [:button {:on-click on-click :class (dm/str (stl/css :button))} children])
+

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

@@ -0,0 +1,16 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SimpleButtonStories from "./simple_button.stories"
+
+<Meta of={SimpleButtonStories} />
+
+# Lorem ipsum
+
+This is an example of **markdown** docs within storybook, for the component `<SimpleButton>`.
+
+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/components/buttons/simple_button.scss

@@ -0,0 +1,13 @@
+.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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import ds from "@target/design-system";
+
+const { SimpleButton, StoryWrapper, icons } = ds;
+
+export default {
+  title: 'Buttons/Simple Button',
+  component: SimpleButton,
+};
+
+export const Default = {
+  render: () => (
+    <StoryWrapper>
+      <SimpleButton>
+        Simple Button
+      </SimpleButton>
+    </StoryWrapper>
+  ),
+};
+
+export const WithIcon = {
+  render: () => (
+    <StoryWrapper>
+      <SimpleButton>
+        {icons.IconAddRefactor}
+        Simple Button
+      </SimpleButton>
+    </StoryWrapper>
+  ),
+}

frontend/src/app/main/ui/components/design_system.cljs

@@ -0,0 +1,17 @@
+(ns app.main.ui.components.design-system
+  (:require
+   [app.main.ui.components.buttons.simple-button :as sb]
+   [app.main.ui.icons :as icons]
+   [rumext.v2 :as mf]))
+
+(mf/defc story-wrapper
+  {::mf/wrap-props false}
+  [{:keys [children]}]
+    [:.default children])
+
+(def ^export default #js {
+  :icons #js {
+    :IconAddRefactor icons/add-refactor
+  }
+  :StoryWrapper story-wrapper
+  :SimpleButton sb/simple-button})