### Install and Start Project

Source: https://github.com/epam/uui/blob/develop/templates/uui-cra-template/template/README.md

Clone the repository and then run these commands to build and start the project locally. Open http://localhost:3000 in your browser.

```bash
yarn
yarn start
```

--------------------------------

### Add Component Example Link

Source: https://github.com/epam/uui/blob/develop/dev-docs/uui-documentation.md

Add this configuration to link a new component example to a documentation page. Ensure the componentPath matches the example file name.

```json
{ "name": "Basic", "componentPath": "alert/Basic.example.tsx" }
```

--------------------------------

### Install Root and Server Dependencies

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

After cloning the repository, install the root dependencies and then navigate to the server directory to install its specific dependencies.

```bash
yarn
cd ./server
yarn
```

--------------------------------

### Build and Start the Server

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

Navigate back to the root directory to build the server and start the UUI application. This command also enables watch mode for local development.

```bash
yarn build-server
yarn start
```

--------------------------------

### Initialize Podman Machine

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

Commands to initialize, configure, and start the Podman machine for container management. Ensure Podman is installed before running these.

```shell
podman machine init
podman machine set --user-mode-networking
podman machine start
```

--------------------------------

### Install Local Test Dependencies

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

Command to install dependencies required for running E2E tests locally without Docker. This is a one-time setup step.

```shell
yarn --cwd uui-e2e-tests local-test-e2e-deps-install
```

--------------------------------

### Start Beta Release

Source: https://github.com/epam/uui/blob/develop/dev-docs/release-workflow.md

Use this command to initiate a beta release. This command publishes packages with the 'beta' dist-tag instead of 'latest'.

```bash
yarn release-beta
```

--------------------------------

### Install @epam/promo Package

Source: https://github.com/epam/uui/blob/develop/epam-promo/readme.md

Use this command to add the promo package to your project dependencies.

```bash
yarn add @epam/promo
```

--------------------------------

### Run Development Server

Source: https://github.com/epam/uui/blob/develop/templates/uui-nextjs-template/template/README.md

Execute this command to start the Next.js development server. Access your application at http://localhost:3000.

```bash
yarn run dev
```

--------------------------------

### Run Next.js Demo App (App Router)

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

This command starts the Next.js demo application using the app router configuration.

```bash
yarn next-app:dev
```

--------------------------------

### Install @epam/electric Package

Source: https://github.com/epam/uui/blob/develop/epam-electric/readme.md

Use this command to add the Electric skin components package to your project.

```bash
yarn add @epam/electric
```

--------------------------------

### Start Stable Release

Source: https://github.com/epam/uui/blob/develop/dev-docs/release-workflow.md

Initiate the stable release process for UUI packages. Follow the on-screen prompts in the console. Ensure you are logged into the GitHub and npm accounts with the necessary write permissions.

```bash
yarn release
```

--------------------------------

### Install Dependencies

Source: https://github.com/epam/uui/blob/develop/AGENTS.md

Install project dependencies using Yarn. This includes global dependencies and dependencies within the server workspace.

```bash
yarn
cd ./server
yarn
cd ..
```

--------------------------------

### Pure Function Callback Examples

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Pure function callbacks, often starting with 'get' or 'is', are expected to return a value based solely on their arguments without side effects. Use for accessing or computing data related to component items.

```javascript
/** A pure function that gets entity name from entity object.
 *  Default: (item) => item.name. 
 */
getName?: (item: TItem) => string;
```

```javascript
/** A pure function that gets options for each row. 
 * Allow to make rows non-selectable, as well as many other tweaks. 
 */
getRowOptions?: (item: TItem, index: number) => DataRowOptions<TItem, TId>;
```

```javascript
/**
 * A pure function that gets the initial folding state of a row.
 * Can be used to unfold all or some items at the start.
 * If omitted, all rows would be folded.
 */
isFoldedByDefault?(item: TItem): boolean;
```

--------------------------------

### Install Podman on macOS (ARM)

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

Command to install Podman on macOS for ARM processors. Ensure the version is at least 5.0.1. This is an alternative to Colima.

```shell
brew install podman
```

--------------------------------

### Run Development Server

Source: https://github.com/epam/uui/blob/develop/templates/uui-cra-template/template/README.md

