vnmeid-ui

v1.0.2

Published

10 months ago

Meid UI Components library for React Native 0.64.2

0High
0Medium
0Low

fismac

react-native ui components library 0.64.2 typescript

VNMEID UI Library

A modern, TypeScript-first UI component library designed specifically for React Native 0.64.2.

🚀 Features

Modern Components: Button, TextField, Switch with multiple variants
TypeScript Support: Full type safety and IntelliSense
Theme System: Comprehensive design tokens and theming
React Native 0.64.2 Compatible: Optimized for stable RN version
Zero Dependencies: Lightweight with minimal external dependencies

📦 Installation

NPM Installation (Recommended)

# Install the package from npm
npm install vnmeid-ui

# Install required peer dependencies
npm install lodash@^4.17.21
npm install --save-dev @types/lodash@^4.14.191

🎨 Components

Core Components (3)

| Component | Description | Variants | Key Features | |-----------|-------------|----------|--------------| | Button | Primary action component | 6 variants, 3 sizes | Loading, icons, disabled states, hover effects | | TextField | Single-line text input | Multiple types | Validation, icons, password toggle | | Switch | Toggle control | 3 sizes | Animated, custom colors |

Layout Components (5)

| Component | Description | Variants | Key Features | |-----------|-------------|----------|--------------| | Card | Content container | 3 variants, 3 padding sizes | Actions, pressable, elevated/outlined | | Header | Navigation header | 3 variants | Left/right icons, subtitle, transparent | | List | Data display list | Separator options | ListItem with icons, chevrons | | Spacer | Layout spacing | 12 sizes | Horizontal/vertical spacing | | TabBar | Bottom navigation tabs | 3 variants, 3 sizes | Icons, labels, badges, hover effects |

Input Components (6)

| Component | Description | Variants | Key Features | |-----------|-------------|----------|--------------| | TextArea | Multi-line text input | Custom rows | Character count, validation | | Checkbox | Single selection | 3 sizes, 3 variants | Custom colors, disabled states | | RadioButton | Single choice selection | 3 sizes | RadioGroup context, custom colors | | Slider | Range input control | Custom colors | Animated, step control, disabled | | DatePicker | Date/time selection | 3 modes | Ant Design style, decade navigation, spinner time picker | | SearchBar | Search input | Clear button | Left/right icons, submit handling |

Feedback Components (4)

| Component | Description | Variants | Key Features | |-----------|-------------|----------|--------------| | Loading | Loading indicator | 3 sizes | Overlay mode, custom text | | Toast | Notification messages | 4 types, 3 positions | Context provider, auto-hide | | Badge | Status indicator | 5 variants, 3 sizes, 3 shapes | Custom colors, pill/rounded/square | | ProgressBar | Progress indicator | Custom colors | Animated, custom height |

Utility Components (1)

| Component | Description | Variants | Key Features | |-----------|-------------|----------|--------------| | Tooltip | Help text overlay | 4 positions | Arrow, delay, custom styling |

Component Usage Examples

Button

import { Button } from 'vnmeid-ui';

<Button
  title="Click me"
  variant="primary"        // 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'text'
  size="medium"           // 'small' | 'medium' | 'large'
  onPress={() => {}}
  loading={false}
  disabled={false}
  fullWidth={false}
  leftIcon={<Icon />}
  rightIcon={<Icon />}
/>

TextField

import { TextField } from 'vnmeid-ui';

<TextField
  label="Email"
  placeholder="Enter your email"
  value={email}
  onChangeText={setEmail}
  error={emailError}
  helperText="We'll use this for login"
  required={true}
  disabled={false}
  secureTextEntry={false}
  showPasswordToggle={true}
  leftIcon={<Icon />}
  rightIcon={<Icon />}
/>

DatePicker (Enhanced)

import { DatePicker } from 'vnmeid-ui';

// Date selection
<DatePicker
  label="Select Date"
  value={selectedDate}
  onDateChange={setSelectedDate}
  mode="date"
  placeholder="Choose a date"
  showCalendar={showDatePicker}
  onToggleCalendar={() => setShowDatePicker(!showDatePicker)}
/>

// Time selection (Ant Design style spinner)
<DatePicker
  label="Select Time"
  value={selectedTime}
  onDateChange={setSelectedTime}
  mode="time"
  placeholder="Choose a time"
  showCalendar={showTimePicker}
  onToggleCalendar={() => setShowTimePicker(!showTimePicker)}
/>

// DateTime selection
<DatePicker
  label="Select Date & Time"
  value={selectedDateTime}
  onDateChange={setSelectedDateTime}
  mode="datetime"
  placeholder="Choose date and time"
  showCalendar={showDateTimePicker}
  onToggleCalendar={() => setShowDateTimePicker(!showDateTimePicker)}
