trepur_components 2.3.4 → 2.3.5

package/storybook-build/assets/Avatar.stories-CpH6xVwM.js

@@ -1,418 +0,0 @@
-var _a, _b, _c;
-import { i as idAndClassName } from "./controls-DJSGrQKd.js";
-import { j as jsxRuntimeExports } from "./jsx-runtime-D2-sc1j1.js";
-import { r as reactExports } from "./index-DM9bPmif.js";
-import "./_commonjsHelpers-LQfde5yM.js";
-let Snap;
-if (typeof window !== "undefined") {
-  Snap = require("snapsvg-cjs");
-}
-const Avatar = () => {
-  const [s, setS] = reactExports.useState(null);
-  let rightEyeWhite, rightEyePupil, leftEyeWhite, leftEyePupil, avatar, armless, torso, face, legs, rightArm, leftArm, rightHand, leftHand, arms, straps, hands, leftThigh, rightThigh, leftShoe, rightShoe;
-  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 = (s2, callBack) => {
-    var _a2, _b2, _c2, _d;
-    if (typeof window === "undefined")
-      return;
-    const head = s2 == null ? void 0 : s2.rect(103, 90, 68, 87, 50).attr({ fill: skinColour });
-    const leftEyebrow = s2 == null ? void 0 : s2.rect(146, 122, 12, 3, 2);
-    const rightEyebrow = s2 == null ? void 0 : s2.rect(115, 122, 12, 3, 2);
-    leftEyeWhite = s2 == null ? void 0 : s2.ellipse(152, 132, 6, 4);
-    rightEyeWhite = s2 == null ? void 0 : s2.ellipse(121, 132, 6, 4);
-    leftEyePupil = s2 == null ? void 0 : s2.ellipse(152, 132, 3, 3).attr({ fill: eyeColour });
-    rightEyePupil = s2 == null ? void 0 : s2.ellipse(121, 132, 3, 3).attr({ fill: eyeColour });
-    const leftEye = s2 == null ? void 0 : s2.group(leftEyeWhite, leftEyePupil);
-    const rightEye = s2 == null ? void 0 : s2.group(rightEyeWhite, rightEyePupil);
-    const outerBeard = s2 == null ? void 0 : s2.rect(103, 90, 68, 87, 50).attr({ fill: "white" });
-    const innerBeard = s2 == null ? void 0 : s2.rect(106, 105, 62, 62, 50);
-    const beardGroup = s2 == null ? void 0 : s2.group(outerBeard, innerBeard);
-    const beard = s2 == null ? void 0 : s2.rect(103, 140, 68, 60).attr({
-      mask: beardGroup,
-      fill: beardColour,
-      opacity: 0.6
-    });
-    const outerHair = s2 == null ? void 0 : s2.rect(103, 90, 68, 60, 25).attr({ fill: "white" });
-    const innerHair = s2 == null ? void 0 : s2.rect(109, 105, 56, 40, 10);
-    const hairGroup = s2 == null ? void 0 : s2.group(outerHair, innerHair);
-    const baseHair = s2 == null ? void 0 : s2.rect(103, 90, 68, 40).attr({
-      mask: hairGroup,
-      fill: hairColour
-    });
-    const hairLevel1 = s2 == null ? void 0 : s2.rect(113, 88, 50, 16, 10).attr({ fill: hairColour }).transform("r0");
-    const hair = s2 == null ? void 0 : s2.group(baseHair, hairLevel1);
-    const outerNose = (_a2 = s2 == null ? void 0 : s2.rect(129, 140, 12, 10, 30)) == null ? void 0 : _a2.attr({ fill: "white" });
-    const innerNose = s2 == null ? void 0 : s2.rect(130, 142, 10, 12, 30);
-    const noseGroup = s2 == null ? void 0 : s2.group(outerNose, innerNose);
-    const nose = (_b2 = s2 == null ? void 0 : s2.rect(129, 140, 12, 10)) == null ? void 0 : _b2.attr({
-      mask: noseGroup,
-      fill: noseColour
-    });
-    const leftEar = (_c2 = s2 == null ? void 0 : s2.circle(103, 135, 5)) == null ? void 0 : _c2.attr({ fill: "white" });
-    const leftEarMask = s2 == null ? void 0 : s2.rect(89, 120, 15, 30).attr({
-      mask: leftEar,
-      fill: skinColour
-    }).transform("r-2");
-    const rightEar = (_d = s2 == null ? void 0 : s2.circle(171, 135, 5)) == null ? void 0 : _d.attr({ fill: "white" });
-    const rightEarMask = s2 == null ? void 0 : s2.rect(170, 120, 15, 30).attr({
-      mask: rightEar,
-      fill: skinColour
-    }).transform("r2");
-    const body = s2 == null ? void 0 : s2.rect(100, 188, 73, 105, 16, 16).attr({ fill: jacketColour });
-    const hood = s2 == null ? void 0 : s2.ellipse(136, 182, 24, 10).attr({ fill: jacketColour });
-    const rightShoulder = s2 == null ? void 0 : s2.rect(87, 190, 27, 14, 10);
-    rightArm = s2 == null ? void 0 : s2.rect(84, 195, 16, 90, 10, 10);
-    const leftShoulder = s2 == null ? void 0 : s2.rect(155, 190, 27, 14, 10);
-    leftArm = s2 == null ? void 0 : s2.rect(170, 195, 16, 90, 10, 10);
-    leftHand = s2 == null ? void 0 : s2.circle(178, 278, 8);
-    rightHand = s2 == null ? void 0 : s2.circle(92, 278, 8);
-    const wasteBand = s2 == null ? void 0 : s2.rect(98, 277, 74, 33, 0, 0);
-    leftThigh = s2 == null ? void 0 : s2.rect(142, 300, 30, 90, 0, 0);
-    rightThigh = s2 == null ? void 0 : s2.rect(98, 300, 30, 90, 0, 0);
-    const bag = s2 == null ? void 0 : s2.rect(99, 180, 74, 78, 10);
-    const rightStrap = s2 == null ? void 0 : s2.rect(101, 185, 5, 100, 10).transform("r4.5");
-    const leftStrap = s2 == null ? void 0 : s2.rect(163, 185, 5, 100, 10).transform("r-4.5");
-    const mouth = s2 == null ? void 0 : s2.circle(136, 155, 10).attr({ fill: "white" });
-    const mouthCutOff = s2 == null ? void 0 : s2.rect(120, 155, 30, 15).attr({ fill: mouthColour });
-    const leftShoeTop = s2 == null ? void 0 : s2.rect(142, 370, 30, 20, 10);
-    const leftShoeSole = s2 == null ? void 0 : s2.rect(142, 378, 30, 12);
-    const rightShoeTop = s2 == null ? void 0 : s2.rect(98, 370, 30, 20, 10);
-    const rightShoeSole = s2 == null ? void 0 : s2.rect(98, 378, 30, 12);
-    const mainZip = s2 == null ? void 0 : s2.rect(135, 199, 3, 94);
-    const leftZip = s2 == null ? void 0 : s2.rect(141, 188, 2, 15).transform("r44.5");
-    const rightZip = s2 == null ? void 0 : s2.rect(130, 188, 2, 15).transform("r-44.5");
-    const centerNeck = s2 == null ? void 0 : s2.rect(128, 170, 17, 21);
-    const leftNeck = s2 == null ? void 0 : s2.rect(139, 181, 10, 10).transform("r-33");
-    const rightNeck = s2 == null ? void 0 : s2.rect(124, 181, 10, 10).transform("r33");
-    const frontNeck = s2 == null ? void 0 : s2.rect(129, 182, 15, 15).transform("r45");
-    const neck = s2 == null ? void 0 : s2.group(centerNeck, leftNeck, rightNeck, frontNeck).attr({ fill: skinColour });
-    const zip = s2 == null ? void 0 : s2.group(mainZip, leftZip, rightZip).attr({ fill: zipColour });
-    leftShoe = s2 == null ? void 0 : s2.group(leftShoeTop, leftShoeSole);
-    rightShoe = s2 == null ? void 0 : s2.group(rightShoeTop, rightShoeSole);
-    const rucksack = s2 == null ? void 0 : s2.group(leftStrap, rightStrap, bag).attr({ fill: rucksackColour });
-    const eyes = s2 == null ? void 0 : s2.group(leftEye, rightEye).attr({ fill: "white" });
-    const eyebrows = s2 == null ? void 0 : s2.group(leftEyebrow, rightEyebrow).attr({ fill: eyebrowColour });
-    const shoes = s2 == null ? void 0 : s2.group(leftShoe, rightShoe).attr({ fill: shoeColour });
-    const ears = s2 == null ? void 0 : s2.group(leftEarMask, rightEarMask);
-    arms = s2 == null ? void 0 : s2.group(rightShoulder, leftShoulder, leftArm, rightArm).attr({ fill: jacketColour });
-    hands = s2 == null ? void 0 : s2.group(leftHand, rightHand).attr({ fill: skinColour });
-    straps = s2 == null ? void 0 : s2.group(leftStrap, rightStrap).attr({ fill: rucksackColour });
-    face = s2 == null ? void 0 : s2.group(
-      head,
-      eyes,
-      eyebrows,
-      nose,
-      mouth,
-      mouthCutOff,
-      ears,
-      hair,
-      beard
-    );
-    torso = s2 == null ? void 0 : s2.group(rucksack, hood, body, neck, zip);
-    legs = s2 == null ? void 0 : s2.group(leftThigh, rightThigh, wasteBand, shoes).attr({ fill: trouserColour });
-    armless = s2 == null ? void 0 : s2.group(legs, torso, face);
-    avatar = s2 == null ? void 0 : s2.group(armless, arms, straps, hands);
-    mouthCutOff == null ? void 0 : mouthCutOff.attr({
-      mask: mouth
-    });
-    callBack(avatar);
-  };
-  const nextFrame = (s2, frameArray, frame) => {
-    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) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 0,
-      to: 170,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 170,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 170,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 0,
-      dur: 100
-    }
-  ];
-  const leftWave = [
-    {
-      funct: function(val) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: 0,
-      to: -150,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: -150,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: -150,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100
-    },
-    {
-      funct: function(val) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: 0,
-      dur: 100
-    }
-  ];
-  const jump = () => {
-    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) => {
-    leftEyePupil.animate({ transform: "t2,0" }, duration);
-    rightEyePupil.animate({ transform: "t2,0" }, duration);
-  };
-  const eyesRight = (duration) => {
-    leftEyePupil.animate({ transform: "t-2,0" }, duration);
-    rightEyePupil.animate({ transform: "t-2,0" }, duration);
-  };
-  const eyesCenter = (duration) => {
-    leftEyePupil.animate({ transform: "t0,0" }, duration);
-    rightEyePupil.animate({ transform: "t0,0" }, duration);
-  };
-  const blink = (times) => {
-    if (times < 1)
-      return;
-    [...Array(times)].forEach((_) => {
-      leftEyeWhite == null ? void 0 : leftEyeWhite.animate({ ry: 0 }, 120);
-      leftEyePupil.animate({ ry: 0 }, 120);
-      rightEyeWhite == null ? void 0 : rightEyeWhite.animate({ ry: 0 }, 120);
-      rightEyePupil.animate({ ry: 0 }, 120, function() {
-        leftEyeWhite == null ? void 0 : leftEyeWhite.animate({ ry: 4 }, 200);
-        leftEyePupil == null ? void 0 : leftEyePupil.animate({ ry: 3 }, 200);
-        rightEyeWhite == null ? void 0 : rightEyeWhite.animate({ ry: 4 }, 200);
-        rightEyePupil == null ? void 0 : rightEyePupil.animate({ ry: 3 }, 200, () => {
-          blink(times - 1);
-        });
-      });
-    });
-  };
-  const animate = (s2, animation) => {
-    nextFrame(s2, animation, 0);
-  };
-  reactExports.useEffect(() => {
-    if (typeof window === "undefined")
-      return;
-    if (Snap) {
-      setS(Snap("#svg"));
-    }
-    const makeBlinkHappen = () => {
-      const randNum = Math.floor(Math.random() * 2) + 1;
-      blink(randNum);
-    };
-    const loadActions = () => {
-      if (!avatar)
-        return;
-      setTimeout(() => {
-        animate(s, leftWave);
-      }, 1e3);
-      setInterval(makeBlinkHappen, 3500);
-      rightArm == null ? void 0 : rightArm.click(() => animate(s, rightWave));
-      rightHand == null ? void 0 : rightHand.click(() => animate(s, rightWave));
-      leftArm == null ? void 0 : leftArm.click(() => animate(s, leftWave));
-      leftHand == null ? void 0 : leftHand.click(() => animate(s, leftWave));
-      armless == null ? void 0 : armless.click(jump);
-      leftArm == null ? void 0 : leftArm.hover(() => {
-        eyesLeft(200);
-      });
-      leftThigh == null ? void 0 : leftThigh.hover(() => {
-        eyesLeft(200);
-      });
-      leftShoe == null ? void 0 : leftShoe.hover(() => {
-        eyesLeft(200);
-      });
-      torso == null ? void 0 : torso.hover(() => {
-        eyesCenter(200);
-      });
-      rightArm == null ? void 0 : rightArm.hover(() => {
-        eyesRight(200);
-      });
-      rightThigh == null ? void 0 : rightThigh.hover(() => {
-        eyesRight(200);
-      });
-      rightShoe == null ? void 0 : rightShoe.hover(() => {
-        eyesRight(200);
-      });
-    };
-    createAvatar(s, loadActions);
-  }, [s]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "svg",
-    {
-      id: "svg",
-      className: "mx-auto",
-      height: `${svgContainerHeight.toString()}px`,
-      width: `${svgContainerWidth.toString()}px`,
-      version: "1.1",
-      xmlns: "http://www.w3.org/2000/svg"
-    }
-  );
-};
-try {
-  Avatar.displayName = "Avatar";
-  Avatar.__docgenInfo = { "description": "", "displayName": "Avatar", "props": {} };
-} catch (__react_docgen_typescript_loader_error) {
-}
-const meta = {
-  title: "Components/Avatar",
-  component: Avatar,
-  argTypes: {
-    ...idAndClassName
-  },
-  args: {}
-};
-const Default = {};
-Default.parameters = {
-  ...Default.parameters,
-  docs: {
-    ...(_a = Default.parameters) == null ? void 0 : _a.docs,
-    source: {
-      originalSource: "{}",
-      ...(_c = (_b = Default.parameters) == null ? void 0 : _b.docs) == null ? void 0 : _c.source
-    }
-  }
-};
-const __namedExportsOrder = ["Default"];
-export {
-  Default,
-  __namedExportsOrder,
-  meta as default
-};