feat(eslint-config): add ESLint configuration package with various pl…

…ugins and custom rules (#10)

- Set up esbuild and tsup for building TypeScript and emitting .d.ts
files
- Added core configuration files for ESLint with custom rules for
Prettier, Sort Keys, Unicorn, and TypeScript support
- Introduced optional React and TypeScript support based on package
detection
- Added utility functions for combining configs and renaming rules

.yarnrc.yml

@@ -9,4 +9,4 @@ packageExtensions:
       "@types/node": ^20.14.10
       typescript: ^5.5.3
 
-yarnPath: .yarn/releases/yarn-4.4.0.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

package.json

@@ -11,6 +11,8 @@
   ],
   "scripts": {
     "build": "lerna run build",
+    "lint": "lerna run lint --parallel",
+    "lint:fix": "lerna run lint:fix --parallel",
     "pretty": "lerna run pretty --parallel",
     "pretty:fix": "lerna run pretty:fix --parallel",
     "publish": "lerna run publish --parallel"
@@ -20,10 +22,10 @@
     "@commitlint/config-conventional": "^19.2.2",
     "husky": "^9.0.11",
     "lerna": "^8.1.6",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "typescript": "5.5.3"
   },
-  "packageManager": "yarn@4.4.0",
+  "packageManager": "yarn@4.5.0",
   "engines": {
     "node": ">= v20.9.0"
   }

packages/avatar/eslint.config.js

@@ -0,0 +1,3 @@
+import norns from "@norns-ui/eslint-config-norns";
+
+export default norns();

packages/avatar/lib/Avatar.tsx

@@ -1,6 +1,11 @@
 import {Norn} from "@norns-ui/norn";
 import {createContextScope, Scope} from "@norns-ui/shared";
-import {forwardRef, useState} from "react";
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  forwardRef,
+  useState,
+} from "react";
 
 const AVATAR_NAME = "Avatar";
 
