@vp-tw/eslint-config 0.0.1 → 0.0.2

package/README.md

@@ -3,9 +3,13 @@
 ViPro's ESLint configuration.
 
 - Built on top of [antfu/eslint-config](https://github.com/antfu/eslint-config).
-- Uses [Prettier](https://github.com/prettier/prettier) for code formatting.
-- Integrates with [eslint-mdx](https://github.com/mdx-js/eslint-mdx).
-- Fine-tuned to provide an opinionated, optimal DX.
+- Integrates with:
+  - [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
+  - [eslint-mdx](https://github.com/mdx-js/eslint-mdx).
+  - [eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook)
+- Fine-tuned to provide an opinionated, optimal DX. Please copy the VSCode settings from [eslint-config.code-workspace](https://github.com/VdustR/eslint-config/blob/main/eslint-config.code-workspace).
+
+Click [here](https://vdustr.dev/eslint-config) to preview the ESLint inspection.
 
 ## License
 

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@vp-tw/eslint-config",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "ViPro's ESLint configuration",
+  "homepage": "https://github.com/vdustr/eslint-config",
+  "author": {
+    "name": "ViPro",
+    "url": "https://vdustr.dev"
+  },
   "exports": {
     ".": {
       "import": {
@@ -41,8 +46,9 @@
     "eslint-flat-config-utils": "^2.0.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-package-json": "^0.21.1",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124"
+    "eslint-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
+    "eslint-plugin-storybook": "^0.11.2",
+    "local-pkg": "^1.0.0"
   },
   "devDependencies": {
     "eslint-typegen": "^1.0.0",
@@ -53,9 +59,7 @@
   },
   "scripts": {
     "build": "unbuild",
-    "copy": "run-p copy:*",
-    "copy:license": "fse copy ../../LICENSE LICENSE",
-    "copy:readme": "fse copy ../../README.md README.md",
+    "copy": "tsx scripts/copy",
     "typegen": "tsx scripts/typegen.ts"
   }
 }

package/scripts/copy.ts

@@ -0,0 +1,23 @@
+import fs from "fs-extra";
+import path from "pathe";
+import { packageDirectory } from "pkg-dir";
+
+const filesToCopy = ["README.md", "LICENSE"] satisfies Array<string>;
+
+(async () => {
+  const pkgDir = await packageDirectory();
+  if (!pkgDir) {
+    throw new Error("Could not find package directory");
+  }
+  const rootPkgDir = await packageDirectory({
+    cwd: path.resolve(pkgDir, ".."),
+  });
+
+  if (!rootPkgDir) {
+    throw new Error("Could not find root package directory");
+  }
+
+  for (const file of filesToCopy) {
+    await fs.copyFile(path.join(rootPkgDir, file), path.join(pkgDir, file));
+  }
+})();

package/scripts/typegen.ts

@@ -1,6 +1,7 @@
 import type { ESLint } from "eslint";
-import { rules } from "eslint-plugin-mdx/lib/rules";
+import { rules as mdxRules } from "eslint-plugin-mdx/lib/rules";
 import reactCompiler from "eslint-plugin-react-compiler";
+import storybook from "eslint-plugin-storybook";
 import { pluginsToRulesDTS } from "eslint-typegen/core";
 import fs from "fs-extra";
 import path from "pathe";
@@ -25,9 +26,18 @@ import { packageDirectory } from "pkg-dir";
     ...definePlugins({ "react-compiler": reactCompiler }),
     ...definePlugins({
       mdx: {
-        rules,
+        rules: mdxRules,
       },
     }),
+    ...definePlugins({
+      ...Object.fromEntries(
+        storybook.configs["flat/csf-strict"].flatMap((config) =>
+          !("plugins" in config) || !config.plugins
+            ? []
+            : Object.entries(config.plugins),
+        ),
+      ),
+    }),
   };
 
   await fs.writeFile(targetPath, await pluginsToRulesDTS(plugins));

package/src/configs/mdx.ts

@@ -1,14 +1,15 @@
 import type { TypedFlatConfigItem } from "@antfu/eslint-config";
 import type { DistributiveOmit } from "@mui/types";
-import type { Config } from "../types";
+import { defaultPluginRenaming, renameRules } from "@antfu/eslint-config";
 
+// eslint-disable-next-line import/no-namespace -- `mdx` exports the plugin as a namespace.
 import * as mdxPlugin from "eslint-plugin-mdx";
 
 namespace mdx {
   export interface Options
     extends DistributiveOmit<TypedFlatConfigItem, "processor"> {
     processorOptions?: mdxPlugin.ProcessorOptions;
-    flatCodeBlocks?: boolean | Config;
+    flatCodeBlocks?: boolean | TypedFlatConfigItem;
   }
 }
 
@@ -16,12 +17,23 @@ const mdx = ({
   flatCodeBlocks = true,
   processorOptions,
   ...options
-}: mdx.Options = {}) =>
-  [
+}: mdx.Options = {}) => {
+  const flatCodeBlocksOptions: TypedFlatConfigItem =
+    typeof flatCodeBlocks !== "object" ? {} : flatCodeBlocks;
+  return [
     {
       name: "vdustr/mdx",
       ...mdxPlugin.flat,
       ...options,
+      rules: {
+        ...renameRules(
+          {
+            ...mdxPlugin.flat.rules,
+          },
+          defaultPluginRenaming,
+        ),
+        ...options.rules,
+      },
       processor: mdxPlugin.createRemarkProcessor({
         lintCodeBlocks: Boolean(flatCodeBlocks),
         ...processorOptions,
@@ -36,9 +48,19 @@ const mdx = ({
           {
             name: "vdustr/mdx/flat-code-blocks",
             ...mdxPlugin.flatCodeBlocks,
-            ...(typeof flatCodeBlocks !== "object" ? null : flatCodeBlocks),
-          } satisfies Config,
+            ...flatCodeBlocksOptions,
+            rules: {
+              ...renameRules(
+                {
+                  ...mdxPlugin.flatCodeBlocks.rules,
+                },
+                defaultPluginRenaming,
+              ),
+              ...flatCodeBlocksOptions.rules,
+            },
+          } satisfies TypedFlatConfigItem,
         ]),
-  ] satisfies Array<Config>;
+  ] satisfies Array<TypedFlatConfigItem>;
+};
 
 export { mdx };

package/src/configs/prettier.ts

@@ -1,12 +1,12 @@
-import type { Config } from "../types";
-import { defaultPluginRenaming, renameRules } from "@antfu/eslint-config";
+import type { TypedFlatConfigItem } from "@antfu/eslint-config";
 
 import eslintConfigPrettier from "eslint-config-prettier";
+import { renameRules } from "../utils/renameRules";
 
-const prettier: Config = {
+const prettier = {
   name: "vdustr/prettier",
   ...eslintConfigPrettier,
-  rules: renameRules(eslintConfigPrettier.rules, defaultPluginRenaming),
-};
+  rules: renameRules(eslintConfigPrettier.rules),
+} satisfies TypedFlatConfigItem;
 
 export { prettier };

package/src/configs/storybook.ts

@@ -0,0 +1,20 @@
+import type { TypedFlatConfigItem } from "@antfu/eslint-config";
+import storybookPlugin from "eslint-plugin-storybook";
+import { renameRules } from "../utils/renameRules";
+
+const storybook = storybookPlugin.configs["flat/csf-strict"].map((config) => {
+  const allConfig = config as TypedFlatConfigItem;
+  const { rules, files, plugins, ...rest } = allConfig;
+  return {
+    ...rest,
+    ...(!rules
+      ? null
+      : {
+          rules: renameRules(rules),
+        }),
+    ...(!files ? null : { files }),
+    ...(!plugins ? null : { plugins }),
+  } satisfies TypedFlatConfigItem;
+});
+
+export { storybook };

package/src/eslint-typegen.d.ts

@@ -17,10 +17,90 @@ export interface RuleOptions {
    * Surfaces diagnostics from React Forget
    */
   'react-compiler/react-compiler'?: Linter.RuleEntry<ReactCompilerReactCompiler>
+  /**
+   * Interactions should be awaited
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/await-interactions.md
+   */
+  'storybook/await-interactions'?: Linter.RuleEntry<[]>
+  /**
+   * Pass a context when invoking play function of another story
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/context-in-play-function.md
+   */
+  'storybook/context-in-play-function'?: Linter.RuleEntry<[]>
+  /**
+   * The component property should be set
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/csf-component.md
+   */
+  'storybook/csf-component'?: Linter.RuleEntry<[]>
+  /**
+   * Story files should have a default export
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/default-exports.md
+   */
+  'storybook/default-exports'?: Linter.RuleEntry<[]>
+  /**
+   * Deprecated hierarchy separator in title property
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/hierarchy-separator.md
+   */
+  'storybook/hierarchy-separator'?: Linter.RuleEntry<[]>
+  /**
+   * Meta should only have inline properties
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/meta-inline-properties.md
+   */
+  'storybook/meta-inline-properties'?: Linter.RuleEntry<StorybookMetaInlineProperties>
+  /**
+   * A story should not have a redundant name property
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/no-redundant-story-name.md
+   */
+  'storybook/no-redundant-story-name'?: Linter.RuleEntry<[]>
+  /**
+   * storiesOf is deprecated and should not be used
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/no-stories-of.md
+   */
+  'storybook/no-stories-of'?: Linter.RuleEntry<[]>
+  /**
+   * Do not define a title in meta
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/no-title-property-in-meta.md
+   */
+  'storybook/no-title-property-in-meta'?: Linter.RuleEntry<[]>
+  /**
+   * This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name.
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/no-uninstalled-addons.md
+   */
+  'storybook/no-uninstalled-addons'?: Linter.RuleEntry<StorybookNoUninstalledAddons>
+  /**
+   * Stories should use PascalCase
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/prefer-pascal-case.md
+   */
+  'storybook/prefer-pascal-case'?: Linter.RuleEntry<[]>
+  /**
+   * A story file must contain at least one story export
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/story-exports.md
+   */
+  'storybook/story-exports'?: Linter.RuleEntry<[]>
+  /**
+   * Use expect from `@storybook/test` or `@storybook/jest`
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/use-storybook-expect.md
+   */
+  'storybook/use-storybook-expect'?: Linter.RuleEntry<[]>
+  /**
+   * Do not use testing-library directly on stories
+   * @see https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/use-storybook-testing-library.md
+   */
+  'storybook/use-storybook-testing-library'?: Linter.RuleEntry<[]>
 }
 
 /* ======= Declarations ======= */
 // ----- react-compiler/react-compiler -----
 type ReactCompilerReactCompiler = []|[{
   [k: string]: unknown | undefined
+}]
+// ----- storybook/meta-inline-properties -----
+type StorybookMetaInlineProperties = []|[{
+  csfVersion?: number
+}]
+// ----- storybook/no-uninstalled-addons -----
+type StorybookNoUninstalledAddons = []|[{
+  packageJsonLocation?: string
+  ignore?: string[]
+  [k: string]: unknown | undefined
 }]

package/src/tsconfig.json

@@ -1,4 +1,3 @@
 {
-  "extends": ["@vp-tw/tsconfig/base/bundler/tsconfig"],
-  "include": [".", "../lib"]
+  "extends": ["@vp-tw/tsconfig/base/bundler/tsconfig"]
 }

package/src/utils/renameRules.ts

@@ -0,0 +1,7 @@
+import { defaultPluginRenaming, renameRules } from "@antfu/eslint-config";
+
+function renameRulesInternal(rules: Parameters<typeof renameRules>[0]) {
+  return renameRules(rules, defaultPluginRenaming);
+}
+
+export { renameRulesInternal as renameRules };

package/src/vdustr.ts

@@ -2,18 +2,25 @@ import type { Config } from "./types";
 import antfu from "@antfu/eslint-config";
 import packageJson from "eslint-plugin-package-json/configs/recommended";
 
+// eslint-disable-next-line import/no-namespace -- This is a cjs module.
 import * as reactCompilerPlugin from "eslint-plugin-react-compiler";
+import { isPackageExists } from "local-pkg";
 import { mdx } from "./configs/mdx";
 import { prettier } from "./configs/prettier";
+import { storybook } from "./configs/storybook";
 import "./eslint-typegen.d";
 
 type Options = NonNullable<Parameters<typeof antfu>[0]> & {
   mdx?: boolean | mdx.Options;
+  storybook?: boolean;
 };
 
 const vdustr = (options?: Options, ...userConfigs: Array<Config>) => {
-  const mdxOptions = options?.mdx ?? true;
+  const typescriptEnabled = isPackageExists("typescript");
   const jsoncEnabled: boolean = Boolean(options?.jsonc ?? true);
+  const reactEnabled: boolean = Boolean(options?.react ?? false);
+  const storybookEnabled: boolean = Boolean(options?.storybook ?? false);
+  const mdxOptions = options?.mdx ?? true;
   type Config = NonNullable<Parameters<typeof antfu>[1]>;
   const defaultConfigs: Array<Config> = [
     ...(!jsoncEnabled ? [] : [packageJson]),
@@ -22,9 +29,10 @@ const vdustr = (options?: Options, ...userConfigs: Array<Config>) => {
       : mdx({
           ...(typeof mdxOptions !== "object" ? null : mdxOptions),
         })),
+    ...(!storybookEnabled ? [] : storybook),
     prettier,
   ];
-  return antfu(
+  let config = antfu(
     {
       // We use `prettier`.
       stylistic: false,
@@ -32,7 +40,9 @@ const vdustr = (options?: Options, ...userConfigs: Array<Config>) => {
     },
     ...defaultConfigs,
     ...userConfigs,
-  )
+  );
+
+  config = config
     .override("antfu/javascript/rules", (config) => ({
       ...config,
       rules: {
@@ -61,9 +71,40 @@ const vdustr = (options?: Options, ...userConfigs: Array<Config>) => {
          * Forbid `import {} from "module"`.
          */
         "import/no-empty-named-blocks": "error",
+
+        /**
+         * Wildcard imports can prevent tree shaking and cause name conflicts.
+         * Consider using named imports instead.
+         */
+        "import/no-namespace": "error",
+
+        /**
+         * Enforcing named exports improves consistency, enhances auto-completion and refactoring, and avoids issues
+         * with default export renaming. Additionally, default exports might lead to different behavior when transformed
+         * to CJS.
+         */
+        "import/no-default-export": "error",
       },
     }))
-    .override("antfu/typescript/rules", (config) => ({
+
+    /**
+     * Allow default exports in certain files.
+     */
+    .insertAfter("antfu/imports/rules", {
+      name: "vdustr/allow-default-export",
+      rules: {
+        "import/no-default-export": "off",
+      },
+      files: [
+        "**/*.config.*",
+        // Single file components
+        "**/*.vue",
+        "**/*.svelte",
+      ],
+    });
+
+  if (typescriptEnabled) {
+    config = config.override("antfu/typescript/rules", (config) => ({
       ...config,
       rules: {
         ...config.rules,
@@ -84,25 +125,32 @@ const vdustr = (options?: Options, ...userConfigs: Array<Config>) => {
          */
         "ts/no-unused-vars": "off",
       },
-    }))
-    .override("antfu/jsonc/rules", (config) => ({
-      ...config,
-      rules: {
-        ...config.rules,
-        "jsonc/sort-keys": "error",
-      },
-      files: [...(config.files ?? []), "**/*.code-workspace"],
-      ignores: [
-        ...(config.ignores ?? []),
-        /**
-         * Lint `package.json` files with `eslint-plugin-package-json` instead.
-         */
-        "**/package.json",
-      ],
-    }))
-    .remove("antfu/sort/package-json")
-    .remove("antfu/sort/tsconfig-json")
-    .override("antfu/react/rules", (config) => ({
+    }));
+  }
+
+  if (jsoncEnabled) {
+    config = config
+      .override("antfu/jsonc/rules", (config) => ({
+        ...config,
+        rules: {
+          ...config.rules,
+          "jsonc/sort-keys": "error",
+        },
+        files: [...(config.files ?? []), "**/*.code-workspace"],
+        ignores: [
+          ...(config.ignores ?? []),
+          /**
+           * Lint `package.json` files with `eslint-plugin-package-json` instead.
+           */
+          "**/package.json",
+        ],
+      }))
+      .remove("antfu/sort/package-json")
+      .remove("antfu/sort/tsconfig-json");
+  }
+
+  if (reactEnabled) {
+    config = config.override("antfu/react/rules", (config) => ({
       ...config,
       plugins: {
         ...config.plugins,
@@ -118,6 +166,19 @@ const vdustr = (options?: Options, ...userConfigs: Array<Config>) => {
         "react/prefer-destructuring-assignment": "off",
       },
     }));
+  }
+
+  if (storybookEnabled) {
+    config = config.override("storybook:csf:stories-rules", (config) => ({
+      ...config,
+      rules: {
+        ...config.rules,
+        "import/no-default-export": "off",
+      },
+    }));
+  }
+
+  return config;
 };
 
 export { vdustr };

package/tsconfig.json

@@ -1,4 +1,4 @@
 {
-  "exclude": ["dist", "src", "node_modules"],
+  "exclude": ["configs", "./*.ts", "src/lib"],
   "extends": ["@vp-tw/tsconfig/base/bundler/tsconfig"]
 }