@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

package/src/components/Fixture/index.js

@@ -1,424 +0,0 @@
-/* eslint-disable no-undef */
-import configJSON from "./config.json";
-import { dummyStory, dummyPhotoStory, dummyLiveBlogStory, dummyListicleStory } from "./dummyStory";
-import get from "lodash.get";
-import { createStore } from "redux";
-
-export const generateConfig = () => configJSON;
-
-export const generateStory = (storyType, data = {}) => {
-  switch (storyType) {
-    case "photo-story":
-      return Object.assign(dummyPhotoStory, data);
-    case "live-blog":
-      return Object.assign(dummyLiveBlogStory, data);
-    case "listicle-story":
-      return Object.assign(dummyListicleStory, data);
-    default:
-      return Object.assign(dummyStory, data);
-  }
-};
-
-export const generateCollection = ({ stories = 0, subCollections = [], itemMeta = {} } = {}) => {
-  let items = subCollections;
-  Array(stories)
-    .fill({ type: "story", ...itemMeta })
-    .forEach((item, index) => {
-      const story = generateStory();
-      let itm = Object.assign({}, item, { id: story.id, story });
-      items.push(itm);
-    });
-  return {
-    type: "collection",
-    name: "Politics",
-    id: parseInt(Math.random() * 10 ** 10),
-    slug: "collection-slug",
-    template: "section",
-    "created-at": 1597163351395,
-    metadata: {
-      "cover-image": {
-        "cover-image-url":
-          "https://thumbor-stg.assettype.com/ace/2020-08/f71dd527-cbc6-4cc9-94c2-8feee917f7e9/fortune.jpg",
-        metadata: {
-          width: 914,
-          height: 1200,
-          "mime-type": "image/jpeg",
-          "file-size": 179037,
-          "file-name": "fortune.jpg"
-        },
-        "cover-image-s3-key": "ace/2020-08/f71dd527-cbc6-4cc9-94c2-8feee917f7e9/fortune.jpg",
-        caption: "Some Politician"
-      },
-      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }]
-    },
-    summary:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam felis sed tellus mattis ultricies. Maecenas accumsan hendrerit turpis, a sollicitudin velit viverra nec. Praesent pretium, orci ac sodales volutpat, tellus orci rutrum metus.",
-    items: items
-  };
-};
-
-export const generateCollections = (count = 0) => {
-  let collections = [];
-  Array(count)
-    .fill(0)
-    .forEach(() => {
-      collections.push(generateCollection({ stories: 10 }));
-    });
-
-  return {
-    type: "collection",
-    name: "News",
-    id: parseInt(Math.random() * 10 ** 10),
-    slug: "collection-slug",
-    template: "section",
-    metadata: {
-      "cover-image": {
-        "cover-image-url":
-          "http://d9zv4zsfqrm9s.cloudfront.net/ace/2017-12/c811b029-962f-4364-b376-ec1548d67494/earth.jpg",
-        "cover-image-metadata": {
-          width: 600,
-          height: 600,
-          "mime-type": "image/jpeg",
-          "focus-point": [355, 204]
-        },
-        "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
-        caption: "Some Politician"
-      },
-      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }]
-    },
-    summary: "This is a collection concerned with politics",
-    items: collections
-  };
-};
-
-export const generateCollectionsWithStories = (count = 0) => {
-  let items = generateCollection({ stories: 12 });
-  let collec = generateCollections(2);
-  let collections = [];
-  let merged = items.items.concat(collec.items);
-
-  Array(count)
-    .fill(0)
-    .forEach(() => {
-      collections.push(generateCollection({ stories: 12 }));
-    });
-
-  return {
-    type: "collection",
-    name: "News",
-    id: parseInt(Math.random() * 10 ** 10),
-    slug: "collection-slug",
-    template: "section",
-    metadata: {
-      "cover-image": {
-        "cover-image-url":
-          "http://d9zv4zsfqrm9s.cloudfront.net/ace/2017-12/c811b029-962f-4364-b376-ec1548d67494/earth.jpg",
-        "cover-image-metadata": {
-          width: 600,
-          height: 600,
-          "mime-type": "image/jpeg",
-          "focus-point": [355, 204]
-        },
-        "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
-        caption: "Some Politician"
-      },
-      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }]
-    },
-    summary: "This is a collection concerned with politics",
-    items: merged
-  };
-};
-
-export const generateSubMenu = () => {
-  return {
-    items: [
-      {
-        "tag-name": null,
-        "item-id": 22564,
-        rank: 5493,
-        title: "Link 1",
-        "item-type": "section",
-        "section-slug": "gurupeyarchi",
-        "tag-slug": null,
-        id: 5493,
-        "parent-id": null,
-        url: "https://vikatan-web.qtstage.io/section/gurupeyarchi",
-        "section-name": "அமெரிக்காவில்",
-        data: {
-          color: "#c7c7c7"
-        },
-        items: [
-          {
-            "tag-name": null,
-            "item-id": 22384,
-            rank: 5494,
-            title: "Link 2",
-            "item-type": "section",
-            "section-slug": "cinema",
-            "tag-slug": null,
-            id: 5494,
-            "parent-id": 5493,
-            url: "https://vikatan-web.qtstage.io/section/cinema",
-            "section-name": "அமெரிக்காவில்",
-            data: {
-              color: "#f7f7f7"
-            }
-          },
-          {
-            "tag-name": null,
-            "item-id": 23089,
-            rank: 5504,
-            title: "Child 1",
-            "item-type": "section",
-            "section-slug": "dry6feb2019",
-            "tag-slug": null,
-            id: 5504,
-            "parent-id": 5493,
-            url: "https://vikatan-web.qtstage.io/section/dry6feb2019",
-            "section-name": "அமெரிக்காவில்",
-            data: {
-              color: "#000000"
-            }
-          }
-        ]
-      }
-    ]
-  };
-};
-export const authorData = {
-  slug: "parvathi-mohan-2",
-  name: "Lucy Douglas",
-  social: {
-    twitter: {
-      url: "https://twitter.com/Reena00659364",
-      handle: "Twitter"
-    },
-    youtube: {
-      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Youtube"
-    },
-    facebook: {
-      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Facebook"
-    },
-    linkedin: {
-      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "LinkedIn"
-    },
-    whatsapp: {
-      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Whatsapp"
-    },
-    instagram: {
-      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Instagram"
-    },
-    pinterest: {
-      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Pinterest"
-    }
-  },
-  bio:
-    "Lucy Douglas is a freelance journalist based in London. She has a particular interest in small business, startups and the founders behind them and, in a previous life, was an assistant-editor at Professional Beauty magazine, where she road-tested spas up and down the country and checked out the latest advances.",
-  id: 94985,
-  "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
-  "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
-  "twitter-handle": "quintype_inc",
-  stats: {
-    contributions: null
-  },
-  metadata: {}
-};
-
-export const generateStoryElementData = (elementType) => {
-  const story = generateStory();
-  const storyElements = get(story, ["cards", "0", "story-elements"]);
-  return storyElements.find((element) => {
-    const { subtype, type } = element;
-    if (subtype) return subtype === elementType;
-    return type === elementType;
-  });
-};
-
-export const generateMagazineIssues = () => {
-  return [
-    {
-      collection: {
-        id: 106138,
-        name: "Manifique",
-        metadata: {
-          "cover-image": {
-            success: true,
-            url:
-              "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/874/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
-            metadata: {
-              width: 4000,
-              height: 6000,
-              "mime-type": "image/jpeg",
-              "file-size": 2574353,
-              "file-name": "aleksandra-tanasienko-oQi_UdQDkzw-unsplash.jpg"
-            },
-            "extracted-data": {
-              artist: ""
-            },
-            attribution: "",
-            "cover-image-url":
-              "https://thumbor-stg.assettype.com/ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
-            "cover-image-s3-key":
-              "ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg"
-          },
-          entities: {
-            collectionEntities: {
-              magazine: [
-                {
-                  id: 199563,
-                  name: "New Magazine",
-                  type: "magazine",
-                  "entity-type-id": 382
-                }
-              ]
-            }
-          }
-        },
-        "collection-date": null,
-        slug: "manifique",
-        template: "collection",
-        "data-source": "manual",
-        "created-at": 1599639879798
-      }
-    },
-    {
-      collection: {
-        id: 106137,
-        name: "High Times",
-        metadata: {
-          "cover-image": {
-            success: true,
-            url:
-              "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-28/294/da90b29ce035b5a3a134da39e94d654c.jpg",
-            metadata: {
-              width: 474,
-              height: 581,
-              "mime-type": "image/jpeg",
-              "file-size": 49921,
-              "file-name": "da90b29ce035b5a3a134da39e94d654c.jpg"
-            },
-            "extracted-data": {
-              artist: ""
-            },
-            attribution: "",
-            "cover-image-url":
-              "https://thumbor-stg.assettype.com/ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg",
-            "cover-image-s3-key":
-              "ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg"
-          },
-          entities: {
-            collectionEntities: {
-              magazine: [
-                {
-                  id: 199563,
-                  name: "New Magazine",
-                  type: "magazine",
-                  "entity-type-id": 382
-                }
-              ]
-            }
-          }
-        },
-        "collection-date": null,
-        slug: "high-times",
-        template: "collection",
-        "data-source": "manual",
-        "created-at": 1599639711992
-      }
-    },
-    {
-      collection: {
-        id: 106131,
-        name: "New Magazine Issue",
-        metadata: {
-          "cover-image": {
-            success: true,
-            url:
-              "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/1200/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
-            metadata: {
-              width: 3456,
-              height: 5184,
-              "mime-type": "image/jpeg",
-              "file-size": 3084612,
-              "file-name": "alexis-zacharko-07rXq3YroVM-unsplash.jpg",
-              "focus-point": [2154, 2269]
-            },
-            "extracted-data": {
-              artist: ""
-            },
-            attribution: "",
-            "cover-image-url":
-              "https://thumbor-stg.assettype.com/ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
-            "cover-image-s3-key":
-              "ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg"
-          },
-          entities: {
-            collectionEntities: {
-              magazine: [
-                {
-                  id: 199563,
-                  name: "New Magazine",
-                  type: "magazine",
-                  "entity-type-id": 382
-                }
-              ]
-            }
-          }
-        },
-        "collection-date": null,
-        slug: "new-magazine-issue",
-        template: "collection",
-        "data-source": "manual",
-        "created-at": 1599616208142
-      }
-    },
-    {
-      collection: {
-        id: 106089,
-        name: "First Magazine Collection",
-        metadata: {
-          "cover-image": {
-            "cover-image-s3-key": "ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg",
-            "cover-image-metadata": {
-              "mime-type": "image/jpeg",
-              "focus-point": [3444, 3222],
-              width: 6000,
-              "file-size": 10319729,
-              "file-name": "evil caat.jpg",
-              height: 4000
-            },
-            caption: null,
-            "cover-image-url":
-              "https://thumbor-stg.assettype.com/ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg"
-          },
-          entities: {
-            collectionEntities: {
-              magazine: [
-                {
-                  id: 199563,
-                  name: "New Magazine",
-                  type: "magazine",
-                  "entity-type-id": 382
-                }
-              ]
-            }
-          }
-        },
-        "collection-date": null,
-        slug: "first-magazine-collection",
-        template: "collection",
-        "data-source": "automated",
-        "created-at": 1599571645414
-      }
-    }
-  ];
-};
-
-const reducer = () => ({ qt: { config: { "cdn-image": "thumbor-stg.assettype.com" } } });
-export const generateStore = createStore(reducer);

