@c-rex/components 0.1.37 → 0.1.39

package/src/navbar/settings.tsx

@@ -1,62 +1,62 @@
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuLabel,
-    DropdownMenuPortal,
-    DropdownMenuSeparator,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuTrigger,
-} from "@c-rex/ui/dropdown-menu"
-import { Settings } from "lucide-react";
-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>
-            <DropdownMenuTrigger className="block">
-                <Settings />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>
-                <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-
-                <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                        <span>{t("accountSettings.contentLanguage")}</span>
-                    </DropdownMenuSubTrigger>
-
-                    <DropdownMenuPortal>
-                        <DropdownMenuSubContent>
-                            <ContentLanguageSwitch
-                                contentLangDefault={clientConfigs.languageSwitcher.default}
-                            />
-                        </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                </DropdownMenuSub>
-
-
-                <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                        <span>{t("accountSettings.uiLanguage")}</span>
-                    </DropdownMenuSubTrigger>
-
-                    <DropdownMenuPortal>
-                        <DropdownMenuSubContent>
-                            <UILanguageSwitch />
-                        </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                </DropdownMenuSub>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-};
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from "@c-rex/ui/dropdown-menu"
+import { Settings } from "lucide-react";
+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>
+            <DropdownMenuTrigger className="block">
+                <Settings />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>
+                <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+
+                <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                        <span>{t("accountSettings.contentLanguage")}</span>
+                    </DropdownMenuSubTrigger>
+
+                    <DropdownMenuPortal>
+                        <DropdownMenuSubContent>
+                            <ContentLanguageSwitch
+                                contentLangDefault={clientConfigs.languageSwitcher.default}
+                            />
+                        </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                </DropdownMenuSub>
+
+
+                <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                        <span>{t("accountSettings.uiLanguage")}</span>
+                    </DropdownMenuSubTrigger>
+
+                    <DropdownMenuPortal>
+                        <DropdownMenuSubContent>
+                            <UILanguageSwitch />
+                        </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                </DropdownMenuSub>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

package/src/navbar/sign-in-out-btns.tsx

@@ -1,35 +1,35 @@
-"use client"
-
-import React, { useState } from "react";
-import { signIn } from "next-auth/react";
-import { Button } from "@c-rex/ui/button";
-import { useTranslations } from "next-intl";
-
-export const SignInBtn = () => {
-    const t = useTranslations("user")
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-
-    const handleSignIn = () => {
-        setIsLoading(true);
-        signIn("crex", { prompt: "login", callbackUrl: "/" });
-    }
-
-    return (
-        <Button
-            className="gap-2 px-5 md:flex"
-            variant="default"
-            size="sm"
-            rounded="full"
-            disabled={isLoading}
-            onClick={handleSignIn}
-        >
-            {isLoading ? (
-                <div className="flex items-center justify-center py-4">
-                    <div className="animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-t-gray-950" />
-                </div>
-            ) : (
-                <span>{t("signIn")}</span>
-            )}
-        </Button>
-    );
-}
+"use client"
+
+import React, { useState } from "react";
+import { signIn } from "next-auth/react";
+import { Button } from "@c-rex/ui/button";
+import { useTranslations } from "next-intl";
+
+export const SignInBtn = () => {
+    const t = useTranslations("user")
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+
+    const handleSignIn = () => {
+        setIsLoading(true);
+        signIn("crex", { prompt: "login", callbackUrl: "/" });
+    }
+
+    return (
+        <Button
+            className="gap-2 px-5 md:flex"
+            variant="default"
+            size="sm"
+            rounded="full"
+            disabled={isLoading}
+            onClick={handleSignIn}
+        >
+            {isLoading ? (
+                <div className="flex items-center justify-center py-4">
+                    <div className="animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-t-gray-950" />
+                </div>
+            ) : (
+                <span>{t("signIn")}</span>
+            )}
+        </Button>
+    );
+}

package/src/navbar/user-menu.tsx

