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:

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

Releases and Publishing

Paprika uses Changesets to manage versioning and publishing. When you make changes that should be released, you need to create a changeset file describing your changes.

Creating a Changeset:

1. Run yarn changeset in the root directory
2. Select the packages that have changed
3. Choose the version bump type (patch, minor, or major)
4. Write a summary of your changes

Automatic Publishing:

Packages are automatically published via scheduled GitHub Actions workflows:

• Pre-releases: Published automatically every 6 hours (at :00 past the hour, between 03:00 AM and 09:59 PM UTC, daily). These are pre-release versions (e.g., 1.0.0-next.0) available for testing.
• Stable releases: Published automatically every Saturday at 9:00 PM UTC. All changesets merged to master will be versioned and published as stable releases.

Release Process:

1. Create a changeset file describing your changes
2. Merge your PR to master (the changeset file will be included)
3. Pre-release versions will be available within 6 hours for testing
4. Stable versions will be published on the next Saturday at 9 PM UTC

The GitHub Actions release workflow (.github/workflows/publish.yml) will:

• Bump package versions based on merged changesets
• Publish packages to NPM using npm Trusted Publishing (OIDC) for secure, token-less authentication
• Push version tags back to the repository

Manual Release: You can also trigger a release manually via GitHub Actions:

1. Go to the "Actions" tab in the repository
2. Select "Automatic Publish Packages" workflow
3. Click "Run workflow" and choose either "pre-release" or "stable"

More Information

For more information please check out our Contributing Guidelines. You may want to start with the Getting Started Guide

Development Commands

Common yarn commands for development:

Code Quality:

• yarn lint - Run ESLint to check code quality
• yarn lint:fix - Automatically fix ESLint issues
• yarn lint:jss - Lint styled-components files
• yarn prettier - Check code formatting
• yarn prettier:format or yarn prettier --write - Format code with Prettier
• yarn validate:ts - Validate TypeScript types

Testing:

• yarn test - Run Jest unit tests
• yarn jest:watch - Run tests in watch mode
• yarn test:debug - Run tests with Node.js debugger
• yarn test:a11y - Run accessibility tests with Axe
• yarn cypress:open - Open Cypress test runner
• yarn cypress:run - Run Cypress tests headlessly
• yarn cypress:ci - Run Cypress tests in CI mode (starts Storybook automatically)
• yarn cypress:dev - Start Storybook and open Cypress (development mode)

Storybook:

• yarn storybook - Start Storybook development server
• yarn storybook:build - Build static Storybook for deployment
• yarn storybook:start - Start Storybook without upload server
• yarn storybook:startWithoutHMR - Start Storybook without hot module reload

Build & Transpilation:

• yarn prepare - Full build: cleanup, transpile, generate types and READMEs
• yarn prepare:esm - Build ESM versions of packages
• yarn transpile - Transpile packages to CommonJS
• yarn transpile:esm - Transpile packages to ESM
• yarn cleanup - Remove compiled lib directories

Code Generation:

• yarn generateReadMe - Generate README files for packages
• yarn generateTypeDefinitionsForJS - Generate TypeScript definitions for JS packages
• yarn generateDocStories - Generate Storybook stories from documentation
• yarn build:translations - Build translation files

Component Creation:

• yarn pestle - Interactive CLI tool for creating new components

Status & Metrics:

• yarn paprika-status - Generate component health metrics (test coverage, commit stats, versions) and save to status.json
• yarn paprika-status:a11y - Generate accessibility status metrics and save to status-a11y.json (requires Storybook to be running)

Other:

• yarn license - Generate license.xls file with all dependency licenses

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

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