Docz: рдлреЙрдиреНрдЯрд╡реЙрдЪ рдЖрдЗрдХрди рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 4 рдЬреБрд▓ре░ 2018  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: doczjs/docz

рдмрдЧ рд░рд┐рдкреЛрд░реНрдЯ

рдЬрдм рдореБрдЭреЗ docz dev рдЪрд▓рд╛рддреЗ рд╣реИрдВ рддреЛ рдореБрдЭреЗ рдХрдВрд╕реЛрд▓ рдореЗрдВ рдпрд╣ рддреНрд░реБрдЯрд┐ рд╣реЛрддреА рд╣реИ

Module build failed (from ./node_modules/happypack/loader.js):
TypeError: Cannot read property 'name' of undefined
    at C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:425:27
    at Array.filter (<anonymous>)
    at getTextValueOfFunctionProperty (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:422:10)
    at computeComponentName (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:446:32)
    at Parser.getComponentInfo (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:117:33)
    at C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:73:57
    at Array.map (<anonymous>)
    at C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:73:22
    at Array.reduce (<anonymous>)
    at Object.parse (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript\lib\parser.js:66:18)
    at Object.processResource (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript-loader\dist\loader.js:69:32)
    at Object.loader (C:\fenbka\www\electron-app\node_modules\react-docgen-typescript-loader\dist\loader.js:15:41)
    at applySyncOrAsync (C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:350:21)
    at apply (C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:277:5)
    at C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:135:7
    at applyPitchLoader (C:\fenbka\www\electron-app\node_modules\happypack\lib\applyLoaders.js:188:14)

 @ ./src/renderer/ui/Button/Button.mdx 4:0-37 37:25-31
 @ ./.docz/app/imports.js
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

Fontawesome рдЖрдЗрдХрди рд▓рд╛рдЗрдмреНрд░реЗрд░реАред рдФрд░ рдЙрд╕реЗ рдЖрд░рдореНрднрд┐рдХ рдЪрд░рдг рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдереАред

Button.tsx

import * as React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as fontawesome from "@fortawesome/fontawesome";

import * as faSun from "@fortawesome/fontawesome-pro-solid/faSun";

fontawesome.library.add(faSun);
export interface ButtonProps {}
export interface ButtonState {}

export class Button extends React.Component<ButtonProps, ButtonState> {
    render() {
        return (
            <button>
                <FontAwesomeIcon icon="sun" />
                {this.props.children}
            </button>
        );
    }
}

Button.mdx

---
name: Button
menu: Components
---

import { Playground, PropsTable } from "docz";
import { Button } from "./NewButton";

## Basic usage

<Playground>
  <Button>test</Button>
</Playground>

рдирд┐рд░реНрднрд░рддрд╛

    "dependencies": {
        "@fortawesome/fontawesome": "^1.1.8",
        "@fortawesome/fontawesome-pro-light": "^5.0.13",
        "@fortawesome/fontawesome-pro-regular": "^5.0.13",
        "@fortawesome/fontawesome-pro-solid": "^5.0.13",
        "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
        "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
        "@fortawesome/react-fontawesome": "0.1.0-11",
        "@reach/router": "^1.1.1",
        "npm": "^6.1.0",
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "styled-components": "^3.3.3"
    },
    "devDependencies": {
        "@types/node": "^10.5.1",
        "@types/react": "^16.4.6",
        "@types/react-dom": "^16.0.6",
        "@types/react-fontawesome": "^1.6.3",
        "docz": "^0.4.0",
        "docz-plugin-babel6": "^0.5.1",
        "electron": "^2.0.3",
        "electron-react-devtools": "^0.5.3",
        "file-loader": "^1.1.11",
        "html-webpack-plugin": "^3.2.0",
        "ts-loader": "^4.4.2",
        "typescript": "^2.9.2",
        "typescript-styled-plugin": "^0.8.1",
        "webpack": "^4.14.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.4"
    }

рдкрд░реНрдпрд╛рд╡рд░рдг

  • OS: [рд╡рд┐рдВрдбреЛрдЬ резреж]
  • рдиреЛрдб / npm рд╕рдВрд╕реНрдХрд░рдг: [Node 8 / npm 5]

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдореЗрд░реЗ рд▓рд┐рдП рднреА рдХрд╛рдо рдирд╣реАрдВ рдХрд┐рдпрд╛

@fenbka рдпрд╛ @zicodeng рд╣рдореЗрдВ рддреНрд░реБрдЯрд┐ рдХреЛ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рднрдВрдбрд╛рд░ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

рдзрдиреНрдпрд╡рд╛рдж

рдХреЛрдИ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдирд╣реАрдВ рд╣реЛрдиреЗ рдХреЗ рдХрд╛рд░рдг рдмрдВрдж!

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

koddr picture koddr  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ssylvia picture ssylvia  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

meetromb picture meetromb  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

merelinguist picture merelinguist  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

mquandalle picture mquandalle  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