npm - @erpsquad/common - Versions diffs - 1.8.0 → 1.8.1 - Mend

@erpsquad/common 1.8.0 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/components/action-bar/action-bar/index.esm.js +3 -55
package/dist/components/action-bar/action-bar/index.esm.js.map +1 -1
package/dist/components/action-bar/action-bar/index.js +18 -28
package/dist/components/action-bar/action-bar/index.js.map +1 -1
package/dist/index.esm.js +68 -67
package/dist/index.js +1 -1
package/dist/style.css +2 -2
package/dist/utils/index.d.ts +1 -0
package/dist/utils/index.esm.js +4 -3
package/dist/utils/index.js +1 -1
package/package.json +2 -4
package/CSS_SETUP.md +0 -195
package/QUICK_START.md +0 -118

package/CSS_SETUP.md DELETED Viewed

@@ -1,195 +0,0 @@
-# CSS Setup Guide - @erpsquad/common
-## ⚠️ CRITICAL: CSS Must Be Imported
-Components from `@erpsquad/common` will **NOT have styling** unless you import the CSS file.
-## ✅ How to Fix
-Add this **ONE LINE** to your main application file:
-```tsx
-import '@erpsquad/common/style.css';
-```
-## 📍 Where to Add It
-### React with Vite
-```tsx
-// src/main.tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import '@erpsquad/common/style.css'; // 👈 Add here!
-import App from './App';
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-```
-### React with Create React App
-```tsx
-// src/index.tsx or src/App.tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import '@erpsquad/common/style.css'; // 👈 Add here!
-import App from './App';
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
-```
-### Next.js (Pages Router)
-```tsx
-// pages/_app.tsx
-import '@erpsquad/common/style.css'; // 👈 Add here!
-import type { AppProps } from 'next/app';
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-```
-### Next.js (App Router)
-```tsx
-// app/layout.tsx
-import '@erpsquad/common/style.css'; // 👈 Add here!
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-## 🎯 What This Does
-The `style.css` file includes:
-- ✅ All component styles
-- ✅ Chart styles (BarChart, DonutChart, etc.)
-- ✅ Layout and grid styles
-- ✅ Utility classes
-- ✅ Responsive styles
-- ✅ CSS reset and normalize
-- ✅ Theme variables
-- ✅ Animations
-## 🤔 Why Is This Required?
-Component libraries bundle CSS separately from JavaScript to:
-1. **Enable tree-shaking**: Only include CSS for components you use
-2. **Optimize loading**: Load CSS and JS in parallel
-3. **Better caching**: CSS can be cached separately
-4. **Flexibility**: Consumers can override styles more easily
-This is the standard approach used by popular libraries like:
-- Material-UI
-- Ant Design
-- Bootstrap
-- Tailwind CSS
-## ❌ Common Mistakes
-### Mistake #1: Not Importing CSS
-```tsx
-// ❌ WRONG - No styles imported!
-import { Button } from '@erpsquad/common/components';
-function App() {
-  return <Button>Click me</Button>; // Will render but look unstyled
-}
-```
-### Mistake #2: Importing CSS in the Wrong Place
-```tsx
-// ❌ WRONG - Don't import in individual components
-// components/MyComponent.tsx
-import '@erpsquad/common/style.css'; // Don't do this!
-import { Button } from '@erpsquad/common/components';
-```
-### Mistake #3: Conditional Import
-```tsx
-// ❌ WRONG - Don't conditionally import CSS
-if (condition) {
-  import '@erpsquad/common/style.css'); // Don't do this!
-}
-```
-## ✅ Correct Usage
-```tsx
-// ✅ CORRECT - Import once in main file
-// main.tsx
-import '@erpsquad/common/style.css';
-import React from 'react';
-import App from './App';
-// ... rest of your setup
-```
-```tsx
-// ✅ CORRECT - Then use components anywhere
-// components/MyComponent.tsx
-import { Button, TextField } from '@erpsquad/common/components';
-export function MyComponent() {
-  return (
-    <>
-      <TextField label="Name" />
-      <Button variant="contained">Submit</Button>
-    </>
-  );
-}
-```
-## 🔍 Verification
-To verify CSS is loaded:
-1. Run your app
-2. Open browser DevTools (F12)
-3. Check the `<head>` section - you should see styles
-4. Or check the "Sources" tab for `style.css`
-## 🆘 Still Not Working?
-See [TROUBLESHOOTING.md](./TROUBLESHOOTING.md) for more help.
-### Quick Checks:
-1. ✅ CSS imported in main file?
-2. ✅ Import statement before component imports?
-3. ✅ Cleared build cache? (`rm -rf node_modules/.vite dist`)
-4. ✅ Restarted dev server?
-### Build Tool Specific Issues:
-- **Vite**: Add to `vite.config.ts`:
-  ```ts
-  optimizeDeps: {
-    include: ['@erpsquad/common']
-  }
-  ```
-- **Webpack**: Ensure css-loader and style-loader are installed
-- **Next.js**: CSS import should be in `_app.tsx` or `layout.tsx`

package/QUICK_START.md DELETED Viewed

@@ -1,118 +0,0 @@
-# Quick Start - @erpsquad/common
-Get up and running with the ERP UI library in 2 minutes.
-## 1️⃣ Install
-```bash
-npm install @erpsquad/common
-```
-## 2️⃣ Install Peer Dependencies
-```bash
-npm install react react-dom @mui/material @emotion/react @emotion/styled @mui/icons-material
-```
-## 3️⃣ ⚠️ Import Styles (REQUIRED!)
-**In your main application file** (`main.tsx`, `App.tsx`, or `index.tsx`):
-```tsx
-import '@erpsquad/common/style.css'; // 👈 MUST ADD THIS!
-```
-**Without this, components will have NO styling!**
-## 4️⃣ Use Components
-```tsx
-import React from 'react';
-import '@erpsquad/common/style.css'; // 👈 Don't forget!
-import { ERPUIProvider } from '@erpsquad/common/contexts';
-import { Button, TextField } from '@erpsquad/common/components';
-function App() {
-  return (
-    <ERPUIProvider>
-      <TextField label="Name" />
-      <Button variant="contained">Submit</Button>
-    </ERPUIProvider>
-  );
-}
-export default App;
-```
-## 🎨 Chart Components
-```tsx
-import '@erpsquad/common/style.css';
-import {
-  BarChart,
-  DonutChart,
-  LineChart,
-  MultiLineChart
-} from '@erpsquad/common/components';
-function Dashboard() {
-  const data = [
-    { label: 'Jan', value: 100 },
-    { label: 'Feb', value: 200 }
-  ];
-  return <BarChart data={data} />;
-}
-```
-## 🔧 Common Imports
-### Components
-```tsx
-import { Button, TextField, Select } from '@erpsquad/common/components';
-```
-### Hooks
-```tsx
-import { useAuth, useLanguage } from '@erpsquad/common/hooks';
-```
-### Utils
-```tsx
-import { formatDate, enqueueSnackbar } from '@erpsquad/common/utils';
-```
-### Contexts
-```tsx
-import { ERPUIProvider, AuthProvider } from '@erpsquad/common/contexts';
-```
-### Theme
-```tsx
-import { createLightTheme, createDarkTheme } from '@erpsquad/common/theme';
-```
-## ⚠️ Troubleshooting
-### Components have no styling?
-→ **Add** `import '@erpsquad/common/style.css';` in your main file
-### Cannot resolve module?
-→ **Install peer dependencies**: `npm install @mui/material @emotion/react @emotion/styled`
-### Hooks not working?
-→ **Wrap your app** with `<ERPUIProvider>`
-## 📚 Full Documentation
-- [Complete README](./README.md)
-- [Troubleshooting Guide](./TROUBLESHOOTING.md)
-- [Styles Guide](./src/styles/README.md)
-## 🆘 Need Help?
-- [GitHub Issues](https://github.com/erpforce/common/issues)
-- [NPM Package](https://www.npmjs.com/package/@erpsquad/common)