Add storybook

Author: Minishlink

.gitignore

@@ -7,3 +7,5 @@
 node_modules/
 npm-debug.log
 yarn-error.log
+
+dist

docs/.storybook/addons.js

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

docs/.storybook/config.js

@@ -0,0 +1,20 @@
+import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/react';
+import centered from './decorator-centered';
+
+addDecorator(centered);
+
+setOptions({
+  name: 'Linear Gradient',
+  url: 'https://react-native-web-community.github.io/react-native-web-linear-gradient',
+  goFullScreen: false,
+  showLeftPanel: true,
+  showDownPanel: false,
+  downPanelInRight: false
+});
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

docs/.storybook/decorator-centered.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: '100vh',
+    maxWidth: 680,
+    marginHorizontal: 'auto'
+  }
+});
+
+export default function(renderStory) {
+  return <View style={styles.root}>{renderStory()}</View>;
+}

docs/.storybook/webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = (storybookBaseConfig, configType) => {
+  const DEV = configType === 'DEVELOPMENT';
+
+  storybookBaseConfig.module.rules.push({
+    test: /\.js$/,
+    exclude: /node_modules/,
+    use: {
+      loader: 'babel-loader',
+      options: { cacheDirectory: true }
+    }
+  });
+
+  storybookBaseConfig.plugins.push(
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV
+    })
+  );
+
+  storybookBaseConfig.resolve.alias = {
+    'react-native': 'react-native-web',
+    'react-native-linear-gradient': path.join(__dirname, '../../src/')
+  };
+
+  return storybookBaseConfig;
+};

docs/package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "build": "yarn && build-storybook -o ./dist -c ./.storybook",
+    "start": "start-storybook -p 9001 -c ./.storybook",
+    "release": "yarn build && git checkout gh-pages && rm -rf ../storybook && mv dist ../storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -"
+  },
+  "dependencies": {
+    "@storybook/addon-options": "^3.2.10",
+    "@storybook/react": "^3.1.9"
+  }
+}

docs/stories/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import LinearGradient from 'react-native-linear-gradient';
+import { View } from 'react-native';
+
+storiesOf('LinearGradient', module).add('simple', () => <LinearGradient colors={['red', 'blue']} />);