@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/entry-points.js

@@ -0,0 +1,373 @@
+/**
+ * #### IMPORTANT NOTE ####
+ * - be careful while changing the 'name' of a component
+ * - rollup uses this name to create the folder in which the CSS file for that component is placed
+ * - so if you change the name, it basically will change Arrow's API
+ * Example:
+ * - if you change {name: "Text"} to {name: "Text123"},
+ * - arrow users will have to change `import "@quintype/arrow/Text/styles.arrow.css"` to `import "@quintype/arrow/Text123/styles.arrow.css"` everywhere.
+ * ----x----x----x----x----
+ *
+ * Every component that arrow exports should export its CSS separately
+ * Entries here have to match with components exported in src/index.js
+ *
+ */
+
+const path = require("path");
+
+function getEntryPoints() {
+  const entryPoints = [
+    {
+      // this is the main bundle containing all components. It's name must be "index"
+      name: "index",
+      path: path.resolve(path.join(__dirname, "/index.js"))
+    },
+    ...storyElementsEntryPoints(),
+    ...atomsEntryPoints(),
+    ...moleculesEntryPoints(),
+    ...rowsEntryPoints()
+  ];
+  return entryPoints.reduce((accumulator, currentBundle) => {
+    accumulator[currentBundle.name] = currentBundle.path;
+    return accumulator;
+  }, {});
+}
+
+function storyElementsEntryPoints() {
+  const basePath = path.resolve(path.join(__dirname, "/components/Atoms/StoryElements"));
+  return [
+    {
+      name: "Text",
+      path: `${basePath}/Text`
+    },
+    {
+      name: "Quote",
+      path: `${basePath}/Quote`
+    },
+    {
+      name: "Blurb",
+      path: `${basePath}/Blurb`
+    },
+    {
+      name: "AlsoRead",
+      path: `${basePath}/AlsoRead`
+    },
+    {
+      name: "Summary",
+      path: `${basePath}/Summary`
+    },
+    {
+      name: "BlockQuote",
+      path: `${basePath}/BlockQuote`
+    },
+    {
+      name: "Image",
+      path: `${basePath}/Image`
+    },
+    {
+      name: "Video",
+      path: `${basePath}/Video`
+    },
+    {
+      name: "BigFact",
+      path: `${basePath}/BigFact`
+    },
+    {
+      name: "StoryElement",
+      path: `${basePath}/StoryElement`
+    },
+    {
+      name: "QuestionAnswer",
+      path: `${basePath}/QuestionAnswer`
+    },
+    {
+      name: "ImageGallery",
+      path: `${basePath}/imageGallery`
+    },
+    {
+      name: "Reference",
+      path: `${basePath}/Reference`
+    },
+    {
+      name: "Attachment",
+      path: `${basePath}/Attachment`
+    },
+    {
+      name: "ImageSlideshow",
+      path: `${basePath}/ImageSlideshow`
+    }
+  ];
+}
+
+function atomsEntryPoints() {
+  const basePath = path.resolve(path.join(__dirname, "/components/Atoms"));
+  return [
+    {
+      name: "Author",
+      path: `${basePath}/Author`
+    },
+    {
+      name: "AuthorWithTime",
+      path: `${basePath}/AuthorWithTimestamp`
+    },
+    {
+      name: "CollectionName",
+      path: `${basePath}/CollectionName`
+    },
+    {
+      name: "Headline",
+      path: `${basePath}/Headline`
+    },
+    {
+      name: "HeroImage",
+      path: `${basePath}/HeroImage`
+    },
+    {
+      name: "LoadmoreButton",
+      path: `${basePath}/Loadmore`
+    },
+    {
+      name: "SectionTag",
+      path: `${basePath}/SectionTag`
+    },
+    {
+      name: "Subheadline",
+      path: `${basePath}/Subheadline`
+    },
+    {
+      name: "TimeStamp",
+      path: `${basePath}/TimeStamp`
+    },
+    {
+      name: "ScrollSnap",
+      path: `${basePath}/ScrollSnap`
+    },
+    {
+      name: "PublishDetails",
+      path: `${basePath}/PublishDetail`
+    }
+  ];
+}
+
+function moleculesEntryPoints() {
+  const basePath = path.resolve(path.join(__dirname, "/components/Molecules"));
+  return [
+    {
+      name: "StoryCard",
+      path: `${basePath}/StoryCard`
+    },
+    {
+      name: "StorycardContent",
+      path: `${basePath}/StorycardContent`
+    },
+    {
+      name: "StoryElementCard",
+      path: `${basePath}/StoryElementCard`
+    },
+    {
+      name: "KeyEvents",
+      path: `${basePath}/KeyEvents`
+    },
+    {
+      name: "SocialShareTemplate",
+      path: `${basePath}/SocialShareTemplate`
+    },
+    {
+      name: "FollowUs",
+      path: `${basePath}/FollowUs`
+    },
+    {
+      name: "PageIntroductionCard",
+      path: `${basePath}/PageIntroductionCard`
+    }
+  ];
+}
+
+function rowsEntryPoints() {
+  const basePath = path.resolve(path.join(__dirname, "/components/Rows"));
+  return [
+    {
+      name: "FourColGrid",
+      path: `${basePath}/FourColGrid`
+    },
+    {
+      name: "OneColStoryList",
+      path: `${basePath}/OneColStoryList`
+    },
+    {
+      name: "ThreeColGrid",
+      path: `${basePath}/ThreeColGrid`
+    },
+    {
+      name: "TwoColFourStories",
+      path: `${basePath}/TwoColFourStory`
+    },
+    {
+      name: "TwoColThreeStories",
+      path: `${basePath}/TwoColThreeStory`
+    },
+    {
+      name: "TwoColSevenStories",
+      path: `${basePath}/TwoColSevenStories`
+    },
+    {
+      name: "ThreeColSixStories",
+      path: `${basePath}/ThreeColSixStories`
+    },
+    {
+      name: "ThreeColSevenStory",
+      path: `${basePath}/ThreeColSevenStory`
+    },
+    {
+      name: "ElevenStories",
+      path: `${basePath}/ElevenStories`
+    },
+    {
+      name: "CollectionFilter",
+      path: `${basePath}/CollectionFilter`
+    },
+    {
+      name: "HalfScreenSlider",
+      path: `${basePath}/HalfScreenSlider`
+    },
+    {
+      name: "FourStorySlider",
+      path: `${basePath}/FourStorySlider`
+    },
+    {
+      name: "FourStorySliderPortrait",
+      path: `${basePath}/FourStorySliderPortrait`
+    },
+    {
+      name: "FullScreenSlider",
+      path: `${basePath}/FullScreenSlider`
+    },
+    {
+      name: "ThreeColFourteenStories",
+      path: `${basePath}/ThreeColFourteenStory`
+    },
+    {
+      name: "FourColTwelveStories",
+      path: `${basePath}/FourColTwelveStory`
+    },
+    {
+      name: "IntroductionCard",
+      path: `${basePath}/IntroductionCard`
+    },
+    {
+      name: "AuthorIntroductionCard",
+      path: `${basePath}/AuthorIntroductionCard`
+    },
+    {
+      name: "AsideCollection",
+      path: `${basePath}/AsideCollection`
+    },
+    {
+      name: "StoryCollection",
+      path: `${basePath}/AsideCollection`
+    },
+    {
+      name: "Snapshot",
+      path: `${basePath}/StoryTemplates/Snapshot`
+    },
+    {
+      name: "VideoStoryTemplate",
+      path: `${basePath}/StoryTemplates/VideoStoryTemplates`
+    },
+    {
+      name: "TextStoryTemplate",
+      path: `${basePath}/StoryTemplates/TextStoryTemplates`
+    },
+    {
+      name: "LiveBlogStoryTemplate",
+      path: `${basePath}/StoryTemplates/LiveBlogStorytemplates`
+    },
+    {
+      name: "ListicleStoryTemplate",
+      path: `${basePath}/StoryTemplates/ListicleStoryTemplates`
+    },
+    {
+      name: "EventStoryTemplate",
+      path: `${basePath}/StoryTemplates/EventStoryTemplates`
+    },
+    {
+      name: "ListComponent",
+      path: `${basePath}/ListComponent`
+    },
+    {
+      name: "MagazineEditions",
+      path: `${basePath}/MagazineEditions`
+    },
+    {
+      name: "MagazineWidget",
+      path: `${basePath}/MagazineWidget`
+    },
+    {
+      name: "MagazineHeaderCard",
+      path: `${basePath}/MagazineHeaderCard`
+    },
+    {
+      name: "PhotoStoryTemplate",
+      path: `${basePath}/StoryTemplates/PhotoStoryTemplates`
+    },
+    {
+      name: "AuthorsList",
+      path: `${basePath}/AuthorsList`
+    },
+    {
+      name: "FourColSixteenStories",
+      path: `${basePath}/FourColSixteenStories`
+    },
+    {
+      name: "FourColFiveStories",
+      path: `${basePath}/FourColFiveStories`
+    },
+    {
+      name: "TwoColSixStories",
+      path: `${basePath}/TwoColSixStories`
+    },
+    {
+      name: "TwoColFourStoryHighlight",
+      path: `${basePath}/TwoColFourStoryHighlight`
+    },
+    { name: "OpinionCollection", path: `${basePath}/OpinionCollection` },
+    {
+      name: "ThreeColFlexStories",
+      path: `${basePath}/ThreeColFlexStories`
+    },
+    {
+      name: "SixColSixStories",
+      path: `${basePath}/SixColSixStories`
+    },
+    {
+      name: "TwoColTenStoriesSidebar",
+      path: `${basePath}/TwoColTenStoriesSidebar`
+    },
+    {
+      name: "ThreeColTwelveStories",
+      path: `${basePath}/ThreeColTwelveStories`
+    },
+    {
+      name: "FourTabbedBigStorySlider",
+      path: `${basePath}/FourTabbedBigStorySlider`
+    },
+    {
+      name: "AlternateCollectionFilter",
+      path: `${basePath}/AlternateCollectionFilter`
+    },
+    {
+      name: "Listicles",
+      path: `${basePath}/Listicles`
+    },
+    {
+      name: "FourColPortraitStories",
+      path: `${basePath}/FourColPortraitStories`
+    },
+    {
+      name: "AstrologyCollection",
+      path: `${basePath}/AstrologyCollection`
+    }
+  ];
+}
+
+module.exports = { getEntryPoints };

