From 7f8fb2100ff2117b43ae7d6ee05a0699d31aba5c Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:41:16 +0000 Subject: [PATCH 1/8] update readme --- README.md | 38 +------------------ lib/r18gs/README.md | 91 +++++++++++++++++++++++++++++++++------------ 2 files changed, 70 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index c79abe0d..78054386 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React18GlobalStore -[![test](https://github.com/react18-tools/r18gs/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/r18gs/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/r18gs/maintainability) [![codecov](https://codecov.io/gh/react18-tools/r18gs/graph/badge.svg)](https://codecov.io/gh/react18-tools/r18gs) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) +[![test](https://github.com/react18-tools/r18gs/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/r18gs/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/r18gs/maintainability) [![codecov](https://codecov.io/gh/react18-tools/r18gs/graph/badge.svg)](https://codecov.io/gh/react18-tools/r18gs) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) ## Motivation @@ -42,18 +42,7 @@ $ yarn add r18gs ## Step by Step Instructions and Checklist -- [ ] Set up `CodeCov` - - [ ] Visit codecov and setup your repo - - [ ] Create repository secrets for `CODECOV_TOKEN` -- [ ] Set up `CodeClimate` - - [ ] Visit CodeClimate and setup your repo - - [ ] Create repository secrets for `CC_TEST_REPORTER_ID` - - [ ] add `*.test.*` to ignore patterns on the website - - [ ] update code climate badge -- [ ] Add `NPM_AUTH_TOKEN` to repository secrets to automate publishing package - - [ ] login to your `npm` account and create automation token - - [ ] Create a new repository secrets `NPM_AUTH_TOKEN` -- [ ] Update description in `packages/r18gs/package.json` +- [ ] Update description in `lib/r18gs/package.json` - [ ] Update Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/) - [ ] Create your library and update examples - [ ] Update README @@ -63,29 +52,6 @@ $ yarn add r18gs - [ ] Optionally deploy your example(s) to Vercel. - [ ] You are most welcome to star this template, contribute, and/or sponsor the `terbo-repo-template` project or my other open-source work -## What's inside? - -### Utilities - -This Turborepo template includes pre-configured tools: - -- [TypeScript](https://www.typescriptlang.org/) for static type checking -- [ESLint](https://eslint.org/) for code linting -- [Prettier](https://prettier.io) for code formatting -- Plop based code generator for scaffolding new components -- Automatically rebrand this template to match your repo name - -### Apps and Packages - -This Turborepo includes the following packages/examples/lib: - -- `nextjs`: a [Next.js](https://nextjs.org/) app -- `vite`: a [Vite.js](https://vitest.dev) app -- `fork-me`: a React component library shared by both `Next.js` and `Vite` examples -- `eslint-config-custom`: ESLint configurations (includes `eslint-config-next` and `eslint-config-prettier`) -- `tsconfig`: `tsconfig.json`s used throughout the monorepo - -Each package/example is 100% [TypeScript](https://www.typescriptlang.org/). ### Build diff --git a/lib/r18gs/README.md b/lib/r18gs/README.md index 1d007344..d5bcc07d 100644 --- a/lib/r18gs/README.md +++ b/lib/r18gs/README.md @@ -1,39 +1,84 @@ -# Fork Me React.js component +# React18GlobalStore -A simple fork me component for React.js projects! +[![test](https://github.com/react18-tools/r18gs/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/r18gs/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/r18gs/maintainability) [![codecov](https://codecov.io/gh/react18-tools/r18gs/graph/badge.svg)](https://codecov.io/gh/react18-tools/r18gs) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) + +## Motivation + +I have built wonderful libraries utilizing React18 features using Zustand. They worked awesome. However, when I try importing from specific folder for better tree-shaking, the libraries fail. This is because, for each import a separate zustand store is created. This actually increases the package size also. + +Thus, I decided to create a bare minimum, ultra-light store that creates shared state even while importing components from separate files for better treeshaking. + +> Will be using this library soon to fix issues with `nextjs-themes`. + +## Features + +✅ Full TypeScript Support + +✅ Unleash the full power of React18 Server components + +✅ Works with all build systems/tools/frameworks for React18 + +✅ Doccumented with [Typedoc](https://react18-tools.github.io/r18gs) ([Docs](https://react18-tools.github.io/r18gs)) + +✅ Next.js, Vite and Remix examples ## Install ```bash -$ pnpm add @mayank1513/fork-me -# or -$ npm install @mayank1513/fork-me -# or -$ yarn add @mayank1513/fork-me +$ pnpm add r18gs +``` + +or + +```bash +$ npm install r18gs ``` -## Add on your page +or -```ts - -// and - +```bash +$ yarn add r18gs ``` -You need to import styles for ForkMe component +### Build + +To build all apps and packages, run the following command: -```ts -import "@mayank1513/fork-me/server/index.css"; ``` +cd r18gs +pnpm build +``` + +### Develop -## Optional parameters +To develop all apps and packages, run the following command: -```ts - text?: string; // replace the Fork me on GitHub text - width?: string | number; // if you need to adjust the width of the ribbon (length) - height?: string | number; // to adjust height of the ribbon - bgColor?: string; // background color - textColor?: string; // text color ``` +cd r18gs +pnpm dev +``` + +## Useful Links + +Learn more about the power of Turborepo: + +- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks) +- [Caching](https://turbo.build/repo/docs/core-concepts/caching) +- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) +- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering) +- [Configuration Options](https://turbo.build/repo/docs/reference/configuration) +- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference) + +### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/r18gs)! + +Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE) + +![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image") + +## License + +Licensed as MIT open source. + +
-> This package also serves as an example to demonstrate how to build and publish `React.js` library compatible with React Server Components +

with 💖 by Mayank Kumar Chaudhari

From 5b3ecaac4f126fe618d3254f7cefacdcda791b3d Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:44:42 +0000 Subject: [PATCH 2/8] Include CHANGELOG.md to npm package --- lib/r18gs/touchup.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/lib/r18gs/touchup.js b/lib/r18gs/touchup.js index 0ceacc15..bffe1097 100644 --- a/lib/r18gs/touchup.js +++ b/lib/r18gs/touchup.js @@ -35,8 +35,6 @@ if (process.env.TOKEN) { }, }); } -delete packageJson.devDependencies; -delete packageJson.scripts; packageJson.main = "index.js"; packageJson.types = "index.d.ts"; @@ -46,7 +44,15 @@ fs.writeFileSync( JSON.stringify(packageJson, null, 2), ); -fs.copyFileSync(path.resolve(__dirname, "..", "..", "README.md"), path.resolve(__dirname, "dist", "README.md")); +fs.copyFileSync( + path.resolve(__dirname, "..", "..", "README.md"), + path.resolve(__dirname, "dist", "README.md"), +); + +fs.copyFileSync( + path.resolve(__dirname, "CHANGELOG.md"), + path.resolve(__dirname, "dist", "CHANGELOG.md"), +); const dirs = [path.resolve(__dirname, "dist")]; From 7cab84f46c5a808cddfb1a4b6c09754067e2d315 Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:45:13 +0000 Subject: [PATCH 3/8] update-example-card-links --- packages/shared-ui/src/cards/docs-card.tsx | 2 +- packages/shared-ui/src/cards/examples-card.tsx | 2 +- packages/shared-ui/src/cards/star-me-card.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/shared-ui/src/cards/docs-card.tsx b/packages/shared-ui/src/cards/docs-card.tsx index 089e60c6..182dd26c 100644 --- a/packages/shared-ui/src/cards/docs-card.tsx +++ b/packages/shared-ui/src/cards/docs-card.tsx @@ -4,7 +4,7 @@ export function DocsCard() { return (

diff --git a/packages/shared-ui/src/cards/examples-card.tsx b/packages/shared-ui/src/cards/examples-card.tsx index 1ad6cdf9..ce163c9e 100644 --- a/packages/shared-ui/src/cards/examples-card.tsx +++ b/packages/shared-ui/src/cards/examples-card.tsx @@ -4,7 +4,7 @@ export function ExamplesCard() { return (

diff --git a/packages/shared-ui/src/cards/star-me-card.tsx b/packages/shared-ui/src/cards/star-me-card.tsx index ac11579e..e4c68510 100644 --- a/packages/shared-ui/src/cards/star-me-card.tsx +++ b/packages/shared-ui/src/cards/star-me-card.tsx @@ -3,7 +3,7 @@ import styles from "./cards.module.css"; export function StarMeCard() { return ( - +

Star this repo ->

From 0dc01b45a969da8508dc9ff14458cd5a31006fc9 Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:46:26 +0000 Subject: [PATCH 4/8] update package json description and keywords --- lib/r18gs/package.json | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/lib/r18gs/package.json b/lib/r18gs/package.json index 8295f528..86a9a1b5 100644 --- a/lib/r18gs/package.json +++ b/lib/r18gs/package.json @@ -3,7 +3,7 @@ "author": "Mayank Kumar Chaudhari ", "private": false, "version": "0.0.0", - "description": "An intuitive React.js fork me ribbon component for promoting open source project forks.", + "description": "A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.", "main": "./index.ts", "types": "./index.ts", "repository": { @@ -44,25 +44,22 @@ }, "peerDependencies": { "@types/react": "16.8 - 18", - "next": "10 - 14", "react": "16.8 - 18" }, - "peerDependenciesMeta": { - "next": { - "optional": true - } - }, "funding": { "type": "github", "url": "https://github.com/sponsors/mayank1513" }, "keywords": [ - "fork-me", - "GitHub", + "react18-global-store", "nextjs", "nextjs13", + "nextjs14", "react", "react18", + "zustand", + "zen-store", + "react-global-store", "react-server-components", "react-client-components", "typescript", From f626f2f270ec6e53a3087876436eec51850f6cc4 Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:46:47 +0000 Subject: [PATCH 5/8] update publish workflow --- .github/workflows/publish.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 7df0cfc7..350a17fe 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -48,10 +48,16 @@ jobs: - name: Publish Scoped package to NPM # continue on error - expecing npm to trow error if scoping is done twice continue-on-error: true - id: publish_scoped run: cd dist && node ../scope.js && npm publish --provenance --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} TOKEN: ${{ secrets.GITHUB_TOKEN }} OWNER: ${{ github.event.repository.owner.login }} REPO: ${{ github.event.repository.name }} + + - name: Publish package with long name for better SEO + continue-on-error: true + run: | + cd dist + sed -i -e "s/.*name.*/\t\"name\": \"react18-global-store\",/" package.json + npm publish --provenance --access public From 9ac8cae978f53ba12d1e47d02384bd4dd60b52c5 Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:50:17 +0000 Subject: [PATCH 6/8] update README --- README.md | 26 +------------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/README.md b/README.md index 78054386..1cde3494 100644 --- a/README.md +++ b/README.md @@ -40,19 +40,6 @@ or $ yarn add r18gs ``` -## Step by Step Instructions and Checklist - -- [ ] Update description in `lib/r18gs/package.json` -- [ ] Update Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/) -- [ ] Create your library and update examples -- [ ] Update README -- [ ] Setup GitHub pages to deploy docs - - [ ] Go to [repo settings](https://github.com/mayank1513/r18gs/settings/pages) -> pages (On left panel); Select deploy from a branch; Then Select `main` and `/docs` -- [ ] Push your changes/Create PR and see your library being automatically tested and published -- [ ] Optionally deploy your example(s) to Vercel. -- [ ] You are most welcome to star this template, contribute, and/or sponsor the `terbo-repo-template` project or my other open-source work - - ### Build To build all apps and packages, run the following command: @@ -71,22 +58,11 @@ cd r18gs pnpm dev ``` -## Useful Links - -Learn more about the power of Turborepo: - -- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks) -- [Caching](https://turbo.build/repo/docs/core-concepts/caching) -- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) -- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering) -- [Configuration Options](https://turbo.build/repo/docs/reference/configuration) -- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference) - ### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/r18gs)! Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE) -![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image") +![Repo Stats](https://repobeats.axiom.co/api/embed/ec3e74d795ed805a0fce67c0b64c3f08872e7945.svg "Repobeats analytics image") ## License From e29e713f1956f6d4ceaa8b3f33f5a073f21bc891 Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:51:27 +0000 Subject: [PATCH 7/8] clean up Changelog --- lib/r18gs/CHANGELOG.md | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/lib/r18gs/CHANGELOG.md b/lib/r18gs/CHANGELOG.md index f294e17e..e69de29b 100644 --- a/lib/r18gs/CHANGELOG.md +++ b/lib/r18gs/CHANGELOG.md @@ -1,31 +0,0 @@ -# @mayank1513/fork-me - -## 2.0.1 - -### Patch Changes - -- Add provenance - -## 2.0.0 - -### Major Changes - -- Support Next.js 14 - -## 1.1.2 - -### Patch Changes - -- Add z-index to make sure ribbon is not covered - -## 1.1.1 - -### Patch Changes - -- Fix CSS modules - -## 1.1.0 - -### Minor Changes - -- Added new prop shadowColor - drop shadow on hover defaults to bgColor From f3a19b88719d6a944150177046c418669345e499 Mon Sep 17 00:00:00 2001 From: Mayank Date: Wed, 21 Feb 2024 10:54:14 +0000 Subject: [PATCH 8/8] touchup --- .github/workflows/publish.yml | 2 +- README.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 350a17fe..f2cce950 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -10,7 +10,7 @@ jobs: publish: # Don't run just after creating repo from template # Also avoid running after merging set-up PR - if: github.run_number > 2 && github.event.repository.owner.login == 'react18-tools' + if: github.event.repository.owner.login == 'react18-tools' runs-on: ubuntu-latest permissions: packages: write diff --git a/README.md b/README.md index 1cde3494..27299853 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,8 @@ Thus, I decided to create a bare minimum, ultra-light store that creates shared ## Install +> A canonical package with longer name is also published `react18-global-store` + ```bash $ pnpm add r18gs ```