Support for this package will be discontinued in the near future. Consider migrating to Material UI.
Panenco UI is our React component library created to unify how we create user interfaces.
Run one of the following commands to add Panenco UI to your project:
yarn add @panenco/ui
Peer dependencies:
- classnames
- react
- react-dom
- react-router-dom
- styled-components
To start importing and using components in your project, you need the following:
- Import css of Panenco UI from
@panenco/ui/lib/styles.css. It could be any way of global import of styles into your project. For instance, usingimportin js with a proper loader or using@importin yourcss. - Wrap your application with the
ThemeProvidercomponent fromstyled-componentsand pass the theme to it.
import React from 'react';
import { render } from 'react-dom';
import AppContainers from 'containers';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';
import '@panenco/ui/lib/styles.css';
const App = () => (
<ThemeProvider theme={theme}>
<AppContainers />
</ThemeProvider>
);
render(<App />, document.getElementById('root'));A theme is just a nested object with properties defining the appearance of your UI. It's passed to the ThemeProvider component from styled-components, and then it's available in all components of Panenco UI. The theme is defined as:
type PUITheme = {
colors: PUIColors;
typography: {
sizes: PUISizes;
weights: PUIWeights;
};
};There are two properties: colors and typography.
Colors that are defined within a theme are represented with the following type:
export type PUIColors = {
alert: string;
error: string;
success: string;
primary200: string;
primary500: string;
primary700: string;
primary900: string;
base100: string;
base200: string;
base300: string;
base400: string;
base500: string;
base600: string;
base700: string;
base800: string;
base900: string;
};Also, you can override theme colors:
colors: PUIColors;Typography consists of two properties: sizes and weights. They are used as a base for the Text component. The setting of these properties impacts all text sizes in all components around Panenco UI. Also, when using custom fonts, it's highly recommended to set the proper weights of the font you use.
export type PUIWeights = {
thin: number;
light: number;
regular: number;
medium: number;
bold: number;
black: number;
};
export type TextSize = { textSize: string; lineHeight: string | number };
export type PUISizes = {
xs: TextSize;
s: TextSize;
m: TextSize;
l: TextSize;
xl: TextSize;
h3: TextSize;
h2: TextSize;
h1: TextSize;
};Note: styled-components inject their styles at the bottom of the HTML <head>, which gives @panenco/ui precedence over your custom styles. To remove the need for !important, you need to change the CSS injection order using useInjectStylesFirst hook imported from @panenco/ui
import { useInjectStylesFirst } from '@panenco/ui';
const App = () => {
useInjectStylesFirst();- react-focus-lock: https://github.com/theKashey/react-focus-lock