package/src/guide/stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { addReadme } from "storybook-readme";
+import readme from "../../README.md";
+import { storiesOf } from "@storybook/react";
+
+storiesOf("Introduction", module)
+  .addDecorator(addReadme)
+  .addDecorator(story => <div style={{ maxWidth: "900px", margin: "auto" }}>{story()}</div>)
+  .addParameters({
+    options: {
+      showPanel: false
+    },
+    readme: {
+      content: readme,
+      codeTheme: "a11y-dark"
+    }
+  })
+  .add("Getting Started", () => <div />);

package/src/hydration-component/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import useNearScreen from "./useNearScreen";
+
+import PropTypes from "prop-types";
+
+const EMPTY_HTML = { __html: "" };
+const isServer = typeof window === "undefined";
+
+export const ProgressiveHydration = (props) => {
+  const { children } = props;
+  const ref = useRef(null);
+  const isNearScreen = useNearScreen({ ref });
+
+  useEffect(() => {
+    const { current: el } = ref;
+    // CLIENT:
+    // If we want to force the hydration OR the element is near screen
+    // then we hydrate the content to get the functionality ready
+    if (isNearScreen) {
+      const action = el.hasChildNodes() ? "hydrate" : "render";
+      ReactDOM[action](children, el);
+    }
+  }, [children, isNearScreen]);
+
+  // SERVER: Just render the content as usual
+  if (isServer) {
+    return <div ref={ref}>{children}</div>;
+  }
+
+  // CLIENT: Avoid hydration until we say so
+  return <div ref={ref} suppressHydrationWarning dangerouslySetInnerHTML={EMPTY_HTML} />;
+};
+
+ProgressiveHydration.propTypes = {
+  children: PropTypes.element
+};

