Development flow

There are 2 main branches - master and dev. master - stable version of app dev - development version

Development should be performed in branches.

Any change should to to dev or master thru Pull Requests (PR).

Build and Run

npm install # or yarn!
npm run dev

Open up localhost:5173 and start clicking around.

Start work on task

1. When developer should create branch from master and name it with pattern YYMMDD_<task_name>.

   Where:

   • YY - last 2 digits of current year
   • MM - 2 digits month
   • DD - 2 digits for day in month

   For instance it can be 190522_add_captions_to_form.

2. All changes should be made in this branch. All When all changes made, developer should create PR to dev branch.

3. This PR should reviewed and when approved, it will in in dev branch. Also reviewer should create PR to master branch.

4. Build machine should publish it to dev environment and then it should pass tests (or it can be tested locally).

5. When issue is resolved PR to master branch should be merged.

Coding

Documentation is listed in docs folder

Project documentation

For development it is recommended to use VS code

Recommended VS code plugins

Package and usages of the library.

This repository contains set of components that can be used as following:

• standalone application withing SvelteKit (mostly for testing)
• Storybook pages - for testing UI components
• library that published to NPM

Library purpose

Assumed that the library can be used as components for other projects.

UI

We use Svelte framework for visualization and SvelteKit.

Components

Components are created in folder src/lib/components. Component is one file or folder with few files. More details Svelte examples and Svelte API and Svelte tutorial.

Client side logic

Client side logic implemented with TypeScript and mostly located in folder src/lib/.

Structure

We use SvelteKit thus folder structure in SvelteKit expects to find two directories in the root of your project — src and static.

All libraries and components that can be re-used are located in folder lib.

We also have Storybook stories in src stories folder.

• you can run storybook tests using npm run storybook.
• stories are used for testing individual components.
• storybook used its default 6006 port

Routing

Since we use SvelteKit, we use its routing.

src/routes

See link above. ...

static

The static directory contains any static assets that should be available. These are served using sirv.

Production mode and deployment

To start a production version of your app, run npm run build && npm start. This will disable live reloading, and activate the appropriate bundler plugins.

Production mode support expected to use sveltekit adapters.