Skip to content

Commit 99344f4

Browse files
dannyhwdannyhw
authored
fix: auto title, number control when undefined, render type (#420)
* fix: auto title, number control when undefined, render type * tests: update snapshots
1 parent b903682 commit 99344f4

File tree

8 files changed

+70
-55
lines changed

8 files changed

+70
-55
lines changed

‎addons/ondevice-controls/src/types/Number.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export interface NumberProps {
4949

5050
const NumberType = ({ arg, isPristine, onChange = (value) => value }: NumberProps) => {
5151
const showError = Number.isNaN(arg.value);
52-
const [numStr, setNumStr] = useState(arg.value.toString());
53-
const updateNumstr = useCallback((value) => setNumStr(value.toString()), []);
52+
const [numStr, setNumStr] = useState(arg.value?.toString());
53+
const updateNumstr = useCallback((value) => setNumStr(value?.toString()), []);
5454
const { key, setCurrentValue } = useResyncValue(arg.value, isPristine, updateNumstr);
5555

5656
const handleNormalChangeText = (text: string) => {

‎app/react-native/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"@storybook/client-logger": "^6.5.14",
5757
"@storybook/core-client": "^6.5.14",
5858
"@storybook/core-events": "^6.5.14",
59-
"@storybook/csf": "0.0.2--canary.7c6c115.0",
59+
"@storybook/csf": "0.0.2--canary.4566f4d.1",
6060
"@storybook/preview-web": "^6.5.14",
6161
"chokidar": "^3.5.1",
6262
"commander": "^8.2.0",

‎app/react-native/scripts/__snapshots__/loader.test.js.snap

+15-5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ exports[`loader writeRequires when there are different file extensions writes th
66
77
import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
88
9+
global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/file-extensions\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/file-extensions\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
10+
911
import \\"@storybook/addon-ondevice-notes/register\\";
1012
import \\"@storybook/addon-ondevice-controls/register\\";
1113
import \\"@storybook/addon-ondevice-backgrounds/register\\";
@@ -40,7 +42,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
4042
4143
4244
const getStories=() => {
43-
return [require(\\"./FakeStory.stories.tsx\\")];
45+
return {\\"./scripts/mocks/file-extensions/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
4446
}
4547
4648
configure(getStories, module, false)
@@ -53,6 +55,8 @@ exports[`loader writeRequires when there is a story glob and exclude paths globs
5355
5456
import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
5557
58+
global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/exclude-config-files\\",\\"files\\":\\"**/*.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/exclude-config-files(?:\\\\\\\\/(?!\\\\\\\\.)(?:(?:(?!(?:^|\\\\\\\\/)\\\\\\\\.).)*?)\\\\\\\\/|\\\\\\\\/|$)(?!\\\\\\\\.)(?=.)[^/]*?\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
59+
5660
import \\"@storybook/addon-ondevice-notes/register\\";
5761
import \\"@storybook/addon-ondevice-controls/register\\";
5862
import \\"@storybook/addon-ondevice-backgrounds/register\\";
@@ -87,7 +91,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
8791
8892
8993
const getStories=() => {
90-
return [require(\\"include-components/FakeStory.stories.tsx\\")];
94+
return {\\"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx\\": require(\\"include-components/FakeStory.stories.tsx\\")};
9195
}
9296
9397
configure(getStories, module, false)
@@ -100,6 +104,8 @@ exports[`loader writeRequires when there is a story glob writes the story import
100104
101105
import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
102106
107+
global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/all-config-files\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/all-config-files\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
108+
103109
import \\"@storybook/addon-ondevice-notes/register\\";
104110
import \\"@storybook/addon-ondevice-controls/register\\";
105111
import \\"@storybook/addon-ondevice-backgrounds/register\\";
@@ -134,7 +140,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
134140
135141
136142
const getStories=() => {
137-
return [require(\\"./FakeStory.stories.tsx\\")];
143+
return {\\"./scripts/mocks/all-config-files/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
138144
}
139145
140146
configure(getStories, module, false)
@@ -147,6 +153,8 @@ exports[`loader writeRequires when there is no preview does not add preview rela
147153
148154
import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
149155
156+
global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/no-preview\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/no-preview\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
157+
150158
import \\"@storybook/addon-ondevice-notes/register\\";
151159
import \\"@storybook/addon-ondevice-controls/register\\";
152160
import \\"@storybook/addon-ondevice-backgrounds/register\\";
@@ -163,7 +171,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
163171
164172
165173
const getStories=() => {
166-
return [require(\\"./FakeStory.stories.tsx\\")];
174+
return {\\"./scripts/mocks/no-preview/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
167175
}
168176
169177
configure(getStories, module, false)
@@ -176,6 +184,8 @@ exports[`loader writeRequires when there is no story glob or addons writes no st
176184
177185
import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
178186
187+
global.STORIES = []
188+
179189
180190
181191
@@ -185,7 +195,7 @@ exports[`loader writeRequires when there is no story glob or addons writes no st
185195
186196
187197
const getStories=() => {
188-
return [];
198+
return {};
189199
}
190200
191201
configure(getStories, module, false)

‎app/react-native/scripts/loader.js

+23-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const path = require('path');
22
const fs = require('fs');
33
const glob = require('glob');
44
const prettier = require('prettier');
5+
const normalizeStories = require('@storybook/core-common').normalizeStories;
56

67
const cwd = process.cwd();
78
const supportedExtensions = ['js', 'jsx', 'ts', 'tsx', 'cjs', 'mjs'];
@@ -96,8 +97,15 @@ function writeRequires({ configPath, absolute = false }) {
9697

9798
let previewJs = previewExists ? previewImports : '';
9899

99-
const storyRequires = storyPaths.map((storyPath) => `require("${storyPath}")`).join(',');
100-
const path_array_str = `[${storyRequires}]`;
100+
const storyRequires = storyPaths
101+
.map((storyPath) => {
102+
const storyPathToAbsolute = path.resolve(configPath, storyPath);
103+
const relative = path.relative(cwd, storyPathToAbsolute);
104+
return `"./${relative}": require("${storyPath}")`;
105+
})
106+
.join(',');
107+
108+
const path_obj_str = `{${storyRequires}}`;
101109

102110
const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n');
103111
let enhancersImport = '';
@@ -116,11 +124,23 @@ function writeRequires({ configPath, absolute = false }) {
116124
`;
117125
}
118126

127+
const normalizedStories = normalizeStories(main.stories, {
128+
configDir: configPath,
129+
workingDir: cwd,
130+
}).map((specifier) => ({
131+
...specifier,
132+
importPathMatcher: specifier.importPathMatcher.source,
133+
}));
134+
135+
const globalStories = `global.STORIES = ${JSON.stringify(normalizedStories)}`;
136+
119137
const fileContent = `
120138
/* do not change this file, it is auto generated by storybook. */
121139
122140
import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
123141
142+
${globalStories}
143+
124144
${registerAddons}
125145
126146
${enhancersImport}
@@ -130,7 +150,7 @@ function writeRequires({ configPath, absolute = false }) {
130150
${enhancers}
131151
132152
const getStories=() => {
133-
return ${path_array_str};
153+
return ${path_obj_str};
134154
}
135155
136156
configure(getStories, module, false)

‎app/react-native/src/preview/executeLoadable.ts

+5-12
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function executeLoadable(loadable: Loadable) {
1717
if (Array.isArray(loadable)) {
1818
reqs = loadable;
1919
} else if ((loadable as RequireContext).keys) {
20-
reqs = [loadable as RequireContext];
20+
reqs = [loadable as RequireContext]; // todo: test with metro require context
2121
}
2222

2323
let exportsMap = new Map<Path, ModuleExports>();
@@ -39,19 +39,12 @@ export function executeLoadable(loadable: Loadable) {
3939
});
4040
} else {
4141
const exported = (loadable as LoaderFunction)();
42-
if (Array.isArray(exported) /*FIXME && exported.every((obj) => obj.default != null)*/) {
43-
const csfExports = exported.filter((obj) => obj.default != null);
44-
exportsMap = new Map(
45-
csfExports.map((fileExports, index) => [`exports-map-${index}`, fileExports])
42+
if (typeof exported === 'object') {
43+
const csfExports = Object.entries(exported as Object).filter(
44+
([_key, value]) => value.default != null
4645
);
46+
exportsMap = new Map(csfExports.map(([filePath, fileExports]) => [filePath, fileExports]));
4747
}
48-
// else if (exported) {
49-
// logger.warn(
50-
// `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
51-
// exported
52-
// )}`
53-
// );
54-
// }
5548
}
5649

5750
return exportsMap;

‎examples/native/components/ControlExamples/Number/Number.stories.tsx

+23-24
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
11
import React from 'react';
2-
import { ComponentStory, ComponentMeta } from '@storybook/react-native';
2+
import { ComponentMeta, ComponentStoryObj } from '@storybook/react-native';
33
import { Multiply } from './Number';
44

5-
const NumberMeta: ComponentMeta<typeof Multiply> = {
6-
title: 'Number control',
5+
export default {
6+
render: (args) => {
7+
return <Multiply {...args} />;
8+
},
79
component: Multiply,
8-
};
9-
10-
export default NumberMeta;
11-
12-
type NumberStory = ComponentStory<typeof Multiply>;
10+
} as ComponentMeta<typeof Multiply>;
1311

14-
export const Basic: NumberStory = (args) => <Multiply {...args} />;
15-
16-
Basic.args = {
17-
first: 5,
18-
second: 3,
12+
export const Basic: ComponentStoryObj<typeof Multiply> = {
13+
args: {
14+
// first: 5,
15+
second: 3,
16+
},
1917
};
2018

21-
export const Range: NumberStory = (args) => <Multiply {...args} />;
22-
Range.args = {
23-
first: 6,
24-
second: 7,
25-
};
26-
Range.argTypes = {
27-
first: {
28-
step: 3,
29-
min: 1,
30-
max: 42,
31-
range: true,
19+
export const Range: ComponentStoryObj<typeof Multiply> = {
20+
args: {
21+
first: 6,
22+
second: 7,
23+
},
24+
argTypes: {
25+
first: {
26+
step: 3,
27+
min: 1,
28+
max: 42,
29+
range: true,
30+
},
3231
},
3332
};

‎examples/native/ios/Podfile.lock

+1-1
Original file line numberDiff line numberDiff line change
@@ -603,4 +603,4 @@ SPEC CHECKSUMS:
603603

604604
PODFILE CHECKSUM: 6e59441cc91d1212be846147df5dbdd47e7629f2
605605

606-
COCOAPODS: 1.11.2
606+
COCOAPODS: 1.11.3

‎yarn.lock

-7
Original file line numberDiff line numberDiff line change
@@ -3805,13 +3805,6 @@
38053805
dependencies:
38063806
lodash "^4.17.15"
38073807

3808-
"@storybook/[email protected]":
3809-
version "0.0.2--canary.7c6c115.0"
3810-
resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.7c6c115.0.tgz#91724e34be7b168acddb8df7e7821ed371ce31ff"
3811-
integrity sha512-LRIDJp2JionBqZ4/c2DncDk5jGzd3sua92jGbQVRtVyIGdaAVDuNtqXY9Fh+yzO7QE03Cm+BEs59Yat5J7EdEQ==
3812-
dependencies:
3813-
lodash "^4.17.15"
3814-
38153808
"@storybook/[email protected]", "@storybook/docs-tools@^6.5.14":
38163809
version "6.5.14"
38173810
resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.14.tgz#68d9c156cdc80a906570807f1d116be103032656"

0 commit comments

Comments
 (0)