create-adr-app 0.0.0-stage → 0.1.0

package/template/app/[lang]/contexts/navigation-context.tsx

@@ -0,0 +1,374 @@
+// app/[lang]/contexts/navigation-context.tsx
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useReducer,
+  useMemo,
+  useState,
+  useEffect,
+  type ReactNode,
+} from "react";
+import { usePathname, useRouter, useParams } from "next/navigation";
+import {
+  adrsListMap,
+  type AdrSlug,
+  getCategoryBySlug,
+  type Category,
+  getLocalizedCategories,
+} from "@/app/[lang]/config/adrs-lists";
+import { itemData as productItems } from "@/app/[lang]/products/products-list";
+// import { itemData as companyItems } from "@/app/[lang]/companies/companies-list";
+import { itemData as serviceItems } from "@/app/[lang]/services/services-list";
+import { itemData as appItems } from "@/app/[lang]/apps/applications-list";
+import { ADRItem } from "@/app/[lang]/types/adr";
+import { create, insertMultiple, search } from "@orama/orama";
+// Import your generated static code bundle module directly
+import { staticSearchDataset } from "@/app/[lang]/components/SearchData";
+import React from "react";
+
+type Dictionary = Record<string, string>;
+
+export type ListItem = { title: string; slug: string };
+
+interface SearchItem {
+  title: string;
+  url: string;
+  content: string;
+}
+
+type NavigationState = {
+  selectedCategoryId: string;
+  expandedAdrSlug: string | null;
+};
+
+type NavigationAction =
+  | { type: "SET_CATEGORY"; payload: string }
+  | { type: "SET_EXPANDED"; payload: string | null }
+  | {
+      type: "SYNC_FROM_URL";
+      payload: { categoryId: string; slug: string | null };
+    };
+
+const navigationReducer = (
+  state: NavigationState,
+  action: NavigationAction,
+): NavigationState => {
+  switch (action.type) {
+    case "SET_CATEGORY":
+      return { ...state, selectedCategoryId: action.payload };
+    case "SET_EXPANDED":
+      return { ...state, expandedAdrSlug: action.payload };
+    case "SYNC_FROM_URL":
+      return {
+        selectedCategoryId: action.payload.categoryId,
+        expandedAdrSlug: action.payload.slug || null,
+      };
+    default:
+      return state;
+  }
+};
+
+type NavigationContextValue = {
+  selectedCategoryId: string;
+  expandedAdrSlug: string | null;
+  currentSlug: string;
+  currentCategory: Category | undefined;
+  activeCategory: Category | undefined;
+  currentAdrsList: ADRItem[];
+  currentAdr: ADRItem | undefined;
+  currentProduct: ListItem | undefined;
+  // currentCompany: ListItem | undefined;
+  currentService: ListItem | undefined;
+  currentApp: ListItem | undefined;
+  currentAdrCategoryName: string;
+  localizedCategories: Category[];
+  selectCategory: (id: string) => void;
+  navigateToAdr: (slug: string, shouldExpand?: boolean) => void;
+  toggleExpanded: (slug: string) => void;
+  setExpanded: (slug: string | null) => void;
+  localize: (href: string) => string;
+  decisionDict: Dictionary;
+  // Integrated Orama Search State Extensions:
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  searchResults: any[];
+  isSearchOpen: boolean;
+  setIsSearchOpen: (open: boolean) => void;
+  isSearchReady: boolean;
+};
+
+const NavigationContext = createContext<NavigationContextValue | null>(null);
+
+export function NavigationProvider({
+  children,
+  dict, // ← this is the global/root dictionary
+}: {
+  children: ReactNode;
+  dict: Dictionary;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { lang } = useParams() as { lang: string };
+  const [decisionDict, setDecisionDict] = useState<Dictionary>({});
+
+  // Unified Orama Search Engine States
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isSearchReady, setIsSearchReady] = useState(false);
+  const [oramaDb, setOramaDb] = useState<any>(null);
+
+  const getLocalizedHref = (href: string): string => {
+    if (href === "/") return `/${lang}`;
+    if (!href.startsWith("/")) href = "/" + href;
+    if (href.startsWith(`/${lang}/`)) return href;
+    return `/${lang}${href}`;
+  };
+
+  const slug = useMemo(() => {
+    const match = pathname.match(/\/adrs\/([^/]+)/);
+    const potentialSlug = match?.[1];
+    if (potentialSlug && potentialSlug in adrsListMap) {
+      return potentialSlug as AdrSlug;
+    }
+    return undefined;
+  }, [pathname]);
+
+  const localizedCategories = useMemo(
+    () => getLocalizedCategories(dict),
+    [dict],
+  );
+
+  const [state, dispatch] = useReducer(navigationReducer, {
+    selectedCategoryId: localizedCategories[0]?.id || "rd-center",
+    expandedAdrSlug: null,
+  });
+
+  const currentCategory = useMemo(
+    () => (slug ? getCategoryBySlug(slug) : undefined),
+    [slug],
+  );
+
+  const activeCategory = useMemo(() => {
+    return (
+      currentCategory ??
+      localizedCategories.find((c) => c.id === state.selectedCategoryId)
+    );
+  }, [currentCategory, localizedCategories, state.selectedCategoryId]);
+
+  // Load colocated decision translations AND merge with global dict (status keys)
+  useEffect(() => {
+    const categorySlug =
+      slug || state.expandedAdrSlug || activeCategory?.mainPageSlug;
+
+    if (!categorySlug) {
+      setDecisionDict(dict); // fallback to global dict only
+      return;
+    }
+
+    const loadDecisions = async () => {
+      try {
+        const module = await import(
+          `@/app/[lang]/adrs/${categorySlug}/decisions-dictionaries/${lang}.json`
+        );
+        const colocated = module.default || module;
+        // Merge global + colocated (status.* keys + decision titles)
+        setDecisionDict({ ...dict, ...colocated });
+      } catch (e) {
+        console.warn(
+          `No decision translations found for ${categorySlug}/${lang}`,
+        );
+        setDecisionDict(dict); // fallback to global dict
+      }
+    };
+
+    loadDecisions();
+  }, [slug, state.expandedAdrSlug, activeCategory, lang, dict]);
+
+  // Fetch and instantiate the client-side Orama dictionary database on context mount
+  useEffect(() => {
+    async function initOramaSearch() {
+      try {
+        setIsSearchReady(false);
+
+        // Fix: Read directly from our local module array instead of fetching a remote JSON route
+        const dataset = staticSearchDataset[lang] || [];
+
+        const db = await create({
+          schema: { title: "string", url: "string", content: "string" },
+        });
+
+        await insertMultiple(db, dataset);
+        setOramaDb(db);
+        setIsSearchReady(true);
+      } catch (err) {
+        console.error(
+          "Failed initializing Orama inside Provider context:",
+          err,
+        );
+      }
+    }
+    initOramaSearch();
+  }, [lang]);
+
+  // Reactive Debounced Execution Pipeline running Orama Search queries
+  useEffect(() => {
+    if (!oramaDb || searchQuery.trim() === "") {
+      setSearchResults([]);
+      return;
+    }
+
+    const triggerQuery = async () => {
+      const searchOutput = await search(oramaDb, {
+        term: searchQuery,
+        properties: ["title", "content"],
+        tolerance: 1,
+      });
+      setSearchResults(searchOutput.hits.map((hit) => hit.document));
+    };
+
+    const debounceTimer = setTimeout(triggerQuery, 150);
+    return () => clearTimeout(debounceTimer);
+  }, [searchQuery, oramaDb]);
+
+  // Translated decision titles
+  const currentAdrsList: ADRItem[] = useMemo(() => {
+    if (!slug) return [];
+    const rawList = adrsListMap[slug];
+    if (!Array.isArray(rawList)) return [];
+    return rawList.map((item: ADRItem) => ({
+      ...item,
+      title: decisionDict[item.translationKey] ?? item.translationKey,
+    }));
+  }, [slug, decisionDict]);
+
+  const currentAdr: ADRItem | undefined = useMemo(() => {
+    return currentAdrsList.find(
+      (adr) => getLocalizedHref(adr.link) === pathname,
+    );
+  }, [currentAdrsList, pathname, lang]);
+
+  const currentAdrCategoryName = useMemo(() => {
+    if (!slug) return "";
+    const cat = localizedCategories.find((c) =>
+      c.adrs.some((item) => item.slug === slug),
+    );
+    const item = cat?.adrs.find((item) => item.slug === slug);
+    return item?.label ?? slug;
+  }, [slug, localizedCategories]);
+
+  const currentProduct = useMemo(() => {
+    if (!pathname.includes("/products/")) return undefined;
+    const itemSlug = pathname.split("/products/")[1];
+    return productItems.find((item) => item.slug === itemSlug);
+  }, [pathname]);
+
+  // const currentCompany = useMemo(() => {
+  //   if (!pathname.includes("/companies/")) return undefined;
+  //   const itemSlug = pathname.split("/companies/")[1];
+  //   return companyItems.find((item) => item.slug === itemSlug);
+  // }, [pathname]);
+
+  const currentService = useMemo(() => {
+    if (!pathname.includes("/services/")) return undefined;
+    const itemSlug = pathname.split("/services/")[1];
+    return serviceItems.find((item) => item.slug === itemSlug);
+  }, [pathname]);
+
+  const currentApp = useMemo(() => {
+    if (!pathname.includes("/apps/")) return undefined;
+    const itemSlug = pathname.split("/apps/")[1];
+    return appItems.find((item) => item.slug === itemSlug);
+  }, [pathname]);
+
+  React.useEffect(() => {
+    if (currentCategory) {
+      dispatch({
+        type: "SYNC_FROM_URL",
+        payload: { categoryId: currentCategory.id, slug: slug || null },
+      });
+    } else if (pathname === `/${lang}` || pathname === "/") {
+      dispatch({
+        type: "SYNC_FROM_URL",
+        payload: {
+          categoryId: localizedCategories[0]?.id || "rd-center",
+          slug: null,
+        },
+      });
+    }
+  }, [currentCategory, slug, pathname, localizedCategories, lang]);
+
+  const selectCategory = (id: string) => {
+    dispatch({ type: "SET_CATEGORY", payload: id });
+    const cat = localizedCategories.find((c) => c.id === id);
+    if (cat?.mainPageSlug) {
+      dispatch({ type: "SET_EXPANDED", payload: cat.mainPageSlug });
+      router.push(`/${lang}/adrs/${cat.mainPageSlug}`);
+    } else {
+      dispatch({ type: "SET_EXPANDED", payload: null });
+    }
+  };
+
+  const navigateToAdr = (slug: string, shouldExpand = false) => {
+    router.push(`/${lang}/adrs/${slug}`);
+    if (shouldExpand) {
+      dispatch({ type: "SET_EXPANDED", payload: slug });
+    }
+  };
+
+  const toggleExpanded = (slug: string) => {
+    dispatch({
+      type: "SET_EXPANDED",
+      payload: state.expandedAdrSlug === slug ? null : slug,
+    });
+  };
+
+  const setExpanded = (slug: string | null) => {
+    dispatch({ type: "SET_EXPANDED", payload: slug });
+  };
+
+  const value: NavigationContextValue = {
+    selectedCategoryId: state.selectedCategoryId,
+    expandedAdrSlug: state.expandedAdrSlug,
+    currentSlug: slug || "",
+    currentCategory,
+    activeCategory,
+    currentAdrsList,
+    currentAdr,
+    currentProduct,
+    // currentCompany,
+    currentService,
+    currentApp,
+    currentAdrCategoryName,
+    localizedCategories,
+    selectCategory,
+    navigateToAdr,
+    toggleExpanded,
+    setExpanded,
+    localize: getLocalizedHref,
+    decisionDict,
+    // Provide state properties to search endpoints
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    isSearchOpen,
+    setIsSearchOpen,
+    isSearchReady,
+  };
+
+  return (
+    <NavigationContext.Provider value={value}>
+      {children}
+    </NavigationContext.Provider>
+  );
+}
+
+export const useNavigation = () => {
+  const context = useContext(NavigationContext);
+  if (!context) {
+    throw new Error("useNavigation must be used within a NavigationProvider");
+  }
+  return context;
+};

