Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from artsy/initial-file-addition
Move Reaction's Utils/Responsive over into @artsy/responsive
- Loading branch information
Showing
12 changed files
with
12,300 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{ | ||
"presets": [ | ||
[ | ||
"@babel/env", | ||
{ | ||
"targets": { | ||
"browsers": [ | ||
"last 2 versions" | ||
] | ||
} | ||
} | ||
], | ||
"@babel/typescript", | ||
"@babel/react" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
``` |
Oops, something went wrong.