Skip to content
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

Merged
merged 8 commits into from
May 13, 2016
Merged

Styleguide #2030

merged 8 commits into from
May 13, 2016

Conversation

mporkola
Copy link
Contributor

@mporkola mporkola commented May 11, 2016

  • basic Storybook setup
  • colors and typography
  • existing components (?)

@mporkola mporkola force-pushed the styleguide branch 2 times, most recently from 7d21a80 to c8c1ff6 Compare May 12, 2016 08:08

a {
text-decoration: none;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing newline.

@kpuputti
Copy link
Contributor

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',
}))))
Copy link
Contributor

@Gnito Gnito May 12, 2016

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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/Stylebook/Storybook/

@kpuputti
Copy link
Contributor

👍

@mporkola mporkola merged commit 254c65c into master May 13, 2016
@mporkola mporkola deleted the styleguide branch May 13, 2016 07:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants