Merge pull request #273 from patw0929/feature/storybook

Feature: Introducing storybook for documentation and playground

.babelrc

@@ -5,7 +5,8 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-syntax-dynamic-import"
+    "@babel/plugin-syntax-dynamic-import",
+    "react-docgen"
   ],
   "env": {
     "test": {

.gitignore

@@ -39,4 +39,4 @@ yarn-error.log
 
 coverage
 example/report.html
-
+.example

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -0,0 +1,21 @@
+import { configure, addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
+import { version } from '../package.json';
+
+const req = require.context('./stories', true, /.js*/);
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+
+  require('./styles/styles.scss');
+}
+
+addDecorator(
+  withOptions({
+    name: `react-intl-tel-input v${version}`,
+    url: 'https://github.com/patw0929/react-intl-tel-input',
+    sidebarAnimations: true,
+  })
+);
+
+configure(loadStories, module);

.storybook/helpers/helpers.js

@@ -0,0 +1,10 @@
+export const lookup = callback => {
+  const request = new XMLHttpRequest();
+
+  request.addEventListener('load', () => {
+    callback(JSON.parse(request.responseText).country_code);
+  });
+
+  request.open('GET', 'https://api.ipdata.co/?api-key=test');
+  request.send();
+};

.storybook/stories/1.GettingStarted/GettingStarted.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import IntlTelInput from '../../../src/components/IntlTelInput';
+
+storiesOf('Documentation', module)
+  .addParameters({ options: { showAddonPanel: false } })
+  .add('Getting Started', withInfo({ inline: true, source: false, propTables: null })(() =>
+  (
+    <IntlTelInput />
+  )), { info: {
+    text: `
+      ## Installation
+
+      ~~~bash
+      npm install react-intl-tel-input --save
+      ~~~
+
+      or
+
+      ~~~bash
+      yarn add react-intl-tel-input
+      ~~~
+
+      ## Basic Usage
+      ~~~js
+        import React from 'react';
+        import ReactDOM from 'react-dom';
+        import IntlTelInput from 'react-intl-tel-input';
+        import 'react-intl-tel-input/dist/main.css';
+
+        ReactDOM.render(
+          <IntlTelInput
+            preferredCountries={['tw']}
+            onPhoneNumberChange={onChange()}
+            onPhoneNumberBlur={onBlur()}
+          />,
+          document.getElementById('root'),
+      );
+      ~~~
+        `,
+  },});

.storybook/stories/2.Props/Props.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import IntlTelInput from '../../../src/components/IntlTelInput';
+
+storiesOf('Documentation', module)
+  .addParameters({ options: { showAddonPanel: false } })
+  .add('Props', withInfo({ inline: true, source: false })(() => <IntlTelInput />));

.storybook/stories/3.Playground/Playground.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { withKnobs, text, boolean, array } from '@storybook/addon-knobs/react';
+
+import IntlTelInput from '../../../src/components/IntlTelInput';
+
+const { defaultProps } = IntlTelInput;
+
+storiesOf('Documentation', module)
+  .addDecorator(withKnobs)
+  .add('Playground', withInfo({ inline: true, source: false, propTables: null })(() =>
+  (
+    <IntlTelInput
+      containerClassName={text('containerClassName', defaultProps.containerClassName)}
+      inputClassName={text('inputClassName', defaultProps.inputClassName)}
+      fieldName={text('fieldName', defaultProps.fieldName)}
+      fieldId={text('fieldId', defaultProps.fieldId)}
+      value={text('value', defaultProps.value)}
+      defaultValue={text('defaultValue', defaultProps.defaultValue)}
+      allowDropdown={boolean('allowDropdown', defaultProps.allowDropdown)}
+      autoHideDialCode={boolean('autoHideDialCode', defaultProps.autoHideDialCode)}
+      autoPlaceholder={boolean('autoPlaceholder', defaultProps.autoPlaceholder)}
+      customPlaceholder={action('customPlaceholder')}
+      excludeCountries={array('excludeCountries', defaultProps.excludeCountries)}
+      formatOnInit={boolean('formatOnInit', defaultProps.formatOnInit)}
+      separateDialCode={boolean('separateDialCode', defaultProps.separateDialCode)}
+      defaultCountry={text('defaultCountry', defaultProps.defaultCountry)}
+      geoIpLookup={action('geoIpLookup')}
+      nationalMode={boolean('nationalMode', defaultProps.nationalMode)}
+      numberType={text('defaultCountry', defaultProps.defaultCountry)}
+      noCountryDataHandler={action('noCountryDataHandler')}
+      onlyCountries={array('onlyCountries', defaultProps.onlyCountries)}
+      preferredCountries={array('preferredCountries', defaultProps.preferredCountries)}
+      onPhoneNumberChange={action('onPhoneNumberChange')}
+      onPhoneNumberBlur={action('onPhoneNumberBlur')}
+      onSelectFlag={action('onSelectFlag')}
+      disabled={boolean('disabled', defaultProps.disabled)}
+      placeholder={text('placeholder', defaultProps.placeholder)}
+      autoFocus={boolean('autoFocus', defaultProps.autoFocus)}
+      autoComplete={text('autoComplete', defaultProps.autoComplete)}
+      useMobileFullscreenDropdown={boolean('useMobileFullscreenDropdown', defaultProps.useMobileFullscreenDropdown)}
+      format={boolean('format', defaultProps.format)}
+      onFlagClick={action('onFlagClick')}
+    />
+  )));

.storybook/stories/4.CustomCSS/CustomCSS.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text } from '@storybook/addon-knobs/react';
+
+import IntlTelInput from '../../../src/components/IntlTelInput';
+import './styles.scss';
+
+storiesOf('Usage', module)
+  .addDecorator(withKnobs)
+  .add('Custom CSS', withInfo({ inline: true, source: false, propTables: null })(() =>
+    <IntlTelInput
+      defaultCountry="tw"
+      containerClassName={text('containerClassName', "intl-tel-input tel-wrapper")}
+      inputClassName={text('inputClassName', "form-control tel-input")}
+      onPhoneNumberChange={action('onPhoneNumberChange')}
+      format
+    />
+  ));

.storybook/stories/4.CustomCSS/styles.scss

@@ -0,0 +1,8 @@
+.tel-wrapper {
+  transform: rotate(-3deg);
+  transform-origin: 0 0;
+}
+
+.tel-input {
+  box-shadow: 0 0 20px red;
+}

.storybook/stories/5.CustomStyle/CustomStyle.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, object } from '@storybook/addon-knobs/react';
+
+import IntlTelInput from '../../../src/components/IntlTelInput';
+
+storiesOf('Usage', module)
+  .addDecorator(withKnobs)
+  .add('Custom Style', withInfo({ inline: true, source: false, propTables: null })(() =>
+    <IntlTelInput
+      defaultCountry="tw"
+      onPhoneNumberChange={action('onPhoneNumberChange')}
+      style={object('style', { transform: 'rotate(3deg)' })}
+      format
+    />
+  ));

