Artsy’s React Components
Clone or download
Latest commit 614f6f9 Oct 18, 2018
Permalink
Failed to load latest commit information.
.circleci Add a few more comments Aug 27, 2018
.storybook [Toolchain] Update to Storybooks 4 Oct 12, 2018
.vscode Improves spell checking to be less intrusive, and to also reduce the … Oct 12, 2018
__mocks__ [test] Mock react-slick globally as a class so we can hold refs to it. Jul 25, 2018
codemods Run codemod on styleguide files Jun 15, 2018
danger Rename pr.js to pr.ts Aug 21, 2017
data [Collection] uses updated kaws schema Oct 18, 2018
docs Points to Force instructions on linking. Aug 29, 2018
externals [Collect] fixes refetch container (applying filters) Oct 18, 2018
patches [package] Upgrade to now published @types/react-relay & @types/relay-… Aug 27, 2018
public/assets/images Remove redirects Jul 9, 2018
src [Collection] uses updated kaws schema Oct 18, 2018
tslint Migrates to use NPM package for linter rule. Oct 16, 2018
typings Replace buy now lab feature with feature flag Oct 2, 2018
.babelrc [Toolchain] Update to Storybooks 4 Oct 12, 2018
.env.oss [PATCH ArtworkGrid] Add support for dynamic image resizing Jul 31, 2018
.gitattributes [Deps] Add interim Relay v1.5.0 forks and patch Feb 14, 2018
.gitignore [Toolchain] Update to Storybooks 4 Oct 12, 2018
.gitmodules Add élan and metaphysics submodules. Feb 8, 2017
.gqlconfig [Relay] Configure project for compat Oct 26, 2017
.npmignore [dist] switch icon-font url Apr 14, 2017
.nvmrc Update nvm rc to fix netlify build Oct 12, 2018
.prettierignore [prettier] Ignore data dir Jun 27, 2018
.stylelintrc Add responsive component, make banner responsive Jun 9, 2018
.yarnrc Add yarnrc to avoid update churn Oct 8, 2018
LICENSE Add LICENSE Feb 8, 2017
README.md [FIX Trivial] update readme to trigger release Oct 16, 2018
package.json Migrates to use NPM package for linter rule. Oct 16, 2018
tsconfig.json [relay] Include version in user-agent header. Sep 3, 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 Merges master Oct 18, 2018

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

Commits and Deployments

Circle CI is set up to publish releases to NPM automatically via semantic-release following every successful merge to master.

Release versions (major, minor, patch) are triggered by commit messages, when they adhere to Ember conventions:

[TAG context] commit message

Valid tags for release include PATCH, DOC, FIX (patch), FEATURE (minor), and BREAKING (major). A context is also required (note that this should be one word). Commits that do not adhere to this convention will not trigger an NPM release.

Example Patch Release
[FIX onboarding] Modal does not open
[PATCH tooling] Bump version
Example Minor (Feature) Release
[FEATURE auctions] Add relay-based slider component
Example Major (Breaking) Release
[BREAKING publishing] Replace children with props for caption editing

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.