@databiosphere/findable-ui 42.0.1 → 43.0.0

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

@@ -0,0 +1,33 @@
+import { TextFieldProps } from "@mui/material";
+
+type TextFieldPropsOptions = {
+  COLOR: typeof COLOR;
+  SIZE: typeof SIZE;
+  VARIANT: typeof VARIANT;
+};
+
+const COLOR: Record<string, TextFieldProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+} as const;
+
+const SIZE: Record<string, TextFieldProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+} as const;
+
+const VARIANT: Record<string, TextFieldProps["variant"]> = {
+  FILLED: "filled",
+  OUTLINED: "outlined",
+  STANDARD: "standard",
+} as const;
+
+export const TEXT_FIELD_PROPS: TextFieldPropsOptions = {
+  COLOR,
+  SIZE,
+  VARIANT,
+};

package/src/theme/common/typography.ts

@@ -72,9 +72,11 @@ const heading = (theme: Theme): TypographyStyle => ({
   fontFamily: "Inter",
   fontSize: "20px",
   fontWeight: 500,
+  letterSpacing: "-0.2px",
   lineHeight: "28px",
   [bpUpSm({ theme })]: {
     fontSize: "24px",
+    letterSpacing: "-0.4px",
     lineHeight: "32px",
   },
 });
@@ -83,9 +85,11 @@ const headingLarge = (theme: Theme): TypographyStyle => ({
   fontFamily: "Inter",
   fontSize: "24px",
   fontWeight: 500,
+  letterSpacing: "-0.4px",
   lineHeight: "32px",
   [bpUpSm({ theme })]: {
-    fontSize: "32px",
+    fontSize: "30px",
+    letterSpacing: "-0.8px",
     lineHeight: "40px",
   },
 });
@@ -97,6 +101,7 @@ const headingSmall = (theme: Theme): TypographyStyle => ({
   lineHeight: "26px",
   [bpUpSm({ theme })]: {
     fontSize: "20px",
+    letterSpacing: "-0.2px",
     lineHeight: "28px",
   },
 });
@@ -109,8 +114,8 @@ const headingXLarge = (theme: Theme): TypographyStyle => ({
   lineHeight: "40px",
   [bpUpSm({ theme })]: {
     fontSize: "40px",
-    letterSpacing: "-0.4px",
-    lineHeight: "48px",
+    letterSpacing: "-1.4px",
+    lineHeight: "56px",
   },
 });
 

package/src/views/ExploreView/exploreView.tsx

@@ -135,6 +135,9 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
             <SearchAllFilters
               categoryViews={categoryViews}
               onFilter={onFilterChange.bind(null, true)}
+              surfaceType={
+                mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU
+              }
             />
           </SidebarTools>
           <Filters

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const AutocompletePopper: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.js

@@ -1,15 +0,0 @@
-import styled from "@emotion/styled";
-import { Popper as MPopper } from "@mui/material";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
-export const AutocompletePopper = styled(MPopper) `
-  ${bpDownMd} {
-    .MuiPaper-root {
-      background-color: ${PALETTE.SMOKE_LIGHT};
-
-      .MuiList-root {
-        margin: 0;
-      }
-    }
-  }
-`;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { SearchAllFilters } from "./searchAllFilters";
-declare const _default: Meta<typeof SearchAllFilters>;
-export default _default;
-type Story = StoryObj<typeof SearchAllFilters>;
-export declare const SearchAllFiltersStory: Story;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.stories.js

