Yieldbird GPT Components 1.0.0

.circleci/config.yml

@@ -0,0 +1,67 @@
+version: 2.1
+
+commands:
+  restore_cache_yieldbird-gpt-component:
+    description: Restore cache
+    steps:
+      - restore_cache:
+          keys:
+            - yieldbird-gpt-component-v1-dependencies-{{ checksum "package.json" }}
+            - yieldbird-gpt-component-v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: yieldbird-gpt-component-v1-dependencies-{{ checksum "package.json" }}
+
+jobs:
+  tests:
+    docker:
+      - image: circleci/node:10.19.0-browsers
+        environment:
+          CHROME_BIN: "/usr/bin/google-chrome"
+          NODE_ENV: test
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - restore_cache_yieldbird-gpt-component
+
+      - run: yarn test
+  audit:
+    docker:
+      - image: circleci/node:10.19.0-browsers
+        environment:
+          CHROME_BIN: "/usr/bin/google-chrome"
+          NODE_ENV: test
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - restore_cache_yieldbird-gpt-component
+
+      - run: yarn run improved-yarn-audit --min-severity moderate
+
+workflows:
+  version: 2
+  workflow:
+    jobs:
+      - tests
+
+  audit:
+    triggers:
+      - schedule:
+          # every 4th hour from 4 through 16 UTC from Monday to Friday
+          cron: "0 4,8,12,16 * * 1-5"
+          filters:
+            branches:
+              only: develop
+    jobs:
+      - audit

.eslintignore

@@ -0,0 +1,6 @@
+build/
+dist/
+node_modules/
+.snapshots/
+*.min.js
+example/config/config.ts.example

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "standard",
+    "standard-react",
+    "plugin:prettier/recommended",
+    "prettier/standard",
+    "prettier/react",
+    "plugin:@typescript-eslint/eslint-recommended"
+  ],
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "legacyDecorators": true,
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "16"
+    }
+  },
+  "rules": {
+    "space-before-function-paren": 0,
+    "react/prop-types": 0,
+    "react/jsx-handler-names": 0,
+    "react/jsx-fragments": 0,
+    "react/no-unused-prop-types": 0,
+    "import/export": 0
+  }
+}

.github/pull_request_template.md

@@ -0,0 +1,22 @@
+<!-- Link to a JIRA task related to this changes -->
+https://yieldbird.atlassian.net/browse/YIEL-XXXX
+
+## Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. If possible provide reproduction steps to properly run and test given code
+
+## How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.
+
+### Checklist
+
+<!-- Before submitting the PR make sure the following are checked: -->
+* [ ] I have added tests to cover my changes.
+* [ ] I have assigned all my team members to this PR.
+* [ ] This branch is up-to-date with the base branch.
+
+<!-- Ensure that there are no missing changes in the project: -->
+* [ ] I have made changes that require update to the README file.
+* [ ] I have updated CHANGELOG file.
+* [ ] I have sqashed all my commits into one that has a proper name like 'YIEL-XXXX: Do something great'

.gitignore

@@ -0,0 +1,26 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.editorconfig
+
+example/src/config/config.ts

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+This file contains a curated, chronologically ordered list of notable changes for each version of the project.
+The main objective of keeping log of changes is to make it easier for developers to see precisely what changes have been made between each release of the project without going through noisy git logs.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+In addition to above spec use `Action` group to gather all needed actions required when new changes are deployed (for example new environment variable is required, rake task has to be run or new library needs to be installed). Keep in mind that there is single changelog for all services so be specific.
+
+## Unreleased
+
+### Added
+- AdManagerProvider component
+- AdManagerSlot component
+- Component tests
+- Example and docs
+
+### Changed
+
+### Fixed

README.md

