etendo-ui-library 1.0.44 → 1.0.46

package/components/statusbar/StatusBar.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {Story, Meta} from '@storybook/react';
+
+import {StatusBar} from './StatusBar';
+import {Info, StatusBarProps} from './StatusBar.types';
+import {Image, Text, View} from 'react-native';
+import {StatusBarStyleVariant} from './StatusBar.styles';
+
+export default {
+  title: 'Etendo/StatusBar',
+  component: StatusBar,
+  argTypes: {},
+} as Meta<typeof StatusBar>;
+
+// Active component declaration
+const Component = () => {
+  return (
+    <>
+      <Image
+        source={require('../../assets/images/icons/calendar-secundary.png')}
+        style={StatusBarStyleVariant.primary.activeComponentImage}
+      />
+      <View style={StatusBarStyleVariant.primary.activeStepContentRightSection}>
+        <Text style={StatusBarStyleVariant.primary.textTopActiveStepContent}>
+          Current Plan date
+        </Text>
+        <Text style={StatusBarStyleVariant.primary.textBottomActiveStepContent}>
+          03 January, 2022
+        </Text>
+      </View>
+    </>
+  );
+};
+
+// Information dataset
+const dataset: Info[] = [
+  {
+    step: '1. Vehicles',
+    routeNav: '/vehicles',
+    key: 'vehicles',
+    componentActive: <Component />,
+  },
+  {
+    step: '2. Visits',
+    routeNav: '/visits',
+    key: 'visits',
+    componentActive: <Component />,
+  },
+  {
+    step: '3. Routes',
+    routeNav: '/routes',
+    key: 'routes',
+    componentActive: <Component />,
+  },
+  {
+    step: '4. Capacity',
+    routeNav: '/capacity',
+    key: 'capacity',
+    componentActive: <Component />,
+  },
+  {
+    step: '5. Settings',
+    routeNav: '/settings',
+    key: 'settings',
+    componentActive: <Component />,
+  },
+];
+
+/* Templates */
+const Template: Story<StatusBarProps> = args => (
+  <StatusBar data={dataset} step={args.step} />
+);
+
+/* Story exports */
+export const StatusBarStep1 = Template.bind({});
+StatusBarStep1.args = {};

package/components/statusbar/StatusBar.styles.tsx

@@ -0,0 +1,114 @@
+/* Imports */
+import {BLUE, YELLOW, WHITE} from '../../styles/colors';
+import {StatusBarStyleRecord} from './StatusBar.types';
+
+/* Export of different styles */
+export const StatusBarStyleVariant: StatusBarStyleRecord = {
+  /* Primary style */
+  primary: {
+    // General container of the status bar
+    statusBarContainer: {
+      flex: 1,
+      width: '100%',
+      height: 45,
+      backgroundColor: BLUE,
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      position: 'relative',
+    },
+
+    rectangleTopLeftYellow: {
+      width: 25,
+      height: '50%',
+      backgroundColor: YELLOW,
+    },
+
+    rectangleTopLeftBlue: {
+      width: 25,
+      height: '100%',
+      backgroundColor: BLUE,
+      borderTopEndRadius: 40,
+    },
+
+    activeStepContainer: {
+      flex: 0.4,
+      flexDirection: 'row',
+      backgroundColor: YELLOW,
+      borderBottomStartRadius: 31,
+      borderTopEndRadius: 31,
+    },
+
+    activeStepContent: {
+      marginLeft: '10%',
+      alignSelf: 'center',
+      flexDirection: 'row',
+    },
+
+    activeStepContentRightSection: {
+      marginLeft: '12%',
+    },
+
+    disabledStep: {
+      color: WHITE,
+      fontWeight: '600',
+      fontSize: 17,
+      alignSelf: 'center',
+      flex: 1,
+      justifyContent: 'center',
+      textAlign: 'center',
+    },
+
+    disabledStepContainer: {
+      flex: 0.15,
+      flexDirection: 'row',
+      backgroundColor: BLUE,
+      borderBottomStartRadius: 20,
+      borderTopEndRadius: 20,
+    },
+
+    activeStep: {
+      color: BLUE,
+      fontWeight: '600',
+      fontSize: 17,
+      alignSelf: 'center',
+      flex: 1,
+      textAlign: 'right',
+      marginRight: '10%',
+    },
+
+    rectangleBottomRightBlue: {
+      width: 25,
+      alignSelf: 'flex-end',
+      height: '100%',
+      backgroundColor: YELLOW,
+      transform: [{rotate: '180deg'}],
+    },
+
+    rectangleBottomRightYellow: {
+      width: 25,
+      height: '100%',
+      backgroundColor: BLUE,
+      borderTopEndRadius: 20,
+      borderColor: BLUE,
+    },
+
+    textTopActiveStepContent: {
+      fontSize: 14,
+      color: BLUE,
+      fontWeight: '600',
+    },
+
+    textBottomActiveStepContent: {
+      fontSize: 11,
+      color: BLUE,
+      fontWeight: '500',
+      marginTop: '2%',
+    },
+
+    activeComponentImage: {
+      alignSelf: 'center',
+      width: 27,
+      height: 27,
+    },
+  },
+};