/>

Form Example

import { 
  Card, 
  TextField, 
  TextArea, 
  Checkbox, 
  RadioGroup, 
  RadioButton, 
  Button 
} from 'vnmeid-ui';

<Card title="User Registration" variant="elevated">
  <TextField 
    label="Full Name" 
    placeholder="Enter your name"
    required 
  />
  
  <TextArea 
    label="Bio" 
    placeholder="Tell us about yourself"
    rows={4}
    maxLength={500}
    showCharacterCount 
  />
  
  <RadioGroup>
    <RadioButton label="Male" value="male" />
    <RadioButton label="Female" value="female" />
  </RadioGroup>
  
  <Checkbox label="Accept terms and conditions" />
  
  <Button title="Submit" variant="primary" />
</Card>

Navigation Example

import { Header, List, ListItem, TabBar } from 'vnmeid-ui';

<Header 
  title="Settings"
  leftIcon={<BackIcon />}
  rightIcon={<MenuIcon />}
/>

<List>
  <ListItem 
    title="Account"
    subtitle="Manage your account"
    rightIcon={<ChevronIcon />}
    onPress={() => navigate('Account')}
  />
  <ListItem 
    title="Notifications"
    subtitle="Configure notifications"
    rightIcon={<ChevronIcon />}
    onPress={() => navigate('Notifications')}
  />
</List>

{/* Bottom TabBar */}
<TabBar
  tabs={[
    { id: 'home', label: 'Home', icon: <HomeIcon /> },
    { id: 'search', label: 'Search', icon: <SearchIcon />, badge: 3 },
    { id: 'profile', label: 'Profile', icon: <ProfileIcon /> },
  ]}
  activeTab={activeTab}
  onTabPress={setActiveTab}
  variant="default"
  size="medium"
/>

Feedback Example

import { 
  ToastProvider, 
  useToast, 
  Loading, 
  Badge, 
  ProgressBar 
} from 'vnmeid-ui';

// Toast usage
const { showToast } = useToast();
showToast({
  message: 'Success!',
  type: 'success',
  duration: 3000
});

// Loading
<Loading 
  visible={isLoading}
  text="Loading data..."
  overlay={true}
/>

// Badge
<Badge 
  text="New"
  variant="success"
  size="medium"
  shape="pill"
/>

// Progress
<ProgressBar 
  progress={0.7}
  color="#4CAF50"
  animated={true}
/>

🎨 Theme System

Using Theme

import { theme } from 'vnmeid-ui';

const styles = StyleSheet.create({
  container: {
    backgroundColor: theme.colors.background.primary,
    padding: theme.spacing.lg,
    borderRadius: theme.borderRadius.md,
    ...theme.shadows.md,
  },
  text: {
    ...theme.typography.textStyles.h3,
    color: theme.colors.text.primary,
  },
});

Available Theme Tokens

Colors

// Primary colors
theme.colors.primary[500]     // #2196F3
theme.colors.primary[600]     // #1E88E5

// Semantic colors
theme.colors.success[500]     // #4CAF50
theme.colors.warning[500]     // #FFC107
theme.colors.error[500]       // #F44336

// Text colors
theme.colors.text.primary     // #212121
theme.colors.text.secondary   // #757575
theme.colors.text.disabled    // #BDBDBD

Spacing

theme.spacing.xs    // 4px
theme.spacing.sm    // 8px
theme.spacing.md    // 12px
theme.spacing.lg    // 16px
theme.spacing.xl    // 20px
theme.spacing['2xl'] // 24px

Typography

theme.typography.textStyles.h1        // Heading 1
theme.typography.textStyles.h2        // Heading 2
theme.typography.textStyles.body      // Body text
theme.typography.textStyles.caption   // Caption text
theme.typography.textStyles.button    // Button text

📊 Component Statistics

Total Components: 19

Core: 3 components
Layout: 5 components
Input: 6 components
Feedback: 4 components
Utility: 1 component

Features Coverage

✅ Form Controls: TextField, TextArea, Checkbox, RadioButton, DatePicker
✅ Navigation: Header, List, ListItem, TabBar
✅ Layout: Card, Spacer
✅ Feedback: Loading, Toast, Badge, ProgressBar
✅ Input: Slider, SearchBar
✅ Utility: Tooltip, Switch

Theme Integration

✅ Dynamic Colors: All components support theme colors
✅ Dark/Light Mode: Automatic theme switching
✅ Consistent Spacing: Uses theme spacing system
✅ Typography: Uses theme typography system
✅ Border Radius: Uses theme border radius

