Develop your react components with parcel - A simple Alternative to storybook Using parceljs
Branch: master
Clone or download
yjose Merge pull request #4 from tomByrer/patch-1
fix Getting Started in README
Latest commit df8e69b Feb 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src update demo gif Apr 14, 2018
.babelrc initial commit Mar 13, 2018
.gitignore add story-router as a dependencie Apr 14, 2018
LICENSE Initial commit Mar 11, 2018
README.md fix Getting Started in README Feb 10, 2019
package.json update story-router package to 1.0.1 Apr 22, 2018

README.md

parcel-storybook

Develop your components with parcel - A simple Alternative to storybook Using parceljs.

  • Easy to use.
  • Built with react, react-router and react-fuzzy-picker
  • parceljs that's mean super fast 🚀
  • Full customization 👌
  • Ctrl+p Everywhere.
  • Play with props

Parcel-Storybook in action

alt text

Getting Started

Clone parcel-storybook repository and install npm dependencies && start parcel dev server.

git clone https://github.com/yjose/parcel-storybook.git
cd parcel-storybook
yarn install
yarn start

Create A simple Story

import React from "react";

export default () => (
  <div>
    <h1>Simple Lorem Story </h1>
  </div>
);

Add your story in the index page /src/stories/index.js and export your stories as array like the following :

import React from "react";
import Button from "../components/Button";
import Story from "./Story";
import Centred from "../Utils/Centred";

const storyProps = { text: "Parcel Storybook" };
const buttonProps = {
  name: "My Button",
  style: {
    margin: "10px",
    height: "30px",
    color: "black",
    background: "blue"
  }
};

export default [
  {
    name: "Story",
    component: Centred(Story),
    props: storyProps // adding props
  },
  {
    name: "Button",
    component: Centred(Button),
    props: buttonProps
  },
  {
    name: "without Prop", // without props
    component: Centred(() => <button>Test without props</button>)
  }
];

Now open your browser http://localhost:1234 and start your work

Feedback

if you are using this starter and in your opinion it helpful to create a npm package for it. let's me know - A simple star is enough - ⚡️.