@wiztivi/dana-templates 0.0.1-beta-5

package/app-template/.editorconfig

@@ -0,0 +1,18 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+ij_javascript_method_call_chain_wrap = normal
+ij_javascript_object_literal_wrap = normal
+ij_javascript_var_declaration_wrap = split_into_lines

package/app-template/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+    "extends": [
+        "@dana"
+    ]
+}

package/app-template/.github/labeler.yml

@@ -0,0 +1,11 @@
+# https://github.com/actions/labeler#readme
+
+# BRANCH PREFIX
+feature:
+    - head-branch: '^feature/'
+
+bugfix:
+    - head-branch: '^bugfix/'
+
+release:
+    - head-branch: '^release/'

package/app-template/.github/workflows/demo-ci-cd.yml

@@ -0,0 +1,35 @@
+name: CI-CD
+
+on:
+    push:
+        branches:
+            - master
+            - "*-dev"
+    pull_request:
+    workflow_dispatch:
+
+jobs:
+    generate-labels:
+        name: Generate PR labels
+        uses: wiztivi-rd/shared-workflows/.github/workflows/generate-label.yml@master
+
+    lint:
+        name: Linter
+        uses: wiztivi-rd/shared-workflows/.github/workflows/npm-run.yml@master
+        secrets: inherit
+        with:
+            script: lint
+
+    unit-test:
+        name: Unit Testing
+        uses: wiztivi-rd/shared-workflows/.github/workflows/npm-run.yml@master
+        secrets: inherit
+        with:
+            script: test:unit
+
+    cucumber-test:
+        name: Cucumber Testing
+        uses: wiztivi-rd/shared-workflows/.github/workflows/npm-run.yml@master
+        secrets: inherit
+        with:
+            script: test:cucumber

package/app-template/Gruntfile.js

@@ -0,0 +1,31 @@
+/* jshint node: true */
+'use strict';
+
+module.exports = function (grunt) {
+
+    // Load tasks
+    grunt.loadNpmTasks('@dana/tools-grunt');
+
+    // Define project config
+    grunt.config.merge({
+        "global": {
+            "options": {
+                "appName": "My App"
+            }
+        }
+    });
+
+    grunt.registerTask("_dev", function () {
+        // Get tasks
+        var tasks = this.options().tasks;
+        // Run tasks
+        grunt.task.run(tasks);
+    });
+
+    grunt.registerTask("_package", function () {
+        // Get tasks
+        var tasks = this.options().tasks;
+        // Run tasks
+        grunt.task.run(tasks);
+    });
+};

package/app-template/README.md