@@ -0,0 +1,97 @@
+# yieldbird_gpt_components
+
+> Made with create-react-library
+
+[![NPM](https://img.shields.io/npm/v/yieldbird_gpt_components.svg)](https://www.npmjs.com/package/yieldbird_gpt_components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+- [QuickWrap - Yieldbird GPT Components](#yieldbird_gpt_components)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Development](#development)
+
+## Install
+
+```bash
+npm install --save yieldbird_gpt_components
+```
+
+## Usage
+
+```tsx
+import React, { Component } from 'react'
+
+import { AdManagerProvider, AdManagerSlot } from 'yieldbird_gpt_components'
+
+return (
+  <AdManagerProvider uuid='YOUR_YIELDBIRD_WRAPPER_UUID'>
+    <AdManagerSlot
+      adUnitPath='AD_UNIT_PATH/FOO'
+      size={[[120, 600], [160, 600]]}
+      optDiv='AD_UNIT_DIV_ID'
+    />
+  </AdManagerProvider>
+)
+```
+
+`AdManagerProvider` context component should be placed at the top of your React app. It is responsible for injecting GPT and Yieldbird Wrapper scripts, initializing variables and storing helper data.
+
+`AdManagerSlot` is a simple ad component, with properties similar to GPT slot. It is responsible for rendering ad in specified place. You can use it with following properties:
+| name | type | required | description |
+| :---- |  :----:  |  :----:  | :---- |
+| `adUnitPath` | string | true | Google AdManager ad unit path |
+| `size` | number | true | base slot sizes |
+| `optDiv` | string | true | name of DIV ID of given adUnit |
+| `targeting` | object | false | extra targeting object which can be used to pass aditional key-values pairs to GAM |
+| `sizeMapping` | array | false | array representation of size mapping GPT command calls. Each array element consists of two more arrays, representing viewport size and mapping which correspnds to [GPT setup](https://developers.google.com/publisher-tag/reference#googletag.sizemappingbuilder). |
+
+### Additional targeting example
+```tsx
+<AdManagerSlot
+  adUnitPath='AD_UNIT_PATH/FOO'
+  size={[[120, 600], [160, 600]]}
+  optDiv='AD_UNIT_DIV_ID'
+  targeting={{
+    foo: 'bar',
+    bar: 'baz'
+  }}
+/>
+```
+
+### Size mapping example
+```tsx
+<AdManagerSlot
+  adUnitPath='AD_UNIT_PATH/FOO'
+  size={[[120, 600], [160, 600]]}
+  optDiv='AD_UNIT_DIV_ID'
+  sizeMapping={[
+    [[0, 0], [[120, 600], [160, 600]]],
+    [[600, 0], [[300, 600]]]
+  ]}
+/>
+```
+
+## Development
+
+Local development is broken into two parts (ideally using two tabs).
+
+First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.
+
+```
+npm start # runs rollup with watch flag
+```
+
+The second part will be running the example/ create-react-app that's linked to the local version of your module.
+
+Make sure to configure your config.ts file basing on config.ts.example.
+
+```
+# (in another tab)
+cd example
+npm start # runs create-react-app dev server
+```
+
+Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.
+
+## License
+
+MIT © [YieldbirdDev](https://github.com/YieldbirdDev)

example/README.md

@@ -0,0 +1,5 @@
+This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+It is linked to the yieldbird_gpt_components package in the parent directory for development purposes.
+
+You can run `yarn install` and then `yarn start` to test your package.

example/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "yieldbird_gpt_components-example",
+  "homepage": ".",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
+    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
+    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
+    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
+    "@testing-library/react": "link:../node_modules/@testing-library/react",
+    "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
+    "@types/jest": "link:../node_modules/@types/jest",
+    "@types/node": "link:../node_modules/@types/node",
+    "@types/react": "link:../node_modules/@types/react",
+    "@types/react-dom": "link:../node_modules/@types/react-dom",
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom",
+    "react-scripts": "link:../node_modules/react-scripts",
+    "typescript": "link:../node_modules/typescript",
+    "yieldbird_gpt_components": "link:.."
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

example/public/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>yieldbird_gpt_components</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>