Paprika is the React component library for the generic UI components of the Starling Design System by Galvanize.
Quick Links: NPM | Storybook | Component Status | Contributing Guidelines
Getting Started Using Paprika
Dependencies
If you want to spice up your application with Paprika, you will need to start by adding the required dependencies. Paprika has a peerDependency on React v16.8, styled-components and most packages also have a peerDependency on the Paprika L10n component (@paprika/l10n) for localization.
You will need to include them as dependencies in your project.
$ yarn add react styled-components @paprika/l10nAdding a Component
For example, to install the <Button> component:
$ yarn add @paprika/buttonThen, to use the component in your project:
import React from "react";
import Button from "@paprika/button";
export default () => <Button>Hello</Button>;More Information
For more information about using Paprika in your project, including code examples and FAQs, visit the Using Paprika wiki pages.
Components
Paprika components are individually versioned and distributed packages in a Lerna monorepo. To browse a list of components, open the Storybook, view the source code, visit the NPM registry, or refer to the AirTable summary.
NPM Packages
Contributing
Before contributing, please read our Code of Conduct Contributors are welcome to submit a bug report, make a feature request, or open a pull request. If you’re just getting started, check out the Help Wanted or Good First Issues.
Enforced standards
In order to commit code : 1) your branch name must start with a JIRA ticket:
ABC-123--updating-whatever #valid
xx-0000--updating-whatever #valid
updating-whatever #invalid2) your commit must follow Conventional commits pattern:
git commit -m "feat(ListBox): added feature x" #valid
git commit -m "fix(Button): made it work in IE9" #valid
git commit -m "bug(Button): made it work in IE9" #invalid (invalid type)
git commit -m "feat: added feature x" #invalid (missing scope)
git commit -m "added feature x" #invalid (missing type and scope)The valid "types" are: feat, fix, style, test, docs, build, chore, ci, perf, refactor, revert
If you are experiencing difficulty, you may need to:
- overwrite your existing commit-msg file with the husky one:
cp ~/src/paprika/.git/hooks/applypatch-msg ~/src/paprika/.git/hooks/commit-msg - update the commit-msg file permissions:
chmod 755 ~/src/paprika/.git/hooks/commit-msg
More Information
For more information please check out our Contributing Guidelines. You may want to start with the Getting Started Guide
Testing
There are a few layers to the testing pyramid in Paprika.
- Static analysis – ESLint (with several plugins, namely airbnb)
- Unit testing – Jest
- Component testing – React Testing Library
- End-to-end testing – Cypress
- Visual regresstion testing – Screener
Accessibility
Paprika components are built with accessibility in mind from design through implementation. Compliance with WCAG 2.0 level AA by following WAI-ARIA Authoring Practices is a priority.
In practice this ensures the usability of Paprika components:
- with keyboard, mouse or touch inputs
- at various zoom levels up to 200% on a variety of screen sizes
- with sufficent colour contrast for all essential elements
- with meaningful and semantic markup
- with support for assistive technology (screen readers like VoiceOver, NVDA, and Jaws)
For more information about how these goals are achieved, please read our guidelines for developers.
Support
Have a question for the development team? Ask us.
License
Packages licenses
To list all licenses of paprika dependencies run
yarn licenseit will create a license.xls file at the root of the repository
NOTES
The following packages has been deprecated and they have moved into a new name space
Before (deprecated)
- @paprika/listbox
- @paprika/listbox-browser
- @paprika/dropdownmenu
- @paprika/sidepanel
Now
- @paprika/list-box
- @paprika/list-box-browser
- @paprika/overflow-menu
- @paprika/panel