package/src/hydration-component/useNearScreen.js

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+
+let observer;
+const isClient = typeof window !== "undefined";
+
+const hasIntersectionObserverSupport = () => typeof window.IntersectionObserver !== "undefined";
+
+// import intersection observer polyfill only if on client
+// and if not supported by browser
+const getIntersectionObserver = () => {
+  return Promise.resolve(isClient && !hasIntersectionObserverSupport() && import("intersection-observer"));
+};
+
+// options for intersection observer in order to improve the effect
+const intersectionObserverOptions = {
+  root: null, // windows viewport will be used
+  rootMargin: "200px 0px 0px 0px"
+};
+
+const handleIntersect = (entries, observer) => {
+  entries
+    .filter((entry) => entry.isIntersecting)
+    .forEach((entry) => {
+      const { target } = entry;
+      target._onIntersect(observer);
+    });
+};
+
+// get observer from the cache or create a new one
+const getObserver = () =>
+  getIntersectionObserver().then((_) => {
+    if (observer) return observer;
+    if (isClient) {
+      return new window.IntersectionObserver(handleIntersect, intersectionObserverOptions);
+    }
+  });
+
+export default ({ ref }) => {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    const { current } = ref;
+    if (!current) return;
+    // get observer async and only when needed
+    getObserver().then((observer) => observer.observe(current));
+    // mutate the current target to add a method to be executed when intersecting
+    current._onIntersect = (observer) => {
+      setShow(true);
+      observer.unobserve(current);
+    };
+    // clean observed element when unmounted
+    return () => (current._isSubscribed = false);
+  }, [ref]);
+
+  return show;
+};

