Skip to content

Commit 496a035

Browse files
committed
init README
1 parent 4a7f351 commit 496a035

15 files changed

+5634
-0
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.#develop
3+
dist

.npmignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
develop
3+
example
4+
src
5+
docs
6+
.babelrc
7+
.eslintrc
8+
.scripts
9+
.storybook

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2016 smARTLight
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

README.md

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
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 | [![GitHub stars](https://img.shields.io/github/stars/sm-react/storybook-addon-material-ui.svg?style=social&label=Star)](https://github.com/sm-react/storybook-addon-material-ui) | [![Live demo](https://img.shields.io/badge/Live%20Demo-%20Storybook-brightgreen.svg)](https://sm-react.github.io/storybook-addon-material-ui) | [![npm version](https://badge.fury.io/js/storybook-addon-material-ui.svg)](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 | [![GitHub stars](https://img.shields.io/github/stars/sm-react/react-theme-provider.svg?style=social&label=Star)](https://github.com/sm-react/react-theme-provider) | [![Live demo](https://img.shields.io/badge/Live%20Demo-%20Storybook-brightgreen.svg)](https://sm-react.github.io/react-theme-provider) | [![npm version](https://badge.fury.io/js/react-theme-provider.svg)](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 | [![GitHub stars](https://img.shields.io/github/stars/sm-react/react-theming.svg?style=social&label=Star)](https://github.com/sm-react/react-theming) | [![Live demo](https://img.shields.io/badge/Live%20Demo-%20Storybook-brightgreen.svg)](https://sm-react.github.io/react-theming) | [![GitHub version](https://badge.fury.io/gh/sm-react%2Freact-theming.svg)](https://badge.fury.io/gh/sm-react%2Freact-theming)
14+
15+
---
16+
17+
## Storybook Boilerplate Project
18+
19+
[![GitHub version](https://badge.fury.io/gh/sm-react%2Freact-theming.svg)](https://badge.fury.io/gh/sm-react%2Freact-theming)
20+
[![Live demo](https://img.shields.io/badge/Live%20Demo-%20Storybook-brightgreen.svg)](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+

doc/Milestone.png

6.8 KB
Loading

doc/bottom-pane.png

42.1 KB
Loading

doc/left-pane.png

24.9 KB
Loading

doc/logo-small.png

26.3 KB
Loading

doc/logoReact-theming.png

31.7 KB
Loading

doc/margin.png

152 Bytes
Loading

0 commit comments

Comments
 (0)