Quickly4u Design System

A modern, developer-centric component library built with React and TypeScript.

🚀 Highlights

• Router-optional components: Use Sidebar and GlobalHeader with React Router, or SidebarBasic and GlobalHeaderBasic without routing dependencies
• BaseProps compatibility: All components extend BaseProps with consistent className, children, style, and id props
• Top-level named exports: Simple imports like import { Button } from 'quickly4u-design-system'
• TypeScript support: Full TypeScript declarations included
• Atomic design structure: Components organized as Atoms, Molecules, and Organisms
• Modern build output: ESM (.mjs) and CJS (.cjs) formats

📦 Installation

npm install quickly4u-design-system
# or
yarn add quickly4u-design-system
# or
pnpm add quickly4u-design-system

🎯 Peer Dependencies

Required:

• react >= 16.8.0
• react-dom >= 16.8.0

Optional (for router-enabled components):

• react-router-dom

🛠️ Setup

Import the global styles in your application's entry point (e.g., main.tsx or App.tsx):

import 'quickly4u-design-system/styles';

📚 Usage

Quick Start (No Router Required)

import { Button } from 'quickly4u-design-system';
import 'quickly4u-design-system/styles';

function App() {
  return <Button variant="primary">Click Me</Button>;
}

With React Router

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Sidebar, GlobalHeader } from 'quickly4u-design-system';
import 'quickly4u-design-system/styles';

function App() {
  return (
    <BrowserRouter>
      <GlobalHeader 
        logoText="My App"
        navItems={[
          { label: 'Home', href: '/' },
          { label: 'About', href: '/about' }
        ]}
      />
      <div style={{ display: 'flex' }}>
        <Sidebar items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Settings', href: '/settings' }
        ]} />
        <Routes>
          {/* Your routes */}
        </Routes>
      </div>
    </BrowserRouter>
  );
}

Without React Router

import { useState } from 'react';
import { SidebarBasic, GlobalHeaderBasic } from 'quickly4u-design-system';
import 'quickly4u-design-system/styles';

function App() {
  const [currentPath, setCurrentPath] = useState('/');
  
  return (
    <div>
      <GlobalHeaderBasic 
        logoText="My App"
        onLogoClick={() => setCurrentPath('/')}
        navItems={[
          { label: 'Home', onClick: () => setCurrentPath('/') },
          { label: 'About', onClick: () => setCurrentPath('/about') }
        ]}
      />
      <div style={{ display: 'flex' }}>
        <SidebarBasic 
          activePath={currentPath}
          items={[
            { label: 'Dashboard', onClick: () => setCurrentPath('/') },
            { label: 'Settings', onClick: () => setCurrentPath('/settings') }
          ]}
        />
        <main>Your content here</main>
      </div>
    </div>
  );
}

🧩 Components

Atoms

Button

import { Button } from 'quickly4u-design-system';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// Full width
<Button fullWidth>Full Width</Button>

Input

import { Input } from 'quickly4u-design-system';

// Basic
<Input placeholder="Enter text" />

// With Label
<Input label="Username" placeholder="Enter username" />

// With Helper Text
<Input label="Email" helperText="We'll never share your email." />

// Error State
<Input label="Password" error="Invalid password" variant="error" />

// Success State
<Input variant="success" defaultValue="Valid input" />

Radio Button

import { Radio } from 'quickly4u-design-system';

// Basic
<Radio name="option" label="Option 1" />
<Radio name="option" label="Option 2" />

// Sizes
<Radio size="lg" label="Large Option" />

Checkbox

import { Checkbox } from 'quickly4u-design-system';

// Basic
<Checkbox label="Accept terms" />

// Sizes
<Checkbox size="lg" label="Large Checkbox" />

Organisms

GlobalHeader (with React Router)

import { GlobalHeader } from 'quickly4u-design-system';

<GlobalHeader 
  logoText="My App"
  logoHref="/"
  navItems={[
    { label: 'Home', href: '/' },
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact' }
  ]}
  actions={<Button size="sm">Login</Button>}
/>

GlobalHeaderBasic (without React Router)

import { GlobalHeaderBasic } from 'quickly4u-design-system';

<GlobalHeaderBasic 
  logoText="My App"
  onLogoClick={() => console.log('Logo clicked')}
  navItems={[
    { label: 'Home', onClick: () => navigate('/') },
    { label: 'About', onClick: () => navigate('/about') }
  ]}
  actions={<Button size="sm">Login</Button>}
/>

Sidebar (with React Router)

import { Sidebar } from 'quickly4u-design-system';

<Sidebar 
  items={[
    { label: 'Dashboard', href: '/', icon: <DashboardIcon /> },
    { label: 'Settings', href: '/settings', icon: <SettingsIcon /> }
  ]}
  width="250px"
  collapsed={false}
/>

SidebarBasic (without React Router)

import { SidebarBasic } from 'quickly4u-design-system';

<SidebarBasic 
  items={[
    { label: 'Dashboard', onClick: () => navigate('/'), icon: <DashboardIcon /> },
    { label: 'Settings', onClick: () => navigate('/settings'), icon: <SettingsIcon /> }
  ]}
  activePath="dashboard"
  width="250px"
  collapsed={false}
/>

🎨 Customization

Override CSS variables in your own CSS to customize the theme:

:root {
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  /* ... other variables */
}

📝 Important Notes

• ✅ CSS Import Required: You must import the styles manually: import 'quickly4u-design-system/styles';
• ✅ Named exports only: Use import { Button } from 'quickly4u-design-system' (no default export)
• ✅ Router is optional: Use SidebarBasic/GlobalHeaderBasic for non-router apps, or Sidebar/GlobalHeader with React Router
• ✅ BaseProps support: All components support className, style, id, and children props

🔧 Development

# Install dependencies
npm install

# Build the library
npm run build

# Run website dev server
npm run dev

📄 License

ISC