Skip to content

Commit 9da9c84

Browse files
author
zhaozhiwen
committed
feat: chapter-2 开发调试与文档编写
1 parent 88b9efe commit 9da9c84

File tree

13 files changed

+11252
-207
lines changed

13 files changed

+11252
-207
lines changed

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
*.js
2+
doc-comps
3+
demo

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
/lib
1818
/es
1919
/.docz
20-
/.doc-site
20+
/doc-site
2121
/types
2222

2323
# misc

‎components/alert/demo/1-demo-basic.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import Alert from 'happy-ui/lib/alert';
3+
import 'happy-ui/lib/alert/style';
4+
5+
export default () => <Alert kind="warning">这是一条警告提示</Alert>;

‎components/alert/index.mdx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
name: Alert 警告提示
3+
route: /Alert
4+
menu: 组件
5+
---
6+
7+
import { HappyBox } from '../../doc-comps';
8+
import BasicDemo from './demo/1-demo-basic';
9+
import BasicDemoCode from '!raw-loader!./demo/1-demo-basic.tsx';
10+
11+
# Alert 警告提示
12+
13+
警告提示，展现需要关注的信息。
14+
15+
## 代码演示
16+
17+
### 基本用法
18+
19+
<HappyBox code={BasicDemoCode} title="基本用法" desc="使用kind控制Alert类型">
20+
<BasicDemo />
21+
</HappyBox>
22+
23+
## API
24+
25+
| 属性 | 说明 | 类型 | 默认值 |
26+
| ---- | -------- | -------------------------------------------- | ------ |
27+
| kind | 警告类型 | 'info'/'positive'/'negative'/'warning'非必填 | 'info' |

‎doc-comps/happy-box/index.less

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
.code-box {
2+
position: relative;
3+
display: inline-block;
4+
width: 100%;
5+
margin: 0 0 16px;
6+
border: 1px solid #ebedf0;
7+
border-radius: 2px;
8+
-webkit-transition: all 0.2s;
9+
}
10+
11+
.code-box-demo {
12+
transition: all 0.2s;
13+
padding: 42px 24px 50px;
14+
color: rgba(0, 0, 0, 0.65);
15+
}
16+
17+
.code-box-meta {
18+
font-size: 14px;
19+
line-height: 2;
20+
}
21+
22+
.code-box .ant-divider {
23+
margin: 0;
24+
}
25+
26+
.code-box-description {
27+
padding: 18px 24px 12px;
28+
}
29+
30+
.code-box-action {
31+
height: 40px;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
font-size: 16px;
36+
}
37+
38+
.code-box-action .anticon {
39+
margin: 0 8px;
40+
cursor: pointer;
41+
}
42+
43+
.container_editor_area {
44+
border-top: 1px solid rgb(232, 232, 232);
45+
padding: 16px;
46+
}
47+
48+
.container__editor {
49+
font-variant-ligatures: common-ligatures;
50+
border-radius: 3px;
51+
}
52+
53+
.container__editor textarea {
54+
outline: 0;
55+
background-color: none;
56+
}
57+
58+
.button {
59+
display: inline-block;
60+
padding: 0 6px;
61+
text-decoration: none;
62+
background: #000;
63+
color: #fff;
64+
}
65+
66+
.button:hover {
67+
background: linear-gradient(45deg, #e42b66, #e2433f);
68+
}
69+
70+
/* Syntax highlighting */
71+
.token.comment,
72+
.token.prolog,
73+
.token.doctype,
74+
.token.cdata {
75+
color: #90a4ae;
76+
}
77+
.token.punctuation {
78+
color: #9e9e9e;
79+
}
80+
.namespace {
81+
opacity: 0.7;
82+
}
83+
.token.property,
84+
.token.tag,
85+
.token.boolean,
86+
.token.number,
87+
.token.constant,
88+
.token.symbol,
89+
.token.deleted {
90+
color: #e91e63;
91+
}
92+
.token.selector,
93+
.token.attr-name,
94+
.token.string,
95+
.token.char,
96+
.token.builtin,
97+
.token.inserted {
98+
color: #4caf50;
99+
}
100+
.token.operator,
101+
.token.entity,
102+
.token.url,
103+
.language-css .token.string,
104+
.style .token.string {
105+
color: #795548;
106+
}
107+
.token.atrule,
108+
.token.attr-value,
109+
.token.keyword {
110+
color: #3f51b5;
111+
}
112+
.token.function {
113+
color: #f44336;
114+
}
115+
.token.regex,
116+
.token.important,
117+
.token.variable {
118+
color: #ff9800;
119+
}
120+
.token.important,
121+
.token.bold {
122+
font-weight: bold;
123+
}
124+
.token.italic {
125+
font-style: italic;
126+
}
127+
.token.entity {
128+
cursor: help;
129+
}

‎doc-comps/happy-box/index.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import Editor from 'react-simple-code-editor';
3+
import CopyToClipboard from 'react-copy-to-clipboard';
4+
import useToggle from 'react-use/esm/useToggle';
5+
import { Divider, Typography, Icon, Tooltip, message } from 'antd';
6+
import { highlight, languages } from 'prismjs/components/prism-core';
7+
8+
import 'prismjs/components/prism-clike';
9+
import 'prismjs/components/prism-javascript';
10+
import 'prismjs/components/prism-markup';
11+
import './index.less';
12+
13+
require('prismjs/components/prism-jsx');
14+
15+
const { Text } = Typography;
16+
interface Props {
17+
code: string;
18+
title?: React.ReactNode;
19+
desc?: React.ReactNode;
20+
}
21+
22+
export const HappyBox: React.FC<Props> = ({ code, title, desc, children }) => {
23+
const [isEditVisible, toggleEditVisible] = useToggle(false);
24+
25+
return (
26+
<div className="code-box">
27+
<section className="code-box-demo"> {children}</section>
28+
<section className="code-box-meta">
29+
<Divider orientation="left">{title || '示例'}</Divider>
30+
<div className="code-box-description">
31+
<Text>{desc || '暂无描述'}</Text>
32+
</div>
33+
<Divider dashed></Divider>
34+
<div className="code-box-action">
35+
<Tooltip placement="top" title="复制代码">
36+
<CopyToClipboard text={code} onCopy={() => message.success('复制成功')}>
37+
<Icon type="copy" />
38+
</CopyToClipboard>
39+
</Tooltip>
40+
<Tooltip placement="top" title={isEditVisible ? '收起代码' : '显示代码'}>
41+
<Icon type="code" onClick={toggleEditVisible} />
42+
</Tooltip>
43+
</div>
44+
</section>
45+
{renderEditor()}
46+
</div>
47+
);
48+
49+
function renderEditor() {
50+
if (!isEditVisible) return null;
51+
return (
52+
<div className="container_editor_area">
53+
<Editor
54+
readOnly
55+
value={code}
56+
onValueChange={() => {}}
57+
highlight={code => highlight(code, languages.jsx)}
58+
padding={10}
59+
className="container__editor"
60+
style={{
61+
fontFamily: '"Fira code", "Fira Mono", monospace',
62+
fontSize: 14,
63+
}}
64+
/>
65+
</div>
66+
);
67+
}
68+
};
69+
70+
export default HappyBox;

‎doc-comps/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import HappyBox from './happy-box';
2+
3+
export { HappyBox };

‎doczrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
files: './components/**/*.{md,markdown,mdx}', // 识别的文件后缀
3+
dest: 'doc-site', // 打包出来的文件目录名
4+
title: 'happy-ui', // 站点标题
5+
typescript: true, // 组件源文件是通过typescript开发，需要打开此选项
6+
};

