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

package/__mocks__/fileMock.js

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

package/__mocks__/styleMock.js

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

package/assets/stylesheets/mixins.scss

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

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

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

package/bin-dev-scripts/prepublish.sh

@@ -0,0 +1,11 @@
+#!/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

@@ -0,0 +1,13 @@
+#!/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

@@ -0,0 +1,14 @@
+{
+  "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/package.json

@@ -1 +1,138 @@
-{"name":"@quintype/arrow","version":"3.54.1-debug-full-bleed.4","description":"Quintype's UI Component Library for Publisher Apps","main":"cjs/index.js","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/quintype/quintype-node-arrow.git"},"author":"dev-core@quintype.com","license":"ISC","bugs":{"url":"https://github.com/quintype/quintype-node-arrow/issues"},"peerDependencies":{"date-fns":"^2.28.0","date-fns-tz":"^1.3.1","lodash.get":"^4.4.2","react":">= 16.8.0","react-dom":">= 16.8.0","react-redux":">= 7.0.0"},"dependencies":{"@quintype/components":"^3.8.8","axios":"^0.19.2","date-fns":"^2.28.0","date-fns-tz":"^1.3.1","intersection-observer":"^0.11.0","lodash.camelcase":"^4.3.0","lodash.get":"^4.4.2","lodash.kebabcase":"^4.1.1","react-image-lightbox":"^5.1.4","react-timeago":"^4.4.0"},"homepage":"https://github.com/quintype/quintype-node-arrow#readme"}
+{
+  "name": "@quintype/arrow",
+  "version": "3.54.1-version-upgrade.1",
+  "description": "Quintype's UI Component Library for Publisher Apps",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "dependencies": {
+    "@quintype/components": "^3.8.8-only-react-v19.4",
+    "axios": "^0.19.2",
+    "date-fns": "^2.28.0",
+    "date-fns-tz": "^1.3.1",
+    "intersection-observer": "^0.11.0",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.get": "^4.4.2",
+    "lodash.kebabcase": "^4.1.1",
+    "react-image-lightbox": "^5.1.4",
+    "react-timeago": "^4.4.0"
+  },
+  "engines": {
+    "node": "^20.0.0",
+    "npm": "^10.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@quintype/build": "^4.0.2-beta.0",
+    "@rollup/plugin-babel": "^5.2.3",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@storybook/addon-actions": "^6.4.0-rc.7",
+    "@storybook/addon-console": "^1.2.3",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-links": "^6.4.0-rc.7",
+    "@storybook/addon-viewport": "^6.4.0-rc.7",
+    "@storybook/addons": "^6.4.0-rc.7",
+    "@storybook/builder-webpack5": "^6.4.0-rc.7",
+    "@storybook/manager-webpack5": "^6.4.0-rc.7",
+    "@storybook/react": "^6.4.0-rc.7",
+    "axios-mock-adapter": "^1.17.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^25.3.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "chromatic": "^5.5.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-cypress": "^2.9.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jest": "^22.21.0",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-standard": "^4.0.0",
+    "gh-pages": "^2.2.0",
+    "husky": "^2.4.0",
+    "jest": "^25.3.0",
+    "lint-staged": "^9.5.0",
+    "onchange": "^4.1.0",
+    "postcss": "^8.4.4",
+    "postcss-custom-media": "^8.0.0",
+    "precss": "^4.0.0",
+    "prettier": "1.18.2",
+    "prop-types": "^15.7.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-redux": "^7.1.3",
+    "rollup": "^2.70.1",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.5.2",
+    "sass": "^1.43.4",
+    "storybook-addon-rtl": "^0.4.2",
+    "storybook-readme": "^5.0.9",
+    "stylelint": "^10.1.0",
+    "stylelint-config-css-modules": "^1.5.0",
+    "stylelint-config-recommended-scss": "^3.3.0",
+    "stylelint-scss": "^3.14.2",
+    "webpack": "^5.64.2"
+  },
+  "peerDependencies": {
+    "date-fns": "^2.28.0",
+    "date-fns-tz": "^1.3.1",
+    "lodash.get": "^4.4.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-redux": "^9.1.2"
+  },
+  "scripts": {
+    "analyze-stats": "ANALYZE_STATS=true npm run build:prod",
+    "test": "jest --config jest.config.json --watchAll",
+    "test:cover": "jest --config jest.config.json --coverage --colors; open coverage/lcov-report/index.html",
+    "storybook": "BABEL_TARGET=browser start-storybook",
+    "build-storybook": "BABEL_TARGET=browser build-storybook -c .storybook -o .out",
+    "docs": "npm run build-storybook && gh-pages -d .out",
+    "build:prod": "rm -rf dist/ && NODE_ENV=production node rollup.js",
+    "build": "rm -rf dist/ && node rollup.js",
+    "prepublishOnly": "./bin-dev-scripts/prepublish.sh",
+    "chromatic": "chromatic --project-token dbwa7ztn3lf --exit-zero-on-changes",
+    "lint:ci": "npm run lint:js:ci && npm run lint:css:ci",
+    "lint:css": "npx stylelint './src/**/*.{scss,css}'",
+    "lint:css:ci": "npx stylelint $(git diff --pretty='' --diff-filter=d --name-only -- '*.m.css') ./assets/stylesheets/app.scss",
+    "lint:js": "npx eslint './src/**/*.{js,jsx}'",
+    "lint:js:ci": "npx eslint $(git diff --pretty='' --diff-filter=d --name-only -- '*.js' '*.jsx') ./src/index.js",
+    "sync-files-to": "npm run build && npx onchange --verbose --await-write-finish=2000 './src/**/*' -- ./bin-dev-scripts/sync-to.sh "
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quintype/quintype-node-arrow.git"
+  },
+  "author": "dev-core@quintype.com",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/quintype/quintype-node-arrow/issues"
+  },
+  "homepage": "https://github.com/quintype/quintype-node-arrow#readme",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "npx eslint --fix",
+      "git add"
+    ],
+    "*.{css,scss}": [
+      "npx prettier --write",
+      "npx stylelint --fix",
+      "git add"
+    ]
+  }
+}

package/publish

@@ -0,0 +1,24 @@
+#!/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

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

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

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

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

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