My First Work with Storybook….and Introducing Chessie and Rey!

Rey and I watching a movie
In case you needed clarification: Chessie left, Rey right

How Storybook works

Storybook Angular (Chessie Project)

npx -p @storybook/cli sb init
npm i --save-dev @storybook/angular @babel/core babel-loader
{ 
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}
}
npm run storybook
storiesOf('Welcome', module).add('to Storybook', () => ({
component: Welcome,
props: {},
}));
storiesOf('AppComponent', module).add('to Storybook', () => ({
component: AppComponent,
props: {},
}));
@Input()
sound: String;

constructor() { }

ngOnInit() {
}
<p>
chessie works!
</p>
<p>
chessie sound {{sound}}
</p>
storiesOf('Chessie', module).add('to Storybook', () => ({
component: ChessieComponent,
props: {
sound: 'Purrrrrrr'
},
}));

Storybook React (ReyRey Project)

npx -p @storybook/cli sb init
npm i --save-dev @storybook/react
npm i --save react react-dom 
npm i --save-dev @babel/core
npm i --save-dev babel-loader
storiesOf('Reyrey', module)
.add('to Storybook', () => <Reyrey />);

Wrapping Up

a collage of ultra cute pictures

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store