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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
*.js
2+
doc-comps
3+
demo

‎.gitignore

Lines changed: 1 addition & 1 deletion
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 27 additions & 0 deletions
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

Lines changed: 129 additions & 0 deletions
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

Lines changed: 70 additions & 0 deletions
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

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

‎doczrc.js

Lines changed: 6 additions & 0 deletions
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

Lines changed: 13 additions & 0 deletions
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

Lines changed: 12 additions & 0 deletions
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+
};

0 commit comments

Comments
 (0)