feat(lib): initial commit

.all-contributorsrc

@@ -0,0 +1,12 @@
+{
+  "projectName": "react-goodies",
+  "projectOwner": "donysukardi",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": true,
+  "contributors": []
+}

.gitignore

@@ -0,0 +1,26 @@
+node_modules
+coverage
+build
+dist
+.opt-in
+.opt-out
+.next
+.eslintcache
+storybook-static
+preact/
+
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# these cause more harm than good
+# when working with contributors
+package-lock.json
+yarn.lock

.travis.yml

@@ -0,0 +1,15 @@
+sudo: false
+language: node_js
+node_js:
+  - '9'
+cache:
+  yarn: true
+  directories:
+    - ~/.npm
+    - node_modules
+notifications:
+  email: false
+script: yarn validate
+after_success: kcd-scripts travis-after-success
+branches:
+  only: master

README.md

@@ -0,0 +1,56 @@
+# react-goodies
+
+[![travis build](https://img.shields.io/travis/donysukardi/react-goodies.svg?style=flat-square)](https://travis-ci.org/donysukardi/react-goodies)
+[![version](https://img.shields.io/npm/v/react-goodies.svg?style=flat-square)](http://npm.im/react-goodies)
+[![downloads](https://img.shields.io/npm/dm/react-goodies.svg?style=flat-square)](http://npm-stat.com/charts.html?package=react-goodies&from=2015-08-01)
+[![MIT License](https://img.shields.io/npm/l/react-goodies.svg?style=flat-square)](http://opensource.org/licenses/MIT)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
+[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors)
+
+<DESCRIPTION HERE>
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributors](#contributors)
+- [License](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Installation
+
+```bash
+npm install --save react-goodies
+```
+
+## Usage
+
+```jsx
+import React, {Component} from 'react'
+
+import MyComponent from 'react-goodies'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## Contributors
+
+Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
+
+## License
+
+MIT © [donysukardi](https://github.com/donysukardi)

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:9001",
+  "video": false
+}

cypress/fixtures/example.json

@@ -0,0 +1 @@
+{}

cypress/integration/button.js

@@ -0,0 +1,9 @@
+describe('Button', () => {
+  before(() => {
+    cy.visitStory('Button', 'with text')
+  })
+
+  it('Button contains Hello Button', () => {
+    cy.getInStoryByTestId('buttonWithText').should('contain', 'Hello Button')
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,17 @@
+Cypress.Commands.add('getInStory', getInStory)
+
+Cypress.Commands.add('getInStoryByTestId', id =>
+  getInStory(`[data-testid="${id}"]`),
+)
+
+// because storybook loads our story in an iframe,
+// we have to get that iframe and select items inside there.
+// Learned this from https://medium.com/@mtiller/testing-react-components-using-storybook-and-cypress-1689a27f55aa
+function getInStory(selector) {
+  return cy.get('#root').find(selector)
+}
+
+// see the baseUrl config in cypress.json
+Cypress.Commands.add('visitStory', (kind, name) => {
+  return cy.visit(`/iframe?selectedKind=${kind}&selectedStory=${name}`)
+})

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

other/misc-tests/__tests__/example.spec.js

@@ -0,0 +1 @@
+it('tests without error', () => {})

other/misc-tests/jest.config.js

@@ -0,0 +1,6 @@
+const jestConfig = require('kcd-scripts/config').jest
+
+module.exports = Object.assign(jestConfig, {
+  roots: ['.'],
+  testEnvironment: 'jsdom',
+})

package.json

@@ -0,0 +1,74 @@
+{
+  "name": "react-goodies",
+  "version": "0.0.0-semantically-released",
+  "description": "",
+  "author": "donysukardi",
+  "license": "MIT",
+  "repository": "donysukardi/react-goodies",
+  "main": "dist/react-goodies.cjs.js",
+  "module": "dist/react-goodies.esm.js",
+  "jsnext:main": "dist/react-goodies.esm.js",
+  "scripts": {
+    "add-contributor": "kcd-scripts contributors add",
+    "lint": "kcd-scripts lint",
+    "build": "kcd-scripts build --bundle --no-clean",
+    "test": "kcd-scripts test",
+    "test:cover": "kcd-scripts test --coverage",
+    "test:build": "kcd-scripts test --config other/misc-tests/jest.config.js --no-watch",
+    "start": "yarn run build --watch",
+    "precommit": "kcd-scripts precommit",
+    "format": "kcd-scripts format",
+    "build-and-test": "npm run build -s && npm run test:build -s",
+    "validate": "kcd-scripts validate lint,build-and-test,test:cover",
+    "storybook": "start-storybook -p 9001 -c stories",
+    "storybook:build": "build-storybook -c stories",
+    "storybook:serve": "http-server ./storybook-static -p 9001 -s",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "pretest:cypress": "npm run storybook:build --silent",
+    "test:cypress": "start-server-and-test storybook:serve http://localhost:9001 cypress:run",
+    "test:cypress:dev": "npm-run-all --parallel --race storybook cypress:open"
+  },
+  "dependencies": {
+    "json2mq": "^0.2.0",
+    "react-display-name": "^0.2.4"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.5.4",
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^3.4.7",
+    "@storybook/addon-links": "^3.4.7",
+    "@storybook/addons": "^3.4.7",
+    "@storybook/react": "^3.4.7",
+    "cypress": "^3.0.1",
+    "eslint-config-dsds": "^1.1.3",
+    "http-server": "^0.11.1",
+    "kcd-scripts": "^0.39.0",
+    "npm-run-all": "^4.1.2",
+    "prop-types": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-testing-library": "^3.1.7",
+    "start-server-and-test": "^1.4.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "eslint-config-dsds",
+      "eslint-config-dsds/jest"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules",
+    "coverage",
+    "cypress",
+    "dist",
+    "stories",
+    "storybook-static"
+  ]
+}

prettier.config.js

@@ -0,0 +1,2 @@
+// this is really only here for editor integrations
+module.exports = require('kcd-scripts/prettier')

src/ClickOutside/ClickOutside.js

@@ -0,0 +1,69 @@
+import {Component} from 'react'
+import PropTypes from 'prop-types'
+
+class ClickOutside extends Component {
+  isTouch = false
+
+  setRef = ref => {
+    this.container = ref
+  }
+
+  handle = e => {
+    if (e.type === 'touchend') {
+      this.isTouch = true
+    }
+    if (e.type === 'click' && this.isTouch) {
+      return
+    }
+    const {onClickOutside} = this.props
+    const el = this.container
+    if (!el.contains(e.target)) {
+      onClickOutside(e)
+    }
+  }
+
+  addListener() {
+    document.addEventListener('touchend', this.handle, true)
+    document.addEventListener('click', this.handle, true)
+  }
+
+  removeListener() {
+    document.removeEventListener('touchend', this.handle, true)
+    document.removeEventListener('click', this.handle, true)
+  }
+
+  componentDidMount() {
+    if (!this.props.disabled) {
+      this.addListener()
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {disabled} = this.props
+    /* istanbul ignore else  */
+    if (prevProps.disabled !== disabled) {
+      if (disabled) {
+        this.removeListener()
+      } else {
+        this.addListener()
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeListener()
+  }
+
+  render() {
+    const {setRef, props} = this
+    const {children} = props
+    return children({setRef})
+  }
+}
+
+ClickOutside.propTypes = {
+  disabled: PropTypes.bool,
+  onClickOutside: PropTypes.func.isRequired,
+}
+
+export default ClickOutside