trepur_components 2.3.7 → 2.3.8

package/lib/components/NavOld/NavOld.stories.d.ts

@@ -0,0 +1,290 @@
+import { NavOld } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, navLinks, withMobileSideBar, withMobileDropdown, dropdownNavHeight, logo, logoDarkTheme, mobileLogo, mobileLogoDarkTheme, logoLink, mobileClasses, getNavStatus, variant, stickyNavVariant, text, textLink, withStickyNavShadow, withDesktopShadow, profileMenu, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
+    };
+    argTypes: {
+        navLinks: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        withMobileSideBar: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: boolean;
+        };
+        withMobileDropdown: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: boolean;
+        };
+        dropdownNavHeight: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: undefined;
+        };
+        logo: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        logoDarkTheme: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        mobileLogo: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        mobileLogoDarkTheme: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        logoLink: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        mobileClasses: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        fixedTop: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        profileMenuItems: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        getNavStatus: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        variant: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        textLink: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: undefined;
+        };
+        bgColour: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        id: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+                default: boolean;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        logoLink: string;
+        navLinks: {
+            title: string;
+            href: string;
+            isActive: boolean;
+        }[];
+        logo: string;
+        logoDarkTheme: string;
+        mobileLogo: string;
+        mobileLogoDarkTheme: string;
+        getNavStatus: (asSideBar: any, status: any) => void;
+        withStickyNavShadow: boolean;
+        withDesktopShadow: boolean;
+        withMobileSideBar: boolean;
+        profileMenu: {
+            menuItems: {
+                name: string;
+                href: string;
+            }[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof NavOld>;
+export declare const Default: Story;

package/lib/components/NavOld/StickyNav.d.ts

@@ -0,0 +1,22 @@
+import { Props as navItemProps } from '../NavItem';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    navLinks: navItemProps[];
+    withMobileSideBar?: boolean;
+    withMobileDropdown?: boolean;
+    dropdownNavHeight: string;
+    logo: string;
+    logoDarkTheme: string;
+    mobileLogo: string;
+    mobileLogoDarkTheme: string;
+    logoLink: string;
+    mobileClasses?: string;
+    getNavStatus?: (asSideBar: boolean, open: boolean) => void;
+    variant: 'primary' | 'secondary' | 'tertiary';
+    visible?: boolean;
+    tabindex?: number;
+    withShadow?: boolean;
+}
+export declare const StickyNav: ({ id, className, navLinks, withMobileSideBar, withMobileDropdown, dropdownNavHeight, logo, logoDarkTheme, mobileLogo, mobileLogoDarkTheme, logoLink, mobileClasses, getNavStatus, variant, visible, tabindex, withShadow, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/NavOld/StickyNav.js

@@ -0,0 +1,135 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Container as u } from "../Container/index.js";
+import { HamburgerIcon as P } from "../HamburgerIcon/index.js";
+import { Image as w } from "../Image/index.js";
+import { NavItem as h } from "../NavItem/index.js";
+import a from "classnames";
+const S = ({
+  id: N,
+  className: y,
+  navLinks: r,
+  withMobileSideBar: c = !1,
+  withMobileDropdown: b = !1,
+  dropdownNavHeight: x,
+  logo: _,
+  logoDarkTheme: q,
+  mobileLogo: g,
+  mobileLogoDarkTheme: A,
+  logoLink: n,
+  mobileClasses: v,
+  getNavStatus: i,
+  variant: l = "primary",
+  visible: C = !1,
+  tabindex: o = 0,
+  withShadow: I = !1
+}) => {
+  const [t, $] = p(!1), [m, j] = p(!1), z = a(
+    {
+      "opacity-100 transition-all duration-1000": C,
+      "drop-shadow-lg": I
+    },
+    y,
+    "fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500"
+  ), D = a(
+    {
+      "w-0": !t,
+      "h-screen w-full sm:w-1/3": t
+    },
+    "fixed z-50 h-full overflow-hidden duration-700 md:hidden"
+  ), H = a(
+    {
+      "h-0": !m,
+      [`h-${x}`]: m
+    },
+    "z-50 overflow-hidden md:hidden"
+  ), O = a(
+    "flex items-center md:hidden",
+    v
+  ), T = () => {
+    i == null || i(c, !t), c ? $(!t) : j(!m);
+  };
+  return /* @__PURE__ */ f("div", { id: `sticky_${N ?? "nav"}`, className: z, children: [
+    /* @__PURE__ */ f(u, { withPadding: !0, className: O, children: [
+      /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-8 top-4", children: /* @__PURE__ */ e(P, { onClick: T, variant: l }) }),
+      /* @__PURE__ */ e(
+        "a",
+        {
+          className: "mx-auto my-2 focus:border-2 focus:border-white",
+          href: n,
+          tabIndex: o,
+          children: /* @__PURE__ */ e(w, { src: g, height: 5, width: 5 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ f(
+      u,
+      {
+        withPadding: !0,
+        className: "relative z-50 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ e("div", { className: "my-2 hidden w-96 md:flex", children: /* @__PURE__ */ e(
+            "a",
+            {
+              className: "focus:border-2 focus:border-white",
+              href: n,
+              tabIndex: o,
+              children: /* @__PURE__ */ e(
+                w,
+                {
+                  src: _,
+                  title: "sticky-desktop-logo",
+                  altText: "sticky-desktop-logo",
+                  height: 5,
+                  width: 5
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e("nav", { className: "hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0", children: r == null ? void 0 : r.map((d, s) => /* @__PURE__ */ e(
+            h,
+            {
+              ...d,
+              className: "mx-auto w-24 text-center",
+              bordered: !1,
+              rounded: !1,
+              underlineOnHover: !0,
+              variant: l,
+              tabindex: o
+            },
+            `desktop_nav_item_${s}`
+          )) })
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ e("div", { className: D, children: r == null ? void 0 : r.map((d, s) => /* @__PURE__ */ e(
+      h,
+      {
+        ...d,
+        className: "pl-2 pt-4 focus:border-2 focus:border-white",
+        bordered: !1,
+        rounded: !1,
+        underlineOnHover: !0,
+        variant: l,
+        tabindex: o
+      },
+      `sidebar_nav_item_${s}`
+    )) }),
+    b && /* @__PURE__ */ e("div", { className: H, children: /* @__PURE__ */ e("div", { className: "space-y-1 pb-3 pt-2", children: r == null ? void 0 : r.map((d, s) => /* @__PURE__ */ e(
+      h,
+      {
+        ...d,
+        className: "pl-8 pt-2",
+        bordered: !1,
+        rounded: !1,
+        underlineOnHover: !0,
+        variant: l,
+        tabindex: o
+      },
+      `dropdown_nav_item_${s}`
+    )) }) })
+  ] });
+};
+export {
+  S as StickyNav
+};

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

@@ -0,0 +1,26 @@
+import { Props as navItemProps } from '../NavItem';
+import { Props as MenuButtonProps } from '../MenuButton';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    navLinks: navItemProps[];
+    withMobileSideBar?: boolean;
+    withMobileDropdown?: boolean;
+    dropdownNavHeight: string;
+    logo: string;
+    logoDarkTheme: string;
+    mobileLogo: string;
+    mobileLogoDarkTheme: string;
+    logoLink: string;
+    mobileClasses?: string;
+    getNavStatus?: (withMobileSideBar: boolean, open: boolean) => void;
+    variant: 'primary' | 'secondary' | 'tertiary';
+    text?: string;
+    textLink?: string;
+    stickyNavVariant: 'primary' | 'secondary' | 'tertiary';
+    withStickyNavShadow?: boolean;
+    withDesktopShadow?: boolean;
+    profileMenu?: MenuButtonProps;
+}
+export declare const NavOld: ({ id, className, navLinks, withMobileSideBar, withMobileDropdown, dropdownNavHeight, logo, logoDarkTheme, mobileLogo, mobileLogoDarkTheme, logoLink, mobileClasses, getNavStatus, variant, stickyNavVariant, text, textLink, withStickyNavShadow, withDesktopShadow, profileMenu, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/NavOld/index.js

@@ -0,0 +1,187 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as f, useEffect as V } from "react";
+import { Container as j } from "../Container/index.js";
+import { HamburgerIcon as W } from "../HamburgerIcon/index.js";
+import { HorizontalLine as X } from "../HorizontalLine/index.js";
+import { Image as C } from "../Image/index.js";
+import { MenuButton as Z } from "../MenuButton/index.js";
+import { NavItem as w } from "../NavItem/index.js";
+import l from "classnames";
+import { StickyNav as D } from "./StickyNav.js";
+const ce = ({
+  id: x,
+  className: H,
+  navLinks: r,
+  withMobileSideBar: t = !1,
+  withMobileDropdown: a = !1,
+  dropdownNavHeight: N,
+  logo: u,
+  logoDarkTheme: $,
+  mobileLogo: v,
+  mobileLogoDarkTheme: E,
+  logoLink: p,
+  mobileClasses: b,
+  getNavStatus: d,
+  variant: c = "primary",
+  stickyNavVariant: P = "primary",
+  text: _,
+  textLink: Y = "/",
+  withStickyNavShadow: q = !1,
+  withDesktopShadow: g = !1,
+  profileMenu: s
+}) => {
+  const [h, A] = f(!1), [m, F] = f(!1), [z, I] = f(!1), [y, G] = f(!1), J = l(
+    {
+      // [style.desktopNavDropShadow]: withDesktopShadow && !showStickyNav && !showSideNav
+    },
+    H
+  ), K = l(
+    {
+      "opacity-100 transition-all duration-1000": z
+    },
+    "fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500"
+  ), O = () => {
+    window.scrollY >= 80 ? I(!0) : I(!1);
+  };
+  V(() => (window.addEventListener("scroll", O), () => {
+    window.removeEventListener("scroll", O);
+  }));
+  const Q = l(
+    {
+      " w-0": !h,
+      "h-screen w-full sm:w-1/3": h
+    },
+    "fixed z-50 h-full overflow-hidden duration-700 md:hidden"
+  ), R = l(
+    {
+      "h-0": !m,
+      "": m,
+      [`h-${N}`]: m
+    },
+    "z-50 overflow-hidden md:hidden"
+  ), T = l(
+    "flex items-center md:hidden",
+    "relative z-50",
+    b
+  ), U = () => {
+    G(!y), t && (d == null || d(t, !h), A(!h)), a && (d == null || d(a, !m), F(!m));
+  };
+  return /* @__PURE__ */ n("div", { className: "flex min-h-screen flex-col", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: l(
+          " fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700",
+          [y] && "visible opacity-100",
+          [!y] && "invisible opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ n("header", { id: x, className: J, children: [
+      /* @__PURE__ */ n(j, { withPadding: !0, className: T, children: [
+        (t || a) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-8 top-4", children: /* @__PURE__ */ e(W, { onClick: U, variant: c }) }),
+        /* @__PURE__ */ e("a", { className: "mx-auto my-2", href: p, "aria-label": "mobile-logo", children: /* @__PURE__ */ e(C, { src: v, height: 5, width: 5 }) })
+      ] }),
+      /* @__PURE__ */ n(
+        j,
+        {
+          withPadding: !0,
+          className: "relative z-50 flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ e("div", { className: "my-2 hidden w-96 md:flex", children: /* @__PURE__ */ e(
+              "a",
+              {
+                className: "border-2 border-white",
+                href: p,
+                "aria-label": "desktop-logo",
+                children: /* @__PURE__ */ e(C, { src: u, height: 5, width: 5 })
+              }
+            ) }),
+            /* @__PURE__ */ e("nav", { className: "hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0", children: r == null ? void 0 : r.map((o, i) => /* @__PURE__ */ e(
+              w,
+              {
+                ...o,
+                className: "mx-auto w-24 text-center",
+                bordered: !1,
+                rounded: !1,
+                underlineOnHover: !0,
+                variant: c
+              },
+              `desktop_nav_item_${i}`
+            )) }),
+            !(s != null && s.menuItems) !== void 0 && /* @__PURE__ */ e("div", { className: "hidden w-96 flex-row-reverse lg:flex", children: _ !== void 0 && /* @__PURE__ */ e(
+              w,
+              {
+                title: _,
+                href: Y,
+                className: "mx-auto w-24 text-center",
+                underlineOnHover: !0,
+                variant: c
+              }
+            ) }),
+            (s == null ? void 0 : s.menuItems) && /* @__PURE__ */ e("div", { className: "hidden w-96 flex-row-reverse md:flex", children: /* @__PURE__ */ e(Z, { ...s, menuItems: s == null ? void 0 : s.menuItems }) })
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ e("div", { className: Q, children: r == null ? void 0 : r.map((o, i) => /* @__PURE__ */ n("div", { className: "flex-col", children: [
+        /* @__PURE__ */ e(
+          w,
+          {
+            ...o,
+            className: l(
+              "pl-2 pt-4 focus:border-2 focus:border-white",
+              "justify-center pb-4 pt-2"
+            ),
+            bordered: !1,
+            rounded: !1,
+            underlineOnHover: !0,
+            variant: c
+          }
+        ),
+        /* @__PURE__ */ e(
+          X,
+          {
+            colour: c === "secondary" ? "primary" : "secondary",
+            className: "mx-2"
+          }
+        )
+      ] }, `sidebar_nav_item_${i}`)) }),
+      a && /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ e("div", { className: "space-y-1 pb-3 pt-2", children: r == null ? void 0 : r.map((o, i) => /* @__PURE__ */ e(
+        w,
+        {
+          ...o,
+          className: "pl-8 pt-2",
+          bordered: !1,
+          rounded: !1,
+          underlineOnHover: !0,
+          variant: c
+        },
+        `dropdown_nav_item_${i}`
+      )) }) }),
+      /* @__PURE__ */ e(
+        D,
+        {
+          id: x,
+          className: K,
+          navLinks: r,
+          withMobileSideBar: t,
+          withMobileDropdown: a,
+          dropdownNavHeight: N,
+          logo: u,
+          logoDarkTheme: $,
+          mobileLogo: v,
+          mobileLogoDarkTheme: E,
+          logoLink: p,
+          mobileClasses: b,
+          ...d && { getNavStatus: d },
+          variant: P,
+          tabindex: z ? 0 : -1,
+          withShadow: q
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ce as NavOld
+};

package/lib/components/NavTwo/Dropdown.d.ts

@@ -0,0 +1,7 @@
+export interface Props {
+    id?: string;
+    className?: string;
+    children: any;
+    visible?: boolean;
+}
+export declare const Dropdown: ({ id, className, children, visible, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/NavTwo/Dropdown.js

@@ -0,0 +1,21 @@
+import { jsx as s } from "react/jsx-runtime";
+import n from "classnames";
+const t = ({
+  id: d,
+  className: e,
+  children: a,
+  visible: o = !1
+}) => {
+  const r = n(
+    {
+      "hidden h-0": !o,
+      "h-auto": o
+    },
+    "z-50 overflow-hidden md:hidden",
+    e
+  );
+  return /* @__PURE__ */ s("div", { id: d, className: r, children: /* @__PURE__ */ s("div", { className: "space-y-1 pb-3 pt-2", children: a }) });
+};
+export {
+  t as Dropdown
+};