npm package: @proximus/myproximus-design-system
Description: This repository is composed of all common-ui React Native components **expo snack** code snippets who are integrated to the [proximus design system](https://designsystem.proximus.com/pagesDS/20__Components/preview.cshtml).
Latest version: 7.0.4-11

# 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](https://designsystem.proximus.com/pagesDS/20__Components/preview.cshtml).

## 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

<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>

## 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`

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

The target will give you the embeddable HTML snippet for the snack.
````bash
yarn snack-damien-component
````

#### Example of snippet
````html
<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
````bash
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

````bash
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

````bash
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

````bash
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.

## Embeddable HTML snippet creation

Once component snack development is over, whole project needs to be published one last time using
````bash
npm run publish-public
````

and HTML snippet can be generated using following command:

````bash
yarn snack-damien-component
````

## Export Embeddable HTML for all snacks

Once component snack development is over, whole project needs to be published one last time using
````bash
npm run publish-public
````

and HTML snippets can be generated for all components using using following command:

````bash
yarn generateAll
````