Have ideas to improve npm?Join in the discussion! »

    @geetemp/gee-ui

    1.1.12 • Public • Published

    gee-ui

    geetemp 前端团队组件库,目前在 antd 的基础上拓展实现。

    Getting started

    安装

    git clone git@git.i.com:gee-lab/gee-ui.git
    cd gee-ui
    yarn install

    开发

    yarn dev

    发布

    yarn build

    启动 storybook

    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.jsstyle/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

    为了用例能被 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文件...

    Install

    npm i @geetemp/gee-ui

    DownloadsWeekly Downloads

    11

    Version

    1.1.12

    License

    Apache-2.0

    Unpacked Size

    99.9 kB

    Total Files

    54

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar