npm package: @loadsmart/loadsmart-ui
Description: Miranda UI, a React UI library
Latest version: 8.0.8

<h1 align="center">
  <a  href="https://loadsmart.github.io/loadsmart-ui/" rel="noopener" target="_blank" style="color: #29d454">

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50">
  <defs>
    <symbol id="a" viewBox="0 0 208.77 208.77">
      <path d="M73.46 0v65.72h65.72a3.87 3.87 0 013.82 3.87v65.72h65.72V7.73A7.73 7.73 0 00201 0zm-7.74 139.2V3.87L2.26 67.33A7.73 7.73 0 000 72.8V201a7.72 7.72 0 007.72 7.72H136a7.73 7.73 0 005.47-2.26L204.9 143H69.6a3.86 3.86 0 01-3.87-3.81z"/>
    </symbol>
  </defs>
  <use width="208.77" height="208.77" transform="scale(.23)" xlink:href="#a" fill="#29d454"/>
</svg>
</a>
<p style="text-align: center">Miranda UI</p>
</h1>

[![npm package](https://img.shields.io/npm/v/@loadsmart/loadsmart-ui?style=flat-square)](https://www.npmjs.com/package/@loadsmart/loadsmart-ui) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)

**🚨 Miranda UI is currently in maintenance mode and will be deprecated soon. Please migrate to [Miranda 4all](https://github.com/loadsmart/miranda-wc).**

Miranda UI is a [React](https://reactjs.org/) components library. It works with [Styled Components](https://www.styled-components.com).

## Steps to install

1. You need to have node 20 or the latest LTS version installed;

   One option is to use [NVM](https://github.com/nvm-sh/nvm). You can run `nvm use` or set it to run automatically in a directory with a .nvmrc file.

1. Install dependencies: `yarn`

   If you don't have yarn, follow yarn [installation docs](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)

## Usage

```sh
yarn add @loadsmart/loadsmart-ui
```

or

```sh
npm install @loadsmart/loadsmart-ui
```

This library is now ESM-only. Ensure your project supports ESM.

### Jest Configuration

If you are using Jest, you need to add this library to `transformIgnorePatterns` in your Jest configuration to ensure it is properly transformed. Example:

```json
{
 "transformIgnorePatterns": ["node_modules/(?!@loadsmart/loadsmart-ui)"]
}
```

## Demo

You can check our Storybook [here](https://loadsmart.github.io/miranda/).

## Development

Clone locally:

```bash
git clone https://github.com/loadsmart/miranda.git
```

Go to folder:

```bash
cd miranda
```

Install all dependencies:

```bash
yarn
```

or

```bash
npm i
```

Run the application - you'll be able to see all components documentation in Storybook:

```bash
yarn dev
```

or

```bash
npm run dev
```

Open your browser and visit `http://localhost:6006`

To run tests:

```bash
yarn test
```

or

```bash
npm run test
```

## Creating a new component

We have all components stored inside `src > components`.
When creating a new one, you must add its new folder following this pattern.

It's also essential to include the `.stories` and `.test` files to cover both documentation and quality standards.

We use [`semantic-release`](https://github.com/semantic-release/) to evaluate our commits and trigger automatic release to NPM. For that, please follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/), so your changes will properly be evaluated and published if that's the case.