diff --git a/.github/workflows/npm-gh-publish.yml b/.github/workflows/npm-gh-publish.yml new file mode 100644 index 0000000..c24217a --- /dev/null +++ b/.github/workflows/npm-gh-publish.yml @@ -0,0 +1,20 @@ +name: Publish Package to github npm registry +on: + release: + types: [published] +jobs: + npm-publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + # setup .npmrc file to publish to npm + - uses: actions/setup-node@v3 + with: + node-version: 'latest' + registry-url: 'https://registry.npmjs.org' + - run: npm ci + - run: npm run build + # scoped packages are private by default so need to add public flag + - run: npm publish --access public + env: + NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/DEVELOPMENT_GUIDELINES.md b/DEVELOPMENT_GUIDELINES.md index 76d2774..99e3564 100644 --- a/DEVELOPMENT_GUIDELINES.md +++ b/DEVELOPMENT_GUIDELINES.md @@ -4,6 +4,24 @@ Developing a component library is a bit different from developing a application This guide will help you understand the best practices for developing a component library in React and the things you should consider before you start developing your component library. +## Table of Contents + +- [Introduction](#introduction) +- [Client Components or Server Components ?](#client-components-or-server-components-) +- [React DOM Rendering and Re-Rendering](#react-dom-rendering-and-re-rendering) +- [State Management](#state-management) + - [Composed Components > Prop Drilling](#composed-components--prop-drilling) + - [Composed Components over Context API](#composed-components-over-context-api) + - [Zustand over Context API](#zustand-over-context-api) + - [Signals over Hooks ( useSignal, useComputed > useState )](#signals-over-hooks--usesignal-,-usecomputed--usestate-) + - [Epic Theo Rant](#epic-theo-rant) +- [Testing](#testing) +- [Logging](#logging) +- [Theme and Styling](#theme-and-styling) +- [Optimistic Updates](#optimistic-updates) +- [The Frontend Architect Guide](#the-frontend-architect-guide) + + # Client Components or Server Components ? You need to decide whether you want to develop client side components or server side components. Remember if you use [React Hooks](https://react.dev/reference/react/hooks) or custom hooks from other libraries, you will not be able to use them in server side components. diff --git a/RELEASE_GUIDELINES.md b/RELEASE_GUIDELINES.md index 44d3def..bf34265 100644 --- a/RELEASE_GUIDELINES.md +++ b/RELEASE_GUIDELINES.md @@ -1 +1,92 @@ -# [For Maintianers Only] Release Process \ No newline at end of file +# Release Process +> For maintainers of this repository + + +The repository strictly follows [semantic versioning](https://semver.org/). + +You can make a release using the CI or manually via the command line. + +If the repository is private, you should consider using the manual release process. + +# Enable/Disable CI Release + +There are two Github Actions that are used to automate the release process: +- `npm-publish.yml` - This action is used to publish the package to NPM. +- `npm-gh-publish.yml` - This action is used to publish the package to GitHub NPM Registry. + + +> **NOTE**: Please change the triggers for these actions to enable/disable the CI release process. + +# Prepare for Release +Before you release a new version, please make sure you have done the following: +- [ ] Update the `package.json` file with the new version number. +- [ ] Update the `README.md` file with the new version number. +- [ ] Make sure the main branch is up to date with the latest changes. +- [ ] Make update the test coverage thresholds. +- [ ] Make sure the main branch is passing all the tests. + ```bash + npm run lint + npm run format + npm run test + npm run build + ``` + +Once done, please commit the changes with the updated version number and push to the main branch. + +The commit message should be in the following format: +``` +Prepare Release: +``` + +The version should follow [semantic versioning](https://semver.org/). + +# CI Release +Create a new Release on Github. Remember to create a new release tag. When you create a new release in GitHub, the CI will automatically publish the package to NPM. + +# Manual Release +> **NOTE**: This process is only for private repositories. + +Update your `package.json` to the next version number and tag a release. + +If you are publishing to a private registry such as GitHub packages, update your `package.json` to include `publishConfig` and `repository`: + +package.json: +```json + "publishConfig": { + "registry": "https://npm.pkg.github.com/@MyOrg" + }, + "repository": "https://github.com/MyOrg/mylib.git", +``` + +For clean builds, you may want to install the `rimraf` package and add a `clean` or `prebuild` script to your `package.json` to remove any artifacts from your `dist/` folder. Or, manually delete the `dist/` folder yourself. Unless you are using a continuous integration service such as GitHub Actions, `npm publish` will ship anything inside the distributable folder. + +package.json: +```json + "scripts": { + "clean": "rimraf dist" + } +``` + +Before you submit for the first time, make sure your package name is available by using `npm search`. If npm rejects your package name, update your `package.json` and resubmit. + +```bash +npm search +``` + +Once ready to submit your package to the NPM Registry, execute the following tasks via `npm` (or `yarn`): + +```bash +npm run build +``` + +Assure the proper npm login: + +```bash +npm login +``` + +Submit your package to the registry: + +```bash +npm publish --access public +``` \ No newline at end of file