@@ -0,0 +1,17 @@
+# Getting started
+
+Start the server:
+
+    npm start
+
+It should open a browser on `localhost:9000`.
+
+The server watch your sources files, so you don't need to restart it when a file has been changed; simply hits the refresh button of your browser.
+
+### Autocompletion
+
+Dana provides autocompletion script for bash and zsh:
+
+    dana completion <bash|zsh>
+
+**For more information, read the [Dana documentation](https://dana-framework.com/docs/overview)**

package/app-template/app.config.json

@@ -0,0 +1,54 @@
+{
+    "includes": [],
+    "default": {
+        "autoRun": true,
+        "resolution": {
+            "name": "fullHd",
+            "width": 1920,
+            "height": 1080
+        },
+        "Logger": {
+            "ConsoleAppender": {
+                "level": "info"
+            }
+        },
+        "locales": [
+            "en-US"
+        ],
+        "AppTheme": {
+            "fonts": {
+                "RobotoRegular": {
+                    "family": "Roboto",
+                    "path": "styles/fonts/Roboto-Regular.ttf"
+                },
+                "RobotoBold": {
+                    "family": "Roboto",
+                    "path": "styles/fonts/Roboto-Bold.ttf",
+                    "weight": 700
+                }
+            },
+            "defaultFont": "RobotoRegular"
+        },
+        "firstRoute": {
+            "id": "splash"
+        }
+    },
+    "testCucumber": {
+        "mixins": [
+            "default"
+        ],
+        "base": {
+            "name": "Cucumber",
+            "vendors": [
+                "@dana/engine-nodejs",
+                "@dana/vendor-test"
+            ],
+            "implementations": {
+                "PlayerPrimitive": "JsonPlayerPrimitive",
+                "Animation": "JsonAnimation",
+                "KeyEventAdapter": "NodeJsTestKeyEventAdapter"
+            }
+        },
+        "isTest": true
+    }
+}

package/app-template/i18n/LocaleStringEnUS.json

@@ -0,0 +1,7 @@
+{
+    "id": "en-US",
+    "strings": {
+        "splash.loading": "loading...",
+        "splash.loaded": "welcome !"
+    }
+}

package/app-template/i18n/README.md

@@ -0,0 +1,32 @@
+# Internationalization Bundles
+
+All application interface texts should be referenced by a text key in the application code / templates
+
+The target text must be defined in the `LocaleStringXXX.json` file contained in this folder
+
+## Format
+
+This will then be visible and easily editable in EXCEL as:
+
+```json
+{
+  "id": "fr-FR",
+  "strings": {
+        "home.welcome": "welcome"
+  }
+}
+```
+
+## Configuration
+
+You **MUST** configure the locales used for your application. You can have different locales depending on the profile, but each profile must at least declare one locale.
+
+In `app.config.json`:
+
+```json
+{
+    "default": {
+        "locales": ["en-GB", "fr-FR"]
+    }
+}
+```

package/app-template/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "application",
+    "version": "0.1.0",
+    "description": "Application build by DANA",
+    "main": "Gruntfile.js",
+    "keywords": [
+        "JavaScript",
+        "wiztivi",
+        "DANA"
+    ],
+    "devDependencies": {
+        "pre-commit": "1.2.2"
+    },
+    "engineStrict": true,
+    "engines": {
+        "node": ">=12.22.1",
+        "npm": ">=6.14.4"
+    },
+    "pre-commit": [
+        "lintdiff"
+    ],
+    "scripts": {
+        "start": "grunt serve --profile=template-css",
+        "lint": "wtv lint",
+        "lintdiff": "wtv lintdiff",
+        "test:unit": "wtv test:unit:project",
+        "coverage:unit": "wtv clean:unit:coverage && wtv test:unit:coverage:project",
+        "test:cucumber": "grunt dev-node --profile=testCucumber && wtv test:cucumber",
+        "coverage:cucumber": "wtv clean:cucumber:coverage && grunt dev-node --profile=testCucumber && wtv test:cucumber:coverage",
+        "test:cucumber:debug": "node --inspect --debug-brk node_modules/.bin/cucumber-js -f node_modules/wtv-cucumber-steps/src/formatters/PrettyFormatter.js --require ./node_modules/@dana/core/scripts/wiztivi/tests/cucumber/initCucumber.js --require ./tests/automation/init.js ./tests/automation/features/**/*.feature --publish-quiet --exit",
+        "ci": "npm run lint && npm run coverage:unit && npm run coverage:cucumber"
+    }
+}

package/app-template/profiles/app.config.browser-css.json

@@ -0,0 +1,16 @@
+{
+    "base-css": {
+        "base": {
+            "name": "Css",
+            "vendors": [
+                "@dana/renderer-css"
+            ]
+        }
+    },
+    "template-css": {
+        "mixins": [
+            "default",
+            "base-css"
+        ]
+    }
+}

package/app-template/profiles/app.config.browser-lightning.json

@@ -0,0 +1,16 @@
+{
+    "base-lightning": {
+        "base": {
+            "name": "Lightning HTML5",
+            "vendors": [
+                "@dana/renderer-lightning-html5"
+            ]
+        }
+    },
+    "template-lightning": {
+        "mixins": [
+            "default",
+            "base-lightning"
+        ]
+    }
+}

package/app-template/scripts/app/README.md

@@ -0,0 +1,6 @@
+# App
+
+Main Wiztivi Application Folder.
+
+`Screens`/`Views` must be created into the `ui` folder.
+

package/app-template/scripts/app/TemplateAppRoutes.js.hbs

@@ -0,0 +1,18 @@
+import $AbstractAppRoutes from "@AbstractAppRoutes";
+import $SplashScreen from "@SplashScreen";
+
+/**
+ *
+ * @name {{appName}}AppRoutes
+ * @class
+ * @extends AbstractAppRoutes
+ * @implementation
+ * @routes splash
+ */
+export default $AbstractAppRoutes.declare("{{appName}}AppRoutes", {
+    methods: /** @lends {{appName}}AppRoutes.prototype */ {
+        splash: function (data) {
+            return $SplashScreen.display(data);
+        }
+    }
+});

package/app-template/scripts/app/app.js.hbs

@@ -0,0 +1,17 @@
+// App definition
+import $Application from "@Application";
+
+/**
+ * {{appName}}App
+ *
+ * @name {{appName}}
+ * @extends Application
+ * @class
+ *
+ * @property {string} name - Application name
+ */
+export default $Application.declare("{{appName}}App", {
+    properties: /** @lends {{appName}}App.prototype */ {
+        name: "{{appName}}"
+    }
+});

package/app-template/scripts/app/theme/AppTheme.js

