feat: add storybook

.eslintignore

@@ -5,3 +5,4 @@
 # We prevent eslint from crashing. TODO: remove this as soon as the following
 # bug is solved, SEE: https://github.com/yannickcr/eslint-plugin-react/issues/1499
 **/src/__tests__/internals/DummyComponent.js
+storybook-static/

.gitignore

@@ -6,3 +6,4 @@ npm-debug.log
 .DS_Store
 yarn-error.log
 .nyc_output
+storybook-static

.npmignore

@@ -5,3 +5,6 @@ examples
 src
 yarn.lock
 scripts
+storybook-static
+.storybook
+stories

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);

package.json

@@ -72,7 +72,12 @@
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.2",
     "stylelint": "^9.0.0",
-    "stylelint-config-standard": "^17.0.0"
+    "stylelint-config-standard": "^17.0.0",
+    "@storybook/react": "^3.3.14",
+    "@storybook/addon-actions": "^3.3.14",
+    "@storybook/addon-links": "^3.3.14",
+    "@storybook/addons": "^3.3.14",
+    "babel-core": "^6.26.0"
   },
   "engines": {
     "node": ">=6"
@@ -106,7 +111,10 @@
     "prettier:check": "cross-env BABEL_ENV=build babel-node ./scripts/tasks/prettier.js",
     "styles": "postcss -o lib/styles/main.css src/styles/main.css && cpy lib/styles/main.css module/styles/",
     "test": "cross-env BABEL_ENV=testing nyc ava",
-    "test:update:snapshots": "cross-env BABEL_ENV=testing ava --update-snapshots"
+    "test:update:snapshots": "cross-env BABEL_ENV=testing ava --update-snapshots",
+    "prestorybook": "npm run build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "license": "MIT",
   "ava": {

stories/index.stories.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+
+import FlagIconFactory from '../lib'
+import { sizes, rotates, flips, countries } from '../lib/static/enums'
+
+const FlagIcon = FlagIconFactory(React, { useCssModules: false });
+
+const defaultProps = {
+    code: 'rw',
+    size: '5x',
+};
+
+const Block = ({ children, style }) => (
+    <div style={{ margin: 10, ...style }}>
+        {children}
+    </div>
+);
+
+Block.propTypes = {
+    children: PropTypes.node,
+    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+
+Block.defaultProps = {
+    children: null,
+    style: null,
+};
+
+
+const Span = ({ children, ...props }) => (
+    <span style={{ paddingRight: 10 }} {...props}>
+        {children}
+    </span>
+);
+
+Span.propTypes = {
+    children: PropTypes.node,
+};
+
+Span.defaultProps = {
+    children: null,
+};
+
+storiesOf('FlagIconFactory (useCssModules: false)', module)
+    .add('all countries', () =>
+        countries.map(({ name, code }) => {
+            const props = { ...defaultProps, code, key: code };
+            return (
+                <Block>
+                    <Span>{name}</Span>
+                    <FlagIcon { ...props } />
+                </Block>
+            );
+        })
+    )
+    .add('all sizes', () =>
+        sizes.map((size) => {
+            const props = { ...defaultProps, size, key: size };
+            return (
+                <Block>
+                    <Span>{size}</Span>
+                    <FlagIcon { ...props } />
+                </Block>
+            );
+        })
+    )
+    .add('all rotates', () =>
+        rotates.map((rotate) => {
+            const props = {...defaultProps, rotate, key: rotate };
+            return (
+                <Block style={{ marginBottom: 50, marginTop: 50 }}>
+                    <Span>{rotate}</Span>
+                    <FlagIcon { ...props } />
+                </Block>
+            );
+        })
+    )
+    .add('all flips', () =>
+        flips.map((flip) => {
+            const props = { ...defaultProps, flip, key: flip };
+            return (
+                <Block>
+                    <Span>{flip}</Span>
+                    <FlagIcon { ...props } />
+                </Block>
+            );
+        })
+    );