add: intail

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": ["@babel/preset-env", "@babel/react"],
+  "plugins": [
+    [ "@babel/plugin-proposal-decorators", { "legacy": true } ],
+    [ "@babel/plugin-proposal-class-properties", { "loose": true } ]
+  ]
+}

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+bower_components
+coverage
+npm-debug.log
+yarn.lock
+Gemfile.lock
+yarn-error.log
+package-lock.json
+.DS_Store
+.idea
+.vscode

.npmignore

@@ -0,0 +1,28 @@
+.idea
+.DS_Store
+.prettierrc
+.babelrc
+.editorconfig
+Gemfile
+postcss.config.js
+Rakefile
+**/npm-debug.log
+**/node_modules
+
+src
+docs
+build
+docs
+public
+tests
+postcss.config.js
+webpack.config.babel.js
+
+# tests
+test
+__test__
+__tests__
+jest.config.js
+jest.setup.js
+
+

.npmrc

@@ -0,0 +1,2 @@
+sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+package-lock=false

.prettierrc

@@ -0,0 +1,38 @@
+{
+  "trailingComma": "none",
+  "arrowParens": "always",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": [
+        "*.json",
+        ".eslintrc",
+        ".tslintrc",
+        ".prettierrc",
+        ".tern-project"
+      ],
+      "options": {
+        "parser": "json",
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": "*.{css,sass,scss,less}",
+      "options": {
+        "parser": "postcss",
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": "*.ts",
+      "options": {
+        "parser": "typescript"
+      }
+    }
+  ]
+}

Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+gem 'fileutils'
+gem 'sshkit'
+gem 'semver'

README.md

@@ -0,0 +1,62 @@
+# react-modal-manager
+> A cool modal manager for react.
+
+## installation
+```shell
+npm install -S @feizheng/react-modal-manager
+```
+
+## update
+```shell
+npm update @feizheng/react-modal-manager
+```
+
+## properties
+| property  | type   | default | description |
+| --------- | ------ | ------- | ----------- |
+| className | String | -       | -           |
+| value     | -      | -       | -           |
+| onChange  | -      | -       | -           |
+
+## usage
+1. import css
+  ```scss
+  @import "~@feizheng/react-modal-manager/dist/style.scss";
+
+  // customize your styles:
+  $react-modal-manager-options: ()
+  ```
+2. import js
+  ```js
+  import React from 'react';
+  import ReactDOM from 'react-dom';
+  import ReactModalManager from '@feizheng/react-modal-manager';
+
+  // your app:
+  class App extends React.Component{
+    render(){
+      return (
+        <ReactModalManager />
+      )
+    }
+  }
+
+  // render to dom:
+  ReactDOM.render(<App/>, document.getElementById('app'));
+  ```
+
+## documentation
+- https://afeiship.github.io/react-modal-manager/
+
+## resources
+- https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
+- https://www.valentinog.com/blog/react-webpack-babel/
+- https://jestjs.io/docs/en/tutorial-react#snapshot-testing-with-mocks-enzyme-and-react-16
+- https://testing-library.com/docs/react-testing-library/api
+
+## todos
+- [ ] Add: semver number for every build files.
+- [ ] Add: need output css files.
+- [ ] Add: PWA support for docs.
+- [ ] Add: source.map file for dist(`you can upload for production debug`).
+- [ ] BUG: npm run dev will clean dist.

Rakefile

@@ -0,0 +1,4 @@
+
+Dir["./node_modules/@feizheng/rake-*/index.rake"].each do |task|
+  load task
+end

__tests__/index.spec.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BoilerplateReactCompnent from '../src/main';
+
+describe('Basic Test', () => {
+  test('renders to document', () => {
+    const component = shallow(<BoilerplateReactCompnent />);
+    const cnt = component.find('.react-component');
+    cnt.simulate('click');
+    expect(cnt).toMatch(/Hello React/);
+  });
+});

build/build.js

@@ -0,0 +1,22 @@
+import baseConfig from '.';
+import merge from 'webpack-merge';
+import {
+  configs,
+  inputs,
+  outputs,
+  loaders,
+  plugins,
+  externals
+} from '@feizheng/webpack-lib-kits';
+
+export default merge(baseConfig, {
+  entry: inputs.build(),
+  output: outputs.build({
+    library: 'ReactModalManager'
+  }),
+  externals: externals.base({
+    '@feizheng/noop': '@feizheng/noop',
+    '@feizheng/next-js-core2': '@feizheng/next-js-core2'
+  }),
+  plugins: [plugins.clean(), plugins.copyStyles()]
+});

build/dev.js

@@ -0,0 +1,11 @@
+import baseConfig from '.';
+import merge from 'webpack-merge';
+import { configs, inputs, outputs, loaders, plugins } from '@feizheng/webpack-lib-kits';
+
+export default merge(baseConfig, {
+  entry: inputs.docs(),
+  output: outputs.dev(),
+  devtool: configs.devtool(),
+  devServer: configs.devServer(),
+  plugins: [plugins.html()]
+});

build/docs.js

@@ -0,0 +1,9 @@
+import baseConfig from '.';
+import merge from 'webpack-merge';
+import { configs, inputs, outputs, loaders, plugins } from '@feizheng/webpack-lib-kits';
+
+export default merge(baseConfig, {
+  entry: inputs.docs(),
+  output: outputs.docs(),
+  plugins: [plugins.clean(), plugins.html()]
+});

build/index.js

@@ -0,0 +1,21 @@
+import {
+  configs,
+  inputs,
+  outputs,
+  loaders,
+  plugins
+} from '@feizheng/webpack-lib-kits';
+
+export default {
+  mode: configs.mode(),
+  entry: inputs.build(),
+  output: outputs.dev(),
+  resolve: {
+    extensions: configs.extensions(),
+    alias: configs.alias()
+  },
+  module: {
+    rules: [loaders.babel(), loaders.image(), loaders.sass(), loaders.version()]
+  },
+  plugins: [plugins.minCssExtract()]
+};

build/release.js

@@ -0,0 +1,6 @@
+import buildConfig from './build';
+import merge from 'webpack-merge';
+import { configs, inputs, outputs, loaders, plugins } from '@feizheng/webpack-lib-kits';
+export default merge(buildConfig, {
+  plugins: [plugins.semver()]
+});

build/server.js

@@ -0,0 +1,10 @@
+const express = require('express');
+const app = express();
+const portNumber = 3000;
+const sourceDir = 'docs';
+
+app.use(express.static(sourceDir));
+app.listen(portNumber, () => {
+  console.log(`Express web server started: http://localhost:${portNumber}`);
+  console.log(`Serving content from /${sourceDir}/`);
+});

dist/style.scss

@@ -0,0 +1,24 @@
+$react-modal-manager-options: () !default;
+
+.react-modal-manager {
+  color: #000;
+  border: 4px dashed #ccc;
+  padding: 20px;
+  user-select: none;
+  &:hover {
+    border-color: #ddd;
+    background: #f3f3f3;
+  }
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  .icon-play {
+    padding: 10px;
+    min-width: 120px;
+    &:focus {
+      outline: none;
+    }
+  }
+}