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

npm install dojo-fe-shared

🚀 Quick Start

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:

{
  "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.

🔄 Development & Publishing

For Contributors

1. Clone the repository

   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

   npm run build
   npm run pack

Publishing Updates

Option 1: Using the publish script (Recommended)

# 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

# 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 file for details.

🔗 Links

• NPM Package
• Component Documentation
• Issues

Built with ❤️ by the Dojo Team