© EarnUp 2018

Olympic

Olympic is EarnUp's component system, a library of reusable elements. The documentation currently lives in two places, but being consolidated:

• Storybook (prod)
• Storybook (dev)
• DSM

Other Links

• Design Language - The whats of whys we havea compnoent lib
• Design Patterns - Current designated go-to patterns

Getting Started

To get started, all you'll need to do is install the NPM packages using:

npm install

After the NPM packages are installed, build and run docs:

npm run build
npm run docs

Local development

If you are using any components in dev/your local sandbox, it expects:

• login-web at http://localhost:3000

Releasing a New Package on NPM

To create a new release of the package in npm, you must use GitHub's releases tab to tag a new release. Use semantic versioning and do not begin with non-numeric characters:

GOOD: 3.0.0
GOOD: 3.0.0-prerelease-1
BAD: v3.0.0

Theming, Palette, and Assets

EarnUp has different theming for it's B2B and D2C applications. You may be given a design that contains a color not already in the palette or and image asset not already utilized. That's okay. Always do your best to comply with the AC or design you are given, and add the necessary assets or hex/rgb codes as needed.

To modify or add to the theme.palette, add your changes to src/lib/theme/createTheme.js. Styles here are written in the same Plain Old Javascript Object format that is used when writing components.

To add image assets, add your file to the /public folder. Try to use SVG files if at all possible, as they will work smoothest with React components. You may use additional file types, but you may have to make additional changes to support it depending on the file type.

Documentation

This library leverages Storybook for generating React component documentation. To view documentation for your current branch, issue the following command:

# Aliased in package.json
npm run docs

Note: This requires npx.

This will start up a local documentation server after compilation. Navigate to the localhost endpoint to see the documentation.

The documentation server is equipped with hot reloading, however it will not update when either the config or the styles are updated.

Adding Component Documentation

Follow the patterns found in the styleguide config file for adding components and sections to the styleguide.

Note: the documenation server is equipped with hot reload, but it will not respond to config changes.

Fonts

Fonts are served from google fonts, eg https://fonts.googleapis.com/css?family=Lato:400,900,900i&display=swap

Icons

Currently icons are imported directly from material like import MyIcon from '@material-ui/icons/MyIcon';. If your design contains an icon that is not available in the library, it is likely an icon from the upcoming version of Material UI to which we have not yet upgraded. Try to find the closest icon to what your design calls for (and consult your designer).

If this happens, leave a comment with a link to the design file and JIRA_TICKET_NUMBER so we can easily find it when we've upgraded

// TODO: Update when Materials is upgraded
// <Link to Design File >
// <Link to JIRA_TICKET_NUMBER>

Unit testing

Testing is a priority in this codebase. In order to maintain code quality, this repo requires a minimum code coverage value in order for builds to pass, which can be found in package.json under jest/coverageThreshold.

To run tests with a test coverage report:

npm run test --coverage

This will generate a full coverage report which is printed to the console, and this build will fail if the coverage threshold is not met, as it will on the build server.

After running test coverage, a browser-friendly interactive coverage report can be opened using:

open coverage/lcov-report/index.html

Note: Avoiding unecessary errors in Jest tests

Some of our components may require a provider. However they may not throw an error message that indicates this in your test. Instead you may see some message like

TypeError: Cannot read properties of undefined (reading 'add')

If this is the case, you are missing a <*Provider> component such as <HelmetProvider> or <ApolloProvider> or <ThemeProvider>. If you're stumped by an error like the above, try drilling through your component hierarchy to find any components requiring a provider and pass the requisite provider as a wrappingComponent to enzyme.

Code formatting

This repo uses Prettier via ESLint to automatically reformat code for consistency. This will be done via commit hook to ensure that all code checked into develop maintains this formatting.

In order to set this up in VSCode, first install the ESLint and Prettier plugins, then add the following to your editor settings:

{
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "[javascript]": {
    "editor.formatOnSave": false
  }
}

Contributions and Reviews

Because this repository will be used across our applications, code owners have been assigned to ensure these components are added only as necessary, without duplication, and to ensure consistency.

All pull requests must be complete with Storybook documentation, and reviewers should begin with documentation before code review to ensure that components are up to specifications.