@dbcdk/react-components 0.0.1 → 0.0.3

package/dist/components/page-layout/PageLayout.module.css

@@ -0,0 +1,142 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 100vw;
+}
+
+.vertical {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.container.containScrolling {
+  height: 100vh;
+  overflow: auto;
+  position: relative;
+}
+
+@media screen and (max-height: 400px) {
+  .container {
+    height: unset;
+  }
+}
+
+.heroContainer {
+  height: clamp(220px, 80svh, 520px);
+  height: clamp(220px, 80vh, 600px);
+  position: relative;
+  overflow: hidden;
+  margin: var(--spacing-lg) auto;
+  width: 100%;
+  padding: 0 var(--spacing-lg);
+  box-sizing: border-box;
+}
+
+.heroContainer img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 0% 10%;
+  display: block;
+}
+
+.heroImageWrapper {
+  height: 100%;
+  position: relative;
+}
+.heroImageWrapper::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.heroText {
+  z-index: 10;
+  position: absolute;
+  left: var(--spacing-2xl);
+  bottom: var(--spacing-2xl);
+  padding: var(--spacing-md);
+  letter-spacing: 1px;
+  color: #fff;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.heroText h2 {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+}
+
+.heroText .metaHeadline {
+  text-transform: uppercase;
+  opacity: 0.9;
+  font-size: var(--font-size-lg);
+  text-transform: uppercase;
+  opacity: 0.9;
+  font-weight: 500;
+  padding: 0 0 var(--spacing-xs) 0;
+  font-weight: 400;
+}
+
+.metaHeadline::after {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 3px;
+  background: var(--color-primary);
+  margin-top: 4px;
+  border-radius: 2px;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.container:not(.containScrolling) {
+  .headerContainer {
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+  }
+}
+
+.headerContent {
+  flex: 0 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.maxWidth {
+  max-width: 1600px;
+  margin: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.content {
+  flex: 1 1 auto;
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-md) var(--spacing-xl);
+  padding-top: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.footer {
+  flex: 0 0 auto;
+}

package/dist/components/pagination/Pagination.cjs

@@ -0,0 +1,117 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Pagination.module.css');
+var Button = require('../button/Button');
+var lucideReact = require('lucide-react');
+var Popover = require('../popover/Popover');
+var Menu = require('../menu/Menu');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+function Pagination({
+  itemsCount = 0,
+  skip = 0,
+  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
+  onPageChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS
+}) {
+  const totalPages = react.useMemo(() => {
+    const pages = Math.max(1, Math.ceil(itemsCount / Math.max(1, take)));
+    return pages;
+  }, [itemsCount, take]);
+  const currentPage = react.useMemo(() => {
+    const p = Math.floor(skip / Math.max(1, take)) + 1;
+    return Math.min(Math.max(1, p), totalPages);
+  }, [skip, take, totalPages]);
+  const emit = react.useCallback(
+    (page) => {
+      const clampedPage = Math.min(Math.max(1, page), totalPages);
+      const nextSkip = (clampedPage - 1) * take;
+      onPageChange == null ? void 0 : onPageChange({
+        page: clampedPage,
+        take,
+        skip: nextSkip,
+        totalPages
+      });
+    },
+    [onPageChange, take, totalPages]
+  );
+  const prevPage = react.useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+  const nextPage = react.useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+  const goToPage = react.useCallback((page) => emit(page), [emit]);
+  const pageList = react.useMemo(() => {
+    const visiblePages = 3;
+    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+    let startIndex = Math.max(currentPage - Math.floor(visiblePages / 2) - 1, 0);
+    let endIndex = startIndex + visiblePages;
+    if (endIndex > totalPages) {
+      endIndex = totalPages;
+      startIndex = Math.max(endIndex - visiblePages, 0);
+    }
+    return {
+      first: startIndex > 0 ? 1 : void 0,
+      items: pages.slice(startIndex, endIndex),
+      last: endIndex < totalPages ? totalPages : void 0
+    };
+  }, [totalPages, currentPage]);
+  const handlePageSizeChange = react.useCallback(
+    (size) => {
+      onPageChange == null ? void 0 : onPageChange({
+        page: 1,
+        take: size,
+        skip: 0,
+        totalPages: Math.max(1, Math.ceil(itemsCount / Math.max(1, size)))
+      });
+    },
+    [onPageChange, itemsCount]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled: currentPage === 1, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}), onClick: prevPage }),
+    pageList.first && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.ellipsisButton, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: () => goToPage(1), children: pageList.first }),
+      "\u2026"
+    ] }),
+    pageList.items.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        "aria-current": page === currentPage ? "page" : void 0,
+        variant: "outlined",
+        onClick: () => goToPage(page),
+        active: page === currentPage,
+        children: page
+      },
+      page
+    )),
+    pageList.last !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.ellipsisButton, children: [
+      "\u2026",
+      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: () => goToPage(pageList.last), children: pageList.last })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled: currentPage === totalPages, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}), onClick: nextPage }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        trigger: (event, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "outlined", onClick: event, children: [
+          "Vis ",
+          take,
+          icon
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: size === take, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              handlePageSizeChange(size);
+            },
+            children: size
+          }
+        ) }, size)) })
+      }
+    )
+  ] });
+}
+
+exports.Pagination = Pagination;

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,17 @@
+export type PageChangeEvent = {
+    page: number;
+    take: number;
+    skip: number;
+    totalPages: number;
+    pageSizeOptions?: number[];
+};
+interface PaginationProps {
+    itemsCount?: number;
+    take?: number;
+    skip?: number;
+    onPageChange?: (e: PageChangeEvent) => void;
+    lazy?: boolean;
+    pageSizeOptions?: number[];
+}
+export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, }: PaginationProps): React.ReactNode;
+export {};

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import styles from './Pagination.module.css';
+import { Button } from '../button/Button';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { Popover } from '../popover/Popover';
+import { Menu } from '../menu/Menu';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+function Pagination({
+  itemsCount = 0,
+  skip = 0,
+  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
+  onPageChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS
+}) {
+  const totalPages = useMemo(() => {
+    const pages = Math.max(1, Math.ceil(itemsCount / Math.max(1, take)));
+    return pages;
+  }, [itemsCount, take]);
+  const currentPage = useMemo(() => {
+    const p = Math.floor(skip / Math.max(1, take)) + 1;
+    return Math.min(Math.max(1, p), totalPages);
+  }, [skip, take, totalPages]);
+  const emit = useCallback(
+    (page) => {
+      const clampedPage = Math.min(Math.max(1, page), totalPages);
+      const nextSkip = (clampedPage - 1) * take;
+      onPageChange == null ? void 0 : onPageChange({
+        page: clampedPage,
+        take,
+        skip: nextSkip,
+        totalPages
+      });
+    },
+    [onPageChange, take, totalPages]
+  );
+  const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+  const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+  const goToPage = useCallback((page) => emit(page), [emit]);
+  const pageList = useMemo(() => {
+    const visiblePages = 3;
+    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+    let startIndex = Math.max(currentPage - Math.floor(visiblePages / 2) - 1, 0);
+    let endIndex = startIndex + visiblePages;
+    if (endIndex > totalPages) {
+      endIndex = totalPages;
+      startIndex = Math.max(endIndex - visiblePages, 0);
+    }
+    return {
+      first: startIndex > 0 ? 1 : void 0,
+      items: pages.slice(startIndex, endIndex),
+      last: endIndex < totalPages ? totalPages : void 0
+    };
+  }, [totalPages, currentPage]);
+  const handlePageSizeChange = useCallback(
+    (size) => {
+      onPageChange == null ? void 0 : onPageChange({
+        page: 1,
+        take: size,
+        skip: 0,
+        totalPages: Math.max(1, Math.ceil(itemsCount / Math.max(1, size)))
+      });
+    },
+    [onPageChange, itemsCount]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx(Button, { disabled: currentPage === 1, icon: /* @__PURE__ */ jsx(ArrowLeft, {}), onClick: prevPage }),
+    pageList.first && /* @__PURE__ */ jsxs("span", { className: styles.ellipsisButton, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => goToPage(1), children: pageList.first }),
+      "\u2026"
+    ] }),
+    pageList.items.map((page) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-current": page === currentPage ? "page" : void 0,
+        variant: "outlined",
+        onClick: () => goToPage(page),
+        active: page === currentPage,
+        children: page
+      },
+      page
+    )),
+    pageList.last !== void 0 && /* @__PURE__ */ jsxs("span", { className: styles.ellipsisButton, children: [
+      "\u2026",
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => goToPage(pageList.last), children: pageList.last })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { disabled: currentPage === totalPages, icon: /* @__PURE__ */ jsx(ArrowRight, {}), onClick: nextPage }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        trigger: (event, icon) => /* @__PURE__ */ jsxs(Button, { variant: "outlined", onClick: event, children: [
+          "Vis ",
+          take,
+          icon
+        ] }),
+        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              handlePageSizeChange(size);
+            },
+            children: size
+          }
+        ) }, size)) })
+      }
+    )
+  ] });
+}
+
+export { Pagination };

