@kordar/easyui

Core UI component library for the Kordar Web-Libs monorepo, built on top of rc-easyui.

Installation

npm install @kordar/easyui
# Ensure peer dependencies are installed
npm install react react-dom rc-easyui rc-drawer

Usage

Styles

@import 'rc-easyui/dist/themes/material/easyui.css';
@import 'rc-easyui/dist/themes/react.css';
@import '@kordar-lib/iconfont/dist/index.min.css';
@import '@kordar/easyui/dist/index.min.css';

Basic Component Usage

import React from 'react';
import { AdminLayout, TabsPanel } from '@kordar/easyui';

const App = () => {
  return (
    <AdminLayout>
      <TabsPanel />
    </AdminLayout>
  );
};

export default App;

Using Hooks

import { useLocale, useTheme } from '@kordar/easyui';

const MyComponent = () => {
  const { locale, setLocale } = useLocale();
  const { theme, setTheme } = useTheme();

  return (
    <div>
      Current Locale: {locale}
      <button onClick={() => setTheme('dark')}>Switch to Dark Mode</button>
    </div>
  );
};

API Overview

Components

Layout & Panels

• AdminLayout: Main layout for admin dashboards.
• FullBodyLayout: Layout that occupies the full viewport.
• TabsPanel: Tabbed container component.
• DefaultPanel: Standard panel component.
• DrawerPanel: Drawer/Sidebar panel.
• Breadcrumb: Breadcrumb navigation.

Form

• CheckboxGroupBox: Group of checkboxes.
• RadioGroupBox: Group of radio buttons.

Grid

• withCheckGrid: HOC for grid with checkbox selection.
• withRadioGrid: HOC for grid with radio selection.

Message & Notification

• AlertMessager: Alert dialogs.
• InteractiveMessager: Interactive message dialogs.
• Toast: Toast notifications.
• Notification: System notifications.

Access Control

• Access: Component for handling permission-based rendering.

Hooks

• useLocale: Manage application locale.
• useTheme: Manage application theme.
• useRefDialog: Hook for managing dialog references.

Build

To build the package:

npm run build

The output will be generated in the dist directory.