-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styleguide #2030
Styleguide #2030
Conversation
mporkola
commented
May 11, 2016
•
edited
Loading
edited
- basic Storybook setup
- colors and typography
- existing components (?)
7d21a80
to
c8c1ff6
Compare
|
||
a { | ||
text-decoration: none; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing newline.
I really think that having a view with all the components would be essential and the current Storybook setup doesn't provide that. Would it be possible to add that? |
r(OnboardingTopBar, Object.assign({}, defaultProps, { | ||
progress: 0, | ||
next_step: 'slogan_and_description', | ||
})))) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could perhaps create some helper functions that essentially print props here.
Something like:
.add('Not started', () => (
div([
div({ className: css.showProps }, JSON.stringify(defaultProps)),
r(OnboardingTopBar, Object.assign({}, defaultProps, {
progress: 0,
next_step: 'slogan_and_description',
}))
])))
(Although, json.stringify is a bit unreadable.)
@@ -53,8 +53,7 @@ _webpack.client.rails.build.config.js_ defines how component specific styles are | |||
We are using [CSS Modules](https://github.com/css-modules/css-modules) and preprocessors like SASS-loader and [PostCSS](https://github.com/postcss/postcss) loader. | |||
**N.B. we are likely to remove SASS loader quite soon and configure PostCSS better.** | |||
|
|||
Hot loading works in dev environment (see http://your-marketplace-ident.lvh.me:3000/styleguide), so you should add your components to styleguide too (folder: _sharetribe/app/views/styleguide/_). | |||
Webpack hot loading server is configured by _webpack.client.rails.hot.config.js_ and _server-rails-hot.js_. | |||
We use [React Stylebook](https://github.com/kadirahq/react-storybook) for a hot reloading component development environment, in `http://localhost:9001/`. See [instructions for writing stories](https://github.com/kadirahq/react-storybook#writing-stories), for example story see [OnboardingTopBar.story.js](app/components/OnboardingTopBar/OnboardingTopBar.story.js). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
s/Stylebook/Storybook/
👍 |