::::::::: :::::::::: ::: :::::::: ::::::::::: ::::::::::: :::::::: :::: :::
:+: :+: :+: :+: :+: :+: :+: :+: :+: :+: :+: :+:+: :+:
+:+ +:+ +:+ +:+ +:+ +:+ +:+ +:+ +:+ +:+ :+:+:+ +:+
+#++:++#: +#++:++# +#++:++#++: +#+ +#+ +#+ +#+ +:+ +#+ +:+ +#+
+#+ +#+ +#+ +#+ +#+ +#+ +#+ +#+ +#+ +#+ +#+ +#+#+#
#+# #+# #+# #+# #+# #+# #+# #+# #+# #+# #+# #+# #+#+#
### ### ########## ### ### ######## ### ########### ######## ### ####
- State: production
- Demo: https://artsy.github.io/reaction
- CI:
- NPM:
- Point People: @alloy, @l2succes & @damassi
$ 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
-
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 thePROBLEMS
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.
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
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.
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
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.