refactor: use ts

Author: afeiship

.babelrc

@@ -3,12 +3,18 @@ bower_components
 coverage
 npm-debug.log
 yarn.lock
-Gemfile.lock
-yarn-error.log
 package-lock.json
 .DS_Store
-
-# editor
 .idea
+
+
+# vscode
 .vscode
 .history
+
+# python cache
+__pycache__
+dist
+dist-ssr
+*.local
+.vite

.gitignore

@@ -1,35 +1,27 @@
 .idea
 .DS_Store
-.prettierrc
-.babelrc
-.editorconfig
-Gemfile
-postcss.config.js
-Rakefile
 **/npm-debug.log
 **/node_modules
-
-bin
+test
+__tests__
 src
-docs
 build
-docs
+gulpfile.js
+rollup.config.js
+
 public
-tests
-postcss.config.js
-webpack.config.babel.js
-example
-examples
+.editorconfig
+.prettierrc
+.prettierignore
 
 # vscode
-jsconfig.json
+.vscode
 .history
+.github
+api
+docs
 
-# tests
-test
-__test__
-__tests__
 jest.config.js
-jest.setup.js
-
 .release-it.json
+tsconfig.json
+vite.config.ts

.npmignore

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

.npmrc

@@ -1,22 +1,16 @@
 {
   "trailingComma": "none",
   "arrowParens": "always",
-  "printWidth": 80,
+  "printWidth": 100,
   "bracketSpacing": true,
   "jsxBracketSameLine": true,
   "tabWidth": 2,
-  "semi": true,
   "quoteProps": "consistent",
+  "semi": true,
   "singleQuote": true,
   "overrides": [
     {
-      "files": [
-        "*.json",
-        ".eslintrc",
-        ".tslintrc",
-        ".prettierrc",
-        ".tern-project"
-      ],
+      "files": ["*.json", ".eslintrc", ".tslintrc", ".prettierrc", ".tern-project"],
       "options": {
         "parser": "json",
         "tabWidth": 2
@@ -34,6 +28,14 @@
       "options": {
         "parser": "typescript"
       }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "parser": "json"
+      }
     }
   ]
 }

.prettierrc

@@ -1,14 +1,18 @@
 {
+  "git": {
+    "requireCleanWorkingDir": false
+  },
   "hooks": {
     "after:init": [
-      "t2k"
+      "t2k",
+      "npm run docs"
     ],
     "after:bump": [
-      "npm run docs",
       "npm run build"
     ]
   },
   "github": {
-    "release": true
+    "release": true,
+    "proxy": "http://127.0.0.1:9090"
   }
-}
+}

.release-it.json

@@ -11,16 +11,6 @@
 npm install -S @jswork/react-modal-manager
 ```
 
-## properties
-| Name      | Type   | Required | Default | Description                                            |
-| --------- | ------ | -------- | ------- | ------------------------------------------------------ |
-| className | string | false    | -       | The extended className for component.                  |
-| context   | func   | false    | -       | The model required context pattern.                    |
-| name      | string | false    | -       | The only shared model name.                            |
-| inject    | func   | false    | noop    | Callback when you want to inject to some other object. |
-| ready     | bool   | false    | true    | If your app has ready.                                 |
-
-
 ## usage
 1. import css
   ```scss
@@ -34,108 +24,28 @@ npm install -S @jswork/react-modal-manager
   ```
 2. import js
   ```js
-  import NxOfflineSw from '@jswork/next-offline-sw';
-  import ReactGithubCorner from '@jswork/react-github-corner';
-  import ReactSwUpdateTips from '@jswork/react-sw-update-tips';
   import React from 'react';
