Merge pull request #107 from tajo/modern-tooling

feat: add changesets

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "tajo/react-movable" }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/lemon-cameras-happen.md

@@ -0,0 +1,5 @@
+---
+"react-movable": minor
+---
+
+Adding disabled prop to the List

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/workflows/checks.yml

@@ -7,17 +7,20 @@ on:
 jobs:
   test:
     timeout-minutes: 15
-    runs-on: macos-latest
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
+      - uses: pnpm/action-setup@v4
       - name: Install dependencies
-        run: npm install -g pnpm && pnpm install
+        run: pnpm install
       - name: Run Unit tests
         run: pnpm test:unit
       - name: Run Typecheck
         run: pnpm typecheck
+      - name: Run Lint
+        run: pnpm lint
       - name: Run Build
         run: pnpm build

.github/workflows/playwright.yml

@@ -6,16 +6,14 @@ on:
     branches: [main]
 jobs:
   test:
-    timeout-minutes: 60
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9.1.4
       - name: Install dependencies
         run: pnpm install
       - name: Install Playwright Browsers

.github/workflows/release.yml

@@ -0,0 +1,54 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.1.4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.14
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Creating .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            [email protected]
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GIT_DEPLOY_KEY }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/pre-commit

@@ -0,0 +1,2 @@
+
+pnpm exec lint-staged

.ladle/config.mjs

@@ -1,11 +1,11 @@
 export default {
-  mount: ['examples'],
+  mount: ["examples"],
   addons: {
     theme: {
-      enabled: false
+      enabled: false,
     },
     mode: {
-      defaultState: 'single-scroll'
-    }
-  }
+      defaultState: "single-scroll",
+    },
+  },
 };

.lintstagedrc

@@ -0,0 +1,7 @@
+{
+  "*.{js,ts,tsx,css,scss,postcss,md,json}": [
+    "prettier --write --plugin-search-dir=.",
+    "prettier --check --plugin-search-dir=."
+  ],
+  "*.{js,ts,tsx}": "eslint"
+}

README.md

@@ -2,14 +2,12 @@
 
 [![npm version](https://img.shields.io/npm/v/react-movable.svg?style=flat-square)](https://www.npmjs.com/package/react-movable)
 [![npm downloads](https://img.shields.io/npm/dm/react-movable.svg?style=flat-square)](https://www.npmjs.com/package/react-movable)
-[![Build Status](https://travis-ci.org/tajo/react-movable.svg?branch=master)](https://travis-ci.org/tajo/react-movable)
 [![size](https://img.shields.io/bundlephobia/minzip/react-movable.svg?style=flat)](https://bundlephobia.com/result?p=react-movable)
+<a href="https://stackblitz.com/edit/react-movable?file=src%2FApp.tsx"><img src="https://img.shields.io/badge/stackblitz-sandbox-orange" alt="stackblitz"></a>
 
 ![Basic list](https://raw.githubusercontent.com/tajo/react-movable/main/assets/react-movable.gif?raw=true)
 
-[![Edit Basic react-movable](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k1mrwyr9l3)
-
-[See all the other examples](https://react-movable.pages.dev) and [their source code](https://github.com/tajo/react-movable/tree/main/examples)!
+[See all the other examples](https://react-movable.pages.dev) and [their source code](https://github.com/tajo/react-movable/tree/main/examples)! Try it out in the [Stackblitz sandbox](https://stackblitz.com/edit/react-movable?file=src%2FApp.tsx)!
 
 ## Installation
 

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] };

e2e/scrolling.window.test.ts

@@ -20,7 +20,6 @@ test("scroll down", async ({ page }) => {
 
 test("scroll up", async ({ page }) => {
   await trackMouse(page as any);
-  const list = await page.$("#ladle-root ul");
   await page.evaluate(() => window.scrollTo(0, 300));
   await page.mouse.move(190, 641);
   await page.mouse.down();

e2e/utils.ts

@@ -11,7 +11,6 @@ export enum Examples {
 }
 
 export const getTestUrl = (example: Examples): string => {
-  const PORT = 61000;
   switch (example) {
     case Examples.BASIC:
       return `/?story=list--basic&mode=preview`;

examples/CustomComponent.tsx

@@ -17,6 +17,7 @@ const CustomItem = React.forwardRef(
     </li>
   ),
 );
+CustomItem.displayName = "CustomItem";
 
 const CustomComponent: React.FC = () => {
   const [items, setItems] = React.useState([

examples/Handle.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { List, arrayMove, arrayRemove } from "../src/index";
+import { List, arrayMove } from "../src/index";
 
 export const HandleIcon = () => (
   <svg

examples/InteractiveItems.tsx

@@ -8,27 +8,31 @@ const InteractiveItems: React.FC = () => {
   const [checkboxValue, setCheckboxValue] = React.useState(false);
   const elements = [
     <input
+      key="input"
       value={inputValue}
       onChange={(e) => {
         setInputValue(e.target.value);
       }}
     />,
     <textarea
+      key="textarea"
       value={taValue}
       onChange={(e) => {
         setTaValue(e.target.value);
       }}
     />,
-    <div>
+    <div key="button">
       <button>Item 3</button>
     </div>,
     <div
+      key="div"
       role="button"
       style={{ padding: "8px", cursor: "default", border: "1px solid black" }}
     >
       Div with the button role
     </div>,
     <select
+      key="select"
       name="pets"
       id="pet-select"
       value={selectValue}
@@ -38,7 +42,7 @@ const InteractiveItems: React.FC = () => {
       <option value="spider">Spider</option>
       <option value="goldfish">Goldfish</option>
     </select>,
-    <div>
+    <div key="input">
       <input
         id="checked"
         name="checked"

package.json

@@ -14,12 +14,21 @@
   },
   "author": "Vojtech Miksu <[email protected]>",
   "license": "MIT",
+  "packageManager": "[email protected]",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
   "scripts": {
     "build": "rm -rf lib && tsc --outDir lib && rm -rf lib/examples && mv lib/src/* lib && rm -rf lib/src && rm lib/*.test.* && rm lib/*.stories.*",
+    "lint": "eslint '{examples,src,e2e,.ladle}/**/*.{js,ts,tsx,mjs}'",
     "test": "pnpm test:e2e && pnpm test:unit",
     "test:e2e": "pnpm exec playwright test",
     "test:unit": "vitest run src",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky install",
+    "release": "pnpm run build && changeset publish"
   },
   "tags": [
     "react"
@@ -40,14 +49,26 @@
     "movable"
   ],
   "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@ladle/react": "^4.1.0",
     "@playwright/test": "^1.45.1",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0",
     "@types/node": "^20.14.11",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.3",
+    "typescript": "5.3.2",
     "vitest": "^2.0.3"
   },
   "peerDependencies": {