finishing touches (#1)

andrewmcodes · julianrubisch · web-flow · commit 370edddd2cbe · 2020-01-07T01:57:41.000-05:00
- Documentation
- Finish example app
- Small tweaks

Co-authored-by: Julian Rubisch &lt;julian@julianrubisch.at&gt;
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+12.13.0
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at andrewmcodes@protonmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,12 @@
+# Contributing
+
+[code-of-conduct]: CODE_OF_CONDUCT.md
+
+Hey, there! 👋 Any and all contributions are welcome.
+
+Please make sure to read the [code of conduct][code-of-conduct] before submitting issues or pull requests.
+
+To lend a helping hand:
+* [Fork the repository](https://help.github.com/articles/fork-a-repo/)
+* Make your desired changes
+* [Create a pull request](https://help.github.com/articles/creating-a-pull-request/)
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Andrew Mason
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,40 +1,129 @@
+[CoC]: /CODE_OF_CONDUCT.md
+[contributing]: /CONTRIBUTING.md
+[license]: /LICENSE
+
 # @codefund/react-api-hook
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-> CodeFund.io API hook for React.js
+[![NPM](https://img.shields.io/npm/v/@codefund/react-api-hook.svg)](https://www.npmjs.com/package/@codefund/react-api-hook)
 
-[![NPM](https://img.shields.io/npm/v/@codefund/react-api-hook.svg)](https://www.npmjs.com/package/@codefund/react-api-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+> CodeFund.io API hook for React.js
 
 ## Install
 
 ```bash
+# NPM
 npm install --save @codefund/react-api-hook
+
+# Yarn
+yarn add @codefund/react-api-hook
 ```
 
 ## Usage
 
-TODO
-<!--
-```tsx
-import * as React from 'react'
+All you need to do is pass your CodeFund Property ID to the hook and save the ad markup to a variable:
+
+```js
+const { ad } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)
+```
+
+The hook will return three values if you'd like to use them, but `ad` is the only necessary value.
+
+Note that we only return an ad when your `NODE_ENV` is production.
+
+### `ad: string`
+
+The markup for the ad that you can then render on a page.
+
+<details>
+  <summary>Example Return Value</summary>
 
-import { useMyHook } from '@codefund/react-api-hook'
+  ```html
+  <link href="https://app.codefund.io/packs/css/code_fund_ad-a247634a.css" rel="stylesheet" media="all"><div id="cf" data-template="default" data-theme="light"> <span> <span class="cf-wrapper"> <a href="https://app.codefund.io/impressions/654962e7-a2b0-40a5-9419-96d372c879cc/click?campaign_id=635&amp;creative_id=580&amp;property_id=669&amp;template=default&amp;theme=light" class="cf-sponsored-by" target="_blank" rel="sponsored noopener"> <span class="cf-img-wrapper"> <img src="https://cdn2.codefund.app/1dipzax8qeezdz49lasl7abpbkao" alt="Sell Out Ethically" border="0" height="100" width="130" class="cf-img"> </span> <span class="cf-text"> <strong>Earn money without selling out.</strong> <span>Consider placing ethical ads on your site.</span> </span> </a> <a href="https://app.codefund.io/invite/4nr1oPkB4W8" class="cf-powered-by" target="_blank" rel="sponsored noopener"> <em>ethical</em> ad by CodeFund <img src="https://app.codefund.io/display/654962e7-a2b0-40a5-9419-96d372c879cc.gif" data-src="https://app.codefund.io/display/654962e7-a2b0-40a5-9419-96d372c879cc.gif" data-behavior="trackImpression" class="cf-impression" alt=""> </a> </span> </span> </div>
+  ```
 
-const Example = () => {
-  const example = useMyHook()
-  return (
-    <div>
-      {example}
-    </div>
-  )
+</details>
+
+### `loading: boolean`
+
+A boolean value indicating whether the ad is in a loading state or not. You can use this to create a nice loading or skeleton effect, which you can see in the example app.
+
+### `error: string`
+
+A string value that holds the response message from the fetch request in the event the request returns a non-200 response code.
+
+## Basic Example
+
+```js
+import React from "react"
+import { useCodeFundAd } from "@codefund/react-api-hook"
+
+const App = () => {
+  const { ad } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)
+  return <Ad ad={ad} />
 }
-``` -->
+
+const Ad = ({ ad }) => (
+  <div dangerouslySetInnerHTML={{ __html: ad }} />
+)
+
+export default App
+```
+
+## Advanced Example
+
+```js
+import React from "react"
+import Skeleton from "react-skeleton-loader"
+import { useCodeFundAd } from "@codefund/react-api-hook"
+
+class App extends React.Component {
+  render () {
+    return <CodeFund />
+  }
+}
+
+function CodeFund () {
+  const { ad, loading, error } = useCodeFundAd(process.env.REACT_APP_CODEFUND_PROPERTY_ID)
+  if (loading) {
+    return <AdLoading />
+  }
+
+  if (!error) {
+    return <AdMarkup ad={ad} />
+  }
+}
+
+function AdMarkup (props) {
+  return <div dangerouslySetInnerHTML={{ __html: props.ad }} />
+}
+
+function AdLoading () {
+  return <Skeleton count={5} width={"330px"} borderRadius={"0px"} />
+}
+
+export default App
+```
+
+## Contributing
+
+We encourage you to contribute! Please check out the [Contributing Guide][contributing] for guidelines about how to proceed.
+
+### Code of Conduct
+
+Everyone interacting with the project’s codebase and issue tracker are expected to follow the [Code of Conduct][CoC].
+
+### Coding Standards
+
+This project uses Prettier for JavaScript code to minimize bike shedding related to source formatting.
+
+Please run `yarn format` prior to submitting pull requests.
 
 ## License
 
-MIT © [andrewmcodes](https://github.com/andrewmcodes)
+Released under the [MIT License][license].
 
 ## Contributors ✨
 
@@ -54,4 +143,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/example/.env.example b/example/.env.example
@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_CODEFUND_PROPERTY_ID=0
diff --git a/example/.nvmrc b/example/.nvmrc
@@ -0,0 +1 @@
+12.13.0
diff --git a/example/.prettierrc b/example/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/example/package.json b/example/package.json
@@ -1,25 +1,31 @@
 {
   "name": "@codefund/react-api-hook-example",
   "homepage": "https://andrewmcodes.github.io/codefund-react-api-hook",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@codefund/react-api-hook": "link:..",
     "react": "link:../node_modules/react",
     "react-dom": "^16.9.0",
+    "react-lorem-ipsum": "^1.4.4",
     "react-scripts": "^3.0.1",
-    "@codefund/react-api-hook": "link:.."
+    "react-skeleton-loader": "^1.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "prettier --write \"src/**/*\""
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "prettier": "^1.19.1"
+  }
 }
diff --git a/example/src/App.js b/example/src/App.js
@@ -1,12 +1,50 @@
-import React from 'react'
-import { useCodeFundAd } from '@codefund/react-api-hook'
+import React from "react"
+import Skeleton from "react-skeleton-loader"
+import { LoremIpsum } from "react-lorem-ipsum"
+import { useCodeFundAd } from "@codefund/react-api-hook"
 
-// TODO
-const App = () => {
-  const { ad, loading, error } = useCodeFundAd('0')
-  return <Ad adMarkup={ad} loadingState={loading} errorMessage={error} />
+class App extends React.Component {
+  render() {
+    return (
+      <>
+        <h1>@codefund/react-api-hook Demo</h1>
+        <Text paragraphs={2} />
+        <div className="center">
+          <CodeFund />
+        </div>
+        <Text paragraphs={6} />
+      </>
+    )
+  }
 }
 
-const Ad = ({ adMarkup, loadingState, errorMessage }) => <div dangerouslySetInnerHTML={adMarkup} />
+function CodeFund() {
+  const { ad, loading, error } = useCodeFundAd(
+    process.env.REACT_APP_CODEFUND_PROPERTY_ID
+  )
+  if (loading) {
+    return <AdLoading />
+  }
+
+  if (!error) {
+    return <AdMarkup ad={ad} />
+  }
+}
+
+function AdMarkup(props) {
+  return <div dangerouslySetInnerHTML={{ __html: props.ad }} />
+}
+
+function AdLoading() {
+  return <Skeleton count={5} width={"330px"} borderRadius={"0px"} />
+}
+
+function Text(props) {
+  return (
+    <div className="text-wrapper">
+      <LoremIpsum p={props.paragraphs} avgSentencesPerParagraph={16} />
+    </div>
+  )
+}
 
 export default App
diff --git a/example/src/index.css b/example/src/index.css
@@ -1,5 +1,21 @@
-/* body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-} */
+html {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+body {
+  padding: 2em;
+}
+
+p {
+  font-size: 1.125rem;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/example/src/index.js b/example/src/index.js
diff --git a/example/yarn.lock b/example/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+SKIP_PREFLIGHT_CHECK=true`
	`2`	`+REACT_APP_CODEFUND_PROPERTY_ID=0`