@equinor/apollo-components 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { IconData } from '@equinor/eds-icons';
+import { ReactNode } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+
+interface AppShellProps {
+    children?: ReactNode;
+    sidebar?: ReactNode;
+    icon?: IconData;
+    title?: string;
+}
+declare const AppShell: ({ children, icon, title, sidebar }: AppShellProps) => JSX.Element;
+
+declare function AppSidebar(): JSX.Element;
+
+declare const ChipsCell: (props: {
+    values?: string[];
+}) => JSX.Element;
+
+interface DataTableProps<T> {
+    className?: string;
+    columns: ColumnDef<T, any>[];
+    data: T[];
+    tableCaption?: string;
+    captionPadding?: string;
+    globalFilter?: boolean;
+    globalFilterPlaceholder?: string;
+    stickyHeader?: boolean;
+    tableWidth?: string;
+    sortable?: boolean;
+    virtual?: boolean;
+    height?: string;
+}
+declare function DataTable<T>({ columns, data, ...props }: DataTableProps<T>): JSX.Element;
+
+export { AppShell, AppSidebar, ChipsCell, DataTable };

package/dist/index.js

@@ -0,0 +1,471 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  AppShell: () => AppShell,
+  AppSidebar: () => AppSidebar,
+  ChipsCell: () => ChipsCell,
+  DataTable: () => DataTable
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/AppShell/AppShell.tsx
+var import_eds_core_react = require("@equinor/eds-core-react");
+var import_eds_icons = require("@equinor/eds-icons");
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Wrapper = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  height: 100vh;
+  .--content-wrapper {
+    display: flex;
+    flex: 1;
+  }
+  .--content-outlet {
+    flex: 1;
+  }
+`;
+var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
+  children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.TopBar, {
+      sticky: false,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_eds_core_react.TopBar.Header, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.Icon, {
+            data: icon ?? import_eds_icons.apps
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+            children: title ?? "App Title"
+          })
+        ]
+      })
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+      className: "--content-wrapper",
+      children: [
+        sidebar,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+          className: "--content-outlet",
+          children
+        })
+      ]
+    })
+  ]
+});
+
+// src/AppShell/AppSidebar.tsx
+var import_eds_core_react2 = require("@equinor/eds-core-react");
+var import_eds_icons2 = require("@equinor/eds-icons");
+var import_eds_tokens = require("@equinor/eds-tokens");
+var import_react = require("react");
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Wrapper2 = import_styled_components2.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: ${(props) => props.collapsed ? "64px" : "192px"};
+  height: 100%;
+  background-color: ${import_eds_tokens.tokens.colors.ui.background__default.hex};
+  border-right: 2px solid ${import_eds_tokens.tokens.colors.ui.background__medium.hex};
+
+  .collapse-button-wrapper {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    border-bottom: 1px solid ${import_eds_tokens.tokens.colors.ui.background__medium.hex};
+    ${(props) => props.collapsed && "justify-content: center;"}
+  }
+  .collapse-button {
+    ${(props) => !props.collapsed && import_styled_components2.css`
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin: 0 12px;
+        border-radius: 50px;
+      `}
+  }
+`;
+function AppSidebar() {
+  const [collapsed, setCollapsed] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper2, {
+    collapsed,
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+      className: "collapse-button-wrapper",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Button, {
+        className: "collapse-button",
+        variant: collapsed ? "ghost_icon" : "ghost",
+        onClick: () => setCollapsed(!collapsed),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, {
+            data: collapsed ? import_eds_icons2.last_page : import_eds_icons2.first_page
+          }),
+          !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+            children: "Collapse"
+          })
+        ]
+      })
+    })
+  });
+}
+
+// src/cells/ChipsCell.tsx
+var import_eds_tokens2 = require("@equinor/eds-tokens");
+var import_styled_components3 = __toESM(require("styled-components"));
+
+// src/cells/utils.ts
+function stringToHslColor(str, s = 80, l = 85) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const h = hash % 360;
+  return "hsl(" + h + ", " + s + "%, " + l + "%)";
+}
+
+// src/cells/ChipsCell.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ChipsWrapper = import_styled_components3.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+var Chip = import_styled_components3.default.div`
+  border-radius: 25px;
+  line-height: 22px;
+  height: 22px;
+  padding: 0 6px;
+  background-color: ${(props) => props.backgroundColor ?? import_eds_tokens2.tokens.colors.ui.background__medium.hex};
+  color: darkslategrey;
+`;
+var ChipsCell = (props) => {
+  var _a;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChipsWrapper, {
+    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, {
+      backgroundColor: stringToHslColor(value),
+      children: value
+    }, value))
+  });
+};
+
+// src/DataTable/DataTable.tsx
+var import_react_table4 = require("@tanstack/react-table");
+var import_react3 = require("react");
+var import_styled_components7 = __toESM(require("styled-components"));
+
+// src/DataTable/components/BasicTable.tsx
+var import_eds_core_react5 = require("@equinor/eds-core-react");
+var import_react_table2 = require("@tanstack/react-table");
+
+// src/DataTable/components/TableHeader.tsx
+var import_eds_core_react4 = require("@equinor/eds-core-react");
+
+// src/DataTable/components/HeaderCell.tsx
+var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_eds_icons3 = require("@equinor/eds-icons");
+var import_react_table = require("@tanstack/react-table");
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var HeaderDiv = import_styled_components4.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+var HeaderCell = ({ header }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Table.Cell, {
+    colSpan: header.colSpan,
+    children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(HeaderDiv, {
+      onClick: header.column.getToggleSortingHandler(),
+      children: [
+        (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
+        {
+          asc: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Icon, {
+            data: import_eds_icons3.arrow_down
+          }),
+          desc: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Icon, {
+            data: import_eds_icons3.arrow_up
+          })
+        }[header.column.getIsSorted()] ?? null
+      ]
+    })
+  }, header.id);
+};
+
+// src/DataTable/components/TableHeader.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TableHeader = ({ table, sticky }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Table.Head, {
+  sticky,
+  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Table.Row, {
+    children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderCell, {
+      header
+    }, header.id))
+  }, headerGroup.id))
+});
+
+// src/DataTable/components/BasicTable.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function BasicTable({ table, stickyHeader }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react5.Table, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableHeader, {
+        sticky: stickyHeader,
+        table
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Body, {
+        children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Row, {
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Cell, {
+            children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
+          }, cell.id))
+        }, row.id))
+      })
+    ]
+  });
+}
+
+// src/DataTable/components/DataTableHeader.tsx
+var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_styled_components6 = __toESM(require("styled-components"));
+
+// src/DataTable/filters/DebouncedInput.tsx
+var import_eds_core_react6 = require("@equinor/eds-core-react");
+var import_react2 = require("react");
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components5.default.div`
+  width: 300px;
+`;
+function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}) {
+  const [value, setValue] = (0, import_react2.useState)(initialValue);
+  (0, import_react2.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  (0, import_react2.useEffect)(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+    return () => clearTimeout(timeout);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Input, {
+      ...props,
+      value,
+      onChange: (event) => setValue(event.target.value)
+    })
+  });
+}
+
+// src/DataTable/filters/functions.ts
+var import_match_sorter_utils = require("@tanstack/match-sorter-utils");
+var fuzzyFilter = (row, columnId, value, addMeta) => {
+  const itemRank = (0, import_match_sorter_utils.rankItem)(row.getValue(columnId), value);
+  addMeta({
+    itemRank
+  });
+  return itemRank.passed;
+};
+
+// src/DataTable/components/DataTableHeader.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DataTableHeaderWrapper = import_styled_components6.default.div`
+  & > * + * {
+    margin-top: 0.5rem;
+  }
+  gap: 0.5rem;
+  padding: ${(props) => props.captionPadding ?? "1rem"};
+`;
+var FilterContainer = import_styled_components6.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+var DataTableHeader = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DataTableHeaderWrapper, {
+    className: "--table-caption",
+    captionPadding: props.captionPadding,
+    children: [
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Typography, {
+        variant: "h2",
+        children: props == null ? void 0 : props.tableCaption
+      }),
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilterContainer, {
+        className: "--filter-container",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DebouncedInput, {
+          value: props.globalFilter ?? "",
+          placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
+          onChange: (value) => {
+            var _a;
+            return (_a = props.setGlobalFilter) == null ? void 0 : _a.call(props, String(value));
+          }
+        })
+      })
+    ]
+  });
+};
+
+// src/DataTable/components/VirtualTable.tsx
+var import_eds_core_react9 = require("@equinor/eds-core-react");
+var import_react_table3 = require("@tanstack/react-table");
+var import_react_virtual = require("@tanstack/react-virtual");
+
+// src/DataTable/components/PaddingRow.tsx
+var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PaddingRow = (props) => {
+  if (!props.height)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Cell, {
+      style: { height: `${props.height}px` }
+    })
+  });
+};
+
+// src/DataTable/components/VirtualTable.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function VirtualTable({ table, containerRef, ...props }) {
+  var _a, _b;
+  const { rows } = table.getRowModel();
+  const rowVirtualizer = (0, import_react_virtual.useVirtual)({
+    overscan: 10,
+    size: rows.length,
+    parentRef: containerRef
+  });
+  const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Table, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableHeader, {
+        sticky: props.stickyHeader,
+        table
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Table.Body, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaddingRow, {
+            height: paddingTop
+          }),
+          virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Row, {
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Cell, {
+                children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
+              }, cell.id))
+            }, row.id);
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaddingRow, {
+            height: paddingBottom
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/DataTable/utils.ts
+function enableOrUndefined(enabled, value) {
+  return Boolean(enabled) ? value : void 0;
+}
+
+// src/DataTable/DataTable.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DataTableWrapper = import_styled_components7.default.div`
+  width: ${(props) => props.width ?? "100%"};
+
+  .--table-container {
+    height: ${(props) => props.height ?? "100%"};
+    width: ${(props) => props.width ?? "100%"};
+    overflow: auto;
+
+    table {
+      width: 100%;
+    }
+  }
+`;
+function DataTable({ columns, data, ...props }) {
+  const [globalFilter, setGlobalFilter] = (0, import_react3.useState)("");
+  function enableGlobalFilter(value) {
+    return enableOrUndefined(props.globalFilter, value);
+  }
+  const [sorting, setSorting] = (0, import_react3.useState)([]);
+  const table = (0, import_react_table4.useReactTable)({
+    columns,
+    data,
+    getCoreRowModel: (0, import_react_table4.getCoreRowModel)(),
+    getFilteredRowModel: enableGlobalFilter((0, import_react_table4.getFilteredRowModel)()),
+    globalFilterFn: enableGlobalFilter(fuzzyFilter),
+    state: {
+      globalFilter: enableGlobalFilter(globalFilter),
+      sorting
+    },
+    enableSorting: props.sortable,
+    onSortingChange: setSorting,
+    getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),
+    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
+  });
+  const tableContainerRef = (0, import_react3.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DataTableWrapper, {
+    captionPadding: props.captionPadding,
+    height: props.height,
+    width: props.tableWidth,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataTableHeader, {
+        tableCaption: props.tableCaption,
+        enableGlobalFilter: props.globalFilter,
+        globalFilter,
+        setGlobalFilter,
+        globalFilterPlaceholder: props.globalFilterPlaceholder,
+        captionPadding: props.captionPadding
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+        ref: tableContainerRef,
+        className: "--table-container",
+        children: props.virtual ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VirtualTable, {
+          containerRef: tableContainerRef,
+          table,
+          stickyHeader: props.stickyHeader
+        }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BasicTable, {
+          table,
+          stickyHeader: props.stickyHeader
+        })
+      })
+    ]
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell,
+  AppSidebar,
+  ChipsCell,
+  DataTable
+});

package/dist/index.mjs

@@ -0,0 +1,440 @@
+// src/AppShell/AppShell.tsx
+import { Icon, TopBar } from "@equinor/eds-core-react";
+import { apps } from "@equinor/eds-icons";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  height: 100vh;
+  .--content-wrapper {
+    display: flex;
+    flex: 1;
+  }
+  .--content-outlet {
+    flex: 1;
+  }
+`;
+var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ jsxs(Wrapper, {
+  children: [
+    /* @__PURE__ */ jsx(TopBar, {
+      sticky: false,
+      children: /* @__PURE__ */ jsxs(TopBar.Header, {
+        children: [
+          /* @__PURE__ */ jsx(Icon, {
+            data: icon ?? apps
+          }),
+          /* @__PURE__ */ jsx("span", {
+            children: title ?? "App Title"
+          })
+        ]
+      })
+    }),
+    /* @__PURE__ */ jsxs("div", {
+      className: "--content-wrapper",
+      children: [
+        sidebar,
+        /* @__PURE__ */ jsx("div", {
+          className: "--content-outlet",
+          children
+        })
+      ]
+    })
+  ]
+});
+
+// src/AppShell/AppSidebar.tsx
+import { Button, Icon as Icon2 } from "@equinor/eds-core-react";
+import { first_page, last_page } from "@equinor/eds-icons";
+import { tokens } from "@equinor/eds-tokens";
+import { useState } from "react";
+import styled2, { css } from "styled-components";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Wrapper2 = styled2.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: ${(props) => props.collapsed ? "64px" : "192px"};
+  height: 100%;
+  background-color: ${tokens.colors.ui.background__default.hex};
+  border-right: 2px solid ${tokens.colors.ui.background__medium.hex};
+
+  .collapse-button-wrapper {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    border-bottom: 1px solid ${tokens.colors.ui.background__medium.hex};
+    ${(props) => props.collapsed && "justify-content: center;"}
+  }
+  .collapse-button {
+    ${(props) => !props.collapsed && css`
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin: 0 12px;
+        border-radius: 50px;
+      `}
+  }
+`;
+function AppSidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+  return /* @__PURE__ */ jsx2(Wrapper2, {
+    collapsed,
+    children: /* @__PURE__ */ jsx2("div", {
+      className: "collapse-button-wrapper",
+      children: /* @__PURE__ */ jsxs2(Button, {
+        className: "collapse-button",
+        variant: collapsed ? "ghost_icon" : "ghost",
+        onClick: () => setCollapsed(!collapsed),
+        children: [
+          /* @__PURE__ */ jsx2(Icon2, {
+            data: collapsed ? last_page : first_page
+          }),
+          !collapsed && /* @__PURE__ */ jsx2("div", {
+            children: "Collapse"
+          })
+        ]
+      })
+    })
+  });
+}
+
+// src/cells/ChipsCell.tsx
+import { tokens as tokens2 } from "@equinor/eds-tokens";
+import styled3 from "styled-components";
+
+// src/cells/utils.ts
+function stringToHslColor(str, s = 80, l = 85) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const h = hash % 360;
+  return "hsl(" + h + ", " + s + "%, " + l + "%)";
+}
+
+// src/cells/ChipsCell.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChipsWrapper = styled3.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+var Chip = styled3.div`
+  border-radius: 25px;
+  line-height: 22px;
+  height: 22px;
+  padding: 0 6px;
+  background-color: ${(props) => props.backgroundColor ?? tokens2.colors.ui.background__medium.hex};
+  color: darkslategrey;
+`;
+var ChipsCell = (props) => {
+  var _a;
+  return /* @__PURE__ */ jsx3(ChipsWrapper, {
+    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ jsx3(Chip, {
+      backgroundColor: stringToHslColor(value),
+      children: value
+    }, value))
+  });
+};
+
+// src/DataTable/DataTable.tsx
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useRef, useState as useState3 } from "react";
+import styled7 from "styled-components";
+
+// src/DataTable/components/BasicTable.tsx
+import { Table as EdsTable } from "@equinor/eds-core-react";
+import { flexRender as flexRender2 } from "@tanstack/react-table";
+
+// src/DataTable/components/TableHeader.tsx
+import { Table as Table2 } from "@equinor/eds-core-react";
+
+// src/DataTable/components/HeaderCell.tsx
+import { Icon as Icon3, Table } from "@equinor/eds-core-react";
+import { arrow_down, arrow_up } from "@equinor/eds-icons";
+import { flexRender } from "@tanstack/react-table";
+import styled4 from "styled-components";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var HeaderDiv = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+var HeaderCell = ({ header }) => {
+  return /* @__PURE__ */ jsx4(Table.Cell, {
+    colSpan: header.colSpan,
+    children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs3(HeaderDiv, {
+      onClick: header.column.getToggleSortingHandler(),
+      children: [
+        flexRender(header.column.columnDef.header, header.getContext()),
+        {
+          asc: /* @__PURE__ */ jsx4(Icon3, {
+            data: arrow_down
+          }),
+          desc: /* @__PURE__ */ jsx4(Icon3, {
+            data: arrow_up
+          })
+        }[header.column.getIsSorted()] ?? null
+      ]
+    })
+  }, header.id);
+};
+
+// src/DataTable/components/TableHeader.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TableHeader = ({ table, sticky }) => /* @__PURE__ */ jsx5(Table2.Head, {
+  sticky,
+  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5(Table2.Row, {
+    children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx5(HeaderCell, {
+      header
+    }, header.id))
+  }, headerGroup.id))
+});
+
+// src/DataTable/components/BasicTable.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function BasicTable({ table, stickyHeader }) {
+  return /* @__PURE__ */ jsxs4(EdsTable, {
+    children: [
+      /* @__PURE__ */ jsx6(TableHeader, {
+        sticky: stickyHeader,
+        table
+      }),
+      /* @__PURE__ */ jsx6(EdsTable.Body, {
+        children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx6(EdsTable.Row, {
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx6(EdsTable.Cell, {
+            children: flexRender2(cell.column.columnDef.cell, cell.getContext())
+          }, cell.id))
+        }, row.id))
+      })
+    ]
+  });
+}
+
+// src/DataTable/components/DataTableHeader.tsx
+import { Typography } from "@equinor/eds-core-react";
+import styled6 from "styled-components";
+
+// src/DataTable/filters/DebouncedInput.tsx
+import { Input } from "@equinor/eds-core-react";
+import { useEffect, useState as useState2 } from "react";
+import styled5 from "styled-components";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Wrapper3 = styled5.div`
+  width: 300px;
+`;
+function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}) {
+  const [value, setValue] = useState2(initialValue);
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+    return () => clearTimeout(timeout);
+  }, [value]);
+  return /* @__PURE__ */ jsx7(Wrapper3, {
+    children: /* @__PURE__ */ jsx7(Input, {
+      ...props,
+      value,
+      onChange: (event) => setValue(event.target.value)
+    })
+  });
+}
+
+// src/DataTable/filters/functions.ts
+import { rankItem } from "@tanstack/match-sorter-utils";
+var fuzzyFilter = (row, columnId, value, addMeta) => {
+  const itemRank = rankItem(row.getValue(columnId), value);
+  addMeta({
+    itemRank
+  });
+  return itemRank.passed;
+};
+
+// src/DataTable/components/DataTableHeader.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var DataTableHeaderWrapper = styled6.div`
+  & > * + * {
+    margin-top: 0.5rem;
+  }
+  gap: 0.5rem;
+  padding: ${(props) => props.captionPadding ?? "1rem"};
+`;
+var FilterContainer = styled6.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+var DataTableHeader = (props) => {
+  return /* @__PURE__ */ jsxs5(DataTableHeaderWrapper, {
+    className: "--table-caption",
+    captionPadding: props.captionPadding,
+    children: [
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx8(Typography, {
+        variant: "h2",
+        children: props == null ? void 0 : props.tableCaption
+      }),
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsx8(FilterContainer, {
+        className: "--filter-container",
+        children: /* @__PURE__ */ jsx8(DebouncedInput, {
+          value: props.globalFilter ?? "",
+          placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
+          onChange: (value) => {
+            var _a;
+            return (_a = props.setGlobalFilter) == null ? void 0 : _a.call(props, String(value));
+          }
+        })
+      })
+    ]
+  });
+};
+
+// src/DataTable/components/VirtualTable.tsx
+import { Table as Table5 } from "@equinor/eds-core-react";
+import { flexRender as flexRender3 } from "@tanstack/react-table";
+import { useVirtual } from "@tanstack/react-virtual";
+
+// src/DataTable/components/PaddingRow.tsx
+import { Table as Table4 } from "@equinor/eds-core-react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var PaddingRow = (props) => {
+  if (!props.height)
+    return null;
+  return /* @__PURE__ */ jsx9(Table4.Row, {
+    children: /* @__PURE__ */ jsx9(Table4.Cell, {
+      style: { height: `${props.height}px` }
+    })
+  });
+};
+
+// src/DataTable/components/VirtualTable.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function VirtualTable({ table, containerRef, ...props }) {
+  var _a, _b;
+  const { rows } = table.getRowModel();
+  const rowVirtualizer = useVirtual({
+    overscan: 10,
+    size: rows.length,
+    parentRef: containerRef
+  });
+  const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
+  return /* @__PURE__ */ jsxs6(Table5, {
+    children: [
+      /* @__PURE__ */ jsx10(TableHeader, {
+        sticky: props.stickyHeader,
+        table
+      }),
+      /* @__PURE__ */ jsxs6(Table5.Body, {
+        children: [
+          /* @__PURE__ */ jsx10(PaddingRow, {
+            height: paddingTop
+          }),
+          virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            return /* @__PURE__ */ jsx10(Table5.Row, {
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx10(Table5.Cell, {
+                children: flexRender3(cell.column.columnDef.cell, cell.getContext())
+              }, cell.id))
+            }, row.id);
+          }),
+          /* @__PURE__ */ jsx10(PaddingRow, {
+            height: paddingBottom
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/DataTable/utils.ts
+function enableOrUndefined(enabled, value) {
+  return Boolean(enabled) ? value : void 0;
+}
+
+// src/DataTable/DataTable.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var DataTableWrapper = styled7.div`
+  width: ${(props) => props.width ?? "100%"};
+
+  .--table-container {
+    height: ${(props) => props.height ?? "100%"};
+    width: ${(props) => props.width ?? "100%"};
+    overflow: auto;
+
+    table {
+      width: 100%;
+    }
+  }
+`;
+function DataTable({ columns, data, ...props }) {
+  const [globalFilter, setGlobalFilter] = useState3("");
+  function enableGlobalFilter(value) {
+    return enableOrUndefined(props.globalFilter, value);
+  }
+  const [sorting, setSorting] = useState3([]);
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
+    globalFilterFn: enableGlobalFilter(fuzzyFilter),
+    state: {
+      globalFilter: enableGlobalFilter(globalFilter),
+      sorting
+    },
+    enableSorting: props.sortable,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
+  });
+  const tableContainerRef = useRef(null);
+  return /* @__PURE__ */ jsxs7(DataTableWrapper, {
+    captionPadding: props.captionPadding,
+    height: props.height,
+    width: props.tableWidth,
+    children: [
+      /* @__PURE__ */ jsx11(DataTableHeader, {
+        tableCaption: props.tableCaption,
+        enableGlobalFilter: props.globalFilter,
+        globalFilter,
+        setGlobalFilter,
+        globalFilterPlaceholder: props.globalFilterPlaceholder,
+        captionPadding: props.captionPadding
+      }),
+      /* @__PURE__ */ jsx11("div", {
+        ref: tableContainerRef,
+        className: "--table-container",
+        children: props.virtual ? /* @__PURE__ */ jsx11(VirtualTable, {
+          containerRef: tableContainerRef,
+          table,
+          stickyHeader: props.stickyHeader
+        }) : /* @__PURE__ */ jsx11(BasicTable, {
+          table,
+          stickyHeader: props.stickyHeader
+        })
+      })
+    ]
+  });
+}
+export {
+  AppShell,
+  AppSidebar,
+  ChipsCell,
+  DataTable
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@equinor/apollo-components",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "build-storybook": "storybook build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "TIMING=1 eslint . --fix",
+    "storybook": "storybook dev"
+  },
+  "dependencies": {
+    "@equinor/eds-core-react": "^0.24.0",
+    "@equinor/eds-icons": "^0.15.0",
+    "@equinor/eds-tokens": "^0.9.0",
+    "@tanstack/match-sorter-utils": "^8.5.14",
+    "@tanstack/react-table": "^8.5.15",
+    "@tanstack/react-virtual": "^3.0.0-alpha.0",
+    "styled-components": "^5.3.6",
+    "tsup": "^6.3.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.0-alpha.38",
+    "@storybook/addon-interactions": "^7.0.0-alpha.38",
+    "@storybook/addon-links": "^7.0.0-alpha.38",
+    "@storybook/react": "^7.0.0-alpha.38",
+    "@storybook/react-vite": "^7.0.0-alpha.38",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.1",
+    "@types/styled-components": "^5.1.26",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0-alpha.38",
+    "tsconfig": "*",
+    "typescript": "^4.5.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}