Skip to content

Commit a03a689

Browse files
ethansharethanshar
committed
update our docs site
1 parent f09686d commit a03a689

File tree

7 files changed

+259
-13
lines changed

7 files changed

+259
-13
lines changed

‎uilib-docs/src/images/examples/actionSheet.png

33.2 KB
Loading

‎uilib-docs/src/images/examples/datepicker.png

64.5 KB
Loading

‎uilib-docs/src/images/examples/rtl.png

48.3 KB
Loading

‎uilib-docs/src/pages/index.js

Lines changed: 143 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,160 @@
11
import React from 'react';
22
import Link from 'gatsby-link';
33

4-
import mainLogo from '../images/logo_big.png';
54
import './index.scss';
65
import Layout from '../components/layout';
6+
import mainLogo from '../images/logo_big.png';
7+
import datePicker from '../images/examples/datepicker.png';
8+
import actionSheet from '../images/examples/actionSheet.png';
9+
import rtl from '../images/examples/rtl.png';
710

8-
const IndexPage = (props) => {
11+
const IndexPage = props => {
912
return (
1013
<Layout {...props}>
1114
<div className="main-page">
12-
<div className="logo-box">
13-
<img className="logo" src={mainLogo} alt="main-logo"/>
15+
<div className="main-section">
16+
<div className="logo-box">
17+
<img className="logo" src={mainLogo} alt="main-logo"/>
1418

15-
<Link className="docs-button" to="/docs/">
16-
Enter Docs
17-
</Link>
19+
<Link className="docs-button" to="/docs/">
20+
Enter Docs
21+
</Link>
22+
23+
<p className="description">UI Toolset & Components Library for React Native</p>
24+
</div>
1825
</div>
26+
<PlatformSection/>
27+
<ToolsetSection/>
28+
<NativeSection/>
29+
<OthersSection/>
1930
</div>
2031
</Layout>
2132
);
2233
};
2334

35+
const PlatformSection = () => {
36+
return (
37+
<div className="platforms-section">
38+
<div>
39+
<img height="500" src={datePicker} style={{zIndex: 10}}/>
40+
<img height="400" src={actionSheet}/>
41+
</div>
42+
<div>
43+
<h1>A Cross-Platform Components Library</h1>
44+
<p>
45+
Building a cross-platform app can be time consuming especially when one needs to find solutions that suit each
46+
platform. While React Native solve this issue, still, some components originated from one platform and don't
47+
exist in the other.
48+
</p>
49+
<p>
50+
<b>ActionSheet</b> is a good example of an iOS component that just does not exist on Android.{' '}
51+
<b>DatePicker</b> has a different API and behavior for each platform instead of unified component.
52+
</p>
53+
<p>The UILIB aims to solve that.</p>
54+
</div>
55+
</div>
56+
);
57+
};
58+
59+
const ToolsetSection = () => {
60+
return (
61+
<div className="toolset-section">
62+
<h1>Toolset for Building Amazing Apps with No Effort</h1>
63+
<p>
64+
<h3>Step 1</h3> Define your app base foundation. Things like colors, typography and spacings.
65+
</p>
66+
<div className="code-examples">
67+
<code>
68+
{`import {Colors} from 'react-native-ui-lib';\n
69+
Colors.loadColors({\n primaryColor: '#2364AA',\n secondaryColor: '#81C3D7',\n textColor: '#221D23',\n errorColor: '#E63B2E',\n successColor: '#ADC76F',\n warnColor: '#FF963C'\n});`}
70+
</code>
71+
<code>
72+
{`import {Typography} from 'react-native-ui-lib';\n\nTypography.loadTypographies({\n heading: {fontSize: 36, fontWeight: '600'},\n subheading: {fontSize: 28, fontWeight: '500'},\n body: {fontSize: 18, fontWeight: '400'} \n});`}
73+
</code>
74+
<code>{`import {Spacings} from 'react-native-ui-lib';\n\nSpacings.loadSpacings({\n page: 20,\n card: 12,\n gridGutter: 16 \n});`}</code>
75+
</div>
76+
<p>
77+
<h3>Step 2</h3> Set a theme for your components.
78+
</p>
79+
<div className="code-examples">
80+
<code>
81+
{`import {ThemeManager} from 'react-native-ui-lib';\n
82+
// with plain object \nThemeManager.setComponentTheme('Card', {\n borderRadius: 8,\n activeOpacity: 0.9 \n});`}
83+
</code>
84+
<code>
85+
{`// with a dynamic function
86+
ThemeManager.setComponentTheme('Button', (props, context) => {
87+
// 'square' is not an original Button prop, but a custom prop that can
88+
// be used to create different variations of buttons in your app
89+
if (props.square) {
90+
return {
91+
borderRadius: 0
92+
};
93+
}
94+
});`}
95+
</code>
96+
</div>
97+
<p>
98+
<h3>Step 3</h3> Build your app. With our auto-generated modifiers, it's a matter of minutes till you create your
99+
first beautiful screen.
100+
</p>
101+
<div className="code-examples">
102+
<code>
103+
{`import React, {Component} from 'react';
104+
import {View, Text, Card, Button} from 'react-native-ui-lib';
105+
106+
class MyScreen extends Component {
107+
render() {
108+
return (
109+
<View flex padding-page>
110+
<Text heading marginB-s4>My Screen</Text>
111+
<Card height={100} center padding-card marginB-s4>
112+
<Text body>This is an example card </Text>
113+
</Card>
114+
115+
<Button label="Button" body bg-primaryColor square></Button>
116+
</View>
117+
);
118+
}
119+
}`}
120+
</code>
121+
</div>
122+
</div>
123+
);
124+
};
125+
126+
const NativeSection = () => {
127+
return (
128+
<div className="native-section">
129+
<h2>True, Beautiful components</h2>
130+
<p>
131+
Basic components like <b>Button</b>, <b>Avatar</b> and <b>Card</b> and more sophisticated ones like <b>Hints</b>
132+
, <b>ColorPicker</b> and <b>Drawer</b>
133+
</p>
134+
<div className="image-examples">
135+
<img src="https://user-images.githubusercontent.com/1780255/72094962-3044b280-3320-11ea-8e41-aa83743bafb9.gif"/>
136+
<img src="https://user-images.githubusercontent.com/1780255/72094961-3044b280-3320-11ea-95e2-9aa745c8b07d.gif"/>
137+
<img src="https://user-images.githubusercontent.com/1780255/72094959-2fac1c00-3320-11ea-952b-53f864fd7ea4.gif"/>
138+
<img src="https://user-images.githubusercontent.com/1780255/72094958-2fac1c00-3320-11ea-8f67-9d759cfa4ae1.gif"/>
139+
<img src="https://user-images.githubusercontent.com/1780255/72094957-2fac1c00-3320-11ea-86a6-e47cf78093ec.gif"/>
140+
<img src="https://user-images.githubusercontent.com/1780255/72094955-2f138580-3320-11ea-811e-a808d90e7ff0.gif"/>
141+
</div>
142+
</div>
143+
);
144+
};
145+
146+
const OthersSection = () => {
147+
return (
148+
<div className="support-section">
149+
<div>
150+
<h2>RTL and Accessibility in Mind</h2>
151+
<p>We provide full out-of-the-box support to RTL and Accessibility</p>
152+
</div>
153+
<div>
154+
<img src={rtl} height="500"/>
155+
</div>
156+
</div>
157+
);
158+
};
159+
24160
export default IndexPage;

‎uilib-docs/src/pages/index.scss

Lines changed: 102 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,115 @@
11
@import "src/styles/constants";
22

33
.main-page {
4-
height: 100%;
4+
// height: 100%;
55
display: flex;
6-
background: $primary;
6+
flex-direction: column;
7+
padding-bottom: 20px;
8+
9+
.main-section {
10+
background: $primary;
11+
width: 100%;
12+
height: 70vh;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
17+
.description {
18+
font-size: $text10;
19+
color: $white;
20+
}
21+
}
22+
23+
.platforms-section {
24+
background: $dark80;
25+
color: $dark10;
26+
width: 100%;
27+
margin-top: 20px;
28+
display: flex;
29+
padding: 40px 0;
30+
31+
> div:first-child {
32+
display: flex;
33+
flex: 1;
34+
height: 100%;
35+
background: $dark80;
36+
padding: 20px 10px;
37+
justify-content: space-evenly;
38+
align-items: center;
39+
}
40+
41+
> div:nth-child(2) {
42+
width: 40%;
43+
border-right: 1px solid $white;
44+
padding: 40px;
45+
}
46+
}
47+
48+
.toolset-section {
49+
margin-top: 20px;
50+
display: flex;
51+
flex-direction: column;
52+
align-items: center;
53+
text-align: center;
54+
padding: 40px;
55+
background: $violet20;
56+
color: $white;
57+
58+
.code-examples {
59+
display: flex;
60+
align-items: flex-start;
61+
62+
code {
63+
display: inline-block;
64+
white-space: pre;
65+
text-align: left;
66+
background: $dark10;
67+
padding: 10px;
68+
margin-right: 10px;
69+
font-size: $text40;
70+
line-height: 1.4;
71+
}
72+
}
73+
}
74+
75+
.native-section {
76+
padding: 40px;
77+
text-align: center;
78+
79+
> .image-examples {
80+
display: flex;
81+
justify-content: space-evenly;
82+
83+
img {
84+
height: 500px;
85+
}
86+
}
87+
}
88+
89+
.support-section {
90+
display: flex;
91+
padding: 40px;
92+
background: $dark20;
93+
color: $white;
94+
95+
> div:first-child {
96+
width: 25%;
97+
}
98+
99+
> div:nth-child(2) {
100+
padding-left: 20px;
101+
}
102+
}
7103

8104
.logo-box {
9105
display: flex;
10106
flex-direction: column;
11107
align-items: center;
12108
justify-content: center;
13-
position: absolute;
14-
top: 50%;
15-
left: 50%;
16-
transform: translate(-50%, -50%);
109+
// position: absolute;
110+
// top: 50%;
111+
// left: 50%;
112+
// transform: translate(-50%, -50%);
17113
text-align: center;
18114

19115
.logo {

‎uilib-docs/src/styles/components.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
h1 {
2+
font-weight: 300;
3+
}
4+
5+
h4 {
6+
font-weight: 500;
7+
}
8+
9+
p {
10+
font-size: $text30;
11+
letter-spacing: 1.7px;
12+
}

‎uilib-docs/src/styles/global.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');
22
@import "src/styles/constants";
3+
@import "src/styles/components";
34

45
html,
56
body {
@@ -32,3 +33,4 @@ a {
3233
color: $violet20;
3334
text-decoration: none;
3435
}
36+

0 commit comments

Comments
 (0)