Backoffice Console Library

A React component library for building modern backoffice applications. This library provides a set of reusable components and utilities designed specifically for backoffice interfaces.

Features

• Modern React components built with TypeScript
• Storybook documentation and component playground
• Built with Mantine UI framework
• Drag and drop functionality with @hello-pangea/dnd
• Chart components with Highcharts integration
• Customizable theme support
• Responsive design components

Components

Charts

• Area Charts: Interactive area charts with customizable colors and gradients
• Column Charts: Bar and column charts with rounded corners and customizable styling
• Donut Charts: Circular charts with customizable inner radius and labels
• Pie Charts: Circular charts with customizable segments and labels
• Heatmap: Data visualization with color gradients and interactive tooltips
• Features:
  • Customizable colors and themes
  • Interactive tooltips
  • Legend support
  • Responsive design
  • Export functionality
  • Mouse tracking
  • Customizable grid lines and labels

Drag and Drop

• Kanban Board:
  • Drag and drop columns and cards
  • Customizable card content
  • Column reordering
  • Card status management

Menus

• Side Navigation:
  • Collapsible sidebar
  • Nested menu items
  • Custom icons support
  • Active state management
• User Menu:
  • User profile information
  • Quick actions
  • Customizable dropdown
• Application Menu:
  • Application switching
  • Recent applications
  • Favorites management
• Notification Menu:
  • Real-time notifications
  • Notification grouping
  • Read/unread states
• Settings Menu:
  • Quick settings access
  • Theme customization
  • User preferences

Installation

# Install the library
npm install backoffice-console-library

# Install required peer dependencies
npm install react@^18.3.1

# Install required dependencies
npm install @mantine/core@^7.12.2 @mantine/hooks@^7.12.2 @hello-pangea/dnd@^16.5.0 highcharts-react-official@^3.2.2 highcharts-rounded-corners@^1.0.7 iconsax-react@^0.0.8 @fontsource/poppins@^5.1.0

Or install everything at once:

npm install backoffice-console-library react@^18.3.1 @mantine/core@^7.12.2 @mantine/hooks@^7.12.2 @hello-pangea/dnd@^16.5.0 highcharts-react-official@^3.2.2 highcharts-rounded-corners@^1.0.7 iconsax-react@^0.0.8 @fontsource/poppins@^5.1.0

Peer Dependencies

This library requires React 18.3.1 or higher as a peer dependency.

Usage

import { ComponentName } from 'backoffice-console-library';

function App() {
  return (
    <ComponentName>
      {/* Your content here */}
    </ComponentName>
  );
}

Development

Prerequisites

• Node.js (Latest LTS version recommended)
• npm or yarn

Setup

1. Clone the repository
2. Install dependencies:

npm install

Available Scripts

• npm run rollup - Build the library using Rollup
• npm run storybook - Start Storybook development server
• npm run build-storybook - Build Storybook for production
• npm run tsc - Run TypeScript compiler
• npm run deploy - Build and publish to npm

Development Workflow

1. Make your changes in the src directory
2. Test your components using Storybook
3. Build the library using npm run rollup
4. Deploy using npm run deploy

Publishing to npm

Prerequisites

1. An npm account (create one at https://www.npmjs.com/signup)
2. npm CLI installed globally (npm install -g npm)
3. Logged in to npm (npm login)

Publishing Steps

1. Prepare Your Package

   # Ensure all changes are committed
   git add .
   git commit -m "Prepare for release"

2. Build the Package

   # Build the library
   npm run rollup

3. Update Version

   # Update version (patch, minor, or major)
   npm version patch  # for bug fixes
   # OR
   npm version minor  # for new features
   # OR
   npm version major  # for breaking changes

4. Publish to npm

   npm publish

Automated Publishing

The package includes a deploy script that automates the publishing process:

npm run deploy

This script will:

1. Stage and commit changes
2. Build the library
3. Increment the patch version
4. Publish to npm

Version Management

• Use npm version patch for bug fixes (1.0.x)
• Use npm version minor for new features (1.x.0)
• Use npm version major for breaking changes (x.0.0)

Publishing Checklist

Before publishing, ensure:

1. All tests pass
2. Documentation is up to date
3. Version number is correct
4. All dependencies are properly listed
5. Build output is correct
6. No sensitive information is included

Troubleshooting

• If you get a 403 error, ensure you're logged in (npm login)
• If you get a 404 error, check if the package name is available
• If you get a version conflict, ensure you're not trying to publish an existing version

Project Structure

backoffice-console-library/
├── src/
│   ├── components/     # React components
│   └── index.ts       # Main entry point
├── .storybook/        # Storybook configuration
├── dist/              # Build output
└── package.json       # Project configuration

Dependencies

Required Dependencies

• react (^18.3.1) - Peer dependency
• @mantine/core (^7.12.2) - UI framework
• @mantine/hooks (^7.12.2) - UI hooks
• @hello-pangea/dnd (^16.5.0) - Drag and drop functionality
• highcharts-react-official (^3.2.2) - Chart components
• highcharts-rounded-corners (^1.0.7) - Chart styling
• iconsax-react (^0.0.8) - Icon components
• @fontsource/poppins (^5.1.0) - Font family

Development Dependencies

• typescript (^5.6.2) - TypeScript support
• rollup (^3.29.5) - Module bundler
• @rollup/plugin-typescript (^11.1.6) - TypeScript plugin for Rollup
• @rollup/plugin-commonjs (^26.0.1) - CommonJS plugin for Rollup
• @rollup/plugin-node-resolve (^15.2.3) - Node resolution plugin for Rollup
• @rollup/plugin-terser (^0.4.4) - Minification plugin for Rollup
• storybook (^8.3.2) - Component documentation and testing
• jest (^29.7.0) - Testing framework
• @testing-library/react (^16.0.1) - React testing utilities
• @babel/core (^7.25.2) - JavaScript compiler
• @babel/preset-react (^7.24.7) - React preset for Babel
• @babel/preset-typescript (^7.24.7) - TypeScript preset for Babel

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the ISC License.

Support

For support, please open an issue in the repository.