dojo-fe-shared/README.md

Shared React component library for Dojo FE (SuperAdmin, Admin, Student/Contact)

# Dojo FE Shared Components

A comprehensive React component library for Dojo Frontend applications, providing reusable UI components with TypeScript support and Tailwind CSS styling.

## 📦 Installation

```bash
npm install dojo-fe-shared
```

## 🚀 Quick Start

```tsx
import { Button, CommonTextField, Modal } from "dojo-fe-shared";

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <CommonTextField
        name="email"
        labelText="Email"
        placeholder="Enter your email"
      />
      <Modal open={true} onClose={() => {}}>
        <p>Modal content</p>
      </Modal>
    </div>
  );
}
```
## 📋 Available Components

This package includes 15+ reusable components:

- **Form Components**: `CommonTextField`, `CommonPasswordField`, `CommonCheckBox`, `CommonPinInput`, `CommonColorField`, `CommonTextEditor`
- **UI Components**: `Button`, `Modal`, `CustomSpinner`, `SuccessCard`, `AccordionItem`
- **Utility Components**: `AttachmentButton`, `ButtonDatePicker`, `DashboardStatsComparisonChip`
- **Layout Components**: `CommonSimpleCheckBox`

## 🔧 Peer Dependencies

This package requires the following peer dependencies in your project:

```json
{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "tailwindcss": ">=3.0.0",
  "@chakra-ui/react": ">=3.0.0",
  "@hookform/error-message": ">=2.0.0",
  "react-hook-form": ">=7.0.0",
  "react-i18next": ">=15.0.0",
  "react-table": ">=7.0.0",
  "lodash": ">=4.0.0",
  "react-beautiful-dnd": ">=13.0.0",
  "react-places-autocomplete": ">=7.0.0",
  "react-multi-date-picker": ">=4.0.0",
  "react-quill": ">=2.0.0",
  "notistack": ">=3.0.0"
}
```

## 🎨 Styling

This package uses Tailwind CSS for styling. Make sure your project has Tailwind CSS configured.

## 📖 Documentation

For detailed component documentation and props, see [COMPONENTS.md](./COMPONENTS.md).

## 🔄 Development & Publishing

### For Contributors

1. **Clone the repository**

   ```bash
   git clone <repository-url>
   cd dojo-fe-shared
   npm install
   ```

2. **Make changes**

   - Add/update components in `src/components/`
   - Update exports in `src/index.ts`
   - Update documentation in `COMPONENTS.md`

3. **Test your changes**
   ```bash
   npm run build
   npm run pack
   ```

### Publishing Updates

#### Option 1: Using the publish script (Recommended)

```bash
# For bug fixes (1.0.0 → 1.0.1)
npm run publish:patch

# For new features (1.0.0 → 1.1.0)
npm run publish:minor

# For breaking changes (1.0.0 → 2.0.0)
npm run publish:major
```

#### Option 2: Manual publishing

```bash
# Build the package
npm run build

# Bump version
npm version patch  # or minor, major

# Publish to npm
npm publish --access public
```

### Version Management

- **Patch** (`1.0.0` → `1.0.1`): Bug fixes, no breaking changes
- **Minor** (`1.0.0` → `1.1.0`): New features, backward compatible
- **Major** (`1.0.0` → `2.0.0`): Breaking changes

## 🏗️ Build Process

The package is built using `tsup` which generates:

- **ESM** format: `dist/index.mjs`
- **CommonJS** format: `dist/index.js`
- **TypeScript declarations**: `dist/index.d.ts`

## 📁 Project Structure

```
src/
├── components/          # React components
├── assets/             # Icons and images
│   ├── svg/           # SVG icons
│   └── images/        # Static images
├── utils/              # Utility functions
├── types/              # TypeScript type definitions
├── enums/              # TypeScript enums
└── index.ts           # Main export file
```

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Update documentation
6. Submit a pull request

## 📄 License

MIT License - see [LICENSE](./LICENSE) file for details.

## 🔗 Links

- [NPM Package](https://www.npmjs.com/package/dojo-fe-shared)
- [Component Documentation](./COMPONENTS.md)
- [Issues](https://github.com/your-org/dojo-fe-shared/issues)

---

Built with ❤️ by the Dojo Team