@databiosphere/findable-ui 0.0.0

package/lib/components/common/StatusIcon/statusIcon.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusCircle = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const statusIcon_1 = require("./statusIcon");
+exports.StatusCircle = styled_1.default.div `
+  border-radius: 50%;
+  box-sizing: content-box;
+  display: grid;
+  height: 72px;
+  place-content: center center;
+  width: 72px;
+
+  // Normal priority.
+  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.NORMAL &&
+    (0, react_1.css) `
+      background-color: ${theme.palette.info.lightest};
+      color: ${theme.palette.info.main};
+    `};
+
+  // Low priority.
+  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.LOW &&
+    (0, react_1.css) `
+      background-color: ${theme.palette.warning.lightest};
+      color: ${theme.palette.warning.main};
+    `};
+
+  // Medium priority.
+  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.MEDIUM &&
+    (0, react_1.css) `
+      background-color: ${theme.palette.warning.light};
+      border: 3px solid white;
+      color: ${theme.palette.warning.main};
+    `};
+
+  // High priority.
+  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.HIGH &&
+    (0, react_1.css) `
+      background-color: ${theme.palette.alert.light};
+      border: 3px solid white;
+      color: ${theme.palette.alert.main};
+    `};
+`;

package/lib/components/common/Tabs/tabs.d.ts

@@ -0,0 +1,19 @@
+import { TabProps as MTabProps, TabsProps as MTabsProps } from "@mui/material";
+import { ReactNode } from "react";
+export declare type TabsValue = MTabsProps["value"];
+export declare type TabValue = MTabProps["value"];
+export declare type OnTabChangeFn = (tabValue: TabValue) => void;
+export interface Tab {
+    count?: string;
+    icon?: MTabProps["icon"];
+    iconPosition?: MTabProps["iconPosition"];
+    label: ReactNode;
+    value: TabValue;
+}
+export interface TabsProps {
+    className?: string;
+    onTabChange: OnTabChangeFn;
+    tabs: Tab[];
+    value: TabsValue;
+}
+export declare const Tabs: ({ className, onTabChange, tabs, value, }: TabsProps) => JSX.Element;

package/lib/components/common/Tabs/tabs.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const tabs_styles_1 = require("./tabs.styles");
+const Tabs = ({ className, onTabChange, tabs, value, }) => {
+    return (react_1.default.createElement(material_1.Tabs, { allowScrollButtonsMobile: true, className: className, onChange: (_, tabValue) => onTabChange(tabValue), ScrollButtonComponent: tabs_styles_1.TabScrollFuzz, value: value }, tabs.map(({ count, icon, iconPosition = "start", label, value: tabValue }, t) => (react_1.default.createElement(tabs_styles_1.Tab, { icon: icon, iconPosition: icon ? iconPosition : undefined, key: `${label}${t}`, label: count ? `${label} (${count})` : label, value: tabValue })))));
+};
+exports.Tabs = Tabs;

