Getting Started Using Paprika
If you want to spice up your application with Paprika, you will need to start by adding the required dependencies. Paprika has a
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/l10n
Adding a Component
For example, to install the
$ yarn add @paprika/button
Then, to use the component in your project:
import React from "react"; import Button from "@paprika/button"; export default () => <Button>Hello</Button>;
For more information about using Paprika in your project, including code examples and FAQs, visit the Using Paprika wiki pages.
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.
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.
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 #invalid
2) 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:
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
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
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.
Have a question for the development team? Ask us.
To list all licenses of paprika dependencies run
it will create a
license.xls file at the root of the repository
The following packages has been deprecated and they have moved into a new name space