feat: add initial storybook examples

storybook/addons.js

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

storybook/index.js

@@ -0,0 +1,37 @@
+// if you use expo remove this line
+import * as eva from '@eva-design/eva';
+import {withKnobs} from '@storybook/addon-knobs';
+import {addDecorator, configure, getStorybookUI} from '@storybook/react-native';
+import {ApplicationProvider, IconRegistry} from '@ui-kitten/components';
+import {EvaIconsPack} from '@ui-kitten/eva-icons';
+import React from 'react';
+import {AppRegistry} from 'react-native';
+import './rn-addons';
+
+const withUIKittenProvider = (story) => (
+  <>
+    <IconRegistry icons={EvaIconsPack} />
+    <ApplicationProvider {...eva} theme={eva.light}>
+      {story()}
+    </ApplicationProvider>
+  </>
+);
+
+// enables knobs for all stories
+addDecorator(withKnobs);
+addDecorator(withUIKittenProvider);
+
+// import stories
+configure(() => {
+  require('./stories');
+}, module);
+
+// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
+// To find allowed options for getStorybookUI
+const StorybookUIRoot = getStorybookUI({});
+
+// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
+// If you use Expo you should remove this line.
+AppRegistry.registerComponent('RNCleanArchitecture', () => StorybookUIRoot);
+
+export default StorybookUIRoot;

storybook/rn-addons.js

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

storybook/stories/Button/Button.stories.js

@@ -0,0 +1,20 @@
+import {action} from '@storybook/addon-actions';
+import {text} from '@storybook/addon-knobs';
+import {storiesOf} from '@storybook/react-native';
+import React from 'react';
+import {Text} from 'react-native';
+import CustomButton from '.';
+import CenterView from '../CenterView';
+
+storiesOf('CustomButton', module)
+  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+  .add('with text', () => (
+    <CustomButton onPress={action('clicked-text')}>
+      <Text>{text('CustomButton text', 'Hello CustomButton')}</Text>
+    </CustomButton>
+  ))
+  .add('with some emoji', () => (
+    <CustomButton onPress={action('clicked-emoji')}>
+      <Text>😀 😎 👍 💯</Text>
+    </CustomButton>
+  ));

storybook/stories/Button/index.tsx

@@ -0,0 +1,8 @@
+import {Button, ButtonProps} from '@ui-kitten/components';
+import React from 'react';
+
+const CustomButton: React.FC<ButtonProps> = ({onPress, children}) => {
+  return <Button onPress={onPress}>{children}</Button>;
+};
+
+export default CustomButton;

storybook/stories/CenterView/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+import style from './style';
+
+export default function CenterView({ children }) {
+  return <View style={style.main}>{children}</View>;
+}
+
+CenterView.defaultProps = {
+  children: null,
+};
+
+CenterView.propTypes = {
+  children: PropTypes.node,
+};

storybook/stories/CenterView/style.js

@@ -0,0 +1,8 @@
+export default {
+  main: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+};

storybook/stories/Welcome/Welcome.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { storiesOf } from '@storybook/react-native';
+import Welcome from '.';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storybook/stories/Welcome/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, Text } from 'react-native';
+
+export default class Welcome extends React.Component {
+  styles = {
+    wrapper: {
+      flex: 1,
+      padding: 24,
+      justifyContent: 'center',
+    },
+    header: {
+      fontSize: 18,
+      marginBottom: 18,
+    },
+    content: {
+      fontSize: 12,
+      marginBottom: 10,
+      lineHeight: 18,
+    },
+  };
+
+  showApp = (event) => {
+    const { showApp } = this.props;
+    event.preventDefault();
+
+    if (showApp) {
+      showApp();
+    }
+  };
+
+  render() {
+    return (
+      <View style={this.styles.wrapper}>
+        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
+        <Text style={this.styles.content}>
+          This is a UI Component development environment for your React Native app. Here you can
+          display and interact with your UI components as stories. A story is a single state of one
+          or more UI components. You can have as many stories as you want. In other words a story is
+          like a visual test case.
+        </Text>
+        <Text style={this.styles.content}>
+          We have added some stories inside the "storybook/stories" directory for examples. Try
+          editing the "storybook/stories/Welcome.js" file to edit this message.
+        </Text>
+      </View>
+    );
+  }
+}
+
+Welcome.defaultProps = {
+  showApp: null,
+};
+
+Welcome.propTypes = {
+  showApp: PropTypes.func,
+};

storybook/stories/index.js

@@ -0,0 +1,2 @@
+import './Button/Button.stories';
+import './Welcome/Welcome.stories';