Merge pull request #4 from Quilljou/master

feat: ✨ button docs demo

.eslintrc

@@ -21,6 +21,7 @@
     "import/no-extraneous-dependencies": 0,
     "import/no-dynamic-require": 0,
     "global-require": 0,
-    "@typescript-eslint/no-var-requires": 0
+    "@typescript-eslint/no-var-requires": 0,
+    "no-plusplus": 0
   }
 }

docs/App.tsx

@@ -1,24 +1,22 @@
 import React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
 
-// import Home from '../scripts/docs/render';
-// import Document from './pages/Documents';
-// import NotFound from './pages/404';
+import NotFound from './pages/404';
+import Document from './pages/Document/Document';
+import Example from './pages/Example/Example';
 
-import 'normalize.css';
-import 'github-markdown-css';
 import './index.styl';
 
-import Document from './pages/Document/Document';
 
 export default class App extends React.Component {
 	public render(): React.ReactNode {
 		return (
 			<Router>
 				<Switch>
-					<Route exact path="/" component={Document} />
-          {/* <Route path="/docs/:component" component={Document} />
-					<Route path="*" component={NotFound} /> */}
+          <Route path="/docs" component={Document} />
+          <Route path="/examples/:md" component={Example} />
+          <Route exact path="/" render={() => (<Redirect to="/docs" />)} />
+          <Route path="*" component={NotFound} />
 				</Switch>
 			</Router>
 		);

docs/assets/style/base.styl

@@ -1,4 +1,4 @@
-@require "~@/common/stylus/variable.styl"
+@require "../../../src/common/stylus/variable.styl"
 
 html, body
   width: 100%

docs/assets/style/index.styl

@@ -1,3 +1,3 @@
-@require '~@/common/stylus/reset.styl'
+@require "../../../src/common/stylus/variable.styl"
 @require "./base.styl"
 @require "./md.styl"

docs/assets/style/md.styl

@@ -1,4 +1,4 @@
-@require "~@/common/stylus/variable.styl"
+@require "../../../src/common/stylus/variable.styl"
 
 .md-body
   font-size: $fontsize-medium

docs/components/Back/Back.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class Back extends React.Component {
+  public render(): React.ReactNode {
+    return (
+      <span>back</span>
+    );
+  }
+}

docs/components/Display/Display.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import './index.styl'
+
+interface DisplayProps {
+  path: string
+}
+
+export default class Display extends React.Component<DisplayProps> {
+  public render(): React.ReactNode {
+    const { path } = this.props;
+    if(!path) return null;
+    const ifrSrc = `/examples/${path}`
+    return (
+      <div className="page-display">
+        <div className="display-wrapper">
+          <section className="mofang-demo">
+            <iframe src={ifrSrc} frameBorder="0" width="100%" height="100%" scrolling="no" title="diplay"></iframe>
+          </section>
+        </div>
+      </div >
+    );
+  }
+}

docs/components/Display/index.styl

@@ -0,0 +1,29 @@
+@require "../../../src/common/stylus/variable.styl"
+
+.page-display
+  position: relative
+  .display-wrapper
+    position: relative
+    width: 330px
+    height: 645px
+    top: 50%
+    transform: translate(0, -50%)
+    margin: 0 56px 0 26px
+    background: url("./iphoneX.png") no-repeat center 0
+    background-size: 100%
+    .mofang-demo
+      position: absolute
+      top: 64px
+      left: 21px
+      right: 23px
+      bottom: 22px
+      overflow: hidden
+      border-radius: 0 0 35px 35px
+      border: 1px solid #edf0f4
+      border-top: none
+      background-color: #edf0f4
+      iframe
+        // safari shit
+        width: 0
+        max-width: 100%
+        min-width: 100%

docs/components/Docs/Docs.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Route, RouteComponentProps } from 'react-router-dom';
+
+import SideList from '../SideList/SideList'
+import Display from '../Display/Display'
+import Back from '../Back/Back'
+import Markdown from '../Markdown/Markdown'
+import './index.styl'
+
+
+export default class Docs extends React.Component<RouteComponentProps> {
+  public render(): React.ReactNode {
+    const { match } = this.props;
+    const path = window.location.pathname.split('/').pop()
+    return (
+      <div className="docs-view">
+        {/* <img className="menu" src="./close.svg" alt="close" /> */}
+        {/* <img className="menu" v-show="!showCatalog"  src="./menu.svg" alt="menu"/> */}
+        {/* <Back /> */}
+        {/* <div  className="mask"></div> */}
+        <div className="nav-list-wrapper">
+          <SideList />
+        </div>
+        <Route path={`${match.path}/:md`} component={Markdown}></Route>
+        <Display path={path}/>
+      </div >
+    );
+  }
+}

docs/components/Docs/index.styl

@@ -0,0 +1,95 @@
+@require "../../../src/common/stylus/variable.styl"
+
+.docs-view
+  display: flex
+  width: 100%
+  height: 100%
+  box-sizing: border-box
+  flex-wrap: wrap
+  @media screen and (max-width: 960px)
+    position: relative
+    height: auto
+    &::before
+      position: fixed
+      top: 48px
+  .menu
+    display: none
+    @media screen and (max-width: 960px)
+      display: block
+      z-index: 5
+      position: fixed
+      right: 6px
+      top: 4px
+      width: 20px
+      height: 20px
+      padding: 10px
+    &:active
+      opacity: .6
+  .nav-list-wrapper
+    width: 279px
+    height: 100%
+    border-right: 1px solid #e3e3e3
+    @media screen and (max-width: 960px)
+      position: fixed
+      right: 0
+      top: 48px
+      bottom: 0
+      height: auto
+      background-color: $color-white
+      z-index: 1
+      overflow: hidden
+      transform: translate(100%, 0)
+      transition: all 0.4s ease
+      border-right: none
+      &.active
+        transform: translate(0, 0)
+  @media screen and (max-width: 960px)
+    .mask
+      z-index: 1
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      background-color: transparent
+      &.active
+        background-color: rgba(0, 0, 0 ,0.05)
+        transition: all 0.4s ease
+  .page-sidelist
+    height: 100%
+    padding: 50px 0
+    margin-right: -1px
+    box-sizing: border-box
+    overflow-y: auto
+    @media screen and (max-width: 960px)
+      height: 100%
+      padding: 30px 0
+      font-size: 12px
+      .nav-li
+        .nav-name
+          font-size: 15px
+        .angle
+          font-size: 12px
+        .arrow
+          top: 27px
+  .page-doc
+    position: relative
+    flex: 1
+    height: 100%
+    padding: 54px 30px 30px
+    box-sizing: border-box
+    overflow-y: auto
+    @media screen and (max-width: 960px)
+      flex: 1 1 100%
+      height: auto
+      padding: 20px
+      font-size: 13px
+    h2:first-child
+      margin-top: 0
+  .page-display
+    flex: none
+    height: 100%
+    overflow-y: auto
+    @media screen and (max-width: 960px)
+      flex: 1 1 100%
+      height: 680px