@proximus/myproximus-design-system NPM

React Native Design System Project

This repository is composed of all common-ui React Native components expo snack code snippets who are integrated to the proximus design system.

Snack anatomy

Each component snack is hosted in a specific folder (ex: /textfields). The folder contains two files:

App.tsx
packages.json

App.tsx contains snack RN code and packages.json a list of dependencies.

Example of embedded snack

Creating a new snack

Creating a new component snack consists in

creating a new folder at the project root.
adding both files App.tsx and package.json to it.
adding an entry in global package.json.
deploy root project on npm

Global package.json modification

Let's consider a new component snack DamienComponent is being created in damien-component folder, the following new target need to be added to the global package.json

...
"scripts": {
  ...
  "snack-damien-component": "COMPONENT=damien-component node ./scripts/generateSnackLink.js",
...
}

The target will give you the embeddable HTML snippet for the snack.

yarn snack-damien-component

Example of snippet

<iframe style="width: 100%;height:500px; border: 1px #aaa;"
        src="https://snack.expo.io/embedded?sourceUrl=https://cdn.jsdelivr.net/npm/@proximus/myproximus-design-system@6.0.1-beta1/textfields/App.tsx&dependencies=expo-font%40~8.4.0,%40expo%2Fvector-icons%40%5E12.0.0,react-native-gesture-handler%40~1.8.0,%40proximus%2Freact-native-common-ui%406.0.0-beta1,%40proximus%2Freact-native-font-icons%40%5E2.4.2,react-native-linear-gradient%402.5.6,%40proximus%2Freact-native-common-ui%2Flib%2Finputs%2FPxTextInput%406.0.0-beta1,%40proximus%2Freact-native-font-icons%2Flib%2Fassets%2Ffonts%2FProximus-Regular.ttf%40*,%40proximus%2Freact-native-common-ui%2Flib%2Fstyling%406.0.0-beta1,%40proximus%2Freact-native-font-icons%2Flib%2Fassets%2Ffonts%2FProximus-Bold.ttf%40*&preview=true">
</iframe>

Remarks on snack `package.json`

When creating new snack, it is very likely that snack package.json will be empty. In that case, launching

yarn snack-damien-component

will output a snack URL allowing the developer to edit the snack directly on expo.io platform (see next section for more information).

Snack associated package.json is only used when exposing component snack on expo.io platform. it is useless when testing locally with expo.

Example of snack URL

https://snack.expo.io/embedded?sourceUrl=https://cdn.jsdelivr.net/npm/@proximus/myproximus-design-system@6.0.1-beta1/textfields/App.tsx

Deploy root project on NPM

In order to make snack files publicly available on the expo.io platform, it is needed to deploy the project on public NPM with the following command

npm run publish-public

Development workflow

Development can be achieved in 2 different ways or in a combination of those 2 ways:

Locally using local expo
On expo.io platform

Local Expo setup

In order to develop the component snack locally, just launch the following command

yarn start

It will launch a local expo setup. Just follow standard expo instructions to proceed further.

The local expo app consists of a drawer navigator exposing all snacks available.

snack package.json file is not used in that setup. all dependencies are already defined in global package.json.

It's always a good idea to implement the snack locally as far as possible. It is recommanded to switch to expo.io hosted mode later.

Testing the snack on `expo.io` platform

Once most of the component snack development is done, it's a good idea to test it on expo.io platform.

It's very likely that at that step, snack's package.json does not exist or is empty. Launching the following command

yarn snack-damien-component

will output a link where developer can continue development on the snack platform. From there, expo.io will suggest you to add missing dependencies in the empty package.json. Once all dependencies are added, just copy/paste it in your local snack folder package.json.

At that point, the newly created snack will work on both local expo and expo.io platform.