Artsy’s React Components
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update yarn orb to v0.1.0 (#1890) Jan 15, 2019
.storybook Remove SVG icons and replace with Palette Jan 12, 2019
.vscode [Artwork] Rename ArtworkBrowser -> ArtworkImageBrowser Dec 17, 2018
__mocks__ [Test] Add openseadragon mock Dec 17, 2018
codemods Run codemod on styleguide files Jun 15, 2018
danger Adds a warning when there are more than 15 modfied gnerated files Nov 30, 2018
data Add offerable filter Jan 3, 2019
docs Points to Force instructions on linking. Aug 29, 2018
patches wip Jan 11, 2019
public/assets/images Remove redirects Jul 9, 2018
src Merge pull request #1897 from damassi/remove-tabs-and-toggle Jan 16, 2019
tslint Migrates to use NPM package for linter rule. Oct 16, 2018
typings Switch between Artist Insights variations based on A/B enrollment Jan 11, 2019
.autorc Fix missing comma Jan 16, 2019
.babelrc [PATCH lib] Update relay-mock-network-layer Nov 5, 2018
.env.oss [Artwork] Refactor Actions, add download edit and genome Jan 9, 2019
.gitattributes [Deps] Add interim Relay v1.5.0 forks and patch Feb 14, 2018
.gitignore Update npmignore to include only necessary client artifacts Dec 4, 2018
.gqlconfig [Relay] Configure project for compat Oct 26, 2017
.npmignore Update npmignore to include only necessary client artifacts Dec 4, 2018
.nvmrc Update node to 10 Nov 15, 2018
.prettierignore [prettier] Ignore data dir Jun 27, 2018
.stylelintrc Conform to the stylint guidelines Nov 27, 2018
.yarnrc Add yarnrc to avoid update churn Oct 8, 2018
.yo-rc.json [yeoman] Add empty stub so the omakase generator knows what the root … Jan 4, 2019
CHANGELOG.md Update CHANGELOG.md [skip ci] Jan 16, 2019
LICENSE Add LICENSE Feb 8, 2017
README.md Update readme Jan 3, 2019
apollo.config.js [vscode] Update vscode-apollo config to ignore unwanted validation Dec 5, 2018
package.json Bump version to: 11.0.3 [skip ci] Jan 16, 2019
renovate.json Use artsy default Nov 16, 2018
tsconfig.json [Refactor] Typecheck all tests Oct 25, 2018
tslint.json Migrates to use NPM package for linter rule. Oct 16, 2018
verify-node-version.js Correct test node version, loosen node version check to major Jul 11, 2018
yarn.lock Merge pull request #1897 from damassi/remove-tabs-and-toggle Jan 16, 2019

README.md

      :::::::::  ::::::::::     :::      :::::::: ::::::::::: ::::::::::: ::::::::  ::::    :::
     :+:    :+: :+:          :+: :+:   :+:    :+:    :+:         :+:    :+:    :+: :+:+:   :+:
    +:+    +:+ +:+         +:+   +:+  +:+           +:+         +:+    +:+    +:+ :+:+:+  +:+
   +#++:++#:  +#++:++#   +#++:++#++: +#+           +#+         +#+    +#+    +:+ +#+ +:+ +#+
  +#+    +#+ +#+        +#+     +#+ +#+           +#+         +#+    +#+    +#+ +#+  +#+#+#
 #+#    #+# #+#        #+#     #+# #+#    #+#    #+#         #+#    #+#    #+# #+#   #+#+#
###    ### ########## ###     ###  ########     ###     ########### ########  ###    ####

Meta

Installation

$ git clone --recursive https://github.com/artsy/reaction.git
$ cd reaction
$ npm install -g yarn
$ yarn install
$ brew install watchman (If you don't already have Homebrew, go here for installation instructions: https://brew.sh/)
$ cp .env.oss .env

Instructions

  • Development of components happen in storybooks:

      $ yarn start
      $ open http://localhost:9001/
    
  • Run the tests:

      $ yarn test
    
  • Run the tests continuously (or use vscode-jest):

      $ yarn test -- --watch
    
  • In vscode, run the TypeScript: Run type-checker task and open the PROBLEMS view to see continuous type-checker results.

  • After updating components, be sure to deploy a new demo (sharing is caring!):

      $ yarn deploy-storybook
    
  • When using new changes in metaphysics’ schema, be sure to update the local schema copy:

      $ yarn sync-schema
    
  • There are some suggested VSCode extensions in .vscode/extensions.json and additional docs at docs/vscode.md.

Linking and Unlinking with Force

To link your local reaction with your local force, run:

    $ yarn link && yarn watch
    (wait until you see a message that X files have been successfully compiled before moving on)

    $ cd ../force && yarn link @artsy/reaction && yarn start

To unlink your local reaction from your local force, run (in Force):

    $ yarn unlink @artsy/reaction
    $ yarn add @artsy/reaction
    $ yarn start

Deployments

Reaction uses auto-release to automatically release on every PR. Every PR should have a label that matches one of the following

  • Version: Trivial
  • Version: Patch
  • Version: Minor
  • Version: Major

Peril will automatically add "Version: Patch", if you don't set one on creating your PR. No release will happen on a Trivial update.

If you're making a change but you don't want to immediate trigger a release (i.e. when 2 PRs need to go out together), specify the correct version and add the Skip Release label. That'll ensure when the next release happens the version is still bumped appropriately.

Emitting types

We recently started shipping Reaction builds with declaration files (.d.ts) so consumers have access to the interfaces and types we add to our components. Because of that, you will notice errors resembling the following:

src/Components/Forms/OrderForm/App.tsx:63:14 - error TS4023: Exported variable 'StyledTitle' has or is using name 'TitleProps' from external module "/Users/lucsucces/Projects/reaction/src/Components/Title" but cannot be named.

63 export const StyledTitle = styled(Title)`
                ~~~~~~~~~~~

What that error essentially means because you are exporting StyledTitle, the interface TitleProps also needs to be exported. You can learn more about declarations files here

Exporting interfaces

This also affects a bit how we declare our interfaces. Instead using a private Props interface as we've been doing

interface Props {
  ...
}

export class Icon extends Component<Props> {
  ...
}

you should write that instead

export interface IconProps {
  ...
}

export class Icon extends Component<IconProps> {
  ...
}

The more descriptive interface name (IconProps) will get more useful error messages from the compiler when something goes wrong, and it's clearer which interface is being referred to in type defintion files.