@maat-ai/design-kit

Design Kit para el equipo de Maat.ai. Esta librería proporciona un conjunto de componentes reutilizables basados en React, Mantine, y TailwindCSS, diseñados para mantener coherencia visual en los proyectos de la empresa.

🚀 Instalación

Para usar @maat-ai/design-kit en tu proyecto, instálalo como dependencia con:

# Usando yarn
yarn add @maat-ai/design-kit

# Usando npm
npm install @maat-ai/design-kit

# Usando pnpm
pnpm add @maat-ai/design-kit

📦 Requisitos

Este kit de componentes requiere ciertas dependencias en el proyecto donde se use. Asegúrate de tener los siguientes paquetes instalados:

"peerDependencies": {
  "@heroicons/react": "^2.1.5",
  "@mantine/core": "^7.13.3",
  "@mantine/dates": "^7.13.3",
  "@mantine/hooks": "^7.13.3",
  "@mantine/notifications": "^7.13.3",
  "dayjs": "^1.11.13",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "tailwindcss": "^3.4.14"
}

Si no las tienes instaladas, agrégalas manualmente con:

yarn add @heroicons/react @mantine/core @mantine/dates @mantine/hooks @mantine/notifications dayjs react react-dom tailwindcss

🛠 Configuración

1️⃣ Configurar TailwindCSS

Si tu proyecto ya usa TailwindCSS, solo asegúrate de importar los estilos globales. Si no, instálalo y configúralo:

yarn add tailwindcss postcss autoprefixer
npx tailwindcss init -p

Luego, en tailwind.config.js, extiende los estilos según sea necesario:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@maat-ai/design-kit/dist/**/*.{js,jsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

2️⃣ Configurar Mantine Provider

En tu App.js o App.tsx, envuelve tu aplicación con MantineProvider:

import { MantineProvider } from '@mantine/core';

function App({ children }) {
  return (
    <MantineProvider theme={{ primaryColor: 'blue' }}>
      {children}
    </MantineProvider>
  );
}

export default App;

📝 Uso en Proyectos

Para usar los componentes en tu proyecto, importa y usa los elementos que necesites:

import { MaatButton } from '@maat-ai/design-kit';

function MyComponent() {
  return <MaatButton color="primary">¡Hola Maat!</MaatButton>;
}

Si los estilos no se reflejan correctamente, revisa que tailwind.config.js incluya node_modules/@maat-ai/design-kit/dist/ en content.

📖 Lista de Componentes

Átomos

• MaatAlert
• MaatButton
• MaatCheckbox
• MaatIconButton
• MaatInput
• MaatLoader
• MaatLogoMaat
• MaatRadio
• MaatRingProgress
• MaatSearchSelect
• MaatSectionNumberIcon
• MaatSectionStateDot
• MaatSelect
• MaatStepperBar
• MaatText
• MaatTitle

Moléculas

• MaatAccordion
• MaatCounter
• MaatDateInput
• MaatEmailInput
• MaatFileOptionItem
• MaatInputCode
• MaatInputWrapper
• MaatLoaderPage
• MaatMarkdown
• MaatModal
• MaatNumberInput
• MaatPasswordInput
• MaatPhoneNumberInput
• MaatProgressBar
• MaatRadioGroup
• MaatTextInput

📖 Documentación y Storybook

Para ver la documentación de los componentes, ejecuta Storybook en el entorno local:

yarn storybook

Esto abrirá Storybook en el puerto 6006 con todos los componentes disponibles.

🏗 Desarrollo y Contribución

Si deseas contribuir a la librería o hacer ajustes:

1. Clona el repositorio:

   git clone https://github.com/maatai/maat_design_kit.git
   cd maat_design_kit

2. Instala las dependencias:

   yarn install

3. Corre el entorno de desarrollo con Storybook:

   yarn storybook

4. Para construir la librería:

   yarn build

5. Para ejecutar los tests:

   yarn test

🧪 Uso local del design-kit sin publicar

Durante el desarrollo, puedes probar cambios en @maat-ai/design-kit directamente en otro proyecto sin necesidad de publicarlo en npm. Para ello:

🛠 1. Empaquetar y mover el .tgz localmente

En el repositorio del design-kit, ejecuta:

yarn pack:local

Este script:

• Empaqueta el design kit (npm pack)
• Mueve el archivo .tgz generado a una carpeta local (por ejemplo: ~/Developer/maat/modules/)

⚠️ Recuerda cambiar la ruta si estás en una máquina distinta o deseas otra ubicación.

📦 2. Instalar el .tgz en el proyecto consumidor

En tu otro proyecto (por ejemplo, una app Next.js), instala la última versión generada del design-kit:

yarn install:local-design-kit

Este script instala la versión más reciente del archivo .tgz encontrado en la carpeta local configurada.

🧹 3. Recomendaciones adicionales

• Antes de instalar, elimina cualquier versión previa del design-kit con:

  yarn remove @maat-ai/design-kit

• Si cambias el design-kit, vuelve a ejecutar yarn pack:local y luego yarn install:local-design-kit.

📁 Scripts sugeridos

En el design-kit (package.json):

"scripts": {
  "pack:local": "npm pack && mkdir -p ~/Developer/maat/modules && mv maat-ai-design-kit-*.tgz ~/Developer/maat/modules/"
}

En el proyecto consumidor (package.json):

"scripts": {
  "install:local-design-kit": "npm install $(ls -t ~/Developer/maat/modules/maat-ai-design-kit-*.tgz | head -n 1) --legacy-peer-deps"
}

¡Feliz desarrollo! 🚀