@c-rex/components 0.1.30 → 0.1.32

package/src/info/shared.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { articleInfoItemType } from "@c-rex/types";
 import { formatDateToLocale, isDate, isLanguage } from "@c-rex/utils";
 import { Flag } from "../icons/flag-icon";
@@ -13,7 +13,6 @@ export const renderValue = (item: articleInfoItemType, uiLang: string): ReactNod
             <span className="w-8 block">
                 <Flag countryCode={countryCode} />
             </span>
-
         );
     }
 

package/src/navbar/language-switcher/content-language-switch.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: content-language-switch
+
+- Component: packages/components/src/navbar/language-switcher/content-language-switch.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+
+## Recommended improvements
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+

package/src/navbar/language-switcher/content-language-switch.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
@@ -10,9 +10,13 @@ import { toast } from "sonner"
 import { useLanguageStore } from "../../stores/language-store";
 import { useSearchSettingsStore } from "../../stores/search-settings-store";
 
-export const ContentLanguageSwitch = () => {
+type Props = {
+    contentLangDefault: string;
+};
+
+export const ContentLanguageSwitch = ({ contentLangDefault }: Props) => {
     const t = useTranslations();
-    const contentLang = useSearchSettingsStore.getState().language;
+    const contentLang = useSearchSettingsStore.getState().language || contentLangDefault;
     const updatePreferences = useSearchSettingsStore.getState().updatePreferences;
 
     const { availableVersions } = useAppConfig()
@@ -45,6 +49,8 @@ export const ContentLanguageSwitch = () => {
                 setContentLanguage(locale)
             }
 
+            //TODO en: needs to be fixed as it's not working
+
             const currentPath = window.location.pathname;
             const isTopicOrBlogOrDocument = (
                 currentPath.includes(TOPICS_TYPE_AND_LINK) ||

package/src/navbar/language-switcher/shared.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: shared
+
+- Component: packages/components/src/navbar/language-switcher/shared.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/navbar/language-switcher/ui-language-switch.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: ui-language-switch
+
+- Component: packages/components/src/navbar/language-switcher/ui-language-switch.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=yes, window/document=yes, effects=no, fetch/call=no
+
+## Possible re-render causes
+- Store subscriptions can re-render this component whenever the selected slice changes.
+
+## Possible bugs/risks
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+
+## Recommended improvements
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+

package/src/navbar/language-switcher/ui-language-switch.tsx

@@ -24,7 +24,7 @@ export const UILanguageSwitch: FC = () => {
             setUiLang(locale)
             setCookie(UI_LANG_KEY, locale, { httpOnly: false });
 
-            window.location.reload()
+            //window.location.reload()
         });
     }
 

package/src/navbar/navbar.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: navbar
+
+- Component: packages/components/src/navbar/navbar.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/navbar/navbar.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { ComponentProps, FC } from "react";
 import Link from "next/link";
 import { SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
@@ -7,21 +7,22 @@ import { UserMenu } from "./user-menu";
 import { SearchInput } from "../search-input";
 import { CrexSDK } from "@c-rex/core/sdk";
 import * as AutocompleteOptions from "../generated/suggestions";
-import { RestrictionMenu } from "../restriction-menu/restriction-menu";
-import * as ComponentOptions from "../generated/client-components";
+import { cn } from "@c-rex/utils";
+import { getTranslations } from "next-intl/server";
+import { Button } from "@c-rex/ui/button";
+import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
+import { Menu } from "lucide-react";
 
-interface NavBarProps {
+type NavBarProps = {
     title?: string;
     showInput: boolean;
     showPkgFilter: boolean;
     onSelectPath?: string;
-    showMenu?: boolean
-    showRestrictMenu?: boolean
-    restrictionType?: keyof typeof ComponentOptions;
     autocompleteType?: keyof typeof AutocompleteOptions;
     //these two props are only used when showPkgFilter is false and has some values to override the default behavior
     alternativeAutocompleteType?: keyof typeof AutocompleteOptions;
     alternativeOnSelectPath?: string;
+    showMenu?: boolean;
 }
 
 export const NavBar: FC<NavBarProps> = async ({
@@ -29,11 +30,10 @@ export const NavBar: FC<NavBarProps> = async ({
     showInput,
     autocompleteType,
     onSelectPath,
-    restrictionType,
     showMenu = false,
-    showRestrictMenu = false,
     ...props
 }) => {
+    const t = await getTranslations();
     const sdk = new CrexSDK();
     const clientConfigs = sdk.getClientConfig();
     const serverConfigs = sdk.getServerConfig();
@@ -49,62 +49,95 @@ export const NavBar: FC<NavBarProps> = async ({
     }
 
     return (
-        <header className="sticky flex flex-col sm:items-center top-0 z-40 w-full px-4 pt-4 pb-2 backdrop-blur-xl transition-all bg-transparent border-b gap-4">
-            <div
-                className="flex flex-wrap sm:flex-nowrap justify-between w-full sm:items-center"
-            >
+        <header className="sticky flex flex-col top-0 z-40 w-full p-4 backdrop-blur-xl transition-all bg-transparent border-b gap-2">
+            <div className="w-full flex items-center justify-between gap-2">
+                <div
+                    className={cn(
+                        "flex items-center gap-4",
+                        title && "lg:w-[calc(16rem-16px)]"
+                    )}
+                >
 
-                <div className="flex gap-2">
-                    <Link href="/" className="flex items-center w-24 lg:w-60">
+                    <Link href="/"
+                    >
                         <img
                             src="/img/logo.png"
                             alt="C-rex Logo"
-                            className="max-h-14"
+                            className="h-14"
                         />
                     </Link>
 
-                    {title && (
-                        <div className="hidden sm:flex items-center">
-                            <h1 className="mt-4 sm:mt-0 sm:px-4 lg:px-0 text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-balance">{title}</h1>
-                        </div>
+                    {showMenu && (
+                        <DropdownHoverItem
+                            label={
+                                <Button variant="outline" rounded="full" size="icon">
+                                    <Menu className="size-4" />
+                                </Button>
+                            }
+                        >
+                            <Button asChild variant="link">
+                                <Link href="/documents">
+                                    {t('navigation.documents')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/topics">
+                                    {t('navigation.topics')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/fragments">
+                                    {t('navigation.fragments')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/packages">
+                                    {t('navigation.packages')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link">
+                                <Link href="/information-units">
+                                    {t('navigation.informationUnits')}
+                                </Link>
+                            </Button>
+                        </DropdownHoverItem>
                     )}
                 </div>
 
-                <div className="flex-1 relative flex items-center justify-between">
-                    {(showRestrictMenu || showMenu) && (
-                        <RestrictionMenu showMenu={showMenu} showRestrictMenu={showRestrictMenu} requestType={restrictionType} />
-                    )}
-
-                    <div className="flex items-center gap-2 absolute sm:static top-4 h-14 sm:h-min right-4">
+                {title && (
+                    <div className="flex-1 hidden md:flex md:justify-center lg:justify-start">
+                        <h1 className="md:text-2xl lg:text-3xl font-bold tracking-tight text-balance">{title}</h1>
+                    </div>
+                )}
 
-                        {willShowInput &&
-                            <SearchInput placedOn="NAVBAR" autocompleteType={autocompleteType} onSelectPath={onSelectPath} {...props} />
-                        }
+                <div className="flex gap-2">
+                    {willShowInput &&
+                        <div className="hidden sm:flex flex-1 items-center px-3 border rounded-full h-8 c-rex-search-bar">
+                            <SearchInput autocompleteType={autocompleteType} onSelectPath={onSelectPath} {...props} />
+                        </div>
+                    }
 
-                        {clientConfigs.OIDC.userEnabled && (
-                            <>
-                                {session ? (
-                                    <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
-                                ) : (
-                                    <SignInBtn />
-                                )}
-                            </>
-                        )}
+                    {clientConfigs.OIDC.userEnabled && (
+                        <>
+                            {session ? (
+                                <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
+                            ) : (
+                                <SignInBtn />
+                            )}
+                        </>
+                    )}
 
-                        {clientConfigs.languageSwitcher.enabled && (
-                            <SettingsMenu />
-                        )}
-                    </div>
+                    {clientConfigs.languageSwitcher.enabled && (
+                        <SettingsMenu />
+                    )}
                 </div>
-
-                {title && (
-                    <div className="flex w-full sm:hidden items-center">
-                        <h1 className="mt-4 sm:mt-0 sm:px-4 text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-balance">
-                            {title}
-                        </h1>
-                    </div>
-                )}
             </div>
+
+            {title && (
+                <div className="flex-1 flex justify-center md:hidden">
+                    <h1 className="text-2xl font-bold tracking-tight text-balance">{title}</h1>
+                </div>
+            )}
         </header>
     );
 };

package/src/navbar/settings.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: settings
+
+- Component: packages/components/src/navbar/settings.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/navbar/settings.tsx

@@ -14,9 +14,12 @@ import { useTranslations } from "next-intl";
 import { FC } from 'react';
 import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
 import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
+import { CrexSDK } from "@c-rex/core/sdk";
 
 export const SettingsMenu: FC = () => {
     const t = useTranslations();
+    const sdk = new CrexSDK();
+    const clientConfigs = sdk.getClientConfig();
 
     return (
         <DropdownMenu>
@@ -34,7 +37,9 @@ export const SettingsMenu: FC = () => {
 
                     <DropdownMenuPortal>
                         <DropdownMenuSubContent>
-                            <ContentLanguageSwitch />
+                            <ContentLanguageSwitch
+                                contentLangDefault={clientConfigs.languageSwitcher.default}
+                            />
                         </DropdownMenuSubContent>
                     </DropdownMenuPortal>
                 </DropdownMenuSub>

package/src/navbar/sign-in-out-btns.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: sign-in-out-btns
+
+- Component: packages/components/src/navbar/sign-in-out-btns.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/navbar/user-menu.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: user-menu
+
+- Component: packages/components/src/navbar/user-menu.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/page-wrapper.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: page-wrapper
+
+- Component: packages/components/src/page-wrapper.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/page-wrapper.tsx

@@ -1,20 +1,30 @@
 import { ComponentProps, ReactNode } from "react";
 import { NavBar } from './navbar/navbar';
 import { MultiSidebarProvider } from "@c-rex/ui/sidebar";
+import { RestrictionMenuContainer } from "./restriction-menu/restriction-menu-container";
 
 type Props = {
     children: ReactNode;
-} & Partial<ComponentProps<typeof NavBar>>
+    showRestrictMenu?: boolean
+} & Partial<ComponentProps<typeof NavBar>> & Partial<ComponentProps<typeof RestrictionMenuContainer>>;
 
 export const PageWrapper = ({
     children,
     showInput = false,
     showPkgFilter = false,
+    showRestrictMenu = false,
     ...props
 }: Props) => {
     return (
         <MultiSidebarProvider>
             <NavBar showInput={showInput} showPkgFilter={showPkgFilter} {...props} />
+
+            {showRestrictMenu && (
+                <div className="flex-1 container pt-6">
+                    <RestrictionMenuContainer  {...props} />
+                </div>
+            )}
+
             {children}
         </MultiSidebarProvider>
     );

package/src/render-article.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: render-article
+
+- Component: packages/components/src/render-article.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=yes, window/document=no, effects=yes, fetch/call=no
+
+## Possible re-render causes
+- Store subscriptions can re-render this component whenever the selected slice changes.
+- Effects that update state can add extra renders on mount and dependency changes.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/renditions/file-download.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: file-download
+
+- Component: packages/components/src/renditions/file-download.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/renditions/html.analysis.md

@@ -0,0 +1,17 @@
+# Analysis: html
+
+- Component: packages/components/src/renditions/html.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=yes
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- Async flows can hit race conditions during fast param/route changes.
+- fetch(url) runs inside async server rendering path and can increase list/page latency.
+
+## Recommended improvements
+- Consider cancellation guards (isMounted or AbortController) and standardized error handling.
+- Consider caching/revalidation and lighter fallback strategy to reduce N+1 impact.
+

package/src/renditions/image/container.analysis.md

@@ -0,0 +1,15 @@
+# Analysis: container
+
+- Component: packages/components/src/renditions/image/container.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- imageRestrictions prop exists but is not applied to Restrict composition.
+
+## Recommended improvements
+- Apply imageRestrictions to Restrict or remove the prop to avoid misleading API behavior.
+

package/src/renditions/image/rendition.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: rendition
+
+- Component: packages/components/src/renditions/image/rendition.tsx
+- Type: Server component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/restriction-menu/restriction-menu-container.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: restriction-menu-container
+
+- Component: packages/components/src/restriction-menu/restriction-menu-container.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.

package/src/restriction-menu/restriction-menu-container.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ComponentProps, FC } from "react"
+import * as ComponentOptions from "../generated/client-components";
+import { InformationSubjectsGetAllClient } from "../generated/client-components";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { RestrictionMenu } from "./restriction-menu";
+
+type Props = {
+    restrictField?: string
+    navigationMenuListClassName?: string
+    itemsToRender?: number
+    requestType?: keyof typeof ComponentOptions
+} & Partial<Omit<ComponentProps<typeof InformationSubjectsGetAllClient>, ("render" | "children" | "pathParams")>>;
+
+export const RestrictionMenuContainer: FC<Props> = ({
+    queryParams,
+    restrictField = "informationSubjects",
+    itemsToRender = 7,
+    requestType = "InformationSubjectsGetAllClient",
+    navigationMenuListClassName = "items-center justify-between flex-row",
+}) => {
+    const RequestComponent = ComponentOptions[requestType] as unknown as FC<ComponentProps<typeof InformationSubjectsGetAllClient>>;
+
+    return (
+        <RequestComponent
+            queryParams={{
+                Fields: ["labels"],
+                PageSize: 100,
+                Links: true,
+                Sort: ["labels.value"],
+                ...queryParams
+            }}
+        >
+            {({ data, isLoading }) => {
+
+                if (isLoading) return (
+                    <div className="flex justify-between">
+                        <Skeleton className="w-12 h-9 rounded-full" />
+                        {Array(itemsToRender).fill(0).map((_, index) => (
+                            <Skeleton key={`skeleton-${index}`} className="w-28 h-9 rounded-full" />
+                        ))}
+                        <Skeleton className="w-20 h-9 rounded-full" />
+                    </div>
+                )
+
+                if (!data) return null;
+
+                return <RestrictionMenu restrictField={restrictField} items={data.items} navigationMenuListClassName={navigationMenuListClassName} />
+            }}
+        </RequestComponent>
+    );
+};

package/src/restriction-menu/restriction-menu-item.analysis.md

@@ -0,0 +1,14 @@
+# Analysis: restriction-menu-item
+
+- Component: packages/components/src/restriction-menu/restriction-menu-item.tsx
+- Type: Client component
+- Detected signals: useQueryStates=no, stores=no, window/document=no, effects=no, fetch/call=no
+
+## Possible re-render causes
+- No obvious excessive re-render trigger beyond normal prop/context updates.
+
+## Possible bugs/risks
+- No critical bug is evident in this quick static pass; keep tests for error and loading paths.
+
+## Recommended improvements
+- Standardize loading/error handling and add regression tests to prevent divergent behavior across consuming apps.