Skip to content

Commit d3c0329

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-ui-lib into V6
# Conflicts: # demo/src/screens/componentScreens/CardsScreen.tsx # generatedTypes/components/badge/index.d.ts # generatedTypes/components/card/index.d.ts # markdowns/foundation/modifiers.md # package.json # src/components/badge/index.tsx # src/components/button/__tests__/__snapshots__/index.spec.js.snap # src/components/stepper/index.js # src/components/switch/index.tsx # src/components/tagsInput/index.js # src/style/componentsColors.ts # src/style/themeManager.ts # uilib-docs/src/components/navbar/index.scss # uilib-docs/src/templates/components.scss
2 parents 47a0299 + e0247b7 commit d3c0329

File tree

166 files changed

+3200
-1349
lines changed

Some content is hidden

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

166 files changed

+3200
-1349
lines changed

‎.github/pull_request_template.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
*Enter description to help the reviewer understand what's the change about...*
33

44
## Changelog
5-
*Add a quick message for our users about this change*
5+
*Add a quick message for our users about this change (include Compoennt name, relevant props and general purpose of the PR)*

‎README.md

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
<p align="center">
2-
UI Toolset & Components Library for React Native
3-
<img src="https://user-images.githubusercontent.com/1780255/64093084-a11b0300-cd5f-11e9-9175-a7b4d2b717a7.png"/>
2+
<img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/>
3+
</p>
4+
<p align="center">UI Toolset & Components Library for React Native</p>
5+
<p align="center">
6+
<img src="https://user-images.githubusercontent.com/1780255/105469340-bec47180-5ca0-11eb-8986-3eb986f884d9.jpg"/>
47
</p>
58

6-
<table>
7-
<tr>
8-
<td>
9-
<img height="500" src="https://user-images.githubusercontent.com/1780255/72094962-3044b280-3320-11ea-8e41-aa83743bafb9.gif">
10-
</td>
11-
<td>
12-
<img height="500" src="https://user-images.githubusercontent.com/1780255/72094961-3044b280-3320-11ea-95e2-9aa745c8b07d.gif">
13-
</td>
14-
<td>
15-
<img height="500" src="https://user-images.githubusercontent.com/1780255/72094958-2fac1c00-3320-11ea-8f67-9d759cfa4ae1.gif">
16-
</td>
17-
</tr>
18-
</table>
19-
209

