/paprika

🌶 A robust + accessible UI component library for React applications by Galvanize.

Primary LanguageJavaScriptMIT LicenseMIT

Paprika logo

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

react version node version yarn version lerna version styled components version prettier
GitHub pull requests GitHub issues MIT license Build Status


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/l10n

Adding a Component

For example, to install the <Button> component:

$ 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>;

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          #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: feat, fix, style, test, docs, build, chore, ci, perf, refactor, revert

If you are experiencing difficulty, you may need to:

  1. overwrite your existing commit-msg file with the husky one: cp ~/src/paprika/.git/hooks/applypatch-msg ~/src/paprika/.git/hooks/commit-msg
  2. 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.

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

The MIT License (MIT)

Packages licenses

To list all licenses of paprika dependencies run

yarn license

it 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