Starts the application in development mode. Access it at http://localhost:3000. Edits will trigger hot reloads, and lint errors appear in the console.

```bash
npm start
```

--------------------------------

### Run Next.js Demo App (Pages Router)

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

This command starts the Next.js demo application using the pages router configuration.

```bash
yarn next-pages:dev
```

--------------------------------

### Example MCP Server Configuration

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

This JSON configuration snippet shows how to add a GitHub MCP server to your AI-powered IDE's global configuration. Ensure you replace the placeholder with your actual GitHub Copilot token.

```json
{
  "mcpServers": {
    "github": {
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer <your-github-copilot-token>"
      }
    }
  }
}
```

--------------------------------

### Install Colima and Docker CLI

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

Commands to install Colima and the Docker CLI using Homebrew on macOS. Colima requires the Docker CLI client but does not use Docker to run containers.

```shell
# Install "docker" because Colima needs docker CLI client. Colima does not use docker to run containers.
brew install docker

# Install Colima itself
brew install colima

# Start
colima start
```

--------------------------------

### Pure Function Callbacks

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Props that start with 'get' or 'is' and are expected to return a value. These functions must be pure, meaning their output depends only on inputs and they have no side effects.

```APIDOC
## Pure Function Callbacks

### Description
These props, typically starting with 'get' or 'is', provide a way to retrieve or compute values based on component state or data. They are expected to be pure functions.

### Purity Requirements
- The function's return value must depend solely on its input arguments.
- The function must not modify any non-local state.
- The function must not have any side effects.

### API Documentation Pattern
```
/**
 * A pure function that gets [something] [from|for|given|of] [something].
 * 
 * [Additional info - use cases, details]
 * 
 * [If there's a default behavior:]
 * If omitted, [default behavior]
 */
```

### Examples
```javascript
/** A pure function that gets entity name from entity object. 
 *  Default: (item) => item.name. 
 */
getName?: (item: TItem) => string;

/** A pure function that gets options for each row. 
 * Allow to make rows non-selectable, as well as many other tweaks. 
 */
getRowOptions?: (item: TItem, index: number) => DataRowOptions<TItem, TId>;

/**
 * A pure function that gets the initial folding state of a row.
 * Can be used to unfold all or some items at the start.
 * If omitted, all rows would be folded.
 */
isFoldedByDefault?(item: TItem): boolean;
```
```

--------------------------------

### Install Loveship Package

Source: https://github.com/epam/uui/blob/develop/loveship/readme.md

Use this command to add the Loveship package to your project dependencies.

```bash
yarn add @epam/loveship
```

--------------------------------

### Example CSS Variable Output

Source: https://github.com/epam/uui/blob/develop/uui-build/ts/themeTokens.md

This is an example of the extra information about CSS variables that is added to the ThemeOutput.json file.

```json
{
  "codeSyntax": {
    "WEB": "var(--uui-control-border-focus)"
  }
}
```

--------------------------------

### Create New App with UUI Template

Source: https://github.com/epam/uui/blob/develop/templates/uui-cra-template/README.md

Use this command to create a new React application with the UUI template. Ensure you have Node.js and npm/yarn installed.

```sh
npx create-react-app my-app --template @epam/uui
```

```sh
yarn create react-app my-app --template @epam/uui
```

--------------------------------

### Run Next.js with Public UUI Version

Source: https://github.com/epam/uui/blob/develop/next-demo/next-app/README.md

Follow these steps to set up and run the Next.js application using the latest public version of the UUI library. Ensure node_modules and .next folders are removed before installation.

```bash
cd ./next-app
# remove folders ./node_modules and ./.next if they are is
# then
yarn
yarn dev ## for manual check the application

## to check whether pages are rendered run tests
yarn test
```

--------------------------------

### Create Vite App with UUI Template

Source: https://github.com/epam/uui/blob/develop/README.md

Use this command to create a new application with the UUI template using Vite. Ensure degit is installed or use npx degit@latest.

```sh
npx -- degit@latest https://github.com/epam/UUI/templates/uui-vite-template my-app
```

--------------------------------

### SCSS Module Example

Source: https://github.com/epam/uui/blob/develop/templates/uui-cra-template/template/README.md

