Add eslint and update linting issues

.eslintrc.js

@@ -0,0 +1,123 @@
+const { resolve } = require("node:path")
+
+const project = resolve(process.cwd(), "tsconfig.json")
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  // Ignore
+  ignorePatterns: ["node_modules", "/dist"],
+
+  overrides: [
+    // General
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+      extends: ["eslint:recommended", "eslint-config-turbo", "prettier"],
+    },
+
+    // React
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+      plugins: ["react", "react-refresh", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+      },
+      rules: {
+        "react-refresh/only-export-components": ["warn", { allowExportNames: ["metadata"] }],
+        "react/display-name": "off",
+        "react-hooks/exhaustive-deps": "off",
+        "jsx-a11y/heading-has-content": "off",
+        "jsx-a11y/anchor-has-content": "off",
+        "jsx-a11y/control-has-associated-label": "off",
+      },
+    },
+
+    // Typescript
+    {
+      files: ["*.ts?(x)"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/stylistic",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          typescript: {
+            project,
+            alwaysTryTypes: true,
+          },
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+        },
+      },
+      rules: {
+        "import/namespace": [2, { allowComputed: true }],
+        "import/order": [
+          "error",
+          {
+            alphabetize: { caseInsensitive: true, order: "asc" },
+            groups: ["builtin", "external", "internal", "parent", "sibling"],
+            "newlines-between": "always",
+          },
+        ],
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+        ],
+        "@typescript-eslint/consistent-type-imports": [
+          "warn",
+          { prefer: "type-imports", fixStyle: "separate-type-imports" },
+        ],
+        "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+      },
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js", "mocks/**/*.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+}

package.json

@@ -24,6 +24,7 @@
     "format": "prettier \"./**/*.{js,ts,json,md}\" --write --config ./prettier.config.mjs",
     "prebuild": "bun run clean",
     "release": "bun run build && auto shipit --no-changelog",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build --test",
@@ -66,21 +67,28 @@
     "@tabler/icons-react": "^2.45.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/react": "^18.2.47",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "@vitejs/plugin-react": "^3.1.0",
     "auto": "10.46.0",
     "autoprefixer": "^10.4.16",
-    "boxen": "5.1.2",
     "chromatic": "^10.2.0",
     "clsx": "^2.1.0",
     "cva": "^1.0.0-beta.1",
     "dedent": "^0.7.0",
-    "npm-run-all": "^4.1.5",
-    "polished": "^4.2.2",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-turbo": "^1.10.12",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
     "postcss": "^8.4.33",
     "prettier": "^3.1.1",
-    "prop-types": "^15.8.1",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react": "^18.0.0",
     "react-dom": "18.2.0",
     "rimraf": "^3.0.2",
@@ -91,10 +99,8 @@
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
-    "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^4.5.1",
-    "zx": "^1.15.2"
+    "vite": "^4.5.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

prettier.config.mjs

@@ -1,14 +1,18 @@
-/** @type {import("prettier").Config} */
+import { fileURLToPath } from "url"
+
+/** @typedef  {import("prettier").Config} PrettierConfig */
+/** @typedef {import("prettier-plugin-tailwindcss").PluginOptions} TailwindConfig */
+
+/** @type { PrettierConfig | TailwindConfig } */
 const config = {
   jsxSingleQuote: false,
   singleQuote: false,
   semi: false,
   trailingComma: "all",
   tabWidth: 2,
   printWidth: 100,
-  importOrder: ["^react$", "<THIRD_PARTY_MODULES>", "^~/(.*)$", "^[./]"],
-  importOrderSortSpecifiers: true,
-  plugins: ["@trivago/prettier-plugin-sort-imports"],
+  plugins: ["prettier-plugin-tailwindcss"],
+  tailwindConfig: fileURLToPath(new URL("tailwind.config.js", import.meta.url)),
 }
 
 export default config

src/Avatar/Avatar.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { IconDiscountCheckFilled, IconUsers } from "@tabler/icons-react"
+
 import { Dot } from "../Dot"
+
 import { Avatar } from "./Avatar"
 
 type Story = StoryObj<typeof Avatar>
