@ironsource/shared-ui

Shared UI - VUE3 components library

Usage

npm i @ironsource/shared-ui

Then import the component in your Vue app:

import Button from '@ironsource/shared-ui/button';

Release flow

Pre-release

To release a pre-release version, follow these steps:

1. Checkout to release/x.x.x branch
2. Create a new branch from release/x.x.x branch
3. Make your changes
4. Commit your changes
5. Push your changes
6. Create a PR from your branch to release/x.x.x branch

Pushing to release/x.x.x branch will trigger pre-release.yml workflow and will create a pre-release version.

Breaking Change

To release a new version of the package (due to breaking changes), you need to follow the next steps:

1. Create a new branch from main branch with the name release/x.x.x (x.x.x - version of the package)
2. Push the branch to the remote repository
3. Create a new branch from release/x.x.x branch with the name feature/feature-name (feature-name - name of the feature)
4. Make changes in the code
5. Push the branch to the remote repository
6. Create a new PR from feature/feature-name branch to release/x.x.x branch
7. Add reviewers
8. Merge the PR to release/x.x.x branch
9. Create a new PR from release/x.x.x branch to main branch
10. Merge the PR to main branch

Merging release/x.x.x branch to main branch will trigger release.yml workflow and will create a new(not RC) version of the package.

Testing

Uses Vitest + Vue Test Utils (runs automatically on commit)

npm run test

run in watch mode:

npm run test:watch

run tests with coverage:

npm run test:coverage

Component Development

Generate a new component (using Hygen):

npm run generate:component componentName

Start storybook:

npm run storybook

Linking for local development in another project

When developing locally, you can link to the shared-ui library:

npm run build
cd ./dist
npm link
cd <your-project's-path>
npm link @ironsource/shared-ui

Add an alias for the vue & @vueuse/core dependencies import in your vite/webpack config:

vue: path.resolve('./node_modules/vue/dist/vue.runtime.esm-browser.js'),
'@vueuse/core': path.resolve('./node_modules/@vueuse/core/index'),

You may also want to add the following alias for absoulte imports:

'@': fileURLToPath(new URL('./src', import.meta.url)),

Lint

Uses ESLint + Prettier rules (runs automatically on commit)

npm run lint

Visual Tests

Uses jest, puppeteer and jest-image-snapshot packages

On CI process:

1. on every push the step-visual-test.yml workflow will be triggered
2. visual tests results will be saved on s3 bucket
3. the comparing will be against master->stable folder
4. unless there is a nested folder "stable" under a folder with the same branch name.
5. on failure a new folder with commit id will be created under the branch folder on s3
6. the failed tests will be under the "diff_output" nested folder
7. if changes are required, manually trigger the workflow with update input as true
8. a new folder named "stable" will be created under the branch name folder on s3
9. on merge to master branch folder will be copy to master.