@databiosphere/findable-ui 21.3.0 → 22.0.0

package/src/components/Index/components/Hero/components/Summaries/summaries.stories.tsx

@@ -1,24 +1,24 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Summaries } from "./summaries";
 
-export default {
+const meta = {
   argTypes: {
-    summaries: { control: "array" },
+    summaries: { control: "object" },
   },
   component: Summaries,
   title: "Components/Summary",
-} as ComponentMeta<typeof Summaries>;
+} satisfies Meta<typeof Summaries>;
 
-const SummariesTemplate: ComponentStory<typeof Summaries> = (args) => (
-  <Summaries {...args} />
-);
+export default meta;
 
-export const SummariesStory = SummariesTemplate.bind({});
-SummariesStory.args = {
-  summaries: [
-    { count: "1", label: "Species" },
-    { count: "1.1k", label: "Donors" },
-    { count: "508.5k", label: "Files" },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const SummariesStory: Story = {
+  args: {
+    summaries: [
+      { count: "1", label: "Species" },
+      { count: "1.1k", label: "Donors" },
+      { count: "508.5k", label: "Files" },
+    ],
+  },
 };

package/src/components/Index/components/Hero/hero.stories.tsx

@@ -1,9 +1,10 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Summaries } from "./components/Summaries/summaries";
 import { SummariesStory } from "./components/Summaries/summaries.stories";
 import { Hero } from "./hero";
 
-export default {
+const meta = {
   argTypes: {
     Summaries: { table: { disable: true } },
     title: { table: { disable: true } },
@@ -13,12 +14,15 @@ export default {
     layout: "fullscreen",
   },
   title: "Components/Hero/ExploreView",
-} as ComponentMeta<typeof Hero>;
+} satisfies Meta<typeof Hero>;
 
-const HeroTemplate: ComponentStory<typeof Hero> = (args) => <Hero {...args} />;
+export default meta;
 
-export const HeroStory = HeroTemplate.bind({});
-HeroStory.args = {
-  Summaries: <SummariesStory {...SummariesStory.args} />,
-  title: "Data Explorer",
+type Story = StoryObj<typeof meta>;
+
+export const HeroStory: Story = {
+  args: {
+    Summaries: <Summaries {...SummariesStory.args} />,
+    title: "Data Explorer",
+  },
 };

package/src/components/Index/components/NTagCell/nTagCell.stories.tsx

@@ -1,22 +1,22 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { NTagCell } from "./nTagCell";
 
-export default {
+const meta = {
   argTypes: {
     label: { control: "text" },
-    values: { control: "array" },
+    values: { control: "object" },
   },
   component: NTagCell,
   title: "Components/Table/Cell/NTagCell",
-} as ComponentMeta<typeof NTagCell>;
+} satisfies Meta<typeof NTagCell>;
 
-const NTagCellTemplate: ComponentStory<typeof NTagCell> = (args) => (
-  <NTagCell {...args} />
-);
+export default meta;
 
-export const NTagCellStory = NTagCellTemplate.bind({});
-NTagCellStory.args = {
-  label: "species",
-  values: ["Homo sapiens", "Mus musculus"],
+type Story = StoryObj<typeof meta>;
+
+export const NTagCellStory: Story = {
+  args: {
+    label: "species",
+    values: ["Homo sapiens", "Mus musculus"],
+  },
 };

package/src/components/Index/index.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Summaries } from "./components/Hero/components/Summaries/summaries";
 import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
 import { Index } from "./index";
 
@@ -22,7 +23,7 @@ type Story = StoryObj<typeof Index>;
 export const IndexStory: Story = {
   args: {
     List: undefined,
-    Summaries: <SummariesStory {...SummariesStory.args} />,
+    Summaries: <Summaries {...SummariesStory.args} />,
     Tabs: undefined,
     title: "Explore Data",
   },

package/src/components/Layout/components/BackPage/backPageView.stories.tsx

@@ -1,17 +1,25 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { CollaboratingOrganizations } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { Contacts } from "../../../Project/components/Contacts/contacts";
 import { ContactsStory } from "../../../Project/components/Contacts/contacts.stories";
+import { Contributors } from "../../../Project/components/Contributors/contributors";
 import { ContributorsStory } from "../../../Project/components/Contributors/contributors.stories";
+import { DataCurators } from "../../../Project/components/DataCurators/dataCurators";
 import { DataCuratorsStory } from "../../../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicyStory } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DataReleasePolicy } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy";
+import { Description } from "../../../Project/components/Description/description";
 import { DescriptionStory } from "../../../Project/components/Description/description.stories";
+import { Details } from "../../../Project/components/Details/details";
 import { DetailsStory } from "../../../Project/components/Details/details.stories";
+import { Publications } from "../../../Project/components/Publications/publications";
 import { PublicationsStory } from "../../../Project/components/Publications/publications.stories";
+import { SupplementaryLinks } from "../../../Project/components/SupplementaryLinks/supplementaryLinks";
 import { SupplementaryLinksStory } from "../../../Project/components/SupplementaryLinks/supplementaryLinks.stories";
 import { BackPageView } from "./backPageView";
 
-export default {
+const meta = {
   argTypes: {
     isDetailOverview: { control: "boolean" },
     mainColumn: { table: { disable: true } },
@@ -23,39 +31,37 @@ export default {
     layout: "fullscreen",
   },
   title: "Views/BackPage",
-} as ComponentMeta<typeof BackPageView>;
+} satisfies Meta<typeof BackPageView>;
 
-const BackPageViewTemplate: ComponentStory<typeof BackPageView> = (args) => (
-  <BackPageView {...args} />
-);
+export default meta;
 
-export const BackPageViewStory = BackPageViewTemplate.bind({});
-BackPageViewStory.args = {
-  isDetailOverview: true,
-  mainColumn: (
-    <>
-      <DescriptionStory
-        projectDescription={DescriptionStory.args?.projectDescription || "None"}
-      />
-      <ContactsStory {...ContactsStory.args} />
-      <PublicationsStory {...PublicationsStory.args} />
-      <ContributorsStory {...ContributorsStory.args} />
-      <CollaboratingOrganizationsStory
-        {...CollaboratingOrganizationsStory.args}
-      />
-      <DataCuratorsStory {...DataCuratorsStory.args} />
-      {/*<CitationStory {...CitationStory.args} />*/}
-      <SupplementaryLinksStory {...SupplementaryLinksStory.args} />
-      <DataReleasePolicyStory />
-    </>
-  ),
-  sideColumn: (
-    <>
-      <DetailsStory
-        title={DetailsStory.args?.title ?? ""}
-        keyValuePairs={DetailsStory.args?.keyValuePairs}
-      />
-    </>
-  ),
-  top: <></>,
+type Story = StoryObj<typeof meta>;
+
+export const BackPageViewStory: Story = {
+  args: {
+    isDetailOverview: true,
+    mainColumn: (
+      <>
+        <Description
+          projectDescription={
+            DescriptionStory.args?.projectDescription || "None"
+          }
+        />
+        <Contacts {...ContactsStory.args} />
+        <Publications {...PublicationsStory.args} />
+        <Contributors {...ContributorsStory.args} />
+        <CollaboratingOrganizations {...CollaboratingOrganizationsStory.args} />
+        <DataCurators {...DataCuratorsStory.args} />
+        {/*<Citation {...CitationStory.args} />*/}
+        <SupplementaryLinks {...SupplementaryLinksStory.args} />
+        <DataReleasePolicy />
+      </>
+    ),
+    sideColumn: (
+      <>
+        <Details {...DetailsStory.args} />
+      </>
+    ),
+    top: <></>,
+  },
 };

package/src/components/Layout/components/Footer/footer.stories.tsx

@@ -9,10 +9,10 @@ import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/y
 import { Logo } from "../Header/components/Content/components/Logo/logo";
 import { Footer } from "./footer";
 
-export default {
+const meta = {
   argTypes: {
     Branding: { control: { disabled: true } },
-    navLinks: { control: "array" },
+    navLinks: { control: "object" },
     socials: { control: { disabled: true } },
   },
   component: Footer,
@@ -20,13 +20,15 @@ export default {
     layout: "fullscreen",
   },
   title: "Components/Layout/Footer",
-} as Meta<typeof Footer>;
+} satisfies Meta<typeof Footer>;
+
+export default meta;
 
 type Story = StoryObj<typeof Footer>;
 
 export const FooterStory: Story = {
   args: {
-    Branding: <Logo alt="logo" height={24} link={"/"} src={logo} />,
+    Branding: <Logo alt="logo" height={24} link={"/"} src={logo.src} />,
     navLinks: [
       {
         label: "Help",

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -78,7 +78,7 @@ export const NavigationMenu = ({
           >
             <MPaper variant="menu">
               <MClickAwayListener onClickAway={onClose}>
-                <MMenuList>
+                <MMenuList component="div">
                   <NavigationMenuItems
                     closeMenu={(): void => {
                       onClose();

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.tsx

@@ -2,9 +2,10 @@ import {
   Divider,
   ListItemIcon,
   ListItemText,
+  Link as MLink,
   MenuItem as MMenuItem,
 } from "@mui/material";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import React, { Fragment, ReactNode } from "react";
 import {
   TEXT_BODY_400,
@@ -38,7 +39,6 @@ export const NavigationMenuItems = ({
   menuItems,
   pathname,
 }: NavLinkMenuProps): JSX.Element => {
-  const router = useRouter();
   return (
     <>
       {menuItems.map(
@@ -54,8 +54,9 @@ export const NavigationMenuItems = ({
             url,
           },
           i
-        ) =>
-          nestedMenuItems ? (
+        ) => {
+          const isClientSide = isClientSideNavigation(url);
+          return nestedMenuItems ? (
             <NavigationMenu
               key={i}
               closeAncestor={closeMenu}
@@ -69,18 +70,17 @@ export const NavigationMenuItems = ({
           ) : (
             <Fragment key={i}>
               <MMenuItem
+                component={isClientSide ? Link : MLink}
                 disabled={!url}
-                onClick={(): void => {
-                  closeMenu();
-                  isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(
-                        url,
-                        target,
-                        REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
-                      );
-                }}
+                href={url}
+                onClick={(): void => closeMenu()}
+                rel={
+                  isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                }
                 selected={isNavigationLinkSelected(pathname, selectedPatterns)}
+                target={target}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText
@@ -100,7 +100,8 @@ export const NavigationMenuItems = ({
               </MMenuItem>
               {divider && <Divider />}
             </Fragment>
-          )
+          );
+        }
       )}
     </>
   );

package/src/components/Layout/components/Header/components/Content/components/Navigation/constants.ts

@@ -0,0 +1 @@
+export const NAVIGATION_TEST_ID = "navigation";

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.tsx

@@ -1,5 +1,5 @@
-import { Button, Divider } from "@mui/material";
-import { useRouter } from "next/router";
+import { Button, Divider, Link as MLink } from "@mui/material";
+import Link from "next/link";
 import React, { CSSProperties, forwardRef, Fragment, ReactNode } from "react";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import {
@@ -7,6 +7,7 @@ import {
   REL_ATTRIBUTE,
 } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { TestIdProps } from "../../../../../../../types";
 import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { isNavigationLinkSelected } from "./common/utils";
@@ -28,7 +29,7 @@ export interface NavLinkItem {
   visible?: Partial<Record<BreakpointKey, boolean>>;
 }
 
-export interface NavigationProps {
+export interface NavigationProps extends TestIdProps {
   className?: string;
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
@@ -48,12 +49,18 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
       links,
       pathname,
       style,
+      testId,
     }: NavigationProps,
     ref
   ): JSX.Element {
-    const router = useRouter();
     return (
-      <Links ref={ref} className={className} isMenuIn={isMenuIn} style={style}>
+      <Links
+        ref={ref}
+        className={className}
+        data-testid={testId}
+        isMenuIn={isMenuIn}
+        style={style}
+      >
         {links.map(
           (
             {
@@ -65,8 +72,9 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
               url,
             },
             i
-          ) =>
-            menuItems ? (
+          ) => {
+            const isClientSide = isClientSideNavigation(url);
+            return menuItems ? (
               <Fragment key={i}>
                 {isMenuIn ? (
                   <NavigationDrawer
@@ -98,17 +106,16 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
             ) : (
               <Fragment key={i}>
                 <Button
+                  component={isClientSide ? Link : MLink}
                   disabled={!url}
-                  onClick={(): void => {
-                    closeAncestor?.();
-                    isClientSideNavigation(url)
-                      ? router.push(url)
-                      : window.open(
-                          url,
-                          target,
-                          REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
-                        );
-                  }}
+                  href={url}
+                  onClick={(): void => closeAncestor?.()}
+                  rel={
+                    isClientSide
+                      ? REL_ATTRIBUTE.NO_OPENER
+                      : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                  }
+                  target={target}
                   variant={
                     isNavigationLinkSelected(pathname, selectedPatterns)
                       ? "activeNav"
@@ -119,7 +126,8 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                 </Button>
                 {divider && <Divider />}
               </Fragment>
-            )
+            );
+          }
         )}
       </Links>
     );

package/src/components/Layout/components/Header/header.stories.tsx

@@ -31,7 +31,7 @@ const url = "/";
 export const HeaderStory: Story = {
   args: {
     authenticationEnabled: false,
-    logo: <Logo alt="Logo" height={40} link="/" src={logo} />,
+    logo: <Logo alt="Logo" height={40} link="/" src={logo.src} />,
     navigation: [
       undefined,
       [

package/src/components/Layout/components/Header/header.tsx

@@ -21,6 +21,7 @@ import {
   renderIconButton as renderSearchIconButton,
   Search,
 } from "./components/Content/components/Actions/components/Search/search";
+import { NAVIGATION_TEST_ID } from "./components/Content/components/Navigation/constants";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
@@ -92,7 +93,11 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
           <Center>
             {/* Center navigation */}
             {isIn.isCenterNavigationIn && (
-              <DXNavigation {...navigationProps} links={navItemsC} />
+              <DXNavigation
+                {...navigationProps}
+                testId={NAVIGATION_TEST_ID}
+                links={navItemsC}
+              />
             )}
           </Center>
         </Fade>

package/src/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.tsx

@@ -1,20 +1,20 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { SidebarLabel } from "./sidebarLabel";
 
-export default {
+const meta = {
   argTypes: {
     label: { control: "text" },
   },
   component: SidebarLabel,
   title: "Components/Label",
-} as ComponentMeta<typeof SidebarLabel>;
+} satisfies Meta<typeof SidebarLabel>;
 
-const SidebarLabelTemplate: ComponentStory<typeof SidebarLabel> = (args) => (
-  <SidebarLabel {...args} />
-);
+export default meta;
 
-export const SidebarLabelStory = SidebarLabelTemplate.bind({});
-SidebarLabelStory.args = {
-  label: "Filter",
+type Story = StoryObj<typeof meta>;
+
+export const SidebarLabelStory: Story = {
+  args: {
+    label: "Filter",
+  },
 };

package/src/components/Layout/components/Sidebar/sidebar.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 import React from "react";
 import { Sidebar } from "./sidebar";
 
@@ -46,5 +47,6 @@ export const TemporaryOpenSidebarStory: Story = {
   args: {
     children: <div />,
     drawerOpen: true,
+    onDrawerClose: fn(),
   },
 };

package/src/components/Links/links.stories.tsx

@@ -1,28 +1,28 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Links } from "./links";
 
-export default {
+const FACEBOOK_URL = "https://www.facebook.com";
+const GOOGLE_URL = "https://www.google.com";
+const TWITTER_URL = "https://www.twitter.com";
+
+const meta = {
   argTypes: {
-    links: { control: "array" },
+    links: { control: "object" },
   },
   component: Links,
   title: "Components/Deprecated/Links",
-} as ComponentMeta<typeof Links>;
+} satisfies Meta<typeof Links>;
 
-const LinksTemplate: ComponentStory<typeof Links> = (args) => (
-  <Links {...args} />
-);
+export default meta;
 
-const FACEBOOK_URL = "https://www.facebook.com";
-const GOOGLE_URL = "https://www.google.com";
-const TWITTER_URL = "https://www.twitter.com";
+type Story = StoryObj<typeof meta>;
 
-export const LinksStory = LinksTemplate.bind({});
-LinksStory.args = {
-  links: [
-    { label: "Facebook", url: FACEBOOK_URL },
-    { label: "Google", url: GOOGLE_URL },
-    { label: "Twitter", url: TWITTER_URL },
-  ],
+export const LinksStory: Story = {
+  args: {
+    links: [
+      { label: "Facebook", url: FACEBOOK_URL },
+      { label: "Google", url: GOOGLE_URL },
+      { label: "Twitter", url: TWITTER_URL },
+    ],
+  },
 };

package/src/components/Loading/loading.stories.tsx

@@ -1,11 +1,12 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { Loading } from "./loading";
 
-export default {
+const meta = {
   argTypes: {
-    className: { control: { disabled: true } },
+    appear: { control: "boolean" },
+    iconSize: { control: "select", options: ["small", "medium", "large"] },
     loading: { control: "boolean" },
     panelStyle: {
       control: "select",
@@ -29,13 +30,14 @@ export default {
     ),
   ],
   title: "Components/Communication/Loading",
-} as ComponentMeta<typeof Loading>;
+} satisfies Meta<typeof Loading>;
 
-const LoadingTemplate: ComponentStory<typeof Loading> = (args) => (
-  <Loading {...args} />
-);
+export default meta;
 
-export const LoadingStory = LoadingTemplate.bind({});
-LoadingStory.args = {
-  loading: true,
+type Story = StoryObj<typeof meta>;
+
+export const LoadingStory: Story = {
+  args: {
+    loading: true,
+  },
 };

package/src/components/Login/components/Button/types.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@mui/material/Button/Button";
+import { ButtonProps } from "@mui/material";
 import { BaseComponentProps } from "../../../../theme/common/entities";
 
 export type Props = BaseComponentProps & ButtonProps;

package/src/components/Login/components/Buttons/buttons.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button } from "../Button/button";
+import { Props } from "./types";
+
+export const Buttons = <P,>({
+  className,
+  handleLogin,
+  providers = [],
+  ...props /* Mui ButtonProps */
+}: Props<P>): JSX.Element[] => {
+  return providers?.map((provider) => (
+    <Button
+      key={provider.id}
+      className={className}
+      endIcon={"icon" in provider && provider.icon}
+      onClick={() => handleLogin(provider.id)}
+      {...props}
+    >
+      {provider.name}
+    </Button>
+  ));
+};

package/src/components/Login/components/Buttons/types.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "@mui/material";
+import { ClientSafeProvider } from "next-auth/react";
+import { OAuthProvider } from "../../../../config/entities";
+import { BaseComponentProps } from "../../../../theme/common/entities";
+
+export interface Props<P> extends BaseComponentProps, ButtonProps {
+  handleLogin: (providerId: string) => void;
+  providers?: ClientSafeProvider[] | OAuthProvider<P>[];
+}