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

package/README.md

@@ -143,6 +143,16 @@ To develop a new component in arrow/change a current one, these are the steps yo
 #### npm start storybook
 This will start our storybook  in a URL (something like http://localhost:53035/) where you can develop the component in isolation. Your changes will reflect in the story book.
 
+#### Sync local changes for development
+
+- During development, you might want to sync the changes done locally in arrow with your Malibu app. Run
+  ```sh
+  npm run sync-files-to <path to your app>
+  ```
+- Now you'll see a message `onchange: watching ./src/**/*`. Make some change inside `./src` dir and save, it should trigger a re-build of arrow. You'll see a message `onchange: command completed with code 0` and the built files will be copied to inside your app's node_modules dir
+- You might have to re-run the Malibu app's server in order for the arrow changes to reflect
+
+
 <hr />
 
 #### Updating to arrow v1

package/__mocks__/fileMock.js

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

package/__mocks__/styleMock.js

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

package/{app.scss → assets/stylesheets/app.scss}

@@ -10,6 +10,9 @@
   --arrow-c-accent1: #2fd072;
   --arrow-c-accent2: #f5a623;
   --arrow-c-accent3: #f81010;
+  --arrow-c-accent4: #d71212;
+  --arrow-c-accent5: #f2f2f2;
+  --arrow-c-accent6: #e8eaed;
   --arrow-c-mono1: rgba(0, 0, 0, 1);
   --arrow-c-mono2: rgba(0, 0, 0, 0.9);
   --arrow-c-mono3: rgba(0, 0, 0, 0.7);
@@ -24,6 +27,8 @@
   --arrow-c-invert-mono5: rgba(255, 255, 255, 0.3);
   --arrow-c-invert-mono6: rgba(255, 255, 255, 0.2);
   --arrow-c-invert-mono7: rgba(255, 255, 255, 0.1);
+  --arrow-c-invert-mono8: rgba(222, 222, 222, 1);
+  --arrow-c-invert-mono9: rgba(222, 222, 222, 0.1);
   --arrow-c-dark: #0d0d0d;
   --arrow-c-light: #ffffff;
   /* Spacing */
@@ -33,6 +38,9 @@
   --arrow-spacing-m: 16px;
   --arrow-spacing-l: 24px;
   --arrow-spacing-xl: 32px;
+  --arrow-spacing-28: 28px;
+  --arrow-spacing-48: 48px;
+  --arrow-spacing-96: 96px;
   /* Font Scale */
   --arrow-fs-tiny: 14px;
   --arrow-fs-xs: 16px;
@@ -179,7 +187,7 @@
 .arrow-component.full-width-with-padding {
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
-  padding: var(--arrow-spacing-m) calc(50vw - 50%) var(--arrow-spacing-m) calc(50vw - 50%);
+  padding: var(--arrow-spacing-m) calc(50vw - 50%) var(--arrow-spacing-xs) calc(50vw - 50%);
 }
 
 .p-alt {
@@ -261,3 +269,148 @@
     }
   }
 }
