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

package/src/components/Typography/stories.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { withStore } from "../../../storybook";
-import { Typography } from "./index";
-import Readme from "./README.md";
-
-withStore("Introduction", {}, Readme)
-  .addDecorator(story => <div style={{ maxWidth: "900px", margin: "auto", padding: "10px" }}>{story()}</div>)
-  .add("Typography", () => {
-    return <Typography />;
-  });

package/src/components/Typography/style.m.css

@@ -1,11 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.wrapper {
-  display: grid;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 25px;
-  @media (--viewport-medium) {
-    display: flex;
-  }
-}

package/src/entry-points.js

@@ -1,357 +0,0 @@
-/**
- * #### 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`
-    }
-  ];
-}
-
-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: "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: "TagIntroductionCard",
-      path: `${basePath}/TagIntroductionCard`
-    },
-    {
-      name: "AuthorIntroductionCard",
-      path: `${basePath}/AuthorIntroductionCard`
-    },
-    {
-      name: "AsideCollection",
-      path: `${basePath}/AsideCollection`
-    },
-    {
-      name: "StoryCollection",
-      path: `${basePath}/AsideCollection`
-    },
-    {
-      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: "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

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

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

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

@@ -1,91 +0,0 @@
-/**
- * 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";
-
-// 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 { 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 { 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 TagIntroductionCard } from "./components/Rows/TagIntroductionCard";
-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 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 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";

package/src/utils/testing-utils.js

@@ -1,8 +0,0 @@
-export function mockIntersectionObserver() {
-  const mockIntersectionObserver = jest.fn();
-  mockIntersectionObserver.mockReturnValue({
-    observe: jest.fn().mockReturnValue(null),
-    unobserve: jest.fn().mockReturnValue(null)
-  });
-  window.IntersectionObserver = mockIntersectionObserver;
-}