Merge branch 'main' of https://github.com/beat-forge/clients

packages/ui/.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['custom']
-};
+  extends: ['custom', 'plugin:storybook/recommended']
+};

packages/ui/.storybook/main.js

@@ -0,0 +1,27 @@
+import { join, dirname } 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/svelte-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions')
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/svelte-vite'),
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+export default config;

packages/ui/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/svelte').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  }
+};
+
+export default preview;

packages/ui/package.json

@@ -8,14 +8,30 @@
   "license": "MIT",
   "scripts": {
     "lint": "prettier --check --ignore-path=../../.prettierignore . && eslint \".\"",
-    "format": "prettier --write --ignore-path=../../.prettierignore ."
+    "format": "prettier --write --ignore-path=../../.prettierignore .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-interactions": "^7.2.1",
+    "@storybook/addon-links": "^7.2.1",
+    "@storybook/blocks": "^7.2.1",
+    "@storybook/svelte": "^7.2.1",
+    "@storybook/svelte-vite": "^7.2.1",
+    "@storybook/testing-library": "^0.2.0",
     "autoprefixer": "^10.4.14",
     "eslint-config-custom": "workspace:*",
+    "eslint-plugin-storybook": "^0.6.13",
     "postcss": "^8.4.27",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.2.1",
     "svelte": "^3.9.2",
     "tailwind-config": "workspace:*",
     "tailwindcss": "^3.3.3"
+  },
+  "dependencies": {
+    "@melt-ui/svelte": "^0.34.0"
   }
 }

packages/ui/src/stories/Button.stories.js

@@ -0,0 +1,43 @@
+import Button from './Button.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/svelte/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/svelte/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

packages/ui/src/stories/Button.svelte

@@ -0,0 +1,36 @@
+<script>
+  import './button.css';
+
+  /**
+   * Is this the principal call to action on the page?
+   */
+  export let primary = false;
+
+  /**
+   * @type {string} What background color to use
+   */
+  export let backgroundColor = undefined;
+
+  /**
+   * @type {'small' | 'medium' | 'large'} How large should the button be?
+   */
+  export let size = 'medium';
+
+  /**
+   * @type {string} Button contents
+   */
+  export let label;
+
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click
+>
+  {label}
+</button>