added storybook

Author: xDae

.storybook/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}

.storybook/addons.js

@@ -1,5 +1,3 @@
-//  To get our default addons (actions and links)
-import '@storybook/react/addons';
-//  To add the knobs addon
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
 import '@storybook/addon-knobs/register'
-import '@storybook/addon-options/register';

.storybook/config.js

@@ -1,18 +1,9 @@
-import { configure, addDecorator, setAddon } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options'
-import infoAddon from '@storybook/react-addon-info';
+import { configure } from '@storybook/react';
 
-setAddon(infoAddon);;
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
 
-setOptions({
-  name: 'react currency formatter',
-  url: 'https://github.com/kadirahq/storybook-addon-options',
-  goFullScreen: false,
-  showLeftPanel: true,
-  showDownPanel: true,
-  showSearchBox: false,
-  downPanelInRight: true,
-  sortStoriesByKind: false
-});
-
-configure(() => require('./stories'), module);
+configure(loadStories, module);

.storybook/stories/index.js

@@ -14,22 +14,29 @@
   ],
   "main": "dist/react-currency-formatter.cjs.js",
   "module": "dist/react-currency-formatter.esm.js",
-  "browser": "dist/react-currency-formatter.umd.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/xDae/react-currency-formatter.git"
   },
   "scripts": {
     "build": "rimraf dist && rollup -c",
+    "build-storybook": "build-storybook",
     "dev": "rollup -c -w",
+    "storybook": "start-storybook -p 6006",
     "pretest": "npm run build",
     "test": "jest",
     "test:watch": "jest --watch"
   },
+  "browser": "dist/react-currency-formatter.umd.js",
   "dependencies": {
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-info": "^3.3.3",
+    "@storybook/addon-knobs": "^3.3.3",
+    "@storybook/addon-links": "^3.3.3",
+    "@storybook/react": "^3.3.3",
     "babel-core": "^6.26.0",
     "babel-jest": "^22.0.4",
     "babel-preset-env": "^1.6.1",
@@ -38,6 +45,7 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "jest": "^22.0.4",
+    "lodash.values": "^4.3.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "regenerator-runtime": "^0.11.1",

package.json

@@ -1,4 +1,4 @@
-// import React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import locales from './locales';
@@ -187,7 +187,7 @@ const ReactCurrencyFormatter = props => {
     pattern
   } = props;
 
-  return (format(quantity, {
+  return (format(props.quantity, {
     currency,
     symbol,
     locale,

src/main.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { withKnobs, text, boolean, number, select } from '@storybook/addon-knobs/react';
+
+import values from 'lodash.values';
+
+import symbolsArray from '../src/symbols'
+import defaultLocales from '../src/default-locales';
+
+import Currency from '../src/main';
+
+const stories = storiesOf('Currency Formatter', module);
+stories.addDecorator((story, context) => withInfo('common info')(story)(context));
+stories.addDecorator(withKnobs);
+
+const currencyList = {};
+Object.keys(symbolsArray).map(currency => currencyList[currency] = currency);
+
+const locales = {};
+values(defaultLocales).map(locale => locales[locale] = locale);
+
+stories.add('Default', () => (
+  <Currency
+    quantity={89}
+    currency={select('Currency', currencyList, 'USD')}
+    symbol={text('Symbol', '$')}
+    decimal={text('Decimal', undefined)}
+    group={text('Group', undefined)}
+    locale={select('Locale', locales, 'en')}
+  />
+));
+
+stories.add('EUR Currency', () => (
+  <Currency
+    quantity={89}
+    currency={select('Currency', currencyList, 'EUR')}
+  />
+));
+
+stories.add('GBP Currency', () => (
+  <Currency
+    quantity={89}
+    currency={select('Currency', currencyList, 'GBP')}
+  />
+));
+
+stories.add('Customized symbol', () => (
+  <Currency
+    quantity={89}
+    symbol={text('Currency', '💵')}
+  />
+));
+
+stories.add('Changing pattern', () => (
+  <Currency
+    quantity={89}
+    pattern="##,### !"
+  />
+));