@tpzdsp/next-toolkit 2.5.1 → 3.0.0

package/src/components/index.ts

@@ -1,68 +1,349 @@
-// Default components - these can be used in server or client-side rendering
-export { BackToTop } from './backToTop/BackToTop';
+// MARK: Layout
+export { SkipLink } from './SkipLink/SkipLink';
+export type { SkipLinkProps } from './SkipLink/SkipLink';
+
+// MARK: Loading
+export { Skeleton } from './Skeleton/Skeleton';
+export type { SkeletonProps } from './Skeleton/Skeleton';
+export { Spinner } from './Spinner/Spinner';
+export type { SpinnerProps } from './Spinner/Spinner';
+export { LoadingBox } from './LoadingBox/LoadingBox';
+export type { LoadingBoxProps } from './LoadingBox/LoadingBox';
+
+// MARK: Typography
+export { Heading } from './Heading/Heading';
+export type { HeadingProps } from './Heading/Heading';
+export { HeadingSkeleton } from './Heading/HeadingSkeleton';
+export type { HeadingSkeletonProps } from './Heading/HeadingSkeleton';
+export { Paragraph } from './Paragraph/Paragraph';
+export type { ParagraphProps } from './Paragraph/Paragraph';
+export { ParagraphSkeleton } from './Paragraph/ParagraphSkeleton';
+export type { ParagraphSkeletonProps } from './Paragraph/ParagraphSkeleton';
+export { InsetText } from './InsetText/InsetText';
+export type { InsetTextProps } from './InsetText/InsetText';
+export { HintText } from './HintText/HintText';
+export type { HintTextProps } from './HintText/HintText';
+export { ErrorText } from './ErrorText/ErrorText';
+export type { ErrorTextProps } from './ErrorText/ErrorText';
+export { WarningText } from './WarningText/WarningText';
+export type { WarningTextProps } from './WarningText/WarningText';
+export { HeadingGroup } from './Layout/HeadingGroup/HeadingGroup';
+export type { HeadingGroupProps } from './Layout/HeadingGroup/HeadingGroup';
+export { ParagraphGroup } from './Layout/ParagraphGroup/ParagraphGroup';
+export type { ParagraphGroupProps } from './Layout/ParagraphGroup/ParagraphGroup';
+
+// MARK: Navigation
+export { Link, LINK_VARIANTS } from './Link/Link';
+export type { LinkProps, LinkAppearance, LinkVariant } from './Link/Link';
+export { ExternalLink } from './ExternalLink/ExternalLink';
+export type { ExternalLinkProps } from './ExternalLink/ExternalLink';
+export { BackToTop } from './BackToTop/BackToTop';
+export type { BackToTopProps } from './BackToTop/BackToTop';
+export { BackLink } from './BackLink/BackLink';
+export type { BackLinkProps } from './BackLink/BackLink';
+export { Breadcrumb } from './Breadcrumb/Breadcrumb';
+export type {
+  BreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbAppearance,
+} from './Breadcrumb/Breadcrumb';
+
+// MARK: Buttons
 export { Button } from './Button/Button';
+export type { ButtonProps, ButtonAppearance, ButtonVariant, ButtonSize } from './Button/Button';
+export { ButtonSkeleton } from './Button/ButtonSkeleton';
+export type { ButtonSkeletonProps } from './Button/ButtonSkeleton';
 export { ButtonLink } from './ButtonLink/ButtonLink';
-export { Card } from './Card/Card';
-export { Chip } from './chip/Chip';
-export { CookieBanner } from './cookieBanner/CookieBanner';
-export { Container } from './container/Container';
-export { ErrorText } from './ErrorText/ErrorText';
-export { GlobalVars } from './googleAnalytics/GlobalVars';
-export { GoogleAnalytics } from './googleAnalytics/GoogleAnalytics';
-export { Heading } from './Heading/Heading';
-export { Hint } from './Hint/Hint';
-export { NotificationBanner } from './NotificationBanner/NotificationBanner';
-export { DefraLogo } from './images/DefraLogo';
-export { EaLogo } from './images/EaLogo';
-export { OglLogo } from './images/OglLogo';
-export { ExternalLink } from './link/ExternalLink';
-export { Link } from './link/Link';
+export type {
+  ButtonLinkProps,
+  ButtonLinkAppearance,
+  ButtonLinkVariant,
+  ButtonLinkSize,
+} from './ButtonLink/ButtonLink';
 export { LinkButton } from './LinkButton/LinkButton';
