Using Paprika - acl-services/paprika GitHub Wiki

• Intention
• Getting Started
• Code Examples
• FAQ

The intention of this guide is to help developers understand how to effectively use the Paprika React UI Library in their features / applications. It is not intended to be a guide to learning React, or how to design and build features / applications. It also does not include information about contributing to Paprika — the target audience is consumers of the library.

We strive to offer a delightful developer experience (DX) to application developers with clear documentation, and easy-to-use components that are stable and usable. You can learn more about our Design Philosophy in the Contributing section.

There are three peer dependencies for Paprika that you will need to include in your application.

• React v16.8 or higher (the one with hooks)
• styled-components v4.4.1 or higher
• Paprika L10n component @paprika/l10n

In your app, you can add all these dependencies as:

$ yarn add react styled-components @paprika/l10n

or

$ npm install react styled-components @paprika/l10n

To install the <Button> component, for example:

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

You can visit npm for the full list and latest version for our components https://www.npmjs.com/org/paprika

The following CodeSandbox examples provide a starting point for using Paprika components but can be tinkered with, copied or forked as you please.

• Button
• Popover
• ListBox
• FormElement

React allows a natural transition from Paprika's predecessor, ACL UI, which implemented many React components that could be migrated more easily than re-writing them for a different framework.

The decision to use React for ACL UI was made after weighing several options at the time (Web Components, Vue, etc). The available tools for React, the strength of its community, and the momentum of its development led us to choose it over the other options at the time.

React has been a great option for us, and has been portable enough to work across legacy applications using Rails views, Angular, and Backbone.

Please start by reading the Contributing Guidelines and our Code of Conduct.

If you're just getting started, check out the Help Wanted or Good First Issues.

If you are a Galvanize employee, contractor, or partner then you can join our #paprika Slack channel where you are welcome to ask questions regarding the project.

External consumers or contributors can make a feature request, or open a pull request which will attract the attention of the core development team.

You can do so via Github by creating an issue.

Most of the time you should build feature components, components that are exclusively for your features, and use Paprika to compose them.

Creating reusable components is not as simple as it seems. Building a component that “just works” is very different from creating something that will integrate smoothly into a holistic design system and can be reused in various different applications, all with different contexts and constraints.

The delivery of new and valuable features for our users is generally a higher priority than building robust, shareable components that may or may not be needed by other teams in the future.

If you need to create a very generic UI component, or if you are certain that another team will need to use the same component in the very near future, reach out in the #paprika Slack channel for some advice before getting started. It's possible that someone on another team has already been working on what you need or can recommend a different design pattern for your feature.