feat: migrate to ESLint flat config

.gitignore

@@ -35,3 +35,4 @@ test-results/
 playwright-report/
 vite.config.ts.timestamp*
 */.vitepress/cache
+.eslintcache

.histoire/package.json

@@ -8,6 +8,14 @@
  "story:build": "histoire build",
  "story:preview": "histoire preview"
  },
+ "peerDependencies": {
+ "@vitejs/plugin-vue": "*",
+ "@vueuse/components": "*",
+ "@vueuse/core": "*",
+ "@vueuse/shared": "*",
+ "vite": "*",
+ "vue": "*"
+ },
  "devDependencies": {
  "@antfu/eslint-config": "^0.39.7",
  "@floating-ui/dom": "^1.4.2",
@@ -22,13 +30,5 @@
  "postcss": "^8.4.33",
  "tailwindcss": "^3.4.1",
  "tailwindcss-animate": "1.0.7"
- },
- "peerDependencies": {
- "@vitejs/plugin-vue": "*",
- "@vueuse/components": "*",
- "@vueuse/core": "*",
- "@vueuse/shared": "*",
- "vite": "*",
- "vue": "*"
  }
 }

.histoire/postcss.config.js

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

.histoire/tailwind.config.js

@@ -1,11 +1,11 @@
-import { blackA, green, grass, mauve, slate, violet, red, indigo, purple, teal } from "@radix-ui/colors";
-import plugin from "tailwindcss/plugin";
-import animate from "tailwindcss-animate";
+import { blackA, grass, green, indigo, mauve, purple, red, slate, teal, violet } from '@radix-ui/colors'
+import plugin from 'tailwindcss/plugin'
+import animate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
 export default {
- darkMode: "class",
- content: ["../packages/radix-vue/src/**/*.vue"],
+ darkMode: 'class',
+ content: ['../packages/radix-vue/src/**/*.vue'],
  theme: {
  extend: {
  colors: {
@@ -17,8 +17,8 @@ export default {
  ...red,
  ...indigo,
  ...purple,
- ...teal, 
- ...slate, 
+ ...teal,
+ ...slate,
  },
  keyframes: {
  overlayShow: {
@@ -30,64 +30,64 @@ export default {
  to: { opacity: 0 },
  },
  contentShow: {
- from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
- to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+ from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
+ to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
  },
  contentHide: {
- from: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
- to: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
+ from: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+ to: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
  },
  slideDownAndFade: {
- from: { opacity: 0, transform: "translateY(-2px)" },
- to: { opacity: 1, transform: "translateY(0)" },
+ from: { opacity: 0, transform: 'translateY(-2px)' },
+ to: { opacity: 1, transform: 'translateY(0)' },
  },
  slideDownAndHide: {
- from: { opacity: 1, transform: "translateY(0)" },
- to: { opacity: 0, transform: "translateY(-2px)" },
+ from: { opacity: 1, transform: 'translateY(0)' },
+ to: { opacity: 0, transform: 'translateY(-2px)' },
  },
  slideLeftAndFade: {
- from: { opacity: 0, transform: "translateX(2px)" },
- to: { opacity: 1, transform: "translateX(0)" },
+ 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)" },
+ 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)" },
+ from: { opacity: 0, transform: 'translateX(-2px)' },
+ to: { opacity: 1, transform: 'translateX(0)' },
  },
  slideDown: {
  from: { height: 0 },
- to: { height: "var(--radix-collapsible-content-height)" },
+ to: { height: 'var(--radix-collapsible-content-height)' },
  },
  slideUp: {
- from: { height: "var(--radix-collapsible-content-height)" },
+ from: { height: 'var(--radix-collapsible-content-height)' },
  to: { height: 0 },
  },
  enterFromRight: {
- from: { opacity: 0, transform: "translateX(200px)" },
- to: { opacity: 1, transform: "translateX(0)" },
+ 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)" },
+ 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)" },
+ 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)" },
+ 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)" },
+ 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)" },
+ from: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
+ to: { opacity: 0, transform: 'rotateX(-10deg) scale(0.95)' },
  },
  fadeIn: {
  from: { opacity: 0 },
@@ -103,14 +103,14 @@ export default {
  height: 0,
  },
  to: {
- width: "var(--radix-accordion-content-width)",
- height: "var(--radix-accordion-content-height)",
+ 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)",
+ width: 'var(--radix-accordion-content-width)',
+ height: 'var(--radix-accordion-content-height)',
  },
  to: {
  width: 0,
@@ -131,27 +131,27 @@ export default {
  },
  },
  animation: {
- overlayShow: "overlayShow 300ms cubic-bezier(0.16, 1, 0.3, 1)",
- overlayHide: "overlayHide 300ms cubic-bezier(0.16, 1, 0.3, 1)",
- contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
- contentHide: "contentHide 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)",
- slideDownAndHide: "slideDownAndHide 200ms 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",
+ overlayShow: 'overlayShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+ overlayHide: 'overlayHide 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+ contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+ contentHide: 'contentHide 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)',
+ slideDownAndHide: 'slideDownAndHide 200ms 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',
  hide: 'hide 100ms ease-in',
  slideIn: 'slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
  swipeOut: 'swipeOut 100ms ease-out',
@@ -162,10 +162,10 @@ export default {
  animate,
  plugin(({ matchUtilities }) => {
  matchUtilities({
- perspective: (value) => ({
+ perspective: value => ({
  perspective: value,
  }),
- });
+ })
  }),
  ],
-};
+}

.histoire/vite.config.ts

@@ -1,10 +1,10 @@
-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"; 
+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);
+const projectRootDir = resolve(__dirname)
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,44 +13,44 @@ export default defineConfig({
  alias({
  entries: [
  {
- find: "@",
- replacement: resolve(projectRootDir, "../packages/radix-vue/src"),
+ find: '@',
+ replacement: resolve(projectRootDir, '../packages/radix-vue/src'),
  },
  ],
  }),
  ],
  resolve: {
  alias: {
- "@iconify/vue": "./node_modules/@iconify/vue/dist/iconify.mjs",
+ '@iconify/vue': './node_modules/@iconify/vue/dist/iconify.mjs',
  },
  },
  histoire: {
  viteNodeInlineDeps: [/@tanstack/],
- plugins: [{ name: "builtin:tailwind-tokens" }, HstVue()],
- setupFile: "./setup.ts",
- storyMatch: [resolve(projectRootDir, "../packages/radix-vue/src/**/*.story.vue")],
- outDir: "./dist",
+ plugins: [{ name: 'builtin:tailwind-tokens' }, HstVue()],
+ setupFile: './setup.ts',
+ storyMatch: [resolve(projectRootDir, '../packages/radix-vue/src/**/*.story.vue')],
+ outDir: './dist',
  tree: {
  groups: [
- { title: "Components", include: (file) => true },
- { id: "utilities", title: "Utilities" },
+ { title: 'Components', include: _file => true },
+ { id: 'utilities', title: 'Utilities' },
  ],
  },
  theme: {
- title: "Radix Vue",
+ title: 'Radix Vue',
  logo: {
  square: '../docs/content/public/logo.svg',
  light: '../docs/content/public/logo.svg',
  dark: '../docs/content/public/logo.svg',
- }, 
+ },
  },
  },
 
  server: {
  fs: {
  // Allow serving files from two level up to the project root
- allow: [".."],
+ allow: ['..'],
  },
- host: true
+ host: true,
  },
-});
+})