package/src/index.js

@@ -0,0 +1,99 @@
+/**
+ * IMPORTANT NOTE:
+ * Please make sure to make a corresponding entry in entry-points.js
+ * every export here needs to have a corresponding entry in entry-points.js
+ */
+
+// ATOMS
+export { Author } from "./components/Atoms/Author";
+export { AuthorWithTime } from "./components/Atoms/AuthorWithTimestamp";
+export { CollectionName } from "./components/Atoms/CollectionName";
+export { Headline } from "./components/Atoms/Headline";
+export { HeroImage } from "./components/Atoms/HeroImage";
+export { LoadmoreButton } from "./components/Atoms/Loadmore";
+export { ExtendedLoadMore } from "./components/Atoms/ExtendedLoadMore";
+export { SectionTag } from "./components/Atoms/SectionTag";
+export { Subheadline } from "./components/Atoms/Subheadline";
+export { TimeStamp } from "./components/Atoms/TimeStamp";
+export { LoadMoreTarget } from "./components/Atoms/LoadMoreTarget";
+export { ScrollSnap } from "./components/Atoms/ScrollSnap";
+export { PublishDetails } from "./components/Atoms/PublishDetail";
+
+// STORY ELEMENTS
+export { Text } from "./components/Atoms/StoryElements/Text";
+export { Quote } from "./components/Atoms/StoryElements/Quote";
+export { Blurb } from "./components/Atoms/StoryElements/Blurb";
+export { AlsoRead } from "./components/Atoms/StoryElements/AlsoRead";
+export { Summary } from "./components/Atoms/StoryElements/Summary";
+export { AISummary } from "./components/Atoms/StoryElements/AISummary";
+export { BlockQuote } from "./components/Atoms/StoryElements/BlockQuote";
+export { Image } from "./components/Atoms/StoryElements/Image";
+export { Video } from "./components/Atoms/StoryElements/Video";
+export { BigFact } from "./components/Atoms/StoryElements/BigFact";
+export { StoryElement } from "./components/Atoms/StoryElements/StoryElement";
+export { QuestionAnswer } from "./components/Atoms/StoryElements/QuestionAnswer";
+export { ImageGallery } from "./components/Atoms/StoryElements/imageGallery";
+export { Reference } from "./components/Atoms/StoryElements/Reference";
+export { Attachment } from "./components/Atoms/StoryElements/Attachment";
+export { ImageSlideshow } from "./components/Atoms/StoryElements/ImageSlideshow";
+
+// MOLECULES
+export { StoryCard } from "./components/Molecules/StoryCard";
+export { StorycardContent } from "./components/Molecules/StorycardContent";
+export { StoryElementCard } from "./components/Molecules/StoryElementCard";
+export { SocialShareTemplate } from "./components/Molecules/SocialShareTemplate";
+export { FollowUs } from "./components/Molecules/FollowUs";
+export { default as KeyEvents } from "./components/Molecules/KeyEvents";
+export { PageIntroductionCard } from "./components/Molecules/PageIntroductionCard";
+export { default as PortraitStoryCard } from "./components/Molecules/PortraitStoryCard";
+
+// ROWS
+export { default as FourColGrid } from "./components/Rows/FourColGrid";
+export { default as OneColStoryList } from "./components/Rows/OneColStoryList";
+export { default as ThreeColGrid } from "./components/Rows/ThreeColGrid";
+export { default as TwoColFourStories } from "./components/Rows/TwoColFourStory";
+export { default as TwoColThreeStories } from "./components/Rows/TwoColThreeStory";
+export { default as TwoColSevenStories } from "./components/Rows/TwoColSevenStories";
+export { default as ThreeColSixStories } from "./components/Rows/ThreeColSixStories";
+export { default as ThreeColSevenStory } from "./components/Rows/ThreeColSevenStory";
+export { default as ElevenStories } from "./components/Rows/ElevenStories";
+export { default as CollectionFilter } from "./components/Rows/CollectionFilter";
+export { default as HalfScreenSlider } from "./components/Rows/HalfScreenSlider";
+export { default as FourStorySlider } from "./components/Rows/FourStorySlider";
+export { default as FourStorySliderPortrait } from "./components/Rows/FourStorySliderPortrait";
+export { default as FullScreenSlider } from "./components/Rows/FullScreenSlider";
+export { default as ThreeColFourteenStories } from "./components/Rows/ThreeColFourteenStory";
+export { default as FourColTwelveStories } from "./components/Rows/FourColTwelveStory";
+export { default as IntroductionCard } from "./components/Rows/IntroductionCard";
+export { default as AuthorIntroductionCard } from "./components/Rows/AuthorIntroductionCard";
+export { default as AuthorsList } from "./components/Rows/AuthorsList";
+export { default as AsideCollection } from "./components/Rows/AsideCollection";
+export { StoryCollection } from "./components/Rows/AsideCollection";
+export { default as Snapshot } from "./components/Rows/StoryTemplates/Snapshot";
+export { default as VideoStoryTemplate } from "./components/Rows/StoryTemplates/VideoStoryTemplates";
+export { default as TextStoryTemplate } from "./components/Rows/StoryTemplates/TextStoryTemplates";
+export { default as LiveBlogStoryTemplate } from "./components/Rows/StoryTemplates/LiveBlogStorytemplates";
+export { default as ListicleStoryTemplate } from "./components/Rows/StoryTemplates/ListicleStoryTemplates";
+export { default as EventStoryTemplate } from "./components/Rows/StoryTemplates/EventStoryTemplates";
+export { default as ListComponent } from "./components/Rows/ListComponent";
+export { default as MagazineEditions } from "./components/Rows/MagazineEditions";
+export { default as MagazineWidget } from "./components/Rows/MagazineWidget";
+export { default as MagazineHeaderCard } from "./components/Rows/MagazineHeaderCard";
+export { default as PhotoStoryTemplates } from "./components/Rows/StoryTemplates/PhotoStoryTemplates";
+export { default as FourColSixteenStories } from "./components/Rows/FourColSixteenStories";
+export { default as FourColFiveStories } from "./components/Rows/FourColFiveStories";
+export { default as TwoColSixStories } from "./components/Rows/TwoColSixStories";
+export { default as TwoColFourStoryHighlight } from "./components/Rows/TwoColFourStoryHighlight";
+export { default as OpinionCollection } from "./components/Rows/OpinionCollection";
+export { default as ThreeColFlexStories } from "./components/Rows/ThreeColFlexStories";
+export { default as SixColSixStories } from "./components/Rows/SixColSixStories";
+export { default as TwoColTenStoriesSidebar } from "./components/Rows/TwoColTenStoriesSidebar";
+export { default as ThreeColTwelveStories } from "./components/Rows/ThreeColTwelveStories";
+export { default as FourTabbedBigStorySlider } from "./components/Rows/FourTabbedBigStorySlider";
+export { default as AlternateCollectionFilter } from "./components/Rows/AlternateCollectionFilter";
+export { default as FourColPortraitStories } from "./components/Rows/FourColPortraitStories";
+export { default as AstrologyCollection } from "./components/Rows/AstrologyCollection";
+export { default as Listicles } from "./components/Rows/Listicles";
+
+// UTILS
+export { formatter } from "./utils/utils";

