added precise proptype for <Card> + bugfix

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "mockapi": "node jsonserver/server.js",
-    "servdev": "NODE_ENV=development webpack-dashboard -- webpack-dev-server --watch --colors --inline --hot --progress",
+    "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
+    "servdev-dashboard": "NODE_ENV=development webpack-dashboard -- webpack-dev-server --watch --colors --inline --hot --progress",
     "build": "NODE_ENV=production webpack -p",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

src/component/common/Card/Card.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import CardHeader from './CardHeader.jsx'
+import CardBody from './CardBody.jsx'
 
 const Card = props => {
   return (
@@ -11,8 +13,23 @@ const Card = props => {
 }
 export default Card
 
-Card.PropTypes = {
-  children: PropTypes.element.isRequired,
+Card.propTypes = {
+  // check https://stackoverflow.com/questions/27366077/only-allow-children-of-a-specific-type-in-a-react-component
+  // children: PropTypes.arrayOf( // children is an array
+  //   PropTypes.shape({ // of objects
+  //     type: PropTypes.oneOf([CardHeader, CardBody]) // that as an attribute 'type' equals to CardHeader or CardBody
+  //   })
+  // ),
+
+  // from http://www.mattzabriskie.com/blog/react-validating-children
+  children: PropTypes.arrayOf((propValue, key, componentName /* , location, propFullName */) => {
+    if (
+      key >= 3 ||
+      propValue.some(p => p.type !== CardHeader && p.type !== CardBody)
+    ) {
+      return new Error(`PropType Error: childrens of ${componentName} must be: 1 CardHeader and 1 CardBody.`)
+    }
+  }).isRequired,
   customClass: PropTypes.string
 }
 

src/component/common/Input/InputCheckbox.jsx

@@ -4,12 +4,13 @@ import classnames from 'classnames'
 
 const InputGroupText = props => {
   return (
-    <div className={classnames(`${props.parentClassName}`, props.customClass, 'form-check')}>
-      <label className={classnames(`${props.parentClassName}__label`, 'form-check-label')}>
-        <input type='checkbox' className={classnames(`${props.parentClassName}__label__checkbox`, 'form-check-input')} />
+    <label className={classnames(`${props.parentClassName}`, props.customClass, 'custom-control custom-checkbox')}>
+      <input type='checkbox' className='custom-control-input' />
+      <span className={classnames(`${props.parentClassName}__checkbox`, 'custom-control-indicator')} />
+      <span className={classnames(`${props.parentClassName}__label`, 'custom-control-description')}>
         {props.label}
-      </label>
-    </div>
+      </span>
+    </label>
   )
 }
 

src/component/common/Input/InputGroupText.jsx

@@ -12,6 +12,7 @@ const InputGroupText = props => {
         type={props.type}
         className={classnames(`${props.parentClassName}__input`, 'form-control')}
         placeholder={props.placeHolder}
+        value={props.value}
         onChange={props.onChange}
       />
       <div className={classnames(`${props.parentClassName}__msgerror`, 'invalid-feedback')}>
@@ -25,9 +26,10 @@ export default InputGroupText
 
 InputGroupText.PropTypes = {
   parentClassName: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['text', 'email', 'password', 'tel']).isRequired,
   customClass: PropTypes.string,
   icon: PropTypes.string,
-  type: PropTypes.oneOf(['text', 'email', 'password', 'tel']).isRequired,
   placeHolder: PropTypes.string,
   invalidMsg: PropTypes.string,
   onChange: PropTypes.func

src/container/Login.jsx

@@ -26,94 +26,73 @@ class Login extends React.Component {
   handleClickSubmit = () => this.props.dispatch(userLogin(this.state.inputLogin, this.state.inputPassword))
 
   render () {
-    // const { user } = this.props
-    // return (
-    //   <div>
-    //     <ConnectionForm
-    //       user={user}
-    //       onChangeLogin={this.handleChangeLogin}
-    //       onChangePassword={this.handleChangePassword}
-    //       onClickSubmit={this.handleClickSubmit}
-    //     />
-    //   </div>
-    // )
-    const LoginWrapper = props => (
+    return (
       <section className='loginpage'>
         <div className='container-fluid'>
-          {props.children}
-        </div>
-      </section>
-    )
-    const LoginCardWrapper = props => (
-      <div className='row justify-content-center'>
-        <div className='col-12 col-sm-11 col-md-8 col-lg-6 col-xl-5'>
-          {props.children}
-        </div>
-      </div>
-    )
-    const LoginCardAction = props => (
-      <div className='row mt-4 mb-4'>
-        <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
-          {props.children[0]}
-        </div>
-        <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-sm-right'>
-          {props.children[1]}
-        </div>
-      </div>
-    )
-    return (
-      <LoginWrapper>
-        <LoginLogo customClass='loginpage__logo' logoSrc={LoginLogoImg} />
 
-        <LoginCardWrapper>
-          <Card customClass='loginpage__connection'>
-            <CardHeader customClass='connection__header text-center'>{'Connexion'}</CardHeader>
+          <LoginLogo customClass='loginpage__logo' logoSrc={LoginLogoImg} />
+
+          <div className='row justify-content-center'>
+            <div className='col-12 col-sm-11 col-md-8 col-lg-6 col-xl-5'>
+
+              <Card customClass='loginpage__connection'>
+                <CardHeader customClass='connection__header text-center'>{'Connexion'}</CardHeader>
 
-            <CardBody formClass='connection__form'>
-              <InputGroupText
-                parentClassName='connection__form__groupemail'
-                customClass='mb-3 mt-4'
-                icon='fa-envelope-open-o'
-                type='email'
-                placeHolder='Adresse Email'
-                invalidMsg='Email invalide.'
-                onChange={this.handleChangeLogin}
-              />
+                <CardBody formClass='connection__form'>
+                  <InputGroupText
+                    parentClassName='connection__form__groupemail'
+                    customClass='mb-3 mt-4'
+                    icon='fa-envelope-open-o'
+                    type='email'
+                    placeHolder='Adresse Email'
+                    invalidMsg='Email invalide.'
+                    value={this.state.inputLogin}
+                    onChange={this.handleChangeLogin}
+                  />
 
-              <InputGroupText
-                parentClassName='connection__form__groupepw'
-                customClass=''
-                icon='fa-lock'
-                type='password'
-                placeHolder='Mot de passe'
-                invalidMsg='Mot de passe invalide.'
-                onChange={this.handleChangePassword}
-              />
+                  <InputGroupText
+                    parentClassName='connection__form__groupepw'
+                    customClass=''
+                    icon='fa-lock'
+                    type='password'
+                    placeHolder='Mot de passe'
+                    invalidMsg='Mot de passe invalide.'
+                    value={this.state.inputPassword}
+                    onChange={this.handleChangePassword}
+                  />
 
-              <LoginCardAction>
-                <InputCheckbox
-                  parentClassName='connection__form__rememberme'
-                  customClass=''
-                  label='Se souvenir de moi'
-                />
+                  <div className='row mt-4 mb-4'>
+                    <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+                      <InputCheckbox
+                        parentClassName='connection__form__rememberme'
+                        customClass=''
+                        label='Se souvenir de moi'
+                      />
+                    </div>
 
-                <LoginBtnForgotPw
-                  customClass='connection__form__pwforgot'
-                  label='Mot de passe oublié ?'
-                />
-              </LoginCardAction>
+                    <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-sm-right'>
+                      <LoginBtnForgotPw
+                        customClass='connection__form__pwforgot'
+                        label='Mot de passe oublié ?'
+                      />
+                    </div>
+                  </div>
 
-              <Button
-                htmlType='button'
-                bootstrapType='primary'
-                customClass='connection__form__btnsubmit'
-                label='Connexion'
-                onClick={this.handleClickSubmit}
-              />
-            </CardBody>
-          </Card>
-        </LoginCardWrapper>
-      </LoginWrapper>
+                  <Button
+                    htmlType='button'
+                    bootstrapType='primary'
+                    customClass='connection__form__btnsubmit'
+                    label='Connexion'
+                    onClick={this.handleClickSubmit}
+                  />
+                </CardBody>
+              </Card>
+
+            </div>
+          </div>
+
+        </div>
+      </section>
     )
   }
 }

src/container/Sidebar.jsx

@@ -0,0 +1,260 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { userLogin } from '../action-creator.async.js'
+
+class Sidebar extends React.Component {
+  // constructor (props) {
+  //   super(props)
+  //   this.state = {
+  //     inputLogin: '',
+  //     inputPassword: ''
+  //   }
+  // }
+
+
+  // <div className='sidebar-expandbar'>
+  //   <i className='fa fa-minus-square-o sidebar-expandbar__icon' />
+  // </div>
+
+render () {
+    return (
+      <div className='sidebar d-none d-lg-table-cell'>
+        <nav className='sidebar__navigation navbar navbar-light'>
+        <div className='sidebar__navigation__menu'>
+        <ul className='sidebar__navigation__menu__workspace navbar-nav collapse navbar-collapse'>
+        <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
+        <div className='sidebar__navigation__menu__workspace__item__number'>
+        01
+        </div>
+      <div className='sidebar__navigation__menu__workspace__item__name'>
+        Workspace 1
+      </div>
+
+      <div className='sidebar__navigation__menu__workspace__item__icon'>
+        <i className='fa fa-chevron-down' />
+        </div>
+      <ul className='sidebar__navigation__menu__workspace__item__submenu'>
+        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            <div className='dropdown__icon'>
+              <i className='fa fa-th' />
+            </div>
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Tous les fichiers
+              </div>
+            </div>
+          </div>
+          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Archivés
+              </div>
+            </div>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Supprimés
+              </div>
+            </div>
+          </div>
+        </li>
+        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            <div className='dropdown__icon'>
+              <i className='fa fa-signal dashboard-color' />
+            </div>
+            <div className='dropdown__title' id='navbarDropdown'>
+              <div className='dropdown__title__text'>
+                Tableau de bord
+              </div>
+            </div>
+          </div>
+          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Archivés
+              </div>
+            </div>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Supprimés
+              </div>
+            </div>
+          </div>
+        </li>
+        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            <div className='dropdown__icon'>
+              <i className='fa fa-list-ul task-color' />
+            </div>
+            <div className='dropdown__title'>
+              <div className='dropdown__title__text'>
+                Liste des tâches
+              </div>
+            </div>
+          </div>
+          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Archivés
+              </div>
+            </div>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Supprimés
+              </div>
+            </div>
+          </div>
+        </li>
+        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            <div className='dropdown__icon'>
+              <i className='fa fa-folder-o docandfile-color' />
+            </div>
+            <div className='dropdown__title'>
+              <div className='dropdown__title__text'>
+                Documents & fichiers
+              </div>
+            </div>
+          </div>
+          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Archivés
+              </div>
+            </div>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Supprimés
+              </div>
+            </div>
+          </div>
+        </li>
+        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            <div className='dropdown__icon'>
+              <i className='fa fa-comments talk-color' />
+            </div>
+            <div className='dropdown__title'>
+              <div className='dropdown__title__text'>
+                Discussions
+              </div>
+            </div>
+          </div>
+          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Archivés
+              </div>
+            </div>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Supprimés
+              </div>
+            </div>
+          </div>
+        </li>
+        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            <div className='dropdown__icon'>
+              <i className='fa fa-calendar calendar-color' />
+            </div>
+            <div className='dropdown__title'>
+              <div className='dropdown__title__text'>
+                Calendrier
+              </div>
+            </div>
+          </div>
+          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Archivés
+              </div>
+            </div>
+            <div className='dropdown__subdropdown__item dropdown-item'>
+              <div className='dropdown__subdropdown__item__iconfile alignname'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dropdown__subdropdown__item__textfile alignname'>
+                Documents Supprimés
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+      </li>
+
+      <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
+        <div className='sidebar__navigation__menu__workspace__item__number'>
+          02
+        </div>
+        <div className='sidebar__navigation__menu__workspace__item__name'>
+          Workspace 2
+        </div>
+
+        <div className='sidebar__navigation__menu__workspace__item__icon'>
+          <i className='fa fa-chevron-down' />
+        </div>
+      </li>
+
+      <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
+        <div className='sidebar__navigation__menu__workspace__item__number'>
+        03
+        </div>
+      <div className='sidebar__navigation__menu__workspace__item__name'>
+        Workspace 3
+      </div>
+
+      <div className='sidebar__navigation__menu__workspace__item__icon'>
+        <i className='fa fa-chevron-down' />
+        </div>
+    </li>
+    </ul>
+    </div>
+
+    </nav>
+      <div className='sidebar__btnnewworkspace'>
+        <button className='sidebar__btnnewworkspace__btn btn btn-success'>
+          Créer un workspace
+        </button>
+      </div>
+    </div>
+    )
+  }
+}
+
+const mapStateToProps = ({ user }) => ({ user })
+export default connect(mapStateToProps)(Sidebar)

src/container/Tracim.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import Footer from '../component/Footer.jsx'
 import Header from './Header.jsx'
+// import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
 import Page from './Page.jsx'
 import Home from './Home.jsx'
@@ -17,6 +18,7 @@ class Tracim extends React.Component {
       <div>
         <Header />
 
+        {/* <Sidebar /> */}
         <PrivateRoute exact path='/' component={Home} />
         <Route path='/login' component={Login} />
         <PrivateRoute path='/page' component={Page} />

src/css/Sidebar.styl

@@ -0,0 +1,118 @@
+.sidebar-expandbar
+  position absolute
+  left 0
+  display none
+  border 1px solid dark-blue
+  border-top-width 2px
+  padding 11px 15px
+  background-color blue
+  z-index 2
+  &__icon
+    font-size 18px
+    text-align center
+    cursor pointer
+    &:hover
+      color white
+
+.sidebar
+  display none
+  height 100%
+  background-color dark-blue
+  z-index 1
+
+sidebar-width = 300px
+.sidebar-visible
+  .sidebar-expandbar
+    left sidebar-width
+  .sidebar
+    display table-cell
+    vertical-align top
+  .containerdocument
+    display table-cell
+    vertical-align top
+
+.sidebar
+  padding-top 87px
+  &__btnnewworkspace
+    margin-top 40px
+    padding 10px
+    width 100%
+    &__btn
+      display block
+      margin 0 auto
+      padding 15px 30px
+  &__navigation
+    padding 0
+    &__menu
+      &__workspace
+        flex-direction column
+        &__item
+          position relative
+          margin-top 2px
+          width sidebar-width
+          background-color blue
+          cursor pointer
+          &__number
+            display inline-block
+            padding 5px 0 5px 0
+            width 50px
+            font-size 20px
+            letter-spacing 2px
+            text-align center
+            background-color light-blue
+          &__name
+            display inline-block
+            vertical-align top
+            padding 5px 5px
+            width 220px
+            font-size 20px
+            color white
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+          &__icon
+            display inline-block
+            color white
+          &__submenu
+            margin-bottom 0
+            padding-left 0
+            list-style none
+            background-color opacity-blue
+            &__dropdown
+              border-top 1px solid dark-blue
+              &:hover
+                background-color light-blue
+              &__showdropdown
+                padding 10px 0
+              .dropdown__icon
+                display inline-block
+                margin 0 35px 0 15px
+                font-size 20px
+              .dropdown__title
+                position relative
+                display inline-block
+                font-size 18px
+                font-weight 400
+                color dark-grey
+                cursor pointer
+                &::after //bootstrap override
+                  position absolute
+                  top 10px
+                  left 100%
+                &__text
+                  display inline-block
+                  width 200px
+              .dropdown__subdropdown
+                border-radius 0
+                padding 0
+                .alignname
+                  display inline-block
+                  font-size 18px
+                &__item
+                  cursor pointer
+                  border-top 1px solid dark-blue
+                  padding 13px 0
+                  &__iconfile
+                    padding-left 18px
+                  &__textfile
+                    margin-left 38px

src/css/index.styl

@@ -5,6 +5,7 @@ html, body, #content, #content > div
 
 @import 'Variable'
 
+@import 'Sidebar'
 @import 'Header'
 @import 'Footer'