school-erp-ui-shared

Shared Tailwind CSS + Lucide icons React component library used by the School ERP Admin, Teacher, and Student portals.

npm: https://www.npmjs.com/package/school-erp-ui-shared

Installation

npm install school-erp-ui-shared

Peer Dependencies

These must be installed in your consuming app:

npm install react react-dom react-router-dom lucide-react

Usage

Import components

import { Button, Modal, Badge, Sidebar, Topbar } from 'school-erp-ui-shared';

Tailwind config

In your app's tailwind.config.js:

import sharedConfig from 'school-erp-ui-shared/tailwind.shared.js';

export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx}',
    './node_modules/school-erp-ui-shared/dist/**/*.{js,mjs,cjs}',
  ],
  theme: {
    extend: {
      ...sharedConfig.theme.extend,
    },
  },
  plugins: [],
};

Available Exports

Components

Button, Card, CardHeader, CardContent, CardTitle, Badge, Breadcrumb, Input, SearchInput, Select, Modal, DataTable, Sidebar, Topbar, Skeleton, SkeletonCard, SkeletonDashboard, SkeletonTable, ProtectedRoute, RecentActivities, ToastProvider, ConfirmDialog, SearchableSelect, Tabs, Checkbox, FilterBar, DateInput, TimeInput, ErrorBoundary, NetworkStatus, SortableHeader, HoverCard, EmptyState, SectionCard, SessionTimeout

Hooks

useLocalStorage, useKeyboardShortcuts, useFormDraft, useRecentlyViewed, useTabState, useSortableData, useToast

Utilities

cn, exportToCsv, exportToExcel, exportMultiSheetExcel, generatePdf, generateStudentReportCard, generateFeeReceipt, generateAttendanceReport

Development

# Install dependencies
npm install

# Build the library
npm run build

Publishing to npm

First-time setup

1. Login to npm:

   npm login

2. Configure access token (required for 2FA-enabled accounts):

   • Go to https://www.npmjs.com → Avatar → Access Tokens
   • Generate a Granular Access Token with Read & Write permissions
   • Set the token:

     npm config set //registry.npmjs.org/:_authToken=YOUR_TOKEN

Publishing a new version

# Bump version (patch/minor/major)
npm version patch

# Publish (auto-builds via prepublishOnly script)
npm publish --access public

After publishing, update consuming apps

cd School_ERP_UI_Admin && npm update school-erp-ui-shared
cd School_ERP_UI_Student && npm update school-erp-ui-shared
cd School_ERP_UI_Teachers && npm update school-erp-ui-shared

Project Structure

school-erp-ui-shared/
├── src/
│   ├── components/     # React components
│   ├── hooks/          # Custom hooks
│   ├── utils/          # Utility functions
│   └── index.js        # Main entry (all exports)
├── dist/               # Built output (published to npm)
├── tailwind.shared.js  # Shared Tailwind theme config
├── vite.config.js      # Vite library mode build config
└── package.json

Notes

• Only the dist/ folder and tailwind.shared.js are published to npm (not source code)
• react, react-dom, react-router-dom, and lucide-react are peer dependencies — they are NOT bundled, the consuming app provides them
• The prepublishOnly script auto-runs vite build before every publish