‎gatsby-config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
plugins: [
3+
'gatsby-theme-docz',
4+
'gatsby-plugin-less',
5+
{
6+
resolve: 'gatsby-plugin-import',
7+
options: {
8+
libraryName: 'antd',
9+
style: 'css',
10+
},
11+
},
12+
],
13+
};

‎gatsby-node.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const path = require('path');
2+
3+
exports.onCreateWebpackConfig = args => {
4+
args.actions.setWebpackConfig({
5+
resolve: {
6+
modules: [path.resolve(__dirname, '../src'), 'node_modules'],
7+
alias: {
8+
'happy-ui/lib': path.resolve(__dirname, '../components/'),
9+
},
10+
},
11+
});
12+
};

‎package.json

+16
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
"description": "",
55
"main": "index.js",
66
"scripts": {
7+
"dev": "docz dev",
8+
"start": "npm run dev",
9+
"build:doc": "rimraf doc-site && docz build",
10+
"preview:doc": "docz serve",
711
"commit": "git-cz",
812
"test": "echo \"Error: no test specified\" && exit 1"
913
},
@@ -26,13 +30,25 @@
2630
"@commitlint/cli": "^8.2.0",
2731
"@commitlint/config-conventional": "^8.2.0",
2832
"@umijs/fabric": "^1.2.12",
33+
"antd": "^3.26.3",
34+
"babel-plugin-import": "^1.13.0",
2935
"commitizen": "^4.0.3",
3036
"cz-conventional-changelog": "^3.0.2",
37+
"docz": "^2.2.0",
38+
"gatsby-plugin-import": "^2.1.5",
39+
"gatsby-plugin-less": "^3.0.17",
3140
"husky": "^3.1.0",
41+
"less": "^3.10.3",
3242
"lint-staged": "^9.5.0",
3343
"prettier": "^1.19.1",
44+
"prismjs": "^1.17.1",
45+
"raw-loader": "^4.0.0",
3446
"react": "^16.12.0",
47+
"react-copy-to-clipboard": "^5.0.2",
3548
"react-dom": "^16.12.0",
49+
"react-simple-code-editor": "^0.10.0",
50+
"react-use": "^13.12.2",
51+
"rimraf": "^3.0.0",
3652
"typescript": "^3.7.3"
3753
},
3854
"lint-staged": {

‎tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@
1111
"moduleResolution": "node",
1212
"allowSyntheticDefaultImports": true,
1313
"esModuleInterop": true
14-
}
14+
},
15+
"exclude": ["components/**/demo", "doc-comps"]
1516
}

0 commit comments

Comments
 (0)