@@ -1,60 +1,60 @@
-"use client"
-import { FC } from 'react';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuGroup,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from "@c-rex/ui/dropdown-menu"
-import { CircleUser } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { signOut } from "next-auth/react";
-
-
-interface Props {
-    session: any
-    OIDCEndPoint: string
-}
-
-
-export const UserMenu: FC<Props> = ({ session, OIDCEndPoint }) => {
-    const t = useTranslations();
-
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger>
-                <CircleUser />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>
-                <DropdownMenuLabel>
-                    {t("user.welcome", { userName: session.user.name.split(" ")[0] })}
-                </DropdownMenuLabel>
-                <DropdownMenuLabel className='font-normal text-gray-600'>{session.user.email}</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                    <DropdownMenuItem>
-                        <a href={`${OIDCEndPoint}oidc/Profile`} target="_blank" rel="noreferrer">
-                            Profile settings
-                        </a>
-                    </DropdownMenuItem>
-
-                    <DropdownMenuItem>
-                        <a href={`${OIDCEndPoint}oidc/Profile/ChangePassword`} target="_blank" rel="noreferrer">
-                            Change password
-                        </a>
-                    </DropdownMenuItem>
-
-                    <DropdownMenuItem
-                        onClick={() => signOut({ callbackUrl: "/api/auth/logout" })}
-                        className='text-red-500 focus:text-red-500'
-                    >
-                        {t("user.signOut")}
-                    </DropdownMenuItem>
-                </DropdownMenuGroup>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-};
+"use client"
+import { FC } from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@c-rex/ui/dropdown-menu"
+import { CircleUser } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { signOut } from "next-auth/react";
+
+
+interface Props {
+    session: any
+    OIDCEndPoint: string
+}
+
+
+export const UserMenu: FC<Props> = ({ session, OIDCEndPoint }) => {
+    const t = useTranslations();
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <CircleUser />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" sideOffset={10} alignOffset={0}>
+                <DropdownMenuLabel>
+                    {t("user.welcome", { userName: session.user.name.split(" ")[0] })}
+                </DropdownMenuLabel>
+                <DropdownMenuLabel className='font-normal text-gray-600'>{session.user.email}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                        <a href={`${OIDCEndPoint}oidc/Profile`} target="_blank" rel="noreferrer">
+                            Profile settings
+                        </a>
+                    </DropdownMenuItem>
+
+                    <DropdownMenuItem>
+                        <a href={`${OIDCEndPoint}oidc/Profile/ChangePassword`} target="_blank" rel="noreferrer">
+                            Change password
+                        </a>
+                    </DropdownMenuItem>
+
+                    <DropdownMenuItem
+                        onClick={() => signOut({ callbackUrl: "/api/auth/logout" })}
+                        className='text-red-500 focus:text-red-500'
+                    >
+                        {t("user.signOut")}
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

package/src/page-wrapper.tsx

@@ -1,31 +1,54 @@
-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;
-    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>
-    );
-}
+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";
+import { Footer } from "./footer/footer";
+
+type Props = {
+    children: ReactNode;
+    showRestrictMenu?: boolean;
+    showFooter?: boolean;
+    renderFooter?: () => ReactNode;
+} & Partial<ComponentProps<typeof NavBar>> & Partial<ComponentProps<typeof RestrictionMenuContainer>>;
+
+export const PageWrapper = ({
+    children,
+    showInput = false,
+    showPkgFilter = false,
+    showRestrictMenu = false,
+    showFooter = true,
+    renderFooter,
+    restrictField,
+    requestType,
+    itemsToRender,
+    onlyUsedEntries = true,
+    enableHierarchy = false,
+    fetchMode = "deferred",
+    queryParams,
+    navigationMenuListClassName,
+    ...props
+}: Props) => {
+    return (
+        <MultiSidebarProvider>
+            <NavBar showInput={showInput} showPkgFilter={showPkgFilter} {...props} />
+
+            {showRestrictMenu && (
+                <div className="flex-1 container pt-6">
+                    <RestrictionMenuContainer
+                        restrictField={restrictField ?? "informationSubjects"}
+                        requestType={requestType ?? "InformationSubjectsGetAllClient"}
+                        itemsToRender={itemsToRender}
+                        onlyUsedEntries={onlyUsedEntries}
+                        enableHierarchy={enableHierarchy}
+                        fetchMode={fetchMode}
+                        queryParams={queryParams}
+                        navigationMenuListClassName={navigationMenuListClassName}
+                    />
+                </div>
+            )}
+
+            {children}
+            {showFooter && (renderFooter ? renderFooter() : <Footer showOrganizationLogo={false} />)}
+        </MultiSidebarProvider>
+    );
+}

