WIP: addon docs

.npmignore

@@ -29,3 +29,4 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+/config/addon-docs.js

addon/components/mobile-pane-infinite.js

@@ -8,11 +8,12 @@ import { A } from '@ember/array';
 
 /**
  * @class MobilePaneInfiniteComponent
+ * @public
  */
 export default Component.extend({
   layout,
 
-  classNames: ['mobile-pane__infinite-scroller'],
+  classNames: ['mobile-pane-infinite'],
 
   router: service(),
   memory: service('memory-scroll'),

addon/components/mobile-pane/nav.js

@@ -8,16 +8,37 @@ import ComponentParentMixin from 'ember-mobile-pane/mixins/component-parent';
 import NavItem from 'ember-mobile-pane/components/mobile-pane/nav/item';
 import Tween from 'ember-mobile-core/tween';
 
+/**
+ * @class MobilePaneNavComponent
+ */
 export default Component.extend(ComponentParentMixin, {
   layout,
   tagName: 'nav',
 
   classNames: ['mobile-pane__nav'],
 
-  // public
+  /**
+   * @argument navScrollOffset
+   * @type {number}
+   * @default 75
+   */
   navScrollOffset: 75,
+
+  /**
+   * @argument transitionDuration
+   * @type {number}
+   * @default 0
+   */
   transitionDuration: 0,
 
+  /**
+   * Fired when a nav item is clicked
+   *
+   * @argument onItemClick
+   * @type {function}
+   */
+  onItemClick(){},
+
   // protected
   activeIndex: 0,
   activePane: null,
@@ -30,11 +51,6 @@ export default Component.extend(ComponentParentMixin, {
   initialRender: true,
   runningAnimation: null,
 
-  /**
-   * Fired when a nav item is clicked
-   */
-  onItemClick(){},
-
   // lifecycle
   didInsertElement(){
     this._super(...arguments);
@@ -152,6 +168,7 @@ export default Component.extend(ComponentParentMixin, {
       }
     }
   },
+
   _followPan(scrollLeftTarget, navScrollOffset, indicatorLeftTarget, indicatorWidthTarget){
     // change scroll based on indicator position
     if(scrollLeftTarget > 50){

addon/components/mobile-pane/pane.js

@@ -19,7 +19,7 @@ export default Component.extend(ComponentChildMixin, {
    * Title of the pane. Used in the NavComponent  if it's present.
    *
    * @argument title
-   * @type ''
+   * @type {string}
    * @default null
    */
   title: null,
@@ -35,6 +35,7 @@ export default Component.extend(ComponentChildMixin, {
    * Whether or not the pane was rendered before. Used for lazyRendering.
    *
    * @property didRender
+   * @type {boolean}
    * @private
    */
   didRender: false,
@@ -43,6 +44,7 @@ export default Component.extend(ComponentChildMixin, {
    * True if this pane is the active pane.
    *
    * @property isActive
+   * @type {boolean}
    * @private
    */
   isActive: computed('activePane', function(){

addon/components/mobile-pane/simple-indicator.js

@@ -4,20 +4,35 @@ import layout from '../../templates/components/mobile-pane/simple-indicator';
 import { htmlSafe } from '@ember/string';
 import { get, computed } from '@ember/object';
 
+/**
+ * @class MobilePaneSimpleIndicatorComponent
+ */
 export default Component.extend({
   layout,
 
   classNames: ['scroller__simple-indicator'],
 
   // public
+
+  /**
+   * Optional warp effect for indicator
+   *
+   * @argument warpEnabled
+   * @type {boolean}
+   * @default false
+   */
   warpEnabled: false,
 
+  /**
+   * @argument onClick
+   * @type {function}
+   */
+  onClick(){},
+
   // protected
   navItems: null,
   currentOffset: 0,
 
-  onClick(){},
-
   indicatorStyle: computed('currentOffset', function(){
     const offset = -1 * get(this, 'currentOffset') * get(this, 'navItems.length');
     let style = `transform: translateX(${offset}%)`;

addon/mixins/component-child.js

@@ -31,6 +31,7 @@ import ComponentParentMixin from 'ember-mobile-pane/mixins/component-parent';
  * @class ComponentChild
  * @namespace Mixins
  * @private
+ * @hide
  */
 export default Mixin.create({
 

addon/mixins/component-parent.js

@@ -33,6 +33,7 @@ import Mixin from '@ember/object/mixin';
  * @class ComponentParent
  * @namespace Mixins
  * @private
+ * @hide
  */
 export default Mixin.create({
 
@@ -54,7 +55,7 @@ export default Mixin.create({
    * Register a component as a child of this parent
    *
    * @method registerChild
-   * @param child
+   * @param {ComponentChild} child
    * @public
    */
   registerChild(child) {
@@ -67,7 +68,7 @@ export default Mixin.create({
    * Remove the child component from this parent component
    *
    * @method removeChild
-   * @param child
+   * @param {ComponentChild} child
    * @public
    */
   removeChild(child) {

app/styles/ember-mobile-pane.scss

@@ -69,7 +69,7 @@
   }
 }
 
-.mobile-pane__infinite-scroller {
+.mobile-pane-infinite {
   .mobile-pane__child {
     &.mobile-pane__child--previous, &.mobile-pane__child--next {
       max-height: 100vh;

package.json

@@ -35,7 +35,13 @@
     "@ember/optional-features": "^0.6.3",
     "broccoli-asset-rev": "^2.7.0",
     "ember-cli": "~3.8.1",
+    "ember-cli-addon-docs": "^0.6.10",
+    "ember-cli-addon-docs-yuidoc": "^0.2.1",
     "ember-cli-dependency-checker": "^3.1.0",
+    "ember-cli-deploy": "^1.0.2",
+    "ember-cli-deploy-build": "^1.1.1",
+    "ember-cli-deploy-git": "^1.3.3",
+    "ember-cli-deploy-git-ci": "^1.0.1",
     "ember-cli-eslint": "^4.2.3",
     "ember-cli-htmlbars-inline-precompile": "^1.0.3",
     "ember-cli-inject-live-reload": "^1.8.2",
@@ -60,5 +66,6 @@
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
-  }
+  },
+  "homepage": "https://nickschot.github.io/ember-mobile-pane"
 }

tests/dummy/app/router.js

@@ -1,12 +1,22 @@
-import EmberRouter from '@ember/routing/router';
+import AddonDocsRouter, { docsRoute } from 'ember-cli-addon-docs/router';
 import config from './config/environment';
 
-const Router = EmberRouter.extend({
+const Router = AddonDocsRouter.extend({
   location: config.locationType,
   rootURL: config.rootURL
 });
 
 Router.map(function() {
+  docsRoute(this, function() {
+    this.route('usage');
+    this.route('quickstart');
+
+    this.route('components', function(){
+      this.route('mobile-pane');
+      this.route('mobile-pane-infinite');
+    });
+  });
+  this.route('not-found', { path: '/*path' });
 });
 
 export default Router;

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,3 @@
-<h2 id="title">Welcome to Ember</h2>
+{{docs-header}}
 
 {{outlet}}

tests/dummy/app/templates/docs.hbs

@@ -0,0 +1,22 @@
+{{#docs-viewer as |viewer|}}
+
+  {{#viewer.nav as |nav|}}
+    {{nav.section "Introduction"}}
+    {{nav.item "Introduction" "docs.index"}}
+    {{nav.item "Usage" "docs.usage"}}
+    {{nav.item "Quickstart" "docs.quickstart"}}
+
+    {{nav.section "Components"}}
+    {{nav.item "Mobile Pane" "docs.components.mobile-pane"}}
+    {{nav.item "Mobile Pane Infinite" "docs.components.mobile-pane-infinite"}}
+  {{/viewer.nav}}
+
+  {{#viewer.main}}
+    <div class="docs-container">
+      <div class="docs-section">
+        {{outlet}}
+      </div>
+    </div>
+  {{/viewer.main}}
+
+{{/docs-viewer}}

tests/dummy/app/templates/docs/index.md

@@ -0,0 +1,3 @@
+# Introduction
+
+An [ember-cli](https://www.ember-cli.com) addon to provide (infinite) pannable panes.

tests/dummy/app/templates/docs/quickstart.md

@@ -0,0 +1,11 @@
+# Quickstart
+
+1. **Install Mobile Pane**
+
+```
+ember install ember-mobile-pane
+```
+
+2. **...**
+
+TBD

tests/dummy/app/templates/docs/usage.md

@@ -0,0 +1,9 @@
+# Usage
+## Installation
+From your application directory run: 
+
+```sh
+ember install ember-mobile-pane
+```
+
+The addon will automatically add the necessary SCSS import to your `app.scss` or include the required CSS if you are not using `ember-cli-sass`.

tests/dummy/app/templates/index.hbs

@@ -0,0 +1,8 @@
+{{#docs-hero
+  logo="ember"
+  slimHeading="Ember"
+  strongHeading="Mobile Pane"
+  byline="An ember-cli addon to provide (infinite) pannable panes."
+}}
+
+{{/docs-hero}}

tests/dummy/app/templates/not-found.hbs

@@ -0,0 +1,4 @@
+<div class="docs-container">
+  <h1>Not found</h1>
+  <p>This page doesn't exist. {{#link-to "index"}}Head home?{{/link-to}}</p>
+</div>

tests/dummy/config/environment.js

@@ -44,6 +44,8 @@ module.exports = function(environment) {
   }
 
   if (environment === 'production') {
+    // Allow ember-cli-addon-docs to update the rootURL in compiled assets
+    ENV.rootURL = 'ADDON_DOCS_ROOT_URL';
     // here you can enable a production-specific feature
   }