geetemp 前端团队组件库,目前在 antd 的基础上拓展实现。
git clone [email protected]:geetemp/gee-ui.git
cd gee-ui
yarn install
yarn dev
yarn build
storybook 是组件的文档工具,你可以启动它来在线查看组件如何使用,以及组件的 demo
yarn docs
现在你可以在浏览器中打开http://localhost:6006, 查看组件使用文档
在 src/components 目录下新建一个组件目录,比如 button。现在 components 目录下多了一个 button 目录。
在 button 目录下新建index.js
文件,用来编写 button 组件的 js 部分
import React from "react";
const AntButton = require("antd/lib/button");
export default class Button extends React.Component {
render() {
const props = { type: "danger", ...this.props };
return <AntButton {...props} className="gee-button" />;
}
}
我们引入了 antd 的 button 组件require("antd/lib/button")
作为被包装组件,因为我们需要在它的基础上去实现我们的 button 组件。这里我们没有使用import button from 'antd/lib'
是因为 import 会把整个 antd 组件库引入,增加了代码量。
组件的样式同样也需要先引入antd/lib/button
的样式,再重写定义自己的样式。在 button 目录下新建style/index.js
和style/index.less
两个文件,看下style/index.js
的内容
import "antd/lib/button/style";
import "./index.less";
第一行是引入 antd button 的样式,第二行是引入自定义样式文件,你可以在 index.less 写样式来覆盖 antd button 的默认样式。
编写组件用例,提供给 storybook 生成使用文档,服务于 gee-ui 的使用者。
新建button\examples
目录,继续新建一个danger.js
文件,编写用例组件展示说明 button 组件的 danger 状态,你也可以新建其他用例组件来说明 button 组件的剩余状态,比如 primary,disabled 等。
//danger.js
import React, { Component } from "react";
import "../style";
import Button from "../index";
const sectionStyle = {
display: "flex",
flexDirection: "column"
};
const articleStyle = {
display: "flex",
margin: "5px 0px"
};
const buttonStyle = {
marginRight: "5px"
};
export default class extends Component {
render() {
return (
<section style={sectionStyle}>
<article style={articleStyle}>
<Button style={buttonStyle} type="danger">
danger
</Button>
<Button type="danger" disabled={true}>
danger disabled
</Button>
</article>
</section>
);
}
}
为了用例能被 storybook 使用,需要在docs/load-components.js
文件下做以下配置
module.exports = [
{
name: "Button",
component: getDefaultExport(require("../src/components/button")),
examplesContext: require.context(
"../src/components/button/examples",
true,
/\.jsx?$/
),
examplesContextRaw: require.context(
"!!raw-loader!../src/components/button/examples",
true,
/\.jsx?$/
)
},
{
name: "Modal",
component: getDefaultExport(require("../src/components/modal")),
examplesContext: require.context(
"../src/components/modal/examples",
true,
/\.jsx?$/
),
examplesContextRaw: require.context(
"!!raw-loader!../src/components/modal/examples",
true,
/\.jsx?$/
)
}
];
我们在module.exports
数组中新增了一个 button 相关的配置项,这样就完成了组件用例与 storybook 的连接。打开http://localhost:6006 网页侧边栏应该多了一个 Button 项,可以开始查看关于 Button 组件的使用实例。
新建button\button.spec.js
文件...