|
| 1 | + |
| 2 | +[<img src="doc/logo-small.png" align="left" class="logo" width="280" title="❤︎❤︎❤︎"/>](https://github.com/sm-react/react-theming/stargazers) |
| 3 | + |
| 4 | +<div align="center" style="height: 16px;"><sub>Created with ❤︎ to <b>React</b> and <b>React Storybook</b> by <a href="https://twitter.com/UsulPro">UsulPro</a>.</sub></div> |
| 5 | +<img src="doc/margin.png" align="center" class="logo"/> |
| 6 | + |
| 7 | +**React-Theming** provides a set of tools for developing themable React apps with **React-Storybook** under the hood. This project includes three main parts: |
| 8 | + |
| 9 | + :small_blue_diamond: | :small_blue_diamond: | :small_blue_diamond: | :small_blue_diamond: | :small_blue_diamond: |
| 10 | +------ | ----- | ------ | ---- | ---- |
| 11 | +[Addon for Storybook](https://github.com/sm-react/storybook-addon-material-ui) | The core of React-Theming | [](https://github.com/sm-react/storybook-addon-material-ui) | [](https://sm-react.github.io/storybook-addon-material-ui) | [](https://badge.fury.io/js/storybook-addon-material-ui) |
| 12 | +[React Theme Provider](https://github.com/sm-react/react-theme-provider) | A generic theme provider and (very) simple CSS styler | [](https://github.com/sm-react/react-theme-provider) | [](https://sm-react.github.io/react-theme-provider) | [](https://badge.fury.io/js/react-theme-provider) |
| 13 | +[The Boilerplate Project](https://github.com/UsulPro/myjunkstaff/blob/master/docs/readme.md#storybook-boilerplate-project) | Starting point for apps development | [](https://github.com/sm-react/react-theming) | [](https://sm-react.github.io/react-theming) | [](https://badge.fury.io/gh/sm-react%2Freact-theming) |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +## Storybook Boilerplate Project |
| 18 | + |
| 19 | +[](https://badge.fury.io/gh/sm-react%2Freact-theming) |
| 20 | +[](https://sm-react.github.io/react-theming) |
| 21 | + |
| 22 | +At the heart of this project the desire to collect the best practices of application development via [React-Storybook](https://github.com/storybooks/react-storybook) environment. This project is transparent and friendly for developers. You do not need to eject anything. Therefore you can easily add your own configuration and extend it using any packages. |
| 23 | + |
| 24 | +It contains the *fully-charged* setup of the Storybook with **pre-installed plugins**, configuration, quick examples, and tips. Inspired by [Create React App](https://github.com/facebookincubator/create-react-app) and [React CDK](https://github.com/kadirahq/react-cdk). |
| 25 | + |
| 26 | +-- |
| 27 | + |
| 28 | +### Features |
| 29 | + |
| 30 | +Since we are now at the starting point, we mark with [<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) icon features that will be implemented in the near future. See our further plans in the [roadmap](#roadmap) section. |
| 31 | + |
| 32 | +- React Storybook Addons: |
| 33 | + |
| 34 | + - [<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) [React Storybook Info Addon](https://github.com/storybooks/react-storybook-addon-info) - *show additional <b>information</b> for your stories* |
| 35 | + |
| 36 | + - [<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) [Storybook Addon Notes](https://github.com/storybooks/storybook-addon-notes) - *allows you to write <b>notes</b> for your stories* |
| 37 | + |
| 38 | + - [Storybook Addon Actions](https://github.com/storybooks/storybook-addon-actions) (included by default) - *the <b>Action Logger</b> addon can be used to display data received by event handlers* |
| 39 | + |
| 40 | + - [<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) [Storybook Addon Knobs ](https://github.com/storybooks/storybook-addon-knobs) - *allows you to <b>edit</b> React props dynamically* |
| 41 | + |
| 42 | + - [Storybook Addon Material-UI](https://github.com/sm-react/storybook-addon-material-ui) - *provides live <b>theme</b> creating environment to React Storybook* |
| 43 | + |
| 44 | +- Testing: |
| 45 | + |
| 46 | + - [<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) [StoryShots](https://github.com/storybooks/storyshots) - *provides [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) for React Storybook* |
| 47 | + |
| 48 | + - [Mocha](https://github.com/mochajs/mocha) and [Enzyme](https://github.com/airbnb/enzyme) |
| 49 | + |
| 50 | +- React ecosystem: |
| 51 | + |
| 52 | + - [Material-UI](http://www.material-ui.com/#/) - *via [Storybook Addon Material-UI](https://github.com/sm-react/storybook-addon-material-ui)* |
| 53 | + |
| 54 | + - [React Theme Provider](https://github.com/sm-react/react-theme-provider) |
| 55 | + |
| 56 | +- Workflow *(via NPM scripts command)*: |
| 57 | + |
| 58 | + - Support for Linux, macOS, and Windows |
| 59 | + |
| 60 | + - [<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) Build your App with [Webpack](https://github.com/webpack/webpack) and [Babel](https://github.com/babel/babel) |
| 61 | + |
| 62 | + - Publish transpiled code into NPM |
| 63 | + |
| 64 | + - Run tests |
| 65 | + |
| 66 | + - [ESLint](https://github.com/eslint/eslint) with the [Airbnb style guide](https://github.com/airbnb/javascript) |
| 67 | + |
| 68 | + - Deploy your storybook to GitHub Pages |
| 69 | + |
| 70 | +-- |
| 71 | + |
| 72 | +### Roadmap |
| 73 | + |
| 74 | +[<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) Add support for **Storybook 3** features |
| 75 | + |
| 76 | +[<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) Add [Styled Components](https://github.com/styled-components/styled-components) support |
| 77 | + |
| 78 | +[<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) Deploy your App to GitHub Pages |
| 79 | + |
| 80 | +[<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) [storybook-addon-comments](https://github.com/storybooks/storybook-addon-comments) - *allows you to add comments for your stories* |
| 81 | + |
| 82 | +[<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) [storybook-addon-options](https://github.com/storybooks/storybook-addon-options) - *set configure the Storybook UI* |
| 83 | + |
| 84 | +[<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) Short tutorial for using this tools |
| 85 | + |
| 86 | +[<img src="doc/msm.png" alt="Milestone" width="22">](#roadmap) Suggest your [feature](/../../issues) wich you'd like to see here! |
| 87 | + |
| 88 | +-- |
| 89 | + |
| 90 | +### Quick start |
| 91 | + |
| 92 | +###### Instal the project |
| 93 | + |
| 94 | +tip: you can skip this step if you only want to look at this project. Just open [live demo](https://sm-react.github.io/react-theming) page and jump to [here](#you-will-see-the-demo-page-provided-by-react-storybook) |
| 95 | + |
| 96 | +```shell |
| 97 | +git clone https://github.com/sm-react/react-theming.git |
| 98 | +cd react-theming |
| 99 | +npm i |
| 100 | +npm start |
| 101 | +``` |
| 102 | + |
| 103 | +[<img src="doc/npm-start.png" align="right" class="logo" width="500" title="launching the Storybook"/>](https://raw.githubusercontent.com/UsulPro/myjunkstaff/master/docs/doc/npm-start.png) |
| 104 | + |
| 105 | +Open http://localhost:9001/ in your browser. |
| 106 | + |
| 107 | +###### You will see the demo page provided by React Storybook. |
| 108 | + |
| 109 | +Press `Ctrl-Shft-F` to exit from `Full screen` mode. |
| 110 | + |
| 111 | +Two panel will appear. You will see the list of `stories` at the left panel and the bottom panel for working with themes. |
| 112 | + |
| 113 | +Let's select another theme for this page. Do it via dropdown list at the bottom panel. Out of the box there are three themes: 'Light', 'Dark' and 'Gray'. Check out them. |
| 114 | + |
| 115 | +[<img src="doc/left-pane.png" align="left" width="180" title="Left Storybook panel"/>](https://raw.githubusercontent.com/UsulPro/myjunkstaff/master/docs/doc/left-pane.png) |
| 116 | + |
| 117 | +Note the text field with the full theme data. You can change any property and instantly see how the result will affect the appearance of the page. But the best way to edit theme is to use `Theme Editor`. |
| 118 | + |
| 119 | +Click to `Show Theme Editor`. It'll open a panel with a list of all theme props at the right. Click to any colored box in this list to open the color picker tool, for example on `textColor`. Now you can move your mouse over the color swatches and see how the color of text is changing. |
| 120 | + |
| 121 | +When you feel enough to edit your theme, you can save it for future use. Press [<img src="doc/save-btn.png" width="20"/>](#you-will-see-the-demo-page-provided-by-react-storybook) to create a JSON file with your theme. Put it to `src/themes/` folder in your project to include it to your theme list automatically. **Note**: you don't need to restart your app after adding a new theme-file to this folder, just refresh your browser. **Roadmap**: we are working to eliminate even this need to refresh the page after adding a file. |
| 122 | + |
| 123 | +[<img src="doc/bottom-pane.png" align="right" width="500" title="Bottom theming panel"/>](https://raw.githubusercontent.com/UsulPro/myjunkstaff/master/docs/doc/bottom-pane.png) |
| 124 | + |
| 125 | +Okay, now let's look at the panel on the left. In fact, our application consists of two components: `src/Header.jsx` and `src/Intro.jsx`. Selecting the appropriate items in the left-side list you switch to an isolated view of the component. It's how `React Storybook` works - allows you 'step-by-step' to create and works with React components. You can improve the quality of development by applying different addons to Storybook. Most of them is already pre-installed in this project. You will find excellent [documentation and examples](https://getstorybook.io/docs/) on the React Storybook website. |
| 126 | + |
| 127 | +--- |
| 128 | + |
| 129 | +### FAQ |
| 130 | + |
| 131 | +-- |
| 132 | +##### I'm not going to create a themable app. Will I find something usefull in this boilerplate project? |
| 133 | + |
| 134 | +Yes! You still have a powerfull dev environment with React Storybook addons, testing and workflow features. |
| 135 | + |
| 136 | +-- |
| 137 | +##### I'm not going to use Material-UI (any other tool) in my app. Will I find something usefull in this boilerplate project? |
| 138 | + |
| 139 | +Yes! You still have a powerfull dev environment with React Storybook addons, testing and workflow features. |
| 140 | + |
| 141 | +-- |
| 142 | +##### I'd like to see my [favorite tool](https://github.com/facebook/react/wiki/Complementary-Tools) in this project. |
| 143 | + |
| 144 | +Create an [issue](/../../issues) with your suggestion. We'll be glad to discuss it and we love adding new features! |
| 145 | + |
| 146 | +-- |
| 147 | +##### What if I need some other package in my project? |
| 148 | + |
| 149 | +Just install it via `npm` or `yarn`. Since this project does not have any hidden configurations, you are free to continue to work with it as you normally would. |
| 150 | + |
| 151 | +--- |
| 152 | + |
| 153 | +### Contribute |
| 154 | + |
| 155 | +We'll appreciate any help, ideas, issues and feedback! |
| 156 | + |
0 commit comments