feat: Add stories for Button and Avatar

.gitignore

@@ -1,6 +1,5 @@
-!node_modules/
-
-node_modules/*
+node_modules
+.out
 
 .expo/*
 npm-debug.*

.storybook/webpack.config.js

@@ -18,16 +18,18 @@ module.exports = {
  {
  test: /\.js$/,
  include: [
+ path.resolve(__dirname, '../node_modules/react-native/'),
  path.resolve(__dirname, '../node_modules/react-native-elements/'),
  path.resolve(__dirname, '../node_modules/react-native-ratings/'),
  path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
- path.resolve(__dirname, '../'),
  ],
  use: {
  loader: 'babel-loader',
  options: {
  cacheDirectory: false,
- presets: ['module:metro-react-native-babel-preset'],
+ presets: [
+ ['module:metro-react-native-babel-preset', { 'disableImportExportTransform': true }]
+ ],
  plugins: [
  // needed to support async/await
  '@babel/plugin-transform-runtime',

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Havit Rovik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -13,7 +13,7 @@
  "build": "node scripts/build.js",
  "test": "node scripts/test.js",
  "storybook": "start-storybook -p 6006",
- "build-storybook": "build-storybook"
+ "build-storybook": "build-storybook -c .storybook -o .out"
  },
  "dependencies": {
  "react": "^16.6.x",

stories/components/Avatar/avatar.icons.stories.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Avatar } from 'react-native-elements';
+
+storiesOf('Avatar|Icons', module)
+
+ .add('default size', () => (
+ <Avatar
+ rounded
+ icon={{ name: 'user', type: 'font-awesome' }}
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
+ />
+ ))
+
+ .add('small size', () => (
+ <Avatar
+ size="small"
+ rounded
+ icon={{ name: 'cake', type: 'material' }}
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
+ />
+ ))
+
+ .add('medium size', () => (
+ <Avatar
+ size="medium"
+ overlayContainerStyle={{ backgroundColor: 'blue' }}
+ icon={{ name: 'meetup', color: 'red', type: 'font-awesome' }}
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ containerStyle={{ flex: 3, marginTop: 100 }}
+ />
+ ))
+
+ .add('large size', () => (
+ <Avatar
+ size="large"
+ icon={{ name: 'rocket', color: 'orange', type: 'font-awesome' }}
+ overlayContainerStyle={{ backgroundColor: 'white' }}
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ containerStyle={{ flex: 4, marginTop: 75 }}
+ />
+ ))
+
+ .add('xlarge size', () => (
+ <Avatar
+ size="xlarge"
+ rounded
+ icon={{ name: 'home', type: 'font-awesome' }}
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ containerStyle={{ flex: 5, marginRight: 60 }}
+ />
+ ))
+
+ .add('with fixed size', () => (
+ <Avatar
+ size={200}
+ rounded
+ icon={{ name: 'user', type: 'font-awesome' }}
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
+ />
+ ));

stories/components/Avatar/avatar.initials.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Avatar } from 'react-native-elements';
+
+storiesOf('Avatar|Initials', module)
+
+ .add('rounded Avatar', () => (
+ <Avatar
+ size="small"
+ rounded
+ title="MT"
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ />
+ ))
+
+ .add('medium size', () => (
+ <Avatar
+ size="medium"
+ title="BP"
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ />
+ ))
+
+ .add('large size', () => (
+ <Avatar
+ size="large"
+ title="LW"
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ />
+ ))
+
+ .add('extra large and rounded', () => (
+ <Avatar
+ size="xlarge"
+ rounded
+ title="CR"
+ onPress={() => console.log("Works!")}
+ activeOpacity={0.7}
+ />
+ ));

stories/components/Avatar/avatar.placeholder.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { ListItem } from 'react-native-elements';
+
+storiesOf('Avatar|Placeholder', module)
+
+ .add('with title placeholder', () => (
+ <ListItem
+ leftAvatar={{
+ title: "LG",
+ source: { uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/larrygerard/128.jpg' },
+ showEditButton: true,
+ }}
+ title="Larry Gerrard"
+ subtitle="CEO"
+ chevron
+ />
+ ));

stories/components/Avatar/avatar.standard.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Avatar } from 'react-native-elements';
+
+storiesOf('Avatar|Standard', module)
+
+ .add('standard Avatar', () => (
+ <Avatar
+ rounded
+ source={{
+ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+ }}
+ />
+ ))
+
+ .add('with Title', () => (
+ <Avatar rounded title="MD" />
+ ))
+
+ .add('with Icon', () => (
+ <Avatar rounded icon={{ name: 'home', type: 'font-awesome' }} />
+ ))
+
+ .add('with edit button', () => (
+ <Avatar
+ source={{
+ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+ }}
+ showEditButton
+ />
+ ));

stories/components/Button/button.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Button } from 'react-native-elements';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+storiesOf('Button|Button', module)
+
+ .add('with title', () => (
+ <Button title="Solid Button" />
+ ))
+
+ .add('with outline type', () => (
+ <Button title="Outline Button" type="outline" />
+ ))
+
+ .add('with clear type', () => (
+ <Button title="Clear Button" type="clear" />
+ ))
+
+ .add('with icon object', () => (
+ <Button
+ icon={{
+ name: "arrow-right",
+ size: 15,
+ color: "white",
+ type: "font-awesome"
+ }}
+ title="Button with icon object"
+ />
+ ))
+
+ .add('with icon component', () => (
+ <Button
+ icon={<Icon
+ name="arrow-right"
+ size={15}
+ color="white"
+ type="font-awesome"
+ />}
+ title="Button with icon component"
+ />
+ ))
+
+ .add('with right icon', () => (
+ <Button
+ icon={
+ <Icon
+ name="arrow-right"
+ size={15}
+ color="white"
+ type="font-awesome"
+ />
+ }
+ iconRight
+ title="Button with right icon"
+ />
+ ))
+
+ .add('with loading', () => (
+ <Button title="Loading button" loading />
+ ));