Move Reaction's Utils/Responsive over into @artsy/responsive

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions"
+          ]
+        }
+      }
+    ],
+    "@babel/typescript",
+    "@babel/react"
+  ]
+}

.circleci/config.yml

@@ -0,0 +1,70 @@
+defaults: &defaults
+  working_directory: ~/artsy/responsive
+  docker:
+    - image: circleci/node:8
+
+save_cache: &save_cache
+  save_cache:
+    key: yarn-deps-{{ checksum "yarn.lock" }}
+    paths:
+      - ./node_modules
+
+restore_cache: &restore_cache
+  restore_cache:
+    keys:
+      - yarn-deps-{{ checksum "yarn.lock" }}
+      - yarn-deps-
+
+verify_dependencies: &verify_dependencies
+  run: yarn --check-files
+
+filter_master: &filter_master
+  filters:
+    branches:
+      only:
+        - master
+
+version: 2
+jobs:
+  update-cache:
+    <<: *defaults
+    steps:
+      - checkout
+      - <<: *restore_cache
+      - <<: *verify_dependencies
+      - <<: *save_cache
+  type-check:
+    <<: *defaults
+    steps:
+      - checkout
+      - <<: *restore_cache
+      - <<: *verify_dependencies
+      - run: yarn type-check
+  lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - <<: *restore_cache
+      - <<: *verify_dependencies
+      - run: yarn lint
+  deploy:
+    <<: *defaults
+    steps:
+      - checkout
+      - <<: *restore_cache
+      - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
+      - run: yarn semantic-release
+workflows:
+  version: 2
+  build_and_verify:
+    jobs:
+      - update-cache
+      - type-check
+      - lint
+      - deploy:
+          context: npm-deploy
+          <<: *filter_master
+          requires:
+            - update-cache
+            - lint
+            - type-check

.gitignore

@@ -0,0 +1,19 @@
+.DS_Store
+.awcache
+.cache-loader/
+.env
+.storybook/.DS_Store
+.storybook/manager.js
+.vscode/cSpell.json
+assets/reaction-force.js
+public/assets/fonts
+dist
+dist
+node_modules
+npm-debug.log
+out*
+package-lock.json
+reaction-force.js
+reaction-force.js.map
+yarn-error.log
+.docz

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "files.exclude": {
+    ".git/": true,
+    "node_modules/": false,
+    "dist/": false
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/dist": true
+  },
+  "editor.rulers": [80],
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "[json]": {
+    "editor.formatOnSave": false
+  },
+  "tslint.autoFixOnSave": true,
+  "typescript.tsdk": "./node_modules/typescript/lib"
+}

README.md

@@ -1,2 +1,165 @@
-# responsive
-A renderProps based <Responsive /> media query component
+# @artsy/responsive
+
+[![CircleCI](https://circleci.com/gh/artsy/responsive.svg?style=shield)](https://circleci.com/gh/artsy/responsive)
+[![npm version](https://badge.fury.io/js/%40artsy%2Fresponsive.svg)](https://www.npmjs.com/package/@artsy/responsive)
+
+### Installation
+
+```sh
+  yarn add @artsy/responsive
+```
+
+### Use# React Media component
+
+TODO: Describe problem and ideally how to avoid using the Media component altogether
+
+- declarative rather than imperative
+
+## API
+
+### Setup
+
+First things first. You’ll need to define the breakpoints of your design to
+produce the set of media components you can use throughout your application.
+
+For example, consider an application that has the following breakpoints:
+
+- A viewport width between 1 and 768 points, named `sm`.
+- A viewport width between 768 and 1024 points, named `md`.
+- A viewport width between 1024 and 1192 points, named `lg`.
+- A viewport width from 1192 points and above, named `xl`.
+
+You would then produce the set of media components like so:
+
+```tsx
+const MyAppMediaComponents = createMedia({
+  breakpoints: {
+    sm: 0,
+    md: 768
+    lg: 1024,
+    xl: 1192,
+  },
+  interactions: {}, // TODO: Ignore for now
+})
+```
+
+As you can see, breakpoints are defined by their _start_ offset, where the first
+one is expected to start at 0.
+
+It’s advisable to do this setup in its own module so that it can be easily
+imported throughout your application:
+
+```tsx
+export const MediaContextProvider = MyAppMediaComponents.MediaContextProvider
+export const Media = MyAppMediaComponents.Media
+```
+
+### Usage
+
+The `Media` component created for your application has a few mutually exclusive
+props that make up the API you’ll use to declare your responsive layouts. These
+props all operate based on the named breakpoints that were provided when you
+created the media components.
+
+The examples given for each prop use breakpoint definitions as defined in the
+above ‘Setup’ section.
+
+#### at
+
+Use this to declare that children should only be visible at a specific
+breakpoint, meaning that the viewport width is greater than or equal to the
+start offset of the breakpoint, but less than the next breakpoint, if one
+exists.
+
+For example, children of this `Media` declaration will only be visible if the
+viewport width is between 0 and 768 points:
+
+```tsx
+<Media at="sm">...</Media>
+```
+
+#### lessThan
+
+Use this to declare that children should only be visible while the viewport
+width is less than the start offset of the specified breakpoint.
+
+For example, children of this `Media` declaration will only be visible if the
+viewport width is between 0 and 1024 points:
+
+```tsx
+<Media lessThan="lg">...</Media>
+```
+
+#### greaterThan
+
+Use this to declare that children should only be visible while the viewport
+width is greater than the start offset of the _next_ breakpoint.
+
+For example, children of this `Media` declaration will only be visible if the
+viewport width is greater than 1024 points:
+
+```tsx
+<Media greaterThan="md">...</Media>
+```
+
+#### greaterThanOrEqual
+
+Use this to declare that children should only be visible while the viewport
+width is equal to the start offset of the specified breakpoint _or_ greater.
+
+For example, children of this `Media` declaration will only be visible if the
+viewport width is 768 points or up:
+
+```tsx
+<Media greaterThanOrEqual="md">...</Media>
+```
+
+#### between
+
+Use this to declare that children should only be visible while the viewport
+width is equal to the start offset of the first specified breakpoint but less
+than the start offset of the second specified breakpoint.
+
+For example, children of this `Media` declaration will only be visible if the
+viewport width is between 768 and 1192 points:
+
+```tsx
+<Media between={["md", "xl"]}>...</Media>
+```
+
+## Server-side rendering
+
+## Client-side rendering
+
+## Pros vs Cons
+
+### Commits and Deployments
+
+Circle CI is set up to publish releases to NPM automatically via [semantic-release](https://github.com/semantic-release/semantic-release) following every successful merge to master.
+
+Release versions (major, minor, patch) are triggered [by commit messages](https://github.com/semantic-release/semantic-release#commit-message-format), when they adhere to [Ember conventions](https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-ember/readme.md):
+
+```
+[TAG context] commit message
+```
+
+[Valid tags](https://github.com/artsy/responsive/blob/master/package.json#L10) for release include PATCH, DOC, FIX (patch), FEATURE (minor), and BREAKING (major). A context is also required. Commits that do not adhere to this convention will not trigger an NPM release.
+
+##### Example Patch Release
+
+```
+[FIX typeface] Add missing unit
+[PATCH tooling] Bump version
+```
+
+##### Example Minor (Feature) Release
+
+```
+[FEATURE ios] Add View primitive
+```
+
+##### Example Major (Breaking) Release
+
+```
+[BREAKING refactor] Update API to support new platform
+```