-  import ReactDOM from 'react-dom';
-  import ReactModalManager, { modal } from '@jswork/react-modal-manager';
-  import './assets/style.scss';
-
-  const code = `
-  /* ---- Run in console ---- */
-
-  // show modal1
-  store.present('modal1');
+  import ReactModalManager from '@jswork/react-modal-manager';
+  import styled from 'styled-components';
 
-  // show modal1 with data
-  store.present('modal1',{ key:"1", key2: "2" });
-
-  // hide modal1
-  store.present('modal1');
+  const Container = styled.div`
+    width: 80%;
+    margin: 30px auto 0;
   `;
 
-  const Button = modal((props) => {
+  export default (props: any) => {
     return (
-      <React.Fragment>
-        <button
-          className="button"
-          onClick={() => {
-            props.$modal.present('modal1');
-          }}>
-          Open modal
-        </button>
-
-        <button
-          className="button"
-          onClick={() => {
-            props.$modal.present('modal2');
-          }}>
-          Open Modal2
-        </button>
-
-        <button
-          className="button"
-          onClick={() => {
-            props.$modal.present('dir1/dir2/dir3/modal');
-          }}>
-          Model in deep path
-        </button>
-      </React.Fragment>
+      <Container>
+        <ReactModalManager />
+      </Container>
     );
-  });
-
-  class App extends React.Component {
-    state = { hasUpdate: false, items: ['value1', 'value2', 'value3', 'value4'] };
-
-    componentDidMount() {
-      NxOfflineSw.install({
-        onUpdateReady: () => {
-          this.setState({ hasUpdate: true });
-        }
-      });
-    }
-
-    render() {
-      const ctx = require.context('./modals/', true, /\.js$/);
-      return (
-        <div className="app-container bg-gray-100">
-          <ReactModalManager
-            context={ctx}
-            inject={(e) => {
-              window.store = e;
-            }}>
-            <h2 style={{ marginBottom: 20 }}>My Modals App</h2>
-            <center className="mb-4">
-              <img src="https://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg" />
-            </center>
-            <Button />
-          </ReactModalManager>
-
-          <pre>
-            <code className="w-full p-2">{code}</code>
-          </pre>
-
-          <ReactSwUpdateTips value={this.state.hasUpdate} />
-          <ReactGithubCorner value="https://github.com/afeiship/react-modal-manager" />
-        </div>
-      );
-    }
-  }
-
-  ReactDOM.render(<App />, document.getElementById('app'));
+  };
 
   ```
 
-## todos
-- [ ] 在 `dismiss` 的时候，会有带一些data出去的需求
-- [ ] 在与其它的 `@observe`r 组合的时候，会出现无法触发的情况
-- [ ] 在 `present/dismiss` 的时候，配合一下全局事件，这样就可以完美处理 `data` 里带 `callback` 的需求了
-
-## documentation
+## preview
 - https://afeiship.github.io/react-modal-manager/
 
-
 ## license
 Code released under [the MIT license](https://github.com/afeiship/react-modal-manager/blob/master/LICENSE.txt).
 

README.md

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import ReactModalManager from '../src/main';
+
+describe('01/basic props', () => {
+  test('<BoilerplateReactTsComponent /> set content to body should be worked', () => {
+    render(<ReactModalManager />);
+    console.log(document.body.innerHTML);
+    expect(document.body.innerHTML.includes('Enjoy coding')).toBeTruthy();
+  });
+});

__tests__/index.spec.js

@@ -11,9 +11,6 @@
 npm install -S @jswork/react-modal-manager
 ```
 
-## properties
-__GENERATE_DOCS__
-
 ## usage
 1. import css
   ```scss
@@ -30,15 +27,9 @@ __GENERATE_DOCS__
 __GENERATE_DAPP__
   ```
 
-## todos
-- [ ] 在 `dismiss` 的时候，会有带一些data出去的需求
-- [ ] 在与其它的 `@observe`r 组合的时候，会出现无法触发的情况
-- [ ] 在 `present/dismiss` 的时候，配合一下全局事件，这样就可以完美处理 `data` 里带 `callback` 的需求了
-
-## documentation
+## preview
 - https://afeiship.github.io/react-modal-manager/
 
-
 ## license
 Code released under [the MIT license](https://github.com/afeiship/react-modal-manager/blob/master/LICENSE.txt).