@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

package/src/components/Fixture/index.js

@@ -0,0 +1,424 @@
+/* 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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,48 @@
+@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;
+  }
+}

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

@@ -0,0 +1,86 @@
+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";
+
+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);
+
+  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 lightboxProps = imageSlug
+    ? {
+        mainSrc: `//${cdnImage}/${imageSlug}?w=${deviceWidth}`
+      }
+    : {
+        mainSrc: imageUrlList[photoIndex],
+        nextSrc: imageUrlList[(photoIndex + 1) % imageUrlListLength],
+        prevSrc: imageUrlList[(photoIndex + imageUrlListLength - 1) % imageUrlListLength],
+        onMoveNextRequest: () => onMoveNext(imageUrlListLength),
+        onMovePrevRequest: () => onMovePrev(imageUrlListLength)
+      };
+
+  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

@@ -0,0 +1,21 @@
+# 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} />
+
+```