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 <a href="https://github.com/ironsource-mobile/shared-ui-ssp/blob/main/e2e/playwright/README.md">here</a>

## Upload custom icons

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

- Compress your SVG

  - Go to <a href="https://svgomg.net/">SVGOMG tool</a> 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

  - Go to https://github.com/ironsource-mobile/shared-platform-assets repo
  - Add relevant asset to a relevant place
  - Make PR and Merge after to main
  - It will be automatically deployed with cache invalidation

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