PayMe LMS UI Component Library

A comprehensive React component library designed for Learning Management System (LMS) applications. Built with modern React patterns, TypeScript support, and a robust design system.

📦 Installation

npm install payme-lms-ui-test

🚀 Quick Start

import React from 'react';
import { Button, CTAButton, Toast, toast, Heading, Text } from 'payme-lms-ui-test';
import 'payme-lms-ui-test/styles';

function App() {
  const handleClick = () => {
    toast("Welcome to PayMe LMS!", "success", 5);
  };

  return (
    <div>
      <Heading variant="h1">Welcome to PayMe LMS</Heading>
      <Text variant="body-md">Get started with our component library</Text>
      <Button variant="primary" size="medium" onClick={handleClick}>
        Get Started
      </Button>
    </div>
  );
}

🎨 Design System

Color Palette

The library includes a comprehensive color system with semantic naming:

• Primary: Blue tones for main actions and branding
• Success: Green tones for positive actions and confirmations
• Error: Red tones for errors and destructive actions
• Warning: Yellow/Orange tones for warnings and alerts
• Info: Blue tones for informational content
• Grey: Neutral tones for text and backgrounds

Typography

• Fonts: DM Sans (primary), Assistant, Lato
• Headings: H1-H4 with consistent sizing and weights
• Body Text: Multiple variants (lg, md, sm, caption, button, italic)

📚 Components

Button

Versatile button component with multiple variants, sizes, and container types.

import { Button } from 'payme-lms-ui-test';

// Basic usage
<Button variant="primary" size="medium">Click me</Button>

// With icon
<Button 
  variant="secondary" 
  color="positive" 
  containerType="icon-text"
  size="large"
>
  Add Item
</Button>

Props:

• variant: "primary" | "secondary" | "tertiary" | "text"
• color: "primary" | "positive" | "negative"
• size: "small" | "medium" | "large"
• containerType: "text-only" | "icon-text" | "text-icon"
• disabled: boolean
• loading: boolean
• leftIcon, rightIcon, icon: ReactNode
• background: string (custom background)
• onClick: function

CTAButton

Call-to-action button with built-in icons and responsive design.

import { CTAButton } from 'payme-lms-ui-test';

<CTAButton 
  label="Invite User" 
  variant="primary" 
  size="medium" 
  outline={false}
/>

Props:

• label: string (default: "Invite user")
• variant: "primary" | "danger" | "success" | "neutral"
• size: "small" | "medium" | "large"
• type: "button" | "submit" | "reset"
• disabled: boolean
• outline: boolean
• onClick: function

Typography

Heading

import { Heading } from 'payme-lms-ui-test';

<Heading variant="h1" weight={700} align="center">
  Main Title
</Heading>

Props:

• variant: "h1" | "h2" | "h3" | "h4"
• weight: 400 | 600 | 700 | 800
• align: "left" | "center" | "right"
• truncate: boolean
• as: string | ElementType (custom HTML tag)

Text

import { Text } from 'payme-lms-ui-test';

<Text variant="body-md" weight={500} align="left">
  Body text content
</Text>

Props:

• variant: "body-lg" | "body-md" | "body-sm" | "caption" | "button" | "italic-lg" | "italic-md" | "italic-sm"
• weight: 400 | 500 | 600 | 700 | 800
• align: "left" | "center" | "right"
• truncate: boolean
• as: string | ElementType

Form Controls

RadioButton

import { RadioButton } from 'payme-lms-ui-test';

<RadioButton
  id="option1"
  name="options"
  value="option1"
  label="Option 1"
  size="medium"
  onChange={handleChange}
/>

Checkbox

import { Checkbox } from 'payme-lms-ui-test';

<Checkbox
  id="terms"
  name="terms"
  value="accepted"
  label="I agree to the terms"
  size="medium"
  onChange={handleChange}
/>

Toggle

import { Toggle } from 'payme-lms-ui-test';

<Toggle
  id="notifications"
  name="notifications"
  label="Enable notifications"
  size="medium"
  onChange={handleChange}
/>

Navigation

Pagination

import { Pagination } from 'payme-lms-ui-test';

<Pagination
  currentPage={1}
  totalPages={10}
  onPageChange={handlePageChange}
  siblingCount={1}
  boundaryCount={1}
/>

Breadcrumbs

import { Breadcrumbs } from 'payme-lms-ui-test';

<Breadcrumbs
  items={[
    { label: "Home", onClick: () => navigate("/") },
    { label: "Courses", onClick: () => navigate("/courses") },
    { label: "Current Course" }
  ]}
  onItemClick={handleItemClick}
/>

Tabs

import { Tabs } from 'payme-lms-ui-test';

<Tabs
  items={[
    { label: "Overview", content: <OverviewContent /> },
    { label: "Details", content: <DetailsContent /> },
    { label: "Settings", content: <SettingsContent /> }
  ]}
  defaultActiveIndex={0}
  onTabChange={handleTabChange}
/>

Feedback

Toast Component

import { Toast } from 'payme-lms-ui-test';

<Toast
  variant="success"
  message="Operation completed successfully!"
  duration={5000}
  position="top-center"
  autoClose={true}
  onClose={handleClose}
/>

Props:

• variant: "info" | "error" | "success" | "warning"
• message: string | ReactNode
• duration: number (milliseconds)
• position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
• autoClose: boolean
• onClose: function

Toast Function (Recommended)

A functional API for displaying toast notifications with automatic management and sensible defaults.

import { toast } from 'payme-lms-ui-test';

// Basic usage with defaults (success type, 10 seconds)
toast("Operation completed successfully!");

