Merge pull request #29 from coreui/dev-vnext

docs: add stubs

package.json

@@ -48,12 +48,12 @@
     "react": "16.x"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.3",
+    "babel-eslint": "^8.2.5",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-react": "^7.10.0",
     "nwb": "^0.22.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",

src/Aside.md

@@ -0,0 +1,13 @@
+### CoreUI `Aside` menu component
+
+| prop | default |
+| ------- | ---------
+| children  | 
+| className | `aside-menu`
+| display   | `sm, md, lg, xl, ""` 
+| fixed     | `false`
+| hidden    | `false`
+| isOpen    | `false`
+| offCanvas | `true`
+| tag       | `aside`
+

src/AsideToggler.js

@@ -49,7 +49,6 @@ class AppAsideToggler extends Component {
 
     delete attributes.display
     delete attributes.mobile
-    delete attributes.display
 
     const classes = classNames(className, 'navbar-toggler');
 

src/AsideToggler.md

@@ -0,0 +1,11 @@
+### CoreUI `AsideToggler` component
+
+
+prop | default
+--- | ---
+children  | `<span className="navbar-toggler-icon" />`
+className | `navbar-toggler`
+display   | `lg`
+mobile    | `false`
+tag       | `button`
+type      | `button`

src/Breadcrumb.md

@@ -0,0 +1,3 @@
+### CoreUI `Breadcrumb` component
+
+_todo_

src/Footer.md

@@ -0,0 +1,8 @@
+### CoreUI `Footer` component
+
+prop | default
+--- | ---
+children | 
+className | `app-footer`
+fixed | `false`
+tag | `footer`

src/Header.md

@@ -0,0 +1,10 @@
+### CoreUI `Header` component
+
+prop | default
+--- | ---
+children |
+className | `app-header`, `navbar`
+fixed | `false`
+tag | `header`
+
+

src/HeaderDropdown.md

@@ -0,0 +1,3 @@
+### CoreUI `HeaderDropdown` component
+
+_todo_

src/NavbarBrand.md

@@ -0,0 +1,24 @@
+### CoreUI `NavbarBrand` component
+
+
+prop | default
+--- | ---
+tag | `a`
+children | `<img src width height alt className/>`
+className | `navbar-brand`
+brand | `{src, width, height, alt, className: 'navbar-brand' }`
+full | `{src, width, height, alt, className: 'navbar-brand-full' }`
+minimized | `{src, width, height, alt, className: 'navbar-brand-minimized' }`
+
+
+example:
+```js
+import { AppNavbarBrand } from '@coreui/react';
+import logo from './logo.svg'
+import sygnet from './sygnet.svg'
+
+const full= { src: logo, width: 89, height: 25, alt: 'CoreUI Logo' }
+const minimized= { src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' }
+
+<AppNavbarBrand full={full} minimized={minimized} />
+```

src/README.md

@@ -0,0 +1,26 @@
+### [CoreUI for React](https://coreui.io/react) base components
+
+##### Layout components
+
+- [Aside](./Aside.md)
+- [AsideToggler](./AsideToggler.md)
+- [Breadcrumb](./Breadcrumb.md)
+- [Footer](./Footer.md)
+- [Header](./Header.md)
+- [HeaderDropdown](./HeaderDropdown.md)
+- [NavbarBrand](./NavbarBrand.md)
+- [Sidebar](./Sidebar.md)
+- [SidebarFooter](./SidebarFooter.md)
+- [SidebarForm](./SidebarForm.md)
+- [SidebarHeader](./SidebarHeader.md)
+- [SidebarMinimizer](./SidebarMinimizer.md)
+- [SidebarNav](./SidebarNav.md)
+- [SidebarToggler](./SidebarToggler.md)
+- [Switch](./Switch.md)
+
+
+##### Installation:
+`npm install @coreui/react`
+
+##### Import
+`import { AppAside } from '@coreui/react'`

src/Sidebar.md

@@ -0,0 +1,25 @@
+### CoreUI `Sidebar` component
+
+
+prop | default
+--- | ---
+children |
+className | `sidebar`
+compact | `false`
+display | `sm, md, lg, xl, ""` 
+fixed | `false`
+minimized | `false`
+isOpen | `false`
+offCanvas | `false`
+tag | `div`
+
+
+#### Supported content
+Sidebar come with built-in support for a handful of sub-components.
+
+- SidebarFooter
+- SidebarForm
+- SidebarHeader
+- [SidebarMinimizer](./SidebarMinimizer.md)
+- [SidebarNav](./SidebarNav.md)
+

src/SidebarFooter.md

@@ -0,0 +1,3 @@
+### CoreUI `SidebarFooter` component
+
+_todo_

src/SidebarForm.md

@@ -0,0 +1,3 @@
+### CoreUI `SidebarForm` component
+
+_todo_

src/SidebarHeader.md

@@ -0,0 +1,3 @@
+### CoreUI `SidebarHeader` component
+
+_todo_

src/SidebarMinimizer.md

@@ -0,0 +1,8 @@
+### CoreUI `SidebarMinimizer` component
+
+prop | default
+--- | ---
+children | 
+className | `sidebar-minimizer mt-auto`
+tag | `button`
+type | `button`

src/SidebarNav.md

@@ -0,0 +1,71 @@
+### CoreUI `SidebarNav` subcomponent
+
+
+prop | default
+--- | ---
+children | `this.navList(navConfig.items)`
+className | `sidebar-nav`
+navConfig | `{ items: [ { name url icon badge } ] }`
+isOpen | `false`
+tag | `nav`
+
+#### `navConfig` structure
+
+- title:
+````js
+{
+  title: true,
+  name: 'Theme',
+  class: ''              // optional class names space delimited list for title item ex: "text-center"
+  wrapper: {             // optional wrapper object
+    element: '',         // optional* valid HTML5 element tag ( *required when passing attributes)
+    attributes: {}       // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
+  },
+},
+````
+- item:
+````js
+{
+  name: 'Dashboard',
+  url: '/dashboard',
+  icon: `icon-speedometer',
+  class: '',                    // optional
+  variant: 'success',           // optional
+  badge: {
+    variant: 'info',
+    text: 'NEW',
+    class: ''                   // optional
+  }
+},
+````
+- item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items`
+````js
+{
+  name: 'Icons',
+  url: '/icons',
+  icon: 'icon-star',
+  children: [
+    {
+      name: 'Flags',     // item options apply
+      url: '/icons/flags',
+      icon: 'icon-star',
+      badge: {
+        variant: 'success',
+        text: 'NEW'
+      }
+    },
+  ]
+}
+````
+- divider:
+````js
+{
+  divider: true
+},
+````
+
+- order of precedence:
+````
+title > divider > children > item
+````
+

src/SidebarToggler.md

@@ -0,0 +1,11 @@
+### CoreUI `SidebarToggler` component
+
+
+prop | default
+--- | ---
+children | ` <span className="navbar-toggler-icon" />`
+className | `navbar-toggler`
+display | `lg`
+mobile | `false`
+tag | `button`
+type | `button`

src/Switch.md

@@ -0,0 +1,22 @@
+### CoreUI `Switch` component
+
+prop | default
+--- | ---
+color | `secondary`
+label | `false`
+outline | `false`
+size | `'', 'lg', 'sm'`
+checked | `false`
+defaultChecked | `false` 
+defaultValue | 
+value | 
+disabled | `false`
+form | 
+name | 
+required | `false`
+onChange | 
+type | `checkbox`
+variant | `''`
+className | `switch`
+dataOn | `On`
+dataOff | `Off`