Atlante UI

React component library built on top of Ant Design, designed specifically for Next.js applications, following Atlante's design guidelines.

📦 Installation

npm install @atlante-ti/atlante-ui

Component Development Guidelines

1. Structure: Each component should have its own folder with:

   ComponentName/
   ├── index.tsx          # Main component file

2. Export Pattern: Always export both the component and its props type:

   export { ComponentName } from "./ComponentName";
   export type { ComponentNameProps } from "./ComponentName";

3. Required Props:

   • dataTestId: Every component must accept a dataTestId prop for testing
   • TypeScript: All components must be fully typed

4. Styling:

   • Use Ant Design as the base
   • Apply Atlante's design system (colors, spacing, etc.)
   • Support custom styles via style prop

5. Testing: Test your components in the ui-test environment

📋 Development Setup

1. Clone the repository:

   git clone https://github.com/.../atlante-ui.git
   cd atlante-ui

2. Install dependencies:

   yarn install

3. Test locally:

   cd ui-test
   yarn go

🔗 Links

• NPM Package