@@ -0,0 +1,42 @@
+import $AbstractTheme from "@AbstractTheme";
+
+/**
+ * The theme groups all the common properties for the ui style
+ *
+ * @name AppTheme
+ * @class
+ * @extends AbstractTheme
+ *
+ * @implementation
+ */
+export default $AbstractTheme.declare("AppTheme", {
+    statics: /** @lends AppTheme */ {
+        FULL_SCREEN_WIDTH: 1920,
+        FULL_SCREEN_HEIGHT: 1080,
+        DANA_LOGO_URL: "dana"
+    },
+
+    ///////////////////////////////////////////////////////////////////////
+    // FONTS
+    ///////////////////////////////////////////////////////////////////////
+    RobotoRegular: "RobotoRegular",
+    RobotoBold: "RobotoBold",
+
+    properties: /** @lends AppTheme.prototype */{},
+
+    methods: {
+        /**
+         * Return the image path
+         *
+         * @param {string} name the name of the image
+         * @param {string} extension extension of the image, default is "png"
+         * @returns {string}
+         */
+        getImageUrl: function (name, extension) {
+            extension = extension || "png";
+            const base = this.baseUrl || this.profile.basePath || "";
+
+            return base + "images/" + name + "." + extension + (this.profile.flags.remoteBundle === true ? "?v=" + this.profile.version : "");
+        }
+    }
+});

package/app-template/scripts/app/ui/screens/AppScreen.js

@@ -0,0 +1,106 @@
+import $Screen from "@Screen";
+import $ScreenEvents from "@ScreenEvents";
+import $MNavigation from "@MNavigation";
+
+/**
+ * All screens **MUST** inherit from this screen.
+ *
+ * @name AppScreen
+ * @class
+ * @extends Screen
+ *
+ * @property {boolean} overflow true by default
+ */
+export default $Screen.declare("AppScreen", {
+    traits: [$MNavigation],
+
+    properties: {
+        overflow: true
+    },
+
+    listen: [
+        $ScreenEvents.ready
+    ],
+
+    inputs: ["keypress.UP", "keypress.DOWN", "keypress.LEFT", "keypress.RIGHT", "keypress.OK", "keypress.BACK"],
+
+    methods: /** @lends  AppScreen.prototype */ {
+        //////////////////////////////////////////////////////////////////////////////////////////
+        // EVENT CALLBACKS
+        //////////////////////////////////////////////////////////////////////////////////////////
+        /**
+         * Called when a screen is ready
+         * The data have been retrieved, the children are shown
+         */
+        onScreenReady: function () {},
+
+        onKeypressLEFT: function (key) {
+            return this.left(key);
+        },
+
+        onKeypressRIGHT: function (key) {
+            return this.right(key);
+        },
+
+        onKeypressUP: function (key) {
+            return this.up(key);
+        },
+
+        onKeypressDOWN: function (key) {
+            return this.down(key);
+        },
+
+        onKeypressOK: function (key) {
+            return this.ok(key);
+        },
+
+        onKeypressBACK: function (key) {
+            return this.back(key);
+        },
+
+        //////////////////////////////////////////////////////////////////////////////////////////
+        // NAVIGATION
+        //////////////////////////////////////////////////////////////////////////////////////////
+        /**
+         * @override
+         */
+        left: function (key) {
+            return this.focusedChild.hasNavigation ? this.focusedChild.left(key) : false;
+        },
+        /**
+         * @override
+         */
+
+        right: function (key) {
+            return this.focusedChild.hasNavigation ? this.focusedChild.right(key) : false;
+        },
+
+        /**
+         * @override
+         */
+        up: function (key) {
+            return this.focusedChild.hasNavigation ? this.focusedChild.up(key) : false;
+        },
+
+        /**
+         * @override
+         */
+        down: function (key) {
+            return this.focusedChild.hasNavigation ? this.focusedChild.down(key) : false;
+        },
+
+        /**
+         * @override
+         */
+        ok: function (key) {
+            throw new Error("You must implement ok !");
+        },
+
+        /**
+         * @override
+         */
+        back: function (key) {
+            throw new Error("You must implement back !");
+        }
+    }
+});

package/app-template/scripts/app/ui/screens/SplashScreen.js