@@ -37,7 +39,7 @@ export const WithChildrenFallback = {
 export const WithTopStatus = {
   args: {
     src: "https://i.pravatar.cc/150?img=1",
-    topStatus: <IconDiscountCheckFilled className="text-teal bg-white -m-[7.5%]" />,
+    topStatus: <IconDiscountCheckFilled className="-m-[7.5%] bg-white text-teal" />,
   },
 } satisfies Story
 
@@ -53,7 +55,7 @@ export const WithCustomMarkup = {
     <Avatar.Root size="lg" shape="rounded" className="outline outline-offset-4 outline-teal">
       <Avatar.Image src="https://i.pravatar.cc/150?img=5" />
       <Avatar.Fallback />
-      <Avatar.Status className="bg-white text-teal ring-0 -m-2">
+      <Avatar.Status className="-m-2 bg-white text-teal ring-0">
         <IconDiscountCheckFilled />
       </Avatar.Status>
     </Avatar.Root>

src/Avatar/Avatar.tsx

@@ -1,18 +1,13 @@
-import {
-  ComponentPropsWithoutRef,
-  ElementRef,
-  ReactElement,
-  RefObject,
-  forwardRef,
-  isValidElement,
-} from "react"
 import * as Primitive from "@radix-ui/react-avatar"
 import { Slot } from "@radix-ui/react-slot"
 import { IconUser } from "@tabler/icons-react"
+import { forwardRef, isValidElement } from "react"
+import type { ComponentPropsWithoutRef, ElementRef, ReactElement, RefObject } from "react"
+
 import { Loader } from "../Loader"
 import { type VariantProps, cx } from "../shared/cva"
-import { getInitials } from "../shared/helpers"
-import { isReactElement } from "../shared/helpers"
+import { getInitials, isReactElement } from "../shared/helpers"
+
 import {
   avatarFallbackVariants,
   avatarImageVariants,

src/AvatarGroup/AvatarGroup.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { IconUserPlus } from "@tabler/icons-react"
+
 import { AvatarGroup } from "./AvatarGroup"
 
 type Story = StoryObj<typeof AvatarGroup>
@@ -61,7 +62,7 @@ export const WithCustomMarkup = {
         <AvatarGroup.Item key={i} size="lg" {...item} />
       ))}
 
-      <AvatarGroup.Label size="lg" className="z-40 from-blue to-blue text-white px-3">
+      <AvatarGroup.Label size="lg" className="z-40 from-blue to-blue px-3 text-white">
         42k likes
       </AvatarGroup.Label>
 

src/AvatarGroup/AvatarGroup.tsx

@@ -1,8 +1,12 @@
-import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode, forwardRef } from "react"
-import { Avatar, AvatarElement, AvatarProps } from "../Avatar"
-import { avatarVariants } from "../Avatar/Avatar.variants"
+import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from "react"
+import { forwardRef } from "react"
+
+import type { AvatarElement, AvatarProps } from "../Avatar"
+import { Avatar } from "../Avatar"
+import type { avatarVariants } from "../Avatar/Avatar.variants"
 import { type VariantProps, cx } from "../shared/cva"
 import { isReactElement } from "../shared/helpers"
+
 import { avatarGroupItemVariants, avatarGroupVariants } from "./AvatarGroup.variants"
 
 export type AvatarGroupElement = HTMLDivElement
@@ -80,7 +84,7 @@ const AvatarGroupItem = forwardRef<AvatarElement, ComponentPropsWithoutRef<typeo
 )
 
 const AvatarGroupBase = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {
-  const { items, className, children, theme, size, shape, previousOnTop, label, ...rest } = props
+  const { items, children, theme, size, shape, previousOnTop, label, ...rest } = props
   const avatarProps = { theme, size, shape }
 
   return (

src/Badge/Badge.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { IconBolt } from "@tabler/icons-react"
+
 import { Badge } from "./Badge"
 
 type Story = StoryObj<typeof Badge>

src/Badge/Badge.tsx

@@ -1,7 +1,10 @@
-import { type HTMLAttributes, ReactElement, forwardRef, isValidElement } from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { Slottable } from "../Slottable"
+import { forwardRef, isValidElement } from "react"
+import type { ReactElement, HTMLAttributes } from "react"
+
 import { type VariantProps, cx } from "../shared/cva"
+import { Slottable } from "../Slottable"
+
 import { badgeAffixVariants, badgeVariants } from "./Badge.variants"
 
 export type BadgeElement = HTMLSpanElement

src/Dot/Dot.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
+
 import { Dot } from "./Dot"
 
 type Story = StoryObj<typeof Dot>

src/Dot/Dot.tsx

@@ -1,6 +1,8 @@
-import { type HTMLAttributes, forwardRef, isValidElement } from "react"
 import { Slot } from "@radix-ui/react-slot"
+import { type HTMLAttributes, forwardRef, isValidElement } from "react"
+
 import { type VariantProps } from "../shared/cva"
+
 import { dotVariants } from "./Dot.variants"
 
 export type DotElement = HTMLSpanElement

src/Loader/Loader.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
+
 import { Loader } from "./Loader"
 
 type Story = StoryObj<typeof Loader>

src/Loader/Loader.tsx

@@ -1,5 +1,6 @@
-import { type SVGProps, forwardRef } from "react"
 import { IconLoader } from "@tabler/icons-react"
+import { type SVGProps, forwardRef } from "react"
+
 import { cx } from "../shared/cva"
 
 export type LoaderProps = SVGProps<SVGSVGElement>

src/Status/Status.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { IconPointFilled } from "@tabler/icons-react"
+
 import { Status } from "./Status"
 
 type Story = StoryObj<typeof Status>

src/Status/Status.tsx

@@ -1,7 +1,10 @@
-import { type HTMLAttributes, ReactElement, forwardRef, isValidElement } from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { Slottable } from "../Slottable"
+import { forwardRef, isValidElement } from "react"
+import type { ReactElement, HTMLAttributes } from "react"
+
 import { type VariantProps, cx } from "../shared/cva"
+import { Slottable } from "../Slottable"
+
 import { statusAffixVariants, statusVariants } from "./Status.variants"
 
 export type StatusElement = HTMLSpanElement

src/shared/helpers.ts

@@ -1,4 +1,5 @@
-import { Children, ReactNode, isValidElement } from "react"
+import type { ReactNode} from "react";
+import { Children, isValidElement } from "react"
 
 /**
  * Checks if the given ReactNode is empty.