Skip to content

Commit 0b7041b

Browse files
adnan1naeemadnan1naeem
committed
fix(RTL): added rtl component
2 parents dc10180 + b4845c4 commit 0b7041b

File tree

68 files changed

+1462
-2436
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+1462
-2436
lines changed

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"config": {},
1313
"size-limit": [
1414
{
15-
"limit": "30 KB",
15+
"limit": "36 KB",
1616
"webpack": false,
1717
"path": "dist/**/!(*.test).js"
1818
}
@@ -75,7 +75,7 @@
7575
},
7676
"dependencies": {
7777
"@bluebase/component-mapper": "^1.4.0",
78-
"@bluebase/components": "^5.1.1",
78+
"@bluebase/components": "^5.6.0",
7979
"@material-ui/core": "^3.9.3",
8080
"@material-ui/lab": "^3.0.0-alpha.30",
8181
"deepmerge": "^3.2.0",
@@ -88,7 +88,7 @@
8888
"@babel/cli": "^7.2.3",
8989
"@babel/core": "^7.3.4",
9090
"@bluebase/cli-essentials": "^0.0.4",
91-
"@bluebase/code-standards": "^1.1.0",
91+
"@bluebase/code-standards": "^1.3.1",
9292
"@bluebase/core": "^4.0.0-aplha.17",
9393
"@bluebase/plugin-vector-icons": "^0.0.3",
9494
"@bluebase/storybook-addon": "^3.0.0",
@@ -132,7 +132,7 @@
132132
"npm-run-all": "^4.1.3",
133133
"opn-cli": "^4.0.0",
134134
"prettier": "^1.16.4",
135-
"react": "^16.8.4",
135+
"react": "^16.8.6",
136136
"react-dom": "^16.8.4",
137137
"react-native-typescript-transformer": "^1.2.12",
138138
"react-test-renderer": "^16.8.4",

‎src/components/Avatar/Avatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Avatar = (props: AvatarProps) => {
1010
if (type === 'icon') {
1111
return (
1212
<MuiAvatar {...rest}>
13-
<Icon name={icon} color={color} size={size} />
13+
<Icon name={icon} color={color} />
1414
</MuiAvatar>
1515
);
1616
}

‎src/components/Badge/Badge.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// import { Badge as RNPBadge } from 'react-native-paper';
2+
import { BadgeDefaultProps, BadgeProps } from '@bluebase/components';
3+
import MUIBadge from '@material-ui/core/Badge';
4+
import { componentMapper } from '@bluebase/component-mapper';
5+
export const Badge = componentMapper<BadgeProps>(
6+
MUIBadge,
7+
{
8+
badgeContent: ({ children }: any) => children,
9+
color: () => {
10+
return 'error';
11+
},
12+
},
13+
{ rest: true, ignore: ['children'] }
14+
);
15+
Badge.defaultProps = BadgeDefaultProps;

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {
2+
// Icon,
3+
Badge,
4+
// BadgeProps,
5+
} from '@bluebase/components';
6+
// import { getComponent } from '@bluebase/core';
7+
import storiesOf from '@bluebase/storybook-addon';
8+
import { withInfo } from '@storybook/addon-info';
9+
import { withKnobs } from '@storybook/addon-knobs';
10+
import React from 'react';
11+
12+
const stories = storiesOf('Badge', module);
13+
stories.addDecorator(withInfo);
14+
stories.addDecorator(withKnobs);
15+
// const Badge = getComponent<BadgeProps>('Badge');
16+
// const Icons: any = Icon;
17+
// stories.add('Contained Badge', () => (
18+
// <Badge>
19+
// <Icon name="star" size={20} color="red" />
20+
// </Badge>
21+
// ))
22+
stories.add('Contained Badge with number prop', () => (
23+
<Badge>
24+
4
25+
</Badge>
26+
))
27+
stories.add('With out child', () => (
28+
<Badge/>
29+
))

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Badge } from '../Badge';
2+
import React from 'react';
3+
import { shallow } from 'enzyme';
4+
5+
test('Badge component with visible Prop', () => {
6+
const component = shallow(
7+
<Badge visible = {false}/>
8+
);
9+
// expect(component).toMatchSnapshot();
10+
expect(component.props().visible).toEqual(false);
11+
});
12+
13+
// test('Badge component with Children', () => {
14+
// const component = shallow(
15+
// <Badge>
16+
// <Text></Text>
17+
// </Badge>
18+
// );
19+
// console.log(component.children());
20+
// // expect(component).toMatchSnapshot();
21+
// expect(component.children()).toEqual(5);
22+
// });

‎src/components/Badge/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Badge';

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ stories
2323
<BottomNavigation value={1} onChange={(_e, i) => console.log(`Clicked tab ${i}`)} >
2424
<BottomNavigationAction
2525
label="Item One"
26-
icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
26+
icon={{ type: 'icon', name: 'star' }}
2727
/>
2828
<BottomNavigationAction
2929
label="Item Two"
30-
icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
30+
icon={{ type: 'icon', name: 'favorite' }}
3131
/>
3232
<BottomNavigationAction
3333
label="Item Three"
34-
icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
34+
icon={{ type: 'icon', name: 'help' }}
3535
/>
3636
</BottomNavigation>
3737
))

