@dotedu/ivx-web-story-forge v1.0.7

Story Forge

Get Started

Introduction

There are two ways to work on the project and each have their own commands to run. The two ways are if you are working on the event store and the other is if you are working on the application itself. The event store relies on unit testing and the karma test runner to check the tests around the various functionality. The application layer runs the whole project with compiling code. The following instructs to do both.

Application

To set up the project to work on the application do the following:

• Pull the repository
• Open the terminal
• Navigate to the root of the project
• Run the command npm install --production
• Run the command npm start

You will see a list of actions being run. Once it runs successfully, you should see the start screen of the story forge

Event Store

To set up and work on the event store and reducers do the following:

• Pull the repository
• Open the terminal
• Navigate to the root of the project
• Run the command npm install --production
• Run the command npm test

Adding a Module

Introduction

To add new UI components and tools to the StoryForge can feel daunting since there are so many weird managers and events stores to handle. Fortunately, there is a built in dev tools in the repository that action handles all of this for you including building the folder, templates and less files. However, to harness this power, there needs some explanation to how to work this

npm run build-module

The command that will build some bootstrap code to build out the module is: npm run build-module --module-path path/to/module

This command will do the following:

• Create a new folder at the path supplied
• Add a directive, controller, less and template file
• Register the directive to the applpication and the less file to the styles

How it creates and adds the directive is it takes the last two path parts and creates a directive. So, let's say we are adding a directive called "story-player-page-elements" The module path would be:

src/modules/story-player/page-elements

So to add the command, we would run this command:

npm run build-module --module-path src/modules/story-player/page-elements

This will register this to the app.js:

.directive("storyPlayerPageElements", StoryPlayerPlayerElements)

Generating Components

Following a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a gulp task to automate the "instantiation" of our components. The component boilerplate task generates this:

  componentName/
    componentName.js // entry file where all its dependencies load
    componentName.component.js
    componentName.controller.js
    componentName.html
    componentName.less // scoped to affect only its own template
    componentName.spec.js // contains passing demonstration tests

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious.

To generate a component, run:

gulp component --n (fully qualified component expression, ie. 'home.navbar') --m (module, default: admin)

Generating Directives

Following a consistent directory structure between directives offers us the certainty of predictability. We can take advantage of this certainty by using this gulp task to automate the instantiation of our directives. The directive boilerplate task generates this:

  directiveName/
    index.js // entry file where all its dependencies load
    directiveName.directive.js
    directiveName.controller.js
    directiveName.less // scoped to affect only its own template

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious.

To generate a directive, run:

gulp directive --n (directive name) --m (module, default: admin)

Generating Services

Following a consistent directory structure between services offers us the certainty of predictability. We can take advantage of this certainty by using this gulp task to automate the instantiation of our service. The service boilerplate task generates this:

serviceName/
    index.js // entry file where all its dependencies load
    serviceName.service.js

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious.

To generate a service, run:

gulp services --n (service name) --m (module, default: admin)

Generating Filters

Following a consistent file structure between filters offers us the certainty of predictability. We can take advantage of this certainty by using this gulp task to automate the instantiation of our filter. The filter boilerplate task generates this:

module/filters/
    filter-name.js

You will need to register the filter in the ..module/filters/index.js file. (Perhaps someone clever will make this part of this generator.)

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious.

To generate a filter, run:

gulp filter --n (filter name) --m (module, default: admin)

Generating Dialogs

The dialog boilerplate task generates a dialog as a sub folder in a component:

  [component]/[name]-dialog
    index.js // entry file where all its dependencies load
    [name]-dialog.controller.js
    [name]-dialog.html

To generate a dialog, run:

gulp dialog --n (fully qualified component expression, ie. 'home.navbar.editor')

Add a New Reducer

Introduction

To add a new reducer to the event store, you can use the dev tools that will set up the folder. The bootstrap code added will help navigate the structure and the tests to run on each action you will be creating.

npm run build-reducer

To set up the folder to create a new reducer you can use the dev tools called build reducer. The command is as follows:

npm run build-reducer --name reducerName