package/src/components/Fixture/slot-config.js

@@ -1,29 +0,0 @@
-export const slotConfig = [{ type: "ad" }];
-
-export const slotData = [
-  {
-    type: "widget",
-    layout: "widget",
-    layoutLabel: "Custom Widget",
-    pageType: "story",
-    widgetCode: "V2lkZ2V0JTIwMQ==",
-    config: {
-      customCode: "V2lkZ2V0JTIwMQ=="
-    }
-  },
-  {
-    type: "collection",
-    collectionSlug: "",
-    title: ""
-  },
-  {
-    type: "widget",
-    layout: "widget",
-    layoutLabel: "Custom Widget",
-    pageType: "story",
-    widgetCode: "V2lkZ2V0JTIwMg==",
-    config: {
-      customCode: "V2lkZ2V0JTIwMg=="
-    }
-  }
-];

package/src/components/Molecules/FullScreenImages/fullscreenimages.scss

@@ -1,56 +0,0 @@
-@import "../../../../node_modules/react-image-lightbox/style.css";
-
-.arr--image-lightbox {
-  .icon.loader {
-    color: var(--arrow-c-brand1);
-  }
-
-  .ril__toolbarRightSide {
-    flex-grow: 1;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .ril__toolbar {
-    bottom: 0;
-    top: auto;
-  }
-
-  img.ril__image {
-    width: unset;
-    max-width: 100%;
-  }
-
-  .ril__zoomInButton {
-    position: relative;
-    border-right: 1px solid var(--arrow-c-mono7);
-    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZD0iTS0zLTRoMjR2MjRILTN6IiBvcGFjaXR5PSIuMzg0Ii8+CiAgICAgICAgPGcgZmlsbD0iI0ZGRiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik04IDBoMXYxN0g4eiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNMTcgOHYxSDBWOHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=")
-      no-repeat center;
-  }
-
-  .ril__zoomOutButton {
-    position: relative;
-    border-right: 1px solid var(--arrow-c-mono7);
-    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMTcgMSI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxwYXRoIGQ9Ik0tMy0xMmgyNHYyNEgtM3oiIG9wYWNpdHk9Ii4zODQiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTcgMHYxSDBWMHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==")
-      no-repeat center;
-  }
-
-  .ril__zoomInButton,
-  .ril__zoomOutButton,
-  .ril__closeButton {
-    width: 48px;
-    height: 48px;
-  }
-  .ril__navButtons {
-    outline: none;
-    border-radius: 0;
-  }
-
-  .ril__toolbarItem .arr--hyperlink-button {
-    position: unset;
-    svg {
-      position: relative;
-      top: 10px;
-    }
-  }
-}

package/src/components/Molecules/FullScreenImages/index.js

@@ -1,98 +0,0 @@
-import React, { useState, Suspense, lazy } from "react";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import "./fullscreenimages.scss";
-import { Loading } from "../../Svgs/Loading/loading";
-import { HyperLink } from "../../Atoms/Hyperlink";
-
-const Lightbox = lazy(() => import("react-image-lightbox"));
-
-export const FullScreenImages = ({ imageSlug = "", template, element = {}, props }) => {
-  const cdnImage = useSelector((state) => get(state, ["qt", "config", "cdn-image"]));
-  let [photoIndex, handleImage] = useState(0);
-  let [isOpen, handleOpen] = useState(false);
-  const deviceWidth = get(global, ["innerWidth"], 0);
-
-  const hyperlinks = get(element, ["story-elements"], []).map((image) => image.hyperlink);
-
-  let imageUrlList = [];
-  if (!imageSlug) {
-    imageUrlList = get(element, ["story-elements"], []).map(
-      (image) => `//${cdnImage}/${image["image-s3-key"]}?w=${deviceWidth}`
-    );
-  }
-
-  const onClickHandler = (index) => {
-    handleOpen(true);
-    handleImage(index);
-  };
-  const onClickKey = imageSlug ? "onClick" : "onClickHandler";
-
-  const imageUrlListLength = imageUrlList.length;
-  const onMoveNext = (imageUrlListLength) => {
-    const next = (photoIndex + 1) % imageUrlListLength;
-    handleImage(next);
-  };
-
-  const onMovePrev = (imageUrlListLength) => {
-    const prev = (photoIndex + imageUrlListLength - 1) % imageUrlListLength;
-    handleImage(prev);
-  };
-
-  const onClose = () => {
-    handleImage(0);
-    handleOpen(false);
-  };
-
-  const getHyperLink = () => {
-    if (element.hyperlink || hyperlinks[photoIndex]) {
-      return <HyperLink hyperLink={element.hyperlink || hyperlinks[photoIndex]} />;
-    }
-    return null;
-  };
-
-  const lightboxProps = imageSlug
-    ? {
-        mainSrc: `//${cdnImage}/${imageSlug}?w=${deviceWidth}`,
-        toolbarButtons: [getHyperLink()]
-      }
-    : {
-        mainSrc: imageUrlList[photoIndex],
-        nextSrc: imageUrlList[(photoIndex + 1) % imageUrlListLength],
-        prevSrc: imageUrlList[(photoIndex + imageUrlListLength - 1) % imageUrlListLength],
-        onMoveNextRequest: () => onMoveNext(imageUrlListLength),
-        onMovePrevRequest: () => onMovePrev(imageUrlListLength),
-        toolbarButtons: [getHyperLink()]
-      };
-
-  const LoadingScreen = () => {
-    return (
-      <div>
-        <Loading />
-      </div>
-    );
-  };
-
-  return (
-    <div>
-      {React.createElement(template, {
-        [onClickKey]: onClickHandler,
-        ...props
-      })}
-      {isOpen ? (
-        <Suspense fallback={<LoadingScreen />}>
-          <Lightbox wrapperClassName="arr--image-lightbox" onCloseRequest={onClose} {...lightboxProps} />
-        </Suspense>
-      ) : null}
-    </div>
-  );
-};
-FullScreenImages.propTypes = {
-  imageSlug: PropTypes.string,
-  template: PropTypes.func,
-  element: PropTypes.shape({
-    "story-elements": PropTypes.array
-  }),
-  props: PropTypes.object
-};

package/src/components/Molecules/KeyEvents/README.md

@@ -1,21 +0,0 @@
-# Key Events
-
-Key events is used to represent the event templates for a live blog story.
-
-## Usage
-
-```jsx
-import { KeyEvents } from "@quintype/arrow";
-```
-
-### Use as a component
-
-```jsx
-
-const config = {
-   theme: #333333;
-}
-
-<KeyEvents config={config} />
-
-```