Miranda UI

Miranda UI is currently in maintenance mode and will be deprecated soon. Please migrate to Miranda 4all.

Miranda UI is a React components library. It works with Styled Components.

Steps to install

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

   One option is to use NVM. You can run nvm use or set it to run automatically in a directory with a .nvmrc file.

2. Install dependencies: yarn

   If you don't have yarn, follow yarn installation docs

Usage

yarn add @loadsmart/loadsmart-ui

or

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:

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

Demo

You can check our Storybook here.

Development

Clone locally:

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

Go to folder:

cd miranda

Install all dependencies:

yarn

or

npm i

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

yarn dev

or

npm run dev

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

To run tests:

yarn test

or

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 to evaluate our commits and trigger automatic release to NPM. For that, please follow Conventional Commits, so your changes will properly be evaluated and published if that's the case.