Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added possibility to change between app mode and storybook app mode #29

Merged
merged 4 commits into from
Dec 5, 2023
Merged

Added possibility to change between app mode and storybook app mode #29

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46faf32
Added possibility to change between app mode and storybook app mode
pablonortiz Nov 22, 2023
5cb18ef
Git Ignored .env file
pablonortiz Nov 22, 2023
389a92f
Deleted react-native-config and made change between app and storybook…
pablonortiz Nov 29, 2023
f707604
Reverted versions on package.json and package-lock.json
pablonortiz Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
LOAD_STORYBOOK=true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

este archivo de .env, vuela

5 changes: 4 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,7 @@ dist/

# Static storybook page
.storybook_static
.docs
.docs

# .env
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aca sería meter al env.json

.env
2 changes: 1 addition & 1 deletion .ondevice/storybook.requires.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ global.STORIES = [
directory: './storybook/stories',
files: '**/*.stories.?(ts|tsx|js|jsx)',
importPathMatcher:
'^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
'^\\.[\\\\/](?:storybook[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
},
];

Expand Down
1 change: 1 addition & 0 deletions android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aca deberías de volar esta linea


import com.android.build.OutputFile

Expand Down
3 changes: 2 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aca es donde te importas la key que vos necesitas, pero de env.json


const Component = __DEV__ ? Storybook : App;
const Component = Config.LOAD_STORYBOOK === 'true' ? Storybook : App;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LOAD_STORYBOOK ya es un booleano, es redundante compararlo con true.
Deberia quedar asi
const Component = Config.LOAD_STORYBOOK ? Storybook : App;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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


AppRegistry.registerComponent(appName, () => Component);
20 changes: 20 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 8 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
"dist"
],
"scripts": {
"android": "sb-rn-get-stories --config-path .ondevice && react-native run-android",
"ios": "sb-rn-get-stories --config-path .ondevice && react-native run-ios",
"android": "node scripts/set-app-mode.js app && react-native run-android",
"ios": "node scripts/set-app-mode.js app && react-native run-ios",
"storybook:android": "node scripts/set-app-mode.js storybook && sb-rn-get-stories --config-path .ondevice && react-native run-android",
"storybook:ios": "node scripts/set-app-mode.js storybook && sb-rn-get-stories --config-path .ondevice && react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
Expand All @@ -18,7 +20,7 @@
"test:commit": "jest --colors --bail --findRelatedTests",
"test:coverage": "tsc --noEmit && jest --collectCoverage --detectOpenHandles",
"build": "rm -rf dist && tsc && cp -r android ios dist",
"storybook": "react-native-storybook-server",
"storybook-server": "react-native-storybook-server",
"storybook-watcher": "sb-rn-watcher --config-path .ondevice",
"update-stories": "sb-rn-get-stories --config-path .ondevice",
"storybook-web": " npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",
Expand Down Expand Up @@ -119,8 +121,9 @@
"@react-native-community/datetimepicker": "^7.4.0",
"@react-native-community/slider": "^4.4.2",
"@storybook/cli": "^6.5.4",
"react-native-reanimated": "^2.17.0",
"react-native-gesture-handler": "^2.9.0",
"react-native-config": "^1.5.1",
"react-native-gesture-handler": ">=2.9.0 <=2.13.4",
"react-native-reanimated": "2.17.0",
"react-native-safe-area-context": "^4.6.4",
"react-native-svg": "12.1.1",
"react-native-vector-icons": "^9.2.0",
Expand Down
10 changes: 10 additions & 0 deletions scripts/set-app-mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const fs = require('fs');

const mode = process.argv[2];

const modes = {
app: 0,
storybook: 1,
};

fs.writeFileSync('.env', `LOAD_STORYBOOK=${!!modes[mode]}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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