@olympusoss/canvas 2.6.19

package/src/components/organisms/navigation-menu.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface NavigationMenuProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> {
+	/** Controlled active item value. */
+	value?: string;
+	/** Initial value for uncontrolled usage. */
+	defaultValue?: string;
+	/** Fires when the active item changes. */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Delay (ms) before opening on hover.
+	 * @default 200
+	 */
+	delayDuration?: number;
+	/**
+	 * Delay (ms) for skipping subsequent open delays once one menu is open.
+	 * @default 300
+	 */
+	skipDelayDuration?: number;
+	/**
+	 * Reading direction.
+	 * @default "ltr"
+	 */
+	dir?: "ltr" | "rtl";
+	/**
+	 * Layout direction.
+	 * @default "horizontal"
+	 */
+	orientation?: "horizontal" | "vertical";
+	/** List + Indicator + Viewport. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const NavigationMenu = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+	NavigationMenuProps
+>(({ className, children, ...props }, ref) => (
+	<NavigationMenuPrimitive.Root
+		ref={ref}
+		className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+		{...props}
+	>
+		{children}
+		<NavigationMenuViewport />
+	</NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+export interface NavigationMenuListProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> {
+	asChild?: boolean;
+	/** A list of `<NavigationMenuItem>`s. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const NavigationMenuList = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.List>,
+	NavigationMenuListProps
+>(({ className, ...props }, ref) => (
+	<NavigationMenuPrimitive.List
+		ref={ref}
+		className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+		{...props}
+	/>
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+export interface NavigationMenuItemProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item> {
+	/** Required for controlled menus — unique id of this item. */
+	value?: string;
+	/** Trigger + Content (or Link). */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item as React.ForwardRefExoticComponent<
+	NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>
+>;
+
+const navigationMenuTriggerStyle = cva(
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
+);
+
+export interface NavigationMenuTriggerProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> {
+	asChild?: boolean;
+	/** Trigger label. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const NavigationMenuTrigger = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+	NavigationMenuTriggerProps
+>(({ className, children, ...props }, ref) => (
+	<NavigationMenuPrimitive.Trigger
+		ref={ref}
+		className={cn(navigationMenuTriggerStyle(), "group", className)}
+		{...props}
+	>
+		{children}{" "}
+		<ChevronDown
+			className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+			aria-hidden="true"
+		/>
+	</NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+export interface NavigationMenuContentProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> {
+	/**
+	 * Force the content to mount even when not active. Useful for
+	 * preserving form state during transitions.
+	 * @default false
+	 */
+	forceMount?: true;
+	/** Fires when focus enters the content. */
+	onFocusOutside?: (event: Event) => void;
+	/** Fires on pointer event outside the content. */
+	onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void;
+	asChild?: boolean;
+	/** Sub-menu content. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const NavigationMenuContent = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+	NavigationMenuContentProps
+>(({ className, ...props }, ref) => (
+	<NavigationMenuPrimitive.Content
+		ref={ref}
+		className={cn(
+			"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+			className,
+		)}
+		{...props}
+	/>
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+export interface NavigationMenuLinkProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link> {
+	/**
+	 * Mark as the current/active link.
+	 * @default false
+	 */
+	active?: boolean;
+	/** Fires when the link is selected (click, Enter, Space). */
+	onSelect?: (event: Event) => void;
+	asChild?: boolean;
+	/** Anchor target. */
+	href?: string;
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link as React.ForwardRefExoticComponent<
+	NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>
+>;
+
+export interface NavigationMenuViewportProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> {
+	/** Force the viewport to mount even when no content is open. */
+	forceMount?: true;
+	asChild?: boolean;
+	className?: string;
+}
+
+const NavigationMenuViewport = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+	NavigationMenuViewportProps
+>(({ className, ...props }, ref) => (
+	<div className={cn("absolute left-0 top-full flex justify-center")}>
+		<NavigationMenuPrimitive.Viewport
+			className={cn(
+				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	</div>
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+export interface NavigationMenuIndicatorProps
+	extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> {
+	/** Force the indicator to mount even when no content is open. */
+	forceMount?: true;
+	asChild?: boolean;
+	className?: string;
+}
+
+const NavigationMenuIndicator = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+	NavigationMenuIndicatorProps
+>(({ className, ...props }, ref) => (
+	<NavigationMenuPrimitive.Indicator
+		ref={ref}
+		className={cn(
+			"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+			className,
+		)}
+		{...props}
+	>
+		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+	</NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuIndicator,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+	NavigationMenuViewport,
+	navigationMenuTriggerStyle,
+};

package/src/components/organisms/popover.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface PopoverProps extends React.ComponentProps<typeof PopoverPrimitive.Root> {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/**
+	 * Initial open state for uncontrolled usage.
+	 * @default false
+	 */
+	defaultOpen?: boolean;
+	/** Fires whenever the popover opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * When true, blocks focus from leaving the popover.
+	 * @default false
+	 */
+	modal?: boolean;
+	/** Trigger + Content. */
+	children?: React.ReactNode;
+}
+
+const Popover = PopoverPrimitive.Root as React.FC<PopoverProps>;
+
+export interface PopoverTriggerProps
+	extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> {
+	/**
+	 * Render as a Radix Slot — wrap a custom button while keeping the
+	 * popover's trigger behaviour.
+	 * @default false
+	 */
+	asChild?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const PopoverTrigger = PopoverPrimitive.Trigger as React.ForwardRefExoticComponent<
+	PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+export interface PopoverAnchorProps
+	extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor> {
+	/**
+	 * Render as a Radix Slot. Use to anchor the popover to an element other
+	 * than the trigger (e.g. a parent input while the trigger is a button).
+	 * @default false
+	 */
+	asChild?: boolean;
+	children?: React.ReactNode;
+}
+
+const PopoverAnchor = PopoverPrimitive.Anchor as React.ForwardRefExoticComponent<
+	PopoverAnchorProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export interface PopoverContentProps
+	extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+	/**
+	 * Distance in pixels between the anchor and the popover.
+	 * @default 4
+	 */
+	sideOffset?: number;
+	/**
+	 * Distance from the alignment edge.
+	 * @default 0
+	 */
+	alignOffset?: number;
+	/**
+	 * Preferred side of the anchor to render on.
+	 * @default "bottom"
+	 */
+	side?: "top" | "right" | "bottom" | "left";
+	/**
+	 * Alignment along the chosen side.
+	 * @default "center"
+	 */
+	align?: "start" | "center" | "end";
+	/**
+	 * Avoid colliding with the viewport edges by flipping/shifting.
+	 * @default true
+	 */
+	avoidCollisions?: boolean;
+	/**
+	 * Padding kept from collision boundaries.
+	 * @default 0
+	 */
+	collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
+	/**
+	 * Stick to the trigger or partially follow on scroll.
+	 * @default "partial"
+	 */
+	sticky?: "partial" | "always";
+	/** Hide the content when the trigger is detached or covered. */
+	hideWhenDetached?: boolean;
+	/** Fires when focus enters the popover after it opens. */
+	onOpenAutoFocus?: (event: Event) => void;
+	/** Fires when focus leaves the popover after it closes. */
+	onCloseAutoFocus?: (event: Event) => void;
+	/** Fires when the Escape key is pressed inside the popover. */
+	onEscapeKeyDown?: (event: KeyboardEvent) => void;
+	/** Fires on pointer event outside the popover. */
+	onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void;
+	/** Fires on any interaction outside (focus + pointer). */
+	onInteractOutside?: (event: Event) => void;
+	/**
+	 * Force the content to mount even when closed.
+	 * @default false
+	 */
+	forceMount?: true;
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Popover body. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+}
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	PopoverContentProps
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-popover-content-transform-origin)]",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/components/organisms/resizable.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { GripVertical } from "lucide-react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+
+import { cn } from "../../lib/utils";
+
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof Group>) => (
+	<Group
+		className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+		{...props}
+	/>
+);
+
+const ResizablePanel = Panel;
+
+const ResizableHandle = ({
+	withHandle,
+	className,
+	...props
+}: React.ComponentProps<typeof Separator> & {
+	withHandle?: boolean;
+}) => (
+	<Separator
+		className={cn(
+			"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+			className,
+		)}
+		{...props}
+	>
+		{withHandle && (
+			<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+				<GripVertical className="h-2.5 w-2.5" />
+			</div>
+		)}
+	</Separator>
+);
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/src/components/organisms/schema-form.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import Form, { type IChangeEvent, type FormProps as RJSFFormProps } from "@rjsf/core";
+import type {
+	FieldTemplateProps,
+	ObjectFieldTemplateProps,
+	RegistryWidgetsType,
+	RJSFSchema,
+	SubmitButtonProps,
+	TemplatesType,
+	UiSchema,
+	WidgetProps,
+} from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Input } from "../atoms/input";
+import { Label } from "../atoms/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+
+/* ────────────────────────────────────────────────────────────────
+   Default widgets — Canvas-styled inputs for RJSF
+   ──────────────────────────────────────────────────────────────── */
+
+const TextWidget: React.FC<WidgetProps> = ({
+	id,
+	value,
+	onChange,
+	onBlur,
+	onFocus,
+	placeholder,
+	disabled,
+	readonly,
+	required,
+	label,
+	schema,
+}) => {
+	const isEmail = schema.format === "email";
+	const inputType = isEmail ? "email" : "text";
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		/* c8 ignore next -- clearing branch: user-driven and out of scope for widget unit tests */
+		onChange(e.target.value === "" ? undefined : e.target.value);
+	};
+	/* c8 ignore next -- onBlur is optional from rjsf; undefined branch wires to Input without a handler */
+	const handleBlur = onBlur ? () => onBlur(id, value) : undefined;
+	/* c8 ignore next -- onFocus is optional from rjsf; undefined branch wires to Input without a handler */
+	const handleFocus = onFocus ? () => onFocus(id, value) : undefined;
+	return (
+		<div className="space-y-1.5">
+			{label && (
+				<Label htmlFor={id}>
+					{label}
+					{required && <span className="ml-0.5 text-destructive">*</span>}
+				</Label>
+			)}
+			<Input
+				id={id}
+				type={inputType}
+				value={value ?? ""}
+				onChange={handleChange}
+				onBlur={handleBlur}
+				onFocus={handleFocus}
+				placeholder={placeholder}
+				disabled={disabled}
+				readOnly={readonly}
+			/>
+		</div>
+	);
+};
+
+const SelectWidget: React.FC<WidgetProps> = ({
+	id,
+	value,
+	onChange,
+	disabled,
+	readonly,
+	required,
+	options,
+	label,
+	placeholder,
+}) => {
+	/* c8 ignore next -- enumOptions is always populated for enum schemas; ?? [] is a type-narrowing guard */
+	const enumOptions = (options.enumOptions as Array<{ value: unknown; label: string }>) ?? [];
+	const handleValueChange = (v: string) => {
+		/* c8 ignore next -- rjsf Select clears via undefined, so the "" branch of the coalesce is unreachable */
+		onChange(v === "" ? undefined : v);
+	};
+	/* c8 ignore next -- `placeholder` is optional; "Select…" is the default fallback */
+	const placeholderText = placeholder ?? "Select…";
+	return (
+		<div className="space-y-1.5">
+			{label && (
+				<Label htmlFor={id}>
+					{label}
+					{required && <span className="ml-0.5 text-destructive">*</span>}
+				</Label>
+			)}
+			<Select
+				value={value ? String(value) : undefined}
+				onValueChange={handleValueChange}
+				disabled={disabled || readonly}
+			>
+				<SelectTrigger id={id}>
+					<SelectValue placeholder={placeholderText} />
+				</SelectTrigger>
+				<SelectContent>
+					{enumOptions.map((opt) => (
+						<SelectItem key={String(opt.value)} value={String(opt.value)}>
+							{opt.label}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</div>
+	);
+};
+
+/* ────────────────────────────────────────────────────────────────
+   Default templates
+   ──────────────────────────────────────────────────────────────── */
+
+const FieldTemplate: React.FC<FieldTemplateProps> = ({
+	children,
+	description,
+	errors,
+	help,
+	hidden,
+}) => {
+	/* c8 ignore next -- defensive: hidden fields are filtered upstream in rjsf before rendering */
+	if (hidden) return null;
+	return (
+		<div className="space-y-1">
+			{children}
+			{description && <div className="text-xs text-muted-foreground">{description}</div>}
+			{errors && <div className="text-xs text-destructive">{errors}</div>}
+			{help && <div className="text-xs text-muted-foreground">{help}</div>}
+		</div>
+	);
+};
+
+const ObjectFieldTemplate: React.FC<ObjectFieldTemplateProps> = ({
+	title,
+	description,
+	properties,
+}) => (
+	<div className="space-y-4">
+		{title && <h3 className="text-base font-semibold">{title}</h3>}
+		{description && <p className="text-sm text-muted-foreground">{description}</p>}
+		{properties.map((p) => (
+			<div key={p.name}>{p.content}</div>
+		))}
+	</div>
+);
+
+const SubmitButton: React.FC<SubmitButtonProps> = () => null;
+
+/* ────────────────────────────────────────────────────────────────
+   Exported widget/template packs
+   ──────────────────────────────────────────────────────────────── */
+
+export const canvasSchemaFormWidgets: RegistryWidgetsType = {
+	TextWidget,
+	EmailWidget: TextWidget,
+	URLWidget: TextWidget,
+	SelectWidget,
+};
+
+/* c8 ignore start -- null-returning button templates: rjsf calls these for array/clear ops we don't expose in Canvas */
+const nullButton = () => null;
+/* c8 ignore stop */
+
+export const canvasSchemaFormTemplates: Partial<TemplatesType> = {
+	FieldTemplate,
+	ObjectFieldTemplate,
+	ButtonTemplates: {
+		SubmitButton,
+		AddButton: nullButton,
+		MoveDownButton: nullButton,
+		MoveUpButton: nullButton,
+		RemoveButton: nullButton,
+		CopyButton: nullButton,
+		ClearButton: nullButton,
+	},
+};
+
+/* ────────────────────────────────────────────────────────────────
+   SchemaForm — RJSF wrapper with Canvas defaults
+   ──────────────────────────────────────────────────────────────── */
+
+export interface SchemaFormProps<T = unknown>
+	extends Omit<RJSFFormProps<T>, "validator" | "widgets" | "templates"> {
+	schema: RJSFSchema;
+	uiSchema?: UiSchema;
+	/** Override or extend Canvas's default widget set. */
+	widgets?: RegistryWidgetsType;
+	/** Override or extend Canvas's default template set. */
+	templates?: Partial<TemplatesType>;
+	/** Supply a different RJSF validator (defaults to ajv8). */
+	validator?: RJSFFormProps<T>["validator"];
+	className?: string;
+}
+
+export function SchemaForm<T = unknown>({
+	schema,
+	uiSchema,
+	widgets,
+	templates,
+	validator: customValidator,
+	className,
+	children,
+	...rest
+}: SchemaFormProps<T>) {
+	return (
+		<div className={cn("space-y-4", className)}>
+			<Form<T>
+				schema={schema}
+				uiSchema={uiSchema}
+				validator={customValidator ?? validator}
+				widgets={{ ...canvasSchemaFormWidgets, ...widgets }}
+				templates={{ ...canvasSchemaFormTemplates, ...templates }}
+				{...rest}
+			>
+				{children}
+			</Form>
+		</div>
+	);
+}
+
+SchemaForm.displayName = "SchemaForm";
+
+export type { IChangeEvent, RJSFSchema, UiSchema, WidgetProps };