Setup test and storybook. Add 3 components: ListItem, RoundedIndicator and SummaryBox

Tests/Setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

example/android/app/src/main/java/com/example/popcodemobilereactnativecomponents/MainApplication.java

@@ -11,7 +11,7 @@
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
 
-import com.popcodemobilereactnativecomponents.ReactNativeComponentsPackage;
+// import com.popcodemobilereactnativecomponents.ReactNativeComponentsPackage;
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -28,7 +28,7 @@ protected List<ReactPackage> getPackages() {
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for ReactNativeComponentsExample:
           // packages.add(new MyReactNativePackage());
-          packages.add(new ReactNativeComponentsPackage());
+          // packages.add(new ReactNativeComponentsPackage());
 
           return packages;
         }

example/package.json

@@ -9,6 +9,8 @@
     "start": "react-native start"
   },
   "dependencies": {
+    "@react-navigation/native": "^5.7.3",
+    "@storybook/react-native": "^5.3.21",
     "react": "16.11.0",
     "react-native": "0.62.2"
   },

example/src/App.tsx

@@ -1,25 +1,28 @@
 import * as React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import ReactNativeComponents from '@popcode.mobile/react-native-components';
+import { StyleSheet, View, useColorScheme } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { ThemeColors, ThemeFonts } from './Themes';
+import StorybookUI from '../storybook';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    ReactNativeComponents.multiply(3, 7).then(setResult);
-  }, []);
+  const darkMode = useColorScheme() === 'dark';
+  const MyTheme: any = {
+    dark: darkMode,
+    colors: darkMode ? { ...ThemeColors.dark } : { ...ThemeColors.light },
+    fonts: darkMode ? { ...ThemeFonts.dark } : { ...ThemeFonts.light },
+  };
 
   return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
+    <NavigationContainer theme={MyTheme}>
+      <View style={styles.container}>
+        <StorybookUI />
+      </View>
+    </NavigationContainer>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
   },
 });

example/src/Stories/ListItem.story.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import Center from '../../storybook/Center';
+import { Colors } from '../Themes';
+import ReactNativeComponents from '@popcode.mobile/react-native-components';
+
+storiesOf('VerticalTimelineItem', module)
+  .addDecorator((storyFn: any) => <Center>{storyFn()}</Center>)
+  .add('Default', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'R$ 200,00'}
+      leftSubtitle={'automática diária'}
+      rightTitle={'10001'}
+      rightSubtitle={'ativo'}
+    />
+  ))
+  .add('rounded indicator ', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'R$ 200,00'}
+      leftSubtitle={'automática diária'}
+      rightTitle={'10001'}
+      rightSubtitle={'ativo'}
+      indicatorColor={Colors.a360}
+      isRoundedIndicator
+    />
+  ))
+  .add('rounded indicator with time ', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'R$ 200,00'}
+      leftSubtitle={'automática diária'}
+      rightTitle={'10001'}
+      rightSubtitle={'ativo'}
+      indicatorColor={Colors.a360}
+      isRoundedIndicator
+      datetime="26/02"
+    />
+  ))
+  .add('with datetime and flat indicator ', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'R$ 200,00'}
+      leftSubtitle={'automática diária'}
+      rightTitle={'10001'}
+      rightSubtitle={'ativo'}
+      indicatorColor={Colors.a360}
+      datetime="26/02"
+    />
+  ))
+  .add('with datetime', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'R$ 200,00'}
+      leftSubtitle={'automática diária'}
+      rightTitle={'10001'}
+      rightSubtitle={'ativo'}
+      datetime="26/02"
+    />
+  ))
+  .add('with cancel status', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'R$ 200,00'}
+      leftSubtitle={'automática diária'}
+      rightTitle={'10001'}
+      rightSubtitle={'ativo'}
+      canceled
+    />
+  ))
+  .add('with custom right title', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'Rei do Pirão'}
+      leftSubtitle={'Av. Ivo do Prado'}
+      rightTitle={'R$24,15'}
+      rightSubtitle={'12:33'}
+      rightTitleStyle={styles.titleSubtitle}
+    />
+  ))
+  .add('with onPress action', () => (
+    <ReactNativeComponents.ListItem
+      leftTitle={'R$ 200,00'}
+      leftSubtitle={'automática diária'}
+      rightTitle={'10001'}
+      rightSubtitle={'ativo'}
+      onPressItem={() => {}}
+    />
+  ));
+
+const styles = {
+  titleSubtitle: {
+    fontSize: 15,
+    color: 'red',
+  },
+};

example/src/Stories/RoundedIndicator.story.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import Center from '../../storybook/Center';
+import ReactNativeComponents from '@popcode.mobile/react-native-components';
+
+storiesOf('Rounded Indicator', module)
+  .addDecorator((storyFn: any) => <Center>{storyFn()}</Center>)
+  .add('Solid color', () => (
+    <ReactNativeComponents.RoundedIndicator size={30} solidColor="red" />
+  ))
+  .add('Solid w/ custom style', () => (
+    <ReactNativeComponents.RoundedIndicator
+      size={15}
+      solidColor="blue"
+      style={styles.indicator}
+    />
+  ))
+  .add('Gradient color', () => (
+    <ReactNativeComponents.RoundedIndicator
+      size={30}
+      gradientColors={['red', 'orange']}
+    />
+  ))
+  .add('Gradient w/ custom style', () => (
+    <ReactNativeComponents.RoundedIndicator
+      size={30}
+      gradientColors={['red', 'orange']}
+      style={styles.indicator}
+    />
+  ));
+
+const styles = {
+  indicator: { borderRadius: 3 },
+};

