Skip to content

Commit

Permalink
Merge pull request #1 from mayank1513/touchup
Browse files Browse the repository at this point in the history
Touchup
  • Loading branch information
mayank1513 committed Feb 21, 2024
2 parents 7a9dd33 + f3a19b8 commit 20a2f6c
Show file tree
Hide file tree
Showing 9 changed files with 98 additions and 131 deletions.
10 changes: 8 additions & 2 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
64 changes: 4 additions & 60 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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
```
Expand All @@ -40,53 +42,6 @@ or
$ 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 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

## 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

To build all apps and packages, run the following command:
Expand All @@ -105,22 +60,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

Expand Down
31 changes: 0 additions & 31 deletions lib/r18gs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
91 changes: 68 additions & 23 deletions lib/r18gs/README.md
Original file line number Diff line number Diff line change
@@ -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
<ForkMe gitHubUrl="https://github.com/mayank1513/turborepo-template" />
// and
<StarMe gitHubUrl="https://github.com/mayank1513/turborepo-template" />
```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.

<hr />

> This package also serves as an example to demonstrate how to build and publish `React.js` library compatible with React Server Components
<p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p>
15 changes: 6 additions & 9 deletions lib/r18gs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
"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": {
Expand Down Expand Up @@ -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",
Expand Down
12 changes: 9 additions & 3 deletions lib/r18gs/touchup.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@ if (process.env.TOKEN) {
},
});
}
delete packageJson.devDependencies;
delete packageJson.scripts;

packageJson.main = "index.js";
packageJson.types = "index.d.ts";
Expand All @@ -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")];

Expand Down
2 changes: 1 addition & 1 deletion packages/shared-ui/src/cards/docs-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export function DocsCard() {
return (
<a
className={styles.card}
href="https://mayank1513.github.io/r18gs/"
href="https://react18-tools.github.io/r18gs/"
rel="noopener noreferrer"
target="_blank">
<h2>
Expand Down
2 changes: 1 addition & 1 deletion packages/shared-ui/src/cards/examples-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export function ExamplesCard() {
return (
<a
className={styles.card}
href="https://github.com/mayank1513/r18gs"
href="https://github.com/react18-tools/r18gs"
rel="noopener noreferrer"
target="_blank">
<h2>
Expand Down
2 changes: 1 addition & 1 deletion packages/shared-ui/src/cards/star-me-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styles from "./cards.module.css";

export function StarMeCard() {
return (
<StarMe className={styles.card} gitHubUrl="https://github.com/mayank1513/r18gs">
<StarMe className={styles.card} gitHubUrl="https://github.com/react18-tools/r18gs">
<h2>
Star this repo <span>-&gt;</span>
</h2>
Expand Down

0 comments on commit 20a2f6c

Please sign in to comment.