-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a23a93c
commit 84dc495
Showing
1 changed file
with
52 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,60 @@ | ||
| # Turborepo Design System starter with Changesets | ||
|
|
||
| This is an official React design system starter powered by Turborepo. Versioning and package publishing is handled by [Changesets](https://github.com/changesets/changesets) and fully automated with GitHub Actions. | ||
|
|
||
| ## Using this example | ||
|
|
||
| Run the following command: | ||
| <!-- markdownlint-disable no-inline-html --> | ||
| <p align="center"> | ||
| <br><br> | ||
| <img src="https://leafphp.dev/logo-circle.png" height="100"/> | ||
| <br> | ||
| </p> | ||
|
|
||
| <h1 align="center">Hana</h1> | ||
|
|
||
| <p align="center"> | ||
| <a href="https://packagist.org/packages/leafs/hanabira" | ||
| ><img | ||
| src="https://poser.pugx.org/leafs/hanabira/v/stable" | ||
| alt="Latest Stable Version" | ||
| /></a> | ||
| <a href="https://packagist.org/packages/leafs/hanabira" | ||
| ><img | ||
| src="https://poser.pugx.org/leafs/hanabira/downloads" | ||
| alt="Total Downloads" | ||
| /></a> | ||
| <a href="https://packagist.org/packages/leafs/hanabira" | ||
| ><img | ||
| src="https://poser.pugx.org/leafs/hanabira/license" | ||
| alt="License" | ||
| /></a> | ||
| </p> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| Hana is a simple, lightweight and easy to use React framework. It focuses on developer experience, stability and performance. Unlike the 100s of other React frameworks out there, Hana comes with a lot of features out of the box, including: | ||
|
|
||
| - Powerful routing | ||
| - Human state management | ||
| - Dead simple server/client side authentication | ||
| - SSR support with [Leaf PHP](https://leafphp.dev) | ||
|
|
||
| *You can call it React on the go.* | ||
|
|
||
| ## Getting Started | ||
|
|
||
| To get started with Hana, you can use the `create-hana-app` CLI tool to create a new project. | ||
|
|
||
| ```sh | ||
| npx create-turbo@latest -e with-changesets | ||
| npm create hana-app@latest | ||
| ``` | ||
|
|
||
| ## What's inside? | ||
| ## What's in this Repo? | ||
|
|
||
| This Turborepo includes the following: | ||
|
|
||
| ### Apps and Packages | ||
|
|
||
| - `docs`: A placeholder documentation site powered by [Next.js](https://nextjs.org/) | ||
| - `@acme/core`: core React components | ||
| - `@acme/utils`: shared React utilities | ||
| - `@acme/tsconfig`: shared `tsconfig.json`s used throughout the monorepo | ||
| - `eslint-config-acme`: ESLint preset | ||
|
|
||
| Each package and app is 100% [TypeScript](https://www.typescriptlang.org/). | ||
|
|
||
| ### Utilities | ||
|
|
||
| This Turborepo has some additional tools already setup for you: | ||
|
|
||
| - [TypeScript](https://www.typescriptlang.org/) for static type checking | ||
| - [ESLint](https://eslint.org/) for code linting | ||
| - [Prettier](https://prettier.io) for code formatting | ||
|
|
||
| ### Useful commands | ||
|
|
||
| - `yarn build` - Build all packages and the docs site | ||
| - `yarn dev` - Develop all packages and the docs site | ||
| - `yarn lint` - Lint all packages | ||
| - `yarn changeset` - Generate a changeset | ||
| - `yarn clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script) | ||
|
|
||
| ### Changing the npm organization scope | ||
|
|
||
| The npm organization scope for this design system starter is `@acme`. To change this, it's a bit manual at the moment, but you'll need to do the following: | ||
|
|
||
| - Rename folders in `packages/*` to replace `acme` with your desired scope | ||
| - Search and replace `acme` with your desired scope | ||
| - Re-run `yarn install` | ||
|
|
||
| ## Versioning and Publishing packages | ||
|
|
||
| Package publishing has been configured using [Changesets](https://github.com/changesets/changesets). Please review their [documentation](https://github.com/changesets/changesets#documentation) to familiarize yourself with the workflow. | ||
|
|
||
| This example comes with automated npm releases setup in a [GitHub Action](https://github.com/changesets/action). To get this working, you will need to create an `NPM_TOKEN` and `GITHUB_TOKEN` in your repository settings. You should also install the [Changesets bot](https://github.com/apps/changeset-bot) on your GitHub repository as well. | ||
|
|
||
| For more information about this automation, refer to the official [changesets documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md) | ||
|
|
||
| ### npm | ||
|
|
||
| If you want to publish package to the public npm registry and make them publicly available, this is already setup. | ||
|
|
||
| To publish packages to a private npm organization scope, **remove** the following from each of the `package.json`'s | ||
|
|
||
| ```diff | ||
| - "publishConfig": { | ||
| - "access": "public" | ||
| - }, | ||
| ``` | ||
|
|
||
| ### GitHub Package Registry | ||
| - `docs`: Documentation powered by [Vitepress](https://vitepress.vuejs.org/) | ||
| - `@hanabira/core`: core library for Hana | ||
| - `@hanabira/store`: state management library for Hana | ||
| - `@hanabira/auth`: authentication library for Hana | ||
| - `@hanabira/router`: router library for Hana | ||
| - `@hanabira/config`: shared configs used throughout the monorepo | ||
| - `@leafphp/hana`: SSR bridge for Hana | ||
| - `create-hana-app`: CLI tool for creating new Hana apps | ||
|
|
||
| See [Working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#publishing-a-package-using-publishconfig-in-the-packagejson-file) | ||
| Each package is 100% [TypeScript](https://www.typescriptlang.org/). |