pape-tools

cli tools for react component developer based on storybook.

Install

npm install pape-tools --save-dev yarn add -D pape-tools

Usage

$ pape-tools run ${cli}

Cli Api

cleanCompile

It will remove es,lib,assets dirs in cwd.

cleanBuild

It will remove build dir in cwd.

clean

It will execute pape-tools run cleanCompile and pape-tools run cleanCompile in series.

check-deps

It will check dependencies in your source code under ${cwd}/src dir with pkg.json.

guard

It will restrain developers from using cutom-defined npm publish, they should use pape-tools run pub. Tip: You'd better set "prepublish": "pape-tools run guard" in pkg.json's scripts.

test

It will run uni tests you created in cwd.(using jest)

webpack

It will webpackify the files under examples dir into build dir in cwd. If you want to make a entry for examples/sample.js, you should create an empty examples/sample.html file.

build

It will generate the examples html file that you could push to your gh-pages branch to show.

gh-pages

It will push the examples files under build dir to your gh-pages branch.

css

It will transform assets/*.less into assets/*.css;

js

It will babelify src/**/*.{ts,tsx,js,jsx} into lib dir as commonjs module.

es

It will babelify src/**/*.{ts,tsx,js,jsx} into es dir as es module.

compile

It will execute pape-tools run css, pape-tools run js and pape-tools run es in parallel.

genPrettierrc

It will generate .prettierrc in cwd;

genEslint

It will generate .eslintrc.js in cwd;

genTslint

It will generate tslint.json and tsconfig.json in cwd;

gen-lint-config

It will execute genPrettierrc, genEslint and genTslint in parallel.

prettier

It will prettier .js and .jsx code style in src,tests,code,storybook,examples dirs;.

js-lint

It will check dependencies first, then eslint your .jsx and .js code under src, examples and tests dirs. You can custom your own lint config by creating .eslintc.js in cwd.

ts-lint

It will check dependencies first, then tslint your .tsx and .ts code under src, examples and tests dirs. You can custom your own lint config by creating tslint.json in cwd.

lint

It will execute pape-tools run ts-lint and pape-tools run js-lint in series.

pre-commit

It will execute pape-tools run prettier and pape-tools run lint in series.

pub

It will excute pape-tools run publish, pape-tools run gh-pages and tag the version in pkg.json to git.

storybook

Run Storybook in a dev mode.(You can use this cli to dev your react component)

storybook-build

Build static version of Storybook.

Best Practice

project structure：

. helloweb
├── package.json
├── index.js (entry file for webpack, if not exists will look for src/index.js)
├── assets (put less or css file here)
├── examples (put example code here, there is demo code below.)
├── src (your source code)
├── typings (.d.ts file)
├── storybook (the config file for storybook, ending with .stories.js)
└── tests (jest uni test)

scripts in pkg.json and some other config

--babel-runtime added on demand

{
  "scripts": {
    "build": "pape-tools run storybook-build",
    "compile": "pape-tools run compile --babel-runtime",
    "start": "pape-tools run storybook",
    "pub": "pape-tools run pub --babel-runtime",
    "lint": "pape-tools run lint",
    "lint:fix": "pape-tools run lint --fix",
    "prettier": "pape-tools run prettier",
    "test": "pape-tools run test",
    "prepublish": "pape-tools run guard",
    "init-tslint": "pape-tools run gen-lint-config",
    "coverage": "pape-tools run test --coverage",
    "pre-commit": "pape-tools run pre-commit",
    "lint-staged": "lint-staged"
  },
  "devDependencies": {
    "pre-commit": "1.x"
  },
  "pre-commit": ["lint-staged"],
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["npm run pre-commit", "git add"]
  }
}

examples/Sample.tsx demo

import React from 'react';
import ReactDOM from 'react-dom';
import Sample from '../src/index';
import './Sample.less';

interface SampleWrapperProps {}

const SampleWrapper: React.FunctionComponent<SampleWrapperProps> = props => {
  return <Sample />;
};

// You need to add this line, and create an empty `Sample.html` for this example.
ReactDOM.render(<SampleWrapper />, document.getElementById('__react-content'));