build: format code with Perfectionist

components/icon/src/build.js

@@ -3,9 +3,9 @@ const lodash = require('lodash');
 const argv = require('minimist')(process.argv.slice(2), {
   string: ['prefix', 'path'],
 });
-const { readdir, readFile, writeFile, mkdir } = require('node:fs/promises');
+const { mkdir, readdir, readFile, writeFile } = require('node:fs/promises');
 const path = require('path');
-const { component, test, generateIconsName, style, iconContainerComponent } = require('./component_templates.js');
+const { component, generateIconsName, iconContainerComponent, style, test } = require('./component_templates.js');
 
 const { kebabCase } = lodash;
 const componentPrefix = `${argv.prefix}-`;

components/icon/svgo.config.mjs

@@ -1,9 +1,9 @@
 export default {
-  multipass: true,
   js2svg: {
     indent: 2,
     pretty: true,
   },
+  multipass: true,
   plugins: [
     "preset-default",
     "removeDimensions",

eslint.config.mjs

@@ -1,24 +1,3 @@
-// import config from "@nl-design-system/eslint-config";
-
-// export default [
-//   ...config,
-//   {
-//     name: "rotterdam/global-ignores",
-//     ignores: [
-//       "build/",
-//       "coverage/",
-//       "dist/",
-//       "target/",
-//       "tmp/",
-//       "components/components.d.ts",
-//       "packages/web-components-angular/src/directives/angular-component-lib/utils.ts",
-//       "packages/web-components-angular/src/directives/proxies.ts",
-//       "packages/web-components-stencil/loader",
-//       "packages/web-components-react/src/react-component-lib/",
-//       "packages/web-components-react/src/components.ts",
-//     ],
-//   },
-// ];
 import js from "@eslint/js";
 import json from "@eslint/json";
 import eslintConfigPrettier from "eslint-config-prettier";
@@ -49,15 +28,15 @@ export default tseslint.config(
       "packages/web-components-react/src/components.ts",
     ],
   },
-  // {
-  //   name: "nl-design-system/plugins-settings",
-  //   plugins: { perfectionist, react },
-  //   settings: {
-  //     react: {
-  //       version: "detect",
-  //     },
-  //   },
-  // },
+  {
+    name: "nl-design-system/plugins-settings",
+    plugins: { perfectionist, react },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
   {
     name: "@eslint/js/recommended",
     files: [
@@ -75,10 +54,10 @@ export default tseslint.config(
     extends: [...tseslint.configs.strict],
     files: ["**/*.ts", "**/*.mts", "**/*.tsx"],
   },
-  // {
-  //   name: "eslint-plugin-perfectionist/recommended-natural",
-  //   ...perfectionist["recommended-natural"],
-  // },
+  {
+    name: "eslint-plugin-perfectionist/recommended-natural",
+    ...perfectionist["recommended-natural"],
+  },
   {
     name: "eslint-plugin-react/recommended",
     files: ["**/*.jsx", "**/*.tsx"],
@@ -130,7 +109,6 @@ export default tseslint.config(
     // This section applies to all files
     name: "nl-design-system/all",
     rules: {
-      "typescript-eslint/no-unused-expressions": "off",
       "array-callback-return": ["error", { checkForEach: false }],
       "block-scoped-var": "error",
       "consistent-return": "error",
@@ -160,25 +138,26 @@ export default tseslint.config(
       "no-useless-concat": "error",
       "no-useless-return": "error",
       "no-void": "error",
-      // "perfectionist/sort-imports": [
-      //   "error",
-      //   {
-      //     ignoreCase: false,
-      //     newlinesBetween: "never",
-      //   },
-      // ],
-      // "perfectionist/sort-objects": [
-      //   "error",
-      //   {
-      //     customGroups: {
-      //       first: ["id", "name"],
-      //       last: ["overrides"],
-      //     },
-      //     groups: ["first", "unknown", "last"],
-      //   },
-      // ],
+      "perfectionist/sort-imports": [
+        "error",
+        {
+          ignoreCase: false,
+          newlinesBetween: "never",
+        },
+      ],
+      "perfectionist/sort-objects": [
+        "error",
+        {
+          customGroups: {
+            first: ["id", "name"],
+            last: ["overrides"],
+          },
+          groups: ["first", "unknown", "last"],
+        },
+      ],
       "prefer-regex-literals": "error",
       radix: "error",
+      "typescript-eslint/no-unused-expressions": "off",
       yoda: "error",
     },
   },

packages/components-css/rollup.config.mjs

@@ -1,20 +1,20 @@
-import postcss from "rollup-plugin-postcss";
 import discardDuplicates from "postcss-discard-duplicates";
+import postcss from "rollup-plugin-postcss";
 
 export default [
   {
     input: "src/index.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },

packages/components-react/rollup.config.mjs

@@ -5,8 +5,8 @@ import { readFileSync } from "fs";
 import filesize from "rollup-plugin-filesize";
 import nodeExternal from "rollup-plugin-node-externals";
 import nodePolyfills from "rollup-plugin-node-polyfills";
-import postcss from "rollup-plugin-postcss";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
 import typescript from "rollup-plugin-typescript2";
 
 const packageJson = JSON.parse(readFileSync("./package.json", "utf8"));
@@ -23,22 +23,22 @@ export const outputGlobals = {
 
 export default [
   {
+    external: [/@babel\/runtime/, "react-dom", "react"],
     input: "src/index.ts",
     output: [
       {
         file: packageJson.main,
         format: "cjs",
-        sourcemap: true,
         globals: outputGlobals,
+        sourcemap: true,
       },
       {
         file: packageJson.module,
         format: "esm",
-        sourcemap: true,
         globals: outputGlobals,
+        sourcemap: true,
       },
     ],
-    external: [/@babel\/runtime/, "react-dom", "react"],
     plugins: [
       peerDepsExternal({ includeDependencies: true }),
       nodeExternal(),
@@ -53,12 +53,12 @@ export default [
       }),
       typescript({ includeDependencies: false }),
       babel({
-        presets: ["@babel/preset-react"],
         babelHelpers: "runtime",
         exclude: ["node_modules/**", "dist/**"],
         extensions: [".ts", ".tsx"],
         inputSourceMap: true,
         plugins: ["@babel/plugin-transform-runtime"],
+        presets: ["@babel/preset-react"],
       }),
       filesize(),
     ],

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

@@ -1,7 +1,7 @@
+import { describe, expect, it } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Button } from './Button';
-import { describe, expect, it } from '@jest/globals';
 import '@testing-library/jest-dom';
 
 describe('Button', () => {

packages/components-react/vite.config.ts

@@ -6,9 +6,9 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   build: {
     lib: {
+      name: 'Components React',
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(__dirname, 'src/index.ts'),
-      name: 'Components React',
       // the proper extensions will be added
       fileName: 'components-react',
     },

packages/mendix-css/rollup.config.mjs

@@ -1,36 +1,36 @@
-import postcss from "rollup-plugin-postcss";
 import discardDuplicates from "postcss-discard-duplicates";
+import postcss from "rollup-plugin-postcss";
 
 export default [
   {
     input: "src/mendix-nl-design-system-rotterdam-theme.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },
   {
     input: "src/mendix-nl-design-system-theme.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },
@@ -53,16 +53,16 @@ export default [
   {
     input: "src/mendix-default-theme.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },

packages/storybook/config/main.ts

@@ -1,7 +1,6 @@
 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',
@@ -10,10 +9,6 @@ const config: StorybookConfig = {
     '@storybook/addon-designs',
     '@storybook/addon-themes',
   ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
   core: {
     disableTelemetry: true,
     disableWhatsNewNotifications: true,
@@ -22,7 +17,12 @@ const config: StorybookConfig = {
     autodocs: true,
   },
   features: {},
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
   staticDirs: ['../../../proprietary/assets/src'],
+  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
 };
 
 export default config;

packages/storybook/config/preview.tsx

@@ -1,9 +1,9 @@
 import '@gemeente-rotterdam/design-tokens/dist/index.css';
 import '@gemeente-rotterdam/font/src/index.scss';
+import type { Preview } from '@storybook/react';
 import { defineCustomElements } from '@gemeente-rotterdam/web-components-stencil/loader/index.js';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Controls, Description, Primary, Stories } from '@storybook/blocks';
-import type { Preview } from '@storybook/react';
 import { ButtonGroup, Document } from '@utrecht/component-library-react/dist/css-module';
 import { FigmaBlock } from './FigmaBlock';
 import { GitHubBlock } from './GitHubBlock';
@@ -13,11 +13,11 @@ defineCustomElements();
 const preview: Preview = {
   decorators: [
     withThemeByClassName({
+      defaultTheme: 'Rotterdam',
       themes: {
         Rotterdam: 'rods-theme',
         'Rotterdam dark color scheme': 'rods-theme rods-theme--media-query-color-scheme-dark',
       },
-      defaultTheme: 'Rotterdam',
     }),
     (Story) => <Document>{Story()}</Document>,
   ],