Skip to content

Commit bffb221

Browse files
ethansharethanshar
committed
Add our wiki md pages to our docs
1 parent 68505f2 commit bffb221

File tree

18 files changed

+563
-44
lines changed

18 files changed

+563
-44
lines changed

‎markdowns/foundation/assets.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
index: 6
3+
path: "/foundation/assets"
4+
title: "Assets"
5+
---
6+
Assets are big part of the whole UI system, whether it's an icon, placeholder or an illustration, we use them everywhere. <br>
7+
Load assets groups and easily render them with the _Image_ component.
8+
9+
```jsx
10+
import {Assets, Image} from 'react-native-ui-lib';
11+
12+
Assets.loadAssetsGroup('icons', {
13+
icon1: require('icon1.png'),
14+
icon2: require('icon2.png'),
15+
icon3: require('icon3.png'),
16+
});
17+
18+
// or as a nested group to create your own hierarchy
19+
Assets.loadAssetsGroup('illustrations.placeholders', {
20+
emptyCart: require('emptyCart.png'),
21+
emptyProduct: require('emptyProduct.png'),
22+
});
23+
Assets.loadAssetsGroup('illustrations.emptyStates.', {
24+
noMessages: require('noMessages.png'),
25+
noContacts: require('noContacts.png'),
26+
});
27+
28+
// Use them with the Image component (our Image component)
29+
<Image assetName="icon1"/> // default assetGroup is "icons"
30+
<Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>
31+
32+
// The old fashion way will work as well
33+
<Image source={Assets.icons.icon1}/>
34+
```

