@pagopa/io-app-design-system v1.36.9
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
4 days ago
4 days ago
5 days ago
5 days ago
5 days ago
5 days ago
13 days ago
14 days ago
19 days ago
21 days ago
26 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago