@jet-pie/react v6.1.2
Pie Project - React Components
This package implements the PIE design system for React. You can see it in action here.
Tech Stack
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 acustomTheme
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
22 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
9 months ago
10 months ago
10 months ago
9 months ago
7 months ago
8 months ago
6 months ago
6 months ago
8 months ago
8 months ago
9 months ago
7 months ago
8 months ago
6 months ago
7 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
7 months ago
7 months ago
6 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago