trepur_components 2.3.2 → 2.3.4

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

@@ -0,0 +1,94 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('.').Props>;
+    argTypes: {
+        items: {
+            description: string;
+            control: {
+                type: string;
+                default: undefined;
+            };
+            table: {
+                category: string;
+                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: {
+        items: ({
+            preText: string;
+            title: string;
+            subtitle: string;
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+        } | {
+            preText: string;
+            title: string;
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+            subtitle?: undefined;
+        } | {
+            subtitle: string;
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+            preText?: undefined;
+            title?: undefined;
+        } | {
+            imageProps: {
+                src: string;
+            };
+            children: import("react/jsx-runtime").JSX.Element;
+            preText?: undefined;
+            title?: undefined;
+            subtitle?: undefined;
+        })[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    items: any;
+}
+declare const Accordion: React.FC<Props>;
+export default Accordion;

package/lib/components/Accordion/index.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import n from "classnames";
+const d = ({
+  id: c,
+  className: a,
+  items: o
+}) => /* @__PURE__ */ r("div", { id: c, className: n(a, "theme-local"), children: o == null ? void 0 : o.map((e, l) => (
+  // <Collapsible key={`collapsible_item_${i}`} {...item}>
+  //   {item.children}
+  // </Collapsible>
+  /* @__PURE__ */ r("div", {})
+)) }), m = d;
+export {
+  m as default
+};

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

@@ -0,0 +1,162 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ id, className, type, text, textCenter, isDismissable, onDismissClick, }: import('.').Props) => JSX.Element;
+    argTypes: {
+        type: {
+            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: {
+                    summary: string;
+                };
+            };
+        };
+        leftIconProps: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        rightIconProps: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        textCenter: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        isDismissable: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            defaultValue: string;
+        };
+        onDismissClick: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            action: 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: {
+        text: string;
+        leftIconProps: {
+            type: string;
+            colour: string;
+            hollow: boolean;
+        };
+        rightIconProps: {
+            type: string;
+            colour: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+
+export interface Props {
+    id?: string;
+    className?: string;
+    type?: 'success' | 'warning' | 'error' | 'info';
+    text?: string;
+    textCenter?: boolean;
+    isDismissable?: boolean;
+    onDismissClick?: MouseEventHandler;
+}
+declare const AlertBar: ({ id, className, type, text, textCenter, isDismissable, onDismissClick, }: Props) => JSX.Element;
+export default AlertBar;

package/lib/components/AlertBar/index.js

@@ -0,0 +1,49 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import t from "classnames";
+const f = ({
+  id: a,
+  className: o,
+  type: s = "warning",
+  text: i,
+  // leftIconProps,
+  // rightIconProps,
+  textCenter: n = !1,
+  isDismissable: l = !1,
+  onDismissClick: g
+}) => {
+  const [r, h] = d({
+    state: "open",
+    display: !0
+  }), c = t({
+    "bg-success": s === "success",
+    "bg-warning": s === "warning",
+    "bg-error": s === "error",
+    "bg-info-light": s === "info"
+  }), p = t({
+    "opacity-100": r.state === "open",
+    "opacity-0": r.state === "closed",
+    hidden: !r.display
+  }), u = t(
+    o,
+    c,
+    p,
+    "flex py-2 text-white duration-700 theme-local w-parent transition-opactiy"
+  ), m = t(
+    {
+      "text-center": n
+      // 'pl-20': !textCenter && leftIconProps !== null,
+      // 'pl-4': !textCenter && leftIconProps === null,
+    },
+    "w-full py-3"
+  );
+  return t(
+    {
+      "hover:cursor-pointer": l
+    },
+    "absolute right-0 pr-8 pt-3"
+  ), /* @__PURE__ */ e("div", { id: a, className: u, children: /* @__PURE__ */ e("h3", { className: m, children: i }) });
+}, B = f;
+export {
+  B as default
+};

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

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<{}>;
+    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: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const Avatar: React.FC;
+export default Avatar;

package/lib/components/index.d.ts

@@ -0,0 +1,4 @@
+import { default as AlertBar } from './AlertBar';
+import { default as Accordion } from './Accordion';
+
+export { Accordion, AlertBar, Breadcrumbs, BreadcrumbsBordered, BreadcrumbsItem, };

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/lib/index.js

@@ -0,0 +1,6 @@
+import { default as a } from "./components/Accordion/index.js";
+import { default as t } from "./components/AlertBar/index.js";
+export {
+  a as Accordion,
+  t as AlertBar
+};

package/lib/styles/base.css

@@ -0,0 +1,116 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css');
+
+@tailwind base;
+@tailwind components;
+
+.theme-local {
+  --color-primary: #0036a0;
+  --color-secondary: #e2e2e2;
+  --color-tertiary: #921457;
+  --color-ink: #495863;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-red: #bb0a1e;
+  --color-grey: #2c373b;
+  --color-light-grey: #495c63;
+  --color-lightest-grey: #f5f5f5;
+  --color-primary-strict: #ff007d;
+  --color-border: #d0d0d0;
+  --color-border-lightest: #eeeeee;
+  --color-border-light: #d8d8d8;
+  --color-border-dark: #616161;
+  --color-error-light: #ffd9d9;
+  --color-success-light: #e7f5e7;
+  --color-facebook: #3b5999;
+  --color-whatsapp: #25d366;
+  --color-twitter: #55acee;
+  --color-linkedin: #0a66c2;
+  --color-email: #c71610;
+  --color-github: #171515;
+  --color-instagram: #8a3ab9;
+  --color-interactive-facebook: #2d4474;
+  --color-interactive-whatsapp: #25d566;
+  --color-interactive-twitter: #55acee;
+  --color-interactive-linkedin: #0a66c2;
+  --color-interactive-instagram: #6d2e92;
+  --color-interactive-email: #9f110c;
+  --color-interactive-github: #000000;
+  --color-gold: #e2b13c;
+  --color-error: #b11013;
+  --color-warning: #ffd35c;
+  --color-success: #69c364;
+  --color-info-light: #d8eaf5;
+  --color-linkedin: #0e76a8;
+}
+
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Sora';
+  src: url('../fonts/Sora/static/Sora-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+.slick-track {
+  display: flex !important;
+}
+
+.slick-slide {
+  height: inherit !important;
+}
+
+.slick-slide > div {
+  height: 100%;
+  display: flex;
+}

package/lib/utils/controls.d.ts

@@ -0,0 +1,36 @@
+export type Colours = 'primary' | 'secondary' | 'white' | 'black' | 'grey' | 'gold' | 'facebook' | 'linkedin' | 'email' | 'instagram' | 'github' | 'interactive-facebook' | 'interactive-email' | 'interactive-linkedin' | 'interactive-instagram' | 'interactive-github' | 'success' | 'error' | 'ink' | 'transparent';
+export type SocialTypes = 'facebook' | 'instagram' | 'github' | 'linkedin';
+export declare const idAndClassName: {
+    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;
+            };
+        };
+    };
+};

