Merge pull request #8 from near/feat/workflows-and-testing

Adding test workflows, basic test setup with vitest, update README

.github/workflows/continuous-integration.yml

@@ -0,0 +1,46 @@
+name: CI
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - develop
+
+jobs:
+  format-and-lint:
+    name: Format & Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9.1.1
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Format
+        run: pnpm format
+      - name: Lint
+        run: pnpm lint:strict
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9.1.1
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Check types
+        run: pnpm ts:check
+      - name: Test
+        run: pnpm test

.github/workflows/publish-to-npm.yml

@@ -17,10 +17,10 @@ jobs:
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
-      - name: Install Dependencies
+      - name: Install dependencies
         run: pnpm install
-      - name: Test
-        run: pnpm test
+      - name: Lint and test
+        run: pnpm pre-publish
       - name: Build
         run: pnpm build
       - name: Publish

README.md

@@ -31,17 +31,30 @@ Please refer to `README.md` files in `src/components` for examples and documenta
 
 ## Contributing
 
-TODO...
+Run these commands to begin local development and watch for changes:
 
-## Local Development
+```bash
+pnpm dev
+pnpm test:watch
+```
+
+- Create a branch off of `main`
+- Test your local changes
+- Push a PR for review
+
+_NOTE: A development preview environment for the component library will be developed soon: https://github.com/near/pagoda-ui/issues/6_
+
+## Test Local Changes
+
+Follow these steps to preview local changes to the UI library within any project that depends on the library:
 
-Due to this library having peer dependencies, `pnpm link` isn't compatible. Follow these steps to preview local changes to the UI library within any project:
+- Have your project and the UI library cloned as siblings. EG: `projects/cool-project` and `projects/pagoda-ui`.
+- Inside `pagoda-ui`, run `pnpm dev`.
+- Inside your project folder, run `pnpm add file:../pagoda-ui`.
+- After making any changes to `pagoda-ui`, you will need to restart your project's development server for the component changes to appear locally within your project.
+- Once you're done testing changes, make sure you revert the changes in your project's `package.json` and lock file so that you're no longer referencing the local file protocol (eg: `file:../pagoda-ui`).
 
-- Have your project and the UI library cloned as siblings. EG: `projects/cool-project` and `projects/pagoda-ui`
-- Inside `pagoda-ui`, make sure you've installed dependencies and build your changes with `pnpm i` and `pnpm build`
-- Inside your project folder, run `pnpm add file:../pagoda-ui` and then boot up your dev server
-- After making any changes to `pagoda-ui`, make sure you run `pnpm build` to then see changes when previewing your project
-- Once you're done previewing changes, make sure you revert changes to the `package.json` and lock file in your project so that it no longer references `file:../pagoda-ui`.
+_NOTE: Due to this library having peer dependencies, `pnpm link` isn't compatible - that's why we have to rely on using `file:` instead._
 
 ## Publishing a Release
 

package.json

@@ -21,8 +21,11 @@
     "format:fix": "prettier --write ./src",
     "lint": "eslint ./src/**/*.ts*",
     "lint:fix": "eslint . --fix",
-    "pre-commit": "pnpm format && pnpm lint --max-warnings 0 && pnpm ts:check",
-    "test": "pnpm pre-commit",
+    "lint:strict": "pnpm lint --max-warnings 0",
+    "pre-commit": "pnpm format && pnpm lint:strict && pnpm ts:check",
+    "pre-publish": "pnpm pre-commit && pnpm test",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "ts:check": "tsc --noEmit --incremental",
     "prepare": "husky"
   },
@@ -76,6 +79,8 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^8.3.4",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20",
     "@types/react": "^18.2.34",
@@ -85,6 +90,7 @@
     "eslint-config-prettier": "^9",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "husky": "^9.1.3",
+    "jsdom": "^24.1.1",
     "postcss": "^8.4.40",
     "postcss-preset-env": "^7.6.0",
     "postcss-scss": "^4.0.9",
@@ -96,6 +102,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.77.8",
     "tslib": "^2.6.2",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^2.0.5"
   }
 }