@storybook/react-native 7.6.10-rc.0 → 7.6.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/readme.md +10 -12
- package/scripts/generate.js +1 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/react-native",
|
|
3
|
-
"version": "7.6.
|
|
3
|
+
"version": "7.6.12",
|
|
4
4
|
"description": "A better way to develop React Native Components for your app",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@storybook/preview-api": "^7.6.10",
|
|
64
64
|
"@storybook/preview-web": "^7.6.10",
|
|
65
65
|
"@storybook/react": "^7.6.10",
|
|
66
|
-
"@storybook/react-native-theming": "^7.6.
|
|
66
|
+
"@storybook/react-native-theming": "^7.6.12",
|
|
67
67
|
"chokidar": "^3.5.1",
|
|
68
68
|
"commander": "^8.2.0",
|
|
69
69
|
"dedent": "^1.5.1",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"publishConfig": {
|
|
98
98
|
"access": "public"
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "8edec3c994c1a8d890b66ca3a6be0678b9daa49e"
|
|
101
101
|
}
|
package/readme.md
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
With Storybook for React Native you can design and develop individual React Native components without running your app.
|
|
4
4
|
|
|
5
|
-
This readme is for the 7.6 version, you can find
|
|
5
|
+
This readme is for the 7.6.10 version, you can find the 6.5 docs [here](https://github.com/storybookjs/react-native/tree/v6.5-stable).
|
|
6
|
+
|
|
7
|
+
If you are migrating from 6.5 to 7.6 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-65x-to-76x)
|
|
6
8
|
|
|
7
9
|
For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
|
|
8
10
|
|
|
@@ -35,12 +37,6 @@ For expo you can use this [template](https://github.com/dannyhw/expo-template-st
|
|
|
35
37
|
```sh
|
|
36
38
|
# With NPM
|
|
37
39
|
npx create-expo-app --template expo-template-storybook AwesomeStorybook
|
|
38
|
-
|
|
39
|
-
# With Yarn
|
|
40
|
-
yarn create expo-app --template expo-template-storybook AwesomeStorybook
|
|
41
|
-
|
|
42
|
-
# With pnpm
|
|
43
|
-
pnpm create expo-app --template expo-template-storybook AwesomeStorybook
|
|
44
40
|
```
|
|
45
41
|
|
|
46
42
|
For react native cli you can use this [template](https://github.com/dannyhw/react-native-template-storybook)
|
|
@@ -54,7 +50,7 @@ npx react-native init MyApp --template react-native-template-storybook
|
|
|
54
50
|
Run init to setup your project with all the dependencies and configuration files:
|
|
55
51
|
|
|
56
52
|
```sh
|
|
57
|
-
npx
|
|
53
|
+
npx storybook@latest init
|
|
58
54
|
```
|
|
59
55
|
|
|
60
56
|
The only thing left to do is return Storybook's UI in your app entry point (such as `App.tsx`) like this:
|
|
@@ -83,7 +79,7 @@ Then set `transformer.unstable_allowRequireContext` to true and add the generate
|
|
|
83
79
|
|
|
84
80
|
```js
|
|
85
81
|
// metro.config.js
|
|
86
|
-
|
|
82
|
+
const path = require('path');
|
|
87
83
|
const { getDefaultConfig } = require('expo/metro-config');
|
|
88
84
|
|
|
89
85
|
const { generate } = require('@storybook/react-native/scripts/generate');
|
|
@@ -92,16 +88,18 @@ generate({
|
|
|
92
88
|
configPath: path.resolve(__dirname, './.storybook'),
|
|
93
89
|
});
|
|
94
90
|
|
|
95
|
-
|
|
91
|
+
/** @type {import('expo/metro-config').MetroConfig} */
|
|
92
|
+
const config = getDefaultConfig(__dirname);
|
|
96
93
|
|
|
97
|
-
|
|
94
|
+
config.transformer.unstable_allowRequireContext = true;
|
|
98
95
|
|
|
99
|
-
module.exports =
|
|
96
|
+
module.exports = config;
|
|
100
97
|
```
|
|
101
98
|
|
|
102
99
|
**React native**
|
|
103
100
|
|
|
104
101
|
```js
|
|
102
|
+
const path = require('path');
|
|
105
103
|
const { generate } = require('@storybook/react-native/scripts/generate');
|
|
106
104
|
|
|
107
105
|
generate({
|
package/scripts/generate.js
CHANGED
|
@@ -29,14 +29,13 @@ function generate({ configPath, absolute = false, useJs = false }) {
|
|
|
29
29
|
workingDir: cwd,
|
|
30
30
|
});
|
|
31
31
|
|
|
32
|
-
// TODO refactor contexts and normalized stories to be one thing
|
|
33
32
|
const normalizedStories = storiesSpecifiers.map((specifier) => {
|
|
34
33
|
// TODO why????
|
|
35
34
|
const reg = globToRegexp(`./${specifier.files}`);
|
|
36
35
|
|
|
37
36
|
const { path: p, recursive: r, match: m } = toRequireContext(specifier);
|
|
38
37
|
|
|
39
|
-
const pathToStory = ensureRelativePathHasDot(path.relative(configPath, p));
|
|
38
|
+
const pathToStory = ensureRelativePathHasDot(path.posix.relative(configPath, p));
|
|
40
39
|
return `{
|
|
41
40
|
titlePrefix: "${specifier.titlePrefix}",
|
|
42
41
|
directory: "${specifier.directory}",
|