@@ -18,8 +23,8 @@ type AvatarContextValue = {
 const [AvatarProvider, useAvatarContext] =
   createAvatarContext<AvatarContextValue>(AVATAR_NAME);
 
-type AvatarElement = React.ElementRef<typeof Norn.span>;
-type NornSpanProps = React.ComponentPropsWithoutRef<typeof Norn.span>;
+type AvatarElement = ElementRef<typeof Norn.span>;
+type NornSpanProps = ComponentPropsWithoutRef<typeof Norn.span>;
 interface AvatarProps extends NornSpanProps {}
 
 const Avatar = forwardRef<AvatarElement, AvatarProps>(
@@ -41,4 +46,4 @@ const Avatar = forwardRef<AvatarElement, AvatarProps>(
 Avatar.displayName = AVATAR_NAME;
 
 export {Avatar, createAvatarScope, useAvatarContext};
-export type {AvatarProps, AvatarElement, NornSpanProps, ScopedProps};
+export type {AvatarElement, AvatarProps, NornSpanProps, ScopedProps};

packages/avatar/lib/AvatarFallback.tsx

@@ -1,5 +1,6 @@
 import {Norn} from "@norns-ui/norn";
 import {ElementRef, forwardRef, useEffect, useState} from "react";
+
 import {NornSpanProps, ScopedProps, useAvatarContext} from "./Avatar";
 
 const FALLBACK_NAME = "AvatarFallback";

packages/avatar/lib/AvatarImage.tsx

@@ -1,17 +1,18 @@
-import {Norn} from "@norns-ui/norn";
-import {forwardRef} from "react";
-import {ScopedProps, useAvatarContext} from "./Avatar";
 import {
   ImageLoadingStatus,
   useCallbackRef,
   useImageLoadingStatus,
   useLayoutEffect,
 } from "@norns-ui/hooks";
+import {Norn} from "@norns-ui/norn";
+import {ComponentPropsWithoutRef, ElementRef, forwardRef} from "react";
+
+import {ScopedProps, useAvatarContext} from "./Avatar";
 
 const IMAGE_NAME = "AvatarImage";
 
-type AvatarImageElement = React.ElementRef<typeof Norn.img>;
-type NornImageProps = React.ComponentPropsWithoutRef<typeof Norn.img>;
+type AvatarImageElement = ElementRef<typeof Norn.img>;
+type NornImageProps = ComponentPropsWithoutRef<typeof Norn.img>;
 interface AvatarImageProps extends NornImageProps {
   onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
 }

packages/avatar/lib/index.ts

@@ -1,6 +1,6 @@
-export {Avatar} from "./Avatar";
 export type {AvatarProps} from "./Avatar";
-export {AvatarFallback} from "./AvatarFallback";
+export {Avatar} from "./Avatar";
 export type {AvatarFallbackProps} from "./AvatarFallback";
-export {AvatarImage} from "./AvatarImage";
+export {AvatarFallback} from "./AvatarFallback";
 export type {AvatarImageProps} from "./AvatarImage";
+export {AvatarImage} from "./AvatarImage";

packages/avatar/package.json

@@ -18,8 +18,10 @@
   ],
   "scripts": {
     "build": "node esbuild.config.js",
-    "pretty": "prettier --check $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o -print)",
-    "pretty:fix": "prettier --write $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o -print)",
+    "lint": "eslint lib",
+    "lint:fix": "eslint lib --fix",
+    "pretty": "prettier --check $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o \\( -type f -name '*.js' -o -name '*.ts' -o -name '*.tsx' \\) -print)",
+    "pretty:fix": "prettier --write $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o \\( -type f -name '*.js' -o -name '*.ts' -o -name '*.tsx' \\) -print)",
     "publish": "yarn npm publish --tolerate-republish"
   },
   "dependencies": {
@@ -30,10 +32,13 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@norns-ui/eslint-config-norns": "workspace:packages/eslint-config-norns",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "esbuild": "^0.23.0",
+    "eslint": "^9.11.1",
+    "prettier": "^3.3.3",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4"
   },

packages/collection/eslint.config.js

@@ -0,0 +1,3 @@
+import norns from "@norns-ui/eslint-config-norns";
+
+export default norns();

packages/collection/lib/createCollection.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import {useComposedRefs} from "@norns-ui/hooks";
+import {createContextScope} from "@norns-ui/shared";
+import {Slot} from "@norns-ui/slot";
 import {
   ComponentPropsWithoutRef,
   FC,
@@ -10,9 +13,6 @@ import {
   useEffect,
   useRef,
 } from "react";
-import {Slot} from "@norns-ui/slot";
-import {createContextScope} from "@norns-ui/shared";
-import {useComposedRefs} from "@norns-ui/hooks";
 
 type SlotProps = ComponentPropsWithoutRef<typeof Slot>;
 type CollectionElement = HTMLElement;
@@ -124,7 +124,9 @@ const createCollection = <ItemElement extends HTMLElement, ItemData = {}>(
 
     const getItems = useCallback(() => {
       const collectionNode = context.collectionRef.current;
-      if (!collectionNode) return [];
+      if (!collectionNode) {
+        return [];
+      }
       const orderedNodes = Array.from(
         collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`),
       );

packages/collection/package.json

@@ -18,8 +18,10 @@
   ],
   "scripts": {
     "build": "node esbuild.config.js",
-    "pretty": "prettier --check $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o -print)",
-    "pretty:fix": "prettier --write $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o -print)",
+    "lint": "eslint lib",
+    "lint:fix": "eslint lib --fix",
+    "pretty": "prettier --check $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o \\( -type f -name '*.js' -o -name '*.ts' -o -name '*.tsx' \\) -print)",
+    "pretty:fix": "prettier --write $(find . -type d \\( -name 'node_modules' -o -name 'dist' \\) -prune -o \\( -type f -name '*.js' -o -name '*.ts' -o -name '*.tsx' \\) -print)",
     "publish": "yarn npm publish --tolerate-republish"
   },
   "dependencies": {
@@ -30,10 +32,13 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@norns-ui/eslint-config-norns": "workspace:packages/eslint-config-norns",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "esbuild": "^0.23.0",
+    "eslint": "^9.11.1",
+    "prettier": "^3.3.3",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4"
   },

packages/dismissable-layer/eslint.config.js

@@ -0,0 +1,3 @@
+import norns from "@norns-ui/eslint-config-norns";
+
+export default norns();