feat: Add histoire for component playground (#10256)

We will use
[histoire](https://histoire.dev/guide/vue3/getting-started.html) for
component development. I've locked the version to 0.17.15 as it had
issues in the latest versions.

Run the following commands to start the development server.

```bash
# Start the development server
pnpm story:dev

# Build the assets to deploy it to website
pnpm story:build

# View the production version of the build
pnpm story:preview
```

app/javascript/design-system/histoire.scss

@@ -0,0 +1,21 @@
+@import 'dashboard/assets/scss/app';
+
+*,
+::before,
+::after {
+  --_histoire-color-primary-50: 235 245 255;
+  --_histoire-color-primary-100: 194 225 255;
+  --_histoire-color-primary-200: 153 206 255;
+  --_histoire-color-primary-300: 112 186 255;
+  --_histoire-color-primary-400: 71 166 255;
+  --_histoire-color-primary-500: 31 147 255;
+  --_histoire-color-primary-600: 25 118 204;
+  --_histoire-color-primary-700: 19 88 153;
+  --_histoire-color-primary-800: 12 59 102;
+  --_histoire-color-primary-900: 6 29 51;
+}
+
+html,
+body {
+  font-family: 'Inter', sans-serif;
+}

app/javascript/design-system/images/logo-thumbnail.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>woot-log</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="woot-log" fill-rule="nonzero">
+            <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
+            <path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

app/javascript/histoire.setup.ts

@@ -0,0 +1 @@
+import './design-system/histoire.scss';

histoire.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig } from 'histoire';
+import { HstVue } from '@histoire/plugin-vue';
+
+export default defineConfig({
+  setupFile: './histoire.setup.ts',
+  plugins: [HstVue()],
+  vite: {
+    server: {
+      port: 6179,
+    },
+  },
+  viteIgnorePlugins: ['vite-plugin-ruby'],
+  theme: {
+    darkClass: 'dark',
+    title: '@chatwoot/design',
+    logo: {
+      square: './design-system/images/logo-thumbnail.svg',
+      light: './design-system/images/logo.png',
+      dark: './design-system/images/logo-dark.png',
+    },
+  },
+  defaultStoryProps: {
+    icon: 'carbon:cube',
+    iconColor: '#1F93FF',
+    layout: {
+      type: 'grid',
+      width: '80%',
+    },
+  },
+  tree: {
+    groups: [
+      {
+        id: 'top',
+        title: '',
+      },
+      {
+        id: 'components',
+        title: 'Components',
+        include: () => true,
+      },
+    ],
+  },
+});

package.json

@@ -14,7 +14,10 @@
     "ruby:prettier": "bundle exec rubocop -a",
     "build:sdk": "BUILD_MODE=library vite build",
     "prepare": "husky install",
-    "size": "size-limit"
+    "size": "size-limit",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "size-limit": [
     {
@@ -97,6 +100,7 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.8.1",
+    "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.0",
     "@iconify-json/lucide": "^1.2.5",
     "@size-limit/file": "^8.2.4",
@@ -113,6 +117,7 @@
     "eslint-plugin-vitest-globals": "^1.5.0",
     "eslint-plugin-vue": "^9.28.0",
     "fake-indexeddb": "^6.0.0",
+    "histoire": "0.17.15",
     "husky": "^7.0.0",
     "jsdom": "^24.1.3",
     "lint-staged": "14.0.1",