Duraclim UI Kit

A modern, customizable React component library built with TypeScript and SCSS modules.

🚀 Installation

npm install duraclim-ui-kit

Local Development

git clone https://github.com/younes-dro/duraclim-ui-kit.git
cd duraclim-ui-kit
npm install
npm run dev

📦 Components

🔘 Buttons

Various button styles for different actions:

• primary : Main call-to-action buttons
• success : Confirmation actions
• cancel : Destructive actions
• ghost : Secondary actions
• dropdown : Button with dropdown menu
• dropdownGhost : Secondary button with dropdown
• deactivate : Disabled state buttons

<Button
  variant="primary"
  icon="✨"
  text="New"
  dropdownOptions={[
    { label: 'Option 1', onClick: () => {} },
    { label: 'Option 2', onClick: () => {} }
  ]} // Optional
/>

👤 Avatar

User avatar component with multiple sizes:

<Avatar size="sm|md|lg" />

🎴 Cards

Two types of cards available:

Standard Card

<Card
  mode="add|select"
  title="Card Title"
  image="/path/to/image"
  price={200}
  isAdded={false}
  itemsCount={0}
  onSelect={() => {}}
  onEdit={() => {}}
/>

Service Card

<CardService
  image="/path/to/image"
  label="medium|high|low"
  title="Service Title"
  price={299.99}
  quantity={1}
  traps={0}
  onQuantityChange={() => {}}
  onTrapsChange={() => {}}
  onDelete={() => {}}
/>

📝 Inputs

Various input types with validation:

<Input
  type="text|email|tel|search|url|date"
  placeholder="Enter value"
  icon="🔍"
  value={value}
  onChange={(value, isValid) => {}}
  options={[]} // For select type
/>

📐 Layout Components

📦 Container

Content wrapper with predefined widths:

<Container 
  maxWidth="narrow|default|wide" 
  padding={true|false}
>
  {children}
</Container>

🔝 Navbar

Top navigation bar:

<Navbar
  logo={<img src="/logo.png" alt="Logo" />}
  right={<div>Right content</div>}
/>

📑 Sidebar

Customizable sidebar:

<Sidebar
  position="right|left"
  maxWidth="280px"
>
  {children}
</Sidebar>

📄 PageLayout

Main layout component:

<PageLayout
  navbar={<Navbar />}
  sidebar={<Sidebar />}
>
  {mainContent}
</PageLayout>

🎨 Styling

• SCSS Modules for component-specific styling
• Modern design principles
• CSS variables for customization
• Responsive design support

🛠️ Component Properties

Button Props

interface ButtonProps {
  variant: 'primary' | 'success' | 'cancel' | 'ghost' | 'dropdown' | 'dropdownGhost' | 'deactivate';
  icon?: string;
  text: string;
  dropdownOptions?: Array<{ label: string; onClick: () => void }>;
}

Avatar Props

interface AvatarProps {
  size: 'sm' | 'md' | 'lg';
}

Card Props

interface CardProps {
  mode: 'add' | 'select';
  title: string;
  image: string;
  price?: number;
  isAdded?: boolean;
  itemsCount?: number;
  onSelect: () => void;
  onEdit?: () => void;
}

Input Props

interface InputProps {
  type: 'text' | 'email' | 'tel' | 'search' | 'url' | 'date';
  placeholder: string;
  icon?: string;
  value: string;
  onChange: (value: string, isValid: boolean) => void;
  options?: string[]; 
}

📱 Responsive Design

The UI Kit is built with a mobile-first approach and supports various screen sizes:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🔧 Development

Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run test     # Run tests
npm run lint     # Run linting

📄 License

MIT © Duraclim