Demonstrates how to import and use styles from a SCSS module file in a TypeScript/React component. The generated class names are unique.

```scss
.my-header {
    color: red;
}
```

```tsx
import * as React from 'react';
import css from './MainPage.module.scss';

export const MyComponent = <div className={ css.mainPanel }>
```

--------------------------------

### Run Next.js with Public UUI Version

Source: https://github.com/epam/uui/blob/develop/next-demo/next-pages/README.md

Commands to set up and run the Next.js application using the latest public version of the UUI library. Ensure you remove existing node_modules and .next folders before installation.

```bash
cd ./next-pages
# remove folders ./node_modules and ./.next if they are is
# then
yarn
yarn dev ## for manual check the application

## to check whether pages are rendered run tests
yarn test
```

--------------------------------

### Configure Docker Engine Override

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

Example of how to override the default Docker container engine using a .env file. This allows specifying alternative tools like 'docker' if Podman is not preferred or available.

```shell
UUI_DOCKER_CONTAINER_ENGINE=docker
```

--------------------------------

### Render Callbacks

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Callback props that accept a function to render specific parts of a component. Props start with 'render' and should return ReactNode.

```APIDOC
## Render Callbacks

### Description
Render callbacks allow customization of component parts by providing a function that returns ReactNode. These props typically start with 'render'.

### API Documentation Pattern
```
/** Render callback for [description of which part will be rendered]. 
 * 
 * [optional additional info - use cases, details] 
 * 
 * [if component renders something by default]
 * If omitted, [component name or description of what will be rendered] will be rendered.
 * 
 * [if nothing is rendered by default]
 * If omitted, no [component part] will be rendered.
 */
```

### Examples
```javascript
/** 
 * Render Callback for each picker row.
 * Can be used to add subtitles, avatars, etc. [link to example]
 * If omitted, DataTableRow will be rendered.
*/
renderRow?: (props: DataRowProps<TItem, TId>) => ReactNode;

/** 
 * Render Callback for the footer below the calendar. 
 * If omitted, no footer will be rendered.
 */
renderFooter?(): ReactNode;
```
```

--------------------------------

### Event Handlers

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Functions executed in response to specific events. Props start with 'on', often receive 'event' as a parameter, and typically return void.

```APIDOC
## Event Handlers

### Description
Event handlers are functions that execute when a specific event occurs, defining the component's behavior in response to user interactions or system events.

### API Documentation Pattern
```
/** Called when [event description]. */
```

### Examples
```javascript
/** Called when component is clicked */
onClick?(e?: MouseEventHandler<T>): void;

/** Called when value needs to be changed (usually due to user interaction) */
onValueChange(newValue: T): void;

/** Called when accept icon is clicked 
 * If provided, enables accept (check) icon.
 */
onAccept?(): void;
```
```

--------------------------------

### Run Single Integration Test with .only

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

For integration tests, append `.only` to the test definition to run a specific test case. Example: 'pickerInput/LazyTreeInput'.

```typescript
test.only('pickerInput/LazyTreeInput'
```

--------------------------------

### Render Callback Example

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Render callbacks are functions used to customize the rendering of specific component parts. They should return ReactNode. Use to add custom elements or modify default rendering.

```javascript
/** 
 * Render Callback for each picker row.
 * Can be used to add subtitles, avatars, etc. [link to example] 
 * If omitted, DataTableRow will be rendered.
*/
renderRow?: (props: DataRowProps<TItem, TId>) => ReactNode;
```

```javascript
/** 
 * Render Callback for the footer below the calendar. 
 * If omitted, no footer will be rendered.
 */
renderFooter?(): ReactNode;
```

--------------------------------

### Event Handler Callback Example

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Event handlers are functions executed in response to specific events. They typically receive an 'event' parameter and return void. Use when defining component behavior for user interactions.

```javascript
/** Called when component is clicked */
onClick?(e?: MouseEventHandler<T>): void;
```

```javascript
/** Called when value needs to be changed (usually due to user interaction) */
onValueChange(newValue: T): void;
```

```javascript
/** Called when accept icon is clicked 
 * If provided, enables accept (check) icon.
 */
onAccept?(): void;
```

--------------------------------

### Define Screenshot Tests for Components

