trepur_components 2.3.7 → 2.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,
@@ -38,8 +38,11 @@
     "tailwindcss": "^3.0.23"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.2.0-6",
     "@fortawesome/fontawesome-common-types": "^6.5.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/fontawesome-free-regular": "^5.1.0-3",
+    "@fortawesome/fontawesome-free-solid": "^5.1.0-3",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
@@ -47,11 +50,11 @@
     "cmdk": "^0.2.0",
     "d3-array": "^3.2.4",
     "embla-carousel-react": "^8.0.0-rc17",
+    "eslint-config-love": "^47.0.0",
     "keen-slider": "^6.7.0",
     "luxon": "^3.4.4",
     "react-calendar": "^5.0.0",
     "react-hook-form": "^7.49.2",
-    "snapsvg-cjs": "^0.0.6",
     "sonner": "^1.4.0",
     "tailwind-merge": "^2.1.0",
     "tailwind-scrollbar": "^3.0.5",
@@ -115,7 +118,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
-    "snapsvg-cjs": "0.0.6",
+    "snapsvg-cjs": "^0.0.6",
     "storybook": "^7.6.17",
     "storybook-addon-themes": "^6.1.0",
     "storybook-react-i18next": "^2.0.10",

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import { Accordion } from '.';
+import { Accordion } from './';
 
 const propItems = [
   {
@@ -86,8 +86,8 @@ const propItems = [
         risus, et bibendum nunc condimentum eu.
       </p>
     ),
-  },
-];
+  }
+]
 
 const meta = {
   title: 'Components/Accordion',
@@ -101,16 +101,16 @@ const meta = {
         category: 'Accordion',
         type: { summary: 'array' },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     items: propItems,
-  },
+  }
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Accordion>;
 
 export const Default: Story = {};

package/src/components/Accordion/index.tsx

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

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { AlertBar } from '.';
@@ -25,7 +25,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
 
     leftIconProps: {
@@ -34,7 +34,7 @@ const meta = {
         category: '',
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     rightIconProps: {
       description:
@@ -43,7 +43,7 @@ const meta = {
         category: '',
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     textCenter: {
       type: { name: 'boolean', required: false },
@@ -72,8 +72,8 @@ const meta = {
           summary: 'function',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     text: 'This is an alert bar message',
@@ -85,11 +85,11 @@ const meta = {
     rightIconProps: {
       type: 'heart',
       colour: 'white',
-    },
-  },
+    }
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof AlertBar>;
 
 export const Default: Story = {};

package/src/components/AlertBar/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useState } from 'react';
+import { type MouseEventHandler, useState } from 'react';
 
 // import Icon, { type Props as iconProps } from '@components/Icon';
 import classNames from 'classnames';
@@ -25,11 +25,11 @@ export const AlertBar = ({
   textCenter = false,
   isDismissable = false,
   onDismissClick,
-}: Props): JSX.Element => {
+}: Props) => {
   const [alertBarStatus, setAlertBarStatus] = useState({
     state: 'open',
     display: true,
-  });
+  })
 
   // const iconLeft = leftIconProps != null && <Icon {...leftIconProps} />;
 
@@ -40,20 +40,20 @@ export const AlertBar = ({
     '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  w-parent transition-opactiy',
-  );
+  )
 
   const textClassList = classNames(
     {
@@ -62,25 +62,25 @@ export const AlertBar = ({
       // '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);
@@ -110,4 +110,4 @@ export const AlertBar = ({
       )} */}
     </div>
   );
-};
+}

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Avatar from '.';
+import { Avatar } from '.';
 
 const meta = {
   title: 'Components/Avatar',
@@ -10,7 +10,7 @@ const meta = {
     ...idAndClassName,
   },
   args: {},
-};
+}
 
 export default meta;
 

package/src/components/Avatar/index.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
-let Snap: any;
-if (typeof window !== 'undefined') {
-  Snap = require('snapsvg-cjs');
-}
-const Avatar: React.FC = (): any => {
+// @ts-expect-error
+import Snap from 'snapsvg-cjs';
+
+export const Avatar: React.FC = (): any => {
   const [s, setS] = useState(null);
 
   let rightEyeWhite: any,
@@ -67,7 +66,7 @@ const Avatar: React.FC = (): any => {
       mask: beardGroup,
       fill: beardColour,
       opacity: 0.6,
-    });
+    })
 
     const outerHair = s?.rect(103, 90, 68, 60, 25).attr({ fill: 'white' });
     const innerHair = s?.rect(109, 105, 56, 40, 10);