-export { Paragraph } from './Paragraph/Paragraph';
-export { RuleDivider } from './divider/RuleDivider';
-export { SkipLink } from './skipLink/SkipLink';
-export { Input } from './form/Input';
-export { TextArea } from './form/TextArea';
-
-// Export default component types
-export type { BackToTopProps } from './backToTop/BackToTop';
-export type { ButtonProps } from './Button/Button';
-export type { ButtonLinkProps } from './ButtonLink/ButtonLink';
+export type {
+  LinkButtonProps,
+  LinkButtonAppearance,
+  LinkButtonVariant,
+  LinkButtonSize,
+} from './LinkButton/LinkButton';
+export { StartButton, StartButtonContent } from './StartButton/StartButton';
+export type { StartButtonProps, StartButtonContentProps } from './StartButton/StartButton';
+export { SubmitButton } from './SubmitButton/SubmitButton';
+export type { SubmitButtonProps } from './SubmitButton/SubmitButton';
+export { CopyButton } from './CopyButton/CopyButton';
+export type { CopyButtonProps } from './CopyButton/CopyButton';
+export {
+  ButtonGroup,
+  ButtonGroupText,
+  ButtonGroupSeparator,
+} from './Layout/ButtonGroup/ButtonGroup';
+export type {
+  ButtonGroupProps,
+  ButtonGroupTextProps,
+  ButtonGroupSeparatorProps,
+  ButtonGroupOrientation,
+} from './Layout/ButtonGroup/ButtonGroup';
+
+// MARK: Form inputs
+export { Input } from './Input/Input';
+export type { InputProps, InputSize, InputAppearance, InputType } from './Input/Input';
+export { Textarea } from './Textarea/Textarea';
+export type { TextareaProps, TextareaAppearance } from './Textarea/Textarea';
+export {
+  TextareaCount,
+  TextareaCountMessage,
+  TextareaCountContext,
+} from './TextareaCount/TextareaCount';
+export type {
+  TextareaCountProps,
+  TextareaCountMessageProps,
+  TextareaCountContextValue,
+} from './TextareaCount/TextareaCount';
+export { PasswordInput } from './PasswordInput/PasswordInput';
+export type { PasswordInputProps } from './PasswordInput/PasswordInput';
+export { FileUpload } from './FileUpload/FileUpload';
+export type { FileUploadProps } from './FileUpload/FileUpload';
+export { DateInput } from './DateInput/DateInput';
+export type { DateInputProps, DateValue, DateInputInvalid } from './DateInput/DateInput';
+export { SearchBox } from './SearchBox/SearchBox';
+export type { SearchBoxProps } from './SearchBox/SearchBox';
+export { Select } from './Select/Select';
+export type { SelectProps } from './Select/Select';
+export { AsyncSelect } from './Select/AsyncSelect';
+export type { AsyncSelectProps } from './Select/AsyncSelect';
+export { SelectSkeleton } from './Select/SelectSkeleton';
+export type { SelectSkeletonProps } from './Select/SelectSkeleton';
+export { LegendSelect } from './LegendSelect/LegendSelect';
+export type { LegendSelectProps, LegendOption } from './LegendSelect/LegendSelect';
+export { FormGroup } from './Form/FormGroup';
+export type { FormGroupProps } from './Form/FormGroup';
+
+// MARK: Form structure
+export { Label } from './Label/Label';
+export type { LabelProps } from './Label/Label';
+export { FieldSet, FieldLegend, FieldItem, FieldDivider } from './Fieldset/Fieldset';
+export type {
+  FieldSetProps,
+  FieldLegendProps,
+  FieldItemProps,
+  FieldDividerProps,
+} from './Fieldset/Fieldset';
+export {
+  InputGroup,
+  InputToolbar,
+  InputPrefix,
+  InputSuffix,
+  InputSwatch,
+} from './InputGroup/InputGroup';
+export type {
+  InputGroupProps,
+  InputToolbarProps,
+  InputPrefixProps,
+  InputSuffixProps,
+  InputSwatchProps,
+  InputGroupDirection,
+} from './InputGroup/InputGroup';
+
+// MARK: Selection controls
+export { Checkbox } from './Checkbox/Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox/Checkbox';
+export { Radio, RadioGroup } from './Radio/Radio';
+export type { RadioProps, RadioGroupProps, RadioSize } from './Radio/Radio';
+
+// MARK: Feedback
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  AlertBody,
+  AlertList,
+  AlertListItem,
+  AlertAction,
+} from './Alert/Alert';
+export type {
+  AlertProps,
+  AlertTitleProps,
+  AlertDescriptionProps,
+  AlertBodyProps,
+  AlertListProps,
+  AlertListItemProps,
+  AlertActionProps,
+  AlertAppearance,
+  AlertVariant,
+} from './Alert/Alert';
+export { PhaseBanner } from './PhaseBanner/PhaseBanner';
+export type { PhaseBannerProps } from './PhaseBanner/PhaseBanner';
+
+// MARK: Content
+export { Tag } from './Tag/Tag';
+export type { TagProps, TagAppearance, TagSize } from './Tag/Tag';
+export { Chip } from './Chip/Chip';
+export type { ChipProps, ChipSize, ChipAppearances } from './Chip/Chip';
+export { Card } from './Card/Card';
 export type { CardProps } from './Card/Card';