@@ -1,82 +0,0 @@
-import React from "react";
-import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
-import { SearchAllFilters } from "./searchAllFilters";
-export default {
-    argTypes: {
-        onFilter: { control: { disable: true } },
-    },
-    component: SearchAllFilters,
-    decorators: [
-        (Story) => (React.createElement("div", { style: { width: 264 } },
-            React.createElement(Story, null))),
-    ],
-    title: "Components/Filter/SearchAllFilters",
-};
-const onFilter = () => {
-    // onFilter function
-};
-const defaultValues = [
-    {
-        count: 1,
-        key: "item1",
-        label: "Item 1",
-        selected: false,
-    },
-    {
-        count: 10,
-        key: "item2",
-        label: "Item 2",
-        selected: false,
-    },
-];
-export const SearchAllFiltersStory = {
-    args: {
-        categoryViews: [
-            {
-                isDisabled: false,
-                key: "genusSpecies",
-                label: "Genus Species",
-                values: [
-                    {
-                        count: 12,
-                        key: "homoSapiens",
-                        label: "Homo sapiens",
-                        selected: false,
-                    },
-                    {
-                        count: 6,
-                        key: "musMusculus",
-                        label: "Mus musculus",
-                        selected: false,
-                    },
-                ],
-            },
-            {
-                isDisabled: false,
-                key: "donorDisease",
-                label: "Donor Disease",
-                values: FilterMenuStory.args?.values || defaultValues,
-            },
-            {
-                isDisabled: true,
-                key: "anatomicalEntity",
-                label: "Anatomical Entity",
-                values: [
-                    {
-                        count: 12,
-                        key: "oralCavity",
-                        label: "oral cavity",
-                        selected: true,
-                    },
-                    {
-                        count: 6,
-                        key: "pancreas",
-                        label: "pancreas",
-                        selected: false,
-                    },
-                ],
-            },
-        ],
-        onFilter: onFilter,
-    },
-};

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.d.ts

@@ -1 +0,0 @@
-export declare const SearchCloseButton: () => JSX.Element;

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.js

@@ -1,13 +0,0 @@
-import { CloseRounded } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
-import React, { Fragment, useContext } from "react";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
-import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
-export const SearchCloseButton = () => {
-    const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
-    const { onClearSearch, onCloseSearch, open, searchTerm } = useContext(ListboxContext);
-    const showButton = open && (bpDownMd || searchTerm);
-    const onClickFn = bpDownMd ? onCloseSearch : onClearSearch;
-    return (React.createElement(Fragment, null, showButton && (React.createElement(IconButton, { onClick: onClickFn, size: "large" },
-        React.createElement(CloseRounded, { fontSize: "small" })))));
-};

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.d.ts

@@ -1,2 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-export declare const SearchAllFiltersSearch: ({ inputProps, InputProps, ...props }: TextFieldProps) => JSX.Element;

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.js

@@ -1,12 +0,0 @@
-import React, { useContext } from "react";
-import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { ListboxContext } from "../SearchAllFilters/searchAllFilters";
-import { InputField } from "./searchAllFiltersSearch.styles";
-export const SearchAllFiltersSearch = ({ inputProps, InputProps, ...props }) => {
-    const { searchTerm } = useContext(ListboxContext);
-    delete inputProps?.value; // Control input value from the search term.
-    return (React.createElement(InputField, { ...props, fullWidth: true, InputProps: {
-            ...(InputProps || {}),
-            startAdornment: React.createElement(SearchIcon, { fontSize: "small" }),
-        }, inputProps: { ...(inputProps || {}), spellCheck: false }, placeholder: "Search all filters...", size: "small", value: searchTerm, variant: "outlined" }));
-};

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.d.ts

@@ -1,5 +0,0 @@
-export declare const InputField: import("@emotion/styled").StyledComponent<{
-    variant?: import("@mui/material").TextFieldVariants | undefined;
-} & Omit<import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.js

@@ -1,34 +0,0 @@
-import styled from "@emotion/styled";
-import { TextField } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-export const InputField = styled(TextField) `
-  && {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .MuiInputBase-root {
-      & ::placeholder {
-        color: ${PALETTE.INK_LIGHT};
-        opacity: 0.8;
-      }
-
-      &.Mui-focused {
-        & ::placeholder {
-          opacity: 0;
-        }
-      }
-    }
-
-    .MuiOutlinedInput-root {
-      &.MuiInputBase-sizeSmall {
-        padding: 0 0 0 12px;
-
-        .MuiAutocomplete-input {
-          color: ${PALETTE.INK_MAIN};
-          padding: 10px 14px 10px 0;
-        }
-      }
-    }
-  }
-`;

package/src/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.ts

@@ -1,16 +0,0 @@
-import styled from "@emotion/styled";
-import { Popper as MPopper } from "@mui/material";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
-
-export const AutocompletePopper = styled(MPopper)`
-  ${bpDownMd} {
-    .MuiPaper-root {
-      background-color: ${PALETTE.SMOKE_LIGHT};
-
-      .MuiList-root {
-        margin: 0;
-      }
-    }
-  }
-`;

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.stories.tsx

