NCT Frontend Common Components (nbiz_components)

Overview

This repository provides a set of reusable React components and utilities for NCT frontend applications. The goal is to ensure consistent UI, rapid development, and maintainable code across projects. The package includes layout, UI, theme, and utility components, all styled with Material-UI (MUI) and custom themes.

Directory Structure & File Purposes

Root

• README.md: This file. Explains the project, usage, and file purposes.
• package.json: NPM package configuration, dependencies, scripts, and metadata.
• USAGE.md / INSTALLATION_AND_USAGE.md / PUBLISHING.md / HOW-TO-USE-IN-CODE.md: Documentation for installation, usage, and publishing.

/src

• index.js: Main export file. Exposes all reusable components, providers, and utilities for consumers.
• assets/: Static assets (fonts, images, global styles).
• components/: All reusable React components.
  • common/: Core UI components (see below for details).
  • examples/: Example/demo components for documentation or testing.
• context/: React context providers for app-wide state (e.g., user data, style/theme context).
• theme/: Theme definitions (light/dark), color tokens, and theme context.
• utils/: Utility functions (e.g., CSS generator).

/src/components/common

• Header.jsx: Dashboard/header bar with title, subtitle, and action buttons.
• Footer.jsx: Fixed footer for app branding/copyright.
• Sidebar.jsx: Navigation sidebar with support for nested menus, icons, and user info.
• NCTTypography.jsx: Typography component with custom style variants for consistent text.
• NCTDataGrid.jsx: Styled wrapper around MUI DataGrid for tables with unified look.
• SaveButton.jsx: Pre-styled button for save actions, with icon and loading state.
• CancelButton.jsx: Pre-styled button for cancel actions, with icon.
• DeleteButton.jsx: Icon-only button for delete actions, styled in red.
• CustomButton.jsx: Highly configurable button supporting multiple variants and icons.
• AlertPopup.jsx: Modal dialog for confirmations, warnings, or alerts with optional checkbox.
• SnackBar.jsx: Reusable MUI Snackbar/Alert for toasts (success, error, info, warning).
• ToastProvider.jsx: Context provider for showing toasts globally.
• StatusChip.jsx: Chip component for displaying status labels (e.g., active, inactive).
• NCTStepper.jsx: Stepper component for multi-step workflows.
• ManageButton.jsx: Button for management actions (details in code).
• ReusableModal.jsx: Generic modal dialog for custom content.
• DynamicTable.jsx / GenericDataGrid.jsx: Table/grid components for dynamic data.
• Other files: Additional UI elements (ToolTips, StyledComponents, etc.) for specific use cases.

/src/context

• UserDataProvider.jsx: Provides user data context to the app.
• user_data/: Contains alternate or legacy context and style providers.
  • StyleProvider.jsx / StyleProvider_clean.jsx: Theme/style context providers.
  • UserDataProvider.jsx: (Possibly legacy) user data provider.

/src/theme

• Theme.js: Main theme logic, color mode context, and theme switching.
• dark_theme.js / light_theme.js: Theme definitions for dark and light modes.

/src/utils

• cssGenerator.js: Utility for generating CSS from JS objects or theme tokens.

/docs

• style-provider-guide.md / styleprovider-quick-start.md / ...: Documentation for theming, style provider usage, and component demos.

/demo

• src/components/: Demo implementations of core components for testing and documentation.

Usage

1. Install: npm install nbiz_components --legacy-peer-deps
2. Peer dependencies: Install required MUI and React packages (see package.json).
3. Wrap your app with the theme and user-data providers.
4. Import and use components as needed:

import { Sidebar, Header, Footer, NCTDataGrid, SaveButton } from 'nbiz_components';

Contribution & License

• Proprietary: This code is company property. Do not reuse, modify, or distribute outside the company without authorization.
• For internal contributions, follow the guidelines in PUBLISHING.md.

Component/Utility Details

For detailed usage and props, see the individual component files and the documentation in the /docs folder.

This README was auto-generated to provide a high-level overview and file-by-file purpose for maintainers and consumers. </ColorModeContext.Provider> ); }

export default App;

- **ColorModeContext / useMode**: Light/dark theme switching.
- **ThemeProvider**: MUI theme for all components.
- **UserDataProvider**: Global user data context.

---

## Components Overview

### Sidebar

Flexible navigation with configurable links and icons. Define a config (e.g. `sidebarConfig.jsx`) in your app and pass `submenuItems`:

```javascript
import { Sidebar } from 'nbiz_components';
import { submenuItems } from './config/sidebarConfig';

function App() {
  return (
    <Sidebar
      toggleSidebar={toggleSidebar}
      isSidebarExpanded={isSidebarExpanded}
      submenuItems={submenuItems}
    />
  );
}

Submenu Configuration Example:

import { CalendarTodayOutlined, TaskOutlined, MapOutlined } from '@mui/icons-material';

export const submenuItems = [
  {
    key: 'inventory-management',
    title: 'Inventory Management',
    icon: <CalendarTodayOutlined />,
    items: [
      { key: 'view-inventory', text: 'View Inventory', link: '/ViewItem', icon: <MapOutlined /> },
      { key: 'add-item', text: 'Add Item', link: '/AddSkuPage', icon: <MapOutlined /> },
      { key: 'stock-audit', text: 'Stock Audit', link: '/stock-audit', icon: <TaskOutlined /> }
    ]
  }
];

Header

Page title and optional subtitle. Use in your page components:

import { Header } from 'nbiz_components';

<Header title="Add Item" />

Footer

Shared footer for the app:

import { Footer } from 'nbiz_components';

<Footer />

Building and Publishing the Library

The project is already set up as a consumable library:

• Entry: package.json main points to dist/index.js.
• Build: npm run build compiles src with Babel to dist and copies src/assets into dist/assets.
• Publish: prepublishOnly runs the build before publish. Publish with npm publish (package is on public npm as nbiz_components). See PUBLISHING.md for steps.

For how to use components in code (setup, layout, buttons, DataGrid, typography, alerts, providers), see HOW-TO-USE-IN-CODE.md. For more examples and detailed props, see INSTALLATION_AND_USAGE.md and USAGE.md.

License

Proprietary. All rights reserved. This code is for internal company use only. Unauthorized reuse, modification, or distribution is not permitted.