This repository contains both the Campfire docs/demo app (served via Vite) and a distributable component library that can be consumed from other projects.

The docs/demo site is deployed to GitHub Pages at https://jeremyfuksa.github.io/campfire so you can browse the getting-started flow, design tokens, and components without cloning the repo.

npm install @jeremyfuksa/campfire
# or
yarn add @jeremyfuksa/campfire

Then add the CSS tokens once (usually in your root entry file) and import components as needed:

import '@jeremyfuksa/campfire/styles.css';
import { Button } from '@jeremyfuksa/campfire';

export function Example() {
  return <Button>Campfire</Button>;
}

git clone https://github.com/jeremyfuksa/campfire.git
cd campfire
npm install
npm run dev     # Docs & playground
npm run build   # Production build of the docs site

The reusable components live under src/components and are re‑exported from src/lib/index.ts. Run:

npm run build:lib

This generates ESM, CJS, and type declarations in dist/.

1. npm run release (runs build:lib then npm publish --access public)

Because the components rely on CSS custom properties and Tailwind‑style utility classes generated inside styles/globals.css, importing the stylesheet (as shown in Option 1) is required before using any components.

npm version patch   # or minor/major according to changes
npm run release     # builds dist/ and publishes to npm

Ensure you're logged in (npm login) and have registry permissions.

In the docs app (Design Tokens page) you can click Export JSON to download campfire-palettes.json, which mirrors the palette defined in source and can be imported into other tools.

Campfire colors are available as themes for popular editors and terminals! See the themes/ directory for:

• VS Code - Full color themes (light & dark)
• iTerm2 - macOS terminal themes
• Windows Terminal - Windows terminal color schemes
• Hyper - Cross-platform terminal themes
• Alacritty - GPU-accelerated terminal themes
• Kitty - Fast terminal emulator themes
• Color Exports - JSON, CSS for custom integrations

📖 Installation Guide

Campfire includes a powerful theming system that supports light, dark, and system preference modes.

Wrap your app with the ThemeProvider:

import { ThemeProvider } from '@jeremyfuksa/campfire';

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

useTheme - Access and control the theme:

import { useTheme } from '@jeremyfuksa/campfire';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  );
}

useResolvedTheme - Get the actual theme (resolves "system" to light/dark):

import { useResolvedTheme } from '@jeremyfuksa/campfire';

function MyComponent() {
  const resolvedTheme = useResolvedTheme(); // "light" | "dark"
  return <div>Current theme: {resolvedTheme}</div>;
}

useThemeToggle - Simple toggle between light and dark:

import { useThemeToggle } from '@jeremyfuksa/campfire';

function QuickToggle() {
  const toggle = useThemeToggle();
  return <button onClick={toggle}>🌓</button>;
}

Campfire uses Vitest and React Testing Library for comprehensive testing.

npm test              # Run tests in watch mode
npm run test:ui       # Run tests with Vitest UI
npm run test:coverage # Generate coverage report

All components are tested for:

• Rendering with various props
• User interactions
• Accessibility (via jest-axe)
• Keyboard navigation
• ARIA attributes

Example test:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '@jeremyfuksa/campfire';

it('handles click events', async () => {
  const handleClick = vi.fn();
  render(<Button onClick={handleClick}>Click me</Button>);

  await userEvent.click(screen.getByRole('button'));
  expect(handleClick).toHaveBeenCalled();
});

When adding components, include tests in src/components/ui/__tests__/. See button.test.tsx for reference.