[Chore] Enhance histoire

.histoire/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "histoire",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.39.7",
+    "@floating-ui/dom": "^1.4.2",
+    "@floating-ui/vue": "^1.0.1",
+    "@histoire/plugin-vue": "^0.16.1",
+    "@iconify/vue": "^4.1.1",
+    "@radix-ui/colors": "^1.0.0",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.43.0",
+    "histoire": "^0.16.2",
+    "postcss": "^8.4.26",
+    "tailwindcss": "^3.3.3",
+    "vite": "^4.3.9"
+  }
+}

.histoire/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

.histoire/style.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .accordion-item {
+    @apply mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:ring-2 focus-within:ring-black;
+  }
+
+  .accordion-trigger {
+    @apply flex h-12 flex-1 cursor-pointer items-center justify-between bg-white px-5 text-base font-medium leading-none text-green-700 shadow-[0_1px_0] shadow-[--line-color] outline-none hover:bg-gray-200;
+  }
+
+  .accordion-content {
+    @apply overflow-hidden bg-gray-100 text-sm text-gray-900 px-5 py-4;
+  }
+  .accordion-animated-content {
+    @apply overflow-hidden bg-gray-100 text-sm text-gray-900;
+  }
+}

.histoire/tailwind.config.js

@@ -0,0 +1,135 @@
+const { blackA, green, mauve, violet, red, indigo, purple } = require("@radix-ui/colors");
+const plugin = require("tailwindcss/plugin");
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["../packages/radix-vue/src/**/*.story.vue"],
+  theme: {
+    extend: {
+      colors: {
+        ...blackA,
+        ...mauve,
+        ...violet,
+        ...green,
+        ...red,
+        ...indigo,
+        ...purple,
+      },
+      keyframes: {
+        overlayShow: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        contentShow: {
+          from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
+          to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+        },
+        slideDownAndFade: {
+          from: { opacity: 0, transform: "translateY(-2px)" },
+          to: { opacity: 1, transform: "translateY(0)" },
+        },
+        slideLeftAndFade: {
+          from: { opacity: 0, transform: "translateX(2px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
+        slideUpAndFade: {
+          from: { opacity: 0, transform: "translateY(2px)" },
+          to: { opacity: 1, transform: "translateY(0)" },
+        },
+        slideRightAndFade: {
+          from: { opacity: 0, transform: "translateX(-2px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
+        slideDown: {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        slideUp: {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+        enterFromRight: {
+          from: { opacity: 0, transform: "translateX(200px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
+        enterFromLeft: {
+          from: { opacity: 0, transform: "translateX(-200px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
+        exitToRight: {
+          from: { opacity: 1, transform: "translateX(0)" },
+          to: { opacity: 0, transform: "translateX(200px)" },
+        },
+        exitToLeft: {
+          from: { opacity: 1, transform: "translateX(0)" },
+          to: { opacity: 0, transform: "translateX(-200px)" },
+        },
+        scaleIn: {
+          from: { opacity: 0, transform: "rotateX(-10deg) scale(0.9)" },
+          to: { opacity: 1, transform: "rotateX(0deg) scale(1)" },
+        },
+        scaleOut: {
+          from: { opacity: 1, transform: "rotateX(0deg) scale(1)" },
+          to: { opacity: 0, transform: "rotateX(-10deg) scale(0.95)" },
+        },
+        fadeIn: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        fadeOut: {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
+        open2D: {
+          from: {
+            width: 0,
+            height: 0,
+          },
+          to: {
+            width: "var(--radix-accordion-content-width)",
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        close2D: {
+          from: {
+            width: "var(--radix-accordion-content-width)",
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            width: 0,
+            height: 0,
+          },
+        },
+      },
+      animation: {
+        overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        open2D: "open2D 1000ms ease-out",
+        close2D: "close2D 1000ms ease-out",
+        scaleIn: "scaleIn 200ms ease",
+        scaleOut: "scaleOut 200ms ease",
+        fadeIn: "fadeIn 200ms ease",
+        fadeOut: "fadeOut 200ms ease",
+        enterFromLeft: "enterFromLeft 250ms ease",
+        enterFromRight: "enterFromRight 250ms ease",
+        exitToLeft: "exitToLeft 250ms ease",
+        exitToRight: "exitToRight 250ms ease",
+      },
+    },
+  },
+  plugins: [
+    plugin(({ matchUtilities }) => {
+      matchUtilities({
+        perspective: (value) => ({
+          perspective: value,
+        }),
+      });
+    }),
+  ],
+};

.histoire/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@iconify/vue": ["node_modules/@iconify/vue/dist/iconify.mjs"]
+    }
+  },
+  "includes": ["../packages/radix-vue/src/**/*.vue"]
+}

.histoire/vite.config.ts

@@ -0,0 +1,40 @@
+import { HstVue } from "@histoire/plugin-vue";
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import alias from "@rollup/plugin-alias";
+
+const projectRootDir = resolve(__dirname);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    alias({
+      entries: [
+        {
+          find: "@",
+          replacement: resolve(projectRootDir, "../packages/radix-vue/src"),
+        },
+      ],
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@iconify/vue": "./node_modules/@iconify/vue/dist/iconify.mjs",
+    },
+  },
+  histoire: {
+    plugins: [{ name: "builtin:tailwind-tokens" }, HstVue()],
+    setupFile: "./setup.ts",
+    storyMatch: [resolve(projectRootDir, "../packages/radix-vue/src/**/*.story.vue")],
+    outDir: "./dist",
+  },
+
+  server: {
+    fs: {
+      // Allow serving files from two level up to the project root
+      allow: [".."],
+    },
+  },
+});

README.md

@@ -65,8 +65,8 @@ We would love to have your contributions! All PRs all welcomed! We need help bui
 ### Package
 
 1. Clone the repo
-2. Go to the repo directory: `cd radix-vue`
-3. Run `pnpm run start`
+2. Run `pnpm i`
+3. Run `pnpm story:dev` to run histoire (storybook)
 
 ## Community
 

package.json

@@ -5,6 +5,7 @@
     "packages/*"
   ],
   "scripts": {
+    "story:dev": "pnpm --filter histoire story:dev",
     "build": "pnpm run -r --filter=!docs build",
     "start": "cd packages/radix-vue && pnpm i && pnpm run build && cd ../../playground/vue3 && pnpm i && pnpm i ../../packages/radix-vue && pnpm run dev"
   }

packages/radix-vue/package.json

@@ -31,9 +31,9 @@
   "keywords": [],
   "scripts": {
     "dev": "vite",
-    "build": "run-p format lint && run-p type-check build-only type-gen",
+    "build": "run-p format lint && run-p type-check build-only",
     "build-only": "rimraf dist && vite build",
-    "type-check": "vue-tsc --noEmit",
+    "type-check": "vue-tsc -p tsconfig.check.json --noEmit",
     "type-gen": "vue-tsc --declaration  --emitDeclarationOnly",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,css,md,vue}\" --ignore-path .gitignore",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -63,6 +63,7 @@
     "rimraf": "^5.0.1",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
+    "vite-plugin-dts": "^3.3.1",
     "vitest": "^0.33.0",
     "vue": "^3.3.4",
     "vue-tsc": "^1.8.1"