@databiosphere/findable-ui 0.0.0

package/lib/components/Index/components/Hero/hero.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroStory = void 0;
+const react_1 = __importDefault(require("react"));
+const summaries_stories_1 = require("./components/Summaries/summaries.stories");
+const hero_1 = require("./hero");
+exports.default = {
+    argTypes: {
+        Summaries: { table: { disable: true } },
+        title: { table: { disable: true } },
+    },
+    component: hero_1.Hero,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Hero/ExploreView",
+};
+const HeroTemplate = (args) => react_1.default.createElement(hero_1.Hero, Object.assign({}, args));
+exports.HeroStory = HeroTemplate.bind({});
+exports.HeroStory.args = {
+    Summaries: react_1.default.createElement(summaries_stories_1.SummariesStory, Object.assign({}, summaries_stories_1.SummariesStory.args)),
+    title: "Data Explorer",
+};

package/lib/components/Index/components/Hero/hero.styles.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+interface Props {
+    buttonWidget: boolean;
+}
+export declare const HeroLayout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Widgets: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SummaryWidget: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/lib/components/Index/components/Hero/hero.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SummaryWidget = exports.Widgets = exports.HeroLayout = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
+exports.HeroLayout = styled_1.default.div `
+  align-items: center;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr;
+  padding: 0 16px;
+
+  ${breakpoints_1.mediaTabletUp} {
+    grid-template-columns: 1fr auto;
+    padding: 0;
+  }
+`;
+exports.Widgets = styled_1.default.div `
+  align-items: center;
+  display: flex;
+  height: 60px;
+
+  ${breakpoints_1.mediaTabletUp} {
+    height: 40px;
+    justify-self: flex-start;
+  }
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    grid-column: 2;
+    justify-self: flex-end;
+  }
+`;
+exports.SummaryWidget = styled_1.default.div `
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-radius: 4px;
+  display: flex;
+  gap: 0 8px;
+  flex: 1;
+  height: inherit;
+  padding: 12px 16px;
+
+  ${breakpoints_1.mediaTabletUp} {
+    border-radius: ${({ buttonWidget }) => buttonWidget ? "4px 0 0 4px" : "4px"};
+    flex: none;
+  }
+`;

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TooltipProps as MTooltipProps } from "@mui/material";
+export interface TooltipProps extends MTooltipProps {
+    className?: string;
+}
+export declare const Tooltip: ({ children, className, title, ...props }: TooltipProps) => JSX.Element;

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.js

