Merge pull request #141 from Temzasse/tsup

The Great Resurrection ✨

.eslintignore

@@ -0,0 +1,2 @@
+vitest.config.js
+tsup.config.ts

.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "standard-with-typescript",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-confusing-void-expression": "off",
+    "@typescript-eslint/consistent-type-imports": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: CI
 on: [push]
 jobs:
   lint:
-    name: ⬣ ESLint
+    name: 🧶 Lint
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
@@ -11,17 +11,17 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v3
         with:
-          cache: 'yarn'
-          node-version: 18
+          cache: 'npm'
+          node-version: 20
 
       - name: 📥 Install deps
-        run: yarn
+        run: npm ci
 
       - name: 🔬 Lint
-        run: yarn lint
+        run: npm run lint
 
   typecheck:
-    name: ʦ TypeScript
+    name: 👮🏻‍♂️ Typecheck
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
@@ -30,16 +30,17 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v3
         with:
-          cache: 'yarn'
-          node-version: 18
+          cache: 'npm'
+          node-version: 20
 
       - name: 📥 Install deps
-        run: yarn
+        run: npm ci
 
       - name: 🔎 Type check
-        run: yarn typecheck
+        run: npm run typecheck
+
   test:
-    name: 🧪 Jest
+    name: 🧪 Test
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
@@ -48,11 +49,33 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v3
         with:
-          cache: 'yarn'
-          node-version: 18
+          cache: 'npm'
+          node-version: 20
 
       - name: 📥 Install deps
-        run: yarn
+        run: npm ci
 
       - name: 🔬 Test
-        run: yarn test
+        run: npm run test
+
+  build:
+    name: 📦 Build and verify
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+          node-version: 20
+
+      - name: 📥 Install deps
+        run: npm ci
+
+      - name: 🏗️ Build library
+        run: npm run build
+
+      - name: 🔬 Verify build
+        run: npm run build:verify

.gitignore

@@ -5,3 +5,5 @@ node_modules
 dist
 .parcel-cache
 .vscode
+.yalc
+yalc.lock

README.md

@@ -41,7 +41,7 @@ npm install framer-motion
 ## Usage
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useState } from 'react';
 
 function Example() {
@@ -98,7 +98,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 Imperative method that can be accessed via a ref for snapping to a snap point in given index.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -144,7 +144,7 @@ Similarly to the `snapTo` method the `y` value can be accessed via a ref.
 The `y` value can be useful for certain situtation eg. when you want to combine snap points with scrollable sheet content and ensure that the content stays properly scrollable in any snap point. Below you can see a simplified example of this situation and for a more detailed example take a look at the [ScrollableSnapPoints](example/components/ScrollableSnapPoints.tsx) component in the example app.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -371,7 +371,7 @@ You can add your own styles or override the default sheet styles via the exposed
 #### CSS-in-JS
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import styled from 'styled-components';
 import { useState } from 'react';
 
@@ -421,7 +421,7 @@ The example below utilizes React Aria to achieve an accessible modal-like bottom
 > ℹ️ The example was built by following the React Aria's [useDialog](https://react-spectrum.adobe.com/react-aria/useDialog.html) documentation.
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useRef } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 

example-ssr/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

example-ssr/.gitignore

@@ -1,5 +1,36 @@
-node_modules
-.idea
-.next
-dist
-npm-debug.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts