Add Storybook to store components

package.json

@@ -42,7 +42,9 @@
 		"website:test:e2e:update": "npm --workspace=@socialincome/website run test:e2e:update",
 		"website:test:e2e:update:emulator": "npm --workspace=@socialincome/website run test:e2e:update:emulator",
 		"website:extract-translations": "npm --workspace=@socialincome/website run extract-translations",
-		"website:check-translations": "npm --workspace=@socialincome/website run check-translations"
+		"website:check-translations": "npm --workspace=@socialincome/website run check-translations",
+		"ui:serve": "npm --workspace=@socialincome/ui run storybook",
+		"ui:build": "npm --workspace=@socialincome/ui run build-storybook"
 	},
 	"devDependencies": {
 		"firebase-tools": "13.29.1",

ui/.gitignore

@@ -1,2 +1,4 @@
 storybook-static
 dist
+
+*storybook.log

ui/.storybook/main.js

@@ -0,0 +1,31 @@
+import { dirname, join } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-onboarding'),
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-interactions'),
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/react-vite'),
+		options: {},
+	},
+	viteFinal: async (config) => {
+		// Use PostCSS config from postcss.config.js
+		config.css = {
+			postcss: true,
+		};
+		return config;
+	},
+};
+export default config;

ui/.storybook/preview.js

@@ -0,0 +1,15 @@
+import '../src/globals.css';
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+};
+
+export default preview;

ui/package.json

@@ -40,9 +40,17 @@
 		"react-dom": ">=18.3.1",
 		"react-hook-form": "^7.52.1",
 		"tailwindcss-animate": "^1.0.7",
+		"tailwind-merge": "^2.5.3",
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {
+		"@storybook/addon-essentials": "^8.4.7",
+		"@storybook/addon-interactions": "^8.4.7",
+		"@storybook/addon-onboarding": "^8.4.7",
+		"@storybook/blocks": "^8.4.7",
+		"@storybook/react": "^8.4.7",
+		"@storybook/react-vite": "^8.4.7",
+		"@storybook/test": "^8.4.7",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.13",
 		"@types/react": "^18.3.18",
@@ -54,7 +62,12 @@
 		"prop-types": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"storybook": "^8.4.7",
 		"tailwind-merge": "^2.4.0",
 		"tailwindcss": "^3.4.4"
+	},
+	"scripts": {
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	}
 }

ui/src/components/button.tsx

@@ -1,8 +1,8 @@
 import { Slot } from '@radix-ui/react-slot';
-import { SpinnerIcon } from '@socialincome/website/src/components/logos/spinner-icon';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { ComponentType } from 'react';
+import { SpinnerIcon } from '../icons/spinner';
 import { cn } from '../lib/utils';
 
 const buttonVariants = cva(