Source: https://github.com/epam/uui/blob/develop/dev-docs/e2e-tests.md

Configures screenshot tests for the Tag component, specifying previews, skins, and conditions like hover states. This setup is used in `uui-e2e-tests/tests/previewTests/preview.e2e.ts`.

```typescript
.add(tag, [
        {
            previewId: [TTagPreview['Color Variants']],
            skins: SKINS.promo_loveship_electric,
            slow: true,
        },
        {
            previewId: [TTagPreview['Size Variants']],
        },
        {
            onlyChromium: true,
            previewId: [TLinkButtonPreview['Color Variants']],
            previewTag: 'PseudoStateHover',
            skins: SKINS.promo_loveship_electric,
            forcePseudoState: [{ state: 'hover', selector: '.uui-tag' }],
        },
    ])
```

--------------------------------

### Boolean Scalar Property Examples

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Boolean scalar properties, typically starting with 'is', are used to toggle features or visual states of a component. Use to control component behavior and appearance.

```javascript
/** Pass true to disable editing, and visually de-emphasize value of the component */
isDisabled?: boolean;
```

```javascript
/** Pass true to disable editing. Unlike isDisabled, keep component's value readable. */
isReadonly?: boolean;
```

```javascript
/** Pass true to mark component as required */
isRequired?: boolean;
```

```javascript
/** Pass true to indicate that dropdown is open, in case when component acts as dropdown. */
isOpen?: boolean;
```

```javascript
/** Indicated that component act as dropdown */
isDropdown?: boolean;
```

```javascript
/** Indicates that dropdown is open */
isOpen?: boolean;
```

--------------------------------

### Build for Production

Source: https://github.com/epam/uui/blob/develop/templates/uui-cra-template/template/README.md

Creates a production-ready build in the `build` folder, optimized for performance. The build is minified and includes content hashes in filenames.

```bash
npm run build
```

--------------------------------

### Build and Run for Debugging

Source: https://github.com/epam/uui/blob/develop/templates/uui-nextjs-template/template/README.md

To debug client code, ensure `productionBrowserSourceMaps: true` is set in `next.config.js`. Then, build the project and run the development server again.

```bash
yarn run build
yarn run dev
```

--------------------------------

### Build UUI Packages

Source: https://github.com/epam/uui/blob/develop/dev-docs/release-workflow.md

Run this command to build all UUI packages. Ensure all packages build without errors before proceeding with a release.

```bash
yarn build
```

--------------------------------

### Boolean Props

Source: https://github.com/epam/uui/wiki/Documentation-Guidelines

Props that start with 'is' and control features or visual states with true/false values.

```APIDOC
## Boolean Props

### Description
Boolean props, usually starting with 'is', are used to toggle specific features or apply visual changes to a component based on a true/false value.

### API Documentation Pattern
```
/**
 * Pass true to [describe behavior when true].
 * [If not 100% clear:] If false, [describe behavior when false]

 * If omitted, [default behavior]
*/
```

### Special Cases
```
/** Indicates [describe what indicate] */
```

### Examples
```javascript
/** Pass true to disable editing, and visually de-emphasize value of the component */
isDisabled?: boolean;

/** Pass true to disable editing. Unlike isDisabled, keep component's value readable. */
isReadonly?: boolean;

/** Pass true to mark component as required */
isRequired?: boolean;

/** Pass true to indicate that dropdown is open, in case when component acts as dropdown. */
isOpen?: boolean;

/** Indicated that component act as dropdown */
isDropdown?: boolean;

/** Indicates that dropdown is open */
isOpen?: boolean;
```
```

--------------------------------

### Build and Run Local UUI with Next.js

Source: https://github.com/epam/uui/blob/develop/next-demo/next-app/README.md

Use these commands to build the local UUI library and run the Next.js application with the latest local changes. This is useful for development and testing.

```bash
lerna run build

yarn run next-app:dev ## this script install all modules and update @epam modules with local changes and run application for manual check

yarn start-server ## this script will start local server with demo data on port 5000

## to check whether pages are rendered run tests
cd ./next-app
yarn test
```

--------------------------------

### Create React App with UUI Template

Source: https://github.com/epam/uui/blob/develop/README.md

Use this command to create a new React application with the UUI template using Create React App.

