fix(conflicts): fixed conflicts of component

Author: asadmogul

package.json

@@ -12,7 +12,11 @@
   "config": {},
   "size-limit": [
     {
+<<<<<<< HEAD
       "limit": "40 KB",
+=======
+      "limit": "36 KB",
+>>>>>>> b4845c46416a6db3ed1ea5a46f75eb1146ec4cff
       "webpack": false,
       "path": "dist/**/!(*.test).js"
     }
@@ -75,7 +79,7 @@
   },
   "dependencies": {
     "@bluebase/component-mapper": "^1.4.0",
-    "@bluebase/components": "^5.5.1",
+    "@bluebase/components": "^5.6.0",
     "@material-ui/core": "^3.9.3",
     "@material-ui/lab": "^3.0.0-alpha.30",
     "deepmerge": "^3.2.0",
@@ -156,4 +160,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

src/components/Badge/Badge.ts

@@ -0,0 +1,15 @@
+// import { Badge as RNPBadge } from 'react-native-paper';
+import { BadgeDefaultProps, BadgeProps } from '@bluebase/components';
+import MUIBadge from '@material-ui/core/Badge';
+import { componentMapper } from '@bluebase/component-mapper';
+export const Badge = componentMapper<BadgeProps>(
+	MUIBadge,
+	{
+		badgeContent: ({ children }: any) => children,
+		color: () => {
+			return 'error';
+		},
+	},
+	{ rest: true, ignore: ['children'] }
+);
+Badge.defaultProps = BadgeDefaultProps;

src/components/Badge/__stories__/Badge.stories.tsx

@@ -0,0 +1,29 @@
+import {
+    // Icon,
+    Badge,
+    // BadgeProps,
+} from '@bluebase/components';
+// import { getComponent } from '@bluebase/core';
+import storiesOf from '@bluebase/storybook-addon';
+import { withInfo } from '@storybook/addon-info';
+import { withKnobs } from '@storybook/addon-knobs';
+import React from 'react';
+
+const stories = storiesOf('Badge', module);
+stories.addDecorator(withInfo);
+stories.addDecorator(withKnobs);
+// const Badge = getComponent<BadgeProps>('Badge');
+// const Icons: any = Icon;
+// stories.add('Contained Badge', () => (
+//     <Badge> 
+//         <Icon name="star" size={20} color="red" />
+//     </Badge>
+// ))
+stories.add('Contained Badge with number prop', () => (
+    <Badge>
+        4
+    </Badge>
+))
+stories.add('With out child', () => (
+    <Badge/>
+))

src/components/Badge/__test__/Badge.test.tsx

@@ -0,0 +1,22 @@
+import { Badge } from '../Badge';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+test('Badge component with visible Prop', () => {
+	const component = shallow(
+		<Badge visible = {false}/>
+	);
+	// expect(component).toMatchSnapshot();
+	expect(component.props().visible).toEqual(false);
+});
+
+// test('Badge component with Children', () => {
+// 	const component = shallow(
+// 		<Badge>
+//             <Text></Text>
+//         </Badge>
+//     );
+//     console.log(component.children());
+// 	// expect(component).toMatchSnapshot();
+// 	expect(component.children()).toEqual(5);
+// });

src/components/Badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

src/components/BottomNavigation/__stories__/BottomNavigation.stories.tsx

@@ -23,15 +23,15 @@ stories
 	<BottomNavigation value={1} onChange={(_e, i) => console.log(`Clicked tab ${i}`)} >
 		<BottomNavigationAction
 			label="Item One"
-			icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
+			icon={{ type: 'icon', name: 'star' }}
 		/>
 		<BottomNavigationAction
 			label="Item Two"
-			icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
+			icon={{ type: 'icon', name: 'favorite' }}
 		/>
 		<BottomNavigationAction
 			label="Item Three"
-			icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
+			icon={{ type: 'icon', name: 'help' }}
 		/>
 	</BottomNavigation>
 ))

src/components/BottomNavigationAction/BottomNavigationAction.tsx

