Merge pull request 'ChartView styled component' (#27) from loewy/chart-view into master

Reviewed-on: billnerds/rn-playground#27
Reviewed-by: Kat Huang <kkathuang@gmail.com>

component/charts/chart-styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+import { colors, shadows } from '../../styles';
+
+export const graphStyles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.panelWhite,
+    borderColor: 'black',
+    borderRadius: 5,
+    marginVertical: 10,
+    marginHorizontal: 15,
+    paddingTop: 15,
+    paddingHorizontal: 15,
+    ...shadows.standard
+  },
+});

component/charts/chart-view.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { graphStyles } from './chart-styles';
+
+interface ChartViewProps {
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+  testID?: string;
+}
+
+const ChartView: React.FC<ChartViewProps> = ({ children, style, testID }) => {
+  return <View style={[graphStyles.container, style]} testID={testID} >{children}</View>;
+};
+
+export default ChartView;

styles.ts

@@ -8,3 +8,16 @@ export const colors = {
   buttonBlue: '#1987ff',
   textWhite: '#ffffff'
 };
+
+export const shadows = {
+  standard: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4.65,
+    elevation: 3
+  },
+};

test/component/chart-view.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text } from 'react-native'
+import { render } from '@testing-library/react-native';
+import "@testing-library/jest-native/extend-expect";
+
+import ChartView from '../../component/charts/chart-view';
+
+describe('ChartView Component Tests', () => {
+  it('applies the passed style prop correctly', () => {
+    const testStyle = { backgroundColor: 'blue', padding: 10 };
+    const { getByTestId } = render(
+      <ChartView style={testStyle} testID="chart-view">
+        <Text>Test Child</Text>
+      </ChartView>
+    );
+  
+    const chartView = getByTestId('chart-view');
+    expect(chartView.props.style).toEqual(expect.arrayContaining([testStyle]));
+  });
+
+  it('renders children correctly', () => {
+    const { getByText } = render(
+      <ChartView>
+        <Text testID="child-text">Child Component</Text>
+      </ChartView>
+    );
+
+    const childText = getByText('Child Component');
+    console.log(childText)
+    expect(childText).toBeTruthy();
+  });
+});