[WIP][POC]: Storybook

frontend/.eslintrc.js

@@ -4,13 +4,7 @@ module.exports = {
     'es6': true,
     'node': true,
   },
-  'extends': [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'plugin:@dword-design/import-alias/recommended',
-  ],
+  'extends': ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:@dword-design/import-alias/recommended', 'plugin:storybook/recommended'],
   'globals': {
     '$': true,
     '$crisp': true,

frontend/.gitignore

@@ -29,3 +29,6 @@ common/project.js
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+*storybook.log
+storybook-static

frontend/.storybook/main.js

@@ -0,0 +1,45 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../documentation/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs"
+  ],
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
+  },
+  webpackFinal: async (config) => {
+    // Add path aliases
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'common': path.resolve(__dirname, '../common'),
+      'components': path.resolve(__dirname, '../web/components'),
+      'project': path.resolve(__dirname, '../web/project'),
+    }
+
+    // Add SCSS support
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        'sass-loader'
+      ],
+      include: path.resolve(__dirname, '../'),
+    })
+
+    return config
+  },
+};
+export default config;

frontend/.storybook/preview.js

@@ -0,0 +1,17 @@
+/** @type { import('@storybook/react-webpack5').Preview } */
+
+// Import global styles
+import '../web/styles/styles.scss'
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/common/types/responses.ts

@@ -34,6 +34,8 @@ export type Operator = {
   hideValue?: boolean
   warning?: string
   valuePlaceholder?: string
+  append?: string
+  type?: string
 }
 export type ChangeRequestSummary = {
   id: number

frontend/documentation/README.md

@@ -0,0 +1,36 @@
+# Component Documentation
+
+This directory contains Storybook stories and documentation for our components.
+
+## Structure
+
+```
+documentation/
+└── components/           # Component stories organized by component
+    └── multi-select/
+        └── MultiSelect.stories.tsx
+```
+
+## Adding New Component Stories
+
+To add stories for a new component:
+
+1. Create a new directory under `components/` with the component name
+2. Add a `.stories.tsx` file (e.g., `ComponentName.stories.tsx`)
+3. The stories will automatically be picked up by Storybook
+
+## Running Storybook
+
+```bash
+npm run storybook
+```
+
+This will start the Storybook dev server at `http://localhost:6006/`
+
+## Building Storybook
+
+```bash
+npm run build-storybook
+```
+
+This will create a static build of the Storybook in the `storybook-static` directory.

frontend/documentation/components/multi-select/MultiSelect.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MultiSelect } from '../../../web/components/base/select/multi-select/MultiSelect'
+import React, { useState } from 'react'
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof MultiSelect>
+
+// Wrapper component to handle state
+const MultiSelectWrapper = (args: any) => {
+  const [selectedValues, setSelectedValues] = useState<string[]>(
+    args.selectedValues || []
+  )
+
+  return (
+    <div style={{ width: '400px' }}>
+      <MultiSelect
+        {...args}
+        selectedValues={selectedValues}
+        onSelectionChange={setSelectedValues}
+      />
+    </div>
+  )
+}
+
+// Basic example with simple options
+export const Default: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+      { label: 'Option 4', value: 'option4' },
+      { label: 'Option 5', value: 'option5' },
+    ],
+    placeholder: 'Select options...',
+    selectedValues: [],
+    hideSelectedOptions: true,
+  },
+}
+
+// With label
+export const WithLabel: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    ...Default.args,
+    label: 'Choose your options',
+  },
+}
+
+// With colors
+export const WithColors: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    options: [
+      { label: 'Red', value: 'red' },
+      { label: 'Green', value: 'green' },
+      { label: 'Blue', value: 'blue' },
+      { label: 'Yellow', value: 'yellow' },
+      { label: 'Purple', value: 'purple' },
+    ],
+    colorMap: new Map([
+      ['red', '#EF4444'],
+      ['green', '#10B981'],
+      ['blue', '#3B82F6'],
+      ['yellow', '#F59E0B'],
+      ['purple', '#8B5CF6'],
+    ]),
+    placeholder: 'Select colors...',
+    selectedValues: [],
+    hideSelectedOptions: true,
+  },
+}
+
+// Pre-selected values
+export const WithPreselectedValues: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    ...WithColors.args,
+    selectedValues: ['red', 'blue'],
+  },
+}
+
+// Disabled state
+export const Disabled: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    ...Default.args,
+    disabled: true,
+    selectedValues: ['option1', 'option2'],
+  },
+}
+
+// Small size
+export const SmallSize: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    ...Default.args,
+    size: 'small',
+    label: 'Small size select',
+  },
+}
+
+// Large size
+export const LargeSize: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    ...Default.args,
+    size: 'large',
+    label: 'Large size select',
+  },
+}
+
+// Show selected options in dropdown
+export const ShowSelectedOptions: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    ...Default.args,
+    hideSelectedOptions: false,
+    selectedValues: ['option1', 'option2'],
+  },
+}
+
+// Inline display
+export const InlineDisplay: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    ...Default.args,
+    inline: true,
+    selectedValues: ['option1', 'option2', 'option3'],
+  },
+}
+
+// Many options
+export const ManyOptions: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    options: Array.from({ length: 50 }, (_, i) => ({
+      label: `Option ${i + 1}`,
+      value: `option${i + 1}`,
+    })),
+    placeholder: 'Search and select...',
+    selectedValues: [],
+    label: 'Select from many options',
+  },
+}
+
+// Long option labels
+export const LongLabels: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    options: [
+      {
+        label: 'This is a very long option label that might overflow',
+        value: 'long1',
+      },
+      {
+        label: 'Another extremely long label to test text overflow behavior',
+        value: 'long2',
+      },
+      {
+        label: 'Short label',
+        value: 'short',
+      },
+    ],
+    placeholder: 'Select options...',
+    selectedValues: [],
+  },
+}