@jet-pie/react

Pie Project - React Components

This package implements the PIE design system for React.

Tech Stack

• React
• Storybook
• styled-components
• polished

Adding to your project

Setup

To include @pie/react into your project, first thing you need to do is to authenticate your project to install Skip's NPM registry dependencies. To do that create a file .npmrc in the root of your project, then ask for one of the project maintainers for the keys to add to that file.

Finally add @pie/react running yarn add @jet-pie/react. Remember to be connected to the VPN. There are some peer dependencies that the project requires that you might be requested to add them, such as styled-components.

Theme Provider

Our components need specific fonts and styles, which are provided via styled-components.

The PIEThemeProvider component takes care of providing the theme and loading the fonts. To use it, add this component to the top of you component tree, wrapping the rest of the application as children.

It also allows you to consume the Theme in your application using styled-components's template functions. All tokens values will be accessible via the theme property:

export const MyLocalComponent = styled.div`
  background-color: ${(props) => props.theme.colors.value.orange};
`;

NOTE: Make sure every @pie/react component and your components that consume the theme to be wrapped by the PIEThemeProvider.

Customization

We don't treat customization as a first-class citizen. Our colors, spacing, and fonts were handpicked by designers to provide the best UI/UX and have consistancy across different products. Having fully customizable components would go against those principles.

Be that as it may, the library allows customizations in two ways:

• Component Based: Some of our components have props that allow customizing the colors and behaviour of the component. This is a more restrict approach as not all components allow to do this type of customization. I.e., the Progress Bar allows you to add different progress states and colors.

• Theme Based: Its possible to customize the PIE theme. The PIEThemeProvider component has a customTheme prop that allows you to override values from the original theme. CAUTION: Changes to the theme could affect all components, cause unexpected behaviour and possibly break your application.

Extending the Theme

If your app needs token values that the PIE Theme does not have, you're welcome to add them! You will be able to consume same way as the rest of the theme.

To do that, pass your custom properties to the PIEThemeProvider:

const const customTheme = {
  magentaColor: 'magenta',
};

 <PIEThemeProvider extraProperties={customTheme}></PIEThemeProvider>

Now you can get those values using styled-components template functions. They will all be inside the custom property.

export const MyLocalComponent = styled.p`
  color: ${(props) => props.theme.custom.magentaColor};
`;

Guidelines

Component File Structure

Components on PIE are found following this structure:

• Component.story.tsx: Story file to display the component and interact with it on Storybook
• Component.tsx: Actual implementation of the component
• styles.tsx: Export all styling need for the component (and Story)
• types.tsx: Export types definitions for the component

You don't have to strictly follow this structure per se. You can have a different structure based on the requirements of your component, as long as it has a similar separation of concerns.

Project helpers

We have a couple function that will help you extract values from our Theme:

getColorAlias

Strongly typed helper to get the color alias values from the theme. It allows us to handle different themes (default/dark) without having to worry about it in a component level.

The alias needed for each color of your component should be specified in the tech ticket.

NOTE: Dark theme has not been implemented

export const PrimaryButtonSmall = styled(ButtonSmall)`
  background-color: ${getColorAlias('interactivePrimary')};
  color: ${getColorAlias('contentnteractive-primary')};
`;

getFontSize

We have 8 font sizes avaliable on PIE: size-a throught size-h. As a design decision, not only we set the font-size, but also the line-height.

Using this helper will set both properties based on the font alias used:

export const RangeWrapper = styled.div`
  ${getFontSize('sizeC')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  width: 100%;
`;

Styled Components for styling

When styling your components, focus on only using Styled Component concepts. There is no need to create CSS files, CSS variables or even CSS classes!

DONT DO THIS

export const GhostButtonMedium = styled(ButtonMedium)`
  background-color: ${({ isLoading }) =>
    isLoading
      ? opacifyAliasColor('active02', 'backgroundDefault')
      : 'transparent'};
  color: ${getColorAlias('contentLink')};

  color: ${getColorAlias('contentLink')};

  .spinner svg {
    stroke: ${getColorAlias('contentLink')};
  }
`;

DO THIS

export const SpinnerWrapper = styled.div`
  // DEFAULT STYLING
`;

export const GhostButtonMedium = styled(ButtonMedium)`
  background-color: ${({ isLoading }) =>
    isLoading
      ? opacifyAliasColor('active02', 'backgroundDefault')
      : 'transparent'};
  color: ${getColorAlias('contentLink')};

  // Styling for GhostButtonMedium
  ${SpinnerWrapper} svg {
    stroke: ${getColorAlias('contentLink')};
  }
`;

Adding a new component

TBD

Reviewing process

TBD

Running locally

TBD

Maintainers

• David Nascimento [Resto Promotions]
• Olavo Santos [Customer Web]