‎markdowns/foundation/modifiers.md

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
index: 5
3+
path: "/foundation/modifiers"
4+
title: "Modifiers"
5+
---
6+
As you probably noticed already, we translate our style presets into modifiers.
7+
**Modifiers** will help you create a stunning UI easily and quickly.
8+
9+
**[!IMPORTANT]** <br>
10+
Make sure to use modifiers only on uilib components, some modifiers can cause issues on Android when used on React Native components directly.
11+
12+
## Layout Modifiers
13+
Use our alignment props to quickly position your view's content without getting confused calculating all these flex rules.
14+
- flex - apply `flex:1` on a view
15+
- flex-[value] - When you want to control the flex value
16+
- flexS - FlexShrink
17+
- flexG - FlexGrow
18+
- left
19+
- top
20+
- right
21+
- bottom
22+
- row - change direction to row (default is column)
23+
- center
24+
- centerH - center content horizontally
25+
- centerV - center content vertically
26+
- spread - spread content (similar to `space-between`)
27+
28+
! Notice that the layout modifiers affect the View's children
29+
30+
```
31+
<View flex left>
32+
<Button label="Button">
33+
</View>
34+
35+
<View flex right>
36+
<Button label="Button">
37+
</View>
38+
39+
<View flex top>
40+
<Button label="Button">
41+
</View>
42+
43+
<View flex bottom>
44+
<Button label="Button">
45+
</View>
46+
47+
<View flex center>
48+
<Button label="Button">
49+
</View>
50+
```
51+
<img src="https://cloud.githubusercontent.com/assets/1780255/24798566/4de91efc-1b9f-11e7-9974-e06e3daa7c63.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798569/50dc99a4-1b9f-11e7-8231-fbcbb139a010.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798571/52766d08-1b9f-11e7-95a3-b2b262e81170.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798572/545b7abe-1b9f-11e7-9098-409ceee6ff22.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798575/55e3c4f4-1b9f-11e7-998d-7986a038abb6.png" width="160"/>
52+
53+
## Spacing Modifiers
54+
It's always important to use your margins and paddings correctly, with modifiers it is simpler to do so.
55+
56+
- padding-[value] - will add padding to all corners (e.g. padding-30 will add 30 pt of padding)
57+
- paddingL-[value] - Left padding
58+
- paddingT-[value] - Top padding
59+
- paddingR-[value] - Right padding
60+
- paddingB-[value] - Bottom padding
61+
- paddingH-[value] - Horizontal padding
62+
- paddingV-[value] - Vertical padding
63+
```
64+
<View paddingV-20 paddingH-30>...</View>
65+
```
66+
67+
- margin-[value]
68+
- marginL-[value] - Left margin
69+
- marginT-[value] - Top margin
70+
- marginR-[value] - Right margin
71+
- marginB-[value] - Bottom margin
72+
- marginH-[value] - Horizontal margin
73+
- marginV-[value] - Vertical margin
74+
75+
```
76+
<View marginT-5 marginB-10>...</View>
77+
```
78+
79+
! padding and margin modifiers can also take [Spacing](https://github.com/wix/react-native-ui-lib/blob/master/src/style/spacings.js) constants.
80+
```
81+
<View margin-s5 padding-s2>...</View>
82+
```
83+
## Position Modifiers
84+
Use the position modifiers to quickly set an absolute position to your views
85+
- `abs` will set the absolute position on your View
86+
- `absL`, `absT`, `absR`, `absB` - set the absolute position and align to Left, Top, Right, Botton side accordingly
87+
- `absH` and `absV` - position absolute and stretch horizontally or vertically
88+
- `absF` will set the absolute position and fill the parent view (similar to StyleSheet.absoluteFillObject)
89+
90+
## Styling Modifiers
91+
Last type of modifiers are for styling your components
92+
93+
- [colorKey] - Controls text components' color
94+
- background-[colorKey] (or bg-[colorKey]) - Background color
95+
96+
```
97+
<Text blue30>...</Text>
98+
<View bg-dark70>...</View>
99+
<TouchableOpacity bg-red30/>
100+
```
101+
102+
- [typographyKey] - Controls text components' typography
103+
```
104+
<Text text70>...</Text>
105+
<TextInput text80/>
106+
```
107+
108+
- br[borderRadiusKey] - Set the view's border radius (e.g. `br10`, `br20`, .., `br60`)
109+
```
110+
<View br40>...</View>
111+
```
112+
113+
114+
! all styling modifiers are based on our [`Colors` & `Typography` presets](https://github.com/wix/react-native-ui-lib/wiki/STYLE). <br>
115+
You can load your own presets and use them as modifiers.
116+
117+
118+
119+
Check out [this example](./USAGE) where we use most of these props

‎markdowns/foundation/style.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
index: 4
3+
path: "/foundation/style"
4+
title: "Style"
5+
---
6+
The base foundation of each UI component is its style.
7+
We use basic style presets to define the rules and the style guide we follow.
8+
9+
Our presets includes: **Colors**, **Typography**, **Shadows**, **Border Radius** and more..
10+
11+
The UILib already comes with a set of predefined constants and [presets](../tree/master/src/style).
12+
13+
You can easily use it anywhere in your code as you would have used any other constant value, or as a component modifier.
14+
15+
It's also very easy to define your own presets..
16+
17+
```jsx
18+
import {Typography, Colors} from 'react-native-ui-lib';
19+
20+
Colors.loadColors({
21+
pink: '#FF69B4',
22+
gold: '#FFD700',
23+
});
24+
25+
Typography.loadTypographies({
26+
h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
27+
h2: {fontSize: 46, fontWeight: '300', lineHeight: 64},
28+
});
29+
```
30+
31+
and so for example, the following line
32+
33+
```jsx
34+
<Text h1 pink>Hello World</Text>
35+
```
36+
Will generate this text
37+
<img src="https://cloud.githubusercontent.com/assets/1780255/24792314/296b7ebc-1b86-11e7-8580-9252d1ddf5d9.png" width="250"/>
38+
39+
It will use the _h1_ preset for typography and the _pink_ color value we set to style the Text element.

‎markdowns/foundation/theme-manager.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
index: 7
3+
path: "/foundation/theme-manager"
4+
title: "Theme Manager"
5+
---
6+
Use the `ThemeManager` to set default global behaviour for your app.
7+
8+
**setComponentTheme**
9+
10+
Set default props for a component by passing an object or a callback (for dynamic, runtime default props)
11+
12+
- `ThemeManager.setComponentTheme(componentName, defaultPropsObject);`
13+
- `ThemeManager.setComponentTheme(componentName, componentProps => newDefaultPropsObject);`
14+
15+
example
16+
17+
```
18+
import {ThemeManager} from 'react-native-ui-lib';
19+
20+
ThemeManager.setComponentTheme('Text', {
21+
text70: true, // will set the text70 typography modifier prop to be true by default
22+
dark10: true, // will set the dark10 color modifier prop to be true by default
23+
});
24+
25+
26+
ThemeManager.setComponentTheme('Button', (props, context) => {
27+
28+
return {
29+
backgroundColor: props.outline ? 'black' : 'green' , // this will apply a different backgroundColor depends if the Button is an outline or not
30+
};
31+
});
32+
```
33+
34+

‎markdowns/getting-started/setup.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
index: 1
3+
path: "/getting-started/setup"
4+
title: "Setup"
5+
---
6+
7+
## Install uilib
8+
9+
First, run `npm install react-native-ui-lib`
10+
11+
And then, install **peer dependencies**
12+
13+
```
14+
npm i react-native-gesture-handler react-native-reanimated @react-native-community/blur @react-native-community/datetimepicker @react-native-community/netinfo
15+
16+
cd ios && pod install
17+
```
18+
19+
## Install Native Dependencies (must)
20+
21+
Some of the components are using these native dependencies, they are defined as peer dependencies so you can install the version that suit you.
22+
23+
- "react-native-gesture-handler": ">=1.5.0",
24+
- "react-native-reanimated": ">=1.4.0",
25+
- "@react-native-community/blur": ">=3.4.1",
26+
- ~~"react-native-interactable": ">=2.0.0"~~ (No Need in >=V5.0.0)
27+
- "@react-native-community/datetimepicker": "^2.1.0"
28+
- @react-native-community/netinfo": "^5.6.2
29+
30+
## Demo App
31+
32+
Our demo app is located [here](https://github.com/wix/react-native-ui-lib/tree/master/demo).
33+
34+
To run it:
35+
36+
- install dependencies: `npm install`
37+
- start the packager: `npm start`
38+
- run: `react-native run-ios` or `react-native run-android` (or within Xcode or Android Studio)

‎markdowns/getting-started/usage.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
index: 2
3+
path: "/getting-started/usage"
4+
title: "Usage"
5+
---
6+
This is a quick example of how to use our basic components, modifiers and presets to generate a good looking screen. <br>
7+
For detailed information please go over the other sections: Style, Modifiers, Components...
8+
9+
<img style="float: right; margin-top: -70px" src="https://cloud.githubusercontent.com/assets/1780255/24791489/f5db80f4-1b82-11e7-8538-5a3388fb4345.png" width=300 />
10+
11+
```jsx
12+
import React, {Component} from 'react';
13+
import {View, TextInput, Text, Button} from 'react-native-ui-lib';
14+
15+
export default class Example extends Component {
16+
17+
render() {
18+
return (
19+
<View flex paddingH-25 paddingT-120>
20+
<Text blue50 text20>Welcome</Text>
21+
<TextInput text50 placeholder="username" dark10/>
22+
<TextInput text50 placeholder="password" secureTextEntry dark10/>
23+
<View marginT-100 center>
24+
<Button text70 white background-orange30 label="Login"/>
25+
<Button link text70 orange30 label="Sign Up" marginT-20/>
26+
</View>
27+
</View>
28+
);
29+
}
30+
}
31+
```

‎markdowns/getting-started/v5.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
index: 3
3+
path: "/getting-started/v5"
4+
title: "v5"
5+
---
6+
## `[email protected]`
7+
8+
### Presets Updates
9+
10+
- **Typography** - Now provide a full set of typographies in all weights
11+
- **Colors**
12+
- **Spacings** - unified both platforms to the same spacing presets (multiples of 4s)
13+
14+
---
15+
16+
### Components
17+
18+
#### AnimatedImage
19+
props change:
20+
- `imageSource` => `source`
21+
- `imageStyle` => `style`
22+
- `testId` => `testID`
23+
24+
#### AnimatedScanner
25+
props change:
26+
`progress` accepts number instead of `Animated.Value`
27+
28+
#### Button
29+
props change:
30+
- `containerStyle` => `style`
31+
32+
#### Dialog
33+
Old implementation was deprecated. See new [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js)
34+
35+
#### TextInput
36+
Component renamed to `TextField` and now enhanced with more form capabilities like validations. <br>
37+
`<TextField placeholder="Enter email" validate="email" errorMessage="Email is invalid" />`
38+
39+
#### RadioGroup
40+
props change:
41+
- `value` => `initialValue`
42+
43+
#### Toast
44+
Implementation had slightly changed, please see [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ToastsScreen.js)
45+
- `relative` value for `position` prop was removed
46+
- Blur effect is not part of the component
47+
48+
#### TabBar
49+
Implementation had slightly changed, please see [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.js)
50+
51+
#### ListItem
52+
Component not supporting animation out of the box (animatable wrapper was removed)
53+
54+
#### LoaderScreen
55+
Remove `animationProps`.
56+
57+
#### Drawer
58+
Component implementation was completely changed and using `react-native-gesture-handler` as its base infrastructure instead of `react-native-interactable`
59+
Please see [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/interactableComponentScreens/DrawerScreen.js)
60+
61+
#### Carousel
62+
Component API and implementation has changed.
63+
Now supports non full-page carousel and better way of rendering Carousel children.
64+
65+
Please refer our [Docs](https://wix.github.io/react-native-ui-lib/) to learn on the new API.
66+
67+
---
68+
### Removed Dependencies
69+
- react-native-interactable
70+
71+
### New Peer Dependencies (those should be installed separately)
72+
- `react-native-reanimated`
73+
- `react-native-gesture-handler`
74+
- `@react-native-community/blur`
75+
- `@react-native-community/datetimepicker`
76+
77+
---
78+
79+
### Removed components
80+
81+
- `MultipleShadow`
82+
- `Tour`
83+
- `Notification`
84+
- `CardItem`
85+
- `CardSection`

0 commit comments

Comments
 (0)