@@ -1,92 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
-import { SearchAllFilters } from "./searchAllFilters";
-
-export default {
-  argTypes: {
-    onFilter: { control: { disable: true } },
-  },
-  component: SearchAllFilters,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ width: 264 }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Components/Filter/SearchAllFilters",
-} as Meta<typeof SearchAllFilters>;
-
-type Story = StoryObj<typeof SearchAllFilters>;
-
-const onFilter = (): void => {
-  // onFilter function
-};
-
-const defaultValues = [
-  {
-    count: 1,
-    key: "item1",
-    label: "Item 1",
-    selected: false,
-  },
-  {
-    count: 10,
-    key: "item2",
-    label: "Item 2",
-    selected: false,
-  },
-];
-
-export const SearchAllFiltersStory: Story = {
-  args: {
-    categoryViews: [
-      {
-        isDisabled: false,
-        key: "genusSpecies",
-        label: "Genus Species",
-        values: [
-          {
-            count: 12,
-            key: "homoSapiens",
-            label: "Homo sapiens",
-            selected: false,
-          },
-          {
-            count: 6,
-            key: "musMusculus",
-            label: "Mus musculus",
-            selected: false,
-          },
-        ],
-      },
-      {
-        isDisabled: false,
-        key: "donorDisease",
-        label: "Donor Disease",
-        values: FilterMenuStory.args?.values || defaultValues,
-      },
-      {
-        isDisabled: true,
-        key: "anatomicalEntity",
-        label: "Anatomical Entity",
-        values: [
-          {
-            count: 12,
-            key: "oralCavity",
-            label: "oral cavity",
-            selected: true,
-          },
-          {
-            count: 6,
-            key: "pancreas",
-            label: "pancreas",
-            selected: false,
-          },
-        ],
-      },
-    ],
-    onFilter: onFilter,
-  },
-};

package/src/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.tsx

@@ -1,25 +0,0 @@
-import { CloseRounded } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
-import React, { Fragment, useContext } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../hooks/useBreakpointHelper";
-import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
-
-export const SearchCloseButton = (): JSX.Element => {
-  const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
-  const { onClearSearch, onCloseSearch, open, searchTerm } =
-    useContext(ListboxContext);
-  const showButton = open && (bpDownMd || searchTerm);
-  const onClickFn = bpDownMd ? onCloseSearch : onClearSearch;
-  return (
-    <Fragment>
-      {showButton && (
-        <IconButton onClick={onClickFn} size="large">
-          <CloseRounded fontSize="small" />
-        </IconButton>
-      )}
-    </Fragment>
-  );
-};

package/src/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.ts

@@ -1,35 +0,0 @@
-import styled from "@emotion/styled";
-import { TextField } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-export const InputField = styled(TextField)`
-  && {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .MuiInputBase-root {
-      & ::placeholder {
-        color: ${PALETTE.INK_LIGHT};
-        opacity: 0.8;
-      }
-
-      &.Mui-focused {
-        & ::placeholder {
-          opacity: 0;
-        }
-      }
-    }
-
-    .MuiOutlinedInput-root {
-      &.MuiInputBase-sizeSmall {
-        padding: 0 0 0 12px;
-
-        .MuiAutocomplete-input {
-          color: ${PALETTE.INK_MAIN};
-          padding: 10px 14px 10px 0;
-        }
-      }
-    }
-  }
-`;

package/src/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.tsx

@@ -1,29 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-import React, { useContext } from "react";
-import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { ListboxContext } from "../SearchAllFilters/searchAllFilters";
-import { InputField } from "./searchAllFiltersSearch.styles";
-
-export const SearchAllFiltersSearch = ({
-  inputProps,
-  InputProps,
-  ...props
-}: TextFieldProps): JSX.Element => {
-  const { searchTerm } = useContext(ListboxContext);
-  delete inputProps?.value; // Control input value from the search term.
-  return (
-    <InputField
-      {...props}
-      fullWidth
-      InputProps={{
-        ...(InputProps || {}),
-        startAdornment: <SearchIcon fontSize="small" />,
-      }}
-      inputProps={{ ...(inputProps || {}), spellCheck: false }}
-      placeholder="Search all filters..."
-      size="small"
-      value={searchTerm}
-      variant="outlined"
-    />
-  );
-};