```sh
npx create-react-app my-app --template @epam/uui
```

--------------------------------

### Add Promo Styles to Application

Source: https://github.com/epam/uui/blob/develop/epam-promo/readme.md

Import the main styles file from the @epam/promo package at the root of your application. Ensure the 'uui-theme-promo' class is applied to the html body tag for the theme to take effect.

```javascript
import '@epam/promo/styles.css';
```

--------------------------------

### Build and Run Local UUI with Next.js

Source: https://github.com/epam/uui/blob/develop/next-demo/next-pages/README.md

Use these commands to build the local UUI library and run the Next.js application with the latest local changes. This is useful for active development on the UUI library.

```bash
lerna run build

yarn run next-pages:dev ## this script install all modules and update @epam modules with local changes and run application for manual check

yarn start-server ## this script will start local server with demo data on port 5000

## to check whether pages are rendered run tests
cd ./next-pages
yarn test
```

--------------------------------

### Create Next App with UUI Template (yarn)

Source: https://github.com/epam/uui/blob/develop/templates/uui-nextjs-template/README.md

Use this command with yarn to create a new Next.js project initialized with the UUI template. Replace 'my-app' with your desired project name.

```sh
yarn create next-app --example "https://github.com/epam/UUI/tree/main/templates/uui-nextjs-template/template" my-app
```

--------------------------------

### Build Project with Rollup

Source: https://github.com/epam/uui/blob/develop/uui-build/readme.md

Use this script to build a project with Rollup. The --watch flag enables continuous rebuilding on file changes.

```shell
npx @epam/uui-build@latest --rollup-build
```

```shell
npx @epam/uui-build@latest --rollup-build --watch
```

--------------------------------

### Create Next.js App with UUI Template

Source: https://github.com/epam/uui/blob/develop/README.md

Use this command to create a new Next.js application with the UUI template.

```sh
npx create-next-app --example "https://github.com/epam/UUI/tree/main/templates/uui-nextjs-template/template" my-app
```

--------------------------------

### Run Stylelint with Auto-Fix

Source: https://github.com/epam/uui/blob/develop/AGENTS.md

Execute Stylelint to check CSS/SCSS/LESS file styles and automatically fix any violations found.

```bash
yarn stylelint-fix
```

--------------------------------

### Run Unit Tests

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

This command runs the unit tests for the project. Use the alternative command for watch mode, which re-runs tests on file changes.

```bash
yarn test
//or watch mode
yarn test-watch
```

--------------------------------

### Create Sync Branch for Develop

Source: https://github.com/epam/uui/blob/develop/dev-docs/release-workflow.md

If direct push to develop is rejected due to protection rules, create a new branch for the sync and push it. This branch will then be used to open a Pull Request into develop.

```bash
git checkout -b sync/main-into-develop-vX.Y.Z
git push -u origin sync/main-into-develop-vX.Y.Z
```

--------------------------------

### Generate Component API Data

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

Use this command to generate the metadata required for building Property Explore (PE) pages and API reference blocks.

```bash
yarn generate-components-api
```

--------------------------------

### Verify Main-Develop Sync

Source: https://github.com/epam/uui/blob/develop/dev-docs/release-workflow.md

After the sync PR is merged, run this command to verify that the develop and main branches are aligned and no new commits exist on develop that are not on main. The output should be empty.

```bash
git log origin/develop..origin/main
```

--------------------------------

### Run Tests

Source: https://github.com/epam/uui/blob/develop/templates/uui-cra-template/template/README.md

Launches the test runner in interactive watch mode. Refer to the Create React App documentation for more details on running tests.

```bash
npm test
```

--------------------------------

### Generate Theme Tokens

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

Place the exported `Theme.json` file into `public/docs/figmaTokensGen` and then run this command to build the Themes core CSS variables.

```bash
yarn generate-theme-tokens
```

--------------------------------

### Import Electric Styles

Source: https://github.com/epam/uui/blob/develop/epam-electric/readme.md

Add these import statements to the root of your application to include the necessary Electric skin styles and theme.

```javascript
import '@epam/electric/styles.css';
import '@epam/assets/css/theme/theme_electric.css'
```

--------------------------------

### Run Full Test Suite

Source: https://github.com/epam/uui/blob/develop/AGENTS.md

