Skip to content

Commit 07bb622

Browse files
jpurijpuri
committed
Docs improvements
1 parent 88bf64b commit 07bb622

14 files changed

+1374
-10
lines changed

‎packages/docs/advance-features/Table/Readme.md renamed to ‎packages/docs/demo/Table/Readme.md

File renamed without changes.

‎packages/docs/advance-features/Table/index.jsx renamed to ‎packages/docs/demo/Table/index.jsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { useState } from 'react';
2-
import Editor from 'nib-core';
3-
import TablePlugin from 'nib-table';
1+
import React, { useState } from "react";
2+
import Editor from "nib-core";
3+
import TablePlugin from "nib-table";
44

5-
import Code from '../../Code';
6-
import defaultValue from './sampleData';
5+
import Code from "../../Code";
6+
import defaultValue from "./sampleData";
77

88
/**
9-
* @visibleName 1. Table
9+
* @visibleName 16. Table
1010
*/
1111
const Table = () => {
1212
const [content, setContent] = useState();
@@ -15,10 +15,10 @@ const Table = () => {
1515
<Editor
1616
licenseKey="c1ba076f-6793-45d4-a66d-02d4204b6297"
1717
config={{
18-
plugins: { options: 'help' },
18+
plugins: { options: "help" },
1919
toolbar: {
20-
options: 'top',
21-
top: { options: 'table help' },
20+
options: "top",
21+
top: { options: "table help" },
2222
},
2323
}}
2424
addons={[TablePlugin]}

‎packages/docs/advance-features/Table/sampleData.js renamed to ‎packages/docs/demo/Table/sampleData.js

File renamed without changes.

‎styleguide.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ module.exports = {
5050
"packages/docs/demo/FullPage/index.jsx",
5151
"packages/docs/demo/ConvertFromHTML/index.jsx",
5252
"packages/docs/demo/ConvertToHTML/index.jsx",
53+
"packages/docs/demo/Table/index.jsx",
5354
],
5455
},
5556
{
@@ -58,7 +59,6 @@ module.exports = {
5859
sectionDepth: 1,
5960
content: "packages/docs/advance-features/Readme.md",
6061
components: [
61-
"packages/docs/advance-features/Table/index.jsx",
6262
"packages/docs/advance-features/AdvanceImage/index.jsx",
6363
"packages/docs/advance-features/Video/index.jsx",
6464
"packages/docs/advance-features/SourceEdit/index.jsx",

‎styleguide/HeadingRenderer.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import cx from 'clsx';
4+
import Styled from 'rsg-components/Styled';
5+
6+
const styles = ({ color, fontFamily, fontSize }) => ({
7+
heading: {
8+
margin: 0,
9+
color: color.base,
10+
fontFamily: fontFamily.base,
11+
fontWeight: 'normal',
12+
},
13+
heading1: {
14+
fontSize: '36px',
15+
margin: '16px 0',
16+
},
17+
heading2: {
18+
fontSize: '36px',
19+
marginTop: 16,
20+
},
21+
heading3: {
22+
fontSize: fontSize.h3,
23+
},
24+
heading4: {
25+
fontSize: fontSize.h4,
26+
},
27+
heading5: {
28+
fontSize: fontSize.h5,
29+
fontWeight: 'bold',
30+
},
31+
heading6: {
32+
fontSize: fontSize.h6,
33+
fontStyle: 'italic',
34+
},
35+
});
36+
37+
function HeadingRenderer({ classes, level, children, ...props }) {
38+
const Tag = `h${level}`;
39+
const headingClasses = cx(classes.heading, classes[`heading${level}`]);
40+
41+
return (
42+
<Tag {...props} className={headingClasses}>
43+
{children}
44+
</Tag>
45+
);
46+
}
47+
48+
HeadingRenderer.propTypes = {
49+
classes: PropTypes.object.isRequired,
50+
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
51+
children: PropTypes.node,
52+
};
53+
54+
export default Styled(styles)(HeadingRenderer);

‎styleguide/Logo.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import Styled from "rsg-components/Styled";
4+
import Pen from "./pen.svg";
5+
6+
const styles = ({ fontFamily, color }) => ({
7+
logo: {
8+
margin: 0,
9+
fontFamily: fontFamily.base,
10+
fontSize: 18,
11+
fontWeight: "normal",
12+
color: color.baseBackground,
13+
},
14+
image: {
15+
width: "2.5em",
16+
marginRight: 25,
17+
},
18+
link: {
19+
display: "flex",
20+
alignItems: "center",
21+
cursor: "pointer",
22+
},
23+
});
24+
export function LogoRenderer({ classes }) {
25+
return (
26+
<h1 className={classes.logo}>
27+
<a className={classes.link} href="">
28+
{/* <Pen className={classes.image} /> */}
29+
<span style={{ fontSize: 24, marginLeft: 8 }}>Nib</span>
30+
</a>
31+
</h1>
32+
);
33+
}
34+
35+
LogoRenderer.propTypes = {
36+
classes: PropTypes.object.isRequired,
37+
children: PropTypes.node,
38+
};
39+
40+
export default Styled(styles)(LogoRenderer);

‎styleguide/StyleGuideRenderer.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import Logo from "rsg-components/Logo";
4+
import Markdown from "rsg-components/Markdown";
5+
import Styled from "rsg-components/Styled";
6+
import cx from "clsx";
7+
import Ribbon from "rsg-components/Ribbon";
8+
import Version from "rsg-components/Version";
9+
10+
const styles = ({
11+
color,
12+
fontFamily,
13+
fontSize,
14+
sidebarWidth,
15+
mq,
16+
space,
17+
maxWidth
18+
}) => ({
19+
root: {
20+
minHeight: "100vh",
21+
backgroundColor: color.baseBackground
22+
},
23+
hasSidebar: {
24+
paddingLeft: sidebarWidth,
25+
[mq.small]: {
26+
paddingLeft: 0
27+
}
28+
},
29+
content: {
30+
maxWidth,
31+
padding: [[space[2], space[4]]],
32+
margin: [[0, "auto"]],
33+
[mq.small]: {
34+
padding: space[2]
35+
},
36+
display: "block"
37+
},
38+
sidebar: {
39+
backgroundColor: color.sidebarBackground,
40+
border: [[color.border, "solid"]],
41+
borderWidth: [[0, 1, 0, 0]],
42+
position: "fixed",
43+
top: 0,
44+
left: 0,
45+
bottom: 0,
46+
width: sidebarWidth,
47+
overflow: "auto",
48+
WebkitOverflowScrolling: "touch",
49+
[mq.small]: {
50+
position: "static",
51+
width: "auto",
52+
borderWidth: [[1, 0, 0, 0]],
53+
paddingBottom: space[0]
54+
}
55+
},
56+
logo: {
57+
padding: "15px",
58+
margin: 0,
59+
borderBottom: [[1, color.border, "solid"]]
60+
},
61+
footer: {
62+
display: "block",
63+
color: color.light,
64+
fontFamily: fontFamily.base,
65+
fontSize: fontSize.small
66+
},
67+
header: {
68+
margin: "10px 16px"
69+
}
70+
});
71+
72+
export function StyleGuideRenderer({
73+
classes,
74+
title,
75+
version,
76+
homepageUrl,
77+
children,
78+
toc,
79+
hasSidebar
80+
}) {
81+
return (
82+
<div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
83+
<main className={classes.content}>{children}</main>
84+
{hasSidebar && (
85+
<div className={classes.sidebar}>
86+
<header className={classes.logo}>
87+
<Logo>{title}</Logo>
88+
{version && <Version>{version}</Version>}
89+
</header>
90+
{toc}
91+
</div>
92+
)}
93+
<Ribbon />
94+
</div>
95+
);
96+
}
97+
98+
StyleGuideRenderer.propTypes = {
99+
classes: PropTypes.object.isRequired,
100+
title: PropTypes.string.isRequired,
101+
version: PropTypes.string,
102+
homepageUrl: PropTypes.string.isRequired,
103+
children: PropTypes.node.isRequired,
104+
toc: PropTypes.node.isRequired,
105+
hasSidebar: PropTypes.bool
106+
};
107+
108+
export default Styled(styles)(StyleGuideRenderer);

‎styleguide/TableOfContentsRenderer.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import Styled from "rsg-components/Styled";
4+
import GithubImg from "./github.png";
5+
import "./styles.css";
6+
7+
const styles = ({ color, fontFamily, fontSize }) => ({
8+
nav: {
9+
margin: 0
10+
},
11+
pre: {
12+
whiteSpace: "pre-wrap"
13+
},
14+
wrapper: {
15+
display: "flex",
16+
flexDirection: "column",
17+
justifyContent: "space-between",
18+
height: "85%",
19+
alignItems: "center",
20+
color: "white !important",
21+
fontFamily: fontFamily.base,
22+
"& a": {
23+
color: "white !important",
24+
"&:hover": {
25+
color: "#90a4ae !important",
26+
cursor: "pointer"
27+
}
28+
}
29+
},
30+
github: {
31+
fontSize: fontSize.base,
32+
paddingLeft: 8,
33+
display: "flex",
34+
alignItems: "center",
35+
cursor: "pointer",
36+
"&:hover": {
37+
color: color.linkHover,
38+
paddingLeft: 8,
39+
}
40+
},
41+
githubImg: {
42+
marginRight: 10,
43+
height: 20
44+
},
45+
bottom: {
46+
fontSize: fontSize.small
47+
},
48+
bottomLink: {
49+
textDecoration: "underline",
50+
"&:hover": {
51+
color: color.linkHover,
52+
cursor: "pointer",
53+
textDecoration: "underline"
54+
}
55+
}
56+
});
57+
58+
export function TableOfContentsRenderer({ classes, children }) {
59+
return (
60+
<div className={classes.wrapper}>
61+
<div style={{ margin: "10px" }}>
62+
<nav>{children}</nav>
63+
<nav className={classes.github}>
64+
<a
65+
href="https://github.com/nib-edit/Nib"
66+
target="_blank"
67+
style={{
68+
display: "flex",
69+
alignItems: "center",
70+
marginBottom: 10
71+
}}
72+
>
73+
<img className={classes.githubImg} src={GithubImg} />
74+
<span>Github</span>
75+
</a>
76+
</nav>
77+
</div>
78+
</div>
79+
);
80+
}
81+
82+
TableOfContentsRenderer.propTypes = {
83+
classes: PropTypes.object.isRequired,
84+
children: PropTypes.node,
85+
searchTerm: PropTypes.string.isRequired,
86+
onSearchTermChange: PropTypes.func.isRequired
87+
};
88+
89+
export default Styled(styles)(TableOfContentsRenderer);

‎styleguide/cross.svg

Lines changed: 11 additions & 0 deletions
Loading

‎styleguide/github.png

2.28 KB
Loading

‎styleguide/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Nib</title><link rel="icon" type="image/x-icon" href="/pen.png"></head><body><div id="rsg-root"></div><script src="build/bundle.bf38d8d7.js"></script></body></html>

‎styleguide/pen.png

30.5 KB
Loading

‎styleguide/pen.svg

Lines changed: 13 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)