+
+.content-style {
+  display: contents;
+}
+
+.story-element-youtube-video {
+  display: block;
+  text-align: center;
+  overflow: hidden;
+
+  .thumbnail-wrapper {
+    width: 100%;
+    position: relative;
+    text-align: center;
+    display: flex;
+
+    .youtube-thumbnail {
+      height: 360px;
+      width: 640px;
+    }
+
+    .youtube-iframe-wrapper {
+      position: absolute;
+      z-index: 2;
+    }
+
+    .youtube-playBtn {
+      background: #282828;
+      border-radius: 50%/10%;
+      font-size: 1em;
+      height: 3em;
+      padding: 0;
+      width: 4em;
+      position: absolute;
+      top: 50%;
+      left: 11em;
+      border: none;
+      opacity: 0.8;
+      cursor: pointer;
+      z-index: 1;
+      transform: translateX(-50%) translateY(-50%);
+      @media only screen and (min-width: 768px) {
+        left: 14em;
+      }
+      @media only screen and (min-width: 1025px) {
+        left: 20em;
+      }
+    }
+
+    .youtube-playBtn:hover {
+      background: red;
+    }
+
+    .youtube-playBtn::before {
+      background: inherit;
+      border-radius: 5%/50%;
+      bottom: 9%;
+      content: "";
+      left: -5%;
+      position: absolute;
+      right: -5%;
+      top: 9%;
+    }
+
+    .youtube-playBtn::after {
+      border-style: solid;
+      border-width: 1em 0 1em 1.732em;
+      border-color: transparent transparent transparent hsla(0, 0%, 100%, 0.75);
+      content: " ";
+      font-size: 0.75em;
+      height: 0;
+      margin: -1em 0 0 -0.75em;
+      top: 50%;
+      position: absolute;
+      width: 0;
+    }
+  }
+}
+
+.story-element-jsembed-dailymotion-video {
+  display: block;
+  min-height: 360px;
+  text-align: center;
+  overflow: hidden;
+
+  .thumbnail-wrapper {
+    width: 100%;
+    position: relative;
+    text-align: center;
+    min-height: 360px;
+    display: flex;
+
+    .dailymotion-thumbnail {
+      width: 100%;
+    }
+
+    .dailymotion-iframe-wrapper {
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+    }
+
+    .dailymotion-playBtn {
+      background: #282828;
+      border-radius: 50%;
+      font-size: 1em;
+      height: 4em;
+      padding: 0;
+      width: 4em;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border: none;
+      opacity: 0.8;
+      cursor: pointer;
+      z-index: 1;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    .dailymotion-playBtn:hover {
+      background: rgb(0, 47, 255);
+    }
+
+    .dailymotion-playBtn::before {
+      background: inherit;
+      border-radius: 50%;
+      content: "";
+      position: absolute;
+    }
+
+    .dailymotion-playBtn::after {
+      border-style: solid;
+      border-width: 1em 0 1em 1.732em;
+      border-color: transparent transparent transparent hsla(0, 0%, 100%, 0.75);
+      content: " ";
+      font-size: 0.75em;
+      height: 0;
+      margin: -1em 0 0 -0.75em;
+      top: 50%;
+      position: absolute;
+      width: 0;
+    }
+  }
+}

package/assets/stylesheets/mixins.scss

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

@@ -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,131 @@
-{"name":"@quintype/arrow","version":"3.0.0-spike-skeleton-layout.21","engines":{"node":">=12.0.0","npm":"^6.0.0"},"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":{"react":">= 16.8.0","react-dom":">= 16.8.0","react-redux":">= 7.0.0","@glidejs/glide":"^3.4.1","lodash.get":"^4.4.2"},"dependencies":{"@glidejs/glide":"^3.4.1","@quintype/components":"^2.31.2","axios":"^0.19.2","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.1","react-timeago":"^4.4.0"},"homepage":"https://github.com/quintype/quintype-node-arrow#readme"}
+{
+  "name": "@quintype/arrow",
+  "version": "3.0.0",
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": "^6.0.0"
+  },
+  "description": "Quintype's UI Component Library for Publisher Apps",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "dependencies": {
+    "@quintype/components": "^3.0.0",
+    "axios": "^0.19.2",
+    "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.1",
+    "react-timeago": "^4.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@quintype/build": "^4.0.0",
+    "@rollup/plugin-babel": "^5.2.3",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@storybook/addon-actions": "^5.3.12",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-knobs": "^5.3.12",
+    "@storybook/addon-links": "^5.3.12",
+    "@storybook/addon-viewport": "^5.3.12",
+    "@storybook/addons": "^5.3.12",
+    "@storybook/react": "^5.3.12",
+    "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": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "rollup": "^2.60.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "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.2.2",
+    "storybook-readme": "^5.0.8",
+    "stylelint": "^10.1.0",
+    "stylelint-config-css-modules": "^1.5.0",
+    "stylelint-config-recommended-scss": "^3.3.0",
+    "stylelint-scss": "^3.14.2"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0",
+    "react-redux": ">= 7.0.0",
+    "lodash.get": "^4.4.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",
+    "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 './app/**/*.{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 './app/**/*.{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 --wait --await-write-finish './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