package/src/utils/copy-link.js

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+export const displayCopiedMsg = (copylinkIconRef, copiedMessageRef, direction, fixedToScreen) => {
+  useEffect(() => {
+    const copylinkIcon = copylinkIconRef?.current;
+    const copiedMessage = copiedMessageRef?.current;
+    if (!copylinkIcon || !copiedMessage) return;
+
+    const handleClick = (event) => {
+      const x = event.clientX;
+      const y = event.clientY;
+      if (direction === 'rtl') {
+        copiedMessage.style.left = fixedToScreen ? `${x - 54}px` : `${x - 60}px`;
+      } else {
+        copiedMessage.style.left = fixedToScreen ? `${x + 10}px` : `${x + 54}px`;
+      }
+      copiedMessage.style.top = `${y + 50}px`;
+      copiedMessage.classList.remove('hidden');
+
+      setTimeout(() => {
+        copiedMessage.classList.add('hidden');
+      }, 1000);
+    };
+
+    copylinkIcon.addEventListener('click', handleClick);
+  }, [copylinkIconRef, copiedMessageRef, direction]);
+};
+
+export const copyToClipboard = (url) => {
+  const copyFrom = document?.createElement('textarea');
+  copyFrom.textContent = url;
+  document?.body.appendChild(copyFrom);
+  copyFrom.select();
+  document?.execCommand('copy');
+  copyFrom.blur();
+  document?.body.removeChild(copyFrom);
+};

package/src/utils/dateFnsLocales.js

@@ -0,0 +1,9 @@
+import enUS from "date-fns/locale/en-US";
+import pt from "date-fns/locale/pt";
+import sk from "date-fns/locale/sk";
+import ar from "date-fns/locale/ar";
+import enIn from "date-fns/locale/en-IN";
+import bn from "date-fns/locale/bn";
+import arSa from "date-fns/locale/ar-SA";
+
+export const LOCALES = { enUS, pt, sk, ar, enIn, bn, arSa };