Skip to content

Commit da53cf1

Browse files
ethansharethanshar
authored
Docs/landing page (#3677)
* Enhance landing page with options, improve code section * bump version to 3.23 * Add fallback to stars count
1 parent 2b6dc31 commit da53cf1

File tree

12 files changed

+103
-156
lines changed

12 files changed

+103
-156
lines changed

‎docuilib/docusaurus.config.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@ const darkCodeTheme = themes.dracula;
2020
docsMainEntry: 'getting-started/setup',
2121
docsDevelopmentVersion: 'next',
2222
expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack',
23-
stars: '4.7'
23+
landingPage: {
24+
sections: ['components', 'features', 'code', 'libraries'],
25+
mainSectionTitle: 'RNUI is a UI Toolset & Components Library for React Native',
26+
showStars: true,
27+
stars: '6.8',
28+
showExpoButton: true
29+
}
2430
},
2531
plugins: ['docusaurus-plugin-sass', '@docusaurus/theme-live-codeblock', './plugins/uilib.js'],
2632
presets: [

‎docuilib/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "uilib-docs",
3-
"version": "3.22.0",
3+
"version": "3.23.0",
44
"main": "./src/index.ts",
55
"scripts": {
66
"docusaurus": "docusaurus",

‎docuilib/src/components/CodeSection.module.scss

Lines changed: 2 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,70 +4,5 @@
44
padding-bottom: 5%;
55
display: flex;
66
flex-direction: column;
7-
align-items: center;
8-
9-
.headline {
10-
text-align: center;
11-
}
12-
13-
.codeExample {
14-
display: flex;
15-
flex-direction: column;
16-
width: 80vw;
17-
18-
@include desktop {
19-
width: 55vw;
20-
}
21-
22-
.docsButton {
23-
margin-top: 40px;
24-
align-self: center;
25-
}
26-
}
27-
28-
.tabs {
29-
display: flex;
30-
border: 1px solid;
31-
height: 32px;
32-
33-
@include desktop {
34-
height: 46px;
35-
}
36-
37-
.tab {
38-
flex: 1;
39-
display: flex;
40-
align-items: center;
41-
justify-content: center;
42-
cursor: pointer;
43-
font-size: 0.8em;
44-
transition: 0.2s all;
45-
46-
&:not(:last-child) {
47-
border-right: 1px solid;
48-
}
49-
}
50-
.tabSelected {
51-
background-color: $black;
52-
color: $white;
53-
}
54-
}
55-
56-
.tabPage {
57-
pre {
58-
background-color: $dark10;
59-
padding: 20px;
60-
width: 100%;
61-
}
62-
63-
.tabPageDescription {
64-
font-size: 1.2em;
65-
margin-top: 10px;
66-
}
67-
68-
.tabPageCode {
69-
color: $white;
70-
}
71-
}
72-
73-
}
7+
margin: 10vw;
8+
}

‎docuilib/src/components/CodeSection.tsx

Lines changed: 30 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,39 @@
1-
import React, {useState} from 'react';
2-
import Link from '@docusaurus/Link';
3-
import classnames from 'classnames';
4-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5-
6-
import {foundationSnippet, themeSnippet, modifiersSnippet} from './CodeSectionSnippets';
1+
import React from 'react';
72
import styles from './CodeSection.module.scss';
8-
9-
const tabs = [
10-
{headline: `Define your app's foundation - colors, typography and spacings`, codeSnippet: foundationSnippet},
11-
{headline: `Set a theme for your components.`, codeSnippet: themeSnippet},
12-
{
13-
headline: `Build your app. With our auto-generated modifiers, it's a matter of minutes till you create your first beautiful screen.`,
14-
codeSnippet: modifiersSnippet
15-
}
16-
];
3+
import UILivePreview from './UILivePreview';
174

