Add Oxlint Oxfmt

.github/workflows/tests.yml

@@ -74,8 +74,8 @@ jobs:
       - name: Run lint
         run: yarn lint
 
-      - name: Run prettier
-        run: yarn prettier:check
+      - name: Run formatter
+        run: yarn format
 
   unit_tests:
     name: 'unit tests'

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn lint
-yarn prettier:check
+yarn format

.oxfmtrc.jsonc

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2
+}

.oxlintrc.jsonc

@@ -0,0 +1,77 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": [
+    "eslint",
+    "typescript",
+    "unicorn",
+    "oxc",
+    "react",
+    "jsx-a11y",
+    "import",
+    "promise",
+    "jest",
+    "vitest"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true
+  },
+  "ignorePatterns": [
+    "**/.next/**",
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/storybook-static/**",
+    "**/*.mdx",
+    "website"
+  ],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "style": "off",
+    "pedantic": "off"
+  },
+  "rules": {
+    "typescript/no-unused-vars": "error",
+    "typescript/no-explicit-any": "warn",
+    "react/display-name": "off"
+  },
+  "overrides": [
+    {
+      "files": [
+        "packages/design-system/**/*.{ts,tsx,js,jsx}"
+      ],
+      "rules": {
+        "import/export": "off"
+      }
+    },
+    {
+      "files": [
+        "**/*.{spec,test}.{ts,tsx,js,jsx}"
+      ],
+      "env": {
+        "jest": true
+      }
+    },
+    {
+      "files": [
+        "docs/**/*.stories.tsx"
+      ],
+      "rules": {
+        "react-hooks/rules-of-hooks": "off",
+        "import/no-default-export": "off",
+        "no-console": "off",
+        "no-restricted-syntax": [
+          "error",
+          {
+            "selector": "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
+            "message": "Default React import not allowed"
+          }
+        ]
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-  "eslint.workingDirectories": [{ "mode": "auto" }]
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "oxc.fmt.experimental": true,
+  "editor.defaultFormatter": "oxc.oxc-vscode"
 }

.yarnrc.yml

@@ -6,10 +6,14 @@ enableImmutableInstalls: false
 
 nodeLinker: node-modules
 
+cacheFolder: .yarn/cache
+
+enableGlobalCache: false
+
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
 
 preferInteractive: true
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

CONTRIBUTING.md

@@ -152,9 +152,7 @@ if we're already in pre-release mode, this is fine and you should continue.
 - `yarn clean` Clean the project (remove dist & node_modules).
 - `yarn build` Build the project.
 - `yarn lint` Check the codebase for lint errors.
-- `yarn format` Automatically fix lint errors.
-- `yarn prettier:check` Check the codebase for pretty-ness.
-- `yarn prettier:write` Fix any prettier issues.
+- `yarn format` Automatically format.
 - `yarn test:ts`: Run the TypeScript tests.
 - `yarn test:unit` Run the design system tests.
 

docs/.oxfmtrc.jsonc

@@ -0,0 +1,9 @@
+{
+  "$schema": "../node_modules/oxfmt/configuration_schema.json",
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "proseWrap": "always"
+}

docs/.storybook/preview.tsx

@@ -83,6 +83,7 @@ export const useLocalStorageDarkMode = () => {
 export const useSafeDarkMode = () => {
   try {
     return useDarkMode();
+    // oxlint-disable-next-line no-unused-vars
   } catch (error) {
     return useLocalStorageDarkMode();
   }

docs/package.json

@@ -33,7 +33,9 @@
     "chromatic": "chromatic --exit-zero-on-changes",
     "clean": "rimraf storybook-static node_modules",
     "develop": "storybook dev -p 6006",
-    "lint": "eslint . --ext .mdx,.tsx,.ts",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint . --fix",
+    "format": "oxfmt .",
     "test:ts": "tsc --noEmit"
   }
 }

docs/stories/01-foundations/icons/Icons.stories.tsx

@@ -88,7 +88,7 @@ export const All: Story = {
   argTypes: {
     color: {
       control: 'select',
-      options: [...Object.keys(lightTheme.colors)],
+      options: Object.keys(lightTheme.colors),
     },
   },
   args: {

docs/stories/03-inputs/DateTimePicker.stories.tsx

@@ -110,15 +110,7 @@ const Template: Story = {
     const [, updateArgs] = useArgs();
 
     return (
-      <DateTimePicker
-        {...props}
-        onChange={(value) => updateArgs({ value })}
-        onClear={() =>
-          updateArgs(() => {
-            undefined;
-          })
-        }
-      />
+      <DateTimePicker {...props} onChange={(value) => updateArgs({ value })} onClear={() => updateArgs(() => {})} />
     );
   },
 };

package.json

@@ -15,9 +15,8 @@
     "develop": "turbo run develop",
     "format": "turbo run format",
     "lint": "turbo run lint",
+    "lint:fix": "turbo run lint -- --fix",
     "prepare": "husky install",
-    "prettier:check": "prettier --check .",
-    "prettier:write": "prettier --write .",
     "test:unit": "turbo run test:unit",
     "test:ts": "turbo run test:ts",
     "prerelease:enter": "changeset pre enter",
@@ -63,6 +62,8 @@
     "jest-styled-components": "7.2.0",
     "jest-watch-select-projects": "2.0.0",
     "jest-watch-typeahead": "2.2.2",
+    "oxfmt": "^0.11.0",
+    "oxlint": "^1.26.0",
     "prettier": "3.3.1",
     "prettier-2": "npm:prettier@^2",
     "turbo": "2.0.3",
@@ -75,7 +76,7 @@
   "peerDependencies": {
     "typescript": "^5.1.3"
   },
-  "packageManager": "yarn@3.5.0",
+  "packageManager": "yarn@3.6.4",
   "dependencies": {
     "@vueless/storybook-dark-mode": "9.0.6"
   }

packages/design-system/package.json

@@ -57,8 +57,9 @@
   "scripts": {
     "build": "pack-up build",
     "clean": "rimraf dist node_modules",
-    "lint": "eslint . --ext .tsx,.ts",
-    "format": "yarn lint --fix",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint . --fix",
+    "format": "oxfmt .",
     "test:ts": "tsc --noEmit",
     "test:unit": "jest -c jest.config.mjs",
     "watch": "pack-up watch"

packages/design-system/src/components/Accordion/Accordion.tsx

@@ -47,7 +47,9 @@ const AccordionRoot = styled(RadixAccordion.Root)<{ $size: Size }>`
         border: solid 1px ${(props) => props.theme.colors.neutral200};
       `;
     } else {
-      return css``;
+      return css`
+
+      `;
     }
   }}
 `;

packages/design-system/src/components/Tabs/Tabs.tsx

@@ -191,7 +191,9 @@ const Content = React.forwardRef<ContentElement, ContentProps>((props, forwarded
 const TabsContent = styled(Tabs.Content)<{ $variant: Props['variant'] }>`
   ${(props) => {
     if (props.$variant === 'simple') {
-      return css``;
+      return css`
+
+      `;
     } else {
       return css`
         position: relative;

packages/design-system/src/themes/utils.ts

@@ -7,7 +7,8 @@ export const getThemeSize = <TType extends keyof DefaultTheme['sizes']>(type: TT
 
 export const inputFocusStyle =
   (rootElement: IStyledComponent<'web'> | string = '&') =>
-  ({ theme, $hasError = false }: { theme: DefaultTheme; $hasError?: boolean }) => css`
+  ({ theme, $hasError = false }: { theme: DefaultTheme; $hasError?: boolean }) =>
+    css`
     outline: none;
     box-shadow: none;
     transition-property: border-color, box-shadow, fill;

packages/primitives/package.json

@@ -13,8 +13,9 @@
   "scripts": {
     "build": "pack-up build",
     "clean": "rimraf dist node_modules",
-    "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
-    "format": "yarn lint --fix",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint . --fix",
+    "format": "oxfmt .",
     "test:ts": "tsc --noEmit",
     "test:unit": "jest -c jest.config.mjs",
     "watch": "pack-up watch"

packages/primitives/src/components/Select/Select.tsx

@@ -967,7 +967,8 @@ const SelectItemAlignedPosition = React.forwardRef<SelectItemAlignedPositionElem
         const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
         const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
         const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
-        const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore
+        const fullContentHeight =
+          contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth;
         const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
 
         const viewportStyles = window.getComputedStyle(viewport);