@databiosphere/findable-ui 21.4.0 → 22.0.0

package/src/components/Filter/components/FilterMenu/filterMenu.stories.tsx

@@ -1,15 +1,13 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { FilterMenu } from "./filterMenu";
 
-export default {
+const meta = {
   argTypes: {
-    argTypes: {
-      categoryKey: { control: { disable: true } },
-      menuWidth: { control: "number" },
-      onFilter: { control: { disable: true } },
-      values: { control: { disable: true } },
-    },
+    categoryKey: { control: { disable: true } },
+    menuWidth: { control: "number" },
+    onFilter: { control: { disable: true } },
+    values: { control: { disable: true } },
   },
   component: FilterMenu,
   decorators: [
@@ -20,106 +18,111 @@ export default {
     ),
   ],
   title: "Components/Filter/FilterMenu",
-} as ComponentMeta<typeof FilterMenu>;
+} satisfies Meta<typeof FilterMenu>;
 
-const FilterMenuTemplate: ComponentStory<typeof FilterMenu> = (args) => (
-  <FilterMenu {...args} />
-);
+export default meta;
 
-export const FilterMenuStory = FilterMenuTemplate.bind({});
-FilterMenuStory.args = {
-  categoryKey: "donorDisease",
-  menuWidth: 312,
-  values: [
-    {
-      count: 312,
-      key: "normal",
-      label: "Normal",
-      selected: false,
-    },
-    {
-      count: 0,
-      key: "abscess",
-      label: "abscess",
-      selected: false,
-    },
-    {
-      count: 3,
-      key: "acoustic neuroma",
-      label: "acoustic neuroma",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "acute kidney failure",
-      label: "acute kidney failure",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "acute kidney tubular necrosis",
-      label: "acute kidney tubular necrosis",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "alcohol abuse",
-      label: "alcohol abuse",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "Alzheimer disease",
-      label: "Alzheimer disease",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "amyotrophic lateral sclerosis",
-      label: "amyotrophic lateral sclerosis",
-      selected: true,
-    },
-    {
-      count: 1,
-      key: "anxiety disorder",
-      label: "anxiety disorder",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "aplastic anemia",
-      label: "aplastic anemia",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "arthritis",
-      label: "arthritis",
-      selected: true,
-    },
-    {
-      count: 3,
-      key: "asthma",
-      label: "asthma",
-      selected: true,
-    },
-    {
-      count: 222,
-      key: "atherosclerosis",
-      label: "atherosclerosis",
-      selected: false,
-    },
-    {
-      count: 222,
-      key: "atrial fibrillation",
-      label: "atrial fibrillation",
-      selected: true,
-    },
-    {
-      count: 222,
-      key: "benign prostatic hyperplasia",
-      label: "benign prostatic hyperplasia",
-      selected: true,
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const FilterMenuStory: Story = {
+  args: {
+    categoryKey: "donorDisease",
+    categoryLabel: "Donor Disease",
+    isFilterDrawer: false,
+    menuWidth: 312,
+    onCloseFilter: () => {},
+    onFilter: () => {},
+    values: [
+      {
+        count: 312,
+        key: "normal",
+        label: "Normal",
+        selected: false,
+      },
+      {
+        count: 0,
+        key: "abscess",
+        label: "abscess",
+        selected: false,
+      },
+      {
+        count: 3,
+        key: "acoustic neuroma",
+        label: "acoustic neuroma",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "acute kidney failure",
+        label: "acute kidney failure",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "acute kidney tubular necrosis",
+        label: "acute kidney tubular necrosis",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "alcohol abuse",
+        label: "alcohol abuse",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "Alzheimer disease",
+        label: "Alzheimer disease",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "amyotrophic lateral sclerosis",
+        label: "amyotrophic lateral sclerosis",
+        selected: true,
+      },
+      {
+        count: 1,
+        key: "anxiety disorder",
+        label: "anxiety disorder",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "aplastic anemia",
+        label: "aplastic anemia",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "arthritis",
+        label: "arthritis",
+        selected: true,
+      },
+      {
+        count: 3,
+        key: "asthma",
+        label: "asthma",
+        selected: true,
+      },
+      {
+        count: 222,
+        key: "atherosclerosis",
+        label: "atherosclerosis",
+        selected: false,
+      },
+      {
+        count: 222,
+        key: "atrial fibrillation",
+        label: "atrial fibrillation",
+        selected: true,
+      },
+      {
+        count: 222,
+        key: "benign prostatic hyperplasia",
+        label: "benign prostatic hyperplasia",
+        selected: true,
+      },
+    ],
+  },
 };

package/src/components/Filter/components/FilterTag/filterTag.stories.tsx

@@ -1,22 +1,23 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { FilterTag } from "./filterTag";
 
-export default {
+const meta = {
   argTypes: {
     label: { control: "text" },
     superseded: { control: "boolean" },
   },
   component: FilterTag,
   title: "Components/Filter/FilterTag",
-} as ComponentMeta<typeof FilterTag>;
+} satisfies Meta<typeof FilterTag>;
 
-const FilterTagTemplate: ComponentStory<typeof FilterTag> = (args) => (
-  <FilterTag {...args} />
-);
+export default meta;
 
-export const FilterTagStory = FilterTagTemplate.bind({});
-FilterTagStory.args = {
-  label: "Male",
-  superseded: false,
+type Story = StoryObj<typeof meta>;
+
+export const FilterTagStory: Story = {
+  args: {
+    label: "Male",
+    onRemove: () => {},
+    superseded: false,
+  },
 };

package/src/components/Filter/components/FilterTags/filterTags.stories.tsx

@@ -1,8 +1,12 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { FilterTags } from "./filterTags";
 
-export default {
+const onRemove = (): void => {
+  // onRemove function
+};
+
+const meta = {
   argTypes: {
     tags: { control: { disable: true } },
   },
@@ -15,48 +19,45 @@ export default {
     ),
   ],
   title: "Components/Filter/FilterTags",
-} as ComponentMeta<typeof FilterTags>;
+} satisfies Meta<typeof FilterTags>;
 
-const FilterTagsTemplate: ComponentStory<typeof FilterTags> = (args) => (
-  <FilterTags {...args} />
-);
+export default meta;
 
-const onRemove = (): void => {
-  // onRemove function
-};
+type Story = StoryObj<typeof meta>;
 
-export const FilterTagsStory = FilterTagsTemplate.bind({});
-FilterTagsStory.args = {
-  tags: [
-    {
-      label: "Normal",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "abscess",
-      onRemove: onRemove,
-      superseded: true,
-    },
-    {
-      label: "acoustic neuroma",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "acute kidney failure",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "acute kidney tubular necrosis",
-      onRemove: onRemove,
-      superseded: false,
-    },
-    {
-      label: "alcohol abuse",
-      onRemove: onRemove,
-      superseded: false,
-    },
-  ],
+export const FilterTagsStory: Story = {
+  args: {
+    tags: [
+      {
+        label: "Normal",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "abscess",
+        onRemove: onRemove,
+        superseded: true,
+      },
+      {
+        label: "acoustic neuroma",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "acute kidney failure",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "acute kidney tubular necrosis",
+        onRemove: onRemove,
+        superseded: false,
+      },
+      {
+        label: "alcohol abuse",
+        onRemove: onRemove,
+        superseded: false,
+      },
+    ],
+  },
 };

package/src/components/Index/components/AzulFileDownload/azulFileDownload.stories.tsx

@@ -1,17 +1,20 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { AzulFileDownload } from "./azulFileDownload";
 
-export default {
+const meta = {
   component: AzulFileDownload,
   title: "Components/Common/IconButton/Download",
-} as ComponentMeta<typeof AzulFileDownload>;
+} satisfies Meta<typeof AzulFileDownload>;
 
-const AzulFileDownloadTemplate: ComponentStory<typeof AzulFileDownload> = (
-  args
-) => <AzulFileDownload {...args} />;
+export default meta;
 
-export const AzulFileDownloadStory = AzulFileDownloadTemplate.bind({});
-AzulFileDownloadStory.args = {
-  url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+type Story = StoryObj<typeof meta>;
+
+export const AzulFileDownloadStory: Story = {
+  args: {
+    entityName: "",
+    relatedEntityId: "",
+    relatedEntityName: "",
+    url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+  },
 };

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