@dokedu/ui

Dokedu UI

Dokedu UI consists of highly developed Vue components and their documentation. There are different themes and it is possible to create custom themes to customize the look.

How to use it in your own Vue app

yarn add @dokedu/ui

In order to properly use @dokedu/ui you have to configure some things in vue.config.js

vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                sassOptions: {
                    indentedSyntax: true,
                    includePaths: ['node_modules', 'src/assets/css/']
                },
                additionalData(data, cfg) {
                    if (cfg.resourcePath.includes('.vue'))
                        return '@import @dokedu/ui/css/_import\n' + data;
                    return data;
                }
            }
        }
    }
}

You can then import the code and styling in your main.ts main.ts

//import base js and styling
import DokeduUI from "@dokedu/ui"
import "@dokedu/ui/css/_import.sass"

//import pre defined themes
import "@dokedu/ui/themes/dokedu.sass"
//import custom themes
import "./assets/css/theme.sass"

app.use(DokeduUI, {})

Use local development version in your own app

As a developer who develops both @dokedu/ui and another app simultaneously, you might find it useful to test new @dokedu/ui features directly in your app, without the need of releasing new versions of @dokedu/ui every time. You can link your local dev version to your app!

First, execute the yarn script yarn buildLink or yarn buildLinkWindows.

Then, in your other app, you can use yarn link @dokedu/ui. This will throw away the old "stable" version and create a link to the new dev version.

Don't forget to execute yarn buildLink in the root directory of @dokedu/ui every time you want to create a new dev version. The link however persists until you disable it.

If you want to go back to the stable version of @dokedu/ui and disable the link, you can use yarn unlink @dokedu/ui and yarn install --force. After that, you can execute yarn buildUnlink or yarn buildUnlinkWindows in the disable the created link completely.

Update Dokedu UI in your app

You can update to the latest version with the command yarn upgrade --latest @dokedu/ui

Release management

The master branch of @dokedu/ui is protected. In order to create a new release there are multiple things which have to be done.

• While still on develop, increment the version in package.json
• Someone creates a pull request from develop to master
• Two people have to approve the PR (Tom, Aaron, Felix or Luc)
• PR gets merged
• One of the two people creates a new release with github

Drone is then going to automatically lint, test, build and deploy the new version.

Setup ESLint

Setup ESLint in Webstorm

• Open up the project with Webstorm
• Press CTRL + ALT + S to open up the settings (You can also go to File -> Settings)
• In the searchbar type: ESLint and press ENTER
• Make sure it is on Automatic ESLint Configuration
• Tick Run ESLint --fix on save to be true
  • This option will run everytime you save a file, it will lint + fix the file
• Click on OK

Setup ESLint in Visual Studio Code

• Open up the project with Visual Studio Code
• Go to the extensions tab on the left side
• And install ESLint and Prettier
• Restart VSCode
• Press CTRL + SHIFT + P and type in ESLint
• Run the command called: Show Output Channel
• A Popup will appear asking if you want to load in the project ESLint config, press Allow
• All done!

Running TESTS

Test command

When you are in the root dir of the project, you want to run

• yarn test

This will run the cypress test inside the console and show you the output of all tests in an overview

Why test?

There are a ton of reasons we do it. Here are a two of them:

• Speeds up your workflow so you can develop software faster
• Helps you ensure you don't break existing code when making changes

A test is code that throws an error when the actual result of something does not match the expected output. It can get more complicated when you're dealing with code that depends on some state to be set up first (like a component needs to be rendered to the document before you can fire browser events, or there needs to be users in the database)

How to write these tests

• More indepth coming soon
• Please refer to the Cypress Docs for now https://docs.cypress.io/guides/getting-started/writing-your-first-test.html

Cypress Docs

https://docs.cypress.io/guides/getting-started/writing-your-first-test.html

Cypress Code Coverage

To handle code coverage collected during each test, they created a @cypress/code-coverage Cypress plugin. It merges coverage from each test and saves the combined result. It also calls nyc (its peer dependency) to generate static HTML reports for human consumption.

More info at https://docs.cypress.io/guides/tooling/code-coverage.html#E2E-code-coverage