io-app-design-system 2.1.1
Install from the command line:
Learn more about npm packages
$ npm install @pagopa/io-app-design-system@2.1.1
Install via package.json:
"@pagopa/io-app-design-system": "2.1.1"
About this version
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
).
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>;
}
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.
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
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>
);
The library is made up of several parts:
Essential core visual attributes of the design language. It includes:
-
IOColors
: Defines the main color palette, themes (light/dark) and other color-related utilities -
IOSpacing
: Defines the main spacing scale and various component spacing attributes -
IOStyles
: Defines common styles shared across components -
IOShapes
: Defines visual shape-related attributes, such as radius -
IOAnimations
: Defines common animation attributes used for interactive elements (used by thereanimated
library) -
IOTransitions
: Defines reusable custom enter/exit transitions (used by thereanimated
library)
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
[!note] Some components that can be tested in the official DS section are missing
Common functions used to wrap up external libraries and utilities
-
react-native-reanimated
: Handles all the component animations -
react-native-svg
: Handles all the vector asset components (icons, pictograms and logos) -
react-native-haptic-feedback
: Handles all the haptic feedbacks -
react-native-safe-area-context
: Handles all safe area spacing attributes react-native-linear-gradient
-
react-native-easing-gradient
: Generates easing gradients react-native-gesture-handler
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library