Skip to content

Commit f48d92b

Browse files
ethansharM-i-k-e-l
ethanshar
and
M-i-k-e-l
authored
Refactor uilib docs (#761)
* move configurations and page creators to separate files * sort markdown pages by index * css cleanups * change modifiers link to our internal page * remove vertical padding in content pages * remove weird background color in intro page * change docs link to getting_started/setup * Update markdowns/getting-started/setup.md Co-authored-by: Miki <[email protected]> Co-authored-by: Miki <[email protected]>
1 parent bf4cb28 commit f48d92b

File tree

18 files changed

+212
-196
lines changed

18 files changed

+212
-196
lines changed

‎markdowns/getting-started/setup.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,6 @@ Our demo app is located [here](https://github.com/wix/react-native-ui-lib/tree/m
3434
To run it:
3535

3636
- install dependencies: `npm install`
37+
- (for iOS) `cd ios && pod install && cd ..`
3738
- start the packager: `npm start`
3839
- run: `react-native run-ios` or `react-native run-android` (or within Xcode or Android Studio)

‎uilib-docs/configurations/pageCreators/createComponentPages.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const path = require('path');
2+
3+
module.exports = async ({graphql, boundActionCreators}) => {
4+
const {createPage} = boundActionCreators;
5+
6+
const result = await graphql(`
7+
{
8+
allComponentMetadata {
9+
edges {
10+
node {
11+
displayName
12+
docblock
13+
description {
14+
text
15+
}
16+
props {
17+
name
18+
type {
19+
name
20+
}
21+
description {
22+
text
23+
}
24+
defaultValue {
25+
value
26+
}
27+
}
28+
}
29+
}
30+
}
31+
}
32+
`);
33+
// create docs intro page
34+
createPage({
35+
path: `/docs`,
36+
component: path.resolve('./src/templates/component.js'),
37+
context: {
38+
// Data passed to context is available in page queries as GraphQL variables.
39+
}
40+
});
41+
42+
// Create components pages
43+
result.data.allComponentMetadata.edges.map(({node}) => {
44+
createPage({
45+
path: `/docs/${node.displayName}`,
46+
component: path.resolve('./src/templates/component.js'),
47+
context: {
48+
// Data passed to context is available in page queries as GraphQL variables.
49+
componentNode: node,
50+
components: result.data.allComponentMetadata.edges
51+
}
52+
});
53+
});
54+
};

‎uilib-docs/configurations/pageCreators/createMarkdownPages.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const path = require('path');
2+
3+
module.exports = async ({graphql, boundActionCreators}) => {
4+
const {createPage} = boundActionCreators;
5+
const result = await graphql(`
6+
{
7+
allFile(filter: {sourceInstanceName: {eq: "markdown-pages"}}) {
8+
edges {
9+
node {
10+
id
11+
name
12+
childMarkdownRemark {
13+
fileAbsolutePath
14+
frontmatter {
15+
index
16+
title
17+
path
18+
}
19+
}
20+
}
21+
}
22+
}
23+
}
24+
`);
25+
26+
result.data.allFile.edges.forEach(({node}) => {
27+
createPage({
28+
name: node.name,
29+
path: node.childMarkdownRemark.frontmatter.path,
30+
component: path.resolve(`src/templates/markdownTemplate.js`),
31+
context: {} // additional data can be passed via context
32+
});
33+
});
34+
};

‎uilib-docs/configurations/pageCreators/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
createMarkdownPages: require('./createMarkdownPages'),
3+
createComponentPages: require('./createComponentPages')
4+
};

‎uilib-docs/configurations/plugins.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const manifestPlugin = [
2+
{
3+
resolve: `gatsby-plugin-manifest`,
4+
options: {
5+
name: `React Native UI Library`,
6+
short_name: `RNUILIB`,
7+
start_url: `/`,
8+
// background_color: `#663399`,
9+
// theme_color: `#663399`,
10+
display: `minimal-ui`,
11+
icon: `src/images/logo.png` // This path is relative to the root of the site.
12+
}
13+
}
14+
];
15+
16+
const markdownPagesPlugin = [
17+
{
18+
resolve: `gatsby-source-filesystem`,
19+
options: {
20+
name: `markdown-pages`,
21+
path: `${__dirname}/../../markdowns/`
22+
}
23+
},
24+
`gatsby-transformer-remark`
25+
];
26+
27+
const componentsDocgenPlugin = [
28+
'gatsby-transformer-react-docgen',
29+
{
30+
resolve: 'gatsby-source-filesystem',
31+
options: {
32+
path: `${__dirname}/../../src/components/`
33+
}
34+
}
35+
];
36+
37+
const imagesPlugin = [
38+
{
39+
resolve: `gatsby-source-filesystem`,
40+
options: {
41+
name: `images`,
42+
path: `src/images`
43+
}
44+
},
45+
`gatsby-transformer-sharp`,
46+
`gatsby-plugin-sharp`
47+
];
48+
49+
module.exports = {
50+
manifestPlugin,
51+
markdownPagesPlugin,
52+
componentsDocgenPlugin,
53+
imagesPlugin
54+
};

‎uilib-docs/gatsby-config.js

Lines changed: 6 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const {manifestPlugin, markdownPagesPlugin, componentsDocgenPlugin, imagesPlugin} = require('./configurations/plugins');
2+
13
module.exports = {
24
pathPrefix: '/react-native-ui-lib',
35
siteMetadata: {
@@ -6,50 +8,12 @@ module.exports = {
68
author: `@gatsbyjs`
79
},
810
plugins: [
9-
{
10-
resolve: `gatsby-source-filesystem`,
11-
options: {
12-
name: `markdown-pages`,
13-
path: `${__dirname}/../markdowns/`
14-
}
15-
},
16-
`gatsby-transformer-remark`,
1711
`gatsby-plugin-react-helmet`,
1812
`gatsby-plugin-sass`,
19-
'gatsby-transformer-react-docgen',
20-
{
21-
resolve: 'gatsby-source-filesystem',
22-
options: {
23-
path: `${__dirname}/../src/components/`
24-
}
25-
},
26-
// {
27-
// resolve: 'gatsby-source-filesystem',
28-
// options: {
29-
// path: `${__dirname}/../src/incubator/`
30-
// }
31-
// },
32-
{
33-
resolve: `gatsby-source-filesystem`,
34-
options: {
35-
name: `images`,
36-
path: `${__dirname}/src/images`
37-
}
38-
},
39-
`gatsby-transformer-sharp`,
40-
`gatsby-plugin-sharp`,
41-
{
42-
resolve: `gatsby-plugin-manifest`,
43-
options: {
44-
name: `gatsby-starter-default`,
45-
short_name: `starter`,
46-
start_url: `/`,
47-
background_color: `#663399`,
48-
theme_color: `#663399`,
49-
display: `minimal-ui`,
50-
icon: `src/images/gatsby-icon.png` // This path is relative to the root of the site.
51-
}
52-
}
13+
...markdownPagesPlugin,
14+
...componentsDocgenPlugin,
15+
...imagesPlugin,
16+
...manifestPlugin
5317
// this (optional) plugin enables Progressive Web App + Offline functionality
5418
// To learn more, visit: https://gatsby.dev/offline
5519
// 'gatsby-plugin-offline',

‎uilib-docs/gatsby-node.js

Lines changed: 3 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -4,131 +4,9 @@
44
* See: https://www.gatsbyjs.org/docs/node-apis/
55
*/
66

7-
// You can delete this file if you're not using it
8-
const path = require('path');
9-
// const {GraphQLBoolean} = require('gatsby/graphql');
10-
// const _ = require('lodash');
11-
12-
// const publicComponentsIds = [];
7+
const {createMarkdownPages, createComponentPages} = require('./configurations/pageCreators');
138

149
exports.createPages = ({graphql, boundActionCreators}) => {
15-
const {createPage} = boundActionCreators;
16-
17-
graphql(`
18-
{
19-
allFile(filter: {sourceInstanceName: {eq: "markdown-pages"}}) {
20-
edges {
21-
node {
22-
id
23-
name
24-
childMarkdownRemark {
25-
fileAbsolutePath
26-
frontmatter {
27-
title
28-
path
29-
}
30-
}
31-
}
32-
}
33-
}
34-
}
35-
`).then(result => {
36-
result.data.allFile.edges.forEach(({node}) => {
37-
console.log('ethan - markdown name', node.name);
38-
createPage({
39-
name: node.name,
40-
path: node.childMarkdownRemark.frontmatter.path,
41-
component: path.resolve(`src/templates/markdownTemplate.js`),
42-
context: {} // additional data can be passed via context
43-
});
44-
});
45-
});
46-
47-
return new Promise(resolve => {
48-
graphql(`
49-
{
50-
allComponentMetadata {
51-
edges {
52-
node {
53-
displayName
54-
docblock
55-
description {
56-
text
57-
}
58-
props {
59-
name
60-
type {
61-
name
62-
}
63-
description {
64-
text
65-
}
66-
defaultValue {
67-
value
68-
}
69-
}
70-
}
71-
}
72-
}
73-
}
74-
`).then(result => {
75-
// create docs intro page
76-
createPage({
77-
path: `/docs`,
78-
component: path.resolve('./src/templates/component.js'),
79-
context: {
80-
// Data passed to context is available in page queries as GraphQL variables.
81-
}
82-
});
83-
84-
// Create components pages
85-
result.data.allComponentMetadata.edges.map(({node}) => {
86-
createPage({
87-
path: `/docs/${node.displayName}`,
88-
component: path.resolve('./src/templates/component.js'),
89-
context: {
90-
// Data passed to context is available in page queries as GraphQL variables.
91-
componentNode: node,
92-
components: result.data.allComponentMetadata.edges
93-
}
94-
});
95-
});
96-
97-
// Create markdown pages
98-
// result.data.allMarkdownRemark.edges.forEach(({node}) => {
99-
// createPage({
100-
// path: node.frontmatter.path,
101-
// component: path.resolve(`src/templates/markdownTemplate.js`),
102-
// context: {} // additional data can be passed via context
103-
// });
104-
// });
105-
106-
resolve();
107-
});
108-
});
10+
createMarkdownPages({graphql, boundActionCreators});
11+
createComponentPages({graphql, boundActionCreators});
10912
};
110-
111-
// We don't need this in public docs
112-
// exports.setFieldsOnGraphQLNodeType = ({type}) => {
113-
// if (type.name === 'ComponentMetadata') {
114-
// const componentsByGroups = _.groupBy(type.nodes, 'displayName');
115-
// _.forEach(componentsByGroups, group => {
116-
// // has public origin
117-
// if (group.length === 2) {
118-
// publicComponentsIds.push(_.last(group).id);
119-
// }
120-
// });
121-
122-
// return {
123-
// isPublic: {
124-
// type: GraphQLBoolean,
125-
126-
// resolve: source => {
127-
// return _.includes(publicComponentsIds, source.id);
128-
// },
129-
// },
130-
// };
131-
// }
132-
133-
// return {};
134-
// };

‎uilib-docs/src/components/Navbar.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ class Navbar extends Component {
2929

3030
getMarkdownPages(data) {
3131
const markdownPages = data.allFile.edges;
32-
const pages = markdownPages.map(({node}) => node.childMarkdownRemark.frontmatter);
32+
const pages = _.chain(markdownPages)
33+
.map(({node}) => node.childMarkdownRemark.frontmatter)
34+
.sortBy('index')
35+
.value();
36+
3337
return pages;
3438
}
3539

@@ -97,6 +101,7 @@ class Navbar extends Component {
97101
node {
98102
childMarkdownRemark {
99103
frontmatter {
104+
index
100105
title
101106
path
102107
}

‎uilib-docs/src/components/header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Header = () => {
1414

1515

1616
<div className="links">
17-
<Link to="/docs/">Docs</Link>
17+
<Link to="/getting-started/setup">Docs</Link>
1818
<a target="_blank" href="https://github.com/wix/react-native-ui-lib">
1919
GitHub
2020
</a>

‎uilib-docs/src/components/layout.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const Layout = ({children, showSidebar}) => {
1717
]}
1818
/>
1919
<Header/>
20-
<div className={`main ${!showSidebar ? 'fill' : ''}`}>
20+
{/* <div className={`main ${!showSidebar ? 'fill' : ''}`}> */}
21+
<div className={`main`}>
2122
{showSidebar && <Navbar/>}
2223
<div className={`content ${showSidebar ? 'with-navbar' : ''}`}>{children}</div>
2324
</div>

0 commit comments

Comments
 (0)