Komunal Style NextJS

A comprehensive, modern component library built specifically for Next.js applications at Komunal. This library provides a complete set of reusable UI components, containers, and utilities to accelerate development and ensure design consistency across projects.

Features

• 🎨 Modern Design System - Consistent, beautiful components
• 🚀 Next.js Optimized - Built specifically for Next.js applications
• 📱 Responsive - Mobile-first design approach
• 🎯 TypeScript - Full TypeScript support with type definitions
• 🔧 Customizable - Flexible styling with Tailwind CSS
• 📦 Tree Shakable - Import only what you need
• ⚡ Performance - Optimized for production use

Installation

npm install komunal-style-nextjs
# or
yarn add komunal-style-nextjs
# or
pnpm add komunal-style-nextjs

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install next react react-dom tailwindcss @mui/material @mui/icons-material lucide-react zustand

Full Docs

https://www.notion.so/komunalgroup/KGS-NextJS-FE-CMS-Template-2006e13a8b0580c1b5c7e45076294a2c

Quick Start

import { Button, Card, Input, Toast } from 'komunal-style-nextjs';

function MyComponent() {
  return (
    <div className="p-6">
      <Card className="max-w-md mx-auto">
        <Card.Header>
          <h2 className="text-xl font-semibold">Welcome</h2>
        </Card.Header>
        <Card.Content>
          <Input 
            label="Email" 
            placeholder="Enter your email" 
            type="email" 
            required
          />
          <Button variant="primary" className="w-full mt-4">
            Get Started
          </Button>
        </Card.Content>
      </Card>
    </div>
  );
}

Setup

1. Tailwind CSS Configuration

Add the library's styles to your Tailwind CSS configuration:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/komunal-style-nextjs/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Your custom theme extensions
    },
  },
  plugins: [
    require("tailwindcss-animate"),
  ],
}

2. Import Styles

Import the component styles in your main CSS file or _app.tsx:

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Components

Core Components

| Component | Description | Key Features | |-----------|-------------|--------------| | Breadcrumb | Navigation breadcrumb component | Customizable separators, accessible navigation | | Button | Multi-purpose button with various variants | Primary, secondary, outline variants with sizes | | Card | Container with optional header and footer | Flexible layout, shadow variants | | Checkbox | Customizable checkbox component | Controlled/uncontrolled, indeterminate state | | Dropdown | Select dropdown with search capability | Multi-select, search, custom options | | Input | Text input with various states and types | Validation states, icons, labels | | Loading | Loading indicators and spinners | Different sizes and variants | | Modal | Dialog windows with customizable content | Backdrop control, animations, Zustand store | | Textarea | Multi-line text input | Auto-resize, character count | | Toast | Toast notifications system | Multiple types, positioning, Zustand store |

Container Components

| Component | Description | Key Features | |-----------|-------------|--------------| | Sidebar | Navigation sidebar with collapsible sections | Responsive, collapsible, nested navigation | | Table | Data table with sorting and filtering | Sortable columns, pagination, responsive | | TableCustom | Advanced table with custom features | Enhanced functionality for complex data | | TopBar | Application header bar component | Navigation, user menu, responsive layout |

Contexts & Hooks

• LoadingContext - Global loading state management
• SidebarContext - Sidebar state and controls
• useIsMobile - Responsive breakpoint detection hook
• useModalStore - Modal state management with Zustand
• useToastStore - Toast notification management with Zustand

Utilities

• axiosInstance - Pre-configured Axios instance
• dateFormatter - Date formatting utilities
• stringFormatter - String manipulation helpers
• local-storage - Local storage management
• variable - Common variables and constants

Advanced Usage

State Management with Stores

The library includes Zustand stores for managing modal and toast states:

import { useModalStore, useToastStore } from 'komunal-style-nextjs';

function MyComponent() {
  const { openModal, closeModal } = useModalStore();
  const { addToast } = useToastStore();

  const handleAction = () => {
    addToast({
      type: 'success',
      message: 'Action completed successfully!'
    });
  };

  const showModal = () => {
    openModal({
      title: 'Confirm Action',
      content: 'Are you sure you want to proceed?',
      onConfirm: handleAction
    });
  };

  return (
    <Button onClick={showModal}>
      Show Modal
    </Button>
  );
}

Context Providers

Wrap your application with the provided contexts:

import { LoadingContext, SidebarContext } from 'komunal-style-nextjs';

function App({ children }) {
  return (
    <LoadingContext>
      <SidebarContext>
        {children}
      </SidebarContext>
    </LoadingContext>
  );
}

Responsive Design

Use the responsive hook for mobile-first development:

import { useIsMobile } from 'komunal-style-nextjs';

function ResponsiveComponent() {
  const isMobile = useIsMobile();

  return (
    <div className={isMobile ? 'mobile-layout' : 'desktop-layout'}>
      {/* Your responsive content */}
    </div>
  );
}

API Reference

For detailed API documentation and component props, please refer to our comprehensive documentation.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Requirements

• Node.js >= 18.0.0
• React >= 19.0.0
• Next.js >= 15.3.4

Development

# Clone the repository
git clone https://github.com/komunal/komunal-style-nextjs

# Install dependencies
npm install

# Build the library
npm run build

# Run linting
npm run lint

# Fix linting issues
npm run lint -- --fix

Contributing

We welcome contributions! Please read our contributing guidelines before submitting pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Changelog

See CHANGELOG.md for a detailed history of changes.

License

This project is licensed under the ISC License.

Support

For support and questions, please contact the Group Service Team or create an issue in the repository.

Built with ❤️ by the Komunal Group Service Team