Execute the complete test suite before committing code to ensure all tests pass. This helps catch regressions and maintain code stability.

```bash
yarn test
```

--------------------------------

### Clone UUI GitHub Repository

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

Use this command to clone the UUI project from its GitHub repository.

```bash
git clone git@github.com:epam/UUI.git
```

--------------------------------

### Process Icons

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

After placing new icon sets into the `icons-source` folder, run this command to update the icons in the `epam-assets/icons` directory.

```bash
yarn process-icons
```

--------------------------------

### Generate Test Report

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

This command generates a unit test report and saves it in the `.reports/unit-tests` folder.

```bash
yarn test-report
```

--------------------------------

### Add UUI Styles Import

Source: https://github.com/epam/uui/wiki/Migration-guide-to-UUI-v.5

Add this import to the root of your application to include UUI styles.

```javascript
import '@epam/uui/styles.css';
```

--------------------------------

### Google Tag Manager Initialization in Production

Source: https://github.com/epam/uui/blob/develop/app/public/index.html

Initializes Google Tag Manager (GTM) by dynamically injecting a script tag. This code runs only when NODE_ENV is 'production'.

```javascript
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.setAttributeNode(d.createAttribute('data-ot-ignore')); j.setAttribute('class','optanon-category-C0001'); j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-K5QNBCKB');
```

--------------------------------

### Run ESLint with Auto-Fix

Source: https://github.com/epam/uui/blob/develop/AGENTS.md

Execute ESLint to check code style and automatically fix any violations found.

```bash
yarn eslint-fix
```

--------------------------------

### Track Bundle Sizes

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

Run this command locally to check if current branch changes significantly increase UUI package sizes. This is part of the PR quality check.

```bash
yarn track-bundle-size
```

--------------------------------

### Check Podman Disk Usage

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

Useful Podman commands to manage disk space, including checking usage, listing images, and pruning unused images or all images. These are helpful as the UUI e2e test image requires significant disk space.

```shell
# Show podman disk usage
podman system df
```

```shell
# List all images and their sizes
podman images --all
```

```shell
# Remove all images without at least one container associated with them
# It's a preferrable way to clean up unused images.
podman image prune --all
```

```shell
# Delete all images. Use it only when other methods to free up space don't help.
# When the e2e tests are run after deleting all images, all necessary dependencies will download again which takes some time.
podman rmi --all --force
```

```shell
# In case of some weird issues, you might need to remove the Podman machine using commands below. 
# After that, you need to init Podman again (See "Init Podman" section above).
podman machine stop
podman machine rm
```

--------------------------------

### NPM Login with MFA Access Token

Source: https://github.com/epam/uui/blob/develop/dev-docs/release-workflow.md

To log in to npm when Multi-Factor Authentication (MFA) is enabled, generate an access token from your npm profile. Use this token with the provided command to configure your npm client.

```bash
npm config set //registry.npmjs.org/:_authToken=your_token
```

--------------------------------

### Configure Component Previews for Screenshot Testing

Source: https://github.com/epam/uui/blob/develop/dev-docs/e2e-tests.md

Defines 'Size Variants' and 'Color Variants' previews for the Tag component using DocPreviewBuilder. Use this to set up different prop combinations for screenshot generation.

```typescript
preview: (docPreview: DocPreviewBuilder<loveship.TagProps | uui.TagProps | promo.TagProps | electric.TagProps>) => {
        const TEST_DATA = {
            icon: 'action-account-fill.svg',
        };
        docPreview.add({
            id: TTagPreview['Size Variants'],
            matrix: {
                caption: { values: ['Test'] },
                size: { examples: '*' },
                count: { values: [undefined, '+99'] },
                icon: { examples: [TEST_DATA.icon, undefined] },
                iconPosition: { examples: '*', condition: (pp) => !!pp.icon },
                isDropdown: { examples: '*' },
                onClear: { examples: ['callback', undefined] },
            },
            cellSize: '210-60',
        });
        docPreview.add({
            id: TTagPreview['Color Variants'],
            matrix: {
                caption: { values: ['Test'] },
                icon: { examples: [TEST_DATA.icon] },
                count: { values: ['+99'] },
                isDropdown: { values: [true] },
                color: { examples: '*' },
                fill: { examples: '*' },
                isDisabled: { examples: '*' },
            },
            cellSize: '140-60',
        });
    },
```