package/src/render-article.module.css

@@ -0,0 +1,155 @@
+.idsContent {
+  line-height: 1.6;
+  color: hsl(var(--foreground));
+}
+
+.idsContent :global(.title),
+.idsContent :global(.topictitle1),
+.idsContent h1 {
+  font-size: 1.875rem;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 0 0 1rem;
+}
+
+.idsContent :global(.topictitle2),
+.idsContent h2 {
+  font-size: 1.5rem;
+  line-height: 1.25;
+  font-weight: 600;
+  margin: 1.25rem 0 0.5rem;
+}
+
+.idsContent :global(.topictitle3),
+.idsContent h3,
+.idsContent h4 {
+  line-height: 1.3;
+  font-weight: 600;
+  margin: 1rem 0 0.5rem;
+}
+
+.idsContent :global(.body),
+.idsContent :global(.conbody),
+.idsContent :global(.topic),
+.idsContent :global(.concept),
+.idsContent :global(.task),
+.idsContent :global(.reference),
+.idsContent :global(.troubleshooting) {
+  margin-top: 0.75rem;
+}
+
+.idsContent p,
+.idsContent :global(.p) {
+  margin: 0.5rem 0;
+}
+
+.idsContent :global(.shortdesc) {
+  margin: 0.5rem 0 1rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.idsContent section,
+.idsContent :global(.section) {
+  margin: 1rem 0;
+}
+
+.idsContent :global(.sectiontitle) {
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+
+.idsContent dl,
+.idsContent :global(.dl) {
+  margin: 1rem 0;
+}
+
+.idsContent dt,
+.idsContent :global(.dt),
+.idsContent :global(.dlterm) {
+  font-weight: 600;
+  margin-top: 0.75rem;
+}
+
+.idsContent dd,
+.idsContent :global(.dd),
+.idsContent :global(.dlentry) {
+  margin: 0.25rem 0 0.75rem 1.25rem;
+}
+
+.idsContent ul,
+.idsContent ol,
+.idsContent :global(.ul),
+.idsContent :global(.ol),
+.idsContent :global(.sl) {
+  margin: 0.75rem 0 0.75rem 1.5rem;
+}
+
+.idsContent li,
+.idsContent :global(.li),
+.idsContent :global(.sli) {
+  margin: 0.25rem 0;
+}
+
+.idsContent code,
+.idsContent :global(.codeph) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  background: hsl(var(--muted));
+  border-radius: 0.25rem;
+  padding: 0.1rem 0.25rem;
+  font-size: 0.9em;
+}
+
+.idsContent pre,
+.idsContent :global(.codeblock) {
+  overflow-x: auto;
+  background: hsl(var(--muted));
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+}
+
+.idsContent table,
+.idsContent :global(.table),
+.idsContent :global(.simpletable) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.idsContent th,
+.idsContent td,
+.idsContent :global(.entry),
+.idsContent :global(.stentry) {
+  border: 1px solid hsl(var(--border));
+  padding: 0.5rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.idsContent :global(.note) {
+  border-left: 3px solid hsl(var(--border));
+  padding-left: 0.75rem;
+  margin: 0.75rem 0;
+}
+
+.idsContent :global(.notetitle) {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.idsContent :global(.fig),
+.idsContent figure {
+  margin: 1rem 0;
+}
+
+.idsContent :global(.figcap),
+.idsContent figcaption {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.9rem;
+  margin-top: 0.25rem;
+}
+
+.idsContent img,
+.idsContent :global(.image) {
+  max-width: 100%;
+  height: auto;
+}