package/dist/components/pagination/Pagination.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  gap: 5px;
+  align-items: flex-end;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.ellipsisButton {
+  display: none;
+}
+
+@media (min-width: 480px) {
+  .ellipsisButton {
+    display: contents;
+  }
+}

package/dist/components/panel/Panel.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Headline = require('../headline/Headline');
+var styles = require('./Panel.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Panel({ header, headerIcon, children, severity, size }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `${styles__default.default.container} ${size ? styles__default.default[size] : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 3, icon: headerIcon, severity, children: header }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.content, children })
+  ] });
+}
+
+exports.Panel = Panel;

package/dist/components/panel/Panel.d.ts

@@ -0,0 +1,10 @@
+interface PanelProps {
+    header: string;
+    headerIcon?: React.ReactNode;
+    severity?: Severity;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+}
+import { Severity } from '@/constants/severity.types';
+export declare function Panel({ header, headerIcon, children, severity, size }: PanelProps): JSX.Element;
+export {};

package/dist/components/panel/Panel.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Headline } from '../headline/Headline';
+import styles from './Panel.module.css';
+
+function Panel({ header, headerIcon, children, severity, size }) {
+  return /* @__PURE__ */ jsxs("section", { className: `${styles.container} ${size ? styles[size] : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 3, icon: headerIcon, severity, children: header }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.content, children })
+  ] });
+}
+
+export { Panel };

package/dist/components/panel/Panel.module.css

@@ -0,0 +1,29 @@
+.container {
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-bg);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-bottom: 1px solid var(--color-border-strong);
+}
+
+
+.content {
+  padding: var(--spacing-md);
+}
+
+.header
+{
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+
+.container.sm {
+  .header,.content {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}

package/dist/components/popover/Popover.cjs

@@ -0,0 +1,132 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Popover.module.css');
+var lucideReact = require('lucide-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const Popover = react.forwardRef(function Popover2({ trigger: Trigger, children, minWidth = "200px", viewportPadding = 8, edgeBuffer = 100 }, ref) {
+  const [pos, setPos] = react.useState({ top: 0, left: 0, visible: false });
+  const containerRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const computeAndSetPosition = react.useCallback(
+    (show) => {
+      const container = containerRef.current;
+      const content = contentRef.current;
+      if (!container || !content) return;
+      const prevVis = content.style.visibility;
+      const prevDisp = content.style.display;
+      content.style.visibility = "hidden";
+      content.style.display = "block";
+      const triggerRect = container.getBoundingClientRect();
+      const contentWidth = content.offsetWidth;
+      const contentHeight = content.offsetHeight;
+      content.style.visibility = prevVis;
+      content.style.display = prevDisp;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const spaceAbove = Math.max(0, triggerRect.top);
+      const spaceBelow = Math.max(0, vh - triggerRect.bottom);
+      const spaceLeft = Math.max(0, triggerRect.left);
+      const spaceRight = Math.max(0, vw - triggerRect.right);
+      const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
+      const spacing = viewportPadding;
+      const rawTop = preferBelow ? triggerRect.bottom + spacing : triggerRect.top - contentHeight - spacing;
+      const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
+      const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
+      let rawLeft;
+      if (placeRightOfLeftEdge) {
+        rawLeft = triggerRect.left;
+      } else if (placeLeftOfRightEdge) {
+        rawLeft = triggerRect.right - contentWidth;
+      } else {
+        rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
+      }
+      const clampedLeft = Math.max(
+        viewportPadding,
+        Math.min(rawLeft, vw - contentWidth - viewportPadding)
+      );
+      const clampedTop = Math.max(
+        viewportPadding,
+        Math.min(rawTop, vh - contentHeight - viewportPadding)
+      );
+      setPos({ top: clampedTop, left: clampedLeft, visible: show });
+    },
+    [edgeBuffer, viewportPadding]
+  );
+  const openPopover = react.useCallback(
+    (e) => {
+      if (pos.visible) {
+        setPos((p) => ({ ...p, visible: false }));
+        return;
+      }
+      computeAndSetPosition(true);
+      e == null ? void 0 : e.stopPropagation();
+    },
+    [pos.visible, computeAndSetPosition]
+  );
+  const closePopover = react.useCallback(() => {
+    setPos((p) => ({ ...p, visible: false }));
+  }, []);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      close: closePopover,
+      open: () => computeAndSetPosition(true),
+      isOpen: () => !!pos.visible
+    }),
+    [closePopover, computeAndSetPosition, pos.visible]
+  );
+  react.useEffect(() => {
+    if (!pos.visible) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && contentRef.current && !containerRef.current.contains(e.target) && !contentRef.current.contains(e.target)) {
+        closePopover();
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") closePopover();
+    };
+    const handleReposition = () => computeAndSetPosition(true);
+    document.addEventListener("click", handleClickOutside);
+    document.addEventListener("keydown", handleEscape, true);
+    window.addEventListener("resize", handleReposition);
+    window.addEventListener("scroll", handleReposition, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape, true);
+      window.removeEventListener("resize", handleReposition);
+      window.removeEventListener("scroll", handleReposition, true);
+    };
+  }, [pos.visible, closePopover, computeAndSetPosition]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, ref: containerRef, children: [
+    Trigger(openPopover, pos.visible ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 })),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: styles__default.default.content,
+        style: {
+          position: "fixed",
+          top: pos.top,
+          left: pos.left,
+          visibility: pos.visible ? "visible" : "hidden",
+          minWidth,
+          maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+          maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
+          overflow: "auto"
+        },
+        role: "dialog",
+        "aria-hidden": !pos.visible,
+        children
+      }
+    )
+  ] });
+});
+Popover.displayName = "Popover";
+
+exports.Popover = Popover;

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface PopoverProps {
+    trigger: (event: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode) => React.ReactNode;
+    children: React.ReactNode;
+    minWidth?: string;
+    viewportPadding?: number;
+    edgeBuffer?: number;
+}
+export interface PopoverHandle {
+    close: () => void;
+    open: () => void;
+    isOpen: () => boolean;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;
+export {};