@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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"
+};

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

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

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

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

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { Author } from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+
+withStore(
+  "Atoms/Author",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+)
+  .add("With Author Image", () => <Author story={story} />)
+  .add("With Prefix", () => <Author story={story} prefix="By" />)
+  .add("Without Author Image", () => <Author story={story} hideAuthorImage />);

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

@@ -0,0 +1,47 @@
+# Author Card
+
+Displays the author details as a card for the story page
+
+### Use as a component
+
+
+####  default template
+
+```jsx
+ <AuthorCard story={story}/>
+```
+
+#### Author card with right align template
+
+```jsx
+<AuthorCard story={story} template="rightAligned" />
+```
+
+#### Author card with center align template
+
+```jsx
+<AuthorCard story={story} template="centerAligned" />
+```
+
+#### Author card with default align template
+
+```jsx
+<AuthorCard story={story}  template="default" />
+```
+
+#### Author card with left align template
+
+```jsx
+<AuthorCard story={story}  template="leftAligned" />
+```
+#### Author card with options
+
+```jsx
+<AuthorCard story={story}  template="default" opts={hideImage: true, hideBio: true}/>
+```
+
+
+<!-- PROPS -->
+
+
+

package/src/components/Atoms/AuthorCard/author-card.m.css

@@ -0,0 +1,174 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.author-card-wrapper {
+  display: flex;
+}
+
+.author-card-wrapper.centerAligned {
+  display: block;
+  text-align: center;
+}
+
+.author-image-wrapper {
+  display: flex;
+  margin-right: var(--arrow-spacing-m);
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.default .author-image-wrapper {
+  margin: 0 12px 0 0;
+}
+
+.centerAligned .author-image-wrapper {
+  justify-content: center;
+  margin-right: 0;
+}
+
+.author-image {
+  margin-left: -100px;
+  overflow: hidden;
+}
+
+.author-image figure {
+  margin: 0;
+}
+
+.author-image img {
+  border-radius: 50%;
+  height: 72px;
+  width: 72px;
+  @media (min-width: mobile) {
+    height: 124px;
+    width: 124px;
+  }
+}
+
+.multi-author-image img {
+  border: solid 2px var(--arrow-c-light);
+}
+
+.default .author-image img {
+  height: 32px;
+  width: 32px;
+}
+
+.default .multi-author-image {
+  margin-left: -24px;
+  border-width: 1px;
+}
+
+.author-image.first-author-image {
+  margin-left: 0;
+}
+
+.author-details-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0;
+  margin-left: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-xs) var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0;
+    margin-left: var(--arrow-spacing-l);
+  }
+}
+
+.default .author-details-wrapper {
+  margin-left: var(--arrow-spacing-s);
+}
+
+.leftAligned .author-details-wrapper {
+  margin-left: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-left: var(--arrow-spacing-l);
+  }
+}
+
+.centerAligned .author-details-wrapper {
+  align-items: center;
+  margin-left: 0;
+}
+
+.author-name-share {
+  display: flex;
+  align-items: center;
+  font-size: var(--arrow-fs-xs);
+  line-height: var(--arrow-lh-1);
+  justify-content: center;
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+html[dir="rtl"] {
+  .author-image-wrapper {
+    margin-left: var(--arrow-spacing-m);
+    margin-right: 0;
+    @media (min-width: mobile) {
+      margin-left: var(--arrow-spacing-l);
+    }
+  }
+
+  .leftAligned .author-details-wrapper {
+    margin-right: var(--arrow-spacing-m);
+    margin-left: 0;
+    @media (min-width: mobile) {
+      margin-right: var(--arrow-spacing-l);
+    }
+  }
+
+  .multi-author-image {
+    position: relative;
+    right: -100px;
+  }
+
+  .default .multi-author-image {
+    margin-left: -16px;
+    right: -12px;
+    @media (min-width: mobile) {
+      margin-left: -24px;
+      right: -12px;
+    }
+  }
+
+  .author-image.first-author-image {
+    position: static;
+  }
+
+  .centerAligned .author-image-wrapper {
+    margin-left: 0;
+  }
+}
+
+.multiple-author-style {
+  font-size: var(--arrow-fs-xs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+.dot-wrapper {
+  margin: 0 var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xs);
+}
+
+.author-bio {
+  font-style: italic;
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-m);
+  font-size: var(--arrow-fs-tiny);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-xs);
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}