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

package/__mocks__/fileMock.js

@@ -1 +0,0 @@
-module.exports = {};

package/__mocks__/styleMock.js

@@ -1 +0,0 @@
-module.exports = {};

package/assets/stylesheets/mixins.scss

@@ -1,27 +0,0 @@
-$mobile: 767px;
-$tablet: 768px;
-$desktop: 1025px;
-$desktop-lg: 1200px;
-
-@mixin mobile {
-  @media (max-width: #{$mobile}) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (min-width: #{$tablet}) {
-    @content;
-  }
-}
-@mixin desktop {
-  @media (min-width: #{$desktop}) {
-    @content;
-  }
-}
-
-@mixin desktop-lg {
-  @media (min-width: #{$desktop-lg}) {
-    @content;
-  }
-}

package/assets/stylesheets/reset.scss

@@ -1,148 +0,0 @@
-/* RESET CSS */
-
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit 100%;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-figure,
-img {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  text-decoration: none;
-  color: inherit;
-}

package/assets/stylesheets/viewports.m.css

@@ -1,3 +0,0 @@
-@value mobile: 768px;
-@value tablet: 992px;
-@value desktop: 1025px;

package/bin-dev-scripts/prepublish.sh

@@ -1,11 +0,0 @@
-#!/bin/bash -e
-
-if [ "$CAN_PUBLISH" != "true" ]
-then
-  echo "**********  IMPORTANT NOTE  **********"
-  echo "** Publishing procedure has changed. Do not run 'npm publish' directly. Instead, run the publish script"
-  echo "** running \"./publish\" on a branch will publish a beta version"
-  echo "** running \"./publish\" on master will publish a prod version"
-  echo "** Aborting..."
-  exit 1
-fi

package/bin-dev-scripts/sync-to.sh

@@ -1,13 +0,0 @@
-#!/bin/bash -e
-
-PATH_TO_APP="$1"
-
-echo $PATH_TO_APP
-
-if [ -z $PATH_TO_APP ] ; then
-  echo "please provide relative path to the app; eg  ../madrid"
-  exit 1
-fi
-
-npm run build
-rsync -av --delete-before dist/ "$PATH_TO_APP/node_modules/@quintype/arrow"

package/jest.config.json

@@ -1,14 +0,0 @@
-{
-  "collectCoverageFrom": ["src/**/*.{js,jsx}"],
-  "coverageDirectory": "coverage",
-  "modulePathIgnorePatterns": ["/dist/"],
-  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.[j]sx?$",
-  "moduleFileExtensions": ["js", "jsx", "json", "node"],
-  "testEnvironment": "jsdom",
-  "snapshotSerializers": ["enzyme-to-json/serializer"],
-  "setupFilesAfterEnv": ["<rootDir>/setupTests.js"],
-  "moduleNameMapper": {
-    "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
-    "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
-  }
-}

package/publish

@@ -1,22 +0,0 @@
-#!/bin/bash -e
-
-export CAN_PUBLISH="true"
-BRANCH=$(git symbolic-ref --short HEAD)
-
-if [ "$BRANCH" == "master" ];
-then
-  echo "#### Publishing Prod Version ####"
-  npm install
-  git diff --quiet || echo "Uncommitted changes present, can't proceed"
-  npm run test -- --watchAll=false
-  npm run docs
-  npx standard-version
-  git push --follow-tags origin "$BRANCH"
-  npm publish ./dist
-else
-  echo "#### Publishing Beta Version ####"
-  npm run test -- --watchAll=false
-  npx standard-version --prerelease "$BRANCH" --skip.changelog=true
-  git push --follow-tags origin "$BRANCH"
-  npm publish --tag beta
-fi

package/rollup.js

