preclose-react-web v0.1.66
React Web
Initial 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 git@bitbucket.org:preclose/react-web.git
yarn add ssh://git@bitbucket.org/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.
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago