varminer-app-header 2.1.2 → 2.1.4

package/README.md

@@ -1,209 +0,0 @@
-# varminer-app-header
-
-A plug-and-play React header component built with Material-UI (MUI) that provides a professional app header with drawer toggle, notifications, user profile menu, and responsive design.
-
-## Features
-
-- 🎨 **Material-UI Integration** - Built with MUI components
-- 📱 **Responsive Design** - Mobile and desktop support
-- 🔔 **Notifications** - Badge support for notifications and messages
-- 👤 **User Profile Menu** - Dropdown menu with user info and actions
-- 🎯 **Drawer Toggle** - Built-in drawer context for sidebar navigation
-- 🎨 **Customizable** - Configurable props for branding and behavior
-- 📦 **TypeScript** - Full TypeScript support
-- 🎨 **SCSS Styling** - Customizable styles
-
-## Installation
-
-```bash
-npm install varminer-app-header
-```
-
-## Peer Dependencies
-
-Make sure you have these installed in your project:
-
-```bash
-npm install react react-dom react-router-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
-```
-
-**Important:** The package uses React Router's `useNavigate` hook for internal navigation. Make sure your app is wrapped with a `BrowserRouter` (or similar router) from `react-router-dom`.
-
-## Usage
-
-### Plug-and-Play (Zero Configuration)
-
-The package is **100% plug-and-play** - no props needed! It automatically loads everything from localStorage and handles all interactions internally:
-
-```tsx
-import React from 'react';
-import { AppHeader, DrawerProvider } from 'varminer-app-header';
-import 'varminer-app-header/dist/index.css'; // Don't forget the CSS!
-
-function App() {
-  return (
-    <DrawerProvider>
-      <AppHeader />
-    </DrawerProvider>
-  );
-}
-```
-
-**That's it!** The component automatically:
-- ✅ Loads user data from `localStorage` (`persist:userdb`)
-- ✅ Loads notification count from `localStorage`
-- ✅ Loads message count from `localStorage`
-- ✅ Handles hamburger menu toggle internally
-- ✅ Uses default logo ("VAR" and "MINER")
-- ✅ Uses default routes: `/account/overview`, `/profile`, `/logout`
-- ✅ Handles all navigation internally
-- ✅ Shows online status badge
-
-### Zero Configuration
-
-The component requires **no props at all** - it's completely plug-and-play!
-
-**Defaults:**
-- Logo: "VAR" and "MINER"
-- Routes: `/account/overview` (settings), `/profile` (profile), `/logout` (logout)
-- Navigation: Handled internally with React Router
-
-### With Custom Callbacks (Override Default Behavior)
-
-You can override the default navigation by providing custom callbacks:
-
-```tsx
-import React from 'react';
-import { AppHeader, DrawerProvider } from 'varminer-app-header';
-import { useNavigate } from 'react-router-dom';
-
-function App() {
-  const navigate = useNavigate();
-
-  return (
-    <DrawerProvider>
-      <AppHeader
-        user={{
-          name: "Jane Smith",
-          email: "jane@example.com",
-          role: "Manager",
-          avatar: "/path/to/avatar.jpg"
-        }}
-        isOnline={true}
-        logo={{ first: "MY", second: "APP" }}
-        routes={{
-          settings: "/settings",
-          profile: "/profile",
-          logout: "/login"
-        }}
-        onDrawerToggle={() => {
-          // Handle drawer toggle
-          console.log('Drawer toggled');
-        }}
-        onSettingsClick={() => {
-          // Custom logic before navigation
-          console.log('Custom settings handler');
-          navigate('/custom-settings');
-        }}
-        onSignOutClick={() => {
-          // Custom sign out logic
-          localStorage.clear();
-          sessionStorage.clear();
-          navigate('/user/login');
-        }}
-      />
-    </DrawerProvider>
-  );
-}
-```
-
-## Props
-
-### AppHeaderProps
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `UserProfile` | See below | User profile information |
-| `isOnline` | `boolean` | `true` | Whether the user is online |
-| `logo` | `{ first: string, second: string }` | `{ first: "VAR", second: "MINER" }` | App logo/brand name (optional) |
-| `notificationCount` | `number` | `0` | Notification badge count (only shown if > 0) |
-| `messageCount` | `number` | `undefined` | Message badge count (optional, shown only in mobile menu) |
-| `onDrawerToggle` | `() => void` | - | Callback when drawer toggle is clicked |
-| `routes` | `{ settings?: string, profile?: string, logout?: string }` | See below | Route paths for navigation (optional) |
-| `onSettingsClick` | `() => void` | - | Callback when settings is clicked (overrides default navigation) |
-| `onProfileClick` | `() => void` | - | Callback when profile is clicked (overrides default navigation) |
-| `onSignOutClick` | `() => void` | - | Callback when sign out is clicked (overrides default navigation) |
-| `className` | `string` | - | Custom CSS class name |
-
-**Default routes (used if not provided):**
-- `settings`: `"/account/overview"`
-- `profile`: `"/profile"`
-- `logout`: `"/logout"`
-
-**Note:** If callbacks are not provided, the package will automatically handle navigation using React Router's `useNavigate` hook. For sign out, it will also clear `localStorage` before navigating.
-
-### UserProfile
-
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `name` | `string` | Yes | User's full name |
-| `email` | `string` | Yes | User's email address |
-| `role` | `string` | Yes | User's role/title |
-| `avatar` | `string` | No | URL to user's avatar image |
-| `initials` | `string` | No | Custom initials (auto-generated from name if not provided) |
-
-## DrawerProvider
-
-The `DrawerProvider` component provides drawer state management. Wrap your app with it to enable drawer functionality:
-
-```tsx
-import { DrawerProvider, useDrawer } from 'varminer-app-header';
-
-function MyApp() {
-  return (
-    <DrawerProvider>
-      <YourApp />
-    </DrawerProvider>
-  );
-}
-
-// Use the drawer context in any component
-function Sidebar() {
-  const { isDrawerOpen, toggleDrawer } = useDrawer();
-  
-  return (
-    <Drawer open={isDrawerOpen} onClose={toggleDrawer}>
-      {/* Sidebar content */}
-    </Drawer>
-  );
-}
-```
-
-## Styling
-
-The component includes SCSS styles that can be customized. The styles use SCSS variables defined in `src/styles/_variables.scss`. You can override these by importing the styles and customizing the variables.
-
-### Custom Styling
-
-```tsx
-import 'varminer-app-header/dist/index.css';
-// Your custom overrides
-```
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Build the package
-npm run build
-
-# Watch mode for development
-npm run dev
-```
-
-## License
-
-MIT
-