build: add eslint-plugin-perfectionist

Use the recommended-natural configuration and autofix issues

Make sure eslint is also run with the `--fix` option by lint-staged

.husky/pre-commit

@@ -1 +1 @@
-pnpm exec lint-staged
+lint-staged

eslint.config.mjs

@@ -1,10 +1,11 @@
-import globals from 'globals';
-import json from '@eslint/json';
 import js from '@eslint/js';
-import tseslint from 'typescript-eslint';
+import json from '@eslint/json';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
+import eslintPluginPerfectionist from 'eslint-plugin-perfectionist';
 import eslintPluginReact from 'eslint-plugin-react';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   {
@@ -35,8 +36,10 @@ export default tseslint.config(
     ...json.configs.recommended,
   },
   ...tseslint.configs.recommended,
+  eslintPluginPerfectionist.configs['recommended-natural'],
   {
     files: ['**/*.tsx'],
+    ignores: ['**/*.test.tsx'],
     ...eslintPluginReact.configs.flat.recommended,
     ...eslintPluginReact.configs.flat['jsx-runtime'],
     ...eslintPluginJsxA11y.flatConfigs.strict,
@@ -47,5 +50,11 @@ export default tseslint.config(
       '@typescript-eslint/no-require-imports': 'off',
     },
   },
+  {
+    files: ['**/*.test.ts', '**/*.test.tsx'],
+    languageOptions: {
+      globals: { ...globals.jest },
+    },
+  },
   eslintConfigPrettier,
 );

lint-staged.config.mjs

@@ -1,7 +1,7 @@
 export default {
-  '*': 'prettier --ignore-unknown --write',
+  '*.{css,scss}': ['stylelint --allow-empty-input --fix', 'prettier --write'],
+  '*.{js,cjs,mjs,jsx,ts,tsx}': ['eslint --no-error-on-unmatched-pattern --fix', 'prettier --write'],
+  '*.{yml,yaml}': 'prettier --write',
+  '*.md': ['markdownlint', 'prettier --write'],
   'package.json': 'npmPkgJsonLint --allowEmptyTargets',
-  '*.md': 'markdownlint',
-  '*.{js,cjs,mjs,json,jsx,mdx,ts,tsx}': 'eslint --no-error-on-unmatched-pattern',
-  '*.{css,scss}': 'stylelint --allow-empty-input',
 };

npmpackagejsonlint.config.cjs

@@ -1,4 +1,12 @@
 module.exports = {
+  overrides: [
+    {
+      patterns: ['proprietary/**/package.json'],
+      rules: {
+        'valid-values-license': ['error', ['SEE LICENSE IN LICENSE.md']],
+      },
+    },
+  ],
   rules: {
     'no-caret-version-dependencies': 'error',
     'no-caret-version-devDependencies': 'error',
@@ -8,12 +16,4 @@ module.exports = {
     'valid-values-license': ['error', ['EUPL-1.2']],
     'valid-values-name-scope': ['error', ['@nl-design-system-candidate']],
   },
-  overrides: [
-    {
-      patterns: ['proprietary/**/package.json'],
-      rules: {
-        'valid-values-license': ['error', ['SEE LICENSE IN LICENSE.md']],
-      },
-    },
-  ],
 };

package.json

@@ -36,6 +36,7 @@
     "eslint": "9.12.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-perfectionist": "3.9.1",
     "eslint-plugin-react": "7.37.1",
     "globals": "15.11.0",
     "husky": "9.1.6",

packages/components-react/paragraph-react/src/paragraph.test.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
+
 import { Paragraph } from './paragraph';
 
 describe('Paragraph', () => {

packages/components-react/paragraph-react/src/paragraph.tsx

@@ -1,6 +1,7 @@
+import type { HTMLAttributes } from 'react';
+
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import type { HTMLAttributes } from 'react';
 
 export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
   appearance?: 'lead' | 'small';

packages/storybook/config/main.ts

@@ -1,25 +1,25 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-docs',
     '@storybook/addon-viewport',
     '@whitespace/storybook-addon-html',
     '@etchteam/storybook-addon-status',
   ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
   core: {
     disableTelemetry: true,
     disableWhatsNewNotifications: true,
   },
   docs: {
     autodocs: 'tag',
   },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
 };
 
 export default config;

packages/storybook/config/preview.ts

@@ -1,29 +1,31 @@
 import type { Preview } from '@storybook/react';
+
 import { ParametersArgsDecorator } from './ParametersArgsDecorator';
 
 const preview: Preview = {
+  decorators: [ParametersArgsDecorator],
   parameters: {
     controls: { expanded: false },
     options: { panelPosition: 'right' },
     status: {
       statuses: {
-        PRODUCTION: {
-          background: '#088008',
-          color: '#ffffff',
+        ALPHA: {
+          background: '#e0bc2e',
+          color: '#000000',
           description:
-            'Used in production in a variety of situations, well tested, stable APIs, mostly patches and minor releases.',
+            'Used in prototypes and in projects that are still in development, breaking changes occur frequently and are not communicated.',
         },
         BETA: {
           background: '#3065ee',
           color: '#ffffff',
           description:
             'Used in production in a specific situation, evolving APIs based on feedback, breaking changes are still likely.',
         },
-        ALPHA: {
-          background: '#e0bc2e',
-          color: '#000000',
+        PRODUCTION: {
+          background: '#088008',
+          color: '#ffffff',
           description:
-            'Used in prototypes and in projects that are still in development, breaking changes occur frequently and are not communicated.',
+            'Used in production in a variety of situations, well tested, stable APIs, mostly patches and minor releases.',
         },
         'WORK IN PROGRESS': {
           background: '#cc0000',
@@ -34,7 +36,6 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [ParametersArgsDecorator],
 };
 
 export default preview;

packages/storybook/src/paragraph.stories.tsx

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { Paragraph } from '../../components-react/paragraph-react/src/paragraph';
 
 const meta = {
-  component: Paragraph,
   args: {
     children: 'Op brute wijze ving de schooljuf de quasi-kalme lynx.',
   },
+  component: Paragraph,
 } satisfies Meta<typeof Paragraph>;
 
 export default meta;

prettier.config.mjs

@@ -2,8 +2,6 @@
  * @type {import('prettier').Config}
  */
 export default {
-  printWidth: 120,
-  singleQuote: true,
   overrides: [
     {
       files: ['*.yml', '*.yaml'],
@@ -18,4 +16,6 @@ export default {
       },
     },
   ],
+  printWidth: 120,
+  singleQuote: true,
 };