📝(doc) update docs to install published packages + contributing guide

Updated various parts of existing documentations to make a clean path
to learn how to install the library. I let the most complicated part in
the tokens's README.md file, which is referenced from the Storybook.
This commit is contained in:
Nathan Vasse
2023-01-30 15:00:46 +01:00
committed by NathanVss
parent 4ebbf168e2
commit 63118d0f3e
5 changed files with 1216 additions and 741 deletions

View File

@@ -0,0 +1,67 @@
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
<Meta title="Getting Started/Installation"/>
# Installation
First, install the library
<Source
language='bash'
dark
format={false}
code={`
yarn add @openfun/cunningham-react
`}
/>
Then, add this script to your `package.json` file
<Source
language='json'
dark
format={false}
code={`
{
"scripts": {
"build-theme": "cunningham -g css -o src"
},
}
`}
/>
> Please take a look at [tokens documentation](https://github.com/openfun/cunningham/tree/main/packages/tokens#configuration-file) for more informations about the `cunningham` command line tool and to customize your local theme.
Then, in order to generate the css file, run
<Source
language='bash'
dark
format={false}
code={`
yarn build-theme
`}
/>
It will generate a file named `cunningham-tokens.css`.
Then, add these lines at the top of your main stylesheet file:
<Source
language='css'
dark
format={false}
code={`
@import "@openfun/cunningham-react/style"; // Imports the default theme.
@import "cunningham-tokens"; // Imports the file you just generated.
`}
/>
> Please see [here](https://github.com/openfun/cunningham/tree/main/packages/tokens#use-the-design-tokens) to see how to use the design tokens in your source code.
We're done! 🎉
Now to verify that everything works well by trying to render a component, like the [Button](?path=/story/components-button-doc--page) for example.