Modernize the toolchain and add a test suite

.github/workflows/nodejs.yml

@@ -1,13 +1,14 @@
 name: CI
 
+# Pushes to main are covered by the release workflow, which runs the same checks
 on:
-  push:
-    branches:
-      - main
   pull_request:
     branches:
       - '**'
 
+permissions:
+  contents: read
+
 jobs:
   test:
     name: Test on Node.js ${{ matrix.node }}
@@ -17,16 +18,17 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [20]
+        node: [22, 24]
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version: ${{ matrix.node }}
+          cache: npm
 
       - run: npm ci
 
       - name: Test
-        run: npm test
+        run: npm test

.github/workflows/publish.yml

@@ -1,43 +1,46 @@
 name: Release and Publish
 
 on:
-  pull_request:
   push:
     branches: [main]
 
+permissions:
+  contents: read
+
 jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
-          node-version: 20.x
-      - name: npm install
-        run: |
-          npm install
-      - name: npm test
-        run: |
-          npm test
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm test
+
   release:
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
     needs: [test]
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+      # Lets npm attach build provenance to the published package
+      id-token: write
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      - uses: actions/setup-node@v5
         with:
-          node-version: 20.x
-      - name: npm install
-        run: |
-          npm install
-      - name: npx semantic-release
-        run: |
-          npx semantic-release
+          node-version: 22
+          cache: npm
+          registry-url: https://registry.npmjs.org
+      - run: npm ci
+      - run: npx semantic-release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

docs/Footer.module.css

@@ -1,5 +1,5 @@
 .skewed {
   z-index: -1;
   transform: skewY(-9deg);
-  box-shadow: 0 15rem 0 0 theme('backgroundColor.gray.900');
+  box-shadow: 0 15rem 0 0 var(--color-gray-900);
 }

docs/fixtures/Button.tsx

@@ -6,7 +6,7 @@ type Props = {
   className?: Parameters<typeof cx>[0]
   children: React.ReactNode
 } & Omit<
-  React.PropsWithoutRef<JSX.IntrinsicElements['button']>,
+  React.PropsWithoutRef<React.JSX.IntrinsicElements['button']>,
   'children' | 'className'
 >
 

docs/fixtures/CloseExample.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 type Props = {
   className?: Parameters<typeof cx>[0]
 } & Omit<
-  React.PropsWithoutRef<JSX.IntrinsicElements['a']>,
+  React.PropsWithoutRef<React.JSX.IntrinsicElements['a']>,
   'children' | 'className'
 >
 

docs/fixtures/Code.tsx

