@rarcifa/cronos-design-system/README.md

A typescript react component library following the Cronos branding standards

# Cronos Design System

A comprehensive library of Cronos React components designed to facilitate rapid and consistent UI development for cronos branded web applications. This package includes a variety of customizable components, such as Buttons, Typography, and Cards, alongside utility types and enums for a seamless development experience.

![npm](https://img.shields.io/npm/v/@rarcifa/cronos-design-system)

## Installation

To use the Cronos Design System Library in your project, run:

```bash
npm i @rarcifa/cronos-design-system
```

## Usage

Import and use the components in your React app:

```jsx
import React from 'react';
import {
  Button,
  Typography,
  Card,
  Variant,
  Size,
  Color,
  FontWeight,
  TextAlign,
} from '@rarcifa/cronos-design-system';

function MyApp() {
  <div>
    <Typography size={Size.Md} color={Color.Dark} fontWeight={FontWeight.Bold}>
      Hello World
    </Typography>
    <Button
      variant={Variant.Primary}
      size={Size.Lg}
      onClick={() => console.log('Clicked')}
    >
      Click Me
    </Button>
    <Card>
      <Typography>Card Content</Typography>
    </Card>
  </div>;
}
```

## Components

### Button

A customizable button component.

**Props:**

- `variant`: Button variant (`primary`, `secondary`, `dark`, `active`).
- `size`: Size of the button (`sm`, `md`, `lg`).
- `rounded`: If true, applies rounded corners.
- `...and more`.

#### Example Usage

```jsx
import { Button, Variant, Size } from '@rarcifa/cronos-design-system';

function MyButton() {
  <Button
    variant={Variant.Primary}
    size={Size.Lg}
    onClick={() => console.log('Clicked')}
  >
    Click Me
  </Button>;
}
```

### Typography

A component for displaying text.

**Props:**

- `size`: Size of the text (`sm`, `md`, `lg`).
- `fontWeight`: Font weight (`bold`, `medium`, `default`).
- `color`: Text color (`dark`, `light`, `default`).
- `...and more`.

#### Example Usage

```jsx
import {
  Typography,
  Size,
  Color,
  FontWeight,
} from '@rarcifa/cronos-design-system';

function MyTypography {
  <Typography size={Size.Md} fontWeight={FontWeight.Bold} color={Color.Dark}>
    Hello World
  </Typography>
};
```

### Card

A container component for grouping related content.

**Props:**

- `children`: Content of the card.

#### Example Usage

```jsx
import { Card } from '@rarcifa/cronos-design-system';

function MyCard() {
  <Card>
    <div>Some content here</div>
  </Card>;
}
```

### Enums and Types

Includes Variant, Size, Color, FontWeight, TextAlign for standardizing the values across the components.

## Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

## License

This project is licensed under the MIT License