--------------------------------

### Run Local E2E Tests

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

Command to execute E2E tests locally without using Docker. This is suitable for Linux environments or CI systems that use Linux.

```shell
yarn --cwd uui-e2e-tests local-test-e2e
```

--------------------------------

### Run E2E Tests with Docker

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

NPM tasks for running end-to-end tests within Docker containers. These commands handle downloading necessary Docker images, which may take time on the first run.

```shell
# Run only "chromium" tests in docker container
# NOTE: It is preferable for local dev environment
yarn test-e2e-chromium
```

```shell
# Run all tests in docker container
yarn test-e2e
```

```shell
# Run all tests in docker container and update all screenshots
yarn test-e2e-update
```

```shell
# Show report located in "uui-e2e-tests/tests/.report/report" folder
yarn test-e2e-open-report
```

--------------------------------

### Run ESLint and Stylelint Tasks

Source: https://github.com/epam/uui/blob/develop/uui-build/linting/linting-notes.md

Use these yarn tasks to check for linting and style issues in your project. Note that certain rules from 'rulesToBeFixed.js' are intentionally not checked in some scenarios to allow for iterative fixes.

```bash
yarn eslint
```

```bash
yarn stylelint
```

--------------------------------

### UUI Custom Theme Manifest Interface

Source: https://github.com/epam/uui/blob/develop/dev-docs/uui-documentation.md

Defines the structure for a custom theme manifest file, including theme ID, display name, CSS files, and optional settings for component sizing and property overrides. This manifest must be served at the '/theme-manifest.json' path from the custom theme URL.

```typescript
export interface IThemeManifest {
    /*
     * Unique ID of the custom theme.
     */
    id: string;

    /*
     * Theme display name. Visible to end users in theme selector.
     */
    name: string;

    /* A list of CSS files required for this theme.
     * Example: ['custom-theme-1.css']
     * These CSS files should be served relative to the custom theme URL 
     * (e.g., '/custom-theme-1.css').
     */
    css: string[];

    /* A settings file to customize the default sizing of UUI components.
     * Example: 'custom-theme-settings.json'
     * This JSON file should be served relative to the custom theme URL 
     * (e.g., '/custom-theme-settings.json').
     */
    settings?: string | null;

    /*
     * Any overrides for the "property explorer"
     */
    propsOverride?: {
        [typeRef: `${string}:${string}`]: {
            [propName: string]: IThemeManifestPropOverride;
        }
    };
}

export interface IThemeManifestPropOverride {
    editor: {
        type: 'oneOf',
        options: (string | number)[],
    },
    comment?: {
        tags?: {
        '@default': string
        }
    },
}
```

--------------------------------

### Generate Theme Variables

Source: https://github.com/epam/uui/blob/develop/uui-build/readme.md

Generates SCSS mixins with theme tokens from a JSON input file. Specify the input tokens file and the output directory.

```shell
npx @epam/uui-build@latest --generate-theme-variables --tokens=./input/Theme.json --out=./input
```

--------------------------------

### Run Unit Tests with Reduced Workers (Windows)

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

For Windows users experiencing test errors, this command runs unit tests with a reduced worker count and a specified timeout. Adjust `maxWorkers` as needed.

```bash
yarn run test --maxWorkers=2 --testTimeout=10000
```

--------------------------------

### Run Single Screenshot Test with .only

Source: https://github.com/epam/uui/blob/develop/uui-e2e-tests/readme.md

To execute a single screenshot test, replace the `.add` method with `.only` in the test definition. This is applicable to files like `preview.e2e.ts`.

```typescript
preview.e2e.ts
```

--------------------------------

### Override Bundle Size Baseline

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

Use this command to override the baseline bundle size values with current package sizes. Only run if new sizes are expected.

```bash
yarn track-bundle-size-override
```

--------------------------------

### Shadow DOM Integration for UUI App

Source: https://github.com/epam/uui/blob/develop/app/public/index.html

Attaches a shadow DOM to the root element and styles it for full-screen coverage. This is used when the UUI app is wrapped in a shadow DOM.

