建立component模块，支持模块化less

Kunduin · Kunduin · commit 353c2b1545a2 · 2018-07-28T20:28:38.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,9 @@
 .env.test.local
 .env.production.local
 
+# docz
+.docz
+
 # idea
 .idea
 
diff --git a/config-overrides.js b/config-overrides.js
@@ -1,10 +1,13 @@
-const {injectBabelPlugin} = require('react-app-rewired');
-const rewireLess = require('react-app-rewire-less');
+const { injectBabelPlugin } = require("react-app-rewired");
+const rewireLess = require("react-app-rewire-less");
 
 module.exports = function override(config, env) {
-    config = injectBabelPlugin(['import', {libraryName: 'antd', style: true}], config);
-    config = rewireLess.withLoaderOptions({
-        javascriptEnabled: true,
-    })(config, env);
-    return config;
-};
+  config = injectBabelPlugin(
+    ["import", { libraryName: "antd", style: true }],
+    config
+  );
+  config = rewireLess.withLoaderOptions({
+    javascriptEnabled: true
+  })(config, env);
+  return config;
+};
diff --git a/docz_config/docz.config.html b/docz_config/docz.config.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="description" content="My awesome app using Docz">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="{{ publicUrl }}/antd.min.css">
+    <title>Be Quank</title>
+</head>
+
+<body>
+    <div id="root" />
+</body>
+
+</html>
diff --git a/doczrc.js b/doczrc.js
@@ -0,0 +1,15 @@
+import { css } from "docz-plugin-css";
+
+export default {
+  plugins: [
+    css({
+      preprocessor: "less",
+      cssmodules: true,
+      loaderOpts: {
+        /* whatever your preprocessor loader accept */
+        javascriptEnabled: true
+      }
+    })
+  ],
+  indexHtml: "./docz_config/docz.config.html"
+};
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fontend_default",
+  "name": "BeQuank",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -13,12 +13,14 @@
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",
-    "styleguide": "npx styleguidist server"
+    "docz:dev": "docz dev",
+    "docz:build": "docz build"
   },
   "devDependencies": {
     "babel-plugin-import": "^1.8.0",
+    "docz": "^0.7.1",
+    "docz-plugin-css": "^0.7.1",
     "react-app-rewire-less": "^2.1.2",
-    "react-app-rewired": "^1.5.2",
-    "react-styleguidist": "^7.1.1"
+    "react-app-rewired": "^1.5.2"
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-import {Button} from 'antd'
-import style from './components/'
+import React, { Component } from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import { Button } from "antd";
 class App extends Component {
   render() {
     return (
@@ -14,7 +13,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
-          <Button type={"primary"} >abc</Button>
+        <Button type={"primary"}>abc</Button>
       </div>
     );
   }
diff --git a/src/components/ButtonExample/ButtonExample.mdx b/src/components/ButtonExample/ButtonExample.mdx
@@ -0,0 +1,20 @@
+---
+name:Button
+menu:Example
+---
+
+import { Playground } from 'docz'
+import ButtonExample from './index'
+
+# ButtonExample
+
+## Basic usage
+
+
+<Playground>
+  <ButtonExample type="primary">Primary</ButtonExample>
+  <ButtonExample>Default</ButtonExample>
+  <ButtonExample type="dashed">Dashed</ButtonExample>
+  <ButtonExample type="danger">Danger</ButtonExample>
+</Playground>
+
diff --git a/src/components/ButtonExample/README.md b/src/components/ButtonExample/README.md
diff --git a/src/components/ButtonExample/index.js b/src/components/ButtonExample/index.js
@@ -2,18 +2,21 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import * as size from "./data/size";
 import * as type from "./data/type";
-import {Button} from 'antd'
-import styles from './index.less'
+import { Button } from "antd";
+import styles from "./index.module.less";
 
 const ButtonProps = {
   /** Define size of button */
   size: PropTypes.oneOf([size.SMALL, size.DEFAULT, size.LARGE]).isRequired,
   /** Define type of button */
-  type: PropTypes.oneOf([type.PRIMARY, type.DEFAULT,type.DANGER,type.DASHED]).isRequired,
+  type: PropTypes.oneOf([type.PRIMARY, type.DEFAULT, type.DANGER, type.DASHED])
+    .isRequired,
   /** Define loading state */
   loading: PropTypes.bool,
   /** Content of button */
-  children: PropTypes.element.isRequired
+  children: PropTypes.element.isRequired,
+
+  style: PropTypes.object
 };
 
 const DefaultButtonProps = {
@@ -24,8 +27,18 @@ const DefaultButtonProps = {
 
 class ButtonExample extends PureComponent {
   render() {
-    const { size, type, loading, children } = this.props;
-      return <Button style={styles.button} type={type} size={size} loading={loading}>{children}</Button>;
+    const { style, size, type, loading, children } = this.props;
+    // return <div>{children}</div>;
+    return (
+      <Button
+        className={styles.button}
+        type={type}
+        size={size}
+        loading={loading}
+      >
+        {children}
+      </Button>
+    );
   }
 }
 
diff --git a/src/components/ButtonExample/index.module.less b/src/components/ButtonExample/index.module.less
diff --git a/styleguide.config.js b/styleguide.config.js
diff --git a/yarn.lock b/yarn.lock