185
export default () => {
19-
const [selectedTab, setSelectedTab] = useState(0);
20-
const {siteConfig} = useDocusaurusContext();
21-
const {docsMainEntry} = siteConfig.customFields;
6+
const code = `
7+
Colors.loadColors({
8+
$backgroundDefault: Colors.purple80,
9+
}),
10+
ThemeManager.setComponentTheme('Button', {
11+
backgroundColor: Colors.orange30,
12+
}),
13+
ThemeManager.setComponentTheme('TextField', {
14+
preset: 'outline',
15+
fieldStyle: {borderColor: Colors.orange30}
16+
}),
17+
function LiveExample(props) {
18+
return (
19+
<View flex padding-s5 centerV bg-$backgroundDefault>
20+
<View flex center>
21+
<Text text50>Welcome</Text>
22+
</View>
23+
<View flex gap-s4>
24+
<TextField label="Username" placeholder="Enter username" />
25+
<TextField label="Password" placeholder="Enter password" helperText="1-8 characters" secureTextEntry/>
26+
<Button label="Login" />
27+
</View>
28+
</View>
29+
);
30+
};
2231
23-
return (
24-
<div className={styles.codeSection}>
25-
<h2 className={styles.headline}>Effortless App Building Using Our Toolset</h2>
26-
<div className={styles.codeExample}>
27-
<TabBar onChangeIndex={setSelectedTab} selectedIndex={selectedTab}/>
28-
<Tab {...tabs[selectedTab]}/>
29-
<Link className={styles.docsButton} to={`docs/${docsMainEntry}`}>
30-
<button className={'button dark'}>View Docs</button>
31-
</Link>
32-
</div>
33-
</div>
34-
);
35-
};
32+
`;
3633

37-
const TabBar = ({onChangeIndex, selectedIndex}) => {
3834
return (
39-
<div className={styles.tabs}>
40-
{['Foundation', 'Theme', 'Modifiers'].map((title, index) => {
41-
const tabClassName = classnames(styles.tab, {[`${styles.tabSelected}`]: selectedIndex === index});
42-
return (
43-
<div
44-
key={title}
45-
className={tabClassName}
46-
onClick={() => onChangeIndex(index)}
47-
onKeyPress={() => onChangeIndex(index)}
48-
role="tab"
49-
tabIndex={index}
50-
>
51-
{title}
52-
</div>
53-
);
54-
})}
55-
</div>
56-
);
57-
};
58-
59-
const Tab = ({headline, codeSnippet}) => {
60-
return (
61-
<div className={styles.tabPage}>
62-
<p className={styles.tabPageDescription}>{headline}</p>
63-
<pre>
64-
<code className={styles.tabPageCode}>{codeSnippet}</code>
65-
</pre>
35+
<div className={styles.codeSection}>
36+
<UILivePreview code={code} liveScopeSupport/>
6637
</div>
6738
);
6839
};

‎docuilib/src/components/ComponentPage.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ export default function ComponentPage({component}) {
9090
return <Section section={section} component={component}/>;
9191
}
9292
};
93-
9493
return (
9594
<div>
9695
{buildHero()}

‎docuilib/src/components/ComponentsSection.module.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
flex-direction: column;
77
align-items: center;
88
width: 100%;
9+
padding-top: 80px;
910
padding-left: 40px;
1011
padding-right: 40px;
11-
12+
1213
.componentsInner {
1314
text-align: center;
1415
display: flex;

‎docuilib/src/components/MainSection.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
margin-bottom: 10px;
9898

9999
@include desktop() {
100-
margin-right: 10px;
100+
margin-right: 40px;
101101
margin-bottom: 0;
102102
}
103103
}

‎docuilib/src/components/MainSection.tsx

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
55
import styles from './MainSection.module.scss';
66
import mainCover from '@site/static/img/mainCover.jpg';
77
import GoldStarSvg from '@site/static/img/goldStar.svg';
8+
import useLandingPageOptions from '../hooks/useLandingPageOptions';
89

910
const STARS_COUNT_KEY = 'starsCount';
1011

1112
export default () => {
1213
const {siteConfig} = useDocusaurusContext();
1314
const {expoSnackLink, docsMainEntry, docsDevelopmentVersion} = siteConfig.customFields;
14-
const [starsCount, setStarsCount] = useState(localStorage.getItem(STARS_COUNT_KEY) ?? siteConfig.customFields.stars);
15+
const {showExpoButton, mainSectionTitle, showStars, stars} = useLandingPageOptions();
16+
const [starsCount, setStarsCount] = useState(localStorage.getItem(STARS_COUNT_KEY) ?? stars);
1517

1618
useEffect(() => {
1719
fetchStarsCount();
@@ -20,8 +22,7 @@ export default () => {
2022
const fetchStarsCount = async () => {
2123
const response = await fetch('https://api.github.com/repos/wix/react-native-ui-lib');
2224
const data = await response.json();
23-
const _starsCount = (data.stargazers_count / 1000).toFixed(1);
24-
25+
const _starsCount = data.stargazers_count ? (data.stargazers_count / 1000).toFixed(1) : starsCount;
2526

2627
localStorage.setItem(STARS_COUNT_KEY, _starsCount.toString());
2728
setStarsCount(_starsCount);
@@ -32,21 +33,30 @@ export default () => {
3233
<img src={mainCover} alt="showcase" className={styles.mainCover}/>
3334
<div className={styles.mainContent}>
3435
<p>
35-
<span className={styles.libName}>RNUI</span> is a UI Toolset & Components Library for React Native
36+
{mainSectionTitle}
37+
{/* <span className={styles.libName}>RNUI</span> is a UI Toolset & Components Library for React Native */}
3638
</p>
37-
<div className={styles.gitStars}>
38-
<GoldStarSvg width={16} height={16} style={{margin: 4}}/>
39-
<span>{starsCount}k</span>
40-
</div>
39+
{showStars && (
40+
<div className={styles.gitStars}>
41+
<GoldStarSvg width={16} height={16} style={{margin: 4}}/>
42+
<span>{starsCount}k</span>
43+
</div>
44+
)}
4145

4246
<div className={styles.buttons}>
43-
<Link to={`/docs/${(location.hostname === 'localhost' && docsDevelopmentVersion) ? `${docsDevelopmentVersion}/` : ''}${docsMainEntry}`}>
44-
<button className={'button dark'}>View Docs</button>
47+
<Link
48+
to={`/docs/${
49+
location.hostname === 'localhost' && docsDevelopmentVersion ? `${docsDevelopmentVersion}/` : ''
50+
}${docsMainEntry}`}
51+
>
52+
<button className={'button dark'}>View Documentation</button>
4553
</Link>
4654

47-
<a href={expoSnackLink} target="_blank" rel="noopener noreferrer">
48-
<button className={'button'}>Expo-Snack Demo</button>
49-
</a>
55+
{showExpoButton && (
56+
<a href={expoSnackLink} target="_blank" rel="noopener noreferrer">
57+
<button className={'button'}>Expo-Snack Demo</button>
58+
</a>
59+
)}
5060
</div>
5161
</div>
5262
</div>

‎docuilib/src/css/components.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
border: 0;
55
min-width: 180px;
66
padding: 12px 24px;
7-
border-radius: 100px;
8-
font-size: var(--text40);
7+
border-radius: 0;
8+
font-size: 20px;
99
font-weight: 500;
1010
background-color: var(--white);
1111
color: var(--black);

‎docuilib/src/hooks/useLandingPageOptions.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
2+
3+
export interface LandingPageOptions {
4+
sections: string[];
5+
mainSectionTitle: string;
6+
showStars: boolean;
7+
stars: number;
8+
showExpoButton: boolean;
9+
}
10+
11+
export const useLandingPageOptions = () => {
12+
const {siteConfig} = useDocusaurusContext();
13+
const landingPage = siteConfig.customFields.landingPage as LandingPageOptions;
14+
15+
return landingPage;
16+
};
17+
18+
export default useLandingPageOptions;

‎docuilib/src/pages/index.tsx

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,27 @@ import ComponentsSection from '../components/ComponentsSection';
1010
import FeaturesSection from '../components/FeaturesSection';
1111
import CodeSection from '../components/CodeSection';
1212
import LibrariesSection from '../components/LibrariesSection';
13+
import useLandingPageOptions from '../hooks/useLandingPageOptions';
1314

1415
export default function Home(): JSX.Element {
15-
// const {siteConfig} = useDocusaurusContext();
16+
const {sections} = useLandingPageOptions();
17+
1618
return (
1719
<Layout
1820
/* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
1921
>
20-
<main>
21-
{/* Note: BrowserOnly allows using `localStorage` in MainSection, otherwise docusaurus build fail */}
22-
<BrowserOnly>{() => <MainSection/>}</BrowserOnly>
23-
<ComponentsSection/>
24-
<FeaturesSection/>
25-
<CodeSection/>
26-
<LibrariesSection/>
27-
</main>
22+
{/* Note: BrowserOnly allows using `localStorage` in MainSection, otherwise docusaurus build fail */}
23+
<BrowserOnly>
24+
{() => (
25+
<main>
26+
<MainSection/>
27+
{sections.includes('components') && <ComponentsSection/>}
28+
{sections.includes('features') && <FeaturesSection/>}
29+
{sections.includes('code') && <CodeSection/>}
30+
{sections.includes('libraries') && <LibrariesSection/>}
31+
</main>
32+
)}
33+
</BrowserOnly>
2834
</Layout>
2935
);
3036
}

‎docuilib/src/theme/ReactLiveScope/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import products from '../../assets/data/products';
3-
import {Colors} from 'react-native-ui-lib/style';
3+
import {Colors, ThemeManager} from 'react-native-ui-lib/style';
44
import {BorderRadiuses, Button, Image, Spacings, Text, TouchableOpacity, View} from 'react-native-ui-lib/core';
55
import ActionBar from 'react-native-ui-lib/actionBar';
66
import Assets from 'react-native-ui-lib/assets';
@@ -106,6 +106,7 @@ const ReactLiveScope = {
106106
Switch,
107107
Text,
108108
TextField,
109+
ThemeManager,
109110
Timeline,
110111
TouchableOpacity,
111112
View,

0 commit comments

Comments
 (0)