Added possibility to change between app mode and storybook app mode #29
Conversation
pablonortiz
requested review from
colomfernando,
christian97dd,
pablodamianberdun,
dam788,
Maukr,
WilliamSaya-lvl30 and
GonzaFran
index.js
Outdated
|
|
||
| const Component = __DEV__ ? Storybook : App; | ||
| const Component = Config.LOAD_STORYBOOK === 'true' ? Storybook : App; |
There was a problem hiding this comment.
LOAD_STORYBOOK ya es un booleano, es redundante compararlo con true.
Deberia quedar asi
const Component = Config.LOAD_STORYBOOK ? Storybook : App;
There was a problem hiding this comment.
@WilliamSaya-lvl30 parece que es un booleano pero en realidad es un string, ya estuve buscando y no está soportado por la librería el parsearlo a booleano, habría que instalar una librería para hacerlo cómo muestran acá: lugg/react-native-config#49 (comment), pero mepa que no va porque lo vamos a usar ahí sólo
scripts/set-app-mode.js
Outdated
| storybook: 1, | ||
| }; | ||
|
|
||
| fs.writeFileSync('.env', `LOAD_STORYBOOK=${!!modes[mode]}`); |
There was a problem hiding this comment.
nico, para no depender de la librería de rn config, aca lo que te conviene hacer es crear un archivo que en vez de .env, se llame env.json, donde setees la key LOAD_STORYBOOK. Entonces cuando queres levantarla, la levantas desde ese archivo, como hacemos en las apps, fijate que al correr cada ambiente (beta, qa y master), setteamos un env json distinto.
y acordate tambien de agregarlo al gitignore, cosa de que no se suba el archivo
android/app/build.gradle
Outdated
| @@ -1,4 +1,5 @@ | |||
| apply plugin: "com.android.application" | |||
| apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" | |||
There was a problem hiding this comment.
aca deberías de volar esta linea
index.js
Outdated
| @@ -4,7 +4,8 @@ import {AppRegistry} from 'react-native'; | |||
| import App from './App'; | |||
| import {name as appName} from './app.json'; | |||
| import Storybook from './storybook'; | |||
| import Config from 'react-native-config'; | |||
There was a problem hiding this comment.
aca es donde te importas la key que vos necesitas, pero de env.json
.env
Outdated
| @@ -0,0 +1 @@ | |||
| LOAD_STORYBOOK=true | |||
There was a problem hiding this comment.
este archivo de .env, vuela
.gitignore
Outdated
|
|
||
| # .env | ||
| .env |
There was a problem hiding this comment.
aca sería meter al env.json
Pull Request Test Coverage Report for Build 7033399034
💛 - Coveralls |
|
@christian97dd ahí hice los cambios |
LINK DE TICKET:
https://janiscommerce.atlassian.net/browse/JUIP-133
DESCRIPCIÓN DEL REQUERIMIENTO:
Se requiere contar con la posibilidad de intercambiar entre la app de React Native, para así poder testear los componentes de una manera más fácil, y también poder ingresar en modo storybook.
DESCRIPCIÓN DE LA SOLUCIÓN:
Se añadió la librería https://www.npmjs.com/package/react-native-config ya que la misma se necesita para poder leer las variables del entorno.
A su vez, se creó el script set-app-mode.js, el cuál se encarga de escribir en el archivo .env si la key LOAD_STORYBOOK estará en true o false. En este sentido, se modificó el package.json, estos fueron los cambios que se hicieron:
Finalmente, se modificó el archivo index.js para cargar Storybook o la App dependiendo de la variable del entorno.
CÓMO SE PUEDE PROBAR?
Corriendo los comandos mencionados anteriormente:
npm run android para correr el modo app y npm run storybook:android para correr el modo storybook.