@@ -0,0 +1,93 @@
+"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.Tooltip = void 0;
+const material_1 = require("@mui/material");
+const core_1 = require("@popperjs/core");
+const react_1 = __importStar(require("react"));
+const tooltip_styles_1 = require("./tooltip.styles");
+const DEFAULT_FLIP_MODIFIER = {
+    enabled: true,
+    name: "flip",
+    options: {
+        fallbackPlacements: ["bottom", "right", "left"],
+    },
+};
+const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
+    enabled: true,
+    name: "preventOverflow",
+    options: {
+        padding: 16,
+    },
+};
+const Tooltip = (_a) => {
+    var { children, className, title } = _a, props = __rest(_a, ["children", "className", "title"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
+    const [maxHeight, setMaxHeight] = (0, react_1.useState)();
+    const modifiers = (0, react_1.useMemo)(() => [
+        {
+            enabled: true,
+            fn: ({ state }) => setMaxHeight(calculateMaxHeight(state)),
+            name: "maxHeight",
+            phase: "main",
+            requiresIfExists: ["offset"],
+        },
+        DEFAULT_FLIP_MODIFIER,
+        DEFAULT_PREVENT_OVERFLOW_MODIFIER,
+    ], []);
+    return (react_1.default.createElement(material_1.Tooltip, Object.assign({ arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+            popper: { modifiers },
+            tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
+        }, title: react_1.default.createElement(tooltip_styles_1.TooltipContent, null, title) }, props), children));
+};
+exports.Tooltip = Tooltip;
+/**
+ * Calculate the max height of the tooltip based on the current popper modifier state.
+ * @param state - Popper modifier state.
+ * @returns tooltip maximum height.
+ */
+function calculateMaxHeight(state) {
+    const overflow = (0, core_1.detectOverflow)(state);
+    const { placement } = state;
+    if (placement === "left" || placement === "right") {
+        return window.innerHeight - 32;
+    }
+    if (placement === "top") {
+        return state.rects.popper.height - overflow.top - 24;
+    }
+    if (placement === "bottom") {
+        return state.rects.popper.height - overflow.bottom - 24;
+    }
+}

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.TooltipContent = styled_1.default.span `
+  overflow: scroll;
+  overscroll-behavior: none;
+  padding: 8px 12px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/lib/components/Index/components/NTag/nTag.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+export interface NTagProps {
+    className?: string;
+    Tag: ReactElement;
+    TooltipTitle: ReactElement;
+}
+export declare const NTag: ({ className, Tag, TooltipTitle, ...props }: NTagProps) => JSX.Element;

package/lib/components/Index/components/NTag/nTag.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.NTag = void 0;
+const react_1 = __importDefault(require("react"));
+const tooltip_1 = require("./components/Tooltip/tooltip");
+const NTag = (_a) => {
+    var { className, Tag, TooltipTitle } = _a, props = __rest(_a, ["className", "Tag", "TooltipTitle"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
+    return (react_1.default.createElement(tooltip_1.Tooltip, Object.assign({ className: className, title: TooltipTitle }, props), Tag));
+};
+exports.NTag = NTag;

package/lib/components/Index/components/NTagCell/nTagCell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type MetadataValue = string;
+export interface NTagCellProps {
+    label: string;
+    values: MetadataValue[];
+}
+export declare const NTagCell: ({ label, values }: NTagCellProps) => JSX.Element;

package/lib/components/Index/components/NTagCell/nTagCell.js

@@ -0,0 +1,52 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NTagCell = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const nTag_1 = require("../NTag/nTag");
+// Template constants
+const MAX_DISPLAYABLE_VALUES = 1;
+/**
+ * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
+ * @param metadataValues - List of metadata values.
+ * @returns the metadata values in a string, each value joined by a comma.
+ */
+function stringifyMetadataValues(metadataValues) {
+    return metadataValues.join(", ");
+}
+/**
+ * Renders tag for NTag component.
+ * Tooltip children require forward ref.
+ */
+const Tag = (0, react_1.forwardRef)(function Tag(props, ref) {
+    return react_1.default.createElement(material_1.Chip, Object.assign({ ref: ref }, props));
+});
+const NTagCell = ({ label, values }) => {
+    const metadataCount = values.length;
+    const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
+    return (react_1.default.createElement(react_1.default.Fragment, null, showNTag ? (react_1.default.createElement(nTag_1.NTag, { Tag: react_1.default.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: react_1.default.createElement(material_1.Typography, { display: "block", variant: "text-body-small-400" }, stringifyMetadataValues(values)) })) : (values.map((value, v) => react_1.default.createElement("div", { key: `${value}${v}` }, value)))));
+};
+exports.NTagCell = NTagCell;

package/lib/components/Index/components/NTagCell/nTagCell.stories.d.ts

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

package/lib/components/Index/components/NTagCell/nTagCell.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NTagCellStory = void 0;
+const react_1 = __importDefault(require("react"));
+const nTagCell_1 = require("./nTagCell");
+exports.default = {
+    argTypes: {
+        label: { control: "text" },
+        values: { control: "array" },
+    },
+    component: nTagCell_1.NTagCell,
+    title: "Components/Table/Cell/NTagCell",
+};
+const NTagCellTemplate = (args) => (react_1.default.createElement(nTagCell_1.NTagCell, Object.assign({}, args)));
+exports.NTagCellStory = NTagCellTemplate.bind({});
+exports.NTagCellStory.args = {
+    label: "species",
+    values: ["Homo sapiens", "Mus musculus"],
+};

package/lib/components/Index/components/TitleCell/titleCell.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { LinkProps } from "../../../Links/components/Link/link";
+export interface TitleCellProps extends LinkProps {
+    title: ReactNode;
+}
+export declare const TitleCell: ({ title, ...props }: TitleCellProps) => JSX.Element;

package/lib/components/Index/components/TitleCell/titleCell.js

@@ -0,0 +1,29 @@
+"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.TitleCell = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../theme/common/typography");
+const link_1 = require("../../../Links/components/Link/link");
+const titleCell_styles_1 = require("./titleCell.styles");
+const TitleCell = (_a) => {
+    var { title } = _a, props = __rest(_a, ["title"]);
+    return (react_1.default.createElement(titleCell_styles_1.TitleCell, { gridSx: { gap: 1 } },
+        typeof title === "string" ? (react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, title)) : (title),
+        react_1.default.createElement(link_1.Link, Object.assign({}, props))));
+};
+exports.TitleCell = TitleCell;

package/lib/components/Index/components/TitleCell/titleCell.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const TitleCell: import("@emotion/styled").StyledComponent<import("../../../common/Grid/grid").GridProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Index/components/TitleCell/titleCell.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.TitleCell = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const fonts_1 = require("../../../../styles/common/mixins/fonts");
+const grid_1 = require("../../../common/Grid/grid");
+exports.TitleCell = (0, styled_1.default)(grid_1.Grid) `
+  ${fonts_1.textBodySmall400};
+`;

package/lib/components/Index/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { HeroTitle } from "../common/Title/title";
+export interface IndexProps {
+    List?: ReactNode;
+    ListHero?: ReactNode | ReactNode[];
+    SideBarButton?: ReactNode;
+    SubTitleHero?: ReactNode | ReactNode[];
+    Summaries?: ReactNode;
+    Tabs?: ReactNode;
+    title: HeroTitle;
+}
+export declare const Index: ({ List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;

package/lib/components/Index/index.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.Index = void 0;
+const react_1 = __importDefault(require("react"));
+const useLayoutState_1 = require("../../hooks/useLayoutState");
+const hero_1 = require("./components/Hero/hero");
+const index_styles_1 = require("./index.styles");
+const Index = ({ List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
+    const { layoutState } = (0, useLayoutState_1.useLayoutState)();
+    const { headerHeight } = layoutState;
+    return (react_1.default.createElement(index_styles_1.Index, { marginTop: headerHeight },
+        react_1.default.createElement(hero_1.Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
+        SubTitleHero,
+        Tabs,
+        ListHero,
+        List));
+};
+exports.Index = Index;

package/lib/components/Index/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { Index } from "./index";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./index").IndexProps>;
+export default _default;
+declare type Story = StoryObj<typeof Index>;
+export declare const IndexStory: Story;

package/lib/components/Index/index.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndexStory = void 0;
+const react_1 = __importDefault(require("react"));
+const summaries_stories_1 = require("./components/Hero/components/Summaries/summaries.stories");
+const index_1 = require("./index");
+exports.default = {
+    argTypes: {
+        List: { table: { disable: true } },
+        Summaries: { table: { disable: true } },
+        Tabs: { table: { disable: true } },
+        title: { table: { disable: true } },
+    },
+    component: index_1.Index,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Views/ExploreView",
+};
+exports.IndexStory = {
+    args: {
+        List: undefined,
+        Summaries: react_1.default.createElement(summaries_stories_1.SummariesStory, Object.assign({}, summaries_stories_1.SummariesStory.args)),
+        Tabs: undefined,
+        title: "Explore Data",
+    },
+};

package/lib/components/Index/index.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface Props {
+    marginTop: number;
+}
+export declare const Index: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/lib/components/Index/index.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Index = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../styles/common/mixins/breakpoints");
+exports.Index = (0, styled_1.default)("div") `
+  display: grid;
+  flex: 1;
+  gap: 16px;
+  margin-top: ${({ marginTop }) => marginTop}px;
+  padding: 24px 0;
+  place-content: flex-start stretch;
+
+  ${breakpoints_1.mediaTabletUp} {
+    padding: 24px;
+  }
+`;

package/lib/components/Layout/components/AppLayout/appLayout.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const AppLayout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/AppLayout/appLayout.styles.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.AppLayout = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.AppLayout = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  min-height: 100vh;
+`;

package/lib/components/Layout/components/BackPage/backPageView.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface BackPageViewProps {
+    isDetailOverview?: boolean;
+    mainColumn: ReactNode;
+    sideColumn?: ReactNode;
+    Tabs?: ReactNode;
+    top: ReactNode;
+}
+export declare const BackPageView: ({ isDetailOverview, mainColumn, sideColumn, Tabs, top, }: BackPageViewProps) => JSX.Element;

package/lib/components/Layout/components/BackPage/backPageView.js

@@ -0,0 +1,48 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackPageView = void 0;
+const react_1 = __importStar(require("react"));
+const backPageView_styles_1 = require("./backPageView.styles");
+const BackPageView = ({ isDetailOverview = false, mainColumn, sideColumn, Tabs, top, }) => {
+    const Content = isDetailOverview
+        ? backPageView_styles_1.DetailPageOverviewContent
+        : backPageView_styles_1.BackPageContent;
+    const MainColumn = isDetailOverview
+        ? backPageView_styles_1.DetailPageOverviewContentMainColumn
+        : sideColumn
+            ? backPageView_styles_1.BackPageContentMainColumn
+            : react_1.Fragment;
+    const SideColumn = isDetailOverview
+        ? backPageView_styles_1.DetailPageOverviewContentSideColumn
+        : backPageView_styles_1.BackPageContentSideColumn;
+    return (react_1.default.createElement(backPageView_styles_1.BackPageView, null,
+        react_1.default.createElement(backPageView_styles_1.BackPageHero, null, top),
+        Tabs && react_1.default.createElement(backPageView_styles_1.BackPageTabs, null, Tabs),
+        react_1.default.createElement(Content, null,
+            react_1.default.createElement(MainColumn, null, mainColumn),
+            sideColumn && react_1.default.createElement(SideColumn, null, sideColumn))));
+};
+exports.BackPageView = BackPageView;

package/lib/components/Layout/components/BackPage/backPageView.stories.d.ts

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

package/lib/components/Layout/components/BackPage/backPageView.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c, _d;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackPageViewStory = void 0;
+const react_1 = __importDefault(require("react"));
+const collaboratingOrganizations_stories_1 = require("../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories");
+const contacts_stories_1 = require("../../../Project/components/Contacts/contacts.stories");
+const contributors_stories_1 = require("../../../Project/components/Contributors/contributors.stories");
+const dataCurators_stories_1 = require("../../../Project/components/DataCurators/dataCurators.stories");
+const dataReleasePolicy_stories_1 = require("../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories");
+const description_stories_1 = require("../../../Project/components/Description/description.stories");
+const details_stories_1 = require("../../../Project/components/Details/details.stories");
+const publications_stories_1 = require("../../../Project/components/Publications/publications.stories");
+const supplementaryLinks_stories_1 = require("../../../Project/components/SupplementaryLinks/supplementaryLinks.stories");
+const backPageView_1 = require("./backPageView");
+exports.default = {
+    argTypes: {
+        isDetailOverview: { control: "boolean" },
+        mainColumn: { table: { disable: true } },
+        sideColumn: { table: { disable: true } },
+        top: { table: { disable: true } },
+    },
+    component: backPageView_1.BackPageView,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Views/BackPage",
+};
+const BackPageViewTemplate = (args) => (react_1.default.createElement(backPageView_1.BackPageView, Object.assign({}, args)));
+exports.BackPageViewStory = BackPageViewTemplate.bind({});
+exports.BackPageViewStory.args = {
+    isDetailOverview: true,
+    mainColumn: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(description_stories_1.DescriptionStory, { projectDescription: ((_a = description_stories_1.DescriptionStory.args) === null || _a === void 0 ? void 0 : _a.projectDescription) || "None" }),
+        react_1.default.createElement(contacts_stories_1.ContactsStory, Object.assign({}, contacts_stories_1.ContactsStory.args)),
+        react_1.default.createElement(publications_stories_1.PublicationsStory, Object.assign({}, publications_stories_1.PublicationsStory.args)),
+        react_1.default.createElement(contributors_stories_1.ContributorsStory, Object.assign({}, contributors_stories_1.ContributorsStory.args)),
+        react_1.default.createElement(collaboratingOrganizations_stories_1.CollaboratingOrganizationsStory, Object.assign({}, collaboratingOrganizations_stories_1.CollaboratingOrganizationsStory.args)),
+        react_1.default.createElement(dataCurators_stories_1.DataCuratorsStory, Object.assign({}, dataCurators_stories_1.DataCuratorsStory.args)),
+        react_1.default.createElement(supplementaryLinks_stories_1.SupplementaryLinksStory, Object.assign({}, supplementaryLinks_stories_1.SupplementaryLinksStory.args)),
+        react_1.default.createElement(dataReleasePolicy_stories_1.DataReleasePolicyStory, null))),
+    sideColumn: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(details_stories_1.DetailsStory, { title: (_c = (_b = details_stories_1.DetailsStory.args) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : "", keyValuePairs: (_d = details_stories_1.DetailsStory.args) === null || _d === void 0 ? void 0 : _d.keyValuePairs }))),
+    top: react_1.default.createElement(react_1.default.Fragment, null),
+};