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