trepur_components 2.3.6 → 2.3.8

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

@@ -0,0 +1,21 @@
+import { Props as imageProps } from '../Image';
+import { IconProps } from '../Icon';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    title?: string;
+    imageProps?: imageProps;
+    topRightIcon?: IconProps;
+    bottomRightIcon?: IconProps;
+    topLeftIcon?: IconProps;
+    bottomLeftIcon?: IconProps;
+    textLineOne?: string;
+    textLineTwo?: string;
+    textLineThree?: string;
+    onClick?: () => void;
+    onCounterClick?: (count: number) => void;
+    count?: number;
+    isSelected?: boolean;
+}
+export declare const ProductCardV2: ({ id, className, imageProps, title, textLineOne, textLineTwo, textLineThree, topRightIcon, bottomRightIcon, topLeftIcon, bottomLeftIcon, onClick, onCounterClick, count, isSelected, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/ProductCardV2/index.js

@@ -0,0 +1,67 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { Counter as n } from "../Counter/index.js";
+import { Icon as s } from "../Icon/index.js";
+import g from "classnames";
+const P = ({
+  id: f,
+  className: u,
+  imageProps: v,
+  title: d,
+  textLineOne: l,
+  textLineTwo: t,
+  textLineThree: c,
+  topRightIcon: m,
+  bottomRightIcon: o,
+  topLeftIcon: i,
+  bottomLeftIcon: h,
+  onClick: N,
+  onCounterClick: e,
+  count: x,
+  isSelected: b = !1
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    id: f,
+    className: g(
+      {
+        "rounded-lg border-2 border-border-light p-2": b
+      },
+      u,
+      "max-w-[600px] scale-100 transform cursor-pointer duration-300"
+    ),
+    onClick: N,
+    children: [
+      /* @__PURE__ */ a("div", { className: "relative", children: [
+        /* @__PURE__ */ r(
+          "img",
+          {
+            className: "aspect-square w-full rounded-xl bg-white object-cover",
+            ...v
+          }
+        ),
+        m && /* @__PURE__ */ r(s, { ...m }),
+        o && /* @__PURE__ */ r(s, { ...o, colour: "success" }),
+        i && /* @__PURE__ */ r(s, { ...i }),
+        h && /* @__PURE__ */ r(s, { ...h, colour: "success" }),
+        x && /* @__PURE__ */ r("div", { className: "absolute bottom-4 left-4 cursor-pointer", children: /* @__PURE__ */ r(
+          n,
+          {
+            count: x,
+            onClick: (p) => {
+              e == null || e(p);
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "mt-4", children: [
+        d !== void 0 && /* @__PURE__ */ r("h3", { className: "text-md font-light text-ink", children: d }),
+        l !== void 0 && /* @__PURE__ */ r("h4", { className: "text-sm font-extraLight text-border-dark", children: l }),
+        t !== void 0 && /* @__PURE__ */ r("h4", { className: "text-sm font-extraLight text-border-dark", children: t }),
+        c !== void 0 && /* @__PURE__ */ r("h4", { className: "text-sm font-extraLight text-border-dark", children: c })
+      ] })
+    ]
+  }
+);
+export {
+  P as ProductCardV2
+};

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

@@ -0,0 +1,51 @@
+import { Proficiencies } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, title, description, proficiencies, bgColour, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    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: {
+        title: string;
+        proficiencies: {
+            src: string;
+            overlayText: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Proficiencies>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import { Colours } from '../../utils/controls';
+import { Props as imageProps } from '../Image';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    title?: string;
+    description?: string;
+    proficiencies: imageProps[];
+    bgColour: Colours;
+}
+export declare const Proficiencies: ({ id, className, title, description, proficiencies, bgColour, }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,80 @@
+import { Profile } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, profileLinks, alignment, imageHeight, imageWidth, rounded, bordered, imageProps, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        imageProps: {
+            type: {
+                name: string;
+                value: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        alignment: {
+            description: string;
+            control: string;
+            options: string[];
+            table: {
+                category: string;
+            };
+        };
+        profileLinks: {
+            description: string;
+            control: string;
+            table: {
+                category: 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: {
+        imageProps: {
+            src: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Profile>;
+export declare const Default: Story;

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

@@ -0,0 +1,17 @@
+import { Props as imageProps } from '../Image';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    profileLinks?: Array<{
+        name: string;
+        link: string;
+    }>;
+    alignment?: 'left' | 'right';
+    imageHeight?: number;
+    imageWidth?: number;
+    rounded?: boolean;
+    bordered?: boolean;
+    imageProps?: imageProps;
+}
+export declare const Profile: ({ id, className, profileLinks, alignment, imageHeight, imageWidth, rounded, bordered, imageProps, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Profile/index.js

@@ -0,0 +1,78 @@
+import { jsxs as $, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Image as A } from "../Image/index.js";
+import r from "classnames";
+const C = ({
+  id: m,
+  className: i,
+  profileLinks: c,
+  alignment: t,
+  imageHeight: f = 0,
+  imageWidth: a = 0,
+  rounded: h,
+  bordered: u,
+  imageProps: l
+}) => {
+  const [o, x] = p(!1), s = r({
+    "float-right": t === "right",
+    "float-left": t === "left"
+  }), b = r({
+    "-mr-16 mt-16": t === "right",
+    " -ml-16 mt-16": t === "left"
+  }), N = r({
+    "text-center": t !== "right" && t !== "left"
+  }), v = r(
+    {
+      "rounded-full": h,
+      border: u
+    },
+    i,
+    `h-${f} w-${a}`,
+    "object-cover text-center"
+  ), w = (l == null ? void 0 : l.src) !== void 0 ? l.src : "";
+  return /* @__PURE__ */ $(j, { children: [
+    /* @__PURE__ */ e("div", { id: m, className: v, children: /* @__PURE__ */ e(
+      "div",
+      {
+        className: r(
+          "inset-y-0 hidden  sm:inline-flex",
+          s
+        ),
+        children: /* @__PURE__ */ e(
+          "button",
+          {
+            className: "flex rounded-full",
+            onClick: () => {
+              x(!o);
+            },
+            children: /* @__PURE__ */ e(A, { src: w, ...l })
+          }
+        )
+      }
+    ) }),
+    o && /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e(
+      "div",
+      {
+        className: r(
+          "z-10 w-48 shadow-lg sm:inline-block",
+          s,
+          b
+        ),
+        children: c == null ? void 0 : c.map((n, d) => /* @__PURE__ */ e(
+          "a",
+          {
+            href: n.link,
+            className: "block border-b px-4 py-2 text-sm font-bold",
+            role: "menuitem",
+            id: `user-menu-item-${d + 1}`,
+            children: n.name
+          },
+          `profile_link_${d + 1}`
+        ))
+      }
+    ) })
+  ] });
+};
+export {
+  C as Profile
+};

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

@@ -0,0 +1,62 @@
+import { Row } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, children }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        children: {
+            type: {
+                name: string;
+                value: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    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: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Row>;
+export declare const Default: Story;

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

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

package/lib/components/Row/index.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+import e from "classnames";
+const l = ({ id: s, className: o, children: r }) => {
+  const t = e(o, "flex flex-wrap");
+  return /* @__PURE__ */ a("div", { id: s, className: t, children: r });
+};
+export {
+  l as Row
+};

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

@@ -0,0 +1,86 @@
+import { Search } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        leftIconProps: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        rightIconProps: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        placeholder: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+            };
+        };
+        text: {
+            description: string;
+            control: string;
+            table: {
+                category: 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: {
+        placeholder: string;
+        leftIconProps: {
+            type: string;
+            className: string;
+            bgColour: string;
+        };
+        rightIconProps: {
+            type: string;
+            className: string;
+            bgColour: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Search>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import { IconProps } from '../Icon';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    onChange?: (val: string | number) => void;
+    placeholder?: string;
+    text?: string;
+    leftIconProps?: IconProps;
+    rightIconProps?: IconProps;
+}
+export declare const Search: ({ id, className, onChange, placeholder, text, leftIconProps, rightIconProps, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Search/index.js

@@ -0,0 +1,42 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Icon as r } from "../Icon/index.js";
+import n from "classnames";
+const N = ({
+  id: c,
+  className: o,
+  onChange: s,
+  placeholder: m,
+  text: i,
+  leftIconProps: l,
+  rightIconProps: a
+}) => {
+  const t = n(o, "flex"), v = n(
+    {
+      "pl-9": l !== void 0,
+      "pl-2": l === void 0
+    },
+    "w-full rounded-md border-2 py-2 pr-9"
+  ), p = s != null ? (u) => {
+    s(u.target.value);
+  } : void 0;
+  return /* @__PURE__ */ d("div", { id: c, className: t, children: [
+    /* @__PURE__ */ e("div", { children: i !== void 0 && /* @__PURE__ */ e("h2", { className: "font-base-lg py-2 pr-4", children: i }) }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ d("div", { className: "relative flex w-full", children: [
+      l !== void 0 && /* @__PURE__ */ e(r, { ...l }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          className: v,
+          onChange: p,
+          placeholder: m,
+          type: "text",
+          name: "search"
+        }
+      ),
+      a !== void 0 && /* @__PURE__ */ e(r, { ...a })
+    ] }) })
+  ] });
+};
+export {
+  N as Search
+};

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

@@ -0,0 +1,56 @@
+import { StoryObj } from '@storybook/react';
+import { Select } from './';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, options, value, label, onClick, required, fullWidth, }: import('./').SelectProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {
+        label: {
+            description: string;
+            control: string;
+            table: {
+                category: 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: {
+        label: string;
+        options: string[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;

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

@@ -0,0 +1,11 @@
+export interface SelectProps {
+    id?: string;
+    className?: string;
+    options: string[];
+    label: string;
+    value?: string;
+    onClick?: any;
+    fullWidth?: boolean;
+    required?: boolean;
+}
+export declare const Select: ({ id, className, options, value, label, onClick, required, fullWidth, }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Select/index.js

@@ -0,0 +1,68 @@
+import { jsxs as r, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { Icon as D } from "../Icon/index.js";
+import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
+import s from "classnames";
+const A = ({
+  id: h,
+  className: m,
+  options: l,
+  value: a,
+  label: f,
+  onClick: w,
+  required: x = !1,
+  fullWidth: c = !1
+}) => {
+  const [n, i] = d(!1), [u, b] = d(
+    a !== void 0 ? a : l == null ? void 0 : l[0]
+  ), p = (t) => {
+    w(t.target.textContent), b(t.target.textContent), i(!1);
+  }, o = s({
+    "w-full": c,
+    "sm:w-72": !c
+  }), g = s(
+    o,
+    m,
+    "w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4"
+  ), v = s(
+    o,
+    "absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll"
+  ), C = "bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2";
+  return /* @__PURE__ */ r(y, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        id: h,
+        className: g,
+        onClick: () => {
+          i(!n);
+        },
+        children: [
+          /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ r("div", { className: "absolute mt-2 flex bg-white text-xs font-thin", children: [
+              /* @__PURE__ */ e("p", { children: f }),
+              x && /* @__PURE__ */ e("p", { className: "font-semiBold text-error", children: " *" })
+            ] }),
+            /* @__PURE__ */ e("p", { className: "flex justify-between rounded-xl border-ink bg-white pb-1 pt-6 text-ink", children: u })
+          ] }),
+          /* @__PURE__ */ e(D, { colour: "ink", icon: j })
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ e("div", { className: s("relative z-20", o), children: /* @__PURE__ */ e("ul", { className: v, children: l == null ? void 0 : l.map((t, N) => /* @__PURE__ */ e(
+      "li",
+      {
+        className: C,
+        value: t,
+        onClick: (k) => {
+          p(k);
+        },
+        children: t
+      },
+      `key_${N}`
+    )) }) })
+  ] });
+};
+export {
+  A as Select
+};