@datarecce/ui 0.1.30 → 0.1.32

package/src/lib/hooks/useAppRouter.ts

@@ -0,0 +1,240 @@
+/**
+ * useAppRouter - Navigation utilities for Next.js App Router with RouteConfig support
+ *
+ * This is a custom version that wraps the OSS useAppRouter to add
+ * RouteConfigContext support for path prefixing in recce-cloud.
+ *
+ * The key difference from OSS:
+ * - setLocation() automatically prefixes paths with the configured basePath
+ * - This allows OSS components to use setLocation("/query") while
+ *   recce-cloud can configure basePath="/oss/abc123" to get "/oss/abc123/query"
+ */
+
+"use client";
+
+import {
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams,
+} from "next/navigation";
+import { useCallback, useMemo } from "react";
+import { useRouteConfig } from "./RouteConfigContext";
+
+interface NavigateOptions {
+  replace?: boolean;
+  scroll?: boolean;
+}
+
+/**
+ * Hook that provides Wouter-compatible location API using Next.js App Router
+ * with RouteConfigContext support for path prefixing.
+ *
+ * NOTE: This returns only the pathname (not search params) to avoid
+ * triggering Suspense boundaries on every navigation.
+ *
+ * @returns [pathname, setLocation] tuple similar to Wouter's useLocation
+ *
+ * @example
+ * const [location, setLocation] = useAppLocation();
+ * setLocation("/checks?id=123"); // In cloud mode with basePath="/oss/abc123"
+ *                                 // navigates to "/oss/abc123/checks?id=123"
+ */
+export function useAppLocation(): [
+  string,
+  (to: string, options?: NavigateOptions) => void,
+] {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { resolvePath } = useRouteConfig();
+
+  // Navigation function compatible with Wouter's setLocation
+  // Automatically applies basePath prefix from RouteConfigContext
+  const setLocation = useCallback(
+    (to: string, options?: NavigateOptions) => {
+      // Separate path and query string for proper handling
+      const [pathPart, queryPart] = to.split("?");
+      const resolvedPath = resolvePath(pathPart);
+      const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+
+      if (options?.replace) {
+        router.replace(fullPath, { scroll: options?.scroll ?? true });
+      } else {
+        router.push(fullPath, { scroll: options?.scroll ?? true });
+      }
+    },
+    [router, resolvePath],
+  );
+
+  return [pathname, setLocation];
+}
+
+/**
+ * Hook that includes search params in the location string.
+ * Also supports RouteConfigContext path prefixing.
+ *
+ * WARNING: This hook uses useSearchParams() which triggers Suspense.
+ * Only use this in components that are wrapped in a <Suspense> boundary,
+ * or in leaf components where suspension is acceptable.
+ *
+ * @returns [fullLocation, setLocation] tuple with search params included
+ */
+export function useAppLocationWithSearch(): [
+  string,
+  (to: string, options?: NavigateOptions) => void,
+] {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { resolvePath } = useRouteConfig();
+
+  // Construct full location string including search params
+  const location = useMemo(() => {
+    const search = searchParams?.toString();
+    return search ? `${pathname}?${search}` : pathname;
+  }, [pathname, searchParams]);
+
+  // Navigation function with RouteConfigContext support
+  const setLocation = useCallback(
+    (to: string, options?: NavigateOptions) => {
+      const [pathPart, queryPart] = to.split("?");
+      const resolvedPath = resolvePath(pathPart);
+      const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+
+      if (options?.replace) {
+        router.replace(fullPath, { scroll: options?.scroll ?? true });
+      } else {
+        router.push(fullPath, { scroll: options?.scroll ?? true });
+      }
+    },
+    [router, resolvePath],
+  );
+
+  return [location, setLocation];
+}
+
+/**
+ * Hook to check if current path matches a pattern
+ * Similar to Wouter's useRoute
+ *
+ * @param pattern - The route pattern to match (e.g., "/checks/:checkId")
+ * @returns [isMatch, params] tuple
+ *
+ * @example
+ * const [isMatch, params] = useAppRoute("/checks/:checkId");
+ * if (isMatch) {
+ *   console.log(params.checkId); // "abc-123"
+ * }
+ */
+export function useAppRoute(
+  pattern: string,
+): [boolean, Record<string, string>] {
+  const pathname = usePathname();
+  const params = useParams();
+
+  const isMatch = useMemo(() => {
+    // Convert Next.js dynamic route pattern to regex
+    // /checks/[checkId] -> /checks/:checkId -> /checks/([^/]+)
+    const regexPattern = pattern
+      .replace(/:\w+/g, "([^/]+)") // :param -> capture group
+      .replace(/\*/g, ".*"); // * -> wildcard
+
+    const regex = new RegExp(`^${regexPattern}$`);
+    return regex.test(pathname);
+  }, [pattern, pathname]);
+
+  // Convert Next.js params to plain object
+  const paramsObj = useMemo(() => {
+    if (!params) return {};
+    return Object.fromEntries(
+      Object.entries(params).map(([key, value]) => [
+        key,
+        Array.isArray(value) ? value.join("/") : value,
+      ]),
+    );
+  }, [params]);
+
+  return [isMatch, paramsObj as Record<string, string>];
+}
+
+/**
+ * Imperative navigation function for use outside React components
+ * Use sparingly - prefer useAppLocation hook in components
+ *
+ * NOTE: This function does NOT support RouteConfigContext because
+ * it's used outside of React component tree. If you need path prefixing,
+ * use useAppLocation hook instead.
+ *
+ * @example
+ * // In an event handler or utility function
+ * import { navigateTo } from "@/lib/hooks/useAppRouter";
+ * navigateTo("/checks?id=123");
+ */
+export function navigateTo(path: string, replace = false): void {
+  if (typeof window !== "undefined") {
+    if (replace) {
+      window.history.replaceState(null, "", path);
+    } else {
+      window.history.pushState(null, "", path);
+    }
+    // Trigger Next.js to recognize the navigation
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }
+}
+
+/**
+ * Hook for programmatic navigation with more options
+ * Provides direct access to Next.js router methods with RouteConfigContext support
+ *
+ * NOTE: Does not include searchParams to avoid Suspense.
+ * Use useSearchParams() directly in components that need it.
+ */
+export function useAppNavigation() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const { resolvePath } = useRouteConfig();
+
+  // Wrap router.push and router.replace with path resolution
+  const push = useCallback(
+    (href: string, options?: { scroll?: boolean }) => {
+      const [pathPart, queryPart] = href.split("?");
+      const resolvedPath = resolvePath(pathPart);
+      const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+      router.push(fullPath, options);
+    },
+    [router, resolvePath],
+  );
+
+  const replace = useCallback(
+    (href: string, options?: { scroll?: boolean }) => {
+      const [pathPart, queryPart] = href.split("?");
+      const resolvedPath = resolvePath(pathPart);
+      const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+      router.replace(fullPath, options);
+    },
+    [router, resolvePath],
+  );
+
+  return {
+    /** Current pathname */
+    pathname,
+    /** Current route params */
+    params: params as Record<string, string>,
+    /** Navigate to a new path (with RouteConfigContext support) */
+    push,
+    /** Replace current history entry (with RouteConfigContext support) */
+    replace,
+    /** Go back in history */
+    back: router.back,
+    /** Go forward in history */
+    forward: router.forward,
+    /** Refresh the current route */
+    refresh: router.refresh,
+    /** Prefetch a route for faster navigation */
+    prefetch: router.prefetch,
+  };
+}
+
+// Re-export Next.js hooks for convenience
+export { useRouter, usePathname, useParams, useSearchParams };