@@ -1,202 +0,0 @@
-/* eslint-disable no-console */
-const fs = require("fs");
-const { exec } = require("child_process");
-const path = require("path");
-const rollup = require("rollup");
-const { babel } = require("@rollup/plugin-babel");
-const postcssCustomMedia = require("postcss-custom-media");
-const precss = require("precss");
-const postcss = require("rollup-plugin-postcss");
-const commonjs = require("@rollup/plugin-commonjs");
-const { nodeResolve } = require("@rollup/plugin-node-resolve");
-const packageJson = require("./package.json");
-const { getEntryPoints } = require("./src/entry-points");
-const { terser } = require("rollup-plugin-terser");
-const { visualizer } = require("rollup-plugin-visualizer");
-
-/**
- * Runs rollup via javascript API
- *  - deletes old dist dir, creates a new one
- *  - creates distribution-safe package.json, puts it in dist
- *  - bundles all components individually and extracts the component css in their respective files (takes component names from src/entry-points.js)
- *  - deletes JS files created in previous step since js will be imported from the main bundle
- *  - creates main bundle (containing all arrow components) in both ESM and CJS formats
- *  - copies assets (app.scss, readme) to dist
- */
-
-async function main() {
-  console.time("Bundling completed in");
-  console.log("#### Building, please wait... ####");
-  await houseKeeping();
-  await buildComponentBundles();
-  await buildMainBundle();
-  await copyAssets();
-  console.timeEnd("Bundling completed in");
-}
-
-main();
-
-async function buildMainBundle() {
-  const { index } = getEntryPoints();
-  const inputOptions = {
-    input: index,
-    external: getExternals(),
-    plugins: [
-      babel({
-        exclude: ["node_modules/**", /.test.js$/, /.stories.js$/, /entry-points.js$/],
-        include: /.jsx?$/,
-        babelHelpers: "runtime"
-      }),
-      postcss({
-        modules: true,
-        minimize: true,
-        plugins: [precss(), postcssCustomMedia()],
-        extract: false
-      }),
-      nodeResolve(),
-      commonjs(),
-      ...(process.env.NODE_ENV === "production" ? [terser()] : [])
-    ]
-  };
-  const outputOptionsEsm = {
-    format: "es",
-    file: getPath("dist/esm/index.js")
-  };
-  const outputOptionsCjs = {
-    format: "cjs",
-    file: getPath("dist/cjs/index.js")
-  };
-  await build(inputOptions, outputOptionsEsm, { analyze: process.env.ANALYZE_STATS });
-  await build(inputOptions, outputOptionsCjs);
-}
-
-async function buildComponentBundles() {
-  if (process.env.ANALYZE_STATS) return;
-  const { index, ...componentEntryPoints } = getEntryPoints();
-  for (const bundleName in componentEntryPoints) {
-    const componentBundlePath = componentEntryPoints[bundleName];
-    const inputOptions = {
-      input: componentBundlePath,
-      external: getExternals(),
-      plugins: [
-        babel({
-          exclude: ["node_modules/**", /.test.js$/, /.stories.js$/, /entry-points.js$/],
-          include: /.jsx?$/,
-          babelHelpers: "runtime"
-        }),
-        postcss({
-          modules: true,
-          minimize: true,
-          plugins: [precss(), postcssCustomMedia()],
-          extract: getPath(`dist/${bundleName}/styles.arrow.css`)
-        }),
-        nodeResolve(),
-        commonjs(),
-        ...(process.env.NODE_ENV === "production" ? [terser()] : [])
-      ]
-    };
-    const outputOptions = {
-      format: "es",
-      file: getPath(`dist/${bundleName}/index.js`)
-    };
-    await build(inputOptions, outputOptions);
-  }
-  await cleanupDist();
-}
-
-function getExternals() {
-  const dependencies = Object.keys(packageJson.dependencies || {});
-  const peerDependencies = Object.keys(packageJson.peerDependencies || {});
-  return dependencies
-    .concat(peerDependencies)
-    .concat(["@dr.pogodin/babel-plugin-react-css-modules/dist/browser/getClassName", "prop-types"]);
-}
-
-async function build(inputOptions, outputOptions, opts = {}) {
-  if (opts.analyze) {
-    inputOptions.plugins.push(
-      visualizer({ filename: path.join(__dirname, `stats/stats-${Date.now()}.html`), open: true })
-    );
-  }
-  const bundle = await rollup.rollup(inputOptions);
-  await bundle.write(outputOptions);
-  await bundle.close();
-}
-
-// returns absolute path wrt to this file
-function getPath(pathStr) {
-  return path.resolve(path.join(__dirname, pathStr));
-}
-
-/**
- * houseKeeping:
- * - delete old dist dir, create new empty dist dir
- * - create distribution-safe package.json, put it in dist dir
- */
-async function houseKeeping() {
-  const pathToDist = getPath("dist");
-  const safePkgJsonObj = getSafePackageJson();
-  await execShellCmd(`rm -rf ${pathToDist}`);
-  await execShellCmd(`mkdir ${pathToDist}`);
-  fs.writeFileSync(`${pathToDist}/package.json`, Buffer.from(JSON.stringify(safePkgJsonObj), "utf-8"));
-}
-
-/**
- * Removes the js files generated for individual components
- */
-async function cleanupDist() {
-  const componentsPath = getPath("dist");
-  const componentsDir = fs.readdirSync(componentsPath, { withFileTypes: true });
-  const subDirectories = componentsDir.filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
-  for (const subDir of subDirectories) {
-    const jsFilePath = getPath(`dist/${subDir}/index.js`);
-    await execShellCmd(`rm ${jsFilePath}`);
-  }
-}
-
-async function copyAssets() {
-  const distPath = getPath("dist");
-  await execShellCmd(`cp ${getPath("assets/stylesheets/app.scss")} ${distPath}`);
-  await execShellCmd(`cp ${getPath("README.md")} ${distPath}`);
-}
-
-function getSafePackageJson() {
-  const take = [
-    "name",
-    "version",
-    "engines",
-    "description",
-    "main",
-    "module",
-    "repository",
-    "author",
-    "license",
-    "bugs",
-    "peerDependencies",
-    "dependencies",
-    "homepage"
-  ];
-  const pkgJsonStr = fs.readFileSync(getPath("package.json")).toString();
-  const pkgJsonObj = JSON.parse(pkgJsonStr);
-  const acc = {};
-  take.forEach((key) => {
-    if (pkgJsonObj.hasOwnProperty(key)) {
-      acc[key] = pkgJsonObj[key];
-    }
-  });
-  return acc;
-}
-
-function execShellCmd(command) {
-  return new Promise((resolve, reject) => {
-    exec(command, (err, stdout, stderr) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-      if (stdout) console.log(stdout);
-      if (stderr) console.error(stderr);
-      resolve();
-    });
-  });
-}