package/lib/components/common/Tabs/tabs.styles.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { TabScrollButtonProps } from "@mui/material";
+interface Props {
+    direction: TabScrollButtonProps["direction"];
+    disabled: TabScrollButtonProps["disabled"];
+}
+export declare const TabScrollFuzz: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Tab: import("@emotion/styled").StyledComponent<{
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").TabClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    icon?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    iconPosition?: "top" | "bottom" | "end" | "start" | undefined;
+    label?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    value?: any;
+    wrapped?: boolean | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export {};

package/lib/components/common/Tabs/tabs.styles.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.TabScrollFuzz = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+exports.TabScrollFuzz = styled_1.default.span `
+  height: 100%;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  transition: opacity 300ms ease-in;
+  width: 56px;
+  z-index: 1;
+
+  // Scroll fuzz direction.
+  ${({ direction }) => {
+    return direction === "left"
+        ? (0, react_1.css) `
+          background: linear-gradient(90deg, #f6f6f7 5.88%, #f6f6f700 94.12%);
+          left: 0;
+        `
+        : (0, react_1.css) `
+          background: linear-gradient(270deg, #f6f6f7 5.88%, #f6f6f700 94.12%);
+          right: 0;
+        `;
+}};
+
+  // Disabled scroll fuzz.
+  ${({ disabled }) => {
+    return (disabled &&
+        (0, react_1.css) `
+        opacity: 0;
+        pointer-events: none;
+      `);
+}};
+`;
+exports.Tab = (0, styled_1.default)(material_1.Tab) `
+  .MuiSvgIcon-fontSizeXsmall {
+    align-self: flex-start;
+  }
+`;

package/lib/components/common/Tag/tag.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface TagProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const Tag: ({ children, className }: TagProps) => JSX.Element;

package/lib/components/common/Tag/tag.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const Tag = ({ children, className }) => {
+    return (react_1.default.createElement(material_1.Typography, { className: className, component: "span", variant: "text-body-500" }, children));
+};
+exports.Tag = Tag;

package/lib/components/common/Tag/tag.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./tag").TagProps>;
+export default _default;
+export declare const WarningTagStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./tag").TagProps>;

package/lib/components/common/Tag/tag.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningTagStory = void 0;
+const react_1 = __importDefault(require("react"));
+const tag_1 = require("./tag");
+const tag_styles_1 = require("./tag.styles");
+exports.default = {
+    argTypes: {
+        children: { control: { disabled: true } },
+    },
+    component: tag_1.Tag,
+    title: "Components/Common/Alert/Tag",
+};
+const WarningTagTemplate = (args) => (react_1.default.createElement(tag_styles_1.TagWarning, Object.assign({}, args), args.children));
+exports.WarningTagStory = WarningTagTemplate.bind({});
+exports.WarningTagStory.args = {
+    children: "Please note",
+};

package/lib/components/common/Tag/tag.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const TagDefault: import("@emotion/styled").StyledComponent<import("./tag").TagProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const TagWarning: import("@emotion/styled").StyledComponent<import("./tag").TagProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/common/Tag/tag.styles.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagWarning = exports.TagDefault = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tag_1 = require("./tag");
+exports.TagDefault = (0, styled_1.default)(tag_1.Tag) `
+  background-color: ${({ theme }) => theme.palette.smoke.main};
+  border-radius: 4px;
+  padding: 2px 6px;
+`;
+exports.TagWarning = (0, styled_1.default)(exports.TagDefault) `
+  background-color: ${({ theme }) => theme.palette.warning.light};
+  color: ${({ theme }) => theme.palette.warning.main};
+`;

package/lib/components/common/Title/title.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export declare type HeroTitle = ReactNode;
+export interface TitleProps {
+    className?: string;
+    title: HeroTitle;
+}
+export declare const Title: ({ className, title, ...props }: TitleProps) => JSX.Element;

package/lib/components/common/Title/title.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../theme/common/typography");
+const title_styles_1 = require("./title.styles");
+const Title = (_a) => {
+    var { className, title } = _a, props = __rest(_a, ["className", "title"]) /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */;
+    return (react_1.default.createElement(react_1.default.Fragment, null, typeof title === "string" ? (react_1.default.createElement(title_styles_1.HeroTitle, Object.assign({ className: className, color: "ink.main", component: "h1", variant: typography_1.TEXT_HEADING_LARGE }, props), title)) : (title)));
+};
+exports.Title = Title;

package/lib/components/common/Title/title.styles.d.ts

@@ -0,0 +1 @@
+export declare const HeroTitle: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>;

package/lib/components/common/Title/title.styles.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroTitle = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+exports.HeroTitle = (0, styled_1.default)(material_1.Typography) `
+  justify-self: flex-start;
+  overflow-wrap: break-word;
+`;

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ToggleButtonProps as MToggleButtonProps } from "@mui/material";
+/**
+ * An extension of the basic Mui ToggleButtonGroup component with available ToggleButtonGroup props.
+ */
+export declare type OnToggleButtonFn = () => void;
+declare type ToggleButtonValue = MToggleButtonProps["value"];
+export interface ToggleButton {
+    label: string;
+    onToggle: OnToggleButtonFn;
+    value: ToggleButtonValue;
+}
+export interface ToggleButtonGroupProps {
+    toggleButtons: ToggleButton[];
+}
+export declare const ToggleButtonGroup: ({ toggleButtons, ...props }: ToggleButtonGroupProps) => JSX.Element;
+export {};

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButtonGroup = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+/**
+ * Returns the selected toggle button action.
+ * @param toggleButtons - Toggle buttons.
+ * @param toggleValue - Selected value within the group.
+ * @returns the selected toggle button action.
+ */
+function getSelectedToggleButtonAction(toggleButtons, toggleValue) {
+    var _a;
+    return (_a = toggleButtons.find(({ value }) => value === toggleValue)) === null || _a === void 0 ? void 0 : _a.onToggle;
+}
+const ToggleButtonGroup = (_a) => {
+    var _b;
+    var { toggleButtons } = _a, props = __rest(_a, ["toggleButtons"]);
+    const [toggleValue, setToggleValue] = (0, react_1.useState)((_b = toggleButtons[0]) === null || _b === void 0 ? void 0 : _b.value);
+    /**
+     * Callback fired when toggle button value changes.
+     * - Sets state toggleValue to selected value.
+     * - Executes onToggle action as defined by selected toggle button.
+     * @param mouseEvent - The event source of the callback.
+     * @param newToggleValue - The value of the selected toggle button.
+     * @param onToggleFn - The selected toggle button action.
+     */
+    const onChangeToggleButton = (mouseEvent, newToggleValue, onToggleFn) => {
+        if (newToggleValue) {
+            setToggleValue(newToggleValue);
+            onToggleFn && onToggleFn();
+        }
+    };
+    return (react_1.default.createElement(material_1.ToggleButtonGroup, Object.assign({ exclusive: true, onChange: (e, value) => onChangeToggleButton(e, value, getSelectedToggleButtonAction(toggleButtons, value)), value: toggleValue }, props), toggleButtons.map(({ label, value }) => (react_1.default.createElement(material_1.ToggleButton, { key: label, value: value }, label)))));
+};
+exports.ToggleButtonGroup = ToggleButtonGroup;

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./toggleButtonGroup").ToggleButtonGroupProps>;
+export default _default;
+export declare const ToggleButtonGroupStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./toggleButtonGroup").ToggleButtonGroupProps>;

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButtonGroupStory = void 0;
+const react_1 = __importDefault(require("react"));
+const toggleButtonGroup_1 = require("./toggleButtonGroup");
+exports.default = {
+    argTypes: {
+        toggleButtons: { table: { disable: true } },
+    },
+    component: toggleButtonGroup_1.ToggleButtonGroup,
+    parameters: {
+        layout: "centered",
+    },
+    title: "Components/Common/ButtonGroup",
+};
+const ToggleButtonGroupTemplate = (args) => react_1.default.createElement(toggleButtonGroup_1.ToggleButtonGroup, Object.assign({}, args));
+exports.ToggleButtonGroupStory = ToggleButtonGroupTemplate.bind({});
+exports.ToggleButtonGroupStory.args = {
+    toggleButtons: [
+        {
+            label: "Exact Match (243)",
+            onToggle: () => {
+                // onToggle function
+            },
+            value: "exact-match",
+        },
+        {
+            label: "Related (33)",
+            onToggle: () => {
+                // onToggle function
+            },
+            value: "related-match",
+        },
+    ],
+};

package/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface TypographyWordBreakProps {
+    children: ReactNode;
+}
+export declare const TypographyWordBreak: ({ children, ...props }: TypographyWordBreakProps) => JSX.Element;

package/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyWordBreak = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const TypographyWordBreak = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]) /* Spread props to allow for Typography specific props e.g. "color". */;
+    return (react_1.default.createElement(material_1.Typography, Object.assign({ component: "span", sx: { wordBreak: "break-word" }, variant: "inherit" }, props), children));
+};
+exports.TypographyWordBreak = TypographyWordBreak;

package/lib/config/config.d.ts

@@ -0,0 +1,11 @@
+import { SiteConfig } from "./entities";
+/**
+ * Sets application config.
+ * @param config - Application config.
+ */
+export declare function setConfig(config: SiteConfig): void;
+/**
+ * Returns application config.
+ * @returns application config.
+ */
+export declare function getConfig(): SiteConfig;

package/lib/config/config.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = exports.setConfig = void 0;
+let dxConfig;
+/**
+ * Sets application config.
+ * @param config - Application config.
+ */
+function setConfig(config) {
+    dxConfig = config;
+}
+exports.setConfig = setConfig;
+/**
+ * Returns application config.
+ * @returns application config.
+ */
+function getConfig() {
+    return dxConfig;
+}
+exports.getConfig = getConfig;