Awesome
<div style="display: flex; flex-direction: column; align-items: center"><img alt="IO App Design System" src="repo-assets/io-app-design-system-github-cover.png" width="100%" style="max-width: 768px" align="center" /><br />
<h3 align="center" style="width: 100%">A comprehensive library of components specifically designed for <a href="https://github.com/pagopa/io-app">IO App</a></h3> <!-- NPM Badge --> <div align="center"> <a href="https://www.npmjs.com/package/@pagopa/io-app-design-system"><img alt="npm latest package" src="https://img.shields.io/npm/v/@pagopa/io-app-design-system/latest.svg"></a> </div> <br /> </div>Getting started
Prerequisites
To contribute to the library development, you will need to install nodejs
and yarn
. We recommend using nvm
to properly handle the supported nodejs version (see .nvmrc
).
Learn more about the io-app
prerequisites โ
Installing the component library
To add the component library to the main app run:
yarn add @pagopa/io-app-design-system
Remember to encapsulate the app container with the SafeAreaProvider
from react-native-safe-area-context
in your App.tsx
file. Also, remember to apply this wrapper in other relevant places such as the root components of modals and routes when utilizing react-native-screens
:
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return <SafeAreaProvider>...</SafeAreaProvider>;
}
Launch the example app
For development purposes, a sample React Native application is included in the repository. To launch it:
# Move into `example` folder
cd example
# Install dependencies
yarn install
# Install podfiles when targeting iOS (ignore this step for Android)
# Run this only during the first setup and when Pods dependencies change
cd iOS && bundle exec pod install
# Launch the app locally (simulator flag is optional)
yarn ios --simulator='iPhone 15 Pro'
Activate the toggle at the top of the application to view the experimental design system.
[!important] The sample application consists of several pages with some components for testing purposes. To view the continuously updated Design System section, please refer to the main app.
Playground & Documentation
A Storybook playground is also available to help develop and test components. To start it in the local environment, run the following command:
yarn storybook
Storybook documentation is a work in progress
Usage
To try a component, just import it:
import { ButtonSolid } from '@pagopa/io-app-design-system';
// [...]
const MainScreen = () => (
<View>
<ButtonSolid
accessibilityLabel="Tap to trigger test alert"
label="Hello world"
onPress={() => Alert.alert("Alert", "Action triggered")}
/>
</View>
);
Architecture
The library is made up of several parts:
Core
Essential core visual attributes of the design language. It includes:
IOColors
: Defines the main color palette, themes (light/dark) and other color-related utilitiesIOSpacing
: Defines the main spacing scale and various component spacing attributesIOStyles
: Defines common styles shared across componentsIOShapes
: Defines visual shape-related attributes, such as radiusIOAnimations
: Defines common animation attributes used for interactive elements (used by thereanimated
library)IOTransitions
: Defines reusable custom enter/exit transitions (used by thereanimated
library)
Explore the core
folder โ
Foundation
Essential atomic components:
- Typography
- Layout
- ContentWrapper
- Spacer (
VSpacer
,HSpacing
) - Divider
- Icons
- Assets with an intended size between
12px
and56px
- ๐ Docs ยท Add a new icon โ
- Assets with an intended size between
- Pictograms
- Assets with an intended size greather than
56px
- ๐ Docs ยท Add a new pictogram โ
- Assets with an intended size greather than
- Logos
- Loaders
Components
Explore the components
folder โ
[!note] Some components that can be tested in the official DS section are missing
Functions
Common functions used to wrap up external libraries and utilities
Explore the functions
folder โ
Dependencies
react-native-reanimated
: Handles all the component animationsreact-native-svg
: Handles all the vector asset components (icons, pictograms and logos)react-native-haptic-feedback
: Handles all the haptic feedbacksreact-native-safe-area-context
: Handles all safe area spacing attributesreact-native-linear-gradient
react-native-easing-gradient
: Generates easing gradientsreact-native-gesture-handler
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library