package/template/app/[lang]/globals.css

@@ -0,0 +1,103 @@
+/*app/[lang]/globals.css*/
+@import "tailwindcss";
+
+:root {
+    --background: #ffffff;
+    --foreground: #171717;
+}
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --font-sans: var(--font-geist-sans);
+    --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #0a0a0a;
+        --foreground: #ededed;
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+/* ───────────────────────────────────────────────────────────── */
+/* MOONLIGHT II THEME - CORE VALUE PALETTE                       */
+/* ───────────────────────────────────────────────────────────── */
+:root {
+    --ml-bg: #0a0e14;
+    --ml-fg: #a6accd;
+    --ml-cyan: #89ddff; /* Operators, Punctuation, Brackets */
+    --ml-blue: #82aaff; /* Functions, Identifiers */
+    --ml-teal: #4fd6be; /* Alternative Properties/Variables */
+    --ml-orange: #f78c6c; /* Numbers, Constants, Booleans */
+    --ml-green: #c3e88d; /* Strings, Explicit Text Blocks */
+    --ml-purple: #c792ea; /* Keywords, Layout Blocks */
+}
+
+/* Base structural geometry for the SVG container generated by rehype-mathjax */
+mjx-container[jax="SVG"] {
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-width: 100%;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* Default Plain Reset Engine Layout */
+/* Any formula not matched by a theme selector cleanly falls back to standard text flow */
+mjx-container[jax="SVG"] path,
+mjx-container[jax="SVG"] use {
+    fill: currentColor;
+}
+mjx-container[jax="SVG"] rect,
+mjx-container[jax="SVG"] line {
+    fill: currentColor;
+    stroke: currentColor;
+}
+
+/* ───────────────────────────────────────────────────────────── */
+/* EXCLUSIVE MOONLIGHT II SYNTAX HIGHLIGHT SELECTORS             */
+/* ───────────────────────────────────────────────────────────── */
+
+/* Target explicit standalone .theme-moonlight elements OR formulas nested inside MathBlock cards */
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mi"] use,
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mi"] path,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mi"] use,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mi"] path {
+    fill: var(--ml-blue) !important;
+}
+
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mo"] use,
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mo"] path,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mo"] use,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mo"] path {
+    fill: var(--ml-cyan) !important;
+}
+
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mn"] use,
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mn"] path,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mn"] use,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mn"] path {
+    fill: var(--ml-orange) !important;
+}
+
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mtext"] use,
+.theme-moonlight mjx-container[jax="SVG"] g[data-mml-node="mtext"] path,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mtext"] use,
+.math-card-content mjx-container[jax="SVG"] g[data-mml-node="mtext"] path {
+    fill: var(--ml-green) !important;
+}
+
+.theme-moonlight mjx-container[jax="SVG"] rect,
+.theme-moonlight mjx-container[jax="SVG"] line,
+.math-card-content mjx-container[jax="SVG"] rect,
+.math-card-content mjx-container[jax="SVG"] line {
+    fill: var(--ml-fg) !important;
+    stroke: var(--ml-fg) !important;
+}

