@hamak/ui-shell-templates

Ready-to-use React layout templates and hooks for the UI Shell framework.

Overview

Provides professional layout templates and React hooks to eliminate boilerplate and speed up development.

Installation

npm install @hamak/ui-shell-templates
# or
bun add @hamak/ui-shell-templates

Quick Start

import { DashboardLayout, ShellProvider, useTheme, useFeatures } from '@hamak/ui-shell-templates';
import { createShell } from '@hamak/ui-shell-impl';

function App() {
  const shell = createShell({ theme: { mode: 'dark' } });

  return (
    <ShellProvider shell={shell}>
      <DashboardLayout
        header={{
          title: "My Application",
          subtitle: "Dashboard",
          actions: <ThemeSwitcher />
        }}
        sidebar={{
          content: <Navigation />,
          width: 280
        }}
        footer={{
          content: <Footer />
        }}
        responsive={{
          mobile: { sidebarCollapsed: true },
          tablet: { sidebarWidth: 240 }
        }}
      >
        <MainContent />
      </DashboardLayout>
    </ShellProvider>
  );
}

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

  return (
    <button onClick={toggleTheme}>
      Theme: {theme}
    </button>
  );
}

function FeatureFlags() {
  const { features, toggle, isEnabled } = useFeatures();

  return (
    <div>
      {Object.entries(features).map(([key, value]) => (
        <div key={key}>
          <input
            type="checkbox"
            checked={isEnabled(key)}
            onChange={() => toggle(key)}
          />
          {key}: {String(value)}
        </div>
      ))}
    </div>
  );
}

Available Layouts

DashboardLayout

Professional dashboard with header, sidebar, main content, and footer.

Features:

• Responsive by default
• Auto-collapsing sidebar on mobile
• Configurable widths and heights
• Smooth transitions

Available Hooks

useShell()

Access the shell instance.

const shell = useShell();
const context = shell.getContext();

useTheme()

Manage theme state.

const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme();

useFeatures()

Manage feature flags.

const { features, toggle, enable, disable, isEnabled } = useFeatures();

useViewport()

Get viewport information.

const { width, height, isMobile, isTablet, isDesktop } = useViewport();

Components

ShellProvider

Provides shell context to child components.

<ShellProvider shell={shell}>
  <App />
</ShellProvider>

Benefits

• 58% less boilerplate compared to manual layout construction
• Responsive by default - mobile, tablet, desktop
• Type-safe - Full TypeScript support
• Customizable - Override any aspect
• Zero configuration - Sensible defaults

License

MIT