Accessibility

✅ Disabled States: All interactive components
✅ Loading States: Button, Loading component
✅ Error States: TextField, TextArea, DatePicker
✅ Focus States: All input components
✅ Touch Targets: Proper hit slop areas

🚀 Enhanced Features

DatePicker Enhancements

Ant Design Style: Clean, modern interface
Decade Navigation: ‹‹ and ›› buttons for 10-year jumps
Month/Year Picker: Clickable titles to switch views
Spinner Time Picker: Scrollable hours/minutes columns
Today Button: Quick date selection
Clean Year Grid: 12 items (10 main + 2 adjacent years)

Button Hover Effects

Web Hover: Scale and color transitions
Variant-Specific: Different hover colors per variant
Smooth Animations: 0.2s ease transitions
Disabled Handling: No hover effects when disabled

🛠️ Development

Available Scripts

# Build the library
npm run build

# Type checking
npm run typecheck

# Linting
npm run lint

# Format code
npm run format

# Clean build artifacts
npm run clean

Project Structure

src/
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.types.ts
│   │   ├── SimpleButton.tsx
│   │   └── index.ts
│   ├── TextField/
│   │   ├── TextField.tsx
│   │   ├── TextField.types.ts
│   │   └── index.ts
│   ├── Switch/
│   │   ├── Switch.tsx
│   │   ├── Switch.types.ts
│   │   └── index.ts
│   └── index.ts
├── theme/
│   ├── colors.ts
│   ├── spacing.ts
│   ├── typography.ts
│   ├── shadows.ts
│   ├── ThemeContext.tsx
│   ├── theme.ts
│   └── utils/
│       └── createStyles.ts
└── index.ts

📱 Example Usage

import React, { useState } from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { Button, TextField, Switch, theme } from 'vnmeid-ui';

const App = () => {
  const [text, setText] = useState('');
  const [switchValue, setSwitchValue] = useState(false);

  return (
    <ScrollView style={styles.container}>
      <TextField
        label="Enter your name"
        placeholder="Type something..."
        value={text}
        onChangeText={setText}
        required
      />
      
      <Button
        title="Primary Button"
        variant="primary"
        onPress={() => console.log('Pressed!')}
        style={styles.button}
      />
      
      <Switch
        value={switchValue}
        onValueChange={setSwitchValue}
        size="medium"
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.secondary,
    padding: theme.spacing.lg,
  },
  button: {
    marginTop: theme.spacing.md,
  },
});

export default App;

📝 Usage Notes

Theme Provider Required

import { ThemeProvider } from 'vnmeid-ui';

<ThemeProvider>
  <App />
</ThemeProvider>

Toast Provider Required

import { ToastProvider } from 'vnmeid-ui';

<ToastProvider>
  <App />
</ToastProvider>

Conditional Rendering Pattern

// ✅ Correct
{condition ? <Component /> : null}

// ❌ Wrong
{condition && <Component />}

DatePicker State Management

// Separate states for different pickers
const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
const [selectedTime, setSelectedTime] = useState<Date | undefined>(undefined);
const [showDatePicker, setShowDatePicker] = useState(false);
const [showTimePicker, setShowTimePicker] = useState(false);

// Separate handlers
const handleDateChange = (date: Date) => {
  setSelectedDate(date);
  // Handle date selection
};

const handleTimeChange = (time: Date) => {
  setSelectedTime(time);
  // Handle time selection
};

🔧 Troubleshooting

Common Issues

Module not found: Ensure package is installed with npm install vnmeid-ui
TypeScript errors: Install @types/lodash as dev dependency
Build issues: Clear Metro cache with npx react-native start --reset-cache
Version conflicts: Check React Native version compatibility (0.64.2)
Package update: Update with npm update vnmeid-ui

📋 Requirements

React Native 0.64.2
React >= 17.0.1
TypeScript 4.2.4+

📄 License

MIT

🤝 Contributing

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Create a Pull Request

🎉 Congratulations!

You now have a comprehensive UI library with 19 components ready for production use!

What's Included:

✅ 19 Production-Ready Components
✅ Ant Design Style DatePicker with decade navigation
✅ Button Hover Effects for web
✅ TabBar Navigation for bottom tabs
✅ Complete Theme System with dark/light mode
✅ TypeScript Support with full type safety
✅ React Native 0.64.2 Compatible
✅ Zero Dependencies (except lodash)
✅ NPM Package - Easy installation

Ready for:

🚀 Production Apps
📱 Mobile Development
🎨 Design System Integration
⚡ Rapid Prototyping
🔧 Custom Theming

Built with ❤️ for React Native 0.64.2