refactor: typescript 5 + eslint 9 + antfu eslint

.github/ISSUE_TEMPLATE/config.yml

@@ -5,4 +5,4 @@ contact_links:
     about: Use GitHub discussions for message-board style questions and discussions.
   - name: Discord Chat
     url: https://discord.gg/KpCnT72rJk
-    about: Ask questions and discuss with other Histoire users in real time.
+    about: Ask questions and discuss with other Histoire users in real time.

.github/workflows/pr-title.yml

@@ -1,4 +1,4 @@
-name: "Check PR title"
+name: Check PR title
 
 on:
   pull_request_target:

.github/workflows/release-notes.yml

@@ -3,7 +3,7 @@ name: Create release
 on:
   push:
     tags:
-      - "v*" # Push events to matching v*, i.e. v1.0, v20.15.10
+      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
   workflow_dispatch:
 
 jobs:

.github/workflows/test-nuxt3.yml

@@ -62,7 +62,7 @@ jobs:
       - name: Run tests
         working-directory: ${{env.dir}}
         run: pnpm run ci
-      
+
       - uses: actions/upload-artifact@v2
         if: failure()
         with:

.github/workflows/test-svelte4.yml

@@ -62,7 +62,7 @@ jobs:
       - name: Run tests
         working-directory: ${{env.dir}}
         run: pnpm run ci
-      
+
       - uses: actions/upload-artifact@v2
         if: failure()
         with:

.github/workflows/test-vue3.yml

@@ -67,7 +67,6 @@ jobs:
   #           ./packages/*/dist
   #         retention-days: 1
 
-
   test:
     runs-on: ubuntu-latest
     name: Test
@@ -128,7 +127,7 @@ jobs:
           # the number of containers in the job matrix
           TOTAL_RUNNERS: 5
           THIS_RUNNER: ${{ matrix.containers }}
-      
+
       - uses: actions/upload-artifact@v2
         if: failure()
         with:

.github/workflows/test.yml

@@ -29,7 +29,7 @@ jobs:
         uses: pnpm/action-setup@v2.2.4
         with:
           version: 8.10.5
-  
+
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |

.stackblitz/codeflow.json

@@ -10,4 +10,4 @@
       "@histoire/plugin-screenshot": "./packages/historie-plugin-screenshot"
     }
   }
-}
+}

.vscode/settings.json

@@ -2,6 +2,35 @@
   "tailwindCSS.experimental.configFile": {
     "tailwind.config.cjs": "docs/**",
     "packages/histoire-app/tailwind.config.cjs": "packages/histoire-app/**",
-    "packages/histoire-controls/tailwind.config.cjs": "packages/histoire-controls/**",
-  }
-}
+    "packages/histoire-controls/tailwind.config.cjs": "packages/histoire-controls/**"
+  },
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "gql",
+    "graphql"
+  ]
+}

CODE_OF_CONDUCT.md

@@ -1,4 +1,3 @@
-
 # Contributor Covenant Code of Conduct
 
 ## Our Pledge

CONTRIBUTING.md

@@ -150,7 +150,6 @@ pnpm run test:dev
 
 - Make sure tests pass!
 