package/lib/utils/matchMedia.d.ts

@@ -0,0 +1,2 @@
+declare const MatchMedia: (query: string) => boolean;
+export default MatchMedia;

package/lib/utils/screens.d.ts

@@ -0,0 +1,7 @@
+export declare const Screens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "trepur_components",
+  "version": "2.3.4",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "2.3.2",
   "private": false,
   "keywords": [
     "react",
@@ -10,20 +10,19 @@
     "ui"
   ],
   "license": "UNLICENSED",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist",
-    "README.md"
+  ".": {
+    "import": "./lib/index.js"
+  },
+  "sideEffects": [
+    "*.css"
   ],
+  "types": "lib/index.d.ts",
+  "type": "module",
   "scripts": {
     "build": "rm -rf lib && concurrently -n \"VITE,CSS,SB\" -c \"magenta,blue,red\" \"npx vite build\" \"npm run build-css\" \"npm run storybook-css\"",
     "build-css": "tailwindcss -i ./src/styles/base.css -o ./lib/styles/base.css --minify",
     "build-storybook": "npm run storybook-css && storybook build -o ./storybook-build --quiet",
     "storybook-css": "tailwindcss -i ./.storybook/tailwind/style.css -o ./.storybook/tailwind/preview.css --minify",
-    "compile:ts": "tsc && tsc-alias -p tsconfig.json",
-    "compile:css": "postcss src/**/**/**/*.css --base . --dir dist -m --verbose",
-    "compile": "rm -rf dist && npm run prettier:fix && npm run lint:fix && npm run compile:ts && npm run compile:css",
     "storybook": "storybook dev -p 6006",
     "lint": "eslint src --ext .tsx",
     "lint:fix": "npm run lint -- --fix",