This is a living style guide. Subject to constant change.
It documents the current state and provides implemented React components, published as an npm package.
## About
The development started on March 5th 2017 for the crowdfunding of [republik.ch](https://www.republik.ch/). It has since been continuously expanded and now provides a wide range of functionality from [colors](/colors) and [typography](/typography) definitions, to an [video player](/videoplayer), common [form elements](/forms), [discussion trees](/components/discussion/tree), a full suite of editorial elements—from teasers to infoboxes, template definitions targeting [web](/templates/article) and [email](/templates/editorialnewsletter) and a [charting system](/charts).
It's currently primarly used to power our web and cms frontends—[republik-frontend](https://github.com/orbiting/republik-frontend) and [publikator-frontend](https://github.com/orbiting/publikator-frontend).
Beyond that it provides some definitions to our [backends](https://github.com/orbiting/backends) and [app](https://github.com/orbiting/app), was used in various prototypes and the charts are available on [observablehq.com](https://observablehq.com/@republik/charts) for story prototyping.
## License
The logo and fonts are the property of their owners (logo—Project R, GT America—GrilliType and Rubis—Nootype), and may not be reproduced without permission.
The source code is «BSD 3-clause» licensed.
## Use it in your React app
The peer dependencies are: `react`, `prop-types` and `glamor`.
```
npm install @project-r/styleguide --save
```
Example [button](/components/button):
```code|lang-js
import {Button} from '@project-r/styleguide'
const Crowdfunding = () => (
«Es ist Zeit, dass sich die Journalisten unabhängig machen und der Journalismus unabhängig von den Grossverlagen existieren kann. Und ein Modell dafür schafft man nur gemeinsam, oder gar nicht.»
)
```
See components in the menu for a full list and documentation.
### Usage with Next.js
`glamor` needs to be integrated into server rendering. For a simple integration use the following `pages/_document.js`:
```code|lang-js
import Document, {Head, Main, NextScript} from 'next/document'
import {renderStatic} from 'glamor/server'
export default class MyDocument extends Document {
static async getInitialProps ({renderPage}) {
const page = renderPage()
const styles = renderStatic(() => page.html)
return { ...page, ...styles }
}
render () {
const {css} = this.props
return (
{css ? : null}
)
}
}
```
See also:
- [next.js Example](https://github.com/zeit/next.js/blob/master/examples/with-glamor/pages/_document.js)
- [Webfonts Integration](/typographie)
### Theming
We want to keep the style guide code simple and will keep the theming options to a minimum. Fork if you want to customize more.
Following environment variables are available for theming:
```
SG_COLORS={"primary":"Maroon"}
SG_FONT_STYLES={"serifRegular":{"fontFamily":"'Merriweather', serif"},"serifTitle":{"fontFamily":"'Merriweather', serif","fontWeight":900}}
SG_FONT_FACES=@import url('https://fonts.googleapis.com/css?family=Merriweather:400,900&display=swap')
SG_LOGO_PATH=M0 0 L4 0 L4 1.5 L3 0.5 L2 4 L1 0.5 L0 1.5 Z
SG_LOGO_VIEWBOX=0 0 4 1.5
SG_LOGO_GRADIENT=
SG_BRAND_MARK_PATH=M0 4 L1 0 L4 4 Z
SG_BRAND_MARK_VIEWBOX=0 0 4 4
```
They may be prefixed with `REACT_APP_` for [CRA compatibility](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables). And will be retrieved from `window.ENV`, `window.__NEXT_DATA__.env` or `process.env`.
## Develop
This style guide is build with [Catalog](https://interactivethings.github.io/catalog/). You can write documentation in Markdown and React.
You will need [Node.js 14](https://nodejs.org/en/download/current/) or higher.
To start the development server run:
```
npm install
npm run dev
```
Further reading:
- [Adding a New Component](/dev/process)
### Semantic Release
The `master` branch gets auto-released via Travis. The next version is automatically determined according to the past [commit messages](https://github.com/semantic-release/semantic-release#default-commit-message-format).
#### Commit Message Format
```
():