-
 - Commit messages must follow the [commit message convention](./.github/commit-convention.md) so that changelogs can be automatically generated.<!-- Commit messages are automatically validated before commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [yorkie](https://github.com/yyx990803/yorkie)). -->
 
 <!--

README.md

@@ -16,11 +16,11 @@
 [Read the Documentation](https://histoire.dev) |
 [Discord server](https://discord.gg/KpCnT72rJk) | [Discussions board](https://github.com/histoire-dev/histoire/discussions)
 
-⚡️ Lightning fast development and instant HMR thanks to [Vite](http://vitejs.dev)  
-👓 Build and visually test your components in isolation  
-📚 Document your components with stories and variants  
-📝 Generate source code examples automatically  
-🎨 Beautiful and customizable interface  
+⚡️ Lightning fast development and instant HMR thanks to [Vite](http://vitejs.dev)
+👓 Build and visually test your components in isolation
+📚 Document your components with stories and variants
+📝 Generate source code examples automatically
+🎨 Beautiful and customizable interface
 
 ![screenshot](./screenshot.png)
 

docs/.vitepress/theme/index.js

@@ -11,7 +11,7 @@ import DemoLinks from './DemoLinks.vue'
 
 export default {
   ...DefaultTheme,
-  enhanceApp ({ app }) {
+  enhanceApp({ app }) {
     app.use(FloatingVue, {
       themes: {
         dropdown: {

docs/examples/visual-regression-testing/lost-pixel.md

@@ -6,7 +6,7 @@ Lost Pixel is a [modern open-source visual regression testing tool](https://gith
 
 Lost Pixel has first-class Histoire support meaning that you don't need to do much to add visual tests to your app if you have your Histoire book ready!
 
-Start with installing lost-pixel by `npm install lost-pixel` and creating a `lostpixel.config.js|ts` file with following contents. 
+Start with installing lost-pixel by `npm install lost-pixel` and creating a `lostpixel.config.js|ts` file with following contents.
 
 ```javascript
 import { CustomProjectConfig } from 'lost-pixel';
@@ -44,7 +44,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: 'npm'
+          cache: npm
 
       - name: Install dependencies
         run: npm install

docs/examples/visual-regression-testing/percy.md

@@ -2,7 +2,6 @@
 
 You need the [Percy CLI](https://docs.percy.io/docs/cli-overview) installed to be able to send snapshots to Percy.
 
-
 ```bash
 pnpm add -D @histoire/plugin-percy
 ```

docs/examples/vue3/controlled-stories.md

@@ -12,7 +12,7 @@ import { reactive } from 'vue'
 import MyComponent from './MyComponent.vue'
 
 const state = reactive({
-  text: "Hello world"
+  text: 'Hello world'
 })
 </script>
 
@@ -36,7 +36,7 @@ import { reactive } from 'vue'
 import MyComponent from './MyComponent.vue'
 
 const state = reactive({
-  text: "Hello world"
+  text: 'Hello world'
 })
 </script>
 
@@ -65,7 +65,7 @@ import { reactive } from 'vue'
 import MyComponent from './MyComponent.vue'
 
 const state = reactive({
-  text: "Hello world"
+  text: 'Hello world'
 })
 </script>
 
@@ -92,16 +92,16 @@ This will isolate each variant so that you control only one variant at a time.
 <script lang="ts" setup>
 import MyComponent from './MyComponent.vue'
 
-function initState () {
+function initState() {
   return {
-    text: "Hello world"
+    text: 'Hello world'
   }
 }
 </script>
 
 <template>
   <Story title="MyStory">
-    <Variant 
+    <Variant
       title="MyVariant Red"
       :init-state="initState"
     >

docs/examples/vue3/single-stories.md

@@ -36,4 +36,3 @@ import MyComponent from './MyComponent.vue'
   </Story>
 </template>
 ```
-

docs/examples/vue3/variant-stories.md

@@ -55,7 +55,7 @@ When you have a lot of variant to test, it can be easier to auto generated them
 <script lang="ts" setup>
 import MyComponent from './MyComponent.vue'
 
-const arguments = ["hello", "world", "etc", "..."];
+const args = ['hello', 'world', 'etc', '...']
 </script>
 
 <template>
@@ -64,9 +64,9 @@ const arguments = ["hello", "world", "etc", "..."];
     :layout="{ type: 'grid', width: '200px' }"
   >
     <Variant
-      v-for="(argument, key) of arguments"
+      v-for="(argument, key) of args"
       :key="key"
-      :title="'MyVariant ' + key"
+      :title="`MyVariant ${key}`"
     >
       <MyComponent :argument="argument" />
     </Variant>
@@ -83,10 +83,10 @@ When your variants have a lot of arguments, you can use this pattern.
 import MyComponent from './MyComponent.vue'
 
 const propsVariants = [
-  { argument: "hello", color: "red", count:4 },
-  { argument: "world", color: "blue", count:5 },
-  { argument: "etc", color: "violet", count:6 },
-];
+  { argument: 'hello', color: 'red', count: 4 },
+  { argument: 'world', color: 'blue', count: 5 },
+  { argument: 'etc', color: 'violet', count: 6 },
+]
 </script>
 
 <template>
@@ -97,7 +97,7 @@ const propsVariants = [
     <Variant
       v-for="(props, key) of propsVariants"
       :key="key"
-      :title="'MyVariant ' + key"
+      :title="`MyVariant ${key}`"
     >
       <MyComponent v-bind="props" />
     </Variant>