@dbcdk/react-components 0.0.2 → 0.0.3

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./SidebarItemContent.module.css');
+var SidebarProvider = require('../../providers/SidebarProvider');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SidebarItemContent({
+  icon,
+  label,
+  suffixIcon,
+  href
+}) {
+  const { activeLink } = SidebarProvider.useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${styles__default.default.container} ${activeLink === href ? styles__default.default.active : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+    ] }),
+    suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
+  ] });
+}
+
+exports.SidebarItemContent = SidebarItemContent;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface SidebarItemContentProps {
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    href?: string;
+}
+export declare function SidebarItemContent({ icon, label, suffixIcon, href, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './SidebarItemContent.module.css';
+import { useSidebar } from '../../providers/SidebarProvider';
+
+function SidebarItemContent({
+  icon,
+  label,
+  suffixIcon,
+  href
+}) {
+  const { activeLink } = useSidebar();
+  return /* @__PURE__ */ jsxs("span", { className: `${styles.container} ${activeLink === href ? styles.active : ""}`, children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
+      /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+    ] }),
+    suffixIcon && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
+  ] });
+}
+
+export { SidebarItemContent };

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -0,0 +1,62 @@
+.container {
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  position: relative;
+  border-radius: var(--border-radius-default);
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+
+.active {
+  background: var(--color-bg-selected);
+}
+
+.active::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block: 0;
+  inline-size: 3px;
+  background-color: var(--color-primary);
+  border-radius: 0;
+}
+
+.container > span {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.container:not(.active):hover {
+  background-color: var(--color-surface-hover);
+  border-radius: var(--border-radius-default);
+  color: var(--color-text);
+}
+
+.icon {
+  min-inline-size: var(--icon-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-secondary);
+}
+
+.icon svg {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+  color: inherit;
+}
+
+.container:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var SidebarProvider = require('../../providers/SidebarProvider');
+var SidebarItem = require('../SidebarItem');
+var ExpandableSidebarItem = require('../expandable-sidebar-item/ExpandableSidebarItem');
+
+function SidebarItems({ activeLink }) {
+  const { filteredItems, setActiveLink } = SidebarProvider.useSidebar();
+  react.useEffect(() => {
+    setActiveLink(activeLink != null ? activeLink : "");
+  }, [activeLink, setActiveLink]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredItems == null ? void 0 : filteredItems.map(
+    ({ component: Component, label, icon, children, href }, id) => (children == null ? void 0 : children.length) ? /* @__PURE__ */ jsxRuntime.jsx(
+      ExpandableSidebarItem.ExpandableSidebarItem,
+      {
+        items: children,
+        label,
+        icon,
+        href
+      },
+      label
+    ) : /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component, label, icon, href }, id)
+  ) });
+}
+
+exports.SidebarItems = SidebarItems;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function SidebarItems({ activeLink }: {
+    activeLink?: string;
+}): React.ReactElement;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -0,0 +1,26 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useSidebar } from '../../providers/SidebarProvider';
+import { SidebarItem } from '../SidebarItem';
+import { ExpandableSidebarItem } from '../expandable-sidebar-item/ExpandableSidebarItem';
+
+function SidebarItems({ activeLink }) {
+  const { filteredItems, setActiveLink } = useSidebar();
+  useEffect(() => {
+    setActiveLink(activeLink != null ? activeLink : "");
+  }, [activeLink, setActiveLink]);
+  return /* @__PURE__ */ jsx(Fragment, { children: filteredItems == null ? void 0 : filteredItems.map(
+    ({ component: Component, label, icon, children, href }, id) => (children == null ? void 0 : children.length) ? /* @__PURE__ */ jsx(
+      ExpandableSidebarItem,
+      {
+        items: children,
+        label,
+        icon,
+        href
+      },
+      label
+    ) : /* @__PURE__ */ jsx(SidebarItem, { component: Component, label, icon, href }, id)
+  ) });
+}
+
+export { SidebarItems };

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SearchBox = require('../../../search-box/SearchBox');
+var SidebarProvider = require('../../providers/SidebarProvider');
+
+const SidenavFiltering = () => {
+  const { activeQuery, setActiveQuery } = SidebarProvider.useSidebar();
+  const handleSearch = (value) => {
+    setActiveQuery == null ? void 0 : setActiveQuery(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SearchBox.SearchBox,
+    {
+      width: "100%",
+      inputSize: "sm",
+      value: activeQuery != null ? activeQuery : "",
+      onSearch: handleSearch,
+      placeholder: "Filtrer menu"
+    }
+  );
+};
+var SidenavFiltering_default = SidenavFiltering;
+
+module.exports = SidenavFiltering_default;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SidenavFiltering: React.FC;
+export default SidenavFiltering;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { SearchBox } from '../../../search-box/SearchBox';
+import { useSidebar } from '../../providers/SidebarProvider';
+
+const SidenavFiltering = () => {
+  const { activeQuery, setActiveQuery } = useSidebar();
+  const handleSearch = (value) => {
+    setActiveQuery == null ? void 0 : setActiveQuery(value);
+  };
+  return /* @__PURE__ */ jsx(
+    SearchBox,
+    {
+      width: "100%",
+      inputSize: "sm",
+      value: activeQuery != null ? activeQuery : "",
+      onSearch: handleSearch,
+      placeholder: "Filtrer menu"
+    }
+  );
+};
+var SidenavFiltering_default = SidenavFiltering;
+
+export { SidenavFiltering_default as default };

package/dist/components/sidebar/providers/SidebarProvider.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var nestedFiltering = require('../../../utils/arrays/nested-filtering');
+
+const SidebarContext = react.createContext({
+  defaultExpanded: null,
+  activeQuery: "",
+  isSidebarCollapsed: false,
+  setActiveQuery: () => {
+  },
+  triggerExpandAll: () => {
+  },
+  setIsSidebarCollapsed: () => {
+  },
+  resetExpandAll: () => {
+  },
+  activeLink: "",
+  setActiveLink: () => {
+  }
+});
+function SidebarProvider({
+  children,
+  items,
+  initialCollapsed = false
+}) {
+  const [defaultExpanded, setDefaultExpanded] = react.useState(null);
+  const [activeQuery, setActiveQuery] = react.useState("");
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = react.useState(initialCollapsed);
+  const [activeHref, setActiveHref] = react.useState("");
+  const triggerExpandAll = react.useCallback(() => setDefaultExpanded(true), []);
+  const resetExpandAll = react.useCallback(() => setDefaultExpanded(null), []);
+  const setActiveLink = react.useCallback((href) => setActiveHref(href), []);
+  const filteredItems = react.useMemo(() => {
+    return activeQuery ? nestedFiltering.nestedFiltering(items, {
+      keys: ["label", "tags"],
+      includeParents: true,
+      mode: "OR",
+      query: activeQuery
+    }) : items;
+  }, [items, activeQuery]);
+  react.useEffect(() => {
+    if (activeQuery) {
+      triggerExpandAll();
+    }
+  }, [activeQuery, triggerExpandAll]);
+  const value = react.useMemo(
+    () => ({
+      defaultExpanded,
+      filteredItems,
+      activeQuery,
+      isSidebarCollapsed,
+      setActiveQuery,
+      triggerExpandAll,
+      resetExpandAll,
+      setIsSidebarCollapsed,
+      activeLink: activeHref,
+      setActiveLink
+    }),
+    [
+      defaultExpanded,
+      filteredItems,
+      activeQuery,
+      isSidebarCollapsed,
+      setActiveQuery,
+      triggerExpandAll,
+      resetExpandAll,
+      setIsSidebarCollapsed,
+      activeHref,
+      setActiveLink
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value, children });
+}
+function useSidebar() {
+  return react.useContext(SidebarContext);
+}
+
+exports.SidebarProvider = SidebarProvider;
+exports.useSidebar = useSidebar;

package/dist/components/sidebar/providers/SidebarProvider.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { NavBarItem } from '@/components/nav-bar/NavBar';
+export type SidebarContextValue = {
+    defaultExpanded: boolean | null;
+    resetExpandAll: () => void;
+    activeQuery: string;
+    isSidebarCollapsed: boolean;
+    setActiveQuery: (query: string) => void;
+    triggerExpandAll: () => void;
+    setIsSidebarCollapsed: (v: boolean) => void;
+    filteredItems?: NavBarItem[];
+    activeLink?: string;
+    setActiveLink: (href: string) => void;
+};
+type SidebarProviderProps = {
+    children: React.ReactNode;
+    items: NavBarItem[];
+    initialQuery?: string | null;
+    initialCollapsed?: boolean;
+    initialCollapseChildren?: boolean;
+};
+export declare function SidebarProvider({ children, items, initialCollapsed, }: SidebarProviderProps): JSX.Element;
+export declare function useSidebar(): SidebarContextValue;
+export {};

package/dist/components/sidebar/providers/SidebarProvider.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
+import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
+
+const SidebarContext = createContext({
+  defaultExpanded: null,
+  activeQuery: "",
+  isSidebarCollapsed: false,
+  setActiveQuery: () => {
+  },
+  triggerExpandAll: () => {
+  },
+  setIsSidebarCollapsed: () => {
+  },
+  resetExpandAll: () => {
+  },
+  activeLink: "",
+  setActiveLink: () => {
+  }
+});
+function SidebarProvider({
+  children,
+  items,
+  initialCollapsed = false
+}) {
+  const [defaultExpanded, setDefaultExpanded] = useState(null);
+  const [activeQuery, setActiveQuery] = useState("");
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(initialCollapsed);
+  const [activeHref, setActiveHref] = useState("");
+  const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
+  const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
+  const setActiveLink = useCallback((href) => setActiveHref(href), []);
+  const filteredItems = useMemo(() => {
+    return activeQuery ? nestedFiltering(items, {
+      keys: ["label", "tags"],
+      includeParents: true,
+      mode: "OR",
+      query: activeQuery
+    }) : items;
+  }, [items, activeQuery]);
+  useEffect(() => {
+    if (activeQuery) {
+      triggerExpandAll();
+    }
+  }, [activeQuery, triggerExpandAll]);
+  const value = useMemo(
+    () => ({
+      defaultExpanded,
+      filteredItems,
+      activeQuery,
+      isSidebarCollapsed,
+      setActiveQuery,
+      triggerExpandAll,
+      resetExpandAll,
+      setIsSidebarCollapsed,
+      activeLink: activeHref,
+      setActiveLink
+    }),
+    [
+      defaultExpanded,
+      filteredItems,
+      activeQuery,
+      isSidebarCollapsed,
+      setActiveQuery,
+      triggerExpandAll,
+      resetExpandAll,
+      setIsSidebarCollapsed,
+      activeHref,
+      setActiveLink
+    ]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+function useSidebar() {
+  return useContext(SidebarContext);
+}
+
+export { SidebarProvider, useSidebar };

package/dist/components/skeleton-loader/SkeletonLoader.cjs

@@ -0,0 +1,270 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SkeletonLoaderItem = require('./skeleton-loader-item/SkeletonLoaderItem');
+
+function SkeletonLoader({
+  type,
+  rows = 3,
+  columns = 3,
+  variant = "default",
+  speedSec = 3
+}) {
+  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonLoaderItem.SkeletonLoaderItem,
+    {
+      width,
+      height,
+      radius,
+      variant,
+      speedSec
+    },
+    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
+  );
+  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonLoaderItem.SkeletonLoaderItem,
+    {
+      width: 80 + i % 3 * 30,
+      height: 30,
+      radius: 6,
+      variant,
+      speedSec,
+      ariaLabel: "Loading filter"
+    },
+    `pill-${i}`
+  ));
+  const textBlock = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonLoaderItem.SkeletonLoaderItem,
+    {
+      width: i === count - 1 ? "60%" : `${90 - i % 3 * 10}%`,
+      height: 12,
+      radius: 4,
+      variant,
+      speedSec,
+      ariaLabel: "Loading text line"
+    },
+    `text-${i}`
+  ));
+  const tableHeaderRow = () => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonLoaderItem.SkeletonLoaderItem,
+        {
+          height: 20,
+          width: "90%",
+          radius: 6,
+          variant,
+          speedSec,
+          ariaLabel: "Loading table header"
+        },
+        `thead-${i}`
+      ))
+    }
+  );
+  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonLoaderItem.SkeletonLoaderItem,
+        {
+          height: 20,
+          width: colIndex % 3 === 0 ? "93%" : colIndex % 3 === 1 ? "98%" : "90%",
+          radius: 4,
+          variant,
+          speedSec,
+          ariaLabel: "Loading table cell"
+        },
+        `tcell-${rowIndex}-${colIndex}`
+      ))
+    },
+    `trow-${rowIndex}`
+  );
+  const getSkeletonItems = () => {
+    switch (type) {
+      case "button": {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 12,
+              alignItems: "center",
+              justifyContent: "flex-start",
+              width: "100%",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 120,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 96,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              )
+            ]
+          }
+        );
+      }
+      case "card": {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: "100%",
+                  height: 160,
+                  radius: 12,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading card media"
+                }
+              ),
+              line("60%", 16, 6),
+              textBlock(3),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SkeletonLoaderItem.SkeletonLoaderItem,
+                  {
+                    width: 100,
+                    height: 30,
+                    variant,
+                    speedSec,
+                    ariaLabel: "Loading action"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SkeletonLoaderItem.SkeletonLoaderItem,
+                  {
+                    width: 72,
+                    height: 30,
+                    variant,
+                    speedSec,
+                    ariaLabel: "Loading action"
+                  }
+                )
+              ] })
+            ]
+          }
+        );
+      }
+      case "avatar": {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 12,
+              alignItems: "center",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 48,
+                  height: 48,
+                  radius: "50%",
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading avatar"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
+                line("40%", 14),
+                line("25%", 12)
+              ] })
+            ]
+          }
+        );
+      }
+      case "text": {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(rows) });
+      }
+      case "table": {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+          tableHeaderRow(),
+          Array.from({ length: rows }).map((_, r) => tableBodyRow(r))
+        ] });
+      }
+      case "filterbar": {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12,
+              flexWrap: "wrap",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(columns) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 240,
+                  height: 30,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading"
+                }
+              )
+            ]
+          }
+        );
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading content",
+      style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" },
+      children: getSkeletonItems()
+    }
+  );
+}
+
+exports.SkeletonLoader = SkeletonLoader;