trepur_components 2.3.6 → 2.3.8

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

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

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    onClick?: React.MouseEventHandler;
+    hoverText?: string;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    type?: 'social' | 'icon' | 'default';
+    href?: string;
+    label?: string;
+    target?: string;
+    rounded?: boolean;
+    disabled?: boolean;
+    isLoading?: boolean;
+    openInNewTab?: boolean;
+    children?: any;
+}
+export declare const Button: ({ id, className, onClick, variant, type, href, target, label, rounded, disabled, isLoading, openInNewTab, children, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Button/index.js

@@ -0,0 +1,66 @@
+import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import { Icon as N } from "../Icon/index.js";
+import { faSpinner as B } from "@fortawesome/fontawesome-free-solid";
+import t from "classnames";
+const k = ({
+  id: p,
+  className: u,
+  onClick: n,
+  variant: o = "primary",
+  type: a = "default",
+  href: c,
+  target: i,
+  label: d,
+  rounded: l = !0,
+  disabled: r = !1,
+  isLoading: e = !1,
+  openInNewTab: I = !1,
+  children: f
+}) => {
+  const b = t(
+    {
+      "px-1 py-1": a === "social",
+      "px-3": a === "icon",
+      "px-8": a === "default"
+    },
+    "py-3"
+  ), x = t(
+    {
+      invisible: !e
+    },
+    "absolute left-2/4 top-1/4 -ml-2"
+  ), g = t(
+    {
+      "border-secondary bg-primary text-secondary outline-primary": o === "primary",
+      "hover:border-primary hover:bg-secondary hover:text-primary focus:border-primary focus:bg-secondary focus:text-primary": !r && o === "primary",
+      "border-primary bg-secondary text-primary outline-secondary": o === "secondary",
+      "hover:border-tertiary hover:bg-secondary hover:text-tertiary focus:border-tertiary focus:bg-secondary focus:text-tertiary": !r && o === "secondary",
+      "opacity-50": r,
+      "rounded-lg": l,
+      "rounded-none": !l
+    },
+    "transform border-2 text-sm duration-500 inline-block text-center focus:outline",
+    u,
+    b
+  ), h = /* @__PURE__ */ s(N, { icon: B });
+  let y = "button", m = {};
+  return (c || i) && (y = "a", m = { href: c, target: i }), /* @__PURE__ */ v(
+    y,
+    {
+      ...m,
+      id: p,
+      className: g,
+      "aria-busy": e,
+      "aria-label": d,
+      ...n != null && { onClick: n },
+      ...r && { disabled: r },
+      children: [
+        /* @__PURE__ */ s("div", { className: t({ invisible: e }), children: f }),
+        e && /* @__PURE__ */ s("div", { className: x, children: h })
+      ]
+    }
+  );
+};
+export {
+  k as Button
+};

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

@@ -0,0 +1,136 @@
+import { CalendarComponent } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, onChange, useRange, minDetail, minDate, maxDate, showNavigation, disabledDates, showDoubleView, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        useRange: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        showDoubleView: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        showNavigation: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        minDetail: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        minDate: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: Date;
+                };
+            };
+            defaultValue: Date;
+        };
+        maxDate: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: Date;
+                };
+            };
+            defaultValue: Date;
+        };
+        disabledDates: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: never[];
+                };
+            };
+            defaultValue: never[];
+        };
+        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: {};
+};
+export default meta;
+type Story = StoryObj<typeof CalendarComponent>;
+export declare const Default: Story;

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

