@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

Running pre-release.yml workflow will create a pre-release (-rc.xx) version and publish it to npm

Release

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. When you changes will ready to the release, run release.yml workflow it will create a new last release version and publish it to npm
11. Merge the PR to main branch

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

Storybook deployment

You can publish your branch to storybook by running "Deploy Docs" (storybook.yml) workflow with your branch. It will build and publish your branch stories. That you can check by entering this URL: https://mobile-shared-ui.ironsrc.mobi/branch_your-branch-name/

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.