@@ -4,7 +4,7 @@ import styles from './Code.module.css'
 
 type Props = {
   children: React.ReactNode
-} & Omit<React.PropsWithoutRef<JSX.IntrinsicElements['code']>, 'children'>
+} & Omit<React.PropsWithoutRef<React.JSX.IntrinsicElements['code']>, 'children'>
 
 const Code = forwardRef<HTMLElement, Props>(({ className, ...props }, ref) => (
   <code

docs/fixtures/Kbd.tsx

@@ -4,7 +4,7 @@ import styles from './Code.module.css'
 
 type Props = {
   children: React.ReactNode
-} & Omit<React.PropsWithoutRef<JSX.IntrinsicElements['kbd']>, 'children'>
+} & Omit<React.PropsWithoutRef<React.JSX.IntrinsicElements['kbd']>, 'children'>
 
 // @TODO style properly
 

docs/fixtures/ScrollUp.tsx

@@ -4,7 +4,7 @@ import styles from './ScrollUp.module.css'
 
 const ScrollUp = forwardRef<
   HTMLButtonElement,
-  Omit<React.PropsWithoutRef<JSX.IntrinsicElements['button']>, 'children'>
+  Omit<React.PropsWithoutRef<React.JSX.IntrinsicElements['button']>, 'children'>
 >(({ className, ...props }, ref) => (
   <button
     className={cx(

docs/fixtures/SheetContent.tsx

@@ -4,7 +4,7 @@ import styles from './SheetContent.module.css'
 
 type Props = {
   children: React.ReactNode
-} & Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'children'>
+} & Omit<React.PropsWithoutRef<React.JSX.IntrinsicElements['div']>, 'children'>
 
 const SheetContent = forwardRef<HTMLDivElement, Props>(
   ({ className, ...props }: Props, ref) => (

docs/fixtures/SnapMarker.tsx

@@ -4,7 +4,7 @@ import styles from './SnapMarker.module.css'
 
 const SnapMarker = forwardRef<
   HTMLSpanElement,
-  Omit<React.PropsWithoutRef<JSX.IntrinsicElements['span']>, 'children'>
+  Omit<React.PropsWithoutRef<React.JSX.IntrinsicElements['span']>, 'children'>
 >(({ className, ...props }, ref) => (
   <span
     className={cx(

docs/style.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import './theme.css';
+@plugin '@tailwindcss/forms';
+
+@source '../docs';
+@source '../pages';
 
 @layer base {
   html,
@@ -20,7 +23,7 @@
   --rsbs-max-w: 640px;
   --rsbs-ml: auto;
   --rsbs-mr: auto;
-  @screen sm {
+  @media (width >= 40rem) {
     & [data-rsbs-overlay] {
       --rsbs-overlay-rounded: 16px;
     }

docs/theme.css

@@ -0,0 +1,26 @@
+/* Tailwind theme for the docs site. Ported from the old tailwind.config.js so the tokens
+   are real CSS custom properties, which lets the CSS modules read them with var(). */
+
+@theme {
+  /* https://fonts.google.com/specimen/Source+Sans+Pro */
+  --font-display: Montserrat, sans-serif;
+  --font-body: 'Source Sans Pro', sans-serif;
+
+  --color-hero: #592340;
+  --color-hero-lighter: #fc9cc3;
+
+  --ring-offset-color-rsbs-bg: var(--rsbs-bg);
+
+  /* gray is an alias for slate */
+  --color-gray-50: var(--color-slate-50);
+  --color-gray-100: var(--color-slate-100);
+  --color-gray-200: var(--color-slate-200);
+  --color-gray-300: var(--color-slate-300);
+  --color-gray-400: var(--color-slate-400);
+  --color-gray-500: var(--color-slate-500);
+  --color-gray-600: var(--color-slate-600);
+  --color-gray-700: var(--color-slate-700);
+  --color-gray-800: var(--color-slate-800);
+  --color-gray-900: var(--color-slate-900);
+  --color-gray-950: var(--color-slate-950);
+}

eslint.config.mjs

@@ -0,0 +1,53 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactHooks from 'eslint-plugin-react-hooks'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import nextPlugin from '@next/eslint-plugin-next'
+import globals from 'globals'
+
+export default tseslint.config(
+  {
+    ignores: ['dist/**', '.next/**', 'node_modules/**', 'public/**'],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  reactHooks.configs.flat.recommended,
+  {
+    files: ['**/*.{ts,tsx,js,jsx,mjs}'],
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+    },
+    plugins: { 'jsx-a11y': jsxA11y, '@next/next': nextPlugin },
+    rules: {
+      ...jsxA11y.configs.recommended.rules,
+      ...nextPlugin.configs.recommended.rules,
+      'jsx-a11y/anchor-is-valid': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      // The sheet deliberately reads refs during render and flips state from effects so that
+      // gestures and springs can drive the animation without re-rendering. These stay visible
+      // as warnings; removing them means reworking useReady and the snap point measurement.
+      'react-hooks/refs': 'warn',
+      'react-hooks/set-state-in-effect': 'warn',
+    },
+  },
+  {
+    // Build tooling is CommonJS by design
+    files: ['*.config.js', '*.config.mjs'],
+    rules: { '@typescript-eslint/no-require-imports': 'off' },
+  },
+  {
+    // The docs site is demo code, held to a lighter standard than the library
+    files: ['docs/**', 'pages/**'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+      'jsx-a11y/no-autofocus': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+      '@next/next/no-img-element': 'off',
+    },
+  }
+)

next-env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.