trepur_components 2.3.6 → 2.3.8

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

@@ -0,0 +1,29 @@
+import { Colours } from '../../utils/controls';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    autoComplete?: string;
+    disabled?: boolean;
+    formId?: string;
+    height?: string;
+    maxLength?: number;
+    minLength?: number;
+    pattern?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    label?: string;
+    type?: string;
+    name?: string;
+    placeholder?: string;
+    withValidation?: boolean;
+    onChange?: (e: any) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onClick?: () => void;
+    errors?: string[];
+    errorState?: boolean;
+    value?: string;
+    bgColour?: Colours;
+}
+export declare const Input: ({ id, className, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, label, type, name, placeholder, onChange, onBlur, onFocus, onClick, withValidation, errors, errorState, value, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Input/index.js

@@ -0,0 +1,89 @@
+import { jsxs as o, Fragment as A, jsx as r } from "react/jsx-runtime";
+import { useRef as D } from "react";
+import n from "classnames";
+const K = ({
+  id: t,
+  className: m,
+  autoComplete: u,
+  disabled: p,
+  formId: f,
+  height: b,
+  maxLength: x,
+  minLength: h,
+  pattern: N,
+  required: c = !1,
+  readOnly: w,
+  label: k,
+  type: v,
+  name: g,
+  placeholder: $,
+  onChange: s,
+  onBlur: C,
+  onFocus: L,
+  onClick: j,
+  withValidation: I,
+  errors: l,
+  errorState: a = !1,
+  value: R
+}) => {
+  const i = t !== void 0 ? `-${t}` : "", y = n(
+    {
+      "border-2 border-error": l != null || a
+    },
+    "w-full rounded-md bg-white py-2 pl-4 text-ink cursor-pointer border border-black text-md"
+  ), B = n({
+    "text-error": l != null || a
+  }), F = n(
+    m,
+    "mt-4 w-full bg-white cursor-pointer"
+  ), d = D(null);
+  return /* @__PURE__ */ o(A, { children: [
+    /* @__PURE__ */ o("div", { id: t, className: F, onClick: () => {
+      var e;
+      (e = d.current) == null || e.focus();
+    }, children: [
+      /* @__PURE__ */ o("div", { className: "absolute -mt-3 ml-3 flex rounded-2xl bg-white px-1 text-sm font-regular", children: [
+        /* @__PURE__ */ r("p", { className: B, children: k }),
+        c && /* @__PURE__ */ r("p", { className: "font-semiBold text-error", children: " *" })
+      ] }),
+      /* @__PURE__ */ r(
+        "input",
+        {
+          ref: d,
+          id: `input${i}`,
+          className: y,
+          autoComplete: u,
+          disabled: p,
+          form: f,
+          height: b,
+          maxLength: x,
+          minLength: h,
+          pattern: N,
+          required: c,
+          readOnly: w,
+          type: v,
+          name: g,
+          value: R,
+          placeholder: $,
+          onChange: (e) => {
+            s == null || s(e);
+          },
+          onBlur: C,
+          onFocus: L,
+          onClick: j
+        }
+      )
+    ] }),
+    I && /* @__PURE__ */ r("div", { id: `errors${i}`, className: "text-sm font-regular text-error", children: l == null ? void 0 : l.map((e, z) => /* @__PURE__ */ r(
+      "p",
+      {
+        className: "mt-1 border-l-4 border-error pl-3",
+        children: e
+      },
+      `error-msg-${z + 0}`
+    )) })
+  ] });
+};
+export {
+  K as Input
+};

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

@@ -0,0 +1,48 @@
+import { Jumbotron } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, image, altText, title }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        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: {
+        image: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Jumbotron>;
+export declare const Default: Story;

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

@@ -0,0 +1,8 @@
+export interface Props {
+    id?: string;
+    className?: string;
+    image?: string;
+    altText?: string;
+    title?: string;
+}
+export declare const Jumbotron: ({ id, className, image, altText, title }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Jumbotron/index.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import c from "classnames";
+const f = ({ id: l, className: o, image: t, altText: a, title: e }) => {
+  const r = c(o, "h-96 overflow-hidden w-full");
+  return /* @__PURE__ */ s("div", { id: l, className: r, children: /* @__PURE__ */ s("img", { className: "h-full w-full object-cover", src: t, alt: a, title: e }) });
+};
+export {
+  f as Jumbotron
+};

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

@@ -0,0 +1,76 @@
+import { MenuButton } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, backgroundColour, menuItems, onClick, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        backgroundColour: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: string;
+        };
+        menuItems: {
+            description: string;
+            control: string;
+            table: {
+                type: {
+                    summary: 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: {
+        backgroundColour: string;
+        onClick: import('@storybook/addon-actions').HandlerFunction;
+        menuItems: {
+            name: string;
+            href: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof MenuButton>;
+export declare const Default: Story;

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

@@ -0,0 +1,14 @@
+import { Colours } from '../../utils/controls';
+import { default as React } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    backgroundColour?: Colours;
+    menuItems: Array<{
+        name: string;
+        href: string;
+    }>;
+    onClick?: React.MouseEventHandler;
+}
+export declare const MenuButton: ({ id, className, backgroundColour, menuItems, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/MenuButton/index.js

@@ -0,0 +1,56 @@
+import { jsx as t, Fragment as m, jsxs as o } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { DropdownMenu as l } from "../DropdownMenu/index.js";
+import { Image as c } from "../Image/index.js";
+import p from "classnames";
+const M = ({
+  id: d,
+  className: a,
+  backgroundColour: w = "white",
+  menuItems: r,
+  onClick: e
+}) => {
+  const [s, i] = u(!1), n = p(
+    a,
+    "h-[45px] w-[80px] overflow-hidden rounded-full border-2 border-lightest-grey my-auto flex cursor-pointer justify-between pl-2 text-center hover:shadow-md"
+  );
+  return r ? /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        id: d,
+        className: n,
+        onClick: () => {
+          i(!s);
+        },
+        children: [
+          /* @__PURE__ */ t("div", { className: "mx-auto my-auto", onClick: (h) => e == null ? void 0 : e(h), children: /* @__PURE__ */ o(
+            "svg",
+            {
+              width: "18",
+              height: "24",
+              viewBox: "0 0 24 15",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ t("path", { d: "M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z" }),
+                /* @__PURE__ */ t("path", { d: "M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z" }),
+                /* @__PURE__ */ t("path", { d: "M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            c,
+            {
+              src: "https://picsum.photos/300/300",
+              className: "mx-auto my-auto h-8 w-8 rounded-full object-contain"
+            }
+          )
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(l, { menuItems: r }) })
+  ] }) : /* @__PURE__ */ t(m, {});
+};
+export {
+  M as MenuButton
+};

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

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, children, visible, onOverlayClick, mobileGutter, animationStyle, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        id: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            type: {
+                name: string;
+                value: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onOverlayClick: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+        };
+    };
+    args: {
+        visible: boolean;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const _Modal: (args: any) => React.ReactElement;
+export default meta;

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+    children?: React.ReactNode;
+    visible?: boolean;
+    onOverlayClick?: () => void;
+    mobileGutter?: boolean;
+    animationStyle?: 'fade' | 'slideBottom';
+}
+export declare const Modal: ({ id, className, children, visible, onOverlayClick, mobileGutter, animationStyle, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Modal/index.js

@@ -0,0 +1,45 @@
+import { jsx as a, Fragment as l, jsxs as w } from "react/jsx-runtime";
+import { useState as c, useEffect as k } from "react";
+import u from "classnames";
+const g = ({
+  id: d,
+  className: m,
+  children: o,
+  visible: t = !1,
+  onOverlayClick: f,
+  mobileGutter: p,
+  animationStyle: x = "fade"
+}) => {
+  const [s, r] = c(!t), [i, n] = c(t);
+  k(() => {
+    let e;
+    return t ? (r(!1), e = setTimeout(() => {
+      n(!0);
+    }, 100)) : (n(!1), e = setTimeout(() => {
+      r(!0);
+    }, 300)), () => {
+      clearTimeout(e);
+    };
+  }, [t]);
+  const y = u(
+    {
+      "opacity-100": !s && i
+    },
+    "block h-screen w-screen fixed right-0 top-0 z-50 opacity-0 transition-opacity duration-300 ease-linear ease-out",
+    m
+  ), h = u(
+    {
+      "opacity-100": i,
+      "px-4 md:px-0": p,
+      "transition-transform duration-300 ease-linear ease-out opacity-100 translate-y-full": x === "slideBottom"
+    },
+    " mx-auto flex w-full md:w-auto fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform opacity-0 transition-opacity duration-300 ease-linear ease-out"
+  );
+  return s ? /* @__PURE__ */ a(l, {}) : /* @__PURE__ */ w(l, { children: [
+    /* @__PURE__ */ a("div", { id: d, className: y, onClick: f }),
+    o && /* @__PURE__ */ a("div", { className: h, children: o })
+  ] });
+};
+export {
+  g as Modal
+};

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

@@ -0,0 +1,154 @@
+import { NavItem } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, href, onClick, tabindex, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        title: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        href: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onClick: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        bordered: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: boolean;
+        };
+        rounded: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: boolean;
+        };
+        underlineOnHover: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: boolean;
+        };
+        isActive: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: boolean;
+        };
+        variant: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: 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: {
+        title: string;
+        href: string;
+        underlineOnHover: boolean;
+        onClick: import('@storybook/addon-actions').HandlerFunction;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof NavItem>;
+export declare const Default: Story;

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    title: string;
+    href?: string;
+    onClick?: React.MouseEventHandler;
+    bordered?: boolean;
+    rounded?: boolean;
+    underlineOnHover?: boolean;
+    isActive?: boolean;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    tabindex?: number;
+}
+export declare const NavItem: ({ id, className, title, href, onClick, tabindex, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/NavItem/index.js

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import l from "classnames";
+const p = ({
+  id: r,
+  className: e,
+  title: t,
+  href: n = "/",
+  onClick: o,
+  tabindex: a
+}) => {
+  const c = l(e, "w-auto list-none");
+  return /* @__PURE__ */ s("div", { id: r, className: c, children: /* @__PURE__ */ s(
+    "a",
+    {
+      href: n,
+      onClick: o,
+      className: "rounded-xl border-2 border-transparent p-2",
+      ...a !== void 0 && { tabIndex: a },
+      children: /* @__PURE__ */ s("span", { className: "whitespace-nowrap text-center", children: t })
+    }
+  ) });
+};
+export {
+  p as NavItem
+};