@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.2-debug-full-bleed.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,35 +0,0 @@
-$mobile: 767px;
-$tablet: 768px;
-$tablet-lg: 1024px;
-$desktop: 1025px;
-$desktop-lg: 1200px;
-
-@mixin mobile {
-  @media (max-width: #{$mobile}) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (min-width: #{$tablet}) {
-    @content;
-  }
-}
-
-@mixin tablet-lg {
-  @media (min-width: #{$tablet-lg}) {
-    @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,24 +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
-  npm run build:prod
-  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
-  npm run build:prod
-  git push --follow-tags origin "$BRANCH"
-  npm publish ./dist --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/AudioPlayer/PlayerBase.js

@@ -1,150 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import {
-  PlayIcon,
-  PauseIcon,
-  ForwardIcon,
-  BackwardIcon,
-  ClosePlayerIcon,
-  ReplayPlayerIcon,
-  SpeedSelector
-} from "./PlayerControls";
-import { ProgressBar } from "./ProgressBar";
-import PropTypes from "prop-types";
-import "./audio.m.css";
-
-export function AudioPlayerBase({
-  audioUrl = "",
-  setListenMode,
-  listenButtonTitle = "",
-  playBackSpeedTitle = "",
-  enableDarkMode
-}) {
-  const audioRef = useRef(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [playbackRate, setPlaybackRate] = useState("1.0");
-  const [progress, setProgress] = useState(0);
-  const [rePlay, setReplay] = useState(false);
-
-  const handlePlayPause = () => {
-    if (isPlaying) audioRef.current.pause();
-    else {
-      audioRef.current.play();
-      setReplay(false);
-    }
-    setIsPlaying(!isPlaying);
-  };
-
-  const handleBackward = () => {
-    const audio = audioRef.current;
-    audio.currentTime = Math.max(0, audio.currentTime - 10);
-    setReplay(false);
-  };
-
-  const handleForward = () => {
-    const audio = audioRef.current;
-    audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
-    if (audio.currentTime >= audio.duration) {
-      setReplay(true);
-      setIsPlaying(false);
-    }
-  };
-
-  const handleSpeedChange = (speed) => {
-    setPlaybackRate(speed);
-    audioRef.current.playbackRate = speed;
-  };
-
-  const handleTimeUpdate = () => {
-    const audio = audioRef.current;
-    setProgress((audio.currentTime / audio.duration) * 100);
-  };
-
-  const handleSeek = (e) => {
-    const audio = audioRef.current;
-    if (audio) {
-      const newTime = (e.target.value / 100) * audio.duration;
-      audio.currentTime = newTime;
-      if (audio.currentTime === audio.duration) setReplay(true);
-      else if (audio.currentTime < audio.duration) setReplay(false);
-    }
-    setProgress(e.target.value);
-  };
-
-  const handleReplay = () => {
-    const audio = audioRef.current;
-    if (audio) {
-      audio.currentTime = 0;
-      setProgress(0);
-      setIsPlaying(true);
-      audio.play();
-      setReplay(false);
-    }
-  };
-
-  useEffect(() => {
-    if (audioRef && audioRef.current) {
-      setIsPlaying(true);
-      audioRef.current.play();
-    }
-  }, []);
-
-  const playerTrackStyle = enableDarkMode ? "player-track-dark" : "player-track";
-
-  return (
-    <div styleName="player-container" data-test-id="audio-player">
-      <audio
-        ref={audioRef}
-        src={audioUrl}
-        onTimeUpdate={handleTimeUpdate}
-        onEnded={() => {
-          setIsPlaying(false);
-          setReplay(true);
-        }}
-      />
-      <div styleName="player-controls">
-        <PlayerTitle listenButtonTitle={listenButtonTitle} />
-        <div styleName="playback-controls">
-          <div styleName="backward-forward-controls">
-            <BackwardIcon handleBackward={handleBackward} isDarkMode={enableDarkMode} />
-            <ForwardIcon handleForward={handleForward} isDarkMode={enableDarkMode} />
-          </div>
-          <SpeedSelector
-            playbackRate={playbackRate}
-            handleSpeedChange={handleSpeedChange}
-            playBackSpeedTitle={playBackSpeedTitle}
-            isDarkMode={enableDarkMode}
-          />
-        </div>
-      </div>
-      <div styleName={playerTrackStyle}>
-        {isPlaying ? (
-          <PauseIcon handlePlayPause={handlePlayPause} isDarkMode={enableDarkMode} />
-        ) : (
-          <PlayIcon handlePlayPause={handlePlayPause} isDarkMode={enableDarkMode} />
-        )}
-        <ProgressBar progress={progress} handleSeek={handleSeek} isDarkMode={enableDarkMode} />
-        {rePlay ? (
-          <ReplayPlayerIcon isDarkMode={enableDarkMode} callBack={handleReplay} />
-        ) : (
-          <ClosePlayerIcon callBack={setListenMode} isDarkMode={enableDarkMode} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function PlayerTitle({ listenButtonTitle = "" }) {
-  return <div styleName="player-title">{listenButtonTitle || "Listen to this article"}</div>;
-}
-
-AudioPlayerBase.propTypes = {
-  audioUrl: PropTypes.string,
-  setListenMode: PropTypes.func,
-  listenButtonTitle: PropTypes.string,
-  playBackSpeedTitle: PropTypes.string,
-  enableDarkMode: PropTypes.bool
-};
-
-PlayerTitle.propTypes = {
-  listenButtonTitle: PropTypes.string
-};