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:
93
src/components/Tabs.tsx
Normal file
93
src/components/Tabs.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
|
||||
export type TabItem = {
|
||||
key: string;
|
||||
title: React.ReactNode;
|
||||
content: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export type TabsProps = {
|
||||
items: TabItem[];
|
||||
defaultActiveKey?: string;
|
||||
activeKey?: string;
|
||||
onChange?: (key: string) => void;
|
||||
variant?: 'tabs' | 'pills';
|
||||
fill?: boolean;
|
||||
justify?: boolean;
|
||||
className?: string;
|
||||
navClassName?: string;
|
||||
contentClassName?: string;
|
||||
};
|
||||
|
||||
export function Tabs({
|
||||
items,
|
||||
defaultActiveKey,
|
||||
activeKey,
|
||||
onChange,
|
||||
variant = 'tabs',
|
||||
fill,
|
||||
justify,
|
||||
className = '',
|
||||
navClassName = '',
|
||||
contentClassName = ''
|
||||
}: TabsProps) {
|
||||
const fallbackKey = items.find(i => !i.disabled)?.key;
|
||||
const [internalKey, setInternalKey] = useState<string | undefined>(defaultActiveKey ?? fallbackKey);
|
||||
const currentKey = activeKey ?? internalKey ?? fallbackKey;
|
||||
|
||||
const navClasses = useMemo(() => {
|
||||
return [
|
||||
'nav',
|
||||
variant === 'tabs' ? 'nav-tabs' : 'nav-pills',
|
||||
fill ? 'nav-fill' : '',
|
||||
justify ? 'nav-justified' : '',
|
||||
navClassName
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
}, [variant, fill, justify, navClassName]);
|
||||
|
||||
const handleSelect = (key: string, disabled?: boolean) => {
|
||||
if (disabled) return;
|
||||
if (!activeKey) {
|
||||
setInternalKey(key);
|
||||
}
|
||||
onChange?.(key);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<ul className={navClasses}>
|
||||
{items.map(item => {
|
||||
const isActive = item.key === currentKey;
|
||||
return (
|
||||
<li className="nav-item" key={item.key}>
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${isActive ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`.trim()}
|
||||
onClick={() => handleSelect(item.key, item.disabled)}
|
||||
>
|
||||
{item.title}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div className={`tab-content ${contentClassName}`.trim()}>
|
||||
{items.map(item => {
|
||||
const isActive = item.key === currentKey;
|
||||
return (
|
||||
<div
|
||||
key={item.key}
|
||||
className={`tab-pane fade ${isActive ? 'show active' : ''}`.trim()}
|
||||
role="tabpanel"
|
||||
>
|
||||
{isActive ? item.content : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user