Synergy DMS Components

A React component library for Synergy Document Management System.

Installation

Install from npm:

npm install @synergytek/react

Or using yarn:

yarn add @synergytek/react

Or using pnpm:

pnpm add @synergytek/react

Usage

Import the global styles once in your application entry file (e.g., main.jsx or index.js):

import '@synergytek/react';

This automatically imports all the necessary Tailwind CSS styles and configurations.

Importing Components

You can import components in several ways:

// Import from the main package (includes everything)
import { Button, DataGrid, Card, Loader } from '@synergytek/react';

// Or import from specific modules
import { Button, DataGrid } from '@synergytek/react/components';
import { useDebounce } from '@synergytek/react/hooks';
import { useUser, UserProvider } from '@synergytek/react/contexts';
import { cn, formatDate } from '@synergytek/react/utils';
import { RootLayout, Navbar } from '@synergytek/react/layouts';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Card>
        <h2>My Card</h2>
      </Card>
    </div>
  );
}

Available Components

Core Components

• Button - Customizable button component
• Breadcrumb - Navigation breadcrumb
• Card - Card container
• Columns - Column layout
• ContextMenu - Context menu with trigger
• DataGrid - Data grid with AG Grid
• Dropdown - Dropdown component
• Loader - Loading spinner
• RadioGroup - Radio button group
• Select - Select dropdown
• Separator - Visual separator
• Slider - Slider input
• Table - Table component
• Template - Template component
• Text - Text component
• Toolbar - Toolbar component
• Icon - Icon component
• Toaster - Toast notifications

Hooks

• useDebounce - Debounce hook
• useLocalStorage - Local storage hook

Contexts

• useNavbar - Navbar context hook
• useSidebar - Sidebar context hook
• useUser - User context hook
• UserProvider - User context provider
• MenuProvider - Menu context provider
• SidebarProvider - Sidebar context provider
• NavbarProvider - Navbar context provider

Utilities

• cn() - Class name merger (clsx + tailwind-merge)
• formatDate() - Date formatting utility
• type() - Type checking utility
• flattenObject() - Object flattening utility
• toTitle() - Convert string to title case

Peer Dependencies

Make sure your project has these installed:

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^7.10.1"
}

Styling

This library uses Tailwind CSS v4 and automatically handles all styling configuration.

No additional Tailwind CSS setup is required in your client project!

Simply import the package once in your entry file:

import '@synergytek/react';

This will automatically:

• Import all necessary Tailwind CSS styles
• Configure the theme with custom color variables
• Set up dark mode support
• Include all component-specific styles

If your project already uses PostCSS, the package will work seamlessly. If not, you may need to add PostCSS to your build configuration:

// postcss.config.js (optional, only if not already configured)
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Versioning

This library follows Semantic Versioning.

To install a specific version:

npm install @synergytek/[email protected]

To update to the latest version:

npm update @synergytek/react

Version History

• v1.0.3 - Optimized import structure, automatic Tailwind CSS
• v1.0.2 - Package improvements
• v1.0.0 - Initial release

See CHANGELOG.md for detailed version history.

Documentation

• INSTALLATION.md - Detailed installation instructions
• CHANGELOG.md - Version history and changes

Development

This is a source-only library. Consuming applications import the source files directly.

License

MIT

Contributing

Please ensure all components follow the established patterns and include proper prop-types or TypeScript definitions.