7eb18b15b8
50 .tsx components and 6 .ts hook files use React client APIs
(createContext, useState, useEffect, useRef, useMemo, useCallback,
forwardRef, etc.) but lacked the "use client" directive at the top
of the source file. tsc-emitted dist files therefore also lacked it.
Older Next.js / Turbopack versions traversed the import graph and
implicitly treated the imports as client when their consumer was a
client component. Next.js 16's stricter Turbopack rejects this: any
file that touches client-only React APIs must declare "use client"
explicitly, regardless of where it is imported from.
Symptom in consumers (gscSupport build, 2026-05-17):
./templates/limitless-ui/dist/theme/ThemeProvider.js:2:10
You're importing a module that depends on `createContext` into a
React Server Component module. This API is only available in
Client Components. To fix, mark the file (or its parent) with
the `"use client"` directive.
Adding the directive at source-file level cascades through tsc into
the emitted dist/ — verified gscSupport + gscCRM build cleanly after
this change.
Affected files (50 total):
src/theme/ThemeProvider.tsx
src/hooks/useDisclosure.ts
src/components/{Accordion,Carousel,DualListBox,Form,Wizard,…}.tsx
src/validation/hooks/{useValidation,useFieldValidation,…}.ts
src/genui/hooks/{useGenUI,useWebMCP}.ts
... and more — every component that touches createContext / a
React hook now self-declares as client.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
export type ModalProps = {
|
|
open: boolean;
|
|
onClose?: () => void;
|
|
title?: React.ReactNode;
|
|
size?: 'sm' | 'lg' | 'xl';
|
|
centered?: boolean;
|
|
scrollable?: boolean;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
};
|
|
|
|
/**
|
|
* Bootstrap-style modal rendered in a portal with backdrop.
|
|
*/
|
|
export function Modal({ open, onClose, title, size, centered, scrollable, children, footer }: ModalProps) {
|
|
const modalBody = (
|
|
<div className={`modal fade ${open ? 'show' : ''}`} style={{ display: open ? 'block' : 'none' }} role="dialog" aria-modal="true">
|
|
<div
|
|
className={[
|
|
'modal-dialog',
|
|
size ? `modal-${size}` : '',
|
|
centered ? 'modal-dialog-centered' : '',
|
|
scrollable ? 'modal-dialog-scrollable' : ''
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
<div className="modal-content">
|
|
{title ? (
|
|
<div className="modal-header">
|
|
<h5 className="modal-title">{title}</h5>
|
|
{onClose ? (
|
|
<button type="button" className="btn-close" aria-label="Close" onClick={onClose}></button>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
<div className="modal-body">{children}</div>
|
|
{footer ? <div className="modal-footer">{footer}</div> : null}
|
|
</div>
|
|
</div>
|
|
<div className={`modal-backdrop fade ${open ? 'show' : ''}`} />
|
|
</div>
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (typeof document === 'undefined') return;
|
|
if (!open) return;
|
|
const body = document.body;
|
|
const previousOverflow = body.style.overflow;
|
|
body.style.overflow = 'hidden';
|
|
body.classList.add('modal-open');
|
|
return () => {
|
|
body.style.overflow = previousOverflow;
|
|
body.classList.remove('modal-open');
|
|
};
|
|
}, [open]);
|
|
|
|
if (typeof document === 'undefined') {
|
|
return null;
|
|
}
|
|
|
|
return createPortal(modalBody, document.body);
|
|
}
|