package/setupTests.js

@@ -1,3 +0,0 @@
-import { configure } from "enzyme";
-import EnzymeAdapter from "enzyme-adapter-react-16";
-configure({ adapter: new EnzymeAdapter() });

package/src/components/Atoms/AdPlaceholder/ads.m.css

@@ -1,13 +0,0 @@
-.ads {
-  background-color: var(--arrow-c-mono5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.ad-text {
-  color: var(--arrow-c-mono3);
-}
-.ad-wrapper {
-  display: flex;
-  justify-content: center;
-}

package/src/components/Atoms/AdPlaceholder/index.js

@@ -1,25 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./ads.m.css";
-
-export const AdPlaceholder = ({ height, width }) => {
-  return (
-    <div className="arr--ad-wrapper" styleName="ad-wrapper">
-      <div styleName="ads" style={{ height: height, width: width }}>
-        <h3 styleName="ad-text">LEADERBOARD </h3>
-      </div>
-    </div>
-  );
-};
-
-AdPlaceholder.propTypes = {
-  // height of ad
-  height: PropTypes.string,
-  // width of ad
-  width: PropTypes.string
-};
-
-AdPlaceholder.defaultProps = {
-  width: "720px",
-  height: "90px"
-};

package/src/components/Atoms/Author/README.md

@@ -1,19 +0,0 @@
-# Author
-
-Displays the author for the story card based on the first author from the Story API reponse.
-
-## Usage
-
-```jsx
-<Author story={story} />
-```
-
-```jsx
-<Author story={story} hideAuthorImage />
-```
-
-```jsx
-<Author story={story} prefix="By" />
-```
-
-<!-- PROPS -->

package/src/components/Atoms/Author/author.m.css

@@ -1,65 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.author {
-  display: flex;
-  align-items: center;
-  color: var(--arrow-c-mono4);
-  margin-bottom: var(--arrow-spacing-xs);
-}
-
-.author-image {
-  border-radius: 100%;
-  width: var(--arrow-spacing-l);
-  height: var(--arrow-spacing-l);
-  margin-right: var(--arrow-spacing-xs);
-  overflow: hidden;
-}
-
-.author-image figure,
-.author-image img {
-  /* width & height need to be explicitly set for improving CLS */
-  height: 100%;
-  width: 100%;
-}
-
-.author-name {
-  margin: auto var(--arrow-spacing-xs) auto 0;
-}
-
-.bottom-fix {
-  margin-top: auto;
-}
-
-.prefix {
-  margin: auto var(--arrow-spacing-xxs) auto 0;
-}
-
-.rtl-image {
-  display: none;
-}
-
-html[dir="rtl"] {
-  .author-name {
-    margin-right: 0;
-  }
-
-  .prefix {
-    margin-right: 0;
-    margin-left: var(--arrow-spacing-xxs);
-  }
-
-  .ltr-image {
-    display: none;
-  }
-
-  .rtl-image {
-    display: block;
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono4);
-}
-.light {
-  color: var(--arrow-c-invert-mono4);
-}

package/src/components/Atoms/Author/index.js

@@ -1,98 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { useStateValue } from "../../SharedContext";
-import { ResponsiveImage, Link } from "@quintype/components";
-import { getTextColor } from "../../../utils/utils";
-import { connect } from "react-redux";
-
-import "./author.m.css";
-
-const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {} }) => {
-  const configData = useStateValue() || {};
-  const isAuthor = get(configData, ["showAuthor"], true);
-  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name: authorName, slug } = get(
-    story,
-    ["authors", "0"],
-    ""
-  );
-  const isBottomClasses = isBottom ? "bottom-fix" : "";
-  const textColor = getTextColor(configData.theme);
-  const mountAt = get(config, ["mountAt"], "");
-
-  const authorImage = (dir) => {
-    if (!avatarUrl && !avatarS3Key) {
-      return null;
-    }
-    return (
-      <div styleName={`author-image ${dir}-image`} data-test-id="author-image">
-        <figure>
-          {avatarS3Key ? (
-            <ResponsiveImage
-              slug={avatarS3Key}
-              aspect-ratio={[1, 1]}
-              defaultWidth={400}
-              imgParams={{ auto: ["format", "compress"] }}
-              alt={authorName}
-            />
-          ) : (
-            <img src={avatarUrl} />
-          )}
-        </figure>
-      </div>
-    );
-  };
-  const isPrefix = (dir) => {
-    if (prefix) {
-      return (
-        <div className="arr-author-prefix" styleName={`prefix ${textColor}`}>
-          {prefix}
-        </div>
-      );
-    }
-    return !hideAuthorImage && authorImage(dir);
-  };
-  return (
-    <>
-      {isAuthor && (
-        <Link
-          className="author-name arr-author-name arrow-component"
-          href={`${mountAt}/author/` + slug}
-          styleName={`author ${isBottomClasses}`}
-          aria-label="author-name">
-          {isPrefix("ltr")}
-          <div className="author-name" styleName={`author-name ${textColor}`} data-test-id="author-name">
-            {authorName || story["author-name"]}
-          </div>
-          {!prefix && isPrefix("rtl")}
-        </Link>
-      )}
-    </>
-  );
-};
-
-function mapStateToProps(state) {
-  return {
-    config: get(state, ["qt", "config"], {})
-  };
-}
-
-export const Author = connect(mapStateToProps)(AuthorBase);
-
-AuthorBase.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object.isRequired,
-  /** Hide Author Avatar Image */
-  hideAuthorImage: PropTypes.bool,
-  // fix Author bottom of the storyCard
-  isBottom: PropTypes.bool,
-  // fix prefix before the author name
-  prefix: PropTypes.string,
-  config: PropTypes.object
-};
-
-AuthorBase.defaultProps = {
-  hideAuthorImage: false,
-  isBottom: false,
-  prefix: ""
-};