@mesalvo/react-ui

A comprehensive React component library built with TypeScript, Tailwind CSS, and modern design principles. Created and maintained by the Mesalvo team.

✨ Features

• 🎨 Modern Design System - Beautiful, accessible components built with Tailwind CSS
• 📦 TypeScript First - Full TypeScript support with comprehensive type definitions
• ♿ Accessible - Built with accessibility in mind using Radix UI primitives
• 🎯 Tree Shakeable - Optimized bundle size with ES modules
• 🔧 Customizable - Easy to theme and customize to match your brand
• 📱 Responsive - Mobile-first design approach
• ⚡ Performance - Optimized for production with minimal overhead

📦 Installation

npm install @mesalvo/react-ui
# or
yarn add @mesalvo/react-ui
# or
pnpm add @mesalvo/react-ui

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom tailwindcss

🚀 Quick Start

1. Import Styles

Import the CSS in your main application file:

import '@mesalvo/react-ui/styles.css'

2. Use Components

import { Button, Card, Input } from '@mesalvo/react-ui'

function App() {
  return (
    <Card>
      <h1>Hello World</h1>
      <Input placeholder="Enter your name" />
      <Button>Submit</Button>
    </Card>
  )
}

3. Configure Tailwind (Optional)

If you're using Tailwind CSS in your project, extend your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@mesalvo/react-ui/dist/**/*.js',
  ],
  // ... rest of your config
}

📚 Documentation

For full documentation, visit our Storybook.

🤝 Contributing

We welcome contributions! If you'd like to contribute to this project, please follow these steps:

1. Fork this repository
2. Create your feature branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a pull request

📄 License

This project is proprietary software owned by Mesalvo GmbH. All rights reserved.

IMPORTANT: This software is NOT open source. You may NOT use, copy, modify, or distribute this software without explicit written permission from Mesalvo GmbH.

See the LICENSE file for full details.

🙏 Acknowledgments

Built with:

• React
• TypeScript
• Tailwind CSS
• Radix UI
• Framer Motion

Made with ❤️ by the Mesalvo team

To install (in Windows) node lts run

# Download and install fnm:
winget install Schniz.fnm
# Download and install Node.js:
fnm install 24
# Verify the Node.js version:
node -v # Should print "v22.13.1".
# Download and install pnpm:
corepack enable pnpm
# Verify pnpm version:
pnpm -v

How the coverage reports work

React-ui's storybook acts for now as a hub of our React coverage reports. The idea is that each pipeline run, we will generate the coverage json for this package and get the other Frontends by copying their coverage json files to this package (./public/coverage/admin). We serve those JSONs in public folder so anyone can fetch them via http (for example). Then, we will generate a new coverage report with all the data.

Steps done internally in the pipeline

1. Generate the coverage report for react-ui package (via vitest run).

2. Copy the coverage reports from other frontends into public directory (./public/coverage/...). (see ./src/scripts/copy-coverages.ts)

3. We run a custom command to parse from public JSONs to a markdown format (see ./src/scripts/coverage-to-md.mts) and add the file in (./src/tests/coverages/{name}.md)

4. We iterate over the coverages and generate a story for each of them (see ./src/scripts/coverage-story-generator.mts). The stories are generated in (./src/stories/Coverages/{name}.stories.tsx) and are available in the storybook under the "Coverages" section.

Run pnpm update-coverage to trigger steps 2, 3 and 4 locally.

Run pnpm coverage to trigger all steps locally (will take longer as needs to generate the coverage report).

Why INTERNAL folder is not exported in the package?

The internal folder is not exported in the package to ensure that consumers of the @mesalvo/react-ui package only have access to the public API defined in the package's entry points (as components, hooks or themes), Internal functions are a set of internal tools and should not be used directly by the consumers of the package. This encapsulation helps maintain a clear separation between the public API and internal implementation details, allowing for better control over the package's interface and reducing the risk of breaking changes for users when internal code is modified.