-export type { ChipProps } from './chip/Chip';
-export type { ContainerProps } from './container/Container';
-export type { ErrorTextProps } from './ErrorText/ErrorText';
-export type { HeadingProps } from './Heading/Heading';
-export type { HintProps } from './Hint/Hint';
-export type { NotificationBannerProps } from './NotificationBanner/NotificationBanner';
-export type { ExternalLinkProps } from './link/ExternalLink';
-export type { LinkProps } from './link/Link';
-export type { LinkButtonProps } from './LinkButton/LinkButton';
-export type { ParagraphProps } from './Paragraph/Paragraph';
-export type { SlidingPanelProps } from './SlidingPanel/SlidingPanel';
-export type { SkipLinkProps } from './skipLink/SkipLink';
-export type { InputProps } from './form/Input';
-export type { TextAreaProps } from './form/TextArea';
-
-// Client components - these require 'use client' directive
-export { DropdownMenu } from './dropdown/DropdownMenu';
-export { useDropdownMenu } from './dropdown/useDropdownMenu';
-export { SlidingPanel } from './SlidingPanel/SlidingPanel';
-export { Accordion } from './accordion/Accordion';
-export { Modal } from './Modal/Modal';
+export { CardGroup } from './CardGroup/CardGroup';
+export type { CardGroupProps } from './CardGroup/CardGroup';
+export { Details, DetailsTrigger, DetailsContent } from './Details/Details';
+export type { DetailsProps, DetailsTriggerProps, DetailsContentProps } from './Details/Details';
+export {
+  SummaryList,
+  SummaryListRow,
+  SummaryListKey,
+  SummaryListValue,
+  SummaryListActions,
+} from './SummaryList/SummaryList';
+export type {
+  SummaryListProps,
+  SummaryListRowProps,
+  SummaryListKeyProps,
+  SummaryListValueProps,
+  SummaryListActionsProps,
+} from './SummaryList/SummaryList';
+export { SummaryListSkeleton } from './SummaryList/SummaryListSkeleton';
+export type { SummaryListSkeletonProps } from './SummaryList/SummaryListSkeleton';
+export { UnorderedList } from './List/UnorderedList';
+export type { UnorderedListProps } from './List/UnorderedList';
+export { OrderedList } from './List/OrderedList';
+export type { OrderedListProps } from './List/OrderedList';
+export { LinkList, LinkListItem } from './LinkList/LinkList';
+export type { LinkListProps, LinkListItemProps } from './LinkList/LinkList';
+export { Li } from './List/Li';
+export type { LiProps } from './List/Li';
+
+// MARK: Overlays
+export {
+  Modal,
+  ModalTrigger,
+  ModalPortal,
+  ModalClose,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalTitle,
+  ModalDescription,
+} from './Modal/Modal';
+export type {
+  ModalProps,
+  ModalTriggerProps,
+  ModalPortalProps,
+  ModalCloseProps,
+  ModalOverlayProps,
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalFooterProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+} from './Modal/Modal';
+export { ErrorModal } from './ErrorModal/ErrorModal';
+export type { ErrorModalProps } from './ErrorModal/ErrorModal';
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from './Popover/Popover';
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from './Dropdown/Dropdown';
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './Tooltip/Tooltip';
+export type {
+  TooltipProps,
+  TooltipProviderProps,
+  TooltipTriggerProps,
+  TooltipContentProps,
+} from './Tooltip/Tooltip';
+
+// MARK: Navigation patterns
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './Accordion/Accordion';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs/Tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './Tabs/Tabs';
+export {
+  Sidebar,
+  SidebarProvider,
+  SidebarClose,
+  SidebarInset,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  useSidebar,
+} from './Sidebar/Sidebar';
+export type {
+  SidebarSide,
+  SidebarOrientation,
+  SidebarProviderProps,
+  SidebarProps,
+} from './Sidebar/Sidebar';
+export { ResizableSidebar, ResizableSidebarHandle } from './Sidebar/ResizableSidebar';
+export type {
+  ResizableSidebarProps,
+  ResizableSidebarHandleProps,
+} from './Sidebar/ResizableSidebar';
+
+// MARK: Layout utilities
+export { Stack } from './Layout/Stack/Stack';
+export type { StackProps, StackGap } from './Layout/Stack/Stack';
+export { Separator } from './Separator/Separator';
+export type { SeparatorProps } from './Separator/Separator';
+export { ScrollArea } from './ScrollArea/ScrollArea';
+export type { ScrollAreaProps } from './ScrollArea/ScrollArea';
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './Resizable/Resizable';
+export type {
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+  ResizableHandleProps,
+} from './Resizable/Resizable';
+export { Keyboard, KeyboardGroup } from './Keyboard/Keyboard';
+export type { KeyboardProps, KeyboardGroupProps } from './Keyboard/Keyboard';
+
+// MARK: Map controls
+export { LayerSwitcher } from './LayerSwitcher/LayerSwitcher';
+export type { LayerSwitcherProps, LayerOption } from './LayerSwitcher/LayerSwitcher';
+export { Legend } from './Legend/Legend';
+export type { LegendProps } from './Legend/Legend';
+export { LegendPanel } from './Legend/LegendPanel';
+export type { LegendPanelProps } from './Legend/LegendPanel';
+export { LegendSkeleton } from './Legend/LegendSkeleton';
+export type { LegendSkeletonProps } from './Legend/LegendSkeleton';
+
+// MARK: Application
+export { CookieBanner } from './CookieBanner/CookieBanner';
+export type { CookieBannerProps } from './CookieBanner/CookieBanner';
+export { NoScriptBanner } from './NoScriptBanner/NoScriptBanner';
+export type { NoScriptBannerProps } from './NoScriptBanner/NoScriptBanner';
+export { InfoBox } from './InfoBox/InfoBox';
+export type { InfoBoxProps } from './InfoBox/InfoBox';
 export { ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
+export type { ErrorBoundaryProps } from './ErrorBoundary/ErrorBoundary';
 export { ErrorFallback } from './ErrorBoundary/ErrorFallback';
-// NOTE: Select components moved to separate entry point '@tpzdsp/next-toolkit/components/select'
-// export { Select } from './select/Select';
-// export { SelectSkeleton } from './select/SelectSkeleton';
-// NOTE: InfoBox moved to separate entry point '@tpzdsp/next-toolkit/components/info-box'
-
-// Export client component types
-export type { AccordionProps } from './accordion/Accordion';
-export type { ItemRendererProps } from './dropdown/useDropdownMenu';
-export type { DropdownMenuItem } from './dropdown/DropdownMenu';
-
-// Export layout components
-export { Header } from './layout/header/Header';
-export { Footer } from './layout/footer/Footer';
+export type { ErrorFallbackProps } from './ErrorBoundary/ErrorFallback';
+export { GoogleAnalytics } from './GoogleAnalytics/GoogleAnalytics';
+export { Hero } from './Hero/Hero';
+
+// MARK: Structure
+export { Header } from './Header/Header';
+export { type HeaderProps } from './Header/Header';
+export { HeaderAppContent } from './Header/HeaderAppContent';
+export { Footer } from './Footer/Footer';
 export { SmallFooter } from './Footer/Small/SmallFooter';
+export { Unauthorized } from './Layout/401/401';
+export { Forbidden } from './Layout/403/403';
+export { NotFound } from './Layout/404/404';
+export { InternalServerError } from './Layout/500/500';
+export type { InternalServerErrorProps } from './Layout/500/500';
+export { WidthContainer } from './Layout/WidthContainer/WidthContainer';
+export type { WidthContainerProps } from './Layout/WidthContainer/WidthContainer';
+export { MainWrapper } from './Layout/MainWrapper/MainWrapper';
+export type { MainWrapperProps } from './Layout/MainWrapper/MainWrapper';
+export { PageShell } from './Layout/PageShell/PageShell';
+export type { PageShellProps, PageShellVariant } from './Layout/PageShell/PageShell';
+
+// MARK: Images
+export { DefraLogo } from '../assets/images/DefraLogo';
+export { EaLogo } from '../assets/images/EaLogo';
+export { OglLogo } from '../assets/images/OglLogo';

package/src/errors/errorDisplay.ts

@@ -0,0 +1,70 @@
+import { ApiError } from './ApiError';
+
+export type ErrorDisplayInfo = {
+  message: string;
+  details?: string;
+  digest?: string;
+  stack?: string;
+};
+
+/**
+ * A digest can come from two unrelated places: ApiError sets its own (a
+ * random UUID, preserved as long as the error stays client-side and never
+ * crosses a server/client boundary), or Next.js sets one itself when it
+ * replaces a server-render error with a generic one for app/error.tsx (a
+ * hash correlating to the full error in the server log). Once that happens
+ * the error is no longer `instanceof ApiError`, so this only needs to read
+ * whatever `digest` property is already on the plain Error.
+ */
+const getDigest = (error: Error): string | undefined => {
+  return 'digest' in error && typeof error.digest === 'string' ? error.digest : undefined;
+};
+
+/**
+ * Derives a consistent, displayable shape from an unknown thrown value.
+ * Shared by ErrorFallback, ErrorModal, and InternalServerError so all three
+ * surfaces describe the same error the same way.
+ */
+export const getErrorDisplayInfo = (error: unknown): ErrorDisplayInfo => {
+  if (error instanceof ApiError) {
+    return {
+      message: error.message,
+      details: error.details ?? undefined,
+      digest: error.digest,
+      stack: error.stack,
+    };
+  }
+
+  if (error instanceof Error) {
+    return {
+      message: error.message,
+      details: error.cause?.toString(),
+      digest: getDigest(error),
+      stack: error.stack,
+    };
+  }
+
+  return { message: 'Unknown error' };
+};
+
+/**
+ * Formats an ErrorDisplayInfo as plain text for the clipboard, including the
+ * stack trace (the backtrace) when one is available.
+ */
+export const formatErrorForClipboard = (info: ErrorDisplayInfo): string => {
+  const lines = [`Error: ${info.message}`];
+
+  if (info.details) {
+    lines.push(`Details: ${info.details}`);
+  }
+
+  if (info.digest) {
+    lines.push(`Digest: ${info.digest}`);
+  }
+
+  if (info.stack) {
+    lines.push('', 'Stack:', info.stack);
+  }
+
+  return lines.join('\n');
+};

package/src/errors/index.ts

@@ -1 +1,2 @@
 export * from './ApiError';
+export * from './errorDisplay';

package/src/http/constants.ts

@@ -112,6 +112,7 @@ export const Header = {
   XApiToken: 'X-API-Token',
   ApiVersion: 'API-Version',
   CacheControl: 'Cache-Control',
+  Authorization: 'Authorization',
 } as const;
 
 /**

package/src/http/fetch.ts

@@ -187,9 +187,13 @@ const TOOLKIT_PLUGIN = {
   },
   hooks: {
     onRequest: (context) => {
-      // for some reason if you specify a JSON content type, better-fetch will not stringify the body
-      // but as we also have extra JSON mime types, we need to handle that
-      if (isJsonMimeType(context.headers.get(Header.ContentType))) {
+      // better-fetch now handle json content types and stringifies the body, so we skip if the
+      // body is already a string, but we also use custom json mime types like geojson so if the
+      // body didn't get stringified then we do it here
+      if (
+        isJsonMimeType(context.headers.get(Header.ContentType)) &&
+        typeof context.body !== 'string'
+      ) {
         context.body = JSON.stringify(context.body);
       }