@ironsource/shared-ui NPM

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.