// With custom type and duration
toast("Something went wrong", "error", 15);
toast("Please review your input", "warning", 8);
toast("Here's some information", "info");

// Using convenience methods
toast.success("Data saved successfully!");
toast.error("Failed to save data");
toast.warning("Please check your connection");
toast.info("New feature available");

Function Signature:

toast(message: string, type?: string, time?: number): number

Parameters:

• message: string - The message to display (required)
• type: "success" | "error" | "info" | "warning" - Toast type (default: "success")
• time: number - Duration in seconds (default: 10)

Returns: Toast ID for manual dismissal if needed

Convenience Methods:

• toast.success(message, time?) - Success toast (green)
• toast.error(message, time?) - Error toast (red)
• toast.info(message, time?) - Info toast (blue)
• toast.warning(message, time?) - Warning toast (yellow)

Features:

• ✅ Automatic initialization - no setup required
• ✅ Multiple toast support - displays multiple toasts simultaneously
• ✅ Auto-dismiss with progress bar
• ✅ Hover to pause functionality
• ✅ Consistent positioning (top-center)
• ✅ Responsive design

Layout

Expandable

import { Expandable } from 'payme-lms-ui-test';

<Expandable defaultExpanded={false}>
  <div>Collapsible content goes here</div>
</Expandable>

🎯 Usage Examples

Complete Form Example

import React, { useState } from 'react';
import { 
  Button, 
  Heading, 
  Text, 
  RadioButton, 
  Checkbox, 
  Toggle,
  toast 
} from 'payme-lms-ui-test';

function UserForm() {
  const [formData, setFormData] = useState({
    name: '',
    role: 'student',
    notifications: true,
    terms: false
  });

  const handleSubmit = () => {
    if (formData.terms) {
      toast.success("Registration successful!", 8);
      // Submit form logic
    } else {
      toast.error("Please accept the terms and conditions", 6);
    }
  };

  return (
    <div>
      <Heading variant="h2">User Registration</Heading>
      
      <div>
        <Text variant="body-md" weight={600}>Role Selection</Text>
        <RadioButton
          id="student"
          name="role"
          value="student"
          label="Student"
          checked={formData.role === 'student'}
          onChange={(e) => setFormData({...formData, role: e.target.value})}
        />
        <RadioButton
          id="instructor"
          name="role"
          value="instructor"
          label="Instructor"
          checked={formData.role === 'instructor'}
          onChange={(e) => setFormData({...formData, role: e.target.value})}
        />
      </div>

      <Toggle
        id="notifications"
        name="notifications"
        label="Enable email notifications"
        checked={formData.notifications}
        onChange={(e) => setFormData({...formData, notifications: e.target.checked})}
      />

      <Checkbox
        id="terms"
        name="terms"
        value="accepted"
        label="I agree to the terms and conditions"
        checked={formData.terms}
        onChange={(e) => setFormData({...formData, terms: e.target.checked})}
      />

      <Button 
        variant="primary" 
        size="large"
        disabled={!formData.terms}
        onClick={handleSubmit}
      >
        Register
      </Button>
    </div>
  );
}

Dashboard Layout Example

import React, { useState } from 'react';
import { 
  Heading, 
  Text, 
  Button, 
  CTAButton, 
  Tabs, 
  Pagination,
  Breadcrumbs 
} from 'payme-lms-ui-test';

function Dashboard() {
  const [currentPage, setCurrentPage] = useState(1);
  const [activeTab, setActiveTab] = useState(0);

  const breadcrumbItems = [
    { label: "Dashboard", onClick: () => {} },
    { label: "Courses", onClick: () => {} },
    { label: "Current Course" }
  ];

  const tabItems = [
    { label: "Overview", content: <div>Overview content</div> },
    { label: "Assignments", content: <div>Assignments content</div> },
    { label: "Grades", content: <div>Grades content</div> }
  ];

  return (
    <div>
      <Breadcrumbs items={breadcrumbItems} />
      
      <Heading variant="h1">Course Dashboard</Heading>
      <Text variant="body-lg">Welcome to your learning journey</Text>

      <div style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
        <CTAButton 
          label="Add Assignment" 
          variant="primary" 
          size="medium"
        />
        <Button variant="secondary" size="medium">
          View All
        </Button>
      </div>

      <Tabs 
        items={tabItems}
        defaultActiveIndex={activeTab}
        onTabChange={setActiveTab}
      />

      <Pagination
        currentPage={currentPage}
        totalPages={10}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

🛠️ Development

Building the Library

npm run build

Development Mode

npm run dev

Publishing

npm run prepublishOnly  # Builds before publishing
npm publish

📋 Requirements

• React: >= 18.0.0
• React DOM: >= 18.0.0
• Node.js: >= 16.0.0

🎨 Styling

The library uses SCSS with CSS custom properties for theming. All styles are included when you import the library:

import 'payme-lms-ui-test/styles';

Custom Styling

You can override component styles using CSS custom properties or by targeting component classes:

/* Override primary color */
:root {
  --lms-primary-600: #your-custom-color;
}

/* Custom component styling */
.lms-button--primary {
  border-radius: 8px; /* Override default border radius */
}

🔧 Configuration

Vite Configuration

The library is built using Vite with the following configuration:

• Formats: ES modules and CommonJS
• External Dependencies: React and React DOM
• CSS: Single bundled CSS file
• Output: dist/payme-lms-ui.es.js and dist/payme-lms-ui.cjs.js

📄 License

This project is licensed under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Support

For support and questions, please open an issue in the repository or contact the development team.

Version: 0.0.8
Last Updated: 2024