package/template/app/[lang]/glossary/GlossaryPage.tsx

@@ -0,0 +1,220 @@
+// // app/[lang]/glossary/glossarypage.tsx
+// "use client";
+
+// import { useState, useMemo } from "react";
+// import { usePathname } from "next/navigation"; // Removed unused useRouter
+// import { Container, Box, Typography } from "@mui/material";
+// import { getGlossaryData, GlossaryItem, GlossaryDomain } from "./glossaryData";
+// import { useGlossaryScroll } from "./hooks/useGlossaryScroll";
+
+// import {
+//   GlossaryHeader,
+//   GlossarySearchBar,
+//   GlossaryAlphabetNav,
+//   GlossarySection,
+//   EmptyState,
+// } from "./components";
+// import { GlossaryTabs } from "./components/GlossaryTabs";
+
+// interface Props {
+//   dict: Record<string, string>;
+// }
+
+// export default function GlossaryPage({ dict }: Props) {
+//   const [searchTerm, setSearchTerm] = useState("");
+//   const [activeTab, setActiveTab] = useState<GlossaryDomain>("all");
+//   const pathname = usePathname();
+
+//   // Multi-tier compute layer
+//   const { grouped, letters } = useMemo(() => {
+//     let data = getGlossaryData(dict);
+//     const searchLower = searchTerm.trim().toLowerCase();
+
+//     if (activeTab !== "all") {
+//       data = data.filter((item) => item.domain === activeTab);
+//     }
+
+//     const filtered = data.filter(
+//       (item) =>
+//         item.term?.toLowerCase().includes(searchLower) ||
+//         item.definition?.toLowerCase().includes(searchLower),
+//     );
+
+//     const groupedData = filtered.reduce(
+//       (acc: Record<string, GlossaryItem[]>, item) => {
+//         if (!item.term || item.term.length === 0) return acc;
+//         const letter = item.term[0].toUpperCase();
+
+//         if (!acc[letter]) acc[letter] = [];
+//         acc[letter].push(item);
+//         return acc;
+//       },
+//       {},
+//     );
+
+//     return { grouped: groupedData, letters: Object.keys(groupedData).sort() };
+//   }, [dict, searchTerm, activeTab]);
+
+//   const { handleLetterClick, handleTermClick } = useGlossaryScroll(letters);
+
+//   // Tab change handler that safely removes the hash string fragment without scrolling
+//   const handleTabChange = (newTab: GlossaryDomain) => {
+//     setActiveTab(newTab);
+
+//     // Fixed: Native history mutation cleans the URL safely without bouncing the scroll viewport
+//     window.history.replaceState(null, "", pathname);
+//   };
+
+//   return (
+//     <Container
+//       maxWidth={false}
+//       disableGutters
+//       sx={{ px: { xs: 2, sm: 4, md: 0 }, py: { xs: 6, md: 0 } }}
+//     >
+//       <GlossaryHeader
+//         title={dict.glossary}
+//         subtitle={dict["glossary.subtitle"]}
+//       />
+
+//       <Box sx={{ mb: 4 }}>
+//         <GlossarySearchBar
+//           value={searchTerm}
+//           onChange={setSearchTerm}
+//           placeholder={dict["glossary.searchPlaceholder"]}
+//         />
+//       </Box>
+
+//       <GlossaryTabs
+//         activeTab={activeTab}
+//         onChange={handleTabChange}
+//         dict={dict}
+//       />
+
+//       <Box sx={{ mb: 6 }}>
+//         <GlossaryAlphabetNav
+//           letters={letters}
+//           onLetterClick={handleLetterClick}
+//         />
+//       </Box>
+
+//       <div
+//         id={`panel-${activeTab}`}
+//         role="tabpanel"
+//         aria-labelledby={`tab-${activeTab}`}
+//       >
+//         {letters.length === 0 ? (
+//           <EmptyState message={dict["glossary.noTermsFound"]} />
+//         ) : (
+//           letters.map((letter) => (
+//             <GlossarySection
+//               key={`${activeTab}-${letter}`}
+//               letter={letter}
+//               items={grouped[letter]}
+//               onLetterClick={() => handleLetterClick(letter)}
+//               onTermClick={handleTermClick}
+//             />
+//           ))
+//         )}
+//       </div>
+
+//       <Typography
+//         variant="caption"
+//         sx={{ display: "block", textAlign: "center", opacity: 0.6, mt: 8 }}
+//       >
+//         {dict["glossary.lastUpdated"]}
+//       </Typography>
+//     </Container>
+//   );
+// }
+
+// app/[lang]/glossary/glossarypage.tsx
+"use client";
+
+import { Box, Container, Typography } from "@mui/material";
+import { useGlossaryData } from "./hooks/useGlossaryData";
+import { useGlossaryScroll } from "./hooks/useGlossaryScroll";
+import {
+  GlossaryHeader,
+  GlossarySearchBar,
+  GlossaryTabs,
+  GlossaryAlphabetNav,
+  GlossarySection,
+  EmptyState,
+} from "./components";
+
+interface Props {
+  dict: Record<string, string>;
+}
+
+export default function GlossaryPage({ dict }: Props) {
+  const {
+    searchTerm,
+    setSearchTerm,
+    activeTab,
+    handleTabChange,
+    grouped,
+    letters,
+  } = useGlossaryData(dict);
+  const { handleLetterClick, handleTermClick } = useGlossaryScroll(letters);
+
+  return (
+    <Container
+      maxWidth={false}
+      disableGutters
+      sx={{ px: { xs: 2, sm: 4, md: 0 }, py: { xs: 6, md: 0 } }}
+    >
+      <GlossaryHeader
+        title={dict.glossary}
+        subtitle={dict["glossary.subtitle"]}
+      />
+
+      <Box sx={{ mb: 4 }}>
+        <GlossarySearchBar
+          value={searchTerm}
+          onChange={setSearchTerm}
+          placeholder={dict["glossary.searchPlaceholder"]}
+        />
+      </Box>
+
+      <GlossaryTabs
+        activeTab={activeTab}
+        onChange={handleTabChange}
+        dict={dict}
+      />
+
+      <Box sx={{ mb: 6 }}>
+        <GlossaryAlphabetNav
+          letters={letters}
+          onLetterClick={handleLetterClick}
+        />
+      </Box>
+
+      <div
+        id={`panel-${activeTab}`}
+        role="tabpanel"
+        aria-labelledby={`tab-${activeTab}`}
+      >
+        {letters.length === 0 ? (
+          <EmptyState message={dict["glossary.noTermsFound"]} />
+        ) : (
+          letters.map((letter) => (
+            <GlossarySection
+              key={`${activeTab}-${letter}`}
+              letter={letter}
+              items={grouped[letter]}
+              onLetterClick={() => handleLetterClick(letter)}
+              onTermClick={handleTermClick}
+            />
+          ))
+        )}
+      </div>
+
+      <Typography
+        variant="caption"
+        sx={{ display: "block", textAlign: "center", opacity: 0.6, mt: 8 }}
+      >
+        {dict["glossary.lastUpdated"]}
+      </Typography>
+    </Container>
+  );
+}