feat(ui): introduces storybook

- adds the necessary dependencies and configuration for Storybook.
- refactors the `Button` component and adds some stories for it.

pkgs/clan-app/ui/src/Form/fields/Select.tsx

@@ -10,7 +10,7 @@ import {
 import { Portal } from "solid-js/web";
 import { useFloating } from "../base";
 import { autoUpdate, flip, hide, offset, shift, size } from "@floating-ui/dom";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import {
   InputBase,
   InputError,

pkgs/clan-app/ui/src/Form/form/index.tsx

@@ -20,7 +20,7 @@ import { createEffect, For, JSX, Match, Show, Switch } from "solid-js";
 import cx from "classnames";
 import { Label } from "../base/label";
 import { SelectInput } from "../fields/Select";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 
 function generateDefaults(schema: JSONSchema7): unknown {

pkgs/clan-app/ui/src/api_test.tsx

@@ -5,7 +5,7 @@ import {
   SubmitHandler,
 } from "@modular-forms/solid";
 import { TextInput } from "@/src/Form/fields/TextInput";
-import { Button } from "./components/button";
+import { Button } from "./components/Button/Button";
 import { callApi } from "./api";
 import { API } from "@/api/API";
 import { createSignal, Match, Switch } from "solid-js";

pkgs/clan-app/ui/src/components/BackButton.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "@solidjs/router";
-import { Button } from "./button";
+import { Button } from "./Button/Button";
 import Icon from "./icon";
 
 export const BackButton = () => {

pkgs/clan-app/ui/src/components/Button/Button-Base.css

@@ -1,6 +1,6 @@
-@import "./button-light.css";
-@import "./button-dark.css";
-@import "./button-ghost.css";
+@import "Button-Light.css";
+@import "Button-Dark.css";
+@import "Button-Ghost.css";
 
 .button {
   @apply inline-flex items-center flex-shrink gap-1 justify-center p-4 font-semibold;

pkgs/clan-app/ui/src/components/Button/Button.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@kachurun/storybook-solid";
+import { Button, ButtonProps } from "./Button";
+import FlashIcon from "@/icons/flash.svg";
+
+const meta: Meta<ButtonProps> = {
+  title: "Components/Button",
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<ButtonProps>;
+
+const children = "click me";
+const startIcon = <FlashIcon width={16} height={16} viewBox="0 0 48 48" />;
+
+export const Default: Story = {
+  args: {
+    children,
+    startIcon,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: "s",
+  },
+};
+
+export const Light: Story = {
+  args: {
+    ...Default.args,
+    variant: "light",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    ...Default.args,
+    variant: "ghost",
+  },
+};

pkgs/clan-app/ui/src/components/Button/Button.tsx

@@ -1,8 +1,8 @@
 import { splitProps, type JSX } from "solid-js";
 import cx from "classnames";
 import { Typography } from "../Typography";
-//import './css/index.css'
-import "./css/index.css";
+
+import "./Button-Base.css";
 
 type Variants = "dark" | "light" | "ghost";
 type Size = "default" | "s";
@@ -42,7 +42,8 @@ const sizeFont: Record<Size, string> = {
   s: cx("text-[0.75rem]"),
 };
 
-interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: Variants;
   size?: Size;
   children?: JSX.Element;

pkgs/clan-app/ui/src/components/Menu.tsx

@@ -9,7 +9,7 @@ import {
   shift,
 } from "@floating-ui/dom";
 import cx from "classnames";
-import { Button } from "./button";
+import { Button } from "./Button/Button";
 
 interface MenuProps {
   /**

pkgs/clan-app/ui/src/components/accordion/index.tsx

@@ -1,6 +1,6 @@
 import { createSignal, JSX, Show } from "solid-js";
 import Icon from "../icon";
-import { Button } from "../button";
+import { Button } from "../Button/Button";
 import cx from "classnames";
 import "./accordion.css";
 

pkgs/clan-app/ui/src/components/button/button.examples.tsx

@@ -1,27 +0,0 @@
-import { Button } from ".";
-import FlashIcon from "@/icons/flash.svg";
-
-export const Test = () => {
-  <div class="p-8">
-    <Button>Label</Button>
-    <Button
-      startIcon={<FlashIcon width={16} height={16} viewBox="0 0 48 48" />}
-    >
-      Label
-    </Button>
-    <Button
-      variant="light"
-      endIcon={<FlashIcon width={16} height={16} viewBox="0 0 48 48" />}
-    >
-      Label
-    </Button>
-    <Button size="s">Label</Button>
-    <Button
-      variant="light"
-      size="s"
-      endIcon={<FlashIcon width={13} height={13} viewBox="0 0 48 48" />}
-    >
-      Label
-    </Button>
-  </div>;
-};

pkgs/clan-app/ui/src/components/modal/index.tsx

@@ -1,6 +1,6 @@
 import Dialog from "corvu/dialog";
 import { createSignal, JSX } from "solid-js";
-import { Button } from "../button";
+import { Button } from "../Button/Button";
 import Icon from "../icon";
 import cx from "classnames";
 

pkgs/clan-app/ui/src/routes/clans/create.tsx

@@ -9,7 +9,7 @@ import {
 import toast from "solid-toast";
 import { TextInput } from "@/src/Form/fields/TextInput";
 import { useNavigate } from "@solidjs/router";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { useClanContext } from "@/src/contexts/clan";
 

pkgs/clan-app/ui/src/routes/clans/details.tsx

@@ -13,7 +13,7 @@ import {
 } from "@modular-forms/solid";
 import { TextInput } from "@/src/Form/fields/TextInput";
 import toast from "solid-toast";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { Header } from "@/src/layout/header";
 import { clanMetaQuery } from "@/src/queries/clan-meta";

pkgs/clan-app/ui/src/routes/clans/list.tsx

@@ -3,7 +3,7 @@ import { useFloating } from "@/src/floating";
 import { autoUpdate, flip, hide, offset, shift } from "@floating-ui/dom";
 import { A, useNavigate } from "@solidjs/router";
 import { registerClan } from "@/src/hooks";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { useClanContext } from "@/src/contexts/clan";
 import { clanURIs, setActiveClanURI } from "@/src/stores/clan";

pkgs/clan-app/ui/src/routes/components/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import { InputBase, InputLabel } from "@/src/components/inputBase";
 import { TextInput } from "@/src/Form/fields";
 import { Header } from "@/src/layout/header";

pkgs/clan-app/ui/src/routes/flash/view.tsx

@@ -1,5 +1,5 @@
 import { callApi } from "@/src/api";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 // Icon is used in CustomFileField, ensure it's available or remove if not needed there
 import Icon from "@/src/components/icon";
 import { Typography } from "@/src/components/Typography";

pkgs/clan-app/ui/src/routes/hosts/view.tsx

@@ -1,6 +1,6 @@
 import { type Component, createSignal, For, Show } from "solid-js";
 import { OperationResponse, callApi } from "@/src/api";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 
 type ServiceModel = Extract<

pkgs/clan-app/ui/src/routes/machines/create.tsx

@@ -1,5 +1,5 @@
 import { callApi, OperationArgs } from "@/src/api";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { TextInput } from "@/src/Form/fields/TextInput";
 import { Header } from "@/src/layout/header";

pkgs/clan-app/ui/src/routes/machines/details.tsx

@@ -10,7 +10,7 @@ import { useNavigate, useParams, useSearchParams } from "@solidjs/router";
 import { createQuery, useQuery, useQueryClient } from "@tanstack/solid-query";
 import { createEffect, createSignal, For, Match, Show, Switch } from "solid-js";
 
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { TextInput } from "@/src/Form/fields/TextInput";
 import Accordion from "@/src/components/accordion";

pkgs/clan-app/ui/src/routes/machines/install/hardware-step.tsx

@@ -1,5 +1,5 @@
 import { callApi } from "@/src/api";
-import { Button } from "@/src/components/button";
+import { Button } from "../../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { InputError, InputLabel } from "@/src/components/inputBase";
 import { FieldLayout } from "@/src/Form/fields/layout";

pkgs/clan-app/ui/src/routes/machines/install/vars-step.tsx

@@ -14,7 +14,7 @@ import toast from "solid-toast";
 import { useNavigate, useParams, useSearchParams } from "@solidjs/router";
 import { StepProps } from "./hardware-step";
 import { BackButton } from "@/src/components/BackButton";
-import { Button } from "@/src/components/button";
+import { Button } from "../../../components/Button/Button";
 import { useClanContext } from "@/src/contexts/clan";
 
 export type VarsValues = FieldValues & Record<string, Record<string, string>>;

pkgs/clan-app/ui/src/routes/machines/list.tsx

@@ -3,7 +3,7 @@ import { callApi, OperationResponse } from "@/src/api";
 import { MachineListItem } from "@/src/components/machine-list-item";
 import { useQuery, useQueryClient } from "@tanstack/solid-query";
 import { useNavigate } from "@solidjs/router";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { Header } from "@/src/layout/header";
 import { makePersisted } from "@solid-primitives/storage";

pkgs/clan-app/ui/src/routes/modules/details.tsx

@@ -7,7 +7,7 @@ import { createQuery } from "@tanstack/solid-query";
 import { JSONSchema7 } from "json-schema";
 import { SubmitHandler } from "@modular-forms/solid";
 import { DynForm } from "@/src/Form/form";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import Icon from "@/src/components/icon";
 import { useClanContext } from "@/src/contexts/clan";
 import { activeClanURI } from "@/src/stores/clan";

pkgs/clan-app/ui/src/routes/modules/list.tsx

@@ -1,5 +1,5 @@
 import { SuccessData } from "@/src/api";
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import { Header } from "@/src/layout/header";
 import { createModulesQuery } from "@/src/queries";
 import { A, useNavigate } from "@solidjs/router";

pkgs/clan-app/ui/src/routes/welcome/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/src/components/button";
+import { Button } from "../../components/Button/Button";
 import { registerClan } from "@/src/hooks";
 import { useNavigate } from "@solidjs/router";
 import { useClanContext } from "@/src/contexts/clan";

pkgs/clan-app/ui/src/three.tsx

@@ -1,6 +1,6 @@
 import { createEffect, createSignal, onCleanup, onMount, Show } from "solid-js";
 import * as THREE from "three";
-import { Button } from "./components/button";
+import { Button } from "./components/Button/Button";
 import Icon from "./components/icon";
 
 function addCubesSpiral({