@@ -0,0 +1,58 @@
+import $AppScreen from "@AppScreen";
+import $LoaderView from "@LoaderView";
+import $TimerManager from "@TimerManager";
+
+/**
+ * The first screen that is shown, use to show a boot splash
+ *
+ * @name SplashScreen
+ * @class
+ * @extends AppScreen
+ *
+ * @property {TimerManager} timerManager - Instance of TimerManager
+ * @property {number} splashDuration - Duration in ms to display splash screen
+ *
+ * @screen
+ */
+export default $AppScreen.declare("SplashScreen", {
+    statics: {
+        HIDE_SPLASH_SCREEN_TIMER_ID: "SplashScreen:Hide"
+    },
+    properties: {
+        timerManager: {class: $TimerManager},
+        splashDuration: 2000
+    },
+    children: /** @lends SplashScreen.prototype */ {
+        loader: {class: $LoaderView}
+    },
+    methods: /** @lends SplashScreen.prototype */ {
+        /**
+         * Called before the screen is shown
+         * The flow is interrupted until the promise has been resolved/rejected
+         *
+         * @param {Object} [context] The context shared by the screens during display
+         */
+        beforeShow: function (context) {
+            this.timerManager.setTimeout(() => {
+                console.warn("FIXME: route to home !");
+            }, this.splashDuration, this.statics.HIDE_SPLASH_SCREEN_TIMER_ID);
+        },
+
+        /**
+         * Called before the screen is hidden
+         * The flow is interrupted until the promise has been resolved/rejected
+         *
+         * @param {Object} [context] The context shared by the screens during display
+         */
+        beforeHide: function (context) {
+            this.timerManager.stop(this.statics.HIDE_SPLASH_SCREEN_TIMER_ID);
+        }
+    },
+
+    style: {
+        loader: {
+            x: ({parent}) => (parent.width - parent.loader.width) / 2,
+            y: ({parent}) => (parent.height - parent.loader.height) / 2
+        }
+    }
+});

package/app-template/scripts/app/ui/views/LoaderView.js

@@ -0,0 +1,31 @@
+import $View from "@View";
+import $Theme from "@Theme";
+import $ImagePrimitive from "@ImagePrimitive";
+
+/**
+ * A loader
+ *
+ * @name LoaderView
+ * @class
+ * @extends View
+ *
+ */
+export default $View.declare("LoaderView", {
+    children: {
+        image: {
+            class: $ImagePrimitive,
+            url: ({theme}) => theme.getImageUrl($Theme.DANA_LOGO_URL)
+        }
+    },
+
+    style: {
+        width: $Theme.FULL_SCREEN_WIDTH,
+        height: $Theme.FULL_SCREEN_HEIGHT,
+        image: {
+            width: 323,
+            height: 140,
+            x: ({width}) => ($Theme.FULL_SCREEN_WIDTH - width) / 2,
+            y: ({height}) => ($Theme.FULL_SCREEN_HEIGHT - height) / 2
+        }
+    }
+});

package/app-template/tests/README.md

@@ -0,0 +1,70 @@
+# Tests
+
+Application tests can be categorized in 2 categories:
+
+1. Behavior Tests, as in [BDD](https://en.wikipedia.org/wiki/Behavior-driven_development)
+2. Unit Tests, as in [TDD](https://en.wikipedia.org/wiki/Test-driven_development)
+
+## Documentation
+
+To help writing tests, Dana provides:
+
+* an [Overview](https://dana-framework.com/docs/tests/overview/) documentation with code examples
+* some helpers global functions (only accessible from test files)
+* a [Chai WTV module](https://dana-framework.com/docs/tests/ft/dana-steps/)
+
+## Behavior Tests
+
+They are meant to validate the implementations of the specifications given by the project owner
+
+### Features
+
+The specifications should first be written in [GherkinSyntax](http://docs.behat.org/en/v2.5/guides/1.gherkin.html) in
+the `"features"` folder:
+
+* Each **feature** should be described in its own `"{featureName}.feature"` file
+* Features might be grouped by topic folders (often more or less matching main screens)
+* Feature files contain a list of **Scenarios** (mostly matching with **user stories**)
+
+### Specifications Tests
+
+Executable specification test file are created in the `"spec"` folder for each existing `".feature"` file. They follow 
+the same topic folder hierarchy.
+
+#### Note
+
+A template can initially be created from the `".feature"` files using the command `grunt gherkin_mocha` (requires first
+to be installed via `npm install grunt-gherkin-mocha`)
+
+### BDD (Behavior Driven Development)
+
+The BDD approach is to, feature by feature:
+ 
+1. first get user stories and write behavior tests from them (they should all fail).
+2. then start implementing the feature
+3. then check its validity until all user stories (scenarios) succeed   
+
+## Unit Tests
+
+These are more low level tests that expect to unitary confirm that a function you created will always work as expected.
+**They are very useful to identify regressions origin** (ex: when modifying a function break another one that was using it).
+
+Such test files are meant to be written in the `"unit"` folder.
+
+### TDD
+
+The TDD approach is to, JS file by JS file:
+
+1. first write a matching unit test file with one unit test per expected function implementation (they should all fail).
+2. then start implementing the functions in the original JS file
+3. then check JS function implementations validity until all unit tests succeed   
+
+## Bug Tests
+
+Each time a bug is identified by a project owner, it should be described to the developer team via user stories they can 
+follow to reproduce it.  
+
+A dedicated test should be written from this scenario:
+ 
+* to be sure the issue is fixed
+* to prevent from any further regression.

package/app-template/tests/automation/features/splash.feature

@@ -0,0 +1,5 @@
+Feature: Splash
+
+    Scenario: Show splash
+        Given i start on "[SPLASH]" screen
+        And "welcome message" is focused