cf068ce4ec
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>
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useFloating, offset, shift, flip, arrow, Placement, Middleware } from '@floating-ui/react';
|
|
|
|
export type PopoverProps = {
|
|
title?: React.ReactNode;
|
|
content: React.ReactNode;
|
|
placement?: Placement;
|
|
children: React.ReactElement;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Popover using floating-ui. Controlled by hover/focus.
|
|
*/
|
|
export function Popover({ title, content, placement = 'top', children, className = '' }: PopoverProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const [arrowEl, setArrowEl] = useState<HTMLElement | null>(null);
|
|
|
|
const middleware: Middleware[] = [offset(8), flip(), shift()];
|
|
if (arrowEl) middleware.push(arrow({ element: arrowEl }));
|
|
|
|
const { x, y, refs, strategy, middlewareData, placement: finalPlacement } = useFloating({
|
|
open,
|
|
onOpenChange: setOpen,
|
|
placement,
|
|
middleware
|
|
});
|
|
|
|
const staticSide = {
|
|
top: 'bottom',
|
|
right: 'left',
|
|
bottom: 'top',
|
|
left: 'right'
|
|
}[finalPlacement.split('-')[0]] as string;
|
|
|
|
return (
|
|
<>
|
|
{React.cloneElement(children, {
|
|
ref: refs.setReference,
|
|
onMouseEnter: () => setOpen(true),
|
|
onMouseLeave: () => setOpen(false),
|
|
onFocus: () => setOpen(true),
|
|
onBlur: () => setOpen(false)
|
|
})}
|
|
{open ? (
|
|
<div
|
|
ref={refs.setFloating}
|
|
className={['popover bs-popover-auto show', className].filter(Boolean).join(' ')}
|
|
role="tooltip"
|
|
style={{
|
|
position: strategy,
|
|
top: y ?? 0,
|
|
left: x ?? 0
|
|
}}
|
|
>
|
|
{title ? (
|
|
<div className="popover-header">
|
|
{title}
|
|
<button type="button" className="btn-close float-end" aria-label="Close" onClick={() => setOpen(false)} />
|
|
</div>
|
|
) : null}
|
|
<div className="popover-body">{content}</div>
|
|
<div
|
|
ref={setArrowEl as any}
|
|
className="popover-arrow"
|
|
style={{
|
|
left: middlewareData.arrow?.x,
|
|
top: middlewareData.arrow?.y,
|
|
[staticSide]: '-4px'
|
|
}}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|