@@ -75,7 +74,7 @@ const Avatar: React.FC = (): any => {
     const baseHair = s?.rect(103, 90, 68, 40).attr({
       mask: hairGroup,
       fill: hairColour,
-    });
+    })
     const hairLevel1 = s
       ?.rect(113, 88, 50, 16, 10)
       .attr({ fill: hairColour })
@@ -88,7 +87,7 @@ const Avatar: React.FC = (): any => {
     const nose = s?.rect(129, 140, 12, 10)?.attr({
       mask: noseGroup,
       fill: noseColour,
-    });
+    })
 
     const leftEar = s?.circle(103, 135, 5)?.attr({ fill: 'white' });
     const leftEarMask = s
@@ -180,7 +179,7 @@ const Avatar: React.FC = (): any => {
       ears,
       hair,
       beard,
-    );
+    )
     torso = s?.group(rucksack, hood, body, neck, zip);
     legs = s
       ?.group(leftThigh, rightThigh, wasteBand, shoes)
@@ -191,10 +190,10 @@ const Avatar: React.FC = (): any => {
 
     mouthCutOff?.attr({
       mask: mouth,
-    });
+    })
 
     callBack(avatar);
-  };
+  }
 
   const nextFrame = (s: any, frameArray: any, frame: number): void => {
     if (frame >= frameArray.length) {
@@ -208,8 +207,8 @@ const Avatar: React.FC = (): any => {
       frameArray[frame].dur,
       null,
       nextFrame.bind(null, Snap, frameArray, frame + 1),
-    );
-  };
+    )
+  }
 
   const rightWave = [
     {
@@ -274,8 +273,8 @@ const Avatar: React.FC = (): any => {
       from: 120,
       to: 0,
       dur: 100,
-    },
-  ];
+    }
+  ]
 
   const leftWave = [
     {
@@ -340,8 +339,8 @@ const Avatar: React.FC = (): any => {
       from: -120,
       to: 0,
       dur: 100,
-    },
-  ];
+    }
+  ]
 
   const jump = (): void => {
     torso.animate({ transform: 't0,20' }, 500);
@@ -361,24 +360,24 @@ const Avatar: React.FC = (): any => {
         straps.animate({ transform: 't0,0' }, 200);
         hands.animate({ transform: 't0,0' }, 200);
         legs.animate({ transform: 't0,0' }, 200);
-      });
+      })
     });
-  };
+  }
 
   const eyesLeft = (duration: any): void => {
     leftEyePupil.animate({ transform: 't2,0' }, duration);
     rightEyePupil.animate({ transform: 't2,0' }, duration);
-  };
+  }
 
   const eyesRight = (duration: any): void => {
     leftEyePupil.animate({ transform: 't-2,0' }, duration);
     rightEyePupil.animate({ transform: 't-2,0' }, duration);
-  };
+  }
 
   const eyesCenter = (duration: any): void => {
     leftEyePupil.animate({ transform: 't0,0' }, duration);
     rightEyePupil.animate({ transform: 't0,0' }, duration);
-  };
+  }
 
   const blink = (times: number): void => {
     if (times < 1) return;
@@ -392,14 +391,14 @@ const Avatar: React.FC = (): any => {
         rightEyeWhite?.animate({ ry: 4 }, 200);
         rightEyePupil?.animate({ ry: 3 }, 200, () => {
           blink(times - 1);
-        });
+        })
       });
-    });
-  };
+    })
+  }
 
   const animate = (s: any, animation: any): any => {
     nextFrame(s, animation, 0);
-  };
+  }
 
   // const drawPath = (s: any): void => {
   //   const linePath =
@@ -434,7 +433,7 @@ const Avatar: React.FC = (): any => {
     const makeBlinkHappen = (): void => {
       const randNum = Math.floor(Math.random() * 2) + 1;
       blink(randNum);
-    };
+    }
 
     const loadActions = (): void => {
       if (!avatar) return;
@@ -454,28 +453,28 @@ const Avatar: React.FC = (): any => {
       armless?.click(jump);
       leftArm?.hover(() => {
         eyesLeft(200);
-      });
+      })
       leftThigh?.hover(() => {
         eyesLeft(200);
-      });
+      })
       leftShoe?.hover(() => {
         eyesLeft(200);
-      });
+      })
 
       torso?.hover(() => {
         eyesCenter(200);
-      });
+      })
 
       rightArm?.hover(() => {
         eyesRight(200);
-      });
+      })
       rightThigh?.hover(() => {
         eyesRight(200);
-      });
+      })
       rightShoe?.hover(() => {
         eyesRight(200);
-      });
-    };
+      })
+    }
 
     createAvatar(s, loadActions);
   }, [s]);
@@ -490,6 +489,4 @@ const Avatar: React.FC = (): any => {
       xmlns="http://www.w3.org/2000/svg"
     />
   );
