https://github.com/stephane-klein/storybook-reactjs-scaffolding

Storybook + ReactJS + i18next + some storybook addons Scaffolding
https://github.com/stephane-klein/storybook-reactjs-scaffolding

scaffolding storybook

Last synced: 5 days ago
JSON representation

Storybook + ReactJS + i18next + some storybook addons Scaffolding

• Host: GitHub
• URL: https://github.com/stephane-klein/storybook-reactjs-scaffolding
• Owner: stephane-klein
• Created: 2019-08-24T07:33:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-23T08:20:07.000Z (over 5 years ago)
• Last Synced: 2024-11-29T22:16:12.056Z (2 months ago)
• Topics: scaffolding, storybook
• Language: JavaScript
• Size: 2.67 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Storybook + ReactJS Scaffolding

See live example: https://stephane-klein.github.io/storybook-reactjs-scaffolding/

More informations in French [« How I use storybook »](https://github.com/stephane-klein/personnal-notebook/blob/master/016-comment-j-utilise-storybook-pour-creer-des-apps-react-ou-sites-statiques.md)

Next in the roadmap:

- [x] viewport

- [x] storybook-react-router 

- [x] i18n

- [ ] [apollo-storybook-react](https://github.com/abhiaiyer91/apollo-storybook-decorator)

Scaffolding Content:

- [storybook](https://storybooks-official.netlify.com/) `5.2.1` with some addons enabled:

  - [`@storybook/addon-actions`](https://github.com/storybookjs/storybook/tree/master/addons/actions)

  - [`@storybook/addon-links`](https://github.com/storybookjs/storybook/tree/master/addons/links)

  - [`@storybook/addon-storysource`](https://github.com/storybookjs/storybook/tree/master/addons/storysource)

  - [`@storybook/addon-viewport`](https://github.com/storybookjs/storybook/tree/master/addons/viewport) (configuration: [viewport](.storybook/config.js) ( [based on browser market europe](https://gs.statcounter.com/screen-resolution-stats/desktop/europe) ))

  - [`storybook-addon-i18next`](https://github.com/fynncfchen/storybook-addon-i18next#readme)

  - [`storybook-react-router`](https://github.com/gvaldambrini/storybook-router) ([read this](stories/pages/README.md))

- eslint

- [i18next](https://github.com/i18next/i18next)

- react-router

## Install and launch storybook

```

$ npm install

$ npm run storybook

```

http://localhost:6006

## Note about i18n

Extract i18n strings:

```

$ npm run i18n

```

Update translation files:

- [`src/translations/en/translation.json`](src/translations/en/translation.json)

- [`src/translations/fr/translation.json`](src/translations/fr/translation.json)

## Start React app (without Storybook)

```

$ npm run start

```

Open http://localhost:3000/