component-lib

Reusable React component library built with TypeScript, Tailwind v4, and shadcn/ui.

Development

• npm run dev: starts local playground (index.html + src/main.tsx) for manual component testing.
• npm run build: runs typecheck, emits declaration files, and builds the library bundle.
• npm run lint: runs ESLint across the codebase.
• npm run format:check: checks formatting without rewriting files.

Publishing

Package publishing runs from GitHub Actions and publishes publicly to npm.

Before using the workflow, add a repository secret named NPM_TOKEN in GitHub:

1. Create an npm access token with publish permission for @ah-automation.nl/component-lib.
2. In GitHub, open the repository settings.
3. Go to Secrets and variables > Actions.
4. Add the token as a repository secret named NPM_TOKEN.

To publish a new version:

1. Open the GitHub repository.
2. Go to Actions.
3. Select Publish package.
4. Click Run workflow.
5. Choose patch, minor, or major.
6. Run the workflow.

The workflow validates the library, bumps package.json and package-lock.json, creates a vX.Y.Z git tag, publishes with npm publish --access public, then pushes the release commit and tag back to main.

Library Output

Build output is generated in dist/:

• dist/index.js: ESM library entry. It re-exports one module per source file (dist/components/…, dist/hooks/…, dist/lib/…), so consumer bundlers only include the components an app imports.
• dist/index.d.ts: exported TypeScript types.
• dist/styles.css: compiled styles for consumers.

Runtime dependencies (recharts, cmdk, …) are not bundled into dist/; they stay as imports and are installed alongside the package. package.json marks only CSS as having side effects, so unused modules are tree-shaken.

Consumer Usage

import { Button } from "component-lib";
import "component-lib/styles.css";

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

SidebarNav In Another React Project

import * as React from "react";
import { Home, FolderKanban, Settings, LogOut } from "lucide-react";
import {
  Button,
  SidebarNav,
  type SidebarNavGroup,
  type SidebarNavItem,
} from "component-lib";
import "component-lib/styles.css";

const items: SidebarNavItem[] = [
  { label: "Home", route: "/home", icon: Home, order: 0 },
  { label: "Settings", route: "/settings", icon: Settings, order: 20 },
];

const groups: SidebarNavGroup[] = [
  {
    id: "projects",
    label: "Projects",
    icon: FolderKanban,
    order: 10,
    items: [
      { label: "Overview", route: "/projects", badge: "3" },
      { label: "Active", route: "/projects/active" },
    ],
  },
];

export function AppLayout() {
  const [activeRoute, setActiveRoute] = React.useState("/home");

  return (
    <div className="flex min-h-screen">
      <SidebarNav
        items={items}
        groups={groups}
        activeRoute={activeRoute}
        defaultCollapsed={false}
        onItemClick={(item, event) => {
          // remove this preventDefault if you want normal anchor navigation
          event.preventDefault();
          setActiveRoute(item.route);
        }}
        logo={
          <div className="flex items-center gap-2">
            <div className="size-7 rounded-md bg-primary" />
            <span className="text-sm font-semibold">My Product</span>
          </div>
        }
        footer={
          <Button
            variant="outline"
            className="w-full justify-start group-data-[collapsible=icon]:justify-center"
          >
            <LogOut />
            <span className="group-data-[collapsible=icon]:hidden">Logout</span>
          </Button>
        }
      />

      <main className="min-w-0 flex-1 p-6">
        <h1 className="text-xl font-semibold">Active route: {activeRoute}</h1>
      </main>
    </div>
  );
}

Notes:

• Import "component-lib/styles.css" once at app root.
• defaultCollapsed sets the initial sidebar state.
• onItemClick is optional. Keep href behavior, or intercept and route manually.
• groups supports one-level nested routes using collapsible SidebarGroup sections.
• order supports mixed sorting between flat items and groups (stable fallback preserves input order on ties).

DropdownHeader in another React project

import { Fish } from "lucide-react";
import {
  DropdownHeader,
  type DropdownHeaderGroup,
  type DropdownHeaderItem,
} from "@ah-automation.nl/component-lib";

const items: DropdownHeaderItem[] = [
  { label: "Orders", route: "/orders", order: 2 },
  {
    label: "Refresh",
    order: 3,
    onClick: (event) => {
      event.preventDefault();
      refreshData();
    },
  },
];

const groups: DropdownHeaderGroup[] = [
  {
    id: "purchase",
    label: "Purchase",
    order: 1,
    items: [
      { label: "Inventory", route: "/inventory" },
      { label: "Add item", route: "/inventory/new" },
    ],
  },
];

export function Navigation() {
  return (
    <DropdownHeader
      items={items}
      groups={groups}
      activeRoute="/inventory"
      logo={<Fish className="size-6" />}
      onItemClick={(item, event) => {
        if (item.route == null) {
          return;
        }
        event.preventDefault();
        window.history.pushState(null, "", item.route);
      }}
    />
  );
}

The component renders dropdown groups on large screens and an inline, collapsible navigation menu on smaller screens. Pass translated labels and intercept link clicks when the consuming app uses client-side routing. Items without a route require an onClick handler and render as buttons.