MUI Login Component Library

Build reusable, customizable login components with Material-UI and TypeScript for npm distribution.

Overview

This skill guides development of a React TypeScript component library that provides a reusable, customizable login component built with Material-UI. The library is designed for npm publication with proper bundling, TypeScript support, and theme-agnostic design.

Instructions

Project Architecture

1. **Library Structure**

- Set up as a reusable component library for npm publishing

- Use TypeScript for all component definitions

- Export proper TypeScript definitions for all components and props

- Configure peer dependencies for React and MUI to prevent bundle duplication

- Support both ESM and CommonJS module formats

2. **Component Development Standards**

- Follow Material-UI design patterns and theming conventions

- Make components highly configurable through props

- Ensure theme-agnostic design that works with any MUI theme

- Implement proper TypeScript types for all props and exports

- Include accessibility features (ARIA labels, keyboard navigation)

- Design for responsive layouts across all screen sizes

3. **Login Component Features**

- Implement form validation using react-hook-form

- Support customizable styling and theming through props

- Include loading states and comprehensive error handling

- Provide configurable authentication callbacks

- Support optional illustration/logo placement

- Use modern Material-UI component patterns

- Include proper form accessibility

Build Configuration

1. **Vite Setup**

- Configure Vite as the build tool for library mode

- Generate TypeScript declaration files (.d.ts)

- Output both ESM and CommonJS formats

- Include source maps for debugging

- Configure external dependencies (React, MUI) as peer dependencies

2. **Package Configuration**

- Set proper peer dependencies for React and Material-UI

- Follow semantic versioning for releases

- Include proper package.json exports field

- Configure main, module, and types entry points

Code Quality

1. **Type Safety**

- Export all component prop types

- Use TypeScript strict mode

- Provide proper type definitions for callbacks and custom props

- Document complex types with JSDoc comments

2. **Testing & Validation**

- Test components with different MUI themes

- Validate form handling and error states

- Ensure accessibility compliance

- Test responsive behavior

Development Workflow

When developing components:

1. Start with TypeScript interface definitions for props

2. Implement components using Material-UI components

3. Make styling customizable through props or theme

4. Add proper form validation logic

5. Include loading and error states

6. Test with different themes

7. Build and verify type definitions

8. Update version following semantic versioning

Examples

**Component Prop Interface:**

```typescript

interface LoginBoxProps {

onSubmit: (credentials: { email: string; password: string }) => Promise<void>;

loading?: boolean;

error?: string;

logo?: React.ReactNode;

illustration?: React.ReactNode;

customStyles?: SxProps<Theme>;

}

```

**Peer Dependencies (package.json):**

```json

{

"peerDependencies": {

"react": "^18.0.0",

"react-dom": "^18.0.0",

"@mui/material": "^5.0.0",

"@emotion/react": "^11.0.0",

"@emotion/styled": "^11.0.0"

}

}

```

Constraints