Merge branch 'PBI-1-Quiz_Result' into 'staging'

Dietela Quiz Result UI

See merge request !9

package.json

@@ -17,16 +17,19 @@
     "@react-navigation/native": "^5.9.3",
     "@react-navigation/stack": "^5.14.3",
     "@testing-library/react-native": "^7.2.0",
+    "@types/react-native-snap-carousel": "^3.8.2",
     "axios": "^0.21.1",
     "formik": "^2.2.6",
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-button": "^3.0.1",
     "react-native-elements": "^3.3.2",
+    "react-native-fullwidth-image": "^0.1.3",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-reanimated": "^2.0.0",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^2.18.1",
+    "react-native-snap-carousel": "^3.9.1",
     "react-native-toast-message": "^1.4.9",
     "react-native-vector-icons": "^8.1.0",
     "yup": "^0.32.9"

src/assets/images/index.ts

 export const banner_girl_eating = require('./banner_girl_eating.png');
 export const logo_white_small = require('./logo_white_small.png');
+export const status_berat_badan = require('./status_berat_badan.png');

src/components/core/AutoImage/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import AutoImage from '.';
+import { logo_white_small } from '../../../assets/images';
+
+describe('AutoImage', () => {
+  it('renders correctly', () => {
+    render(<AutoImage source={logo_white_small} />);
+  });
+});

src/components/core/AutoImage/index.tsx

+import React, { FC } from 'react';
+import { View, Image, ImageSourcePropType } from 'react-native';
+import FullWidthImage from 'react-native-fullwidth-image';
+
+interface Props {
+  source: ImageSourcePropType;
+  ratio?: number;
+  testID?: string;
+}
+
+const AutoImage: FC<Props> = ({ source, ratio, testID }) => {
+  const { width, height } = Image.resolveAssetSource(source);
+
+  return (
+    <View testID={testID}>
+      <FullWidthImage
+        source={source}
+        width={width}
+        height={height}
+        ratio={ratio}
+      />
+    </View>
+  );
+};
+
+export default AutoImage;

src/components/core/CarouselPagination/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import CarouselPagination from '.';
+
+describe('CarouselPagination', () => {
+  it('renders correctly', () => {
+    render(<CarouselPagination index={0} length={9} />);
+  });
+});

src/components/core/CarouselPagination/index.tsx

+import React, { FC } from 'react';
+import { Pagination } from 'react-native-snap-carousel';
+
+import { styles } from './styles';
+
+interface Props {
+  index: number;
+  length: number;
+}
+
+const CarouselPagination: FC<Props> = ({ index, length }) => (
+  <Pagination
+    dotsLength={length}
+    activeDotIndex={index}
+    dotStyle={styles.dotStyle}
+    inactiveDotOpacity={0.4}
+    inactiveDotScale={0.6}
+  />
+);
+
+export default CarouselPagination;

src/components/core/CarouselPagination/styles.ts

+import { StyleSheet } from 'react-native';
+import { colors } from 'styles';
+
+export const styles = StyleSheet.create({
+  dotStyle: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    marginHorizontal: -3,
+    backgroundColor: colors.primary,
+  },
+});

src/components/core/InfoCard/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import InfoCard from '.';
+
+describe('InfoCard', () => {
+  it('renders correctly', () => {
+    render(<InfoCard />);
+  });
+});

src/components/core/InfoCard/index.tsx

+import React, { FC } from 'react';
+import { View, Text } from 'react-native';
+import { typographyStyles } from 'styles';
+
+import { styles } from './styles';
+
+interface Props {
+  content: string;
+  testID?: string;
+}
+
+const InfoCard: FC<Props> = ({ content, testID }) => {
+  return (
+    <View style={[styles.card]} testID={testID}>
+      <Text style={typographyStyles.bodyMedium}>{content}</Text>
+    </View>
+  );
+};
+
+export default InfoCard;

src/components/core/InfoCard/styles.ts

+import { StyleSheet } from 'react-native';
+import { colors } from 'styles';
+
+export const styles = StyleSheet.create({
+  card: {
+    borderRadius: 8,
+    padding: 15,
+    backgroundColor: colors.neutralLight,
+  },
+});

src/components/core/ResultCard/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import ResultCard from '.';
+
+describe('ResultCard', () => {
+  const info = [
+    {
+      title: 'Energi per hari',
+      content: '1953 kkal',
+    },
+    {
+      title: 'Protein per hari',
+      content: '23 kkal',
+    },
+  ];
+
+  it('renders correctly', () => {
+    render(<ResultCard status="healthy" infos={info} />);
+  });
+});

