@kathondvla/ux-patterns

About

These are shared AngularJS 1.7 (visual) components, that we can use throughout various projects. Exposes the ux patterns defined for kathondvla UI applications in this realtiemboard

Mind you that this git repository is not a single npm module, but a collection of many npm modules.

For UX-patterns developers

Use npm link

While developing new modules from inside an application, but inside this git repo, npm link is the way to go. That way, all your changes to either repositories will be visible instantly while rebuilding/repackaging your frontend application.

In ux-patterns

npm link

In your other project

npm link @kathondvla/ux-patterns

(This will make no changes to package.json, but only update node_modules with a link to the proper repo, so if you npm install @kathondvla/ux-patterns again the link will be broken!)

Rules for adding to this repo

• Every component (or small set of very closely related components) must be packaged as a single AngularJS module.
• Each AngularJS module must be one npm module!
• Every module exports the AngularJS module name!
  In ./index.js

  const angular = require( 'angular' ) // obviously
  
  const moduleName = 'uxHeaderModule' // because we use it in 2 places
  
  const m = angular.module( moduleName )
  
  m.component( 'uxHeaderBar', require( './uxHeaderBar' ) )
  
  module.exports = moduleName // !!!

• Every module MUST have a README.md where you explain each component's inputs ('s-' attributes + the data structure tey expect) and outputs (events + the data structure they will produce)
• All component names must be prefixed!
• All 'bindings' must start with s-
  In ./uxHeaderBar/index.js

  class UxHeaderBarController {
        constructor() {
            this.classVariable1 = ...
        }
  
        classMethod1( ... ) { } //for example an event handler
    }
  
   module.exports = {
                        template: require('./template.html'),
                        controllerAs: 'ctrl',
                        bindings: {
                            sInputVar: '<'
                        },
                        controller: UxHeaderBarController
                    }

• All bindings should be one-way data bound (unless for extremely simple components)

We do this because:

• In any frontend application you should only package what you need in order to keep the downloaded js bundle small.
• If we start mixing up the module systems (npm & AngularJS), things become hard to understand.
• See how to use below!

For UX-patterns users

How to use this repo in your own application

Each module will export its own Angular module name, so you only have to do:

/* readable and easy to understand */
const myApp = angular.module( "myAppName", [
    require( `@kathondvla/ux-patters/header-bar` ),
    require( `@kathondvla/ux-patters/footer-bar` )
  ] )

instead of

/* DON'T DO THIS ! */
require( `@kathondvla/ux-patters/header-bar` )  
require( `@kathondvla/ux-patters/footer-bar` )

const myApp = angular.module( "myAppName", [
            'uxHeaderBar',
            'uxFooterBar'
] )

Modules and directives (incomplete)

• vsko.patterns
  • vsko.headerBar

    <header-bar></header-bar>

  • vsko.footerBar

    <footer-bar on-start-button="startWizard" next="next"></footer-bar>

  • vsko.wizardBar

    <wizard-bar steps="steps"></wizard-bar>

  • vsko.surface

    <surface col-size="10" next="enddate" show-footer="true"></surface>

  • vsko.components

    <button-primary-large></button-primary-large>
    <button-primary-light></button-primary-light>