@rbc-dsse/framework-library-vue v2.1.28

RBC Wealth Management UI Library Vue.js base code

Project setup

The Vue.js version of library is the main base which the library relies on. The Angular and React libraries are translations of the Vue.js one.

Combined with the style repository and the testing repository, this creates the full ecosystem for the UI library of components for the Design System of RBC Wealth Management.

Architecture

v2/
├── framework-library-specs
├── framework-library-css
├── framework-library(-vue)
├── framework-library-angular
└── framework-library-react

Folder structure

/_templates/ 							# contains the Hygen generator templates (https://www.hygen.io/).
/public/ 								# contains the example site.
/tests/ 								# contains configuration for Cypress and E2E testing.
/src/ 									# contains the source code.
├── components/ 						# contains the source code for the components and modules. 
│   └── NameOfComponent
│       ├── index.js 					# for deployment purposes.
│       ├── NameOfComponent.example.vue	# contains the example of the component.
│       ├── NameOfComponent.props.js 	# contains component props.
│       ├── NameOfComponent.specs.js 	# contains component tests.
│       └── NameOfComponent.vue 		# contains the main Vue component.
├── mixins/ 							# contains mixins shared among the components.
├── utils/ 								# contains utilities exported for the library.
└── views/ 								# contains pages for the example site.

Getting started

Install dependencies

npm install

Writing tests

In order to write new test cases or use tests from dev within the framework-library-specs repo, the specs repo must be linked:

cd framework-library-specs
npm link
cd ../framework-library(-vue)
npm link @rbc-dsse/framework-library-specs

To unlink:

cd framework-library(-vue)
npm unlink @rbc-dsse/framework-library-specs
cd ../framework-library-specs
npm unlink

Working with CSS

To add and preview new CSS within the library or to use the latest CSS from dev within the framework-library-css repo, the CSS repo must be linked:

cd framework-library-css
git checkout dev
npm link
cd ../framework-library(-vue)
npm link @rbc-dsse/framework-library-css

If the framework-library-css repo is placed at the same root as the framework-library JS repo, this will enable the npm run dev:css command, which allows the CSS to be viewed and updated alongside the JS library. Otherwise, simply run the npm run dev command in the CSS repo to preview the styles.

To unlink:

cd framework-library(-vue)
npm unlink @rbc-dsse/framework-library-css
cd ../framework-library-css
npm unlink

Contributing

Branching model

The branching model being used is a standard approach. The production code is stored in the master branch and the development code is stored in the dev branch.

All development work should be made on the dev branch, making sure to always pull the latest code before contributing.

• master : production branch
• dev : development branch
• feature/{name of feature} : to branch out and create a feature branch.
• fix/{name of fix} : to branch out and create a fix branch.

Working with us

You can create a pull request from dev back into dev. If it is an approved feature or fix, a reviewer will approve the changes and merge it into dev.

Working

Compile and hot-reload for development

npm run serve

Compile and minify for production

npm run build

Lint and fix files

npm run lint

Lint and fix CSS

npm run lint:css

Run end-to-end tests

npm run test:e2e

Create a component

npm run component
npm run component {{Name}}

Create a mixin

npm run mixin
npm run mixin {{Name}}