@@ -4,7 +4,25 @@ import React from 'react';
 import { componentMapper } from '@bluebase/component-mapper';
 
 export const BottomNavigationAction = componentMapper<BottomNavigationActionProps>(MuiBottomNavigationAction, {
-	icon: ({ icon }) => icon ? React.createElement(DynamicIcon, icon) : undefined
+	icon: ({ icon }) => {
+
+		if (!icon) {
+			return;
+		}
+
+		const size = icon.size || 24;
+
+		const props = {
+			size,
+			style: {
+				lineHeight: size,
+				...icon.style,
+			},
+			...icon,
+		};
+
+		return React.createElement(DynamicIcon, props);
+	}
 }, {
 	rest: true
 });

src/components/DrawerItem/DrawerItem.tsx

@@ -1,18 +1,15 @@
-import { DrawerItemProps, IconProps } from '@bluebase/components';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
+import { DrawerItemProps, List } from '@bluebase/components';
 import ListItemText from '@material-ui/core/ListItemText';
 import MUIListItem from '@material-ui/core/ListItem';
 import React from 'react';
-import { getComponent } from '@bluebase/core';
 
 export const DrawerItem = (props: DrawerItemProps) => {
 
 	const { active, disabled, icon, onPress, right, title } = props;
-	const Icon = getComponent<IconProps>('Icon', 'Noop');
 
 	return (
 		<MUIListItem button={!!onPress} disabled={disabled} selected={active} onClick={onPress}>
-			{icon ? <ListItemIcon><Icon {...icon} /></ListItemIcon> : null}
+			{icon ? <List.Icon size={24} {...icon} /> : null}
 			{(title) ? <ListItemText inset={!!icon} primary={title} /> : null}
 			{right}
 		</MUIListItem>

src/components/DrawerItem/__stories__/DrawerItem.stories.tsx

@@ -18,11 +18,11 @@ stories.add('Default props', () => (
 ));
 
 stories.add('With Icon', () => (
-	<DrawerItem title="Item 1" icon={{ name: 'rocket' }} />
+	<DrawerItem title="Item 1" icon={{ name: 'favorite' }} />
 ));
 
 stories.add('onPress listener', () => (
-	<DrawerItem title="Click Me" onPress={action('drawer-item-click')} />
+	<DrawerItem title="Click Me" icon={{ name: 'favorite' }} onPress={action('drawer-item-click')} />
 ));
 
 stories.add('Active', () => (

src/components/DrawerItem/__tests__/DrawerItem.test.tsx

@@ -9,27 +9,29 @@ describe('DrawerItem', () => {
 		const component = shallow(
 			<DrawerItem title="Item 1" />
 		);
-		expect(component.childAt(0).props().primary).toEqual('Item 1');
-		expect(component.childAt(0).props().inset).toEqual(false);
+		// expect(component).toMatchSnapshot();
+
+		expect(component.props().children[1].props.primary).toEqual('Item 1');
+		expect(component.props().children[1].props.inset).toEqual(false);
 	});
 
 	test('should forward left and right as children, set inset to true', () => {
 		const component = shallow(
 			<DrawerItem title="Item 1" icon={{ name: 'rocket' }} right={<Text>R</Text>} />
-			);
-		// expect(component).toMatchSnapshot();
-		expect(component.childAt(0).childAt(0).props().name).toBe('rocket');
-		expect(component.childAt(1).props().inset).toEqual(true);
-		expect(component.childAt(2).childAt(0).text()).toEqual('R');
+		);
+
+		expect(component.props().children[0].props.name).toBe('rocket');
+		expect(component.props().children[1].props.inset).toEqual(true);
+		expect(component.props().children[2].props.children).toEqual('R');
 	});
 
 	test('should not render anything in main area if no title or description', () => {
 		const component = shallow(
 			<DrawerItem title={null as any} icon={{ name: 'rocket' }} right={<Text>R</Text>} />
 		);
 		// expect(component).toMatchSnapshot();
-		expect(component.childAt(0).childAt(0).props().name).toBe('rocket');
-		expect(component.childAt(1).childAt(0).text()).toEqual('R');
+		expect(component.props().children[0].props.name).toBe('rocket');
+		expect(component.props().children[2].props.children).toEqual('R');
 	});
 
 });