@databiosphere/findable-ui 21.3.0 → 22.0.0

package/src/components/common/Socials/socials.stories.tsx

@@ -8,13 +8,15 @@ import { XIcon } from "../CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../CustomIcon/components/YouTubeIcon/youTubeIcon";
 import { Socials } from "./socials";
 
-export default {
+const meta = {
   argTypes: {
     socials: { control: "object" },
   },
   component: Socials,
   title: "Components/Navigation/SocialLinks",
-} as Meta<typeof Socials>;
+} satisfies Meta<typeof Socials>;
+
+export default meta;
 
 type Story = StoryObj<typeof Socials>;
 

package/src/components/common/StaticImage/staticImage.stories.tsx

@@ -1,9 +1,8 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import logo from "../../../images/logo.svg";
 import { StaticImage } from "./staticImage";
 
-export default {
+const meta = {
   argTypes: {
     alt: { control: "text" },
     height: { control: "number" },
@@ -12,15 +11,16 @@ export default {
   },
   component: StaticImage,
   title: "Components/Common/Image/StaticImage",
-} as ComponentMeta<typeof StaticImage>;
+} satisfies Meta<typeof StaticImage>;
 
-const StaticImageTemplate: ComponentStory<typeof StaticImage> = (args) => (
-  <StaticImage {...args} />
-);
+export default meta;
 
-export const StaticImageStory = StaticImageTemplate.bind({});
-StaticImageStory.args = {
-  alt: "Data Explorer",
-  height: 40,
-  src: logo,
+type Story = StoryObj<typeof meta>;
+
+export const StaticImageStory: Story = {
+  args: {
+    alt: "Data Explorer",
+    height: 40,
+    src: logo.src,
+  },
 };

package/src/components/common/StatusIcon/statusIcon.stories.tsx

@@ -1,23 +1,23 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { SearchOffIcon } from "../CustomIcon/components/SearchOffIcon/searchOffIcon";
 import { PRIORITY, StatusIcon } from "./statusIcon";
 
-export default {
+const meta = {
   argTypes: {
     StatusIcon: { control: { disable: true } },
     priority: { control: "select", options: Array.from(Object.keys(PRIORITY)) },
   },
   component: StatusIcon,
   title: "Components/Common/Alert/StatusIcon",
-} as ComponentMeta<typeof StatusIcon>;
+} satisfies Meta<typeof StatusIcon>;
 
-const StatusIconTemplate: ComponentStory<typeof StatusIcon> = (args) => (
-  <StatusIcon {...args} />
-);
+export default meta;
 
-export const StatusIconStory = StatusIconTemplate.bind({});
-StatusIconStory.args = {
-  StatusIcon: SearchOffIcon,
-  priority: PRIORITY.LOW,
+type Story = StoryObj<typeof meta>;
+
+export const StatusIconStory: Story = {
+  args: {
+    StatusIcon: SearchOffIcon,
+    priority: PRIORITY.LOW,
+  },
 };

package/src/components/common/Tag/tag.stories.tsx

@@ -1,21 +1,23 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Tag } from "./tag";
 import { TagWarning } from "./tag.styles";
 
-export default {
+const meta = {
   argTypes: {
     children: { control: { disabled: true } },
   },
   component: Tag,
   title: "Components/Common/Alert/Tag",
-} as ComponentMeta<typeof Tag>;
+} satisfies Meta<typeof Tag>;
 
-const WarningTagTemplate: ComponentStory<typeof Tag> = (args) => (
-  <TagWarning {...args}>{args.children}</TagWarning>
-);
+export default meta;
 
-export const WarningTagStory = WarningTagTemplate.bind({});
-WarningTagStory.args = {
-  children: "Please note",
+type Story = StoryObj<typeof meta>;
+
+export const WarningTagStory: Story = {
+  args: {
+    children: "Please note",
+  },
+  render: (args) => <TagWarning {...args}>{args.children}</TagWarning>,
 };

package/src/components/common/ToggleButtonGroup/toggleButtonGroup.stories.tsx

@@ -1,8 +1,7 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ToggleButtonGroup } from "./toggleButtonGroup";
 
-export default {
+const meta = {
   argTypes: {
     toggleButtons: { table: { disable: true } },
   },
@@ -11,28 +10,29 @@ export default {
     layout: "centered",
   },
   title: "Components/Common/ButtonGroup",
-} as ComponentMeta<typeof ToggleButtonGroup>;
+} satisfies Meta<typeof ToggleButtonGroup>;
 
-const ToggleButtonGroupTemplate: ComponentStory<typeof ToggleButtonGroup> = (
-  args
-) => <ToggleButtonGroup {...args} />;
+export default meta;
 
-export const ToggleButtonGroupStory = ToggleButtonGroupTemplate.bind({});
-ToggleButtonGroupStory.args = {
-  toggleButtons: [
-    {
-      label: "Exact Match (243)",
-      onToggle: (): void => {
-        // onToggle function
+type Story = StoryObj<typeof meta>;
+
+export const ToggleButtonGroupStory: Story = {
+  args: {
+    toggleButtons: [
+      {
+        label: "Exact Match (243)",
+        onToggle: (): void => {
+          // onToggle function
+        },
+        value: "exact-match",
       },
-      value: "exact-match",
-    },
-    {
-      label: "Related (33)",
-      onToggle: (): void => {
-        // onToggle function
+      {
+        label: "Related (33)",
+        onToggle: (): void => {
+          // onToggle function
+        },
+        value: "related-match",
       },
-      value: "related-match",
-    },
-  ],
+    ],
+  },
 };

package/src/config/entities.ts

@@ -379,6 +379,7 @@ export interface SiteConfig {
   entities: EntityConfig[];
   explorerTitle: HeroTitle;
   export?: ExportConfig;
+  exportsRequireAuth?: boolean;
   exportToTerraUrl?: string; // TODO(cc) revist location; possibly nest inside "export"?
   gitHubUrl?: string;
   layout: {

package/src/providers/loginGuard/common/types.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+/**
+ * A callback function to be stored and then executed upon successful login.
+ */
+export type LoginGuardCallback = () => void;
+
+/**
+ * The shape of the LoginGuard context, provides a function to trigger the
+ * login process.
+ */
+export interface LoginGuardContextProps {
+  requireLogin: (callback?: LoginGuardCallback) => void;
+}
+
+/**
+ * The properties for the LoginGuardProvider component.
+ */
+export interface LoginGuardProviderProps {
+  children: ReactNode;
+}

package/src/providers/loginGuard/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+import { LoginGuardCallback, LoginGuardContextProps } from "./common/types";
+
+/**
+ * LoginGuardContext provides a way to trigger a login process. Default value is to
+ * call the callback immediately, if specified.
+ */
+export const LoginGuardContext = createContext<LoginGuardContextProps>({
+  requireLogin: (callback?: LoginGuardCallback) => {
+    callback?.();
+  },
+});

package/src/providers/loginGuard/hook.ts

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { LoginGuardContextProps } from "./common/types";
+import { LoginGuardContext } from "./context";
+
+/**
+ * Custom hook to access the LoginGuard context. This hook returns an object
+ * containing the "requireLogin" function, which allows triggering the application's
+ * login process.
+ *
+ * @returns The current LoginGuard context value.
+ */
+export function useLoginGuard(): LoginGuardContextProps {
+  return useContext<LoginGuardContextProps>(LoginGuardContext);
+}

package/src/providers/loginGuard/provider.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { LoginDialog } from "../../components/common/LoginDialog/loginDialog";
+import { useAuthenticationConfig } from "../../hooks/authentication/config/useAuthenticationConfig";
+import { useConfig } from "../../hooks/useConfig";
+import { useAuth } from "../authentication/auth/hook";
+import { LoginGuardCallback, LoginGuardProviderProps } from "./common/types";
+import { LoginGuardContext } from "./context";
+
+/**
+ * LoginGuardProvider is responsible for intercepting actions that require user authentication.
+ * It provides a "requireLogin" function via context. When a protected action is triggered while the
+ * user is unauthenticated, the LoginDialog is displayed. Upon successful authentication, the saved
+ * callback is invoked.
+ *
+ * @param {LoginGuardProviderProps} props - The provider props that include children.
+ * @returns The provider component.
+ */
+export function LoginGuardProvider({
+  children,
+}: LoginGuardProviderProps): JSX.Element {
+  // Dialog open state.
+  const [open, setOpen] = useState(false);
+
+  // Use ref to store the callback without triggering re-render.
+  const callbackRef = useRef<LoginGuardCallback | undefined>(undefined);
+
+  // Determine if authentication is enabled.
+  const authConfig = useAuthenticationConfig();
+
+  // Determine if authentication is required for downloads and exports.
+  const {
+    config: { exportsRequireAuth },
+  } = useConfig();
+
+  // Get the user's authenticated state.
+  const {
+    authState: { isAuthenticated },
+  } = useAuth();
+
+  // If the user authenticates, close dialog then fire and clear callback.
+  useEffect(() => {
+    if (isAuthenticated) {
+      setOpen(false);
+      callbackRef.current?.();
+      // Clear callback after firing.
+      callbackRef.current = undefined;
+    }
+  }, [isAuthenticated]);
+
+  // Handler to close the dialog.
+  const onClose = useCallback(() => {
+    setOpen(false);
+    // Clear any stored callback.
+    callbackRef.current = undefined;
+  }, []);
+
+  // Block actions that require authentication, or fire callback if already authenticated.
+  const requireLogin = useCallback(
+    (cb?: LoginGuardCallback) => {
+      if (authConfig && exportsRequireAuth && !isAuthenticated) {
+        callbackRef.current = cb;
+        setOpen(true);
+      } else {
+        cb?.();
+      }
+    },
+    [authConfig, exportsRequireAuth, isAuthenticated]
+  );
+
+  return (
+    <LoginGuardContext.Provider value={{ requireLogin }}>
+      {children}
+      <LoginDialog open={open} onClose={onClose} />
+    </LoginGuardContext.Provider>
+  );
+}

package/src/styles/common/mui/typography.ts

@@ -1,5 +1,14 @@
 import { TypographyOwnProps } from "@mui/material";
 
+export const COLOR: Record<string, TypographyOwnProps["color"]> = {
+  INHERIT: "inherit",
+  INK_LIGHT: "ink.light",
+  INK_MAIN: "ink.main",
+};
+
 export const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   INHERIT: "inherit",
+  TEXT_BODY_400: "text-body-400",
+  TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+  TEXT_HEADING_SMALL: "text-heading-small",
 };

package/src/views/DataDictionaryView/dataDictionaryView.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
+import { BaseComponentProps } from "../../components/types";
+
+export const DataDictionaryView = ({
+  className,
+}: BaseComponentProps): JSX.Element => {
+  return <DataDictionary className={className} />;
+};

package/tests/provider.test.tsx

@@ -0,0 +1,191 @@
+import { jest } from "@jest/globals";
+import { act, render, screen } from "@testing-library/react";
+import React from "react";
+import { LoginGuardContext } from "../src/providers/loginGuard/context";
+
+jest.unstable_mockModule("../src/hooks/useConfig", () => ({
+  useConfig: jest.fn(),
+}));
+
+jest.unstable_mockModule("../src/providers/authentication/auth/hook", () => ({
+  useAuth: jest.fn(),
+}));
+
+jest.unstable_mockModule(
+  "../src/hooks/authentication/config/useAuthenticationConfig",
+  () => ({
+    useAuthenticationConfig: jest.fn(),
+  })
+);
+
+const TEST_ID_LOGIN_DIALOG = "login-dialog";
+const TEXT_DIALOG_CLOSED = "closed";
+const TEXT_DIALOG_OPEN = "open";
+jest.unstable_mockModule(
+  "../src/components/common/LoginDialog/loginDialog",
+  () => ({
+    LoginDialog: ({ open }: { open: boolean }): JSX.Element => (
+      <div data-testid={TEST_ID_LOGIN_DIALOG}>
+        {open ? TEXT_DIALOG_OPEN : TEXT_DIALOG_CLOSED}
+      </div>
+    ),
+  })
+);
+
+const { useConfig } = await import("../src/hooks/useConfig");
+const { useAuth } = await import("../src/providers/authentication/auth/hook");
+const { useAuthenticationConfig } = await import(
+  "../src/hooks/authentication/config/useAuthenticationConfig"
+);
+
+const { LoginGuardProvider } = await import(
+  "../src/providers/loginGuard/provider"
+);
+
+const TEXT_BUTTON_EXPORT = "export";
+
+describe("LoginGuardProvider", () => {
+  beforeEach(() => {
+    // Mock hooks used by login guard.
+    (useConfig as jest.Mock).mockReturnValue({
+      config: {
+        exportsRequireAuth: true,
+      },
+    });
+    (useAuth as jest.Mock).mockReturnValue({
+      authState: {
+        isAuthenticated: false,
+      },
+    });
+    (useAuthenticationConfig as jest.Mock).mockReturnValue({});
+  });
+
+  it("should render children and login dialog closed", () => {
+    render(
+      <LoginGuardProvider>
+        <div data-testid="child">child component</div>
+      </LoginGuardProvider>
+    );
+
+    expect(screen.getByTestId("child")).toBeTruthy();
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_CLOSED
+    );
+  });
+
+  it("calls callback immediately if user is authenticated", () => {
+    const callback = jest.fn();
+
+    // Simulate user authentication.
+    (useAuth as jest.Mock).mockReturnValue({
+      authState: { isAuthenticated: true },
+    });
+
+    render(
+      <LoginGuardProvider>
+        <LoginGuardContext.Consumer>
+          {({ requireLogin }) => (
+            <button onClick={() => requireLogin(callback)}>
+              {TEXT_BUTTON_EXPORT}
+            </button>
+          )}
+        </LoginGuardContext.Consumer>
+      </LoginGuardProvider>
+    );
+
+    // Click button requiring login.
+    act(() => {
+      screen.getByText(TEXT_BUTTON_EXPORT).click();
+    });
+
+    // User is authenticated; callback should be fired immediately.
+    expect(callback).toHaveBeenCalled();
+
+    // Login dialog should not be open.
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_CLOSED
+    );
+  });
+
+  it("calls callback immediately if exportsRequireAuth is false", () => {
+    const callback = jest.fn();
+
+    // Simulate exportsRequireAuth being false.
+    (useConfig as jest.Mock).mockReturnValue({
+      config: {
+        exportsRequireAuth: false,
+      },
+    });
+
+    render(
+      <LoginGuardProvider>
+        <LoginGuardContext.Consumer>
+          {({ requireLogin }) => (
+            <button onClick={() => requireLogin(callback)}>
+              {TEXT_BUTTON_EXPORT}
+            </button>
+          )}
+        </LoginGuardContext.Consumer>
+      </LoginGuardProvider>
+    );
+
+    // Click button requiring login.
+    act(() => {
+      screen.getByText(TEXT_BUTTON_EXPORT).click();
+    });
+
+    // exportsRequireAuth is false; callback should be fired immediately.
+    expect(callback).toHaveBeenCalled();
+
+    // Login dialog should not be open.
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_CLOSED
+    );
+  });
+
+  it("should call callback after user authenticates", async () => {
+    const callback = jest.fn();
+
+    const { rerender } = render(
+      <LoginGuardProvider>
+        <LoginGuardContext.Consumer>
+          {({ requireLogin }) => (
+            <button onClick={() => requireLogin(callback)}>
+              {TEXT_BUTTON_EXPORT}
+            </button>
+          )}
+        </LoginGuardContext.Consumer>
+      </LoginGuardProvider>
+    );
+
+    // Click button requiring login.
+    act(() => {
+      screen.getByText(TEXT_BUTTON_EXPORT).click();
+    });
+
+    // User is not authenticated; callback should not have been called.
+    expect(callback).not.toHaveBeenCalled();
+
+    // User is not authenticated; login dialog should be open.
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_OPEN
+    );
+
+    // Simulate user authentication.
+    await act(async () => {
+      (useAuth as jest.Mock).mockReturnValue({
+        authState: { isAuthenticated: true },
+      });
+    });
+
+    // Rerender to trigger useEffect.
+    rerender(
+      <LoginGuardProvider>
+        <div />
+      </LoginGuardProvider>
+    );
+
+    // Callback should be called (in useEffect called on re-render).
+    expect(callback).toHaveBeenCalled();
+  });
+});