trepur_components 2.3.8 → 2.3.10

package/src/components/Avatar/index.tsx

@@ -1,492 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// @ts-expect-error
-import Snap from 'snapsvg-cjs';
-
-export const Avatar: React.FC = (): any => {
-  const [s, setS] = useState(null);
-
-  let rightEyeWhite: any,
-    rightEyePupil: any,
-    leftEyeWhite: any,
-    leftEyePupil: any,
-    avatar: any,
-    armless: any,
-    torso: any,
-    face: any,
-    legs: any,
-    rightArm: any,
-    leftArm: any,
-    rightHand: any,
-    leftHand: any,
-    arms: any,
-    straps: any,
-    hands: any,
-    leftThigh: any,
-    rightThigh: any,
-    leftShoe: any,
-    rightShoe: any;
-
-  const leftShoulderRotationPoints = '175, 202';
-  const rightShoulderRotationPoints = '94, 202';
-  const svgContainerHeight = 400;
-  const svgContainerWidth = 265;
-  const skinColour = '#FFCC9A';
-  const zipColour = '#315107';
-  const eyeColour = '#1389BF';
-  const hairColour = '#F1B452';
-  const beardColour = '#F1B452';
-  const rucksackColour = '#072765';
-  const trouserColour = '#D3D3D3';
-  const jacketColour = '#416E0A';
-  const mouthColour = '#DC7144';
-  const shoeColour = '#000000';
-  const eyebrowColour = '#F1B452';
-  const noseColour = '#F1B452';
-
-  const createAvatar = (s: any, callBack: any): void => {
-    if (typeof window === 'undefined') return;
-    const head = s?.rect(103, 90, 68, 87, 50).attr({ fill: skinColour });
-
-    const leftEyebrow = s?.rect(146, 122, 12, 3, 2);
-    const rightEyebrow = s?.rect(115, 122, 12, 3, 2);
-
-    leftEyeWhite = s?.ellipse(152, 132, 6, 4);
-    rightEyeWhite = s?.ellipse(121, 132, 6, 4);
-    leftEyePupil = s?.ellipse(152, 132, 3, 3).attr({ fill: eyeColour });
-    rightEyePupil = s?.ellipse(121, 132, 3, 3).attr({ fill: eyeColour });
-
-    const leftEye = s?.group(leftEyeWhite, leftEyePupil);
-    const rightEye = s?.group(rightEyeWhite, rightEyePupil);
-
-    const outerBeard = s?.rect(103, 90, 68, 87, 50).attr({ fill: 'white' });
-    const innerBeard = s?.rect(106, 105, 62, 62, 50);
-    const beardGroup = s?.group(outerBeard, innerBeard);
-    const beard = s?.rect(103, 140, 68, 60).attr({
-      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);
-    const hairGroup = s?.group(outerHair, innerHair);
-    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 })
-      .transform('r0');
-    const hair = s?.group(baseHair, hairLevel1);
-
-    const outerNose = s?.rect(129, 140, 12, 10, 30)?.attr({ fill: 'white' });
-    const innerNose = s?.rect(130, 142, 10, 12, 30);
-    const noseGroup = s?.group(outerNose, innerNose);
-    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
-      ?.rect(89, 120, 15, 30)
-      .attr({
-        mask: leftEar,
-        fill: skinColour,
-      })
-      .transform('r-2');
-
-    const rightEar = s?.circle(171, 135, 5)?.attr({ fill: 'white' });
-    const rightEarMask = s
-      ?.rect(170, 120, 15, 30)
-      .attr({
-        mask: rightEar,
-        fill: skinColour,
-      })
-      .transform('r2');
-
-    const body = s
-      ?.rect(100, 188, 73, 105, 16, 16)
-      .attr({ fill: jacketColour });
-    const hood = s?.ellipse(136, 182, 24, 10).attr({ fill: jacketColour });
-
-    const rightShoulder = s?.rect(87, 190, 27, 14, 10);
-    rightArm = s?.rect(84, 195, 16, 90, 10, 10);
-
-    const leftShoulder = s?.rect(155, 190, 27, 14, 10);
-    leftArm = s?.rect(170, 195, 16, 90, 10, 10);
-
-    leftHand = s?.circle(178, 278, 8);
-    rightHand = s?.circle(92, 278, 8);
-
-    const wasteBand = s?.rect(98, 277, 74, 33, 0, 0);
-    leftThigh = s?.rect(142, 300, 30, 90, 0, 0);
-    rightThigh = s?.rect(98, 300, 30, 90, 0, 0);
-
-    const bag = s?.rect(99, 180, 74, 78, 10);
-    const rightStrap = s?.rect(101, 185, 5, 100, 10).transform('r4.5');
-    const leftStrap = s?.rect(163, 185, 5, 100, 10).transform('r-4.5');
-
-    const mouth = s?.circle(136, 155, 10).attr({ fill: 'white' });
-    const mouthCutOff = s?.rect(120, 155, 30, 15).attr({ fill: mouthColour });
-
-    const leftShoeTop = s?.rect(142, 370, 30, 20, 10);
-    const leftShoeSole = s?.rect(142, 378, 30, 12);
-
-    const rightShoeTop = s?.rect(98, 370, 30, 20, 10);
-    const rightShoeSole = s?.rect(98, 378, 30, 12);
-
-    const mainZip = s?.rect(135, 199, 3, 94);
-    const leftZip = s?.rect(141, 188, 2, 15).transform('r44.5');
-    const rightZip = s?.rect(130, 188, 2, 15).transform('r-44.5');
-
-    const centerNeck = s?.rect(128, 170, 17, 21);
-    const leftNeck = s?.rect(139, 181, 10, 10).transform('r-33');
-    const rightNeck = s?.rect(124, 181, 10, 10).transform('r33');
-    const frontNeck = s?.rect(129, 182, 15, 15).transform('r45');
-
-    const neck = s
-      ?.group(centerNeck, leftNeck, rightNeck, frontNeck)
-      .attr({ fill: skinColour });
-    const zip = s?.group(mainZip, leftZip, rightZip).attr({ fill: zipColour });
-    leftShoe = s?.group(leftShoeTop, leftShoeSole);
-    rightShoe = s?.group(rightShoeTop, rightShoeSole);
-    const rucksack = s
-      ?.group(leftStrap, rightStrap, bag)
-      .attr({ fill: rucksackColour });
-    const eyes = s?.group(leftEye, rightEye).attr({ fill: 'white' });
-    const eyebrows = s
-      ?.group(leftEyebrow, rightEyebrow)
-      .attr({ fill: eyebrowColour });
-    const shoes = s?.group(leftShoe, rightShoe).attr({ fill: shoeColour });
-    const ears = s?.group(leftEarMask, rightEarMask);
-
-    arms = s
-      ?.group(rightShoulder, leftShoulder, leftArm, rightArm)
-      .attr({ fill: jacketColour });
-    hands = s?.group(leftHand, rightHand).attr({ fill: skinColour });
-    straps = s?.group(leftStrap, rightStrap).attr({ fill: rucksackColour });
-
-    face = s?.group(
-      head,
-      eyes,
-      eyebrows,
-      nose,
-      mouth,
-      mouthCutOff,
-      ears,
-      hair,
-      beard,
-    )
-    torso = s?.group(rucksack, hood, body, neck, zip);
-    legs = s
-      ?.group(leftThigh, rightThigh, wasteBand, shoes)
-      .attr({ fill: trouserColour });
-
-    armless = s?.group(legs, torso, face);
-    avatar = s?.group(armless, arms, straps, hands);
-
-    mouthCutOff?.attr({
-      mask: mouth,
-    })
-
-    callBack(avatar);
-  }
-
-  const nextFrame = (s: any, frameArray: any, frame: number): void => {
-    if (frame >= frameArray.length) {
-      return;
-    }
-
-    Snap.animate(
-      frameArray[frame].from,
-      frameArray[frame].to,
-      frameArray[frame].funct,
-      frameArray[frame].dur,
-      null,
-      nextFrame.bind(null, Snap, frameArray, frame + 1),
-    )
-  }
-
-  const rightWave = [
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 0,
-      to: 170,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 170,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 170,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 0,
-      dur: 100,
-    }
-  ]
-
-  const leftWave = [
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: 0,
-      to: -150,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: -150,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: -150,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: 0,
-      dur: 100,
-    }
-  ]
-
-  const jump = (): void => {
-    torso.animate({ transform: 't0,20' }, 500);
-    arms.animate({ transform: 't0,20' }, 500);
-    straps.animate({ transform: 't0,20' }, 500);
-    hands.animate({ transform: 't0,20' }, 500);
-    face.animate({ transform: 't0,20' }, 500, function () {
-      face.animate({ transform: 't0,-70' }, 200);
-      torso.animate({ transform: 't0,-70' }, 200);
-      arms.animate({ transform: 't0,-70' }, 200);
-      straps.animate({ transform: 't0,-70' }, 200);
-      hands.animate({ transform: 't0,-70' }, 200);
-      legs.animate({ transform: 't0,-70' }, 200, function () {
-        face.animate({ transform: 't0,0' }, 200);
-        torso.animate({ transform: 't0,0' }, 200);
-        arms.animate({ transform: 't0,0' }, 200);
-        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;
-    [...Array(times)].forEach((_) => {
-      leftEyeWhite?.animate({ ry: 0 }, 120);
-      leftEyePupil.animate({ ry: 0 }, 120);
-      rightEyeWhite?.animate({ ry: 0 }, 120);
-      rightEyePupil.animate({ ry: 0 }, 120, function () {
-        leftEyeWhite?.animate({ ry: 4 }, 200);
-        leftEyePupil?.animate({ ry: 3 }, 200);
-        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 =
-  //     "M46.5,433 q3.5,-153 7,-356 q59,-51 116,-5 q60,96 1,159 q-58,26 -116,2 q108,57 119,202 q26,-166 41,-371 q99,1 186,3 q28,108 -21,187 q-66,23 -160,-9 q154,79 133,143 q-82,59 -175,42";
-  //   const lineLength: number = Snap.path.getTotalLength(linePath);
-  //   const lineDraw = s?.path(linePath);
-  //   lineDraw.attr({
-  //     fill: "none",
-  //     stroke: "#009FE3",
-  //     "stroke-dasharray": `${lineLength} ${lineLength}`,
-  //     "stroke-dashoffset": lineLength,
-  //     "stroke-width": 6,
-  //     "stroke-linecap": "round",
-  //     "stroke-linejoin": "round",
-  //     "stroke-miterlimit": 10,
-  //   });
-  //   lineDraw.animate(
-  //     {
-  //       strokeDashoffset: 0,
-  //     },
-  //     3000,
-  //     null
-  //   );
-  // };
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    if (Snap) {
-      setS(Snap('#svg'));
-    }
-
-    const makeBlinkHappen = (): void => {
-      const randNum = Math.floor(Math.random() * 2) + 1;
-      blink(randNum);
-    }
-
-    const loadActions = (): void => {
-      if (!avatar) return;
-
-      setTimeout(() => {
-        animate(s, leftWave);
-      }, 1000);
-
-      // drawPath(s)
-      setInterval(makeBlinkHappen, 3500);
-
-      rightArm?.click(() => animate(s, rightWave));
-      rightHand?.click(() => animate(s, rightWave));
-
-      leftArm?.click(() => animate(s, leftWave));
-      leftHand?.click(() => animate(s, leftWave));
-      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]);
-
-  return (
-    <svg
-      id="svg"
-      className="mx-auto"
-      height={`${svgContainerHeight.toString()}px`}
-      width={`${svgContainerWidth.toString()}px`}
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    />
-  );
-}

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,46 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Breadcrumbs } from '.';
-
-const meta = {
-  title: 'Components/Breadcrumbs',
-  component: Breadcrumbs,
-  argTypes: {
-    ...idAndClassName,
-
-    links: {
-      description: 'An array of items to be displayed in the component',
-      table: {
-        category: '',
-        type: { summary: 'array' },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
-  args: {
-    links: [
-      {
-        href: '/',
-        name: 'link 1',
-      },
-      {
-        href: '/',
-        name: 'link 2',
-      },
-      {
-        href: '/',
-        name: 'link 3',
-      },
-      {
-        href: '/',
-        name: 'link 4',
-      }
-    ]
-  },
-}
-export default meta;
-
-type Story = StoryObj<typeof Breadcrumbs>;
-
-export const Default: Story = {};

package/src/components/Breadcrumbs/index.tsx

@@ -1,40 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  links?: Array<{ name: string; href: string }>;
-}
-
-export const Breadcrumbs = ({ id, className, links }: Props) => {
-  const linksLength = links != null ? Object.keys(links).length : 0;
-
-  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">
-            <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}>
-                    {link.name}
-                  </a>
-                </p>
-                  )}
-            </li>
-            {i + 1 < linksLength && (
-              <li className="h-8">
-                <p className="py-1">&nbsp; &#62; &nbsp;</p>
-              </li>
-            )}
-          </div>
-        );
-      })}
-    </ul>
-  );
-}

