@earnup/olympic-lib
v2.1.12
Published
EarnUp Component Library
Downloads
96
Maintainers
Readme
© EarnUp 2018
Olympic
Olympic is EarnUp's component system, a library of reusable elements. The documentation currently lives in two places, but being consolidated:
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.