# Contentstack Venus Component Library

---

## 1. Overview

**Venus Components** is Contentstack's official React component library, providing a comprehensive collection of reusable UI components. It serves as the design system foundation for Contentstack's UI-React application and can be used to build UI Extensions and Contentstack-based applications.

**Key Features:**

- 100+ production-ready React components
- TypeScript support with full type definitions
- Design token system for consistent theming
- SCSS-based styling with customizable variables
- Comprehensive Storybook documentation
- Accessibility-focused (WCAG AA standards)
- Redux integration for stateful components
- Rich Text Editor components (Slate-based)
- Form components with Formik integration

---

## 2. Tech Stack

| Layer                    | Technology                                                                         |
| ------------------------ | ---------------------------------------------------------------------------------- |
| **Language**             | TypeScript 5.3.3                                                                   |
| **Framework**            | React 18.3.1                                                                       |
| **Component Library**    | This is the Venus Components library itself                                        |
| **State Management**     | Redux 4.0.5 + React Redux 7.2.1                                                    |
| **Router**               | React Router DOM 5.2.0                                                             |
| **Testing**              | Jest 27.5.1 + React Testing Library 10.4.9                                         |
| **Code Quality**         | ESLint 8.47.0 + Prettier 2.0.4                                                     |
| **Component Docs**       | Storybook 6.5.14                                                                   |
| **Design Tokens**        | Style Dictionary 2.10.1                                                            |
| **Styling**              | SCSS/PostCSS + Design Tokens                                                       |
| **Forms**                | Formik 2.4.6                                                                       |
| **Rich Text Editor**     | Slate 0.77.2                                                                       |
| **HTTP Client**          | Axios 1.8.4                                                                        |
| **Date Handling**        | date-fns 2.15.0 + Moment.js 2.29.1                                                 |

---

## 3. Getting Started

### Prerequisites

- **Node.js**: v18.0.0+ or v24.x
- **npm**: v8.19.3+
- **Git**: Latest version
- **React**: v16.8.6+ || v17 || v18 || v19 (peer dependency)

---

## 4. Using the Library in Your Project

### Installation for Consumers

```bash
$ npm i @contentstack/venus-components --save
```

### Import and Use

```tsx
import '@contentstack/venus-components/build/main.css'
import { Button, Table, Modal } from '@contentstack/venus-components'

<Button buttonType="primary" onClick={() => console.log('Clicked!')}>Click Me</Button>
```

### Design Tokens

**Consumers**:
```js
import { TokenName } from '@contentstack/venus-components/build/variables.js'
@import '@contentstack/venus-components/build/variables.css'
```

---

## 5. Troubleshooting

### Common Issues

**Peer dependency conflicts**: Use `npm install --legacy-peer-deps` or `npm install --ignore-scripts --no-engine`

**Node.js compatibility**: Use v18 or v25. Switch with `nvm install 22 && nvm use 22`

**OpenSSL error**: Already fixed via `NODE_OPTIONS='--openssl-legacy-provider'` in package.json

**Module errors**: Run `npm run clean-install`