Giter Site home page Giter Site logo

reaction's Introduction

⚠️ All non-publishing code in this repo is deprecated and moved to artsy/force. Use this repo only for Article components!

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

Meta

  • State: production
  • CI: CircleCI
  • NPM: npm version
  • Coverage: codecov

Installation

$ git clone 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

  • 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.

  • 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.

Developing in Force

Before you start, you should ensure Force is on the right branch and up-to-date.

Use yarn to kick off the force development process.

yarn integrate force

This command will build and compile reaction, publish it locally so it can be used in other places, link it into force for you, and then start reaction and force in watch mode.

This assumes force is a sibling directory of reaction. If it's not you can use the following setup instead.

PROJECT_PATH=path/to/force yarn integrate

If you need to attach force to a debugger, use the ENABLE_DEBUGGER command as follows

ENABLE_DEBUGGER=true yarn integrate force

Manual 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.

Publishing a Canary to NPM

Canaries are automatically published to NPM when creating a PR based off of a repo branch (i.e. not a fork). If you need to publish a canary of a fork you'll have to do a few manual steps:

  1. Update package.json, set version to a canary version, e.g. 2.0.0-canary-<PR#>, 3.1.5-canary-<PR#>, ...
  2. Run npm publish --tag canary to publish the package under the canary tag
  3. Run yarn add @artsy/reaction@canary to install canary package
  4. Running npm dist-tag ls can be helpful to see what tagged packages are available

License

FOSSA Status

About Artsy

This project is the work of engineers at Artsy, the world's leading and largest online art marketplace and platform for discovering art. One of our core Engineering Principles is being Open Source by Default which means we strive to share as many details of our work as possible.

You can learn more about this work from our blog and by following @ArtsyOpenSource or explore our public data by checking out our API. If you're interested in a career at Artsy, read through our job postings!

reaction's People

Contributors

alloy avatar artsyit avatar ashfurrow avatar ashkan18 avatar ashleyjelks avatar broskoski avatar damassi avatar dblandin avatar ds300 avatar dzucconi avatar eessex avatar erikdstock avatar jiahaodavid avatar jonallured avatar kanaabe avatar kierangillen avatar l2succes avatar lilyfromseattle avatar mzikherman avatar orta avatar oxaudo avatar pepopowitz avatar peril-staging[bot] avatar renovate-bot avatar sepans avatar sweir27 avatar williardx avatar xtina-starr avatar yuki24 avatar zephraph avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

reaction's Issues

Express session misconfigured in production environments

express-session might well be the cause of Force memory leaks. When starting up Force, we get this output:

express-session deprecated undefined resave option; provide resave option node_modules/reaction-force/dist/apps/loyalty/server/index.js:20:9
express-session deprecated undefined saveUninitialized option; provide saveUninitialized option node_modules/reaction-force/dist/apps/loyalty/server/index.js:20:9
Warning: connect.session() MemoryStore is not
designed for a production environment, as it will leak
memory, and will not scale past a single process.

https://github.com/expressjs/session even has this warning in their README. https://github.com/expressjs/session#sessionoptions

We should use another compatible session store in production, such as connect-redis and https://github.com/expressjs/session#compatible-session-stores

cc @mzikherman @alloy

Swap artsy-icons font in favor of rendering SVGs directly

Quoting @craigspaeth

Since we're paving the future here, I'll throw my 👎 to icon fonts and 👍 to rendering SVGs directly for a couple reasons:
Icon fonts are a PITA to update b/c you often have to go through some complicated build process to turn the source files into fonts
They add overhead of mapping font characters to css class name vs. just, essentially, importing the SVG file
They involve un-intuitive properties, like using font-size to change the size of them
They're not a cross-platform friendly solution (in case we want to share components with React Native for instance)
Although a more rare use case, you don't have fine-grain control of the SVG like being able to change things like stroke or animate color fill
The nicest way I've found to using SVGs directly with React is to use fs.readFileSync and shim fs in the browser or otherwise, but there's other tools that do similar things—the important part is that something takes SVG file in and puts JS out. You can even do this manually to avoid build/tools plugins.

That said, I like how you've wrapped this in an component b/c that could let us decide to swap the implementation underneath pretty easily—so by no means a blocker if we didn't want to go the icon font route.

One of the formats for the icon font is a .svg file so we could just use that file directly and render the icons.

Auto-enroll ACBs and skip the inquiries step

ACBs (since they are already confirmed) don't need to flag any purchases.

Instead, once they are logged in, they are 'auto-enrolled' and immediately just shown the Thank you page.

'Auto-enrolling' means setting the loyalty_applicant: true stuff, and checking if someone is an ACB means fetching me { collector_profile { confirmed_buyer_at } } (may need to add it to Metaphysics, but it's already in Gravity).

When a user selects an artwork purchase, update its conversation buyer_outcome

On the selection of an inquiry artwork, mutate its conversation and set buyer_outcome to 'purchased'

cc @xtina-starr I think we may want to do this on the action of selecting an artwork. Should definitely be after your initial PR on that for sure, maybe we can pair on this?

It'll be using the metaphysics mutation, and it'll need access to the impulse_conversation_id from the inquiry request fetch (in order to update that conversation).

Component List

This is a list of react components that need to be implemented based on the artsy style guide.

So far we're attempting to leverage assets from elan, our UI library, to build out those components. We're experimenting with ways to reuse the CSS for components in elan within reaction-force using a library like css-modules. However, it may make more sense to copy the styles directly into react components and just use styled-components.

You can track the current process of our experiment on the following PR (#18). If you're working on a component, just put your name next to it so we know who's working on what.

Generic Components

Loyalty Program Components

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.