@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. Make sure you have checked your pre-release from release/x.x.x branch.
2. When you changes are ready to the release, run release.yml workflow it will create a new release version and publish it to npm.
3. Merge the PR to main branch and remove release/x.x.x branch.
4. Create new release/x.x.x from main branch again with the relevant major number.
5. From new release/x.x.x branch create a PR to main branch.

Playwright Shared Commands version will be published with the same version number as the main library

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

Playwright Shared Commands

This is a project to share fast access to shared components with creating a NPM package with the same version as Shared-UI.

To run Playwright with local storybook you have to run Strorybook first with the special build:

npm run storybook:pw

and then to open Playwright UI widget:

cd e2e/playwright
npm run pw:ui:local

Read more about this project here

Upload custom icons

For uploading a new custom icon like 'ad-network' icon type, follow the next steps:

• Compress your SVG

  • Go to SVGOMG tool and past your SVG icon
  • Then download the new compressed icon

• Validate your SVG

  • Open the SVG file with your editor
  • Make sure the it has fill="currentColor" wherever the color should be changeable
  • Make sure it has no width & height hardcoded properties
  • Make sure it has no ids like 'a' or 'b' which possibly won't be unique (change id="a" to id="applovin_a" for example)

• Upload to S3

  • Connect to AWS through Okta
  • Go to S3
  • Search Bucket named 'fusion-assets'
  • Go to the 'fusion-assets/assets/icons/...'
  • Go to the right folder for you
  • Drag your SVG files to the table in order to upload them

• Invalidate Cache

  • Connect to AWS through Okta
  • Go to CloudFront
  • Search a distribution named 'fusion.ironsrc.net'
  • Go to the 'Invalidations' tab
  • Create the correct invalidation according to what you've uploaded earlier (example: '/assets/icons/v4/ad-networks/*')
  • Note: you can use the old invalidations by clicking 'Copy to new'

• Clear your browser cache

  • Go to your StoryBook link
  • Clear your browser cache
  • New icons should be displayed!!