@paprika/build-translations on NPM

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

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.