@@ -0,0 +1,15 @@
+
+export type Detail = 'month' | 'year' | 'decade' | 'century';
+export interface Props {
+    id?: string;
+    className?: string;
+    onChange?: () => void;
+    useRange?: boolean;
+    minDetail?: Detail;
+    minDate?: Date;
+    maxDate?: Date;
+    showNavigation?: true;
+    disabledDates?: string[];
+    showDoubleView?: boolean;
+}
+export declare const CalendarComponent: ({ id, className, onChange, useRange, minDetail, minDate, maxDate, showNavigation, disabledDates, showDoubleView, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Calendar/index.js

@@ -0,0 +1,46 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useState as h } from "react";
+import v from "react-calendar";
+import "./style.css.js";
+const x = ({
+  id: i,
+  className: m,
+  onChange: s,
+  useRange: D = !1,
+  minDetail: u = "month",
+  minDate: c = /* @__PURE__ */ new Date(),
+  maxDate: d = new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() + 1)),
+  showNavigation: f = !0,
+  disabledDates: w = [],
+  showDoubleView: p = !0
+}) => {
+  const [n, r] = h(/* @__PURE__ */ new Date()), g = (e, t) => {
+    const a = new Intl.DateTimeFormat("en-gb", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(e == null ? void 0 : e.date);
+    return t.includes(a);
+  };
+  return /* @__PURE__ */ l("div", { id: i, className: m, children: /* @__PURE__ */ l(
+    v,
+    {
+      onActiveStartDateChange: ({ value: e, activeStartDate: t, action: a }) => {
+        const o = t !== null ? t : n;
+        a === "next" && r(new Date(o)), a === "prev" && r(new Date(o));
+      },
+      activeStartDate: n,
+      onChange: s,
+      selectRange: D,
+      minDetail: u,
+      minDate: c,
+      maxDate: d,
+      showNavigation: f,
+      showDoubleView: p,
+      tileDisabled: (e) => g(e, w)
+    }
+  ) });
+};
+export {
+  x as CalendarComponent
+};

package/lib/components/Calendar/style.css.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,108 @@
+import { Card } from '.';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, imageProps, videoProps, title, subTitle, description, href, target, buttonProps, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        imageProps: {
+            description: string;
+            table: {};
+        };
+        videoProps: {
+            description: string;
+            table: {};
+        };
+        title: {
+            description: string;
+            table: {};
+        };
+        subTitle: {
+            description: string;
+            table: {};
+        };
+        description: {
+            description: string;
+            table: {};
+        };
+        href: {
+            description: string;
+            table: {};
+        };
+        target: {
+            type: {
+                name: "string";
+                required: false;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+            control: {
+                type: string;
+            };
+        };
+        buttonProps: {
+            description: string;
+            table: {};
+        };
+        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;
+        };
+        title: string;
+        subTitle: string;
+        description: string;
+        href: string;
+        buttonProps: {
+            children: string;
+            disabled: false;
+            hoverText: string;
+            href: string;
+            rounded: true;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;

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

@@ -0,0 +1,17 @@
+import { Props as videoProps } from '../Video';
+import { Props as imageProps } from '../Image';
+import { Props as buttonProps } from '../Button';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    title?: string;
+    imageProps?: imageProps;
+    videoProps?: videoProps;
+    subTitle?: string;
+    description?: string;
+    href?: string;
+    target?: string;
+    buttonProps?: buttonProps;
+}
+export declare const Card: ({ id, className, imageProps, videoProps, title, subTitle, description, href, target, buttonProps, }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Card/index.js

@@ -0,0 +1,51 @@
+import { jsxs as m, jsx as d } from "react/jsx-runtime";
+import { Button as B } from "../Button/index.js";
+import { Video as F } from "../Video/index.js";
+const C = ({
+  id: N,
+  className: w,
+  imageProps: e,
+  videoProps: l,
+  title: a,
+  subTitle: i,
+  description: f,
+  href: n,
+  target: x,
+  buttonProps: c
+}) => {
+  let h = "div", g = {};
+  (n || x) && (h = "a", g = { href: n, title: a, target: x });
+  const v = (c == null ? void 0 : c.children) !== void 0 && (c.href !== void 0 || c.onClick !== void 0) && h === "div";
+  return /* @__PURE__ */ m(
+    h,
+    {
+      id: N,
+      className: `${w} flex max-w-96 flex-col overflow-hidden rounded-lg shadow-xl`,
+      ...g,
+      children: [
+        /* @__PURE__ */ d("div", { children: (l == null ? void 0 : l.mp4File) !== void 0 || (l == null ? void 0 : l.webmFile) !== void 0 || (l == null ? void 0 : l.ogvFile) !== void 0 ? /* @__PURE__ */ d(F, { ...l }) : e !== void 0 && /* @__PURE__ */ d(
+          "img",
+          {
+            className: "w-full",
+            title: `${(a == null ? void 0 : a.replace(/\s/g, "-")) ?? "a"}-logo`,
+            alt: a !== void 0 ? `${a == null ? void 0 : a.replace(/\s/g, "-")}-image` : "image",
+            ...e
+          }
+        ) }),
+        /* @__PURE__ */ m("div", { className: "p-2", children: [
+          /* @__PURE__ */ m("div", { children: [
+            a !== void 0 && /* @__PURE__ */ d("h3", { className: "text-md font-regular", children: a }),
+            i !== void 0 && /* @__PURE__ */ d("h4", { className: "text-sm font-regular text-ink", children: i })
+          ] }),
+          /* @__PURE__ */ m("div", { children: [
+            f !== void 0 && /* @__PURE__ */ d("p", { className: "flex-1 pb-6 text-sm font-light", children: f }),
+            v && /* @__PURE__ */ d(B, { ...c, children: c == null ? void 0 : c.children })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  C as Card
+};