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

Setup latest Storybook alpha for babel7 and webpack4 support #6

Merged
merged 2 commits into from Sep 3, 2018
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view

This file was deleted.

@@ -0,0 +1,8 @@
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}
@@ -0,0 +1 @@
import '@storybook/addon-actions/register';
@@ -0,0 +1,9 @@
import { configure } from '@storybook/react';

const req = require.context('../src/components', true, /[^/]+\/stories.js$/);

function loadStories() {
req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);
@@ -4,7 +4,7 @@

> Rinse, React, repeat. A boilerplate to build a React component library.
###### To learn how this project was made from scratch, [read the blog post](url)!
#### To learn how this project was made from scratch, [read the blog post](url)!

## Get Started

@@ -16,3 +16,18 @@ $ cd cool-name
$ rm -rf .git
$ git init
```

## Development and Storybook

You can easily develop and interact with your components by using Storybook. To run the local server, simply run:

```bash
$ npm i
$ npm run storybook
```

Navigate to [http://localhost:9001](http://localhost:9001) to view your stories. They should automatically update as you develop.

Storybook will pick up any story from the `stories.js` file in a component folder.

Rinse is currently using the latest technology available, so you may need to update your Node versions to latest to accomodate Babel 7 and Webpack 4.
@@ -0,0 +1,3 @@
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};