@follett/common-ui v0.3.19

Follett Common UI Components

This is a React Components library with custom components designed specially for Folett's marketplace applications. This library is part of Follett Common UI guidelines.

Wanna play right now? Check our CodeSandbox: https://codesandbox.io/s/github/valorebooks/common-ui-todo-example

Installation (For new projects)

You can install Follett Common UI using the command below:

  $ yarn add @follett/common-ui

If the project you are working on (buyback, nbc, etc) already uses, it's possible that this library is included.

Dependencies

"react": "^16.4.0",
"react-dom": "^16.4.0",
"prop-types": "^15.6.2",
"styled-components": "^3.4.10"

Documentation

Most components are based on reactstrap. There's also a documentation for custom components using our Storybook.

Reactstrap Documentation

• Visit reactstrap for full bootstrap react components.

Storybook - Folett Custom Components Documentation

• Visit Follett Common UI Storybook for custom components documentation.

Development

We use Storybook for development and live documentation of our custom components, you can see by running:

  $ yarn start

Open your browser at http://localhost:9001. It contains hot reload capabilities, so you your development experience will be easy and fast.

Testing

By building common-ui and pushing the dist folder to your fork, it is possible to test the plugin in your applicable project before publishing to npm.

See the testing page for more details.

Publishing

We use https://webpro.github.io/release-it/ for releases.

Publishing will create a release & tag in the GitHub repository and update the package on npm to the latest version.

Note: This should only be done once your code is merged to master in upstream and you are ready to "deploy" it.

Prerequisites:

At a high level, you'll need these:

• Node.js (https://nodejs.org/en/)
• npm (should be included with Node.js)
• brew (https://brew.sh/)

Install those first and then install the following:

• yarn (brew install yarn)
• release-it (npm install --global release-it)

Finally, perform these steps:

• Add release-it to yarn (yarn global add release-it)
• Login via npm (npm login)
• Add an export for GITHUB_TOKEN (required for release-it to create the release on GitHub)
  1. If necessary, generate a personal access token with a scope of repo via GitHub (https://github.com/settings/tokens/new)
  2. Run export GITHUB_TOKEN="<token>" (where <token> is the token from the previous step or an existing eligible token)

Steps:

Note: You do NOT need to change the version property in package.json. This is handled automatically by release-it in step 3 below.

1. Assuming all your code has been merged into master on upstream, make sure master on your local repository is up to date by pulling from upstream. (This step may seem redundant, but it's important to be aware of as your local repository needs to be even in commits with master on upstream or you will receive an error. This includes PR commits even if there are no file changes.)
2. If you have not already done so, run yarn install to download any necessary dependencies.
3. Run yarn build to create the build. This will add a dist folder to your project. Do not commit this folder. It is simply for the build.

4. Run yarn release to publish the project. This will execute release-it, which will show you the commits included in the release then prompt you with some questions:

   1. Ready to release vX.Y.Z?: Confirmation that the included commits match what is expected to be included in the release and the version number is correct.
   2. Show staged files?: Show modified files that will be committed to the repository. This should always only be package.json, which will contain the new version number. Make sure to confirm before processing.
   3. Commit (Release X.Y.Z)?: Confirmation that the staged files can be committed to the repository. As long as only package.json is included, you may proceed.
   4. Tag (vX.Y.Z)?: Confirmation that a new tag can be created for this version locally.
   5. Push?: Confirmation that the new tag can be pushed to upstream.
   6. Create a release on GitHub (Release X.Y.Z)?: Confirmation that a release can be created in upstream for this version.
   7. Publish @follett/common-ui to npm?: Confirmation to update the package on npm.

   Generally speaking, you should enter Y to all of these questions unless there is an issue at some step (e.g., more than package.json after step 2).

Still having issues?

See the publishing section of the FAQ for potential solutions.

Deploy Storybook to S3

To deploy Storybook examples to s3, you run:

yarn deploy-storybook

AWS Credentials

You must have the ~/.aws/credentials file in place before you perform a deploy. Your file must include a [follett] profile. Here's an example:

[follett]
aws_access_key_id=IAUSIDUYAISUDYAISYD
aws_secret_access_key=L*&SKAKJHSD+-*S
aws_default_region=us-east-1

Change Log

See the Change Log.

Follett Common UI

Visit the Follett Common UI website for more information.