@erpsquad/common 1.0.0 → 1.0.2

package/README.md

@@ -1,10 +1,10 @@
-# erpforce-common-ui
+# @erpsquad/common
 
-A comprehensive React component library for ERP applications, built with Material-UI and TypeScript. This library provides 80+ reusable UI components, theming system, utilities, hooks, and optional Redux integration for building modern ERP applications.
+A comprehensive React component library for ERP applications, built with Material-UI and TypeScript. This library provides 100+ reusable UI components, theming system, utilities, hooks, and optional Redux integration for building modern ERP applications.
 
 ## 🚀 Features
 
-- **80+ UI Components**: Comprehensive set of form controls, data display, navigation, and layout components
+- **100+ UI Components**: Comprehensive set of form controls, data display, navigation, and layout components
 - **Material-UI Integration**: Built on top of Material-UI with custom theming
 - **TypeScript Support**: Full TypeScript definitions for all components and utilities
 - **Flexible Redux Integration**: Optional Redux support - components work with or without Redux
@@ -18,7 +18,7 @@ A comprehensive React component library for ERP applications, built with Materia
 ## 📦 Installation
 
 ```bash
-npm install erpforce-common-ui
+npm install @erpsquad/common
 ```
 
 ### Peer Dependencies
@@ -90,7 +90,7 @@ import {
 	images,
 	DEFAULT_LANG,
 	type LibraryConfig
-} from 'erpforce-common-ui';
+} from '@erpsquad/common';
 
 // Configure library for your application
 const config: LibraryConfig = {
@@ -135,13 +135,13 @@ import {
 	getLibraryConfig,
 	getConfigFunction,
 	type LibraryConfig
-} from 'erpforce-common-ui';
+} from '@erpsquad/common';
 
 // Static assets
-import { default as images } from 'erpforce-common-ui';
+import { default as images } from '@erpsquad/common';
 
 // Constants
-import { DEFAULT_LANG, LANGUAGES, S3_BUCKET_URL } from 'erpforce-common-ui';
+import { DEFAULT_LANG, LANGUAGES, S3_BUCKET_URL } from '@erpsquad/common';
 
 // TypeScript types
 import type {
@@ -151,7 +151,7 @@ import type {
 	TableColumn,
 	User,
 	Permission
-} from 'erpforce-common-ui';
+} from '@erpsquad/common';
 ```
 
 ### Full Usage (With peer dependencies)
@@ -161,8 +161,8 @@ After installing peer dependencies, you can use all components:
 ```tsx
 import React from 'react';
 // Note: Import from specific paths to avoid dependency issues
