@databiosphere/findable-ui 21.4.0 → 22.0.0

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/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/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/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: "",
+  },
 };

package/src/components/Project/components/Publications/publications.stories.tsx

@@ -1,30 +1,30 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Publications } from "./publications";
 
-export default {
+const meta = {
   component: Publications,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Publications>;
+} satisfies Meta<typeof Publications>;
 
-const PublicationsTemplate: ComponentStory<typeof Publications> = (args) => (
-  <Publications {...args} />
-);
+export default meta;
 
-export const PublicationsStory = PublicationsTemplate.bind({});
-PublicationsStory.args = {
-  publications: [
-    {
-      doi: "10.1126/science.aay3224",
-      officialHcaPublication: true,
-      publicationTitle:
-        "A cell atlas of human thymic development defines T cell repertoire formation.",
-      publicationUrl: "https://www.science.org/doi/10.1126/science.aay3224",
-    },
-    {
-      publicationTitle:
-        "A revised airway epithelial hierarchy includes CFTR-expressing ionocytes.",
-      publicationUrl: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6295155/",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const PublicationsStory: Story = {
+  args: {
+    publications: [
+      {
+        doi: "10.1126/science.aay3224",
+        officialHcaPublication: true,
+        publicationTitle:
+          "A cell atlas of human thymic development defines T cell repertoire formation.",
+        publicationUrl: "https://www.science.org/doi/10.1126/science.aay3224",
+      },
+      {
+        publicationTitle:
+          "A revised airway epithelial hierarchy includes CFTR-expressing ionocytes.",
+        publicationUrl: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6295155/",
+      },
+    ],
+  },
 };

package/src/components/Project/components/SupplementaryLinks/supplementaryLinks.stories.tsx

@@ -1,29 +1,29 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { SupplementaryLinks } from "./supplementaryLinks";
 
-export default {
+const meta = {
   component: SupplementaryLinks,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof SupplementaryLinks>;
+} satisfies Meta<typeof SupplementaryLinks>;
 
-const SupplementaryLinksTemplate: ComponentStory<typeof SupplementaryLinks> = (
-  args
-) => <SupplementaryLinks {...args} />;
+export default meta;
 
-export const SupplementaryLinksStory = SupplementaryLinksTemplate.bind({});
-SupplementaryLinksStory.args = {
-  supplementaryLinks: [
-    "https://castelobranco.shinyapps.io/MSCtrl_CCA_18/",
-    "https://ki.se/en/mbb/oligointernode",
-    "https://cellxgene.cziscience.com/collections/c9706a92-0e5f-46c1-96d8-20e42467f287",
-    "https://github.com/DeprezM/HCA_analysis",
-    "https://tumor-toolbox.broadinstitute.org/",
-    "http://dx.doi.org/10.6019/PXD011655",
-    "https://github.com/agneantanaviciute/colonicepithelium",
-    "https://developmentcellatlas.ncl.ac.uk/datasets/HCA_thymus/",
-    "https://doi.org/10.5281/zenodo.3572421",
-    "https://www.gutcellatlas.org/",
-    "https://czi-pbmc-cite-seq.jax.org/",
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const SupplementaryLinksStory: Story = {
+  args: {
+    supplementaryLinks: [
+      "https://castelobranco.shinyapps.io/MSCtrl_CCA_18/",
+      "https://ki.se/en/mbb/oligointernode",
+      "https://cellxgene.cziscience.com/collections/c9706a92-0e5f-46c1-96d8-20e42467f287",
+      "https://github.com/DeprezM/HCA_analysis",
+      "https://tumor-toolbox.broadinstitute.org/",
+      "http://dx.doi.org/10.6019/PXD011655",
+      "https://github.com/agneantanaviciute/colonicepithelium",
+      "https://developmentcellatlas.ncl.ac.uk/datasets/HCA_thymus/",
+      "https://doi.org/10.5281/zenodo.3572421",
+      "https://www.gutcellatlas.org/",
+      "https://czi-pbmc-cite-seq.jax.org/",
+    ],
+  },
 };

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.ts

@@ -1,14 +1,15 @@
+import * as yup from "yup";
 import { FORM_CONTROL_NAME, FormOption, FormState } from "./entities";
 
-// Validation constraints
-export const CONSTRAINTS = {
-  [FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: { presence: { allowEmpty: true } },
-  [FORM_CONTROL_NAME.DESCRIPTION]: { presence: { allowEmpty: false } },
-  [FORM_CONTROL_NAME.EMAIL]: { email: true, presence: { allowEmpty: false } },
-  [FORM_CONTROL_NAME.NAME]: { presence: { allowEmpty: false } },
-  [FORM_CONTROL_NAME.SUBJECT]: { presence: { allowEmpty: false } },
-  [FORM_CONTROL_NAME.TYPE]: { presence: { allowEmpty: false } },
-};
+// Validation schema
+export const VALIDATION_SCHEMA = yup.object({
+  [FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: yup.string().defined(),
+  [FORM_CONTROL_NAME.DESCRIPTION]: yup.string().required(),
+  [FORM_CONTROL_NAME.EMAIL]: yup.string().email().required(),
+  [FORM_CONTROL_NAME.NAME]: yup.string().required(),
+  [FORM_CONTROL_NAME.SUBJECT]: yup.string().required(),
+  [FORM_CONTROL_NAME.TYPE]: yup.string().required(),
+});
 
 // Default form state.
 export const DEFAULT_FORM_STATE: FormState = {