Use biome for linting + formatting code (#173)

.storybook/main.ts

@@ -1,14 +1,17 @@
 import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   staticDirs: ['../src/fonts/'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm'
+    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/react-vite',

biome.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single"
+    }
+  },
+  "files": {
+    "ignore": ["animations/*.json", "dist", "node_modules"]
+  }
+}

package.json

@@ -19,6 +19,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@biomejs/biome": "1.5.3",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -45,27 +46,14 @@
     "@types/react-dom": "^18.2.19",
     "@types/styled-system": "^5.1.22",
     "@types/styled-system__css": "^5.0.21",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
-    "eslint": "^8.56.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-watch": "^8.0.0",
     "gh-pages": "^6.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.1.1",
     "jest-svg-transformer": "^1.0.0",
-    "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",

rollup.config.mjs

@@ -29,7 +29,7 @@ const mainBundle = {
       format: 'esm',
       interop: 'auto',
       sourcemap: true,
-    }
+    },
   ],
   plugins: [
     del({
@@ -42,7 +42,13 @@ const mainBundle = {
     commonjs(),
     typescript({
       tsconfig: './tsconfig.json',
-      exclude: ['node_modules', 'dist', '**/__test__/*', '**/__mocks__/*', '**/stories/*'],
+      exclude: [
+        'node_modules',
+        'dist',
+        '**/__test__/*',
+        '**/__mocks__/*',
+        '**/stories/*',
+      ],
     }),
     copy({
       targets: [
@@ -74,7 +80,7 @@ const iconBundle = {
       format: 'esm',
       interop: 'auto',
       sourcemap: true,
-    }
+    },
   ],
   plugins: [
     peerDepsExternal(),

src/__test__/Icons.test.tsx

@@ -111,7 +111,7 @@ describe('Icons', () => {
             </Flex>
           )
         })}
-      </div>
+      </div>,
     )
 
     for (let i = 0; i < Object.keys(icons).length; i += 1) {

src/bin/create-icons.js

@@ -1,5 +1,4 @@
 /* global require, __dirname */
-/* eslint-disable no-console */
 // Inspired from: https://github.com/react-icons/react-icons and changed
 
 const fs = require('fs')

src/components/MultiSelectCreatable.tsx

@@ -4,14 +4,14 @@ import React, {
   KeyboardEventHandler,
   useEffect,
 } from 'react'
+import { MultiValue } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 import { SelectProps as SP } from 'types'
-import { MultiValue } from 'react-select'
 import theme from '../theme'
 import { getMarginProps, omitMarginProps } from '../utils'
 import Box from './Box'
-import Text from './Text'
 import ErrorMessage from './ErrorMessage'
+import Text from './Text'
 
 interface Option {
   readonly label: string
@@ -51,7 +51,6 @@ const MultiSelectCreatable = forwardRef(
 
     const handleKeyDown: KeyboardEventHandler = (event) => {
       if (!inputValue) return
-      // eslint-disable-next-line default-case
       switch (event.key) {
         case 'Enter':
         case 'Tab':

src/theme/index.ts

@@ -137,7 +137,7 @@ const theme = {
         outline: '2px solid',
         outlineColor: 'primary',
         outlineOffset: '1px',
-      }
+      },
     },
     default: {
       color: 'white',
@@ -238,17 +238,17 @@ const theme = {
     },
     small: {
       fontSize: 14,
-      lineHeight: "20px",
+      lineHeight: '20px',
       // height: 32,
       px: 3,
-      py: "4px",
+      py: '4px',
       '.icon': {
         fontSize: 20,
       },
     },
     medium: {
       fontSize: 1,
-      lineHeight: "22px",
+      lineHeight: '22px',
       // height: 40,
       px: 24,
       py: 7,
@@ -258,7 +258,7 @@ const theme = {
     },
     large: {
       fontSize: 2,
-      lineHeight: "26px",
+      lineHeight: '26px',
       // height: 48,
       px: 4,
       py: 9,
@@ -268,7 +268,7 @@ const theme = {
     },
     xLarge: {
       fontSize: 2,
-      lineHeight: "26px",
+      lineHeight: '26px',
       // height: 60,
       px: 5,
       py: 15,

src/utils/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { BoxKnownProps } from 'types'
 
 // const dsProps = [...systemProps, 'sx', 'variant']

stories/Checkbox.stories.tsx

@@ -25,9 +25,21 @@ export const Default: Story = {
 export const Example = () => {
   return (
     <Box width="200px">
-      <Checkbox mb={2} name="checkbox1" label="Checkbox1 checkbox1 checkbox1 checkbox1 checkbox1" />
-      <Checkbox mb={4} name="checkbox2" label="Checkbox2 checkbox2 checkbox2 checkbox2 checkbox2" />
-      <Checkbox name="checkbox3" label="Checkbox3 checkbox3 checkbox3 checkbox3 checkbox3" reverse />
+      <Checkbox
+        mb={2}
+        name="checkbox1"
+        label="Checkbox1 checkbox1 checkbox1 checkbox1 checkbox1"
+      />
+      <Checkbox
+        mb={4}
+        name="checkbox2"
+        label="Checkbox2 checkbox2 checkbox2 checkbox2 checkbox2"
+      />
+      <Checkbox
+        name="checkbox3"
+        label="Checkbox3 checkbox3 checkbox3 checkbox3 checkbox3"
+        reverse
+      />
     </Box>
   )
 }

stories/OONIIcons.stories.tsx

@@ -17,7 +17,7 @@ export const Default = {
   render: () => (
     <Flex flexWrap="wrap">
       {Object.keys(OONIIcons).map((k) => {
-        const Icon = OONIIcons[k as IconType] 
+        const Icon = OONIIcons[k as IconType]
         return (
           <Box key={k} width={1 / 5} pb={3}>
             <Icon size={50} />

vite.config.ts

@@ -1,7 +1,7 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-});
+})