Skip to content

Commit fca425a

Browse files
DanielMarkielDanielMarkiel
authored
feat: [ZN-188] Add storybook
1 parent a6c2819 commit fca425a

File tree

14 files changed

+1898
-25
lines changed

14 files changed

+1898
-25
lines changed

‎.github/workflows/e2e_android.yml‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,12 @@ jobs:
3636
sudo udevadm control --reload-rules
3737
sudo udevadm trigger --name-match=kvm
3838
39-
- name: Setup Gradle
40-
uses: gradle/gradle-build-action@v3
41-
4239
- name: Install dependencies
4340
run: yarn --frozen-lockfile
4441

4542
- name: Setup Java
4643
uses: actions/setup-java@v3
4744
with:
48-
cache: gradle
4945
distribution: temurin
5046
java-version: 17
5147

‎.storybook/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import AsyncStorage from '@react-native-async-storage/async-storage';
2+
import { view } from './storybook.requires';
3+
4+
const StorybookUIRoot = view.getStorybookUI({
5+
storage: {
6+
getItem: AsyncStorage.getItem,
7+
setItem: AsyncStorage.setItem,
8+
},
9+
});
10+
11+
export default StorybookUIRoot;

‎.storybook/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { StorybookConfig } from '@storybook/react-native';
2+
3+
const main: StorybookConfig = {
4+
stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
5+
addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
6+
};
7+
8+
export default main;

‎.storybook/preview.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { Preview } from '@storybook/react';
2+
import React from 'react';
3+
4+
import { AppProviders } from '../src/providers/AppProviders';
5+
6+
const preview: Preview = {
7+
parameters: {
8+
controls: {
9+
matchers: {
10+
color: /(background|color)$/i,
11+
date: /Date$/,
12+
},
13+
},
14+
},
15+
decorators: [
16+
(Story) => (
17+
<AppProviders>
18+
<Story />
19+
</AppProviders>
20+
),
21+
],
22+
};
23+
24+
export default preview;

‎.storybook/storybook.requires.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* do not change this file, it is auto generated by storybook. */
2+
3+
import {
4+
start,
5+
prepareStories,
6+
getProjectAnnotations,
7+
} from "@storybook/react-native";
8+
9+
import "@storybook/addon-ondevice-controls/register";
10+
import "@storybook/addon-ondevice-actions/register";
11+
12+
const normalizedStories = [
13+
{
14+
titlePrefix: "",
15+
directory: "./src/components",
16+
files: "**/*.stories.?(ts|tsx|js|jsx)",
17+
importPathMatcher:
18+
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
19+
// @ts-ignore
20+
req: require.context(
21+
"../src/components",
22+
true,
23+
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
24+
),
25+
},
26+
];
27+
28+
declare global {
29+
var view: ReturnType<typeof start>;
30+
var STORIES: typeof normalizedStories;
31+
}
32+
33+
const annotations = [
34+
require("./preview"),
35+
require("@storybook/react-native/dist/preview"),
36+
require("@storybook/addon-actions/preview"),
37+
];
38+
39+
global.STORIES = normalizedStories;
40+
41+
// @ts-ignore
42+
module?.hot?.accept?.();
43+
44+
if (!global.view) {
45+
global.view = start({
46+
annotations,
47+
storyEntries: normalizedStories,
48+
});
49+
} else {
50+
const { importMap } = prepareStories({ storyEntries: normalizedStories });
51+
52+
global.view._preview.onStoriesChanged({
53+
importFn: async (importPath: string) => importMap[importPath],
54+
});
55+
56+
global.view._preview.onGetProjectAnnotationsChanged({
57+
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
58+
});
59+
}
60+
61+
export const view = global.view;

‎App.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,11 @@ const App = () => {
1515
);
1616
};
1717

18-
export default App;
18+
let AppEntryPoint = App;
19+
20+
if (process.env.STORYBOOK_ENABLED === 'true') {
21+
// eslint-disable-next-line @typescript-eslint/no-var-requires
22+
AppEntryPoint = require('./.storybook').default;
23+
}
24+
25+
export default AppEntryPoint;

‎README.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,18 @@ You can read more about the react navigation at: https://reactnavigation.org/doc
9696

9797
### AppCenter
9898

99-
- Environment variables need to have `RN_` prefix. For example if your variable is `BACKEND_URL`(in `.env` file) it should be added as `RN_BACKEND_URL` to the App Center.
99+
- Environment variables need to have `RN_` prefix. For example if your variable is `BACKEND_URL`(in `.env` file) it
100+
should be added as `RN_BACKEND_URL` to the App Center.
101+
102+
## Storybook
103+
104+
To open storybook:
105+
106+
1. Start metro bundler using `yarn storybook`
107+
1. Run ios/android build using `yarn ios` or `yarn android`
100108

101109
## Troubleshooting
102110

103111
### Changes in .env file are not reflected in ios application even after rebuild
104112

105-
To see the latest changes you may need to run `cd ios && pod install` and then rebuild the project.
113+
To see the latest changes you may need to run `cd ios && pod install` and then rebuild the project.