-};
-
-export default Avatar;
+}

package/{archive → src/components}/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Breadcrumbs from '.';
+import { Breadcrumbs } from '.';
 
 const meta = {
   title: 'Components/Breadcrumbs',
@@ -15,8 +15,8 @@ const meta = {
         category: '',
         type: { summary: 'array' },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     links: [
@@ -35,12 +35,12 @@ const meta = {
       {
         href: '/',
         name: 'link 4',
-      },
-    ],
+      }
+    ]
   },
-};
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Breadcrumbs>;
 
 export const Default: Story = {};

package/{archive → src/components}/Breadcrumbs/index.tsx

@@ -6,30 +6,30 @@ export interface Props {
   links?: Array<{ name: string; href: string }>;
 }
 
-const Breadcrumbs = ({ id, className, links }: Props): JSX.Element => {
+export const Breadcrumbs = ({ id, className, links }: Props) => {
   const linksLength = links != null ? Object.keys(links).length : 0;
 
-  const classList = classNames(className, 'flex py-2', 'theme-local');
+  const classList = classNames(className, 'flex py-2');
 
   return (
     <ul id={id} className={classList}>
       {links?.map((link, i) => {
         return (
-          <div key={`breadcrumb_${i + 1}`} className='flex'>
+          <div key={`breadcrumb_${i + 1}`} className="flex">
             <li className="h-8">
               {i + 1 >= linksLength ? (
-                <p className='px-1 py-1'>{link.name}</p>
-              ) : (
-                <p className='px-1 py-1'>
-                  <a className='text-facebook hover:underline' href={link.href}>
+                <p className="px-1 py-1">{link.name}</p>
+                  ) : (
+                <p className="px-1 py-1">
+                  <a className="text-facebook hover:underline" href={link.href}>
                     {link.name}
                   </a>
                 </p>
-              )}
+                  )}
             </li>
             {i + 1 < linksLength && (
-              <li className='h-8'>
-                <p className='py-1'>&nbsp; &#62; &nbsp;</p>
+              <li className="h-8">
+                <p className="py-1">&nbsp; &#62; &nbsp;</p>
               </li>
             )}
           </div>
@@ -37,6 +37,4 @@ const Breadcrumbs = ({ id, className, links }: Props): JSX.Element => {
       })}
     </ul>
   );
-};
-
-export default Breadcrumbs;
+}

package/{archive → src/components}/BreadcrumbsBordered/BreadcrumbsBordered.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import BreadcrumbsBordered from '.';
+import { BreadcrumbsBordered } from '.';
 
 const meta = {
   title: 'Components/BreadcrumbsBordered',
@@ -16,8 +16,8 @@ const meta = {
         category: '',
         type: { summary: 'array' },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     links: [
@@ -40,13 +40,13 @@ const meta = {
       {
         link: '/',
         name: 'link 5',
-      },
-    ],
+      }
+    ]
   },
-};
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof BreadcrumbsBordered>;
 
 export const Default: Story = {};

package/{archive → src/components}/BreadcrumbsBordered/index.tsx

@@ -1,20 +1,19 @@
-import React from 'react';
-
-
 import classNames from 'classnames';
 import { BreadcrumbsItem } from 'src';
 
-
-
-export interface Props {
+export interface BreadcrumbsBorderedProps {
   id?: string;
   className?: string;
   links?: any[];
 }
 
-const BreadcrumbsBordered: React.FC<Props> = ({ id, className, links }) => {
+export const BreadcrumbsBordered = ({
+  id,
+  className,
+  links,
+}: BreadcrumbsBorderedProps) => {
   const linksLength = links?.length !== undefined ? links.length : 0;
-  const classList = classNames(className, 'flex theme-local');
+  const classList = classNames(className, 'flex');
 
   return (
     <ul id={id} className={classList}>
@@ -39,6 +38,4 @@ const BreadcrumbsBordered: React.FC<Props> = ({ id, className, links }) => {
       })}
     </ul>
   );
-};
-
-export default BreadcrumbsBordered;
+}

package/{archive → src/components}/BreadcrumbsItem/BreadcrumbsItem.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import BreadcrumbsItem from '.';
+import { BreadcrumbsItem } from '.';
 
 const meta = {
   title: 'Components/Breadcrumbs Item',
@@ -16,7 +16,7 @@ const meta = {
         category: '',
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     type: {
       description: 'Specifies the type of breadcrumbs to display ie link',
@@ -24,17 +24,17 @@ const meta = {
         category: '',
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     name: 'Link 1',
     href: '/',
     firstItem: false,
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof BreadcrumbsItem>;
 
 export const Default: Story = {};