Initial file addition

.babelrc

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

.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,94 @@
-# 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)
+
+A renderProps based <Responsive /> media query component
+
+### Installation
+
+```sh
+  yarn add @artsy/responsive
+```
+
+### Use
+
+First, setup a provider at the root of your component tree and pass in a set of
+media queries to match against:
+
+```tsx
+import { ResponsiveProvider } from "@artsy/responsive"
+
+const mediaQueries = {
+  xl: `(min-width: 1192px)`,
+  lg: `(min-width: 1024px)`,
+  md: `(min-width: 900px)`,
+  sm: `(min-width: 768px)`,
+  /** Determines if the input device has the notion of hover, e.g. mouse. */
+  hover: `not all and (pointer: coarse), not all and (-moz-touch-enabled: 1)`,
+}
+
+export const App = () => {
+  return (
+    <ResponsiveProvider mediaQueries={themeProps.mediaQueries}>
+      {this.props.children}>
+    </ResponsiveProvider>
+  )
+}
+```
+
+And then later, use `<Responsive>` to check to see if a media query has been matched:
+
+```tsx
+import { Responsive } from "@artsy/responsive"
+
+export const MainContent = () => {
+  return (
+    <Responsive>
+      {({ xs, md, touch }) => {
+        if (xs) {
+          return <div>Is xs size</div>
+        } else if (md) {
+          return <div>Is md size</div>
+        } else if (touch) {
+          return <div>Is touch device</div>
+        } else {
+          return <div>Desktop size</div>
+        }
+      }}
+      }
+    </Responsive>
+  )
+}
+```
+
+### 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
+```

docs/Responsive.mdx

@@ -0,0 +1,22 @@
+---
+name: Responsive
+---
+
+import { Playground, PropsTable } from 'docz'
+import { Responsive } from '../src'
+
+# Responsive
+
+<Playground>
+  <Responsive>
+    {({ xs, md }) => {
+      if (xs) {
+        return <div>Is xs size</div>
+      } else if (md) {
+        return <div>Is md size</div>
+      } else {
+        return <div>Desktop size</div>
+      }
+    }}
+  </Responsive>
+</Playground>

docs/_utils/components/Wrapper.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { Theme as ArtsyTheme, themeProps } from "@artsy/palette"
+import { ResponsiveProvider } from "../../../src"
+
+export default class Theme extends React.Component {
+  render() {
+    return (
+      <ArtsyTheme>
+        <ResponsiveProvider mediaQueries={themeProps.mediaQueries}>
+          {this.props.children}>
+        </ResponsiveProvider>
+      </ArtsyTheme>
+    )
+  }
+}

docs/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="{{ lang }}">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="{{ description }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>{{ title }}</title>
+  <link rel="stylesheet" type="text/css" href="https://webfonts.artsy.net/all-webfonts.css"> {{ head }}
+</head>
+
+<body>
+  <div id="root" /> {{ footer }}
+</body>
+
+</html>

docs/index.mdx

@@ -0,0 +1,9 @@
+---
+name: Introduction
+route: /
+order: 1
+---
+
+# Introduction
+
+Responsive is a renderProps-based component for conditionally rendering items based on media query matches.

doczrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  typescript: true,
+  protocol: "http",
+  wrapper: "docs/_utils/components/Wrapper.tsx",
+  indexHtml: "docs/index.html",
+  themeConfig: {
+    // Can override any of these colors... https://github.com/pedronauck/docz/blob/781c2bff5ae6ebe7a0d8a46f9cbc8cfef709c191/packages/docz-theme-default/src/styles/modes.ts#L5
+    colors: {
+      primary: "#6E1EFF",
+      sidebarBg: "#F8F8F8",
+    },
+  },
+}