krl-alfred UI Library for React Native

A comprehensive React Native UI component library for the Alfred project by Kiralarsın. This library provides a complete set of modern, accessible, and customizable components built with TypeScript and styled-components.

🚀 Features

• 50+ Components: Comprehensive set of UI components for React Native applications
• TypeScript Support: Full TypeScript support with type definitions
• Theme System: Built-in theme system with colors, typography, and spacing
• Storybook Integration: Interactive component documentation and testing
• Accessibility: Components built with accessibility best practices
• Customizable: Highly customizable components with consistent API
• Modern Design: Clean, modern design following current UI/UX trends
• Performance Optimized: Optimized for React Native performance

📦 Installation

npm install krl-alfred-react-native
# or
yarn add krl-alfred-react-native

🔧 Peer Dependencies

Make sure you have these peer dependencies installed in your project:

npm install react react-native styled-components
# or
yarn add react react-native styled-components

🎨 Theme System

The library includes a comprehensive theme system with:

Colors

• Primary Colors: Purple-based primary color palette with various shades and opacities
• Dark Colors: Dark theme colors with multiple opacity levels
• Grey Scale: Complete grey color palette (grey10 to grey50)
• Status Colors: Green, red, yellow for success, error, and warning states
• Special Colors: Sustainability colors, linear gradients, and shadow colors

Typography

• Inter Font Family: Complete Inter font family integration (100-900 weights)
• Display Styles: Large display text (96px, 72px, 64px, 56px)
• Headline Styles: Medium-sized headlines (48px, 40px, 32px, 24px, 20px, 18px)
• Title Styles: 16px titles with various weights
• Body Styles: 14px and 13px body text
• Caption Styles: Small text (12px, 11px, 10px)

Spacing & Layout

• Spacing Scale: xs(4), sm(8), md(16), lg(24), xl(32), xxl(48)
• Breakpoints: Responsive breakpoints for different screen sizes

🧩 Available Components

Form Components

• Button - Customizable button with multiple variants
• Input - Text input with various types (text, email, password, date, etc.)
• Textarea - Multi-line text input
• Checkbox - Checkbox input component
• RadioButton - Radio button with multiple layouts
• RadioScale - Rating scale component
• SelectBox - Dropdown selection component
• Dropdown - Custom dropdown component
• DropdownButton - Button with dropdown functionality
• SearchBox - Search input with results dropdown
• SuggestBox - Autocomplete suggestion box
• OtpInput - One-time password input component
• Stepper - Step-by-step form component

Display Components

• Alert - Alert/notification component
• Badges - Badge component for labels and status
• Icon - Icon component with 240+ available icons
• TextLink - Clickable text link component
• InfoBox - Information display box
• Divider - Divider/separator component
• Breadcrumbs - Navigation breadcrumb component
• Tabs - Tab navigation component
• Accordion - Collapsible content component
• ListGroup - Grouped list component

Feedback Components

• Loader - Loading indicator component
• SkeletonLoader - Skeleton loading component
• InlineProgress - Progress bar component
• CircleProgress - Circular progress indicator
• Toast - Toast notification system
• Tooltip - Tooltip/popover component

Card Components

• CampaignCard - Campaign display card
• BannerCard - Banner display card
• ProductCardVertical - Vertical product card
• ProductCardHorizontal - Horizontal product card
• ProductCardHorizontalSm - Small horizontal product card
• ProductCardCheckbox - Product card with checkbox
• ReviewCard - Review display card
• VideoCard - Video display card
• AddressCard - Address display card
• InsuranceBox - Insurance information box
• PaymentCart - Payment cart component
• ShoppingCartProduct - Shopping cart product item

Navigation & Layout

• Modal - Modal/overlay component
• OptionMenu - Context menu component
• ActionButton - Action button with timer functionality
• CouponCode - Coupon code display component
• Agreement - Terms and agreement component
• ReviewBlock - Review block component

🎯 Usage Examples

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { 
  Button, 
  Alert, 
  Icon, 
  Checkbox,
  theme 
} from 'krl-alfred-react-native';

const MyComponent = () => {
  return (
    <View>
      <Button 
        title="Click me" 
        onPress={() => console.log('Button pressed')} 
        variant="primary"
      />
      <Alert 
        type="success" 
        message="Operation completed successfully!" 
      />
      <Icon 
        name="home" 
        size={24} 
        color={theme.colors.primary} 
      />
      <Checkbox 
        checked={true} 
        onChange={(checked) => console.log('Checkbox:', checked)} 
      />
    </View>
  );
};

Using the Theme

import React from 'react';
import { View, Text } from 'react-native';
import { theme } from 'krl-alfred-react-native';

const ThemedComponent = () => {
  return (
    <View style={{ 
      backgroundColor: theme.colors.primaryOpacity10,
      padding: theme.spacing.md 
    }}>
      <Text style={theme.typography.headlineBold24}>
        Themed Text
      </Text>
    </View>
  );
};

Toast Notifications

import { toast } from 'krl-alfred-react-native';

// Show success toast
toast.success('Operation completed successfully!');

// Show error toast
toast.error('Something went wrong!');

// Show info toast
toast.info('Here is some information');

🛠 Development

Running Storybook

To run Storybook for development and component testing:

# For iOS
yarn storybook:ios

# For Android
yarn storybook:android

# General Storybook
yarn storybook

Building the Library

To build the library for production:

yarn build

Development Scripts

# Start development server
yarn start

# Run on iOS
yarn ios

# Run on Android
yarn android

# Run on web
yarn web

# Build with watch mode
yarn build:watch

📚 Component Documentation

Each component includes:

• Props Interface: Complete TypeScript interface
• Styled Components: Separate styling files
• Storybook Stories: Interactive examples
• Default Props: Sensible defaults for all props

🎨 Icon Library

The library includes 240+ custom icons covering:

• Social Media: Facebook, Instagram, Twitter, LinkedIn, YouTube, TikTok
• UI Elements: Buttons, forms, navigation, actions
• E-commerce: Shopping, payments, products, reviews
• Communication: Messages, calls, notifications
• System: Settings, security, user management
• Brand Specific: Custom icons for the Alfred platform

🔧 Customization

Theme Customization

import { theme } from 'krl-alfred-react-native';

// Access theme values
const customStyle = {
  backgroundColor: theme.colors.primary,
  fontSize: theme.typography.bodyRegular14.fontSize,
  padding: theme.spacing.md,
};

Component Customization

All components accept custom styles and can be themed using the built-in theme system.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests and stories
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🏢 About

This library is developed by Kiralarsın for the Alfred project. It provides a comprehensive set of UI components designed specifically for React Native applications with a focus on performance, accessibility, and developer experience.

📞 Support

For support and questions:

• Contact the development team at Kiralarsın

Made with ❤️ by Kiralarsın