‎src/components/BottomNavigationAction/BottomNavigationAction.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,25 @@ import React from 'react';
44
import { componentMapper } from '@bluebase/component-mapper';
55

66
export const BottomNavigationAction = componentMapper<BottomNavigationActionProps>(MuiBottomNavigationAction, {
7-
icon: ({ icon }) => icon ? React.createElement(DynamicIcon, icon) : undefined
7+
icon: ({ icon }) => {
8+
9+
if (!icon) {
10+
return;
11+
}
12+
13+
const size = icon.size || 24;
14+
15+
const props = {
16+
size,
17+
style: {
18+
lineHeight: size,
19+
...icon.style,
20+
},
21+
...icon,
22+
};
23+
24+
return React.createElement(DynamicIcon, props);
25+
}
826
}, {
927
rest: true
1028
});

‎src/components/Card/_stories_/Card.stories.tsx

Lines changed: 74 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -34,88 +34,91 @@ stories
3434

3535

3636
function RecipeReviewCard() {
37-
const [expanded, setExpanded] = React.useState(false);
37+
const [expanded, setExpanded] = React.useState(false);
3838

39-
function handleExpandClick() {
40-
setExpanded(!expanded);
41-
}
39+
function handleExpandClick() {
40+
setExpanded(!expanded);
41+
}
4242

43-
return (
44-
<Card style={{ width: 400 }}
43+
return (
44+
<Card
45+
onPress={() => console.log('clicked')}
46+
style={{ width: 400 }}
4547
>
46-
<CardHeader
47-
left={
48-
<Avatar aria-label="Recipe">
49-
R
50-
</Avatar>}
51-
right={
52-
<IconButton>
53-
<MoreVertIcon />
54-
</IconButton>
55-
}
56-
title="Shrimp and Chorizo Paella"
57-
description="September 14, 2016"
58-
>
59-
{}
60-
</CardHeader>
61-
<CardCover
62-
style={{ width: 400, height: 400 }}
63-
source={{
64-
uri: 'https://www.careerz360.pk/cdn.careerz360.pk/Content/UserData/empr/f1172787-3c92-459c-a5cc-5a9b7da8613e/profile_pics/thumbnail_bd47c439-bf95-4c30-8be8-fe77023194a0.png'
65-
}}
66-
// title="Paella dish"
67-
/>
68-
<CardContent>
69-
<Typography component="p">
70-
This impressive paella is a perfect party dish and a fun meal to cook together with your
71-
guests. Add 1 cup of frozen peas along with the mussels, if you like.
72-
</Typography>
73-
</CardContent>
74-
<CardActions>
75-
<IconButton aria-label="Add to favorites">
76-
<FavoriteIcon />
77-
</IconButton>
78-
<IconButton aria-label="Share">
79-
<ShareIcon />
80-
</IconButton>
81-
<IconButton
8248

83-
onClick={handleExpandClick}
84-
aria-expanded={expanded}
85-
aria-label="Show more"
49+
<CardHeader
50+
left={
51+
<Avatar aria-label="Recipe">
52+
R
53+
</Avatar>}
54+
right={
55+
<IconButton>
56+
<MoreVertIcon />
57+
</IconButton>
58+
}
59+
title="Shrimp and Chorizo Paella"
60+
description="September 14, 2016"
8661
>
87-
<ExpandMoreIcon />
88-
</IconButton>
89-
</CardActions>
90-
<Collapse in={expanded} timeout="auto" unmountOnExit>
62+
{}
63+
</CardHeader>
64+
<CardCover
65+
style={{ width: 400, height: 400 }}
66+
source={{
67+
uri: 'https://www.careerz360.pk/cdn.careerz360.pk/Content/UserData/empr/f1172787-3c92-459c-a5cc-5a9b7da8613e/profile_pics/thumbnail_bd47c439-bf95-4c30-8be8-fe77023194a0.png'
68+
}}
69+
// title="Paella dish"
70+
/>
9171
<CardContent>
92-
<Typography paragraph>Method:</Typography>
93-
<Typography paragraph>
94-
Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
95-
minutes.
72+
<Typography component="p">
73+
This impressive paella is a perfect party dish and a fun meal to cook together with your
74+
guests. Add 1 cup of frozen peas along with the mussels, if you like.
75+
</Typography>
76+
</CardContent>
77+
<CardActions>
78+
<IconButton aria-label="Add to favorites">
79+
<FavoriteIcon />
80+
</IconButton>
81+
<IconButton aria-label="Share">
82+
<ShareIcon />
83+
</IconButton>
84+
<IconButton
85+
86+
onClick={handleExpandClick}
87+
aria-expanded={expanded}
88+
aria-label="Show more"
89+
>
90+
<ExpandMoreIcon />
91+
</IconButton>
92+
</CardActions>
93+
<Collapse in={expanded} timeout="auto" unmountOnExit>
94+
<CardContent>
95+
<Typography paragraph>Method:</Typography>
96+
<Typography paragraph>
97+
Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
98+
minutes.
9699
</Typography>
97-
<Typography paragraph>
98-
Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
99-
heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
100-
browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
101-
and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
102-
pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
103-
saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
100+
<Typography paragraph>
101+
Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
102+
heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
103+
browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
104+
and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
105+
pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
106+
saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
104107
</Typography>
105-
<Typography paragraph>
106-
Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
107-
without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
108-
medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
109-
again without stirring, until mussels have opened and rice is just tender, 5 to 7
110-
minutes more. (Discard any mussels that don’t open.)
108+
<Typography paragraph>
109+
Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
110+
without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
111+
medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
112+
again without stirring, until mussels have opened and rice is just tender, 5 to 7
113+
minutes more. (Discard any mussels that don’t open.)
111114
</Typography>
112-
<Typography>
113-
Set aside off of the heat to let rest for 10 minutes, and then serve.
115+
<Typography>
116+
Set aside off of the heat to let rest for 10 minutes, and then serve.
114117
</Typography>
115-
</CardContent>
116-
</Collapse>
118+
</CardContent>
119+
</Collapse>
117120
</Card>
118-
);
121+
);
119122
}
120123

121124
export default RecipeReviewCard;

‎src/components/Card/_test_/Card.test.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Card } from '../';
22
import React from 'react';
33
import { Text } from 'react-native';
4-
import { shallow } from 'enzyme';
4+
import { shallow, mount } from 'enzyme';
55

66

77
test('Card component component should show children', () => {
@@ -13,3 +13,13 @@ test('Card component component should show children', () => {
1313
// expect(component).toMatchSnapshot();
1414
expect(component.find('Text')).toBeDefined();
1515
});
16+
17+
18+
test('Card component component with onPress Prop', () => {
19+
const component = mount(
20+
<Card onPress={() => 'string'}>
21+
<Text>Card</Text>
22+
</Card>
23+
);
24+
expect(component.props().onPress()).toBe("string");
25+
});

0 commit comments

Comments
 (0)