SevaTech Library

React component library with TypeScript and Material-UI.

📖 View Storybook Documentation

📦 Installation

npm install sevatech-library --force

or

yarn add sevatech-library

Peer Dependencies

Ensure you have the following peer dependencies installed:

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@mui/material": "^5.14.0",
  "@emotion/react": "^11.11.0",
  "@emotion/styled": "^11.11.0"
}

🚀 Quick Start

import React, { useState } from 'react';
import { ButtonComponent, TextFieldComponent, ModalComponent } from 'sevatech-library';

function App() {
  const [email, setEmail] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <TextFieldComponent
        label='Email Address'
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder='Enter your email'
        fullWidth
      />

      <ButtonComponent variant='solid' color='brand' onClick={() => setIsOpen(true)} sx={{ marginTop: 2 }}>
        Open Modal
      </ButtonComponent>

      <ModalComponent
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title='Welcome to SevaTech Library'
        buttonRight={{
          children: 'Get Started',
          onClick: () => setIsOpen(false),
        }}
      >
        <p>Start building amazing user interfaces with our comprehensive component library.</p>
      </ModalComponent>
    </div>
  );
}

Building Complex Forms

Create forms with validation, error handling, and various input types:

import {
  TextFieldComponent,
  DateFieldComponent,
  DropdownFieldComponent,
  CheckboxComponent,
  ButtonComponent,
} from 'sevatech-library';

// Form with multiple input types
<TextFieldComponent label='Name' value={name} onChange={setName} />
<DateFieldComponent label='Birthday' value={date} onChange={setDate} />
<DropdownFieldComponent options={options} value={selected} onChange={setSelected} />
<CheckboxComponent label='Agree to terms' checked={agreed} onChange={setAgreed} />
<ButtonComponent variant='solid' color='brand' onClick={handleSubmit}>
  Submit
</ButtonComponent>

Creating Beautiful UI Components

Use ready-made components to create professional interfaces:

import {
  AvatarComponent,
  ChipComponent,
  TypographyComponent,
  TooltipComponent,
} from 'sevatech-library';

// Avatar with fallback
<AvatarComponent name='John Doe' size='lg' color='brand' />

// Chips with colors
<ChipComponent label='New' color='success' />
<ChipComponent label='Important' color='error' />

// Typography with variants
<TypographyComponent variant='h1'>Main Title</TypographyComponent>
<TypographyComponent variant='body1'>Body text</TypographyComponent>

// Tooltip
<TooltipComponent title='Delete item'>
  <IconButton><DeleteIcon /></IconButton>
</TooltipComponent>

Media Integration

Embed videos and handle file uploads:

import { VideoPlayerComponent, UploaderComponent } from 'sevatech-library';

// Video player with YouTube support
<VideoPlayerComponent
  src='https://www.youtube.com/watch?v=VIDEO_ID'
  width={600}
  height={400}
/>

// File upload with drag & drop
<UploaderComponent
  onFilesSelected={files => console.log('Files:', files)}
  accept='.jpg,.png,.pdf'
  maxSize={5 * 1024 * 1024}
/>

Customizing Theme

import { ThemeProvider, createTheme } from '@mui/material';
import { ButtonComponent } from 'sevatech-library';

const theme = createTheme({
  palette: {
    brand: {
      main: '#your-brand-color',
      light: '#lighter-shade',
      dark: '#darker-shade',
    },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ButtonComponent variant='solid' color='brand'>
        Themed Button
      </ButtonComponent>
    </ThemeProvider>
  );
}

📚 Components

The library includes 30+ components organized into groups:

• Form Components: Button, TextField, TextArea, Checkbox, Switch, Dropdown, Search, Date, Money, Rating, Slider, Picker, CheckboxGroup
• Layout Components: Modal, Tabs, Grid
• Data Display: Avatar, AvatarGroup, Chip, Typography, Tooltip
• Navigation: Breadcrumbs, Link
• Utility: Icon, Image, Uploader
• Media: VideoPlayer

View all components and examples at Storybook.

🛠️ Development

Setup

git clone https://github.com/golden-lotus-core-web/sevatech-library.git
cd sevatech-library
npm install

Scripts

npm run dev          # Development server
npm run build        # Build for production
npm run storybook    # Run Storybook
npm run lint         # Lint code
npm run format       # Format code

📖 API Reference

All components support these common props:

• sx: Material-UI sx prop for custom styling
• className: CSS class name
• style: Inline styles
• disabled: Disable component
• loading: Show loading state

For detailed props of each component, see Storybook.

🤝 Contributing

We welcome contributions! Please:

1. Fork repository
2. Tạo feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Mở Pull Request

📄 License

MIT License - see the LICENSE file for details.

📞 Support

• Documentation: Storybook
• Issues: GitHub Issues

Built with ❤️ by SevaTech team