.storybook/stories/6.GeoIP/GeoIP.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import IntlTelInput from '../../../src/components/IntlTelInput';
+
+import { lookup } from '../../helpers/helpers';
+
+storiesOf('Usage', module)
+.addParameters({ options: { selectedPanel: "ACTION LOGGER" } })
+.add('Geo IP', withInfo({ inline: true, source: false, propTables: null })(() =>
+  <IntlTelInput
+    defaultCountry="tw"
+    geoIpLookup={lookup}
+    onPhoneNumberChange={action('onPhoneNumberChange')}
+    format
+  />
+));

.storybook/styles/_base.scss

@@ -0,0 +1,11 @@
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  color: #222;
+  line-height: 1.2;
+  font-size: 13px;
+  margin: 16px;
+}

.storybook/styles/_story.scss

@@ -0,0 +1,31 @@
+#root {
+  table {
+    margin-top: 20px;
+    border: solid 1px #DDD;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font: normal 14px Arial, sans-serif;
+  }
+  table thead th {
+    background-color: #DDD;
+    border: solid 1px #DDD;
+    color: #333;
+    padding: 10px;
+    text-align: left;
+    text-shadow: 1px 1px 1px #fff;
+  }
+  table tbody td {
+    border: solid 1px #DDD;
+    color: #333;
+    padding: 10px;
+    text-shadow: 1px 1px 1px #fff;
+  }
+}
+
+#root > div > div > div {
+  border: none !important;
+}
+
+#story-root {
+  padding: 0px 40px;
+}

.storybook/styles/styles.scss

@@ -0,0 +1,2 @@
+@import "base";
+@import "story";

.storybook/webpack.config.js

@@ -0,0 +1,46 @@
+
+const webpack = require('webpack');
+const paths = require('../config/paths');
+
+module.exports = {
+  devtool: false,
+  entry: {
+    main: '../src/components/IntlTelInput.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: paths.appSrc,
+      },
+      {
+        test: /\.(js|jsx)$/,
+        include: paths.appSrc,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader?outputStyle=expanded',
+        ],
+      },
+      {
+        test: /\.(jpg|png|svg|gif)$/,
+        loader: 'file-loader',
+        options: {
+          name: 'img/[name].[ext]',
+          publicPath: '/',
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+};
+

.travis.yml

@@ -9,5 +9,7 @@ script:
   - yarn test
   - yarn lint
   - yarn build
-after_success: yarn run coverage
+after_success:
+  - yarn run coverage
+  - test $TRAVIS_BRANCH = "master" && npm run deploy
 after_script: yarn run coveralls

config/webpack.config.dev.js

@@ -47,7 +47,7 @@ module.exports = {
   resolve: {
     modules: ['src', 'node_modules', ...paths.nodePaths],
     alias: {
-      'react-intl-tel-input': './components/IntlTelInputApp.js',
+      'react-intl-tel-input': './components/IntlTelInput.js',
     },
     // root: __dirname + '/src',
   },

config/webpack.config.prod.js

@@ -31,7 +31,7 @@ module.exports = {
   mode: 'production',
   devtool: false,
   entry: {
-    main: './src/components/IntlTelInputApp.js',
+    main: './src/components/IntlTelInput.js',
     example: [require.resolve('./polyfills'), './src/example.js'],
   },
 
@@ -76,7 +76,7 @@ module.exports = {
   resolve: {
     modules: ['src', 'node_modules', ...paths.nodePaths],
     alias: {
-      'react-intl-tel-input': './components/IntlTelInputApp.js',
+      'react-intl-tel-input': './components/IntlTelInput.js',
     },
   },
   module: {