trepur_components 2.3.2 → 2.3.4

package/src/components/Avatar/index.tsx

@@ -0,0 +1,495 @@
+import React, { useEffect, useState } from 'react';
+
+let Snap: any;
+if (typeof window !== 'undefined') {
+  Snap = require('snapsvg-cjs');
+}
+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"
+    />
+  );
+};
+
+export default Avatar;

package/src/components/index.ts

@@ -0,0 +1,119 @@
+import Accordion from './Accordion';
+import AlertBar from './AlertBar';
+// import Breadcrumbs from '../../archive/Breadcrumbs';
+// import BreadcrumbsBordered from '../../archive/BreadcrumbsBordered';
+// import BreadcrumbsItem from '../../archive/BreadcrumbsItem';
+// import Button from './Button';
+// import Calendar from './Calendar';
+// import Card from './Card';
+// import CardWithTopImage from './CardWithTopImage';
+// import Carousel from './Carousel';
+// import CarouselThumbnail from './CarouselThumbnail';
+// import Checkbox from './Checkbox';
+// import Collapsible from './Collapsible';
+// import Column from './Column';
+// import Container from './Container';
+// import Counter from './Counter';
+// import DetailUpdater from './DetailUpdater';
+// import Dialog from './Dialog';
+// import DropdownMenu from './DropdownMenu';
+// import DynamicTextSection from './DynamicTextSection';
+// import FilterItem from './FilterItem';
+// import FooterBar from './Footer';
+// import FooterNav from './FooterNav';
+// import FooterNavItem from './FooterNavItem';
+// import Form from './Form';
+// import FyreCard from './FyreCard';
+// import Greeting from './Greeting';
+// import HorizontalLine from './HorizontalLine';
+// import Icon from './Icon';
+// import IconCard from './IconCard';
+// import Image from './Image';
+// import ImageLink from './ImageLink';
+// import ImageLinkList from './ImageLinkList';
+// import InformationIcon from './InformationIcon';
+// import Input from './Input';
+// import Jumbotron from './Jumbotron';
+// import MenuButton from './MenuButton';
+// import Modal from './Modal';
+// import NavItem from './NavItem';
+// import NavOld from './NavOld';
+// import Nav from './NavTwo';
+// import NewsCard from './NewsCard';
+// import Pill from './Pill';
+// import ProductCard from './ProductCard';
+// import ProductCardV2 from './ProductCardV2';
+// import Profile from './Profile';
+// import Row from './Row';
+// import Search from './Search';
+// import Select from './Select';
+// import SocialBlock from './SocialBlock';
+// import StarRating from './StarRating';
+// import Testimonial from './Testimonial';
+// import TextAndTitle from './TextAndTitle';
+// import TextArea from './TextArea';
+// import Timeline from './Timeline';
+// import Tubestops from './Tubestops';
+// import UserIcon from './UserIcon';
+// import Video from '../../archive/Video';
+
+export {
+  Accordion,
+  AlertBar,
+  Breadcrumbs,
+  BreadcrumbsBordered,
+  BreadcrumbsItem,
+  // Button,
+  // Calendar,
+  // Card,
+  // CardWithTopImage,
+  // Checkbox,
+  // Carousel,
+  // CarouselThumbnail,
+  // Collapsible,
+  // Column,
+  // Counter,
+  // Container,
+  // DetailUpdater,
+  // DynamicTextSection,
+  // Dialog,
+  // DropdownMenu,
+  // FilterItem,
+  // Form,
+  // FooterBar,
+  // FooterNav,
+  // FooterNavItem,
+  // FyreCard,
+  // Greeting,
+  // HorizontalLine,
+  // Icon,
+  // IconCard,
+  // Image,
+  // ImageLink,
+  // ImageLinkList,
+  // InformationIcon,
+  // Input,
+  // Jumbotron,
+  // MenuButton,
+  // Modal,
+  // NavOld,
+  // Nav,
+  // NavItem,
+  // NewsCard,
+  // Pill,
+  // ProductCard,
+  // ProductCardV2,
+  // Profile,
+  // Row,
+  // Search,
+  // Select,
+  // SocialBlock,
+  // StarRating,
+  // Testimonial,
+  // TextAndTitle,
+  // TextArea,
+  // Timeline,
+  // Tubestops,
+  // UserIcon,
+  // Video,
+};