package/src/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.tsx

@@ -1,52 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { BreadcrumbsBordered } from '.';
-
-const meta = {
-  title: 'Components/BreadcrumbsBordered',
-  component: BreadcrumbsBordered,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    links: {
-      description: 'An array of objects to be displayed in the component',
-      control: { type: 'array', default: undefined },
-      table: {
-        category: '',
-        type: { summary: 'array' },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
-  args: {
-    links: [
-      {
-        link: '/',
-        name: 'link 1',
-      },
-      {
-        link: '/',
-        name: 'link 2',
-      },
-      {
-        link: '/',
-        name: 'link 3',
-      },
-      {
-        link: '/',
-        name: 'link 4',
-      },
-      {
-        link: '/',
-        name: 'link 5',
-      }
-    ]
-  },
-}
-
-export default meta;
-
-type Story = StoryObj<typeof BreadcrumbsBordered>;
-
-export const Default: Story = {};

package/src/components/BreadcrumbsBordered/index.tsx

@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import { BreadcrumbsItem } from 'src';
-
-export interface BreadcrumbsBorderedProps {
-  id?: string;
-  className?: string;
-  links?: any[];
-}
-
-export const BreadcrumbsBordered = ({
-  id,
-  className,
-  links,
-}: BreadcrumbsBorderedProps) => {
-  const linksLength = links?.length !== undefined ? links.length : 0;
-  const classList = classNames(className, 'flex');
-
-  return (
-    <ul id={id} className={classList}>
-      {links?.map((link: any, i: number) => {
-        const margin = i === 0 ? 'mr-3' : 'mx-3';
-        const first = i === 0;
-
-        let bType = 'standard';
-        if (linksLength >= 1 && i + 1 < linksLength) {
-          bType = 'link';
-        }
-        return (
-          <BreadcrumbsItem
-            key={`breadcrumb_item_${i + 0}`}
-            className={margin}
-            name={link.name}
-            link={link.link}
-            type={bType}
-            firstItem={first}
-          />
-        );
-      })}
-    </ul>
-  );
-}

package/src/components/BreadcrumbsItem/BreadcrumbsItem.stories.tsx

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