example/src/Stories/SummaryBox.story.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import Center from '../../storybook/Center';
+import ReactNativeComponents from '@popcode.mobile/react-native-components';
+
+storiesOf('SummaryBox', module)
+  .addDecorator((storyFn: any) => <Center>{storyFn()}</Center>)
+  .add('Default', () => (
+    <ReactNativeComponents.SummaryBox label="Label" accessibilityHint="Label" />
+  ))
+  .add('with text', () => (
+    <ReactNativeComponents.SummaryBox
+      label="Label"
+      text="Text"
+      accessibilityHint="Label with Text"
+    />
+  ));

example/src/Stories/index.ts

@@ -0,0 +1,3 @@
+import './RoundedIndicator.story';
+import './ListItem.story';
+import './SummaryBox.story';

example/src/Themes/Entities.ts

@@ -0,0 +1,59 @@
+import type { TextStyle } from 'react-native';
+
+export interface CustomTheme {
+  dark: boolean;
+  colors: ColorsType;
+  fonts: FontsType;
+}
+
+export interface FontsType {
+  types: any;
+  styles: {
+    bigTitle: TextStyle;
+    moderateTitle: TextStyle;
+    mediumTitle: TextStyle;
+    modestTitle: TextStyle;
+    smallTitle: TextStyle;
+    headerTitleIOS: TextStyle;
+    headerTitleAndroid: TextStyle;
+    normalSubtitle: TextStyle;
+  };
+}
+
+export interface ColorsType {
+  a120: string;
+  a240: string;
+  a360: string;
+  b120: string;
+  b240: string;
+  c100: string;
+  c200: string;
+  c300: string;
+  c400: string;
+  c500: string;
+  c600: string;
+  c700: string;
+  c800: string;
+  s100: string;
+  s200: string;
+  s300: string;
+  s400: string;
+  s500: string;
+  e120: string;
+  e360: string;
+  e480: string;
+  e240: string;
+  e720: string;
+  primaryButton: string;
+  secondaryButton: string;
+  primary: string;
+  elevated: string;
+  base: string;
+  divisor: string;
+  highlight: string;
+  normal: string;
+  fill: string;
+  title: string;
+  subtitle: string;
+  description: string;
+}

example/src/Themes/design-tokens-dark.json

@@ -0,0 +1,108 @@
+{
+  "colors": {
+    "a120": "#A1B",
+    "a240": "#1592e6",
+    "a360": "#ff8800",
+    "b120": "#fa593c",
+    "b240": "#ffb905",
+    "c100": "#252627",
+    "c200": "#313131",
+    "c300": "#4d4d4d",
+    "c400": "#6c6c6c",
+    "c500": "#ababab",
+    "c600": "#c9c9c9",
+    "c700": "#ffffff",
+    "c800": "#000000",
+    "s100": "#788590",
+    "s200": "#a7b2bc",
+    "s300": "#c3ccd2",
+    "s400": "#ebeff2",
+    "s500": "#f5f7f8",
+    "e120": "#04a480",
+    "e360": "#2e5bc9",
+    "e480": "#ffca05",
+    "e240": "#f26522",
+    "e720": "#737f8a",
+    "primaryButton": "#63bf31",
+    "secondaryButton": "#1592e6",
+    "primary": "#000000",
+    "elevated": "#313133",
+    "base": "#000000",
+    "divisor": "#c3ccd2",
+    "highlight": "#ffffff",
+    "normal": "#ababab",
+    "fill": "#252627",
+    "title": "#FFFFFF",
+    "subtitle": "#ABABAB",
+    "description": "#788590"
+  },
+  "fonts": {
+    "types": {},
+    "styles": {
+      "bigTitle": {
+        "fontSize": 28,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "bold",
+        "letterSpacing": -0.17,
+        "textAlign": "left"
+      },
+      "moderateTitle": {
+        "fontSize": 20,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "bold",
+        "letterSpacing": -0.12,
+        "textAlign": "left"
+      },
+      "mediumTitle": {
+        "fontSize": 18,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "500",
+        "letterSpacing": -0.11,
+        "textAlign": "left"
+      },
+      "modestTitle": {
+        "fontSize": 16,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "400",
+        "letterSpacing": -0.1,
+        "textAlign": "left"
+      },
+      "smallTitle": {
+        "fontSize": 14,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "500",
+        "letterSpacing": -0.09,
+        "textAlign": "left"
+      },
+      "headerTitleIOS": {
+        "fontSize": 17,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "bold",
+        "letterSpacing": -0.1,
+        "textAlign": "left"
+      },
+      "headerTitleAndroid": {
+        "fontSize": 20,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "bold",
+        "letterSpacing": -0.12,
+        "textAlign": "left"
+      },
+      "normalSubtitle": {
+        "fontSize": 16,
+        "fontFamily": "Lato",
+        "fontStyle": "normal",
+        "fontWeight": "500",
+        "letterSpacing": -0.1,
+        "textAlign": "left"
+      }
+    }
+  }
+}