Kratos UI

GMP personal UI component library 💪💪

⚠️ React Compatibility

This library requires React 16.8.0 or higher due to the use of React Hooks. The library uses the following React features:

• React Hooks: useState, useEffect, useRef, useMemo, useContext
• Forward Ref: forwardRef (requires React 16.3+)
• Context API: createContext (requires React 16.3+)

Version Support

• React 16.8.0+: ✅ Fully supported
• React 16.3.0 - 16.7.x: ⚠️ Partial support (Context API works, but no Hooks)
• React < 16.3.0: ❌ Not supported

🎯 Key Features

• Storybook Documentation - Interactive examples and documentation
• Emotion Integration - Pure CSS-in-JS with @emotion/css
• Theme Integration - Style all components once using theme
• makeStyles Hook - Dynamic styling with theme and props
• CSS Specificity Hierarchy - Theme → makeStyles → Inline → !important

📦 Installation

npm install kratos-ui

⚙️ Setup

Step 1: Initialize Emotion (Optional)

Optional but Recommended: For better control over CSS class names, you can initialize emotion with a custom key. The library will auto-initialize with the default key 'kratos' if you don't call this.

import { initEmotion } from 'kratos-ui';

// Initialize emotion with a custom key (optional)
// Use your project name or any unique identifier
initEmotion('my-project-name');

Note: If you don't call initEmotion, the library will automatically initialize with the key 'kratos'. This ensures the library works out-of-the-box without any setup.

Step 2: Wrap Your App with ThemeProvider (Optional but Recommended)

import { ThemeProvider, createTheme } from 'kratos-ui';

const theme = createTheme({
    palette: {
        primary: { main: '#1976d2' },
    },
});

function App() {
    return (
        <ThemeProvider theme={theme}>
            {/* Your app components */}
        </ThemeProvider>
    );
}

🚀 Quick Start

Basic Usage

import React from 'react';
import { Button, ThemeProvider, createTheme, initEmotion } from 'kratos-ui';

// ⚠️ IMPORTANT: Initialize emotion before using any components
// This must be called once at the root of your application
initEmotion('kratos'); // Use 'kratos' or any unique key for your project

// Create a custom theme
const theme = createTheme({
    palette: {
        primary: { main: '#1976d2' },
        secondary: { main: '#dc004e' },
    },
});

function App() {
    return (
        <ThemeProvider theme={theme}>
            <Button variant="contained" color="primary">
                Click me
            </Button>
        </ThemeProvider>
    );
}

⚠️ Emotion Initialization (Optional)

Optional: The library auto-initializes emotion with the default key 'kratos', so you can start using components immediately without any setup.

If you want to use a custom key for CSS class names (to avoid conflicts with other emotion instances), you can call initEmotion(key):

import { initEmotion } from 'kratos-ui';

// Initialize with a custom key (optional)
initEmotion('my-project-name');

Why use a custom key? If your project uses multiple emotion instances, using a custom key ensures CSS class names are properly scoped and don't conflict.

🎨 makeStyle hook

import { Button, makeStyles } from 'kratos-ui';

const useStyles = makeStyles({
    customButton: {
        backgroundColor: 'orange',
        color: 'white',
        borderRadius: '8px',
        padding: '10px 20px',
        fontSize: '14px',
        fontWeight: '600',
    },
});

function App() {
    const classes = useStyles();

    return <Button className={classes.customButton}>Custom Styled Button</Button>;
}

🎯 CSS Specificity Hierarchy

The component follows this CSS specificity order (from lowest to highest priority):

1. Theme styles (lowest priority)
2. makeStyles classes (medium priority)
3. Inline styles (high priority)
4. !important classes (highest priority)

📚 Storybook

View all components and examples in Storybook:

Available stories:

• Controller - Interactive components with controls
• Variants - All components variants (showcase)
• playground - for developing in local

🛠️ Development

1. Fork the repository - git clone
2. checkout a feature branch
3. take pull from develop branch
4. npm install --legacy-peer-deps
5. npm run start
6. Make your changes (check GUIDELINES.md file)
7. Submit a pull request to develop branch