package/components/statusbar/StatusBar.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {Image, Text, View} from 'react-native';
+import renderer from 'react-test-renderer';
+
+import {StatusBar} from './StatusBar';
+import {StatusBarStyleVariant} from './StatusBar.styles';
+import {Info} from './StatusBar.types';
+
+// Active component declaration
+const Component = () => {
+  return (
+    <>
+      <Image
+        source={require('../../assets/images/icons/calendar-secundary.png')}
+        style={StatusBarStyleVariant.primary.activeComponentImage}
+      />
+      <View style={StatusBarStyleVariant.primary.activeStepContentRightSection}>
+        <Text style={StatusBarStyleVariant.primary.textTopActiveStepContent}>
+          Current Plan date
+        </Text>
+        <Text style={StatusBarStyleVariant.primary.textBottomActiveStepContent}>
+          03 January, 2022
+        </Text>
+      </View>
+    </>
+  );
+};
+
+// Information dataset
+const dataset: Info[] = [
+  {
+    step: '1. Vehicles',
+    routeNav: '/vehicles',
+    key: 'vehicles',
+    componentActive: <Component />,
+  },
+  {
+    step: '2. Visits',
+    routeNav: '/visits',
+    key: 'visits',
+    componentActive: <Component />,
+  },
+  {
+    step: '3. Routes',
+    routeNav: '/routes',
+    key: 'routes',
+    componentActive: <Component />,
+  },
+  {
+    step: '4. Capacity',
+    routeNav: '/capacity',
+    key: 'capacity',
+    componentActive: <Component />,
+  },
+  {
+    step: '5. Settings',
+    routeNav: '/settings',
+    key: 'settings',
+    componentActive: <Component />,
+  },
+];
+
+describe('Running Test for StatusBar', () => {
+  it('Check StatusBar', () => {
+    const tree = renderer
+      .create(<StatusBar data={dataset} step={1} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/components/statusbar/StatusBar.tsx

@@ -0,0 +1,23 @@
+/* Imports */
+import React from 'react';
+
+import {View} from 'react-native';
+import {StatusBarStyleVariant} from './StatusBar.styles';
+
+import {StatusBarProps} from './StatusBar.types';
+import {StepActive} from './StepActive';
+import {StepDisabled} from './StepDisabled';
+
+export const StatusBar = ({data, step}: StatusBarProps) => {
+  return (
+    <View style={StatusBarStyleVariant.primary.statusBarContainer}>
+      {data.map((item, idx) => {
+        if (idx === step - 1) {
+          return <StepActive item={item} />;
+        } else {
+          return <StepDisabled item={item} />;
+        }
+      })}
+    </View>
+  );
+};

package/components/statusbar/StatusBar.types.ts

@@ -0,0 +1,45 @@
+/* Imports */
+import {ImageStyle, TextStyle, ViewStyle} from 'react-native';
+
+/* Type declaration */
+export type Info = {
+  step: string;
+  routeNav: string;
+  key: string;
+  componentActive: any;
+};
+
+export interface StatusBarProps {
+  data: Info[];
+  step: number;
+}
+
+export type ItemProp = {
+  item: Info;
+};
+
+/* Declaration of style types */
+export type StatusBarStyleType = 'primary';
+
+export type StatusBarStyleRecord = Record<
+  StatusBarStyleType,
+  {
+    // General container of the status bar
+    statusBarContainer: ViewStyle;
+
+    activeStep: TextStyle;
+    activeStepContainer: ViewStyle;
+    rectangleTopLeftBlue: ViewStyle;
+    rectangleTopLeftYellow: ViewStyle;
+    rectangleBottomRightBlue: ViewStyle;
+    rectangleBottomRightYellow: ViewStyle;
+    disabledStep: TextStyle;
+    disabledStepContainer: ViewStyle;
+    activeStepContent: ViewStyle;
+    activeStepContentRightSection: ViewStyle;
+
+    activeComponentImage: ImageStyle;
+    textTopActiveStepContent: TextStyle;
+    textBottomActiveStepContent: TextStyle;
+  }
+>;

package/components/statusbar/StepActive.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import {ItemProp} from './StatusBar.types';
+import {StatusBarStyleVariant} from './StatusBar.styles';
+
+export const StepActive = ({item}: ItemProp) => {
+  return (
+    <>
+      <View
+        style={StatusBarStyleVariant.primary.rectangleTopLeftYellow}
+        key={item.key}
+      >
+        <View style={StatusBarStyleVariant.primary.rectangleTopLeftBlue} />
+      </View>
+
+      <View style={StatusBarStyleVariant.primary.activeStepContainer}>
+        <View style={StatusBarStyleVariant.primary.activeStepContent}>
+          {item.componentActive}
+        </View>
+        <Text style={StatusBarStyleVariant.primary.activeStep}>
+          {item.step}
+        </Text>
+      </View>
+
+      <View style={StatusBarStyleVariant.primary.rectangleBottomRightBlue}>
+        <View
+          style={StatusBarStyleVariant.primary.rectangleBottomRightYellow}
+        />
+      </View>
+    </>
+  );
+};

package/components/statusbar/StepDisabled.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import {StatusBarStyleVariant} from './StatusBar.styles';
+import {ItemProp} from './StatusBar.types';
+
+export const StepDisabled = ({item}: ItemProp) => {
+  return (
+    <View style={StatusBarStyleVariant.primary.disabledStepContainer}>
+      <Text style={StatusBarStyleVariant.primary.disabledStep}>
+        {item.step}
+      </Text>
+    </View>
+  );
+};

package/components/statusbar/__snapshots__/StatusBar.test.tsx.snap

@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Running Test for StatusBar Check StatusBar 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#202452",
+      "flex": 1,
+      "flexDirection": "row",
+      "height": 45,
+      "justifyContent": "flex-end",
+      "position": "relative",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#FAD614",
+        "height": "50%",
+        "width": 25,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#202452",
+          "borderTopEndRadius": 40,
+          "height": "100%",
+          "width": 25,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#FAD614",
+        "borderBottomStartRadius": 31,
+        "borderTopEndRadius": 31,
+        "flex": 0.4,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignSelf": "center",
+          "flexDirection": "row",
+          "marginLeft": "10%",
+        }
+      }
+    >
+      <Image
+        source={
+          Object {
+            "testUri": "../../../assets/images/icons/calendar-secundary.png",
+          }
+        }
+        style={
+          Object {
+            "alignSelf": "center",
+            "height": 27,
+            "width": 27,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "marginLeft": "12%",
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "#202452",
+              "fontSize": 14,
+              "fontWeight": "600",
+            }
+          }
+        >
+          Current Plan date
+        </Text>
+        <Text
+          style={
+            Object {
+              "color": "#202452",
+              "fontSize": 11,
+              "fontWeight": "500",
+              "marginTop": "2%",
+            }
+          }
+        >
+          03 January, 2022
+        </Text>
+      </View>
+    </View>
+    <Text
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#202452",
+          "flex": 1,
+          "fontSize": 17,
+          "fontWeight": "600",
+          "marginRight": "10%",
+          "textAlign": "right",
+        }
+      }
+    >
+      1. Vehicles
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "alignSelf": "flex-end",
+        "backgroundColor": "#FAD614",
+        "height": "100%",
+        "transform": Array [
+          Object {
+            "rotate": "180deg",
+          },
+        ],
+        "width": 25,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#202452",
+          "borderColor": "#202452",
+          "borderTopEndRadius": 20,
+          "height": "100%",
+          "width": 25,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#202452",
+        "borderBottomStartRadius": 20,
+        "borderTopEndRadius": 20,
+        "flex": 0.15,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#FFFFFF",
+          "flex": 1,
+          "fontSize": 17,
+          "fontWeight": "600",
+          "justifyContent": "center",
+          "textAlign": "center",
+        }
+      }
+    >
+      2. Visits
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#202452",
+        "borderBottomStartRadius": 20,
+        "borderTopEndRadius": 20,
+        "flex": 0.15,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#FFFFFF",
+          "flex": 1,
+          "fontSize": 17,
+          "fontWeight": "600",
+          "justifyContent": "center",
+          "textAlign": "center",
+        }
+      }
+    >
+      3. Routes
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#202452",
+        "borderBottomStartRadius": 20,
+        "borderTopEndRadius": 20,
+        "flex": 0.15,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#FFFFFF",
+          "flex": 1,
+          "fontSize": 17,
+          "fontWeight": "600",
+          "justifyContent": "center",
+          "textAlign": "center",
+        }
+      }
+    >
+      4. Capacity
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#202452",
+        "borderBottomStartRadius": 20,
+        "borderTopEndRadius": 20,
+        "flex": 0.15,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#FFFFFF",
+          "flex": 1,
+          "fontSize": 17,
+          "fontWeight": "600",
+          "justifyContent": "center",
+          "textAlign": "center",
+        }
+      }
+    >
+      5. Settings
+    </Text>
+  </View>
+</View>
+`;

package/components/statusbar/index.ts

@@ -0,0 +1,3 @@
+import {StatusBar} from './StatusBar';
+
+export {StatusBar};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "private": false,
   "scripts": {
     "android": "react-native run-android",