@databiosphere/findable-ui 21.4.0 → 23.0.0

package/src/components/Layout/components/Outline/outline.tsx

@@ -1,72 +1,35 @@
-import { useRouter } from "next/router";
-import React, { ElementType, SyntheticEvent, useEffect, useState } from "react";
-import { DEFAULT_TAB_VALUE } from "./common/constants";
-import { ContentsTabProps } from "./components/ContentsTab/contentsTab";
-import { Tab, Tabs } from "./outline.styles";
-
-export interface OutlineItem {
-  depth: number;
-  hash: string;
-  value: string;
-}
-
-export interface OutlineProps {
-  className?: string;
-  Contents: ElementType<ContentsTabProps>;
-  outline: OutlineItem[];
-}
+import React from "react";
+import { DEFAULT_TAB_VALUE } from "./hooks/UseTabs/constants";
+import { useTabs } from "./hooks/UseTabs/hook";
+import { StyledTab, StyledTabs } from "./outline.styles";
+import { OutlineProps } from "./types";
 
 export const Outline = ({
   className,
   Contents,
   outline,
-  ...props /* Spread props to allow for Mui Tabs specific prop overrides. */
-}: OutlineProps): JSX.Element => {
-  const { asPath, push } = useRouter();
-  const [activeTab, setActiveTab] = useState<string>("");
-
-  // Callback fired when selected tab value changes.
-  const handleChange = (
-    _event: SyntheticEvent<Element, Event>,
-    tabValue: string
-  ): void => {
-    push(`#${tabValue}`);
-  };
-
-  // Update active tab when path changes.
-  useEffect(() => {
-    setActiveTab(getActiveTab(outline, asPath));
-  }, [asPath, outline]);
-
+  ...props /* MuiTabsProps */
+}: OutlineProps): JSX.Element | null => {
+  const { indicatorColor, onChange, orientation, value } = useTabs(outline);
   return (
-    <Tabs
+    <StyledTabs
       className={className}
-      indicatorColor={activeTab ? "primary" : "transparent"}
-      onChange={handleChange}
-      orientation="vertical"
-      value={activeTab}
+      indicatorColor={indicatorColor}
+      onChange={onChange}
+      orientation={orientation}
+      value={value}
       {...props}
     >
       <Contents value={DEFAULT_TAB_VALUE} />
-      {outline.map(({ depth, hash, value }) => (
-        <Tab key={hash} depth={depth} label={value} value={hash} />
+      {outline.map(({ depth, disabled, hash, value }) => (
+        <StyledTab
+          depth={depth}
+          disabled={disabled}
+          key={hash}
+          label={value}
+          value={hash}
+        />
       ))}
-    </Tabs>
+    </StyledTabs>
   );
 };
-
-/**
- * Initializes active tab.
- * @param outline - Outline items.
- * @param asPath - Current path.
- * @returns active tab.
- */
-function getActiveTab(outline: OutlineItem[], asPath: string): string {
-  if (asPath.includes("#")) {
-    const hashLink = asPath.split("#")[1];
-    if (outline.some(({ hash }) => hash === hashLink)) {
-      return hashLink;
-    }
-  }
-  return DEFAULT_TAB_VALUE;
-}

package/src/components/Layout/components/Outline/types.ts

@@ -0,0 +1,16 @@
+import { TabsProps } from "@mui/material";
+import { ElementType } from "react";
+import { BaseComponentProps } from "../../../types";
+import { ContentsTabProps } from "./components/ContentsTab/types";
+
+export interface OutlineItem {
+  depth: number;
+  disabled?: boolean;
+  hash: string;
+  value: string;
+}
+
+export interface OutlineProps extends BaseComponentProps, TabsProps {
+  Contents: ElementType<ContentsTabProps>;
+  outline: OutlineItem[];
+}

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/components/SidebarPositioner/sidebarPositioner.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
-import { SIDEBAR_POSITIONER } from "../../../../../../common/selectors";
-import { useLayoutState } from "../../../../../../hooks/useLayoutState";
+import { SELECTOR } from "../../../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../../../providers/layoutDimensions/hook";
 import { SidebarPositioner as Positioner } from "./sidebarPositioner.styles";
 
 export interface SidebarPositionerProps {
@@ -10,11 +10,12 @@ export interface SidebarPositionerProps {
 export const SidebarPositioner = ({
   children,
 }: SidebarPositionerProps): JSX.Element => {
-  const {
-    layoutState: { headerHeight },
-  } = useLayoutState();
+  const { dimensions } = useLayoutDimensions();
   return (
-    <Positioner headerHeight={headerHeight} id={SIDEBAR_POSITIONER}>
+    <Positioner
+      headerHeight={dimensions.header.height}
+      id={SELECTOR.SIDEBAR_POSITIONER}
+    >
       {children}
     </Positioner>
   );

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/Section/components/Warning/warning.tsx

@@ -1,7 +1,6 @@
 import { Typography, TypographyProps } from "@mui/material";
 import React from "react";
-import { COLOR } from "../../../../../../styles/common/mui/typography";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { BaseComponentProps } from "../../../../../types";
 
 export const Warning = ({
@@ -13,9 +12,9 @@ export const Warning = ({
   return (
     <Typography
       className={className}
-      color={COLOR.INK_LIGHT}
+      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
       mt={6}
-      variant={TEXT_BODY_SMALL_400}
+      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
       {...props}
     >
       {children}

package/src/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories.tsx

@@ -1,34 +1,33 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { CollaboratingOrganizations } from "./collaboratingOrganizations";
 
-export default {
+const meta = {
   argTypes: {
-    collaboratingOrganizations: { control: "array" },
+    collaboratingOrganizations: { control: "object" },
   },
   component: CollaboratingOrganizations,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof CollaboratingOrganizations>;
+} satisfies Meta<typeof CollaboratingOrganizations>;
 
-const CollaboratingOrganizationsTemplate: ComponentStory<
-  typeof CollaboratingOrganizations
-> = (args) => <CollaboratingOrganizations {...args} />;
+export default meta;
 
-export const CollaboratingOrganizationsStory =
-  CollaboratingOrganizationsTemplate.bind({});
-CollaboratingOrganizationsStory.args = {
-  collaboratingOrganizations: [
-    {
-      citation: 1,
-      name: "The Jackson Laboratory",
-    },
-    {
-      citation: 2,
-      name: "The New York Genome Center",
-    },
-    {
-      citation: 3,
-      name: "Weill Cornell Medicine",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const CollaboratingOrganizationsStory: Story = {
+  args: {
+    collaboratingOrganizations: [
+      {
+        citation: 1,
+        name: "The Jackson Laboratory",
+      },
+      {
+        citation: 2,
+        name: "The New York Genome Center",
+      },
+      {
+        citation: 3,
+        name: "Weill Cornell Medicine",
+      },
+    ],
+  },
 };

package/src/components/Project/components/Contacts/contacts.stories.tsx

@@ -1,31 +1,31 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Contacts } from "./contacts";
 
-export default {
+const meta = {
   argTypes: {
-    contacts: { control: "array" },
+    contacts: { control: "object" },
   },
   component: Contacts,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Contacts>;
+} satisfies Meta<typeof Contacts>;
 
-const ContactsTemplate: ComponentStory<typeof Contacts> = (args) => (
-  <Contacts {...args} />
-);
+export default meta;
 
-export const ContactsStory = ContactsTemplate.bind({});
-ContactsStory.args = {
-  contacts: [
-    {
-      email: "gervaise.henry@utsouthwestern.edu",
-      institution: "UT Southwestern",
-      name: "Gervaise H Henry",
-    },
-    {
-      email: "poppy@utsouthwestern.edu",
-      institution: "UT Southwestern",
-      name: "Poppy Rose Roberts",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const ContactsStory: Story = {
+  args: {
+    contacts: [
+      {
+        email: "gervaise.henry@utsouthwestern.edu",
+        institution: "UT Southwestern",
+        name: "Gervaise H Henry",
+      },
+      {
+        email: "poppy@utsouthwestern.edu",
+        institution: "UT Southwestern",
+        name: "Poppy Rose Roberts",
+      },
+    ],
+  },
 };

package/src/components/Project/components/Contributors/contributors.stories.tsx

@@ -1,38 +1,38 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Contributors } from "./contributors";
 
-export default {
+const meta = {
   component: Contributors,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Contributors>;
+} satisfies Meta<typeof Contributors>;
 
-const ContributorsTemplate: ComponentStory<typeof Contributors> = (args) => (
-  <Contributors {...args} />
-);
+export default meta;
 
-export const ContributorsStory = ContributorsTemplate.bind({});
-ContributorsStory.args = {
-  contributors: [
-    {
-      citation: 1,
-      name: "Rose R Reginold",
-      role: undefined,
-    },
-    {
-      citation: 1,
-      name: "Frank D Dirk",
-      role: "Project Coordinator",
-    },
-    {
-      citation: 2,
-      name: "Marcelo Freire",
-      role: "Principal Investigator",
-    },
-    {
-      citation: 3,
-      name: "Nathan Lawlor",
-      role: "Computational Scientist",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const ContributorsStory: Story = {
+  args: {
+    contributors: [
+      {
+        citation: 1,
+        name: "Rose R Reginold",
+        role: undefined,
+      },
+      {
+        citation: 1,
+        name: "Frank D Dirk",
+        role: "Project Coordinator",
+      },
+      {
+        citation: 2,
+        name: "Marcelo Freire",
+        role: "Principal Investigator",
+      },
+      {
+        citation: 3,
+        name: "Nathan Lawlor",
+        role: "Computational Scientist",
+      },
+    ],
+  },
 };

package/src/components/Project/components/DataCurators/dataCurators.stories.tsx

@@ -1,20 +1,20 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { DataCurators } from "./dataCurators";
 
-export default {
+const meta = {
   argTypes: {
-    dataCurators: { control: "array" },
+    dataCurators: { control: "object" },
   },
   component: DataCurators,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof DataCurators>;
+} satisfies Meta<typeof DataCurators>;
 
-const DataCuratorsTemplate: ComponentStory<typeof DataCurators> = (args) => (
-  <DataCurators {...args} />
-);
+export default meta;
 
-export const DataCuratorsStory = DataCuratorsTemplate.bind({});
-DataCuratorsStory.args = {
-  dataCurators: ["Schwartz Rachel", "William Sullivan", "Parisa Nejad"],
+type Story = StoryObj<typeof meta>;
+
+export const DataCuratorsStory: Story = {
+  args: {
+    dataCurators: ["Schwartz Rachel", "William Sullivan", "Parisa Nejad"],
+  },
 };

package/src/components/Project/components/DataReleasePolicy/dataReleasePolicy.stories.tsx

@@ -1,14 +1,13 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { DataReleasePolicy } from "./dataReleasePolicy";
 
-export default {
+const meta = {
   component: DataReleasePolicy,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof DataReleasePolicy>;
+} satisfies Meta<typeof DataReleasePolicy>;
 
-const DataReleasePolicyTemplate: ComponentStory<
-  typeof DataReleasePolicy
-> = () => <DataReleasePolicy />;
+export default meta;
 
-export const DataReleasePolicyStory = DataReleasePolicyTemplate.bind({});
+type Story = StoryObj<typeof meta>;
+
+export const DataReleasePolicyStory: Story = {};

package/src/components/Project/components/Description/description.stories.tsx

@@ -1,18 +1,18 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Description } from "./description";
 
-export default {
+const meta = {
   component: Description,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Description>;
+} satisfies Meta<typeof Description>;
 
-const DescriptionTemplate: ComponentStory<typeof Description> = (args) => (
-  <Description {...args} />
-);
+export default meta;
 
-export const DescriptionStory = DescriptionTemplate.bind({});
-DescriptionStory.args = {
-  projectDescription:
-    "Although the function of the mammalian pancreas hinges on complex interactions of distinct cell types, gene expression profiles have primarily been described with bulk mixtures. Here we implemented a droplet-based, single-cell RNA-seq method to determine the transcriptomes of over 12,000 individual pancreatic cells from four human donors and two mouse strains. Cells could be divided into 15 clusters that matched previously characterized cell types: all endocrine cell types, including rare epsilon-cells; exocrine cell types; vascular cells; Schwann cells; quiescent and activated stellate cells; and four types of immune cells. We detected subpopulations of ductal cells with distinct expression profiles and validated their existence with immuno-histochemistry stains. Moreover, among human beta- cells, we detected heterogeneity in the regulation of genes relating to functional maturation and levels of ER stress. Finally, we deconvolved bulk gene expression samples using the single-cell data to detect disease-associated differential expression. Our dataset provides a resource for the discovery of novel cell type-specific transcription factors, signaling receptors, and medically relevant genes.",
+type Story = StoryObj<typeof meta>;
+
+export const DescriptionStory: Story = {
+  args: {
+    projectDescription:
+      "Although the function of the mammalian pancreas hinges on complex interactions of distinct cell types, gene expression profiles have primarily been described with bulk mixtures. Here we implemented a droplet-based, single-cell RNA-seq method to determine the transcriptomes of over 12,000 individual pancreatic cells from four human donors and two mouse strains. Cells could be divided into 15 clusters that matched previously characterized cell types: all endocrine cell types, including rare epsilon-cells; exocrine cell types; vascular cells; Schwann cells; quiescent and activated stellate cells; and four types of immune cells. We detected subpopulations of ductal cells with distinct expression profiles and validated their existence with immuno-histochemistry stains. Moreover, among human beta- cells, we detected heterogeneity in the regulation of genes relating to functional maturation and levels of ER stress. Finally, we deconvolved bulk gene expression samples using the single-cell data to detect disease-associated differential expression. Our dataset provides a resource for the discovery of novel cell type-specific transcription factors, signaling receptors, and medically relevant genes.",
+  },
 };

package/src/components/Project/components/Details/details.stories.tsx

@@ -1,5 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { KeyValues } from "../../../common/KeyValuePairs/keyValuePairs";
 import { Details } from "./details";
 
@@ -11,21 +10,22 @@ const details: KeyValues = new Map([
   ["Anatomical Entity", "eye"],
 ]);
 
-export default {
+const meta = {
   argTypes: {
     keyValuePairs: { control: "object" },
     title: { control: "text" },
   },
   component: Details,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Details>;
+} satisfies Meta<typeof Details>;
 
-const DetailsTemplate: ComponentStory<typeof Details> = (args) => (
-  <Details {...args} />
-);
+export default meta;
 
-export const DetailsStory = DetailsTemplate.bind({});
-DetailsStory.args = {
-  keyValuePairs: details,
-  title: "",
+type Story = StoryObj<typeof meta>;
+
+export const DetailsStory: Story = {
+  args: {
+    keyValuePairs: details,
+    title: "",
+  },
 };