package/src/mui-augmentation.d.ts

@@ -0,0 +1,139 @@
+/**
+ * MUI Theme Augmentation for Recce Custom Colors
+ *
+ * This file extends MUI component props to accept custom palette colors
+ * defined in the Recce theme (mui-theme.ts).
+ *
+ * The `export {}` makes this a module, which is required for proper
+ * module augmentation (extending rather than overriding).
+ */
+
+import '@mui/material/Button';
+import '@mui/material/ButtonGroup';
+import '@mui/material/Chip';
+import '@mui/material/CircularProgress';
+import '@mui/material/LinearProgress';
+import '@mui/material/IconButton';
+import '@mui/material/SvgIcon';
+import '@mui/material/TextField';
+import '@mui/material/InputBase';
+import '@mui/material/FormControl';
+import '@mui/material/Radio';
+import '@mui/material/Checkbox';
+import '@mui/material/Switch';
+import '@mui/material/Badge';
+import '@mui/material/Alert';
+import '@mui/material/Tabs';
+import '@mui/material/Tab';
+import '@mui/material/ToggleButton';
+
+// Custom color types used in Recce theme
+type RecceCustomColors = {
+  brand: true;
+  iochmara: true;
+  cyan: true;
+  amber: true;
+  green: true;
+  red: true;
+  rose: true;
+  fuchsia: true;
+  neutral: true;
+};
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/CircularProgress' {
+  interface CircularProgressPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/LinearProgress' {
+  interface LinearProgressPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/IconButton' {
+  interface IconButtonPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/TextField' {
+  interface TextFieldPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/InputBase' {
+  interface InputBasePropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/FormControl' {
+  interface FormControlPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Radio' {
+  interface RadioPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Checkbox' {
+  interface CheckboxPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Switch' {
+  interface SwitchPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Badge' {
+  interface BadgePropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Alert' {
+  interface AlertPropsColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Tabs' {
+  interface TabsPropsIndicatorColorOverrides extends RecceCustomColors {}
+}
+
+declare module '@mui/material/Tab' {
+  interface TabPropsColorOverrides {
+    brand: true;
+    iochmara: true;
+  }
+}
+
+declare module '@mui/material/ToggleButton' {
+  interface ToggleButtonPropsColorOverrides extends RecceCustomColors {}
+}
+
+// Custom size augmentations
+declare module '@mui/material/Button' {
+  interface ButtonPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+declare module '@mui/material/ButtonGroup' {
+  interface ButtonGroupPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+declare module '@mui/material/IconButton' {
+  interface IconButtonPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+export {};

package/src/theme/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @datarecce/ui - Theme Exports
+ *
+ * Exports MUI themes for light and dark modes.
+ * These themes can be used in applications to ensure consistent
+ * styling across Recce components.
+ */
+
+// Export the light and dark themes from the mui-theme file
+export { lightTheme, darkTheme, muiTheme } from "@/components/ui/mui-theme";
+
+// Export theme-related types and utilities
+export type { Theme } from "@mui/material/styles";

package/src/theme.ts

@@ -0,0 +1,23 @@
+/**
+ * @datarecce/ui - MUI Theme Exports
+ *
+ * Re-exports the MUI theme configuration from Recce OSS.
+ * This allows host applications to use the same theme as Recce.
+ */
+
+export {
+  muiTheme,
+  lightTheme,
+  darkTheme,
+  colors,
+  semanticColors,
+  token,
+} from "@/components/ui/mui-theme";
+
+// Re-export types for consumers
+export type { Theme, ThemeOptions } from "@mui/material/styles";
+
+// Export inferred types for theme-related objects
+export type Colors = typeof import("@/components/ui/mui-theme").colors;
+export type SemanticColors = typeof import("@/components/ui/mui-theme").semanticColors;
+export type TokenFn = typeof import("@/components/ui/mui-theme").token;

package/src/types/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Types Module
+ *
+ * This module re-exports all TypeScript types and interfaces
+ * from the Recce library.
+ */
+
+// API Types
+export type * from '@/lib/api/types';
+
+// Component Types
+export type * from '@/components/run/types';
+export type * from '@/components/check/check';
+export type * from '@/components/schema/schemaDiff';
+export type * from '@/components/valuediff/shared';
+export type * from '@/components/rowcount/delta';
+
+// Constants
+export * from '@/constants/urls';
+export * from '@/constants/tooltipMessage';
+
+// Library Constants
+export * from '@/lib/const';