chore: initialize @limitless/ui git repo + add AppShell
This brings the long-untracked @limitless/ui source tree under version
control. Until now /srv/k8s/templates/limitless-ui has been a plain
file: dependency consumed by gscChronos / gscCRM / gscAdmin, with
copies scattered across web/gsc{Portal,WWW,Aether,Register}/ and
apps/gsc{Meet,Share}/. None were git-tracked.
Treating /srv/k8s/templates/limitless-ui as the canonical going
forward; secondary copies should be replaced with this version
in their consumers' Dockerfiles when they next get touched.
Changes in this initial commit beyond the snapshot:
- Add src/layout/AppShell.tsx — runtime-loaded chrome (header,
sidebar, footer) backed by gsc-shell-api. Public surface:
AppShell, ShellProvider, useShell, ShellConfig types
Framework-agnostic (no Next.js dep). Apps pass appKey + apiUrl +
getToken; AppShell composes the existing PageShell / Navbar /
Sidebar / Footer primitives with API data.
- Re-export AppShell from src/index.ts.
- Fix build script: `tsc -p tsconfig.json --noEmit false`. The bare
`tsc` command was a no-op because tsconfig.json sets noEmit:true
for typecheck speed. Existing dist/ only existed because of an
earlier emit; clean rebuilds were silently broken.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
100
src/components/PageHeader.tsx
Normal file
100
src/components/PageHeader.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';
|
||||
|
||||
export type PageHeaderProps = {
|
||||
/** Page title */
|
||||
title: React.ReactNode;
|
||||
/** Subtitle shown after title */
|
||||
subtitle?: React.ReactNode;
|
||||
/** Icon before title */
|
||||
icon?: React.ReactNode;
|
||||
/** Breadcrumb items */
|
||||
breadcrumbs?: BreadcrumbItem[];
|
||||
/** Breadcrumb line actions (right side of breadcrumb line) */
|
||||
breadcrumbActions?: React.ReactNode;
|
||||
/** Header actions (buttons, dropdowns on right side of page title) */
|
||||
actions?: React.ReactNode;
|
||||
/** Additional className */
|
||||
className?: string;
|
||||
/** Show breadcrumb line (default true) */
|
||||
showBreadcrumbLine?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Layout 3 page header component.
|
||||
*
|
||||
* Structure:
|
||||
* - breadcrumb-line (optional): breadcrumbs + header-elements
|
||||
* - page-header-content: page-title + header-elements with actions
|
||||
*/
|
||||
export function PageHeader({
|
||||
title,
|
||||
subtitle,
|
||||
icon,
|
||||
breadcrumbs,
|
||||
breadcrumbActions,
|
||||
actions,
|
||||
className = '',
|
||||
showBreadcrumbLine = true
|
||||
}: PageHeaderProps) {
|
||||
return (
|
||||
<div className={`page-header ${className}`.trim()}>
|
||||
{/* Breadcrumb line */}
|
||||
{showBreadcrumbLine && breadcrumbs && (
|
||||
<div className="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
|
||||
<div className="d-flex">
|
||||
<Breadcrumbs items={breadcrumbs} className="mb-0" />
|
||||
<a href="#" className="header-elements-toggle text-default d-md-none">
|
||||
<i className="icon-more"></i>
|
||||
</a>
|
||||
</div>
|
||||
{breadcrumbActions && (
|
||||
<div className="header-elements d-none">
|
||||
<div className="breadcrumb justify-content-center">
|
||||
{breadcrumbActions}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Page header content */}
|
||||
<div className="page-header-content header-elements-md-inline">
|
||||
<div className="page-title d-flex">
|
||||
<h4>
|
||||
{icon && <span className="me-2">{icon}</span>}
|
||||
<span className="fw-semibold">{title}</span>
|
||||
{subtitle && <span> - {subtitle}</span>}
|
||||
</h4>
|
||||
<a href="#" className="header-elements-toggle text-default d-md-none">
|
||||
<i className="icon-more"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{actions && (
|
||||
<div className="header-elements d-none mb-3 mb-md-0">
|
||||
{actions}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type BreadcrumbElementProps = {
|
||||
icon?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
href?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Breadcrumb action element for page header.
|
||||
*/
|
||||
export function BreadcrumbElement({ icon, children, href = '#' }: BreadcrumbElementProps) {
|
||||
return (
|
||||
<a href={href} className="breadcrumb-elements-item">
|
||||
{icon && <span className="me-2">{icon}</span>}
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user