10-minute lightning talks about Storybook, Styled Components, MobX, & Jest.
Check out the example
branch for all of this working in action.
Before getting started, let's make sure this is a workable project:
git init .
npm init -y
nvm use 7.2.0
yarn add react react-dom
yarn add --dev @kadira/storybook
.stories/config.js
import { configure } from "@kadira/storybook";
const stories = require.context("..", true, /\.stories\.js$/);
configure(() => (
stories.keys().forEach((file) => stories(file))
), module);
$(yarn bin)/start-storybook -p 3000
src/components/MyForm/MyForm.stories.js
import React from "react";
import { storiesOf, action } from "@kadira/storybook";
storiesOf("MyForm", module)
.add("default", () => (
<p>Test!</p>
))
;
onChange
, onSubmit
events via the action
helper.--
yarn add styled-components
label
) in your component:import styled from "styled-components";
const Label = styled.label`
background: #369;
border: none;
color: #fff;
&:hover {
cursor: pointer;
}
`;
styled(Component)
,className
prop.yarn add mobx mobx-react
yarn add babel-preset-{latest,react,stage-2}
yarn add babel-plugin-transform-decorators-legacy
.babelrc
:{
"plugins": ["transform-decorators-legacy"],
"presets": ["latest", "react", "stage-2"]
}
@observer
:import { observer } from "mobx-react";
@observer
export default class ...
@computed
& @observable
class properties to your component forimport { computed, intercept, observe, observable } from "mobx";
...
@observable email = ""
@computed get valid() {
return this.email.includes("@highereducation.com");
}
intercept
& observe
methods to sanitize input & fire events:componentDidMount() {
intercept(this, "email", (change) => {
change.newValue = change.newValue.trimLeft().trimRight();
return change;
});
observe(this, "email", (value) => this.props.onChange({ email: value }));
}
yarn add --dev jest
$(yarn bin)/jest
__tests__
in any folder in the usual describe
/ it
structure..toBe(...)
assertion to .toMatchSnapshot();
.Snapshotting existing Storybook stories: