eehitus-visual-ui library

This project holds all the global styles required for eehitus-ui.

E-ehitus CSS with styles is included into E-ehitus UI Root component

Table of Contents

• Getting started with development
  • Prerequisites
  • Running locally
  • Local development
• Development patterns overview
  • Common components
  • Form validation
  • Translations
  • API requests
  • Testing
  • Debugging with source-maps
  • Branching

Getting started with development

Prerequisites

• Node.js (v18.20.6)
• Yarn (v1.x)

• Recommendation:
  • Node version manager
  • Node version manager for Windows

Running locally

• npm i yarn -g - If you don't have yarn installed locally for given node version
• yarn install
• yarn start

Local development

yarn start opens http://localhost:3000

You have to look for BrowserRouter definition to find the urls you can navigate to. Usually can be found at ./src/App.tsx or in the component rendered inside it.

• ./public/config.js contains all the endpoint URL-s for different microservices.
  • Default endpoint should end with /v1
  • You can specify a certain API to point to your projects API /project_ingress

Development patterns overview

Style guide

Sass architecture: the 7-1 pattern

Common components

• eehitus-ui-extras
  • New common business logic components or enums, should be added to this library
• TEDI library - E-Ehitus is moving to use Estonian TEDI library for react.
  • New features should be developed using them, if possible.
• ehr-components Old components
  • These are old components and you should not create new functionality with them if possible.
• eehitus-visuaal eehitus-ui has usage of global styles
  • When making changes there, make sure your change does not have impact to the rest of the UI libraries

Testing

For library unit testing we use Jest.

E2E Tests are located in this project.

Debugging with source-maps

If you have developed locally and when you update the library version in eehitus-ui project and start receiving errors, it's wise to generate local build using yarn cibuild:debug

This generates ./dist folder

Then go into eehitus-ui project

• Remove .cache eehitus-ui/node_modules/.cache
• Remove old dist eehitus-ui/node_modules/eehitus-*project_name*/dist
• Copy your project local debug build dist folder to eehitus-ui/node_modules/eehitus-*project_name*
• Start eehitus-ui using yarn start now the error should have source-maps and debugging it, should be easier.

Branching

For developing we use Git Flow branching pattern

Example branch names

• release/project_name
• fix/TICKET_NR-short-description
• feature/TICKET_NR-short-description
• company_name/feature/TICKET_NR-short-description

We don't recommend creating develop branch.

Good approach is to create a release/* branch and all new development in company_name/feature/* you create a Merge Request against release/*

You create tags on the release/* branch and you have a separate project namespace in rancher where you update eehitus-ui

Publishing

To get new version of the library up.

1. Go to Gitlab
2. Find your project and go to tags page document-ui as example
3. Create a New tag, specify version in semver pattern version-*.*.* add a description of project tag or other description
4. Update your projects eehitus-ui/package.json version and run yarn to generate new yarn.lock file and commit it
5. Create a New tag for eehitus-ui
6. Update the eehitus-ui in rancher project_namespace, you should never update the v1 ingress eehitus-ui. v1 represents master and should always be in stable state.