React Web

Initial Setup

React-Web Setup

If you add anything that needs to be adjusted to ge the repo setup, add it to the intranet site aboce and document below

##Documentation

###simple-component-library A library of React components created using create-react-app.

Installation

Run the following commands: yarn add [email protected]:preclose/react-web.git yarn add ssh://[email protected]/preclose/preclosekit.git

Make sure you include the preclosekit css file as well.

Local Development

If you want to run some api calls directly, you can create a file called precloseUserInfo.js under the .storybook directory at the top level. This file should follow this format:

export const jwt = {
  jwtToken: "somejwttoken",
  userId: "someuserid",
};

export const baseUrl = {
  origin: 'http://localhost:3000'
};

Run yarn run storybook in order to view the components.

Static Feature Testing

Surge.sh

Here's where you can find install instructions for the CLI https://surge.sh/help/getting-started-with-surge

After you get that all setup you'll need to include a CNAME file. You can do that by adding a variable to your bash_profile. Here is the format: export PRECLOSE_SURGE_NAME=preclose{yourFirstName}. Replacing the brackets along with the text inside with your first name. For example: export PRECLOSE_SURGE_NAME=preclosebrandon.

After you get the env variable setup you'll need to make sure you have it loaded. So source your bash profile: source ~/.bash_profile

Building the static site

You can run the built in yarn command yarn build-storybook to build your files to the static .out directory.

Deploying your static storybook feature branch

Final step is to run yarn run deploy-storybook to deploy your feature branch to a static site. NOTE: If you haven't run this command before you'll need to cd into the .out directory and run surge. This is so you can create your surge account.

Testing your static site locally

You can test your static site locally using npx http-server .out

Deployment

yarn run build builds the bundled code to the "dist" folder. Commit those changes and then run npm publish. Which will publish that folder to npm. Also make sure to update the version number in the "package.json" file.

InformedJS documentation

Informed is our state management solution for forms. We wrap all of our PrecloseKit components in Informed components so that it can manage form state.

InformedJS Validation

Informed has a way to custom validate components. You need to pass special props to the components in order for them to run however. Make sure to include either validateOnChange or validateOnBlur.

Gotcha's

Passing data into react-web from preclose-web

Params are passed into our react application in the order they are passed to Angular's React2Angular library. This is a temporary coupling that we're documenting here. The behavior is that arguments you pass to components that you're expecting in the constructor should be either passed first or passed as an object.

For example:

// BAD:
['myString', 'myObject']

constructor(props) {
  this.state = {
    // Set's correctly because it's the first param.
    myString: props.myString,
    // Doesn't set because React2Angular only passes the first argument.
    myObject: props.myObject
  };
}


// GOOD:
myObject = {
  myObject: {},
  myString: ''
};
['myObject']

constructor(props) {
  this.state = {
    // Sets because React2Angular only passes the first argument.
    myObject: props.myObject.myObject,
    myString: props.myObject.myString
  };
}

Again, it should be noted that this is a TEMPORARY fix. By no means is this a good pattern.