2110
---
2211
[![Build Status](https://travis-ci.org/wix/react-native-ui-lib.svg?branch=master)](https://travis-ci.org/wix/react-native-ui-lib)
2312
[![npm](https://img.shields.io/npm/v/react-native-ui-lib.svg)](https://www.npmjs.com/package/react-native-ui-lib)
2413
[![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](https://www.npmjs.com/package/react-native-ui-lib)
14+
<a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
2515

2616

27-
Read more in our [Uncyclo](https://github.com/wix/react-native-ui-lib/wiki). <br>
2817
Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>
2918
Our [Discord Channel](https://discord.gg/2eW4g6Z)
3019

@@ -35,10 +24,10 @@ Download our Expo demo app <br>
3524

3625
## Installing
3726

38-
See setup instructions [here](https://github.com/wix/react-native-ui-lib/wiki/SETUP).
27+
See setup instructions [here](https://wix.github.io/react-native-ui-lib/getting-started/setup).
3928

4029
#### New Major Version 5.0
41-
See [breaking changes](https://github.com/wix/react-native-ui-lib/wiki/V5-%5BBreaking-Change%5D)
30+
See [breaking changes](https://wix.github.io/react-native-ui-lib/getting-started/v5)
4231

4332
#### For React Native >= 0.60.0
4433
please use `react-native-ui-lib`
@@ -106,7 +95,7 @@ ThemeManager.setComponentTheme('Button', (props, context) => {
10695

10796
### Step 3
10897
Use it all together.
109-
Your configurations will be applied on uilib components so you can use them easily with [modifiers](https://github.com/wix/react-native-ui-lib/wiki/MODIFIERS).
98+
Your configurations will be applied on uilib components so you can use them easily with [modifiers](https://wix.github.io/react-native-ui-lib/foundation/modifiers).
11099

111100
```
112101
// MyScreen.js
@@ -129,3 +118,4 @@ class MyScreen extends Component {
129118
}
130119
}
131120
```
121+

‎demo/src/screens/MainScreen.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ class MainScreen extends Component {
181181
paddingV-s2
182182
onPress={() => this.openScreen(item)}
183183
onLongPress={() => this.setDefaultScreen(item)}
184-
activeBackgroundColor={Colors.blue40}
184+
activeBackgroundColor={Colors.primary}
185185
activeOpacity={1}
186186
>
187187
<Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>

‎demo/src/screens/componentScreens/ActionBarScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class ActionBarScreen extends Component {
4545

4646
<View style={styles.page}>
4747
<ActionBar
48-
backgroundColor={Colors.blue30}
48+
backgroundColor={Colors.primary}
4949
actions={[
5050
{label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
5151
{label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},

‎demo/src/screens/componentScreens/BadgesScreen.tsx

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {ScrollView, StyleSheet} from 'react-native';
3-
import {Colors, View, Badge, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
3+
import {Colors, View, Badge, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
44
const BadgesSpace = 30;
55
const plusIcon = require('../../assets/icons/chevronUp.png');
66
const minusIcon = require('../../assets/icons/chevronDown.png');
@@ -25,6 +25,23 @@ export default class BadgesScreen extends Component {
2525
}
2626

2727
render() {
28+
const customElement1 = (
29+
<View row>
30+
<Image source={bell}/>
31+
<Image source={bell}/>
32+
</View>
33+
);
34+
35+
const customElement2 = (
36+
<View row>
37+
<Image source={bell}/>
38+
<Text white text90>
39+
37
40+
</Text>
41+
<Image source={bell}/>
42+
</View>
43+
);
44+
2845
return (
2946
<ScrollView style={{backgroundColor: Colors.grey70}} contentContainerStyle={styles.container}>
3047
<Text text50 row center marginB-15>
@@ -141,10 +158,17 @@ export default class BadgesScreen extends Component {
141158
Counter Icon Badges
142159
</Text>
143160
<View row paddingH-15>
144-
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
145-
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
161+
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
162+
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
146163
</View>
147164

165+
<Text text50 marginB-10 row center marginT-25>
166+
Custom Element Badges
167+
</Text>
168+
<View row paddingH-15>
169+
<Badge marginR-10 label={'17'} customElement={customElement1}/>
170+
<Badge marginR-10 customElement={customElement2} backgroundColor={Colors.grey30}/>
171+
</View>
148172
</ScrollView>
149173
);
150174
}

‎demo/src/screens/componentScreens/ButtonsScreen.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ export default class ButtonsScreen extends Component {
318318

319319
<Button
320320
style={{marginBottom: ButtonSpace}}
321-
blue30
321+
primary
322322
outline
323323
iconSource={plusIcon}
324324
label="Icon"
@@ -339,7 +339,7 @@ export default class ButtonsScreen extends Component {
339339
style={{marginBottom: ButtonSpace}}
340340
>
341341
<Image source={plusIcon} />
342-
<Text style={{marginLeft: 10, color: Colors.blue30}}>
342+
<Text marginL-10 primary>
343343
Custom Icon
344344
</Text>
345345
</Button>

‎demo/src/screens/componentScreens/CardsScreen.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
123123
return (
124124
<Card style={{marginBottom: 10}} onPress={() => {}}>
125125
<Card.Section
126+
bg-white
126127
content={[
127128
{text: 'You’re Invited!', text70: true, grey10: true},
128129
{text: 'join now', text90: true, grey50: true}
@@ -148,6 +149,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
148149
contentStyle={{alignItems: 'center'}}
149150
/>
150151
<Card.Section
152+
bg-white
151153
padding-20
152154
flex
153155
content={[{text: 'All site', text70: true, grey10: true}]}
@@ -171,6 +173,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
171173
<Card {...cardProps} flex marginV-10 onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
172174
{image}
173175
<Card.Section
176+
bg-white
174177
padding-20
175178
content={[{text: 'All site', text70: true, grey10: true}]}
176179
contentStyle={{alignItems: 'center'}}
@@ -227,7 +230,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
227230
<ScrollView style={{height: 100, marginBottom: 20}} horizontal showsHorizontalScrollIndicator={false}>
228231
{_.times(4, i => {
229232
return (
230-
<Card key={i} width={100} style={{marginRight: 20}}>
233+
<Card key={i} width={100} style={{marginRight: 20}} backgroundColor={Colors.white}>
231234
<View padding-15>
232235
<Text text30 grey30>
233236
{i}
@@ -263,7 +266,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
263266
imageStyle={{height: 160}}
264267
/>
265268

266-
<View padding-20>
269+
<View padding-20 bg-white>
267270
<Text text40 color={Colors.grey10}>
268271
{post.title}
269272
</Text>

‎demo/src/screens/componentScreens/DateTimePickerScreen.js

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,36 @@
11
import React, {Component} from 'react';
2-
import {DateTimePicker, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
2+
import {ScrollView} from 'react-native';
3+
import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
34

45
export default class DateTimePickerScreen extends Component {
6+
7+
getCustomInputValue = value => {
8+
if (!value) {
9+
return 'Default';
10+
}
11+
return value.includes(new Date().getFullYear() + 1) ? 'Next Year' : value;
12+
};
13+
14+
renderCustomInput = (props, toggle) => {
15+
const {value} = props;
16+
return (
17+
<TouchableOpacity
18+
flex
19+
row
20+
spread
21+
onPress={() => {
22+
toggle(true);
23+
}}
24+
>
25+
<Text>Valid from</Text>
26+
<Text absR color={Colors.primary} text80BO>{this.getCustomInputValue(value)}</Text>
27+
</TouchableOpacity>
28+
);
29+
};
30+
531
render() {
632
return (
7-
<View flex padding-s5>
33+
<ScrollView style={{padding: 14}}>
834
<Text text40>Date Time Picker</Text>
935
<DateTimePicker
1036
containerStyle={{marginVertical: 20}}
@@ -37,7 +63,18 @@ export default class DateTimePickerScreen extends Component {
3763
placeholder={'Select time'}
3864
value={new Date('2015-03-25T12:00:00-06:30')}
3965
/>
40-
</View>
66+
<Text text60R marginT-40>
67+
Custom Input
68+
</Text>
69+
<DateTimePicker
70+
containerStyle={{marginVertical: 20}}
71+
title={'Date'}
72+
placeholder={'Select a date'}
73+
renderExpandableInput={this.renderCustomInput}
74+
dateFormat={'MMM D, YYYY'}
75+
// value={new Date('2015-03-25T12:00:00-06:30')}
76+
/>
77+
</ScrollView>
4178
);
4279
}
4380
}

‎demo/src/screens/componentScreens/FaderScreen.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {StyleSheet, ScrollView} from 'react-native';
44
import {Colors, Text, View, Fader, withScrollReached, WithScrollReachedProps} from 'react-native-ui-lib';
5+
// @ts-ignore
56
import {renderHeader} from '../ExampleScreenPresenter';
67

78
const numberOfItems = 3;
@@ -10,6 +11,7 @@ const itemWidth = 100;
1011
const itemHeight = 100;
1112
const tintColor = undefined;
1213

14+
// @ts-ignore
1315
const horizontal = faderPosition === Fader.position.START || faderPosition === Fader.position.END;
1416

1517
class FaderScreen extends Component<WithScrollReachedProps> {

‎demo/src/screens/componentScreens/PickerScreen.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,12 @@ export default class PickerScreen extends Component {
135135
// topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
136136
wheelPickerProps={{
137137
style: {width: 200},
138-
color: Colors.violet30,
138+
color: Colors.green30,
139139
labelStyle: {fontSize: 32, fontFamily: 'sans-serif-condensed-light'},
140140
itemHeight: 55
141141
}}
142-
selectLabelStyle={{color: Colors.violet30}}
143-
cancelLabelStyle={{color: Colors.violet30}}
142+
selectLabelStyle={{color: Colors.green30}}
143+
cancelLabelStyle={{color: Colors.green30}}
144144
>
145145
{_.map(options, option => (
146146
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>

‎demo/src/screens/componentScreens/TabControllerScreen/index.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,15 @@ class TabControllerScreen extends Component<{}, State> {
3535
this.state.items = this.generateTabItems();
3636
}
3737

38-
generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected): TabControllerItemProps[] => {
38+
generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
3939
let items: TabControllerItemProps[] = _.chain(TABS)
4040
.take(fewItems ? 3 : TABS.length)
4141
.map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
4242
.value();
4343

4444
const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
4545

46-
if (!centerSelected) {
47-
items = [...items, addItem];
48-
}
49-
return items;
46+
return [...items, addItem];
5047
};
5148

5249
componentDidMount() {
@@ -83,7 +80,7 @@ class TabControllerScreen extends Component<{}, State> {
8380
toggleCenterSelected = () => {
8481
const {fewItems, centerSelected} = this.state;
8582
this.setState({
86-
items: this.generateTabItems(fewItems, !centerSelected),
83+
items: this.generateTabItems(fewItems),
8784
centerSelected: !centerSelected,
8885
key: Date.now()
8986
});

‎demo/src/screens/componentScreens/index.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,5 @@ export function registerScreens(registrar) {
6262
registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
6363
registrar('unicorn.components.WithScrollReachedScreen', () => require('./WithScrollReachedScreen').default);
6464
registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);
65-
// Incubator Screens
66-
registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
6765
}
6866

‎demo/src/screens/componentScreens/IncubatorTextFieldScreen.tsx renamed to ‎demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

File renamed without changes.

‎demo/src/screens/incubatorScreens/index.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
22

33
export function registerScreens(registrar) {
44
registrar('unicorn.incubator.TouchableOpacityScreen', () =>
5-
gestureHandlerRootHOC(require('./TouchableOpacityScreen').default)
6-
);
7-
registrar('unicorn.incubator.WheelPickerScreen', () =>
8-
gestureHandlerRootHOC(require('./WheelPickerScreen').default)
9-
);
5+
gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
6+
registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
7+
registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
108
}

‎eslint-rules/lib/rules/typography-deprecation.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,21 @@ module.exports = {
4848
localImportSpecifier = utils.getLocalImportSpecifier(node, source, defaultImportName);
4949
}
5050

51+
function isComponentRelevant(node, components) {
52+
let isComponentRelevant = true;
53+
if (!_.isEmpty(components)) {
54+
if (_.get(node, 'parent.type') === 'JSXOpeningElement') {
55+
return components.includes(_.get(node, 'parent.name.name'));
56+
}
57+
}
58+
59+
return isComponentRelevant;
60+
}
61+
5162
function findAndReportDeprecation(node, possibleDeprecation, useShortVersion) {
5263
const path = `${defaultImportName}.${possibleDeprecation}`;
5364
const foundDeprecation = _.find(deprecations, {path});
54-
if (foundDeprecation) {
65+
if (foundDeprecation && isComponentRelevant(node, foundDeprecation.components)) {
5566
reportDeprecatedTypography(node, foundDeprecation, useShortVersion);
5667
}
5768
}

‎eslint-rules/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "eslint-plugin-uilib",
3-
"version": "1.0.27",
3+
"version": "1.0.28",
44
"description": "uilib set of eslint rules",
55
"keywords": [
66
"eslint",

0 commit comments

Comments
 (0)