src/components/core/ResultCard/index.tsx

+import React, { FC } from 'react';
+import { View, Text } from 'react-native';
+
+import { typographyStyles } from 'styles';
+import { styles } from './styles';
+
+interface Props {
+  infos: { title: string; content: string }[];
+  status: 'healthy' | 'warning' | 'danger';
+  testID?: string;
+}
+
+const ResultCard: FC<Props> = ({ infos, status, testID }) => {
+  const getColorFromStatus = (status: string) => {
+    if (status === 'healthy') {
+      return '#1DD1A1';
+    } else if (status === 'warning') {
+      return '#FF9A3E';
+    } else {
+      return '#F44771';
+    }
+  };
+
+  const cardColor = getColorFromStatus(status);
+
+  const infoPairs = infos.reduce(function (result, value, index, array) {
+    if (index % 2 === 0) result.push(array.slice(index, index + 2));
+    return result;
+  }, []);
+
+  return (
+    <View style={[styles.card, { backgroundColor: cardColor }]} testID={testID}>
+      {infoPairs.map((pair, ii) => (
+        <View style={styles.row} key={ii}>
+          {pair.map((info, jj) => {
+            const padding =
+              jj % 2 === 0
+                ? { flex: 1, paddingRight: 10 }
+                : { flex: 1, paddingLeft: 10 };
+
+            return (
+              <View style={[styles.content, padding]} key={info.title}>
+                <Text style={[typographyStyles.overlineBig, styles.text]}>
+                  {info.title}
+                </Text>
+                <Text
+                  style={[
+                    typographyStyles.headingMedium,
+                    styles.text,
+                    { marginTop: 4 },
+                  ]}>
+                  {info.content}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default ResultCard;

src/components/core/ResultCard/styles.ts

+import { StyleSheet } from 'react-native';
+import { colors } from 'styles';
+
+export const styles = StyleSheet.create({
+  card: {
+    borderRadius: 8,
+  },
+  row: {
+    padding: 15,
+    flexDirection: 'row',
+  },
+  content: {
+    flex: 1,
+  },
+  text: {
+    color: colors.neutralLight,
+  },
+});

src/components/core/Statistic/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import Statistic from '.';
+
+describe('Statistic', () => {
+  it('renders correctly', () => {
+    render(<Statistic title="berat badan" emote="⚖️" content="77 kg" />);
+  });
+});

src/components/core/Statistic/index.tsx

+import React, { FC } from 'react';
+import { View, Text } from 'react-native';
+import { typographyStyles } from 'styles';
+import { styles } from './styles';
+
+interface Props {
+  title: string;
+  emote: string;
+  content: string;
+  testID?: string;
+}
+
+const Statistic: FC<Props> = ({ title, emote, content, testID }) => {
+  return (
+    <View testID={testID}>
+      <Text style={[typographyStyles.overlineBig, styles.title]}>{title}</Text>
+      <View>
+        <Text style={typographyStyles.bodyMedium}>
+          <View style={styles.emote}>
+            <Text style={[typographyStyles.bodyMedium, styles.emote]}>
+              {emote}
+            </Text>
+          </View>
+          <View>
+            <Text style={typographyStyles.bodyMedium}>{content}</Text>
+          </View>
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default Statistic;

src/components/core/Statistic/styles.ts

+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  title: {
+    marginBottom: 4,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+  },
+  emote: {
+    marginRight: 8,
+  },
+});

src/components/core/index.ts

 export { default as BigButton } from './Button';
 export { default as WizardContainer } from './WizardContainer';
+export { default as AutoImage } from './AutoImage';
+export { default as ResultCard } from './ResultCard';
+export { default as Statistic } from './Statistic';
+export { default as CarouselPagination } from './CarouselPagination';
+export { default as InfoCard } from './InfoCard';
 export { default as Toast } from 'react-native-toast-message';

src/components/layout/Section/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import Section from '.';
+
+describe('Section', () => {
+  it('renders correctly', () => {
+    render(<Section />);
+  });
+});

src/components/layout/Section/index.tsx

+import React, { FC } from 'react';
+import { View } from 'react-native';
+
+const Section: FC = ({ children }) => (
+  <View style={{ marginTop: 15 }}>{children}</View>
+);
+
+export default Section;