```javascript
const hostElem = document.querySelector("#root"); hostElem.style.position = 'absolute'; hostElem.style.inset = '0px 0px 0px 0px'; hostElem.attachShadow({ mode: 'open' });
```

--------------------------------

### Import SVG Icon

Source: https://github.com/epam/uui/blob/develop/templates/uui-cra-template/template/README.md

Shows how to import an SVG file as a React component. The imported variable will contain meta-information about the SVG.

```typescript
import { ReactComponent as myIcon } from 'icons/myIcon.svg'
```

--------------------------------

### Run Unit Tests with Reduced Workers

Source: https://github.com/epam/uui/blob/develop/AGENTS.md

Execute unit tests with a reduced number of workers and a specified timeout. This is a workaround for potential test errors on Windows.

```bash
yarn test --maxWorkers=2 --testTimeout=10000
```

--------------------------------

### LabeledInput Default Color (Promo Skin)

Source: https://github.com/epam/uui/wiki/Migration-guide-to-UUI-v.5

The 'color' prop for LabeledInput has been removed in the Promo skin; 'gray80' is used by default.

```javascript
<LabeledInput label="Label">
```

--------------------------------

### Conditional OptanonWrapper for Production

Source: https://github.com/epam/uui/blob/develop/app/public/index.html

Defines the OptanonWrapper function when the environment is set to 'prod'.

```javascript
<% if (process.env.REACT_APP_ENV_NAME === 'prod') { %>  function OptanonWrapper() { } <% } %>
```

--------------------------------

### Add Custom Themes to Local Storage

Source: https://github.com/epam/uui/blob/develop/dev-docs/uui-documentation.md

Add a 'uui-custom-themes' object to localStorage containing a list of URLs for custom themes. This is the initial step to enable external theme integration.

```javascript
localStorage.setItem(
        'uui-custom-themes',
            JSON.stringify({
                customThemes: [
                    "https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/themes/custom-theme-1",
                    "https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/themes/custom-theme-2",
                ]
            })
        )
```

--------------------------------

### Map Component Skins to Prop Interfaces

Source: https://github.com/epam/uui/blob/develop/dev-docs/uui-documentation.md

Link component skins (e.g., TSkin.UUI) to their corresponding prop types and component implementations. This ensures correct rendering across different visual themes.

```typescript
bySkin: {
        [TSkin.UUI]: { type: '@epam/uui:TextInputProps', component: uui.TextInput },
        [TSkin.Loveship]: { type: '@epam/uui:TextInputProps', component: loveship.TextInput },
        [TSkin.Promo]: { type: '@epam/uui:TextInputProps', component: promo.TextInput },
        [TSkin.Electric]: { type: '@epam/uui:TextInputProps', component: electric.TextInput },
      },
```

--------------------------------

### Apply Theme Class to Body

Source: https://github.com/epam/uui/wiki/Migration-guide-to-UUI-v.5

Add the appropriate theme class to the body tag based on the skin you are using.

```html
<body class="uui-theme-promo">
```

```html
<body class="uui-theme-loveship">
```

--------------------------------

### Add Loveship Styles

Source: https://github.com/epam/uui/blob/develop/loveship/readme.md

Import the main stylesheet for the Loveship skin at the root of your application. Ensure the 'uui-theme-loveship' class is applied to the html body tag for theme activation.

```javascript
import '@epam/loveship/styles.css';
```

--------------------------------

### Use ControlGroup for Input Prefixes/Suffixes

Source: https://github.com/epam/uui/wiki/Migration-guide-to-UUI-v.5

For components like DatePicker and TextInput, use ControlGroup to create inputs with prefixes or suffixes instead of the removed props.

```javascript
import { ControlGroup } from '@epam/uui-core';
```

--------------------------------

### Change UUI Core Imports

Source: https://github.com/epam/uui/wiki/Migration-guide-to-UUI-v.5

Update imports from '@epam/uui' to '@epam/uui-core' as the codebase has been moved.

```javascript
import { Button } from '@epam/uui-core';
```

--------------------------------

### Update Test Snapshots

Source: https://github.com/epam/uui/blob/develop/dev-docs/dev-workflows.md

Run this command to update the snapshots for your tests. This is typically done after making changes that affect test outputs.

```bash
yarn test-update
```