trepur_components 2.3.3 → 2.3.5

package/lib/components/Accordion/index.js

@@ -1,15 +1,15 @@
-import { jsx as o } from "react/jsx-runtime";
-import e from "classnames";
-const t = ({
-  id: a,
-  className: c,
-  items: r
-}) => /* @__PURE__ */ o("div", { id: a, className: e(c, "theme-local"), children: r == null ? void 0 : r.map((l, d) => (
+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__ */ o("div", {})
-)) });
+  /* @__PURE__ */ r("div", {})
+)) }), m = d;
 export {
-  t as default
+  m as default
 };

package/lib/components/AlertBar/index.js

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { useState as d } from "react";
 import t from "classnames";
-const x = ({
+const f = ({
   id: a,
   className: o,
   type: s = "warning",
@@ -10,9 +10,9 @@ const x = ({
   // rightIconProps,
   textCenter: n = !1,
   isDismissable: l = !1,
-  onDismissClick: f
+  onDismissClick: g
 }) => {
-  const [e, g] = d({
+  const [r, h] = d({
     state: "open",
     display: !0
   }), c = t({
@@ -21,9 +21,9 @@ const x = ({
     "bg-error": s === "error",
     "bg-info-light": s === "info"
   }), p = t({
-    "opacity-100": e.state === "open",
-    "opacity-0": e.state === "closed",
-    hidden: !e.display
+    "opacity-100": r.state === "open",
+    "opacity-0": r.state === "closed",
+    hidden: !r.display
   }), u = t(
     o,
     c,
@@ -42,8 +42,8 @@ const x = ({
       "hover:cursor-pointer": l
     },
     "absolute right-0 pr-8 pt-3"
-  ), /* @__PURE__ */ r("div", { id: a, className: u, children: /* @__PURE__ */ r("h3", { className: m, children: i }) });
-};
+  ), /* @__PURE__ */ e("div", { id: a, className: u, children: /* @__PURE__ */ e("h3", { className: m, children: i }) });
+}, B = f;
 export {
-  x as default
+  B as default
 };

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, };

package/lib/index.js

@@ -1,12 +1,6 @@
 import { default as a } from "./components/Accordion/index.js";
 import { default as t } from "./components/AlertBar/index.js";
-import { default as f } from "./archive/Breadcrumbs/index.js";
-import { default as s } from "./archive/BreadcrumbsBordered/index.js";
-import { default as l } from "./archive/BreadcrumbsItem/index.js";
 export {
   a as Accordion,
-  t as AlertBar,
-  f as Breadcrumbs,
-  s as BreadcrumbsBordered,
-  l as BreadcrumbsItem
+  t as AlertBar
 };

package/lib/styles/base.css

@@ -3,6 +3,7 @@
 @tailwind base;
 @tailwind components;
 
+
 .theme-local {
   --color-primary: #0036a0;
   --color-secondary: #e2e2e2;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "trepur_components",
+  "version": "2.3.5",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "2.3.3",
   "private": false,
   "keywords": [
     "react",
@@ -10,10 +10,11 @@
     "ui"
   ],
   "license": "UNLICENSED",
-  "main": "lib/index.js",
-  "module": "dist/index.js",
-  "files": [
-    "lib/**/*"
+  ".": {
+    "import": "./lib/index.js"
+  },
+  "sideEffects": [
+    "*.css"
   ],
   "types": "lib/index.d.ts",
   "type": "module",
@@ -22,9 +23,6 @@
     "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",

package/postcss.config.js

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,116 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Accordion from '.';
+
+const propItems = [
+  {
+    preText: 'This is some text',
+    title: 'This is a title',
+    subtitle: 'This is a subtitle',
+    imageProps: {
+      src: 'https://picsum.photos/100/100',
+    },
+    children: (
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper
+        in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla
+        lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec
+        ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh,
+        posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu
+        dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam
+        lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis
+        luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo
+        sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida
+        risus, et bibendum nunc condimentum eu.
+      </p>
+    ),
+  },
+  {
+    preText:
+      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus nihil, molestias amet sed, corrupti debitis odit doloribus perspiciatis est, quasi illum culpa iusto. Molestias, ducimus. Provident, quibusdam fuga. Voluptatem, saepe.',
+    title: 'This is a title',
+    imageProps: {
+      src: 'https://picsum.photos/101/100',
+    },
+    children: (
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper
+        in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla
+        lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec
+        ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh,
+        posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu
+        dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam
+        lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis
+        luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo
+        sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida
+        risus, et bibendum nunc condimentum eu.
+      </p>
+    ),
+  },
+  {
+    subtitle: 'This is a subtitle',
+    imageProps: {
+      src: 'https://picsum.photos/100/101',
+    },
+    children: (
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper
+        in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla
+        lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec
+        ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh,
+        posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu
+        dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam
+        lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis
+        luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo
+        sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida
+        risus, et bibendum nunc condimentum eu.
+      </p>
+    ),
+  },
+  {
+    imageProps: {
+      src: 'https://picsum.photos/102/100',
+    },
+    children: (
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper
+        in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla
+        lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec
+        ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh,
+        posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu
+        dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam
+        lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis
+        luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo
+        sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida
+        risus, et bibendum nunc condimentum eu.
+      </p>
+    ),
+  },
+];
+
+const meta = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  argTypes: {
+    ...idAndClassName,
+    items: {
+      description: 'An array of collapsible props',
+      control: { type: 'array', default: undefined },
+      table: {
+        category: 'Accordion',
+        type: { summary: 'array' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    items: propItems,
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Accordion/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+// import Collapsible from '@components/Collapsible';
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  items: any;
+}
+
+const Accordion: React.FC<Props> = ({
+  id,
+  className,
+  items,
+}: Props): JSX.Element => {
+  return (
+    <div id={id} className={classNames(className, 'theme-local')}>
+      {items?.map((item: any, i: number) => {
+        return (
+          // <Collapsible key={`collapsible_item_${i}`} {...item}>
+          //   {item.children}
+          // </Collapsible>
+          <div></div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/AlertBar/AlertBar.stories.tsx

@@ -0,0 +1,95 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import AlertBar from '.';
+
+const meta = {
+  title: 'Components/Alert Bar',
+  component: AlertBar,
+  argTypes: {
+    ...idAndClassName,
+    type: {
+      type: { name: 'string', required: false },
+      options: ['success', 'warning', 'error', 'info'],
+      description: 'The type of alert to render',
+      table: {
+        type: { summary: 'warning' },
+        defaultValue: { summary: 'warning' },
+      },
+      defaultValue: 'warning',
+      control: { type: 'radio' },
+    },
+    text: {
+      type: { name: 'string', required: false },
+      description: 'The text to display in the component',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+
+    leftIconProps: {
+      description: 'The icon props for the icon to display aligned to the left',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    rightIconProps: {
+      description:
+        'The icon props for the icon to display aligned to the right',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    textCenter: {
+      type: { name: 'boolean', required: false },
+      description: 'Aligns the text in the center of the component',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+    isDismissable: {
+      type: { name: 'boolean', required: false },
+      description: 'Enables the component to be closed when set to true',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+    onDismissClick: {
+      type: { name: 'function', required: false },
+      description: 'The action to perform when the component is closed',
+      action: 'onClick',
+      table: {
+        type: {
+          summary: 'function',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    text: 'This is an alert bar message',
+    leftIconProps: {
+      type: 'heart',
+      colour: 'white',
+      hollow: true,
+    },
+    rightIconProps: {
+      type: 'heart',
+      colour: 'white',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/AlertBar/index.tsx

@@ -0,0 +1,115 @@
+import { MouseEventHandler, useState } from 'react';
+
+// import Icon, { type Props as iconProps } from '@components/Icon';
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  type?: 'success' | 'warning' | 'error' | 'info';
+  text?: string;
+  // leftIconProps?: iconProps;
+  // rightIconProps?: iconProps;
+  textCenter?: boolean;
+  isDismissable?: boolean;
+  onDismissClick?: MouseEventHandler;
+}
+
+const AlertBar = ({
+  id,
+  className,
+  type = 'warning',
+  text,
+  // leftIconProps,
+  // rightIconProps,
+  textCenter = false,
+  isDismissable = false,
+  onDismissClick,
+}: Props): JSX.Element => {
+  const [alertBarStatus, setAlertBarStatus] = useState({
+    state: 'open',
+    display: true,
+  });
+
+  // const iconLeft = leftIconProps != null && <Icon {...leftIconProps} />;
+
+  // const iconRight = rightIconProps != null && <Icon {...rightIconProps} />;
+
+  const bgColor = classNames({
+    'bg-success': type === 'success',
+    'bg-warning': type === 'warning',
+    'bg-error': type === 'error',
+    'bg-info-light': type === 'info',
+  });
+
+  const alertBarState = classNames({
+    'opacity-100': alertBarStatus.state === 'open',
+    'opacity-0': alertBarStatus.state === 'closed',
+    hidden: !alertBarStatus.display,
+  });
+
+  const classList = classNames(
+    className,
+    bgColor,
+    alertBarState,
+    'flex py-2 text-white duration-700 theme-local w-parent transition-opactiy',
+  );
+
+  const textClassList = classNames(
+    {
+      'text-center': textCenter,
+      // 'pl-20': !textCenter && leftIconProps !== null,
+      // 'pl-4': !textCenter && leftIconProps === null,
+    },
+    'w-full py-3',
+  );
+
+  const rightIconClasses = classNames(
+    {
+      'hover:cursor-pointer': isDismissable,
+    },
+    'absolute right-0 pr-8 pt-3',
+  );
+
+  const closeAlertBar = (e: any): void => {
+    setAlertBarStatus({
+      state: 'closed',
+      display: alertBarStatus.display,
+    });
+    setTimeout(() => {
+      setAlertBarStatus({
+        state: 'closed',
+        display: false,
+      });
+    }, 700);
+    if (onDismissClick != null) {
+      onDismissClick(e);
+    }
+  };
+
+  // const dismissIcon = <Icon type="multiply" colour="white" />;
+
+  return (
+    <div id={id} className={classList}>
+      {/* {leftIconProps != null && (
+        <span className='absolute pl-8 pt-3'>{iconLeft}</span>
+      )} */}
+      <h3 className={textClassList}>{text}</h3>
+      {/* {isDismissable && (
+        <a
+          className={rightIconClasses}
+          onClick={(e) => {
+            closeAlertBar(e);
+          }}
+        >
+          <span>{dismissIcon}</span>
+        </a>
+      )} */}
+      {/* {iconRight != null && !isDismissable && (
+        <span className={rightIconClasses}>{iconRight}</span>
+      )} */}
+    </div>
+  );
+};
+
+export default AlertBar;

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Avatar from '.';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};