📝(global) add README.md
Create a first version of README.md
This commit is contained in:
73
README.md
73
README.md
@@ -1,73 +1,48 @@
|
|||||||
# Turborepo starter
|
`# Cunningham, the best OpenSource Design System`
|
||||||
|
|
||||||
This is an official Yarn v1 starter turborepo.
|
[](https://circleci.com/gh/openfun/richie/tree/master)
|
||||||
|
|
||||||
## What's inside?
|
## Getting started
|
||||||
|
|
||||||
This turborepo uses [Yarn](https://classic.yarnpkg.com/) as a package manager. It includes the following packages/apps:
|
Packages are not published yet, but once it is done we will show people how to install packages.
|
||||||
|
|
||||||
### Apps and Packages
|
## Development
|
||||||
|
|
||||||
- `docs`: a [Next.js](https://nextjs.org/) app
|
### First start
|
||||||
- `web`: another [Next.js](https://nextjs.org/) app
|
|
||||||
- `ui`: a stub React component library shared by both `web` and `docs` applications
|
|
||||||
- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
|
|
||||||
- `tsconfig`: `tsconfig.json`s used throughout the monorepo
|
|
||||||
|
|
||||||
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
|
Install and build packages
|
||||||
|
|
||||||
### 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
|
|
||||||
|
|
||||||
### Build
|
|
||||||
|
|
||||||
To build all apps and packages, run the following command:
|
|
||||||
|
|
||||||
```
|
```
|
||||||
cd my-turborepo
|
make bootstrap
|
||||||
yarn run build
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Develop
|
And then run dev servers
|
||||||
|
|
||||||
To develop all apps and packages, run the following command:
|
|
||||||
|
|
||||||
```
|
```
|
||||||
cd my-turborepo
|
make dev
|
||||||
yarn run dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Remote Caching
|
Then, you will be able to access the demo app on `http://localhost:3200` and the React components package's Storybook on
|
||||||
|
`http://localhost:6006`
|
||||||
|
|
||||||
Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
|
### Building
|
||||||
|
|
||||||
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
|
In order to build all packages of this repo you just need to type the following command at the root of the monorepo.
|
||||||
|
|
||||||
```
|
```
|
||||||
cd my-turborepo
|
make build
|
||||||
npx turbo login
|
|
||||||
```
|
```
|
||||||
|
|
||||||
This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
|
## Contributing
|
||||||
|
|
||||||
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:
|
This project is intended to be community-driven, so please, do not hesitate to
|
||||||
|
get in touch if you have any question related to our implementation or design
|
||||||
|
decisions.
|
||||||
|
|
||||||
```
|
We try to raise our code quality standards and expect contributors to follow
|
||||||
npx turbo link
|
the recommandations from our
|
||||||
```
|
[handbook](https://openfun.gitbooks.io/handbook/content).
|
||||||
|
|
||||||
## Useful Links
|
## License
|
||||||
|
|
||||||
Learn more about the power of Turborepo:
|
This work is released under the MIT License (see [LICENSE](./LICENSE)).
|
||||||
|
|
||||||
- [Pipelines](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)
|
|
||||||
@@ -14,7 +14,7 @@ For example:
|
|||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
In this section we will install the library and generate the file that contains the design tokens of your app in order to
|
In this section we will install the library and generate the file that contains the design tokens of your app in order to
|
||||||
make Cunningham's Design System yours!
|
make Cunningham's Design System yours!
|
||||||
|
|
||||||
Install the lib
|
Install the lib
|
||||||
@@ -35,7 +35,7 @@ module.exports = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
In this configuration file you can overwrite all the default values of the design system.
|
In this configuration file you can overwrite all the default values of the design system.
|
||||||
You can find the default values [here](./src/bin/cunningham.dist.js).
|
You can find the default values [here](./src/bin/cunningham.dist.js).
|
||||||
|
|
||||||
Now add this script to your `package.json`
|
Now add this script to your `package.json`
|
||||||
@@ -50,13 +50,13 @@ Now add this script to your `package.json`
|
|||||||
```
|
```
|
||||||
|
|
||||||
The cunningham CLI's main purpose is to build a ad-hoc CSS file that contains all your customized design tokens,
|
The cunningham CLI's main purpose is to build a ad-hoc CSS file that contains all your customized design tokens,
|
||||||
by taking into account your local configuration ( defined in the file that you previously created : `cunningham.cjs`,
|
by taking into account your local configuration ( defined in the file that you previously created : `cunningham.cjs`,
|
||||||
it is worth mentioning that this file is optional, hence it will generate a file containing the default values of the
|
it is worth mentioning that this file is optional, hence it will generate a file containing the default values of the
|
||||||
design system )
|
design system )
|
||||||
|
|
||||||
> You can run `yarn run cunningham -h` to see the available options.
|
> You can run `yarn run cunningham -h` to see the available options.
|
||||||
|
|
||||||
And in order to generate the tokens css file, run
|
And in order to generate the tokens css file, run
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn build-theme
|
yarn build-theme
|
||||||
@@ -76,7 +76,7 @@ It's all done!
|
|||||||
|
|
||||||
## Use the design tokens
|
## Use the design tokens
|
||||||
|
|
||||||
Design tokens variable are all present in the `cunningham-tokens.css` file. They are all prefixed with `--c` in order to
|
Design tokens variable are all present in the `cunningham-tokens.css` file. They are all prefixed with `--c` in order to
|
||||||
avoid collision.
|
avoid collision.
|
||||||
|
|
||||||
Here is an example to make the text's color renders with the value of the primary color in `.my-element` matching elements
|
Here is an example to make the text's color renders with the value of the primary color in `.my-element` matching elements
|
||||||
|
|||||||
Reference in New Issue
Block a user