-import { ERPUIProvider } from 'erpforce-common-ui/contexts';
-import { Button, TextField } from 'erpforce-common-ui/components';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
+import { Button, TextField } from '@erpsquad/common/components';
 
 function App() {
 	return (
@@ -184,9 +184,9 @@ export default App;
 
 ```tsx
 import React from 'react';
-import { ERPUIProvider } from 'erpforce-common-ui/contexts';
-import { Button } from 'erpforce-common-ui/components';
-import { createLightTheme } from 'erpforce-common-ui/theme';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
+import { Button } from '@erpsquad/common/components';
+import { createLightTheme } from '@erpsquad/common/theme';
 
 function App() {
 	const { theme } = createLightTheme('#2196f3', 'ltr');
@@ -210,7 +210,7 @@ The library includes a comprehensive theming system with support for light/dark
 ### Theme Configuration
 
 ```tsx
-import { ERPUIProvider } from '@erpforce/common/contexts';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
 
 <ERPUIProvider
 	themeMode='light' // 'light' | 'dark'
@@ -224,8 +224,8 @@ import { ERPUIProvider } from '@erpforce/common/contexts';
 ### Custom Theme Object
 
 ```tsx
-import { createLightTheme, createDarkTheme } from 'erpforce-common-ui/theme';
-import { ERPUIProvider } from 'erpforce-common-ui/contexts';
+import { createLightTheme, createDarkTheme } from '@erpsquad/common/theme';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
 
 // Create custom theme
 const { theme } = createLightTheme('#1976d2', 'ltr');
@@ -253,28 +253,28 @@ The library uses a modular import system to prevent dependency issues. Import fr
 
 ```tsx
 // Core functionality (no peer dependencies required)
-import { configureLibrary, images } from 'erpforce-common-ui';
+import { configureLibrary, images } from '@erpsquad/common';
 
 // Components (requires React, MUI peer dependencies)
-import { Button, TextField } from 'erpforce-common-ui/components';
+import { Button, TextField } from '@erpsquad/common/components';
 
 // Hooks (requires React peer dependencies)
-import { useAuth, useLanguage } from 'erpforce-common-ui/hooks';
+import { useAuth, useLanguage } from '@erpsquad/common/hooks';
 
 // Contexts (requires React peer dependencies)
-import { ERPUIProvider, AuthProvider } from 'erpforce-common-ui/contexts';
+import { ERPUIProvider, AuthProvider } from '@erpsquad/common/contexts';
 
 // Theme utilities (requires MUI peer dependencies)
-import { createLightTheme, createDarkTheme } from 'erpforce-common-ui/theme';
+import { createLightTheme, createDarkTheme } from '@erpsquad/common/theme';
 
 // Utility functions (may require specific peer dependencies)
-import { formatDate, validateEmail } from 'erpforce-common-ui/utils';
+import { formatDate, validateEmail } from '@erpsquad/common/utils';
 
 // Redux integration (requires Redux peer dependencies)
-import { createLibraryStore, slices } from 'erpforce-common-ui/redux';
+import { createLibraryStore, slices } from '@erpsquad/common/redux';
 
 // API clients (requires axios peer dependency)
-import { AccountingAPI, InventoryAPI } from 'erpforce-common-ui/api-client';
+import { AccountingAPI, InventoryAPI } from '@erpsquad/common/api-client';
 ```
 
 ## 🔌 API Clients
@@ -292,7 +292,7 @@ import {
 	RbacAPI,
 	DriveAPI,
 	SystemFeatureAPI
-} from 'erpforce-common-ui/api-client';
+} from '@erpsquad/common/api-client';
 
 // Configure base API client
 const baseConfig = {
@@ -323,9 +323,9 @@ import {
   DatePicker,
   Checkbox,
   Radio,
-  Switch,
+  ToggleSwitch,
   Button
-} from 'erpforce-common-ui/components';
+} from '@erpsquad/common/components';
 
 // Text input
 <TextField
@@ -357,10 +357,10 @@ import {
 import {
   MaterialTable,
   Grid,
-  Card,
+  CardWrapper,
   Avatar,
   Chip
-} from 'erpforce-common-ui/components';
+} from '@erpsquad/common/components';
 
 // Data table (requires @mui/x-data-grid)
 <MaterialTable
@@ -377,7 +377,7 @@ import {
 // Grid layout
 <Grid container spacing={2}>
   <Grid item xs={12} md={6}>
-    <Card>Content</Card>
+    <CardWrapper>Content</CardWrapper>
   </Grid>
 </Grid>
 ```
@@ -387,10 +387,10 @@ import {
 ```tsx
 import {
   Sidebar,
-  Breadcrumb,
+  BreadCrumb,
   Pagination,
   Tabs
-} from 'erpforce-common-ui/components';
+} from '@erpsquad/common/components';
 
 // Sidebar navigation
 <Sidebar
@@ -400,7 +400,7 @@ import {
 />
 
 // Breadcrumb (requires react-router-dom for navigation)
-<Breadcrumb
+<BreadCrumb
   items={[
     { label: 'Home', href: '/' },
     { label: 'Users', href: '/users' },
@@ -413,12 +413,12 @@ import {
 
 ```tsx
 import {
-  Snackbar,
+  CustomSnackbar,
   Toast,
   Loader,
   Alert,
   Modal
-} from 'erpforce-common-ui/components';
+} from '@erpsquad/common/components';
 
 // Loading indicator
 <Loader size="large" text="Loading data..." />
@@ -428,6 +428,14 @@ import {
   Operation completed successfully!
 </Alert>
 
+// Snackbar notification
+<CustomSnackbar
+  open={isOpen}
+  message="Operation completed successfully!"
+  severity="success"
+  onClose={handleClose}
+/>
+
 // Modal dialog
 <Modal
   open={isOpen}
@@ -449,12 +457,12 @@ The library provides flexible Redux integration that works with or without Redux
 ### With Redux (Recommended for complex applications)
 
 ```tsx
-import { ERPUIProvider } from 'erpforce-common-ui/contexts';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
 import {
 	createLibraryStore,
-	ShareModalEnhanced,
 	createConfiguredApiClient
-} from 'erpforce-common-ui/redux';
+} from '@erpsquad/common/redux';
+import { ShareModal } from '@erpsquad/common/components';
 
 // Configure API client
 const apiClient = createConfiguredApiClient(baseApiClient, () => ({
@@ -474,7 +482,7 @@ const store = createLibraryStore(
 function App() {
 	return (
 		<ERPUIProvider useRedux={true} reduxStore={store} apiClient={apiClient}>
-			<ShareModalEnhanced useRedux={true} />
+			<ShareModal useRedux={true} />
 		</ERPUIProvider>
 	);
 }
@@ -483,8 +491,8 @@ function App() {
 ### Without Redux (Simpler applications)
 
 ```tsx
-import { ERPUIProvider } from 'erpforce-common-ui/contexts';
-import { ShareModalEnhanced } from 'erpforce-common-ui/components';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
+import { ShareModal } from '@erpsquad/common/components';
 
 function App() {
 	const [users, setUsers] = useState([]);
@@ -502,7 +510,7 @@ function App() {
 
 	return (
 		<ERPUIProvider useRedux={false}>
-			<ShareModalEnhanced
+			<ShareModal
 				useRedux={false}
 				users={users}
 				loading={loading}
@@ -532,7 +540,7 @@ import {
 	usePages,
 	useDeepMemo,
 	useReduxIntegration
-} from 'erpforce-common-ui/hooks';
+} from '@erpsquad/common/hooks';
 
 // Authentication hook
 const { user, isAuthenticated, login, logout } = useAuth();
@@ -550,7 +558,7 @@ const memoizedValue = useDeepMemo(() => expensiveCalculation(data), [data]);
 ### Redux Integration Hook
 
 ```tsx
-import { useReduxIntegration } from 'erpforce-common-ui/hooks';
+import { useReduxIntegration } from '@erpsquad/common/hooks';
 
 const MyComponent = ({ useRedux, ...props }) => {
 	const { data, loading, error, actions } = useReduxIntegration({
@@ -578,7 +586,7 @@ import {
 	formatText,
 	deformatText,
 	colorUtils
-} from 'erpforce-common-ui/utils';
+} from '@erpsquad/common/utils';
 
 // Date formatting (requires date-fns)
 const formattedDate = formatDate(new Date(), 'dd/MM/yyyy');
@@ -600,7 +608,7 @@ Requires `react-i18next` and `i18next` peer dependencies.
 ### Language Provider
 
 ```tsx
-import { ERPUIProvider } from '@erpforce/common/contexts';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
 
 <ERPUIProvider
 	enableLanguage={true}
@@ -613,7 +621,7 @@ import { ERPUIProvider } from '@erpforce/common/contexts';
 ### Using Translations
 
 ```tsx
-import { useLanguage } from 'erpforce-common-ui/hooks';
+import { useLanguage } from '@erpsquad/common/hooks';
 
 const MyComponent = () => {
 	const { t, currentLanguage, changeLanguage } = useLanguage();
@@ -633,8 +641,8 @@ The library includes comprehensive testing utilities:
 
 ```tsx
 import { render, screen } from '@testing-library/react';
-import { ERPUIProvider } from 'erpforce-common-ui/contexts';
-import { Button } from 'erpforce-common-ui/components';
+import { ERPUIProvider } from '@erpsquad/common/contexts';
+import { Button } from '@erpsquad/common/components';
 
 test('renders button correctly', () => {
 	render(
@@ -736,14 +744,14 @@ npm run validate:package
 #### Import Errors
 
 ```bash
-# Error: Cannot resolve '@erpforce/common/components'
+# Error: Cannot resolve '@erpsquad/common/components'
 # Solution: Install required peer dependencies
 npm install @mui/material @emotion/react @emotion/styled
 
 # Error: Module not found
 # Solution: Use correct import paths
-import { Button } from 'erpforce-common-ui/components'; // ✅ Correct
-import { Button } from 'erpforce-common-ui'; // ❌ Incorrect for components
+import { Button } from '@erpsquad/common/components'; // ✅ Correct
+import { Button } from '@erpsquad/common'; // ❌ Incorrect for components
 ```
 
 #### Peer Dependency Warnings
@@ -762,11 +770,11 @@ npm install react react-dom @mui/material @emotion/react @emotion/styled @mui/ic
 ```bash
 # Error: Cannot find type definitions
 # Solution: Ensure TypeScript types are properly imported
-import type { LibraryConfig } from 'erpforce-common-ui';
+import type { LibraryConfig } from '@erpsquad/common';
 
 # Error: Module has no exported member
 # Solution: Check if the export requires peer dependencies
-import { useAuth } from 'erpforce-common-ui/hooks'; // Requires React
+import { useAuth } from '@erpsquad/common/hooks'; // Requires React
 ```
 
 #### Build Issues
@@ -779,7 +787,7 @@ import { useAuth } from 'erpforce-common-ui/hooks'; // Requires React
 # For Vite projects, add to vite.config.ts:
 export default defineConfig({
   optimizeDeps: {
-    include: ['erpforce-common-ui']
+    include: ['@erpsquad/common']
   }
 });
 
@@ -821,7 +829,7 @@ MIT License - see the [LICENSE](LICENSE) file for details.
 - **Documentation**: [Library Docs](https://github.com/erpforce/common#readme)
 - **Issues**: [GitHub Issues](https://github.com/erpforce/common/issues)
 - **Discussions**: [GitHub Discussions](https://github.com/erpforce/common/discussions)
-- **NPM Package**: [erpforce-common-ui](https://www.npmjs.com/package/erpforce-common-ui)
+- **NPM Package**: [@erpsquad/common](https://www.npmjs.com/package/@erpsquad/common)
 - **Changelog**: [CHANGELOG.md](./CHANGELOG.md)
 - **Migration Guide**: [MIGRATION.md](./MIGRATION.md)
 - **Troubleshooting**: [TROUBLESHOOTING.md](./TROUBLESHOOTING.md)