AceMyJob UI

A modern React component library built for job search and career management applications. Built with TypeScript, Tailwind CSS, and Headless UI.

✨ Features

• 🎨 Modern Design System - Beautiful, accessible components with dark/light theme support
• 🔧 TypeScript First - Full TypeScript support with comprehensive type definitions
• 📱 Responsive - Mobile-first design that works on all screen sizes
• ♿ Accessible - Built with accessibility in mind using Headless UI primitives
• 🎭 Themeable - Customizable color system with CSS variables
• 📦 Tree Shakable - Import only what you need

📦 Installation

npm install acemyjob-ui
# or
yarn add acemyjob-ui
# or
pnpm add acemyjob-ui

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom @headlessui/react @heroicons/react

🚀 Quick Start

1. Import the CSS in your app's entry point:

// In your main.tsx or App.tsx
import 'acemyjob-ui/styles';

2. Wrap your app with ThemeProvider:

import { ThemeProvider } from 'acemyjob-ui';

function App() {
  return (
    <ThemeProvider defaultTheme="system" storageKey="app-theme">
      <YourApp />
    </ThemeProvider>
  );
}

3. Use components:

import { Sidebar, ThemeToggle } from 'acemyjob-ui';
import { HomeIcon, BriefcaseIcon } from '@heroicons/react/24/outline';

const navigation = [
  { name: 'Dashboard', href: '/', icon: HomeIcon, current: true },
  { name: 'Jobs', href: '/jobs', icon: BriefcaseIcon, current: false },
];

const company = {
  name: "Your Company",
  logo: "/logo.svg"
};

const profile = {
  name: "John Doe",
  image: "/avatar.jpg"
};

function Dashboard() {
  return (
    <>
      <ThemeToggle />
      <Sidebar 
        company={company} 
        profile={profile} 
        navigation={navigation} 
      />
    </>
  );
}

📖 Components

ThemeProvider

Provides theme context to your application.

<ThemeProvider defaultTheme="light" storageKey="my-app-theme">
  <App />
</ThemeProvider>

Props:

• defaultTheme - "light" | "dark" | "system" (default: "system")
• storageKey - String for localStorage key (default: "acemyjob-ui-theme")

ThemeToggle

A button to toggle between light, dark, and system themes.

<ThemeToggle />

Sidebar

A responsive navigation sidebar with mobile support.

<Sidebar 
  company={company} 
  profile={profile} 
  navigation={navigation} 
/>

Props:

• company - { name: string; logo: string }
• profile - { name: string; image: string }
• navigation - Array of navigation items

ColorPalette

Displays the complete color system (useful for design systems documentation).

<ColorPalette />

🎨 Styling

CSS Variables

The library uses CSS variables for theming. You can customize colors by overriding these variables:

:root {
  --color-background: oklch(1.0 0.0 0);
  --color-surface: oklch(0.98 0.002 247.83);
  --color-text-primary: oklch(0.15 0.007 265.75);
  /* ... more variables */
}

.dark {
  --color-background: oklch(0.1 0.007 265.75);
  --color-surface: oklch(0.13 0.008 265.75);
  --color-text-primary: oklch(0.95 0.002 247.83);
  /* ... more variables */
}

Tailwind CSS

If you're using Tailwind CSS, extend your config to include the library's color system:

module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/acemyjob-ui/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'var(--color-background)',
        surface: 'var(--color-surface)',
        'text-primary': 'var(--color-text-primary)',
        // ... more semantic colors
      },
    },
  },
  plugins: [],
}

📚 TypeScript

All components come with TypeScript definitions. Import types as needed:

import type { NavigationItem, Company, Profile, Theme } from 'acemyjob-ui';

🛠 Development

To contribute to this library:

# Clone the repository
git clone https://github.com/yourusername/acemyjob-ui.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Run Storybook
npm run storybook

📄 License

MIT © Your Name

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Local Testing with AceMyJob-Web

When developing components, you can quickly test changes in the Web project without waiting for CI/CD:

# 1. Build the UI library
npm run build

# 2. Sync dist to Web project's node_modules
cp -r dist/* ../AceMyJob-Web/node_modules/acemyjob-ui/dist/

# 3. Refresh browser to see changes

Windows (PowerShell):

npm run build; Copy-Item -Path "dist/*" -Destination "../AceMyJob-Web/node_modules/acemyjob-ui/dist/" -Recurse -Force

Windows (Command Prompt):

npm run build && xcopy /E /Y /I "dist\*" "..\AceMyJob-Web\node_modules\acemyjob-ui\dist\"