‎babel.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ module.exports = {
99
},
1010
],
1111
'nativewind/babel',
12+
[
13+
'transform-inline-environment-variables',
14+
{
15+
include: ['NODE_ENV', 'STORYBOOK_ENABLED'],
16+
},
17+
],
1218
'react-native-reanimated/plugin',
1319
],
1420
};

‎ios/Podfile.lock‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -956,6 +956,10 @@ PODS:
956956
- React-Core
957957
- react-native-safe-area-context (4.7.4):
958958
- React-Core
959+
- react-native-slider (4.5.2):
960+
- glog
961+
- RCT-Folly (= 2022.05.16.00)
962+
- React-Core
959963
- React-nativeconfig (0.73.6)
960964
- React-NativeModulesApple (0.73.6):
961965
- glog
@@ -1123,6 +1127,10 @@ PODS:
11231127
- React-jsi (= 0.73.6)
11241128
- React-logger (= 0.73.6)
11251129
- React-perflogger (= 0.73.6)
1130+
- RNCAsyncStorage (1.23.1):
1131+
- React-Core
1132+
- RNDateTimePicker (7.6.4):
1133+
- React-Core
11261134
- RNGestureHandler (2.14.0):
11271135
- glog
11281136
- RCT-Folly (= 2022.05.16.00)
@@ -1195,6 +1203,7 @@ DEPENDENCIES:
11951203
- react-native-config (from `../node_modules/react-native-config`)
11961204
- react-native-mmkv (from `../node_modules/react-native-mmkv`)
11971205
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
1206+
- "react-native-slider (from `../node_modules/@react-native-community/slider`)"
11981207
- React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
11991208
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
12001209
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1215,6 +1224,8 @@ DEPENDENCIES:
12151224
- React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
12161225
- React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
12171226
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
1227+
- "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
1228+
- "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
12181229
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
12191230
- RNReanimated (from `../node_modules/react-native-reanimated`)
12201231
- RNScreens (from `../node_modules/react-native-screens`)
@@ -1300,6 +1311,8 @@ EXTERNAL SOURCES:
13001311
:path: "../node_modules/react-native-mmkv"
13011312
react-native-safe-area-context:
13021313
:path: "../node_modules/react-native-safe-area-context"
1314+
react-native-slider:
1315+
:path: "../node_modules/@react-native-community/slider"
13031316
React-nativeconfig:
13041317
:path: "../node_modules/react-native/ReactCommon"
13051318
React-NativeModulesApple:
@@ -1340,6 +1353,10 @@ EXTERNAL SOURCES:
13401353
:path: "../node_modules/react-native/ReactCommon/react/utils"
13411354
ReactCommon:
13421355
:path: "../node_modules/react-native/ReactCommon"
1356+
RNCAsyncStorage:
1357+
:path: "../node_modules/@react-native-async-storage/async-storage"
1358+
RNDateTimePicker:
1359+
:path: "../node_modules/@react-native-community/datetimepicker"
13431360
RNGestureHandler:
13441361
:path: "../node_modules/react-native-gesture-handler"
13451362
RNReanimated:
@@ -1394,6 +1411,7 @@ SPEC CHECKSUMS:
13941411
react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
13951412
react-native-mmkv: e97c0c79403fb94577e5d902ab1ebd42b0715b43
13961413
react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c
1414+
react-native-slider: 7a39874fc1fcdfee48e448fa72cce0a8f2c7c5d6
13971415
React-nativeconfig: b4d4e9901d4cabb57be63053fd2aa6086eb3c85f
13981416
React-NativeModulesApple: cd26e56d56350e123da0c1e3e4c76cb58a05e1ee
13991417
React-perflogger: 5f49905de275bac07ac7ea7f575a70611fa988f2
@@ -1414,6 +1432,8 @@ SPEC CHECKSUMS:
14141432
React-runtimescheduler: 9636eee762c699ca7c85751a359101797e4c8b3b
14151433
React-utils: d16c1d2251c088ad817996621947d0ac8167b46c
14161434
ReactCommon: 2aa35648354bd4c4665b9a5084a7d37097b89c10
1435+
RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
1436+
RNDateTimePicker: 08f00a2c341bf96e4b30da15799fbdd4c5fa48a3
14171437
RNGestureHandler: a4c4561307e67f2942f5a4fe1526ff78cf3f5280
14181438
RNReanimated: dee37576492f1a375017515f5c77e66e5eec696b
14191439
RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46

‎metro.config.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
2+
const { generate } = require('@storybook/react-native/scripts/generate');
3+
4+
const path = require('path');
5+
6+
generate({
7+
configPath: path.resolve(__dirname, './.storybook'),
8+
});
29

310
/**
411
* Metro configuration
512
* https://facebook.github.io/metro/docs/configuration
613
*
714
* @type {import('metro-config').MetroConfig}
815
*/
9-
const config = {};
16+
const config = {
17+
transformer: {
18+
// Required by Storybook
19+
unstable_allowRequireContext: true,
20+
},
21+
};
1022

1123
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

0 commit comments

Comments
 (0)