add routes, modal service and component

app/components/modals/basic-modal.js

@@ -0,0 +1,69 @@
+import Component from '@ember/component';
+import move from 'ember-animated/motions/move';
+import { inject as service } from '@ember/service';
+import { fadeIn } from 'ember-animated/motions/opacity';
+import { fadeOut } from 'ember-animated/motions/opacity';
+import { set } from '@ember/object';
+import bezier from 'bezier-easing';
+
+export default Component.extend({
+  modal: service(),
+  tagName: '',
+  isActive: false,
+  duration: 500,
+
+  didInsertElement() {
+    this.name && this.modal.registerModal(this);
+  },
+
+  willDestroyElement() {
+    this.name && this.modal.destroyModal(this);
+  },
+
+  actions: {
+    onOutsideClick() {
+      this.close();
+    },
+
+    open() {
+      this.open();
+    },
+
+    close() {
+      this.close();
+    }
+  },
+
+  * transitionModalOverlay({ insertedSprites, removedSprites }) { // eslint-disable-line require-yield
+    for (let sprite of insertedSprites) {
+      fadeIn(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
+    }
+
+    for (let sprite of removedSprites) {
+      fadeOut(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
+    }
+  },
+
+  * transitionModalContent({ insertedSprites, removedSprites }) { // eslint-disable-line require-yield
+
+    for (let sprite of insertedSprites) {
+      sprite.startTranslatedBy(0, 1000);
+      move(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
+    }
+
+    for (let sprite of removedSprites) {
+      sprite.endTranslatedBy(0, 1000);
+      move(sprite, { easing: bezier(0.165, 0.84, 0.44, 1) });
+    }
+  },
+
+  open() {
+    set(this, 'isActive', true);
+    this.onOpen && this.onOpen();
+  },
+
+  close() {
+    set(this, 'isActive', false);
+  }
+});
+

app/components/modals/basic-modal/-content.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  click(e) {
+    e.stopPropagation();
+  }
+});

app/components/modals/basic-modal/-overlay.js

@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});

app/router.js

@@ -7,6 +7,9 @@ const Router = EmberRouter.extend({
 });
 
 Router.map(function() {
+  this.route('storage');
+  this.route('scanner');
+  this.route('summary');
 });
 
 export default Router;

app/routes/scanner.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/routes/storage.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/routes/summary.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/services/modal.js

@@ -0,0 +1,25 @@
+import Service from '@ember/service';
+
+export default Service.extend({
+  init() {
+    this._super(...arguments);
+    this.modals = {};
+  },
+
+  registerModal(reference) {
+    this.modals[reference.name] = reference;
+  },
+
+  destroyModal(reference) {
+    this.modals[reference.name] = null;
+  },
+
+  open(name) {
+    this.modals[name].open();
+  },
+
+  close(name) {
+    this.modals[name].close();
+  }
+});
+

app/templates/components/modals/basic-modal.hbs

@@ -0,0 +1,19 @@
+{{#modals/basic-modal/-overlay
+  isActive=this.isActive
+  animation=this.transitionModalOverlay
+  duration=this.duration
+}}
+{{/modals/basic-modal/-overlay}}
+
+{{#animated-if this.isActive use=this.transitionModalContent duration=this.duration}}
+  <div
+    role="button"
+    class="fixed top-0 left-0 w-full h-full flex justify-center items-center
+  z-60"
+    {{action "onOutsideClick"}}
+  >
+    <div class="flex flex-col w-1/3 bg-white rounded modal-css-animation">
+      {{yield (hash content=(component "modals/basic-modal/-content"))}}
+    </div>
+  </div>
+{{/animated-if}}

app/templates/components/modals/basic-modal/-content.hbs

@@ -0,0 +1 @@
+{{yield}}

app/templates/components/modals/basic-modal/-overlay.hbs

@@ -0,0 +1,8 @@
+{{#animated-if @isActive use=@animation duration=@duration}}
+  <div
+    class="fixed top-0 left-0 bg-black-transparent w-full h-full flex justify-center items-center z-50"
+  >
+    {{yield}}
+  </div>
+{{/animated-if}}
+