@storybook/react-native 6.5.6-alpha.1 → 7.0.0-alpha.1
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/dist/index.d.ts +176 -17
- package/dist/index.js +216 -203
- package/package.json +14 -12
- package/scripts/__snapshots__/loader.test.js.snap +5 -37
- package/scripts/loader.js +24 -18
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,177 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { Theme } from '@storybook/react-native-theming';
|
|
3
3
|
export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
|
|
4
|
-
import
|
|
5
|
-
import { StoryApi } from '@storybook/addons';
|
|
6
|
-
export { ArgTypes, Args, Parameters, StoryContext } from '@storybook/addons';
|
|
7
|
-
import { ClientApi } from '@storybook/client-api';
|
|
4
|
+
import { ClientApi } from '@storybook/preview-api';
|
|
8
5
|
import { ReactElement, ComponentType, JSXElementConstructor, ComponentProps, ReactNode } from 'react';
|
|
9
|
-
import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations } from '@storybook/csf';
|
|
6
|
+
import { Renderer as Renderer$1, Args as Args$1, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations } from '@storybook/csf';
|
|
7
|
+
|
|
8
|
+
declare global {
|
|
9
|
+
interface SymbolConstructor {
|
|
10
|
+
readonly observable: symbol;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
interface SBBaseType {
|
|
15
|
+
required?: boolean;
|
|
16
|
+
raw?: string;
|
|
17
|
+
}
|
|
18
|
+
type SBScalarType = SBBaseType & {
|
|
19
|
+
name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
|
|
20
|
+
};
|
|
21
|
+
type SBArrayType = SBBaseType & {
|
|
22
|
+
name: 'array';
|
|
23
|
+
value: SBType;
|
|
24
|
+
};
|
|
25
|
+
type SBObjectType = SBBaseType & {
|
|
26
|
+
name: 'object';
|
|
27
|
+
value: Record<string, SBType>;
|
|
28
|
+
};
|
|
29
|
+
type SBEnumType = SBBaseType & {
|
|
30
|
+
name: 'enum';
|
|
31
|
+
value: (string | number)[];
|
|
32
|
+
};
|
|
33
|
+
type SBIntersectionType = SBBaseType & {
|
|
34
|
+
name: 'intersection';
|
|
35
|
+
value: SBType[];
|
|
36
|
+
};
|
|
37
|
+
type SBUnionType = SBBaseType & {
|
|
38
|
+
name: 'union';
|
|
39
|
+
value: SBType[];
|
|
40
|
+
};
|
|
41
|
+
type SBOtherType = SBBaseType & {
|
|
42
|
+
name: 'other';
|
|
43
|
+
value: string;
|
|
44
|
+
};
|
|
45
|
+
type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
|
|
46
|
+
|
|
47
|
+
type StoryId = string;
|
|
48
|
+
type ComponentId = string;
|
|
49
|
+
type ComponentTitle = string;
|
|
50
|
+
type StoryName$1 = string;
|
|
51
|
+
/** @deprecated */
|
|
52
|
+
type StoryKind$1 = ComponentTitle;
|
|
53
|
+
type Tag = string;
|
|
54
|
+
interface StoryIdentifier {
|
|
55
|
+
componentId: ComponentId;
|
|
56
|
+
title: ComponentTitle;
|
|
57
|
+
/** @deprecated */
|
|
58
|
+
kind: ComponentTitle;
|
|
59
|
+
id: StoryId;
|
|
60
|
+
name: StoryName$1;
|
|
61
|
+
/** @deprecated */
|
|
62
|
+
story: StoryName$1;
|
|
63
|
+
tags: Tag[];
|
|
64
|
+
}
|
|
65
|
+
interface Parameters {
|
|
66
|
+
[name: string]: any;
|
|
67
|
+
}
|
|
68
|
+
type ConditionalTest = {
|
|
69
|
+
truthy?: boolean;
|
|
70
|
+
} | {
|
|
71
|
+
exists: boolean;
|
|
72
|
+
} | {
|
|
73
|
+
eq: any;
|
|
74
|
+
} | {
|
|
75
|
+
neq: any;
|
|
76
|
+
};
|
|
77
|
+
type ConditionalValue = {
|
|
78
|
+
arg: string;
|
|
79
|
+
} | {
|
|
80
|
+
global: string;
|
|
81
|
+
};
|
|
82
|
+
type Conditional = ConditionalValue & ConditionalTest;
|
|
83
|
+
interface InputType {
|
|
84
|
+
name?: string;
|
|
85
|
+
description?: string;
|
|
86
|
+
defaultValue?: any;
|
|
87
|
+
type?: SBType | SBScalarType['name'];
|
|
88
|
+
if?: Conditional;
|
|
89
|
+
[key: string]: any;
|
|
90
|
+
}
|
|
91
|
+
interface StrictInputType extends InputType {
|
|
92
|
+
name: string;
|
|
93
|
+
type?: SBType;
|
|
94
|
+
}
|
|
95
|
+
interface Args {
|
|
96
|
+
[name: string]: any;
|
|
97
|
+
}
|
|
98
|
+
type ArgTypes<TArgs = Args> = {
|
|
99
|
+
[name in keyof TArgs]: InputType;
|
|
100
|
+
};
|
|
101
|
+
type StrictArgTypes<TArgs = Args> = {
|
|
102
|
+
[name in keyof TArgs]: StrictInputType;
|
|
103
|
+
};
|
|
104
|
+
type Globals = {
|
|
105
|
+
[name: string]: any;
|
|
106
|
+
};
|
|
107
|
+
type Renderer = {
|
|
108
|
+
/** What is the type of the `component` annotation in this renderer? */
|
|
109
|
+
component: unknown;
|
|
110
|
+
/** What does the story function return in this renderer? */
|
|
111
|
+
storyResult: unknown;
|
|
112
|
+
/** What type of element does this renderer render to? */
|
|
113
|
+
canvasElement: unknown;
|
|
114
|
+
T?: unknown;
|
|
115
|
+
};
|
|
116
|
+
type StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryIdentifier & {
|
|
117
|
+
component?: (TRenderer & {
|
|
118
|
+
T: any;
|
|
119
|
+
})['component'];
|
|
120
|
+
subcomponents?: Record<string, (TRenderer & {
|
|
121
|
+
T: any;
|
|
122
|
+
})['component']>;
|
|
123
|
+
parameters: Parameters;
|
|
124
|
+
initialArgs: TArgs;
|
|
125
|
+
argTypes: StrictArgTypes<TArgs>;
|
|
126
|
+
};
|
|
127
|
+
type StoryContextUpdate<TArgs = Args> = {
|
|
128
|
+
args?: TArgs;
|
|
129
|
+
globals?: Globals;
|
|
130
|
+
[key: string]: any;
|
|
131
|
+
};
|
|
132
|
+
type ViewMode$1 = 'story' | 'docs';
|
|
133
|
+
type StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForEnhancers<TRenderer, TArgs> & Required<StoryContextUpdate<TArgs>> & {
|
|
134
|
+
hooks: unknown;
|
|
135
|
+
viewMode: ViewMode$1;
|
|
136
|
+
originalStoryFn: StoryFn$1<TRenderer>;
|
|
137
|
+
};
|
|
138
|
+
type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any>>;
|
|
139
|
+
type StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForLoaders<TRenderer, TArgs> & {
|
|
140
|
+
loaded: Record<string, any>;
|
|
141
|
+
abortSignal: AbortSignal;
|
|
142
|
+
canvasElement: TRenderer['canvasElement'];
|
|
143
|
+
};
|
|
144
|
+
type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TRenderer['storyResult'];
|
|
145
|
+
type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
|
|
146
|
+
type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
|
|
147
|
+
T: TArgs;
|
|
148
|
+
})['storyResult'];
|
|
149
|
+
type StoryFn$1<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
|
|
150
|
+
type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
|
|
151
|
+
type Addon_ReturnTypeFramework<ReturnType> = {
|
|
152
|
+
component: any;
|
|
153
|
+
storyResult: ReturnType;
|
|
154
|
+
canvasElement: any;
|
|
155
|
+
};
|
|
156
|
+
type Addon_StoryFn<ReturnType = unknown> = StoryFn$1<Addon_ReturnTypeFramework<ReturnType>>;
|
|
157
|
+
type Addon_DecoratorFunction<StoryFnReturnType = unknown> = DecoratorFunction<Addon_ReturnTypeFramework<StoryFnReturnType>>;
|
|
158
|
+
type Addon_LoaderFunction = LoaderFunction<Addon_ReturnTypeFramework<unknown>>;
|
|
159
|
+
type Addon_ClientApiReturnFn<StoryFnReturnType = unknown> = (...args: any[]) => Addon_StoryApi<StoryFnReturnType>;
|
|
160
|
+
interface Addon_StoryApi<StoryFnReturnType = unknown> {
|
|
161
|
+
kind: StoryKind$1;
|
|
162
|
+
add: (storyName: StoryName$1, storyFn: Addon_StoryFn<StoryFnReturnType>, parameters?: Parameters) => Addon_StoryApi<StoryFnReturnType>;
|
|
163
|
+
addDecorator: (decorator: Addon_DecoratorFunction<StoryFnReturnType>) => Addon_StoryApi<StoryFnReturnType>;
|
|
164
|
+
addLoader: (decorator: Addon_LoaderFunction) => Addon_StoryApi<StoryFnReturnType>;
|
|
165
|
+
addParameters: (parameters: Parameters) => Addon_StoryApi<StoryFnReturnType>;
|
|
166
|
+
[k: string]: string | Addon_ClientApiReturnFn<StoryFnReturnType>;
|
|
167
|
+
}
|
|
10
168
|
|
|
11
169
|
type StoryFnReactReturnType = ReactElement<unknown>;
|
|
12
170
|
|
|
13
|
-
|
|
171
|
+
interface ReactNativeFramework extends Renderer$1 {
|
|
14
172
|
component: ComponentType<any>;
|
|
15
173
|
storyResult: StoryFnReactReturnType;
|
|
16
|
-
}
|
|
174
|
+
}
|
|
17
175
|
/**
|
|
18
176
|
* For the common case where a component's stories are simple components that receives args as props:
|
|
19
177
|
*
|
|
@@ -56,19 +214,19 @@ type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructo
|
|
|
56
214
|
*
|
|
57
215
|
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
|
|
58
216
|
*/
|
|
59
|
-
type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
|
|
217
|
+
type Meta<TArgs = Args$1> = ComponentAnnotations<ReactNativeFramework, TArgs>;
|
|
60
218
|
/**
|
|
61
219
|
* Story function that represents a CSFv2 component example.
|
|
62
220
|
*
|
|
63
221
|
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
64
222
|
*/
|
|
65
|
-
type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
|
|
223
|
+
type StoryFn<TArgs = Args$1> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
|
|
66
224
|
/**
|
|
67
225
|
* Story function that represents a CSFv3 component example.
|
|
68
226
|
*
|
|
69
227
|
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
70
228
|
*/
|
|
71
|
-
type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
|
|
229
|
+
type StoryObj<TArgs = Args$1> = StoryAnnotations<ReactNativeFramework, TArgs>;
|
|
72
230
|
/**
|
|
73
231
|
* Story function that represents a CSFv2 component example.
|
|
74
232
|
*
|
|
@@ -77,7 +235,7 @@ type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
|
|
|
77
235
|
* NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
|
|
78
236
|
*
|
|
79
237
|
*/
|
|
80
|
-
type Story<TArgs = Args> = StoryFn<TArgs>;
|
|
238
|
+
type Story<TArgs = Args$1> = StoryFn<TArgs>;
|
|
81
239
|
|
|
82
240
|
type StoryKind = string;
|
|
83
241
|
type StoryName = string;
|
|
@@ -111,18 +269,19 @@ type Params = {
|
|
|
111
269
|
theme: DeepPartial<Theme>;
|
|
112
270
|
};
|
|
113
271
|
|
|
114
|
-
declare const configure: (loadable:
|
|
272
|
+
declare const configure: (loadable: any, m: {
|
|
273
|
+
hot?: {
|
|
274
|
+
accept?: () => void;
|
|
275
|
+
};
|
|
276
|
+
}) => void;
|
|
115
277
|
|
|
116
278
|
type C = ClientApi<ReactNativeFramework>;
|
|
117
|
-
declare const setAddon: C['setAddon'];
|
|
118
279
|
declare const addDecorator: C['addDecorator'];
|
|
119
280
|
declare const addParameters: C['addParameters'];
|
|
120
281
|
declare const addArgsEnhancer: C['addArgsEnhancer'];
|
|
121
282
|
declare const addArgTypesEnhancer: C['addArgTypesEnhancer'];
|
|
122
|
-
declare const clearDecorators: C['clearDecorators'];
|
|
123
|
-
declare const getStorybook: C['getStorybook'];
|
|
124
283
|
declare const raw: C['raw'];
|
|
125
|
-
declare const storiesOf: (kind: string,
|
|
284
|
+
declare const storiesOf: (kind: string, m: any) => Addon_StoryApi<ReactNode>;
|
|
126
285
|
declare const getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
|
|
127
286
|
|
|
128
|
-
export { ComponentMeta, ComponentStory, ComponentStoryFn, ComponentStoryObj, Meta, ReactNativeFramework, Story, StoryFn, StoryFnReactReturnType, StoryObj, addArgTypesEnhancer, addArgsEnhancer, addDecorator, addParameters,
|
|
287
|
+
export { ArgTypes, Args, ComponentMeta, ComponentStory, ComponentStoryFn, ComponentStoryObj, Meta, Parameters, ReactNativeFramework, Story, StoryContext, StoryFn, StoryFnReactReturnType, StoryObj, addArgTypesEnhancer, addArgsEnhancer, addDecorator, addParameters, configure, getStorybookUI, raw, storiesOf };
|
package/dist/index.js
CHANGED
|
@@ -33,13 +33,10 @@ __export(src_exports, {
|
|
|
33
33
|
addArgsEnhancer: () => addArgsEnhancer,
|
|
34
34
|
addDecorator: () => addDecorator,
|
|
35
35
|
addParameters: () => addParameters,
|
|
36
|
-
clearDecorators: () => clearDecorators,
|
|
37
36
|
configure: () => configure,
|
|
38
37
|
darkTheme: () => import_react_native_theming14.darkTheme,
|
|
39
|
-
getStorybook: () => getStorybook,
|
|
40
38
|
getStorybookUI: () => getStorybookUI,
|
|
41
39
|
raw: () => raw,
|
|
42
|
-
setAddon: () => setAddon,
|
|
43
40
|
storiesOf: () => storiesOf,
|
|
44
41
|
theme: () => import_react_native_theming14.theme
|
|
45
42
|
});
|
|
@@ -47,65 +44,12 @@ module.exports = __toCommonJS(src_exports);
|
|
|
47
44
|
|
|
48
45
|
// src/preview/start.tsx
|
|
49
46
|
var import_addons4 = require("@storybook/addons");
|
|
50
|
-
var
|
|
51
|
-
var import_client_api = require("@storybook/client-api");
|
|
47
|
+
var import_channels2 = __toESM(require("@storybook/channels"));
|
|
52
48
|
var import_core_events3 = __toESM(require("@storybook/core-events"));
|
|
49
|
+
var import_global = require("@storybook/global");
|
|
50
|
+
var import_preview_api = require("@storybook/preview-api");
|
|
53
51
|
var import_preview_web = require("@storybook/preview-web");
|
|
54
52
|
|
|
55
|
-
// src/preview/executeLoadable.ts
|
|
56
|
-
var import_client_logger = require("@storybook/client-logger");
|
|
57
|
-
function executeLoadable(loadable) {
|
|
58
|
-
let reqs = null;
|
|
59
|
-
if (Array.isArray(loadable)) {
|
|
60
|
-
reqs = loadable;
|
|
61
|
-
} else if (loadable.keys) {
|
|
62
|
-
reqs = [loadable];
|
|
63
|
-
}
|
|
64
|
-
let exportsMap = /* @__PURE__ */ new Map();
|
|
65
|
-
if (reqs) {
|
|
66
|
-
reqs.forEach((req) => {
|
|
67
|
-
req.keys().forEach((filename) => {
|
|
68
|
-
try {
|
|
69
|
-
const fileExports = req(filename);
|
|
70
|
-
exportsMap.set(
|
|
71
|
-
// NOTE context.resolve is not yet implemented for metro
|
|
72
|
-
// typeof req.resolve === 'function' ? req.resolve(filename) : filename,
|
|
73
|
-
filename,
|
|
74
|
-
fileExports
|
|
75
|
-
);
|
|
76
|
-
} catch (error) {
|
|
77
|
-
const errorString = error.message && error.stack ? `${error.message}
|
|
78
|
-
${error.stack}` : error.toString();
|
|
79
|
-
import_client_logger.logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
} else {
|
|
84
|
-
const exported = loadable();
|
|
85
|
-
if (typeof exported === "object") {
|
|
86
|
-
const csfExports = Object.entries(exported).filter(
|
|
87
|
-
([_key, value]) => value.default != null
|
|
88
|
-
);
|
|
89
|
-
exportsMap = new Map(csfExports.map(([filePath, fileExports]) => [filePath, fileExports]));
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
return exportsMap;
|
|
93
|
-
}
|
|
94
|
-
global.lastExportsMap = /* @__PURE__ */ new Map();
|
|
95
|
-
function executeLoadableForChanges(loadable, m) {
|
|
96
|
-
if (m?.hot?.accept) {
|
|
97
|
-
m.hot.accept();
|
|
98
|
-
}
|
|
99
|
-
const lastExportsMap = global.lastExportsMap;
|
|
100
|
-
const exportsMap = executeLoadable(loadable);
|
|
101
|
-
const added = /* @__PURE__ */ new Map();
|
|
102
|
-
Array.from(exportsMap.entries()).filter(([, fileExports]) => !!fileExports.default).filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports).forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
|
|
103
|
-
const removed = /* @__PURE__ */ new Map();
|
|
104
|
-
Array.from(lastExportsMap.keys()).filter((fileName) => !exportsMap.has(fileName)).forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
|
|
105
|
-
global.lastExportsMap = exportsMap;
|
|
106
|
-
return { added, removed };
|
|
107
|
-
}
|
|
108
|
-
|
|
109
53
|
// src/preview/View.tsx
|
|
110
54
|
var import_react14 = require("react");
|
|
111
55
|
var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
|
|
@@ -271,9 +215,9 @@ function BackgroundIcon({ name, ...props }) {
|
|
|
271
215
|
|
|
272
216
|
// src/preview/components/StoryListView/getNestedStories.ts
|
|
273
217
|
function getNestedStories(storyIndex) {
|
|
274
|
-
const stories = Object.values(storyIndex
|
|
218
|
+
const stories = Object.values(storyIndex?.entries ?? {});
|
|
275
219
|
const group = [];
|
|
276
|
-
stories
|
|
220
|
+
stories?.forEach((story) => {
|
|
277
221
|
const nameParts = story.title.split("/");
|
|
278
222
|
formGroup(nameParts, story, group);
|
|
279
223
|
});
|
|
@@ -656,22 +600,48 @@ var styles2 = import_react_native4.StyleSheet.create({
|
|
|
656
600
|
});
|
|
657
601
|
var absolute_positioned_keyboard_aware_view_default = import_react4.default.memo(AbsolutePositionedKeyboardAwareView);
|
|
658
602
|
|
|
603
|
+
// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
|
|
604
|
+
var import_react_native_theming11 = require("@storybook/react-native-theming");
|
|
605
|
+
var import_react_native14 = require("react-native");
|
|
606
|
+
var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
|
|
607
|
+
|
|
608
|
+
// src/preview/components/OnDeviceUI/Panel.tsx
|
|
609
|
+
var import_react5 = __toESM(require("react"));
|
|
610
|
+
var import_react_native5 = require("react-native");
|
|
611
|
+
var import_react_native_theming3 = require("@storybook/react-native-theming");
|
|
612
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
613
|
+
var Container = (0, import_react_native_theming3.styled)(import_react_native5.Animated.View)(({ theme: theme3, edge }) => ({
|
|
614
|
+
backgroundColor: theme3.panel.backgroundColor,
|
|
615
|
+
borderTopWidth: edge === "top" ? theme3.panel.borderWidth : void 0,
|
|
616
|
+
borderStartWidth: edge === "left" ? theme3.panel.borderWidth : void 0,
|
|
617
|
+
borderEndWidth: edge === "right" ? theme3.panel.borderWidth : void 0,
|
|
618
|
+
borderColor: theme3.panel.borderColor
|
|
619
|
+
}));
|
|
620
|
+
var Panel = ({ edge, children, style }) => {
|
|
621
|
+
const containerStyle = import_react_native5.StyleSheet.flatten([
|
|
622
|
+
edge === "top" ? void 0 : import_react_native5.StyleSheet.absoluteFillObject,
|
|
623
|
+
style
|
|
624
|
+
]);
|
|
625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { edge, style: containerStyle, children });
|
|
626
|
+
};
|
|
627
|
+
var Panel_default = import_react5.default.memo(Panel);
|
|
628
|
+
|
|
659
629
|
// src/preview/components/OnDeviceUI/addons/Addons.tsx
|
|
660
630
|
var import_addons2 = require("@storybook/addons");
|
|
661
|
-
var
|
|
662
|
-
var
|
|
663
|
-
var
|
|
631
|
+
var import_react_native_theming7 = require("@storybook/react-native-theming");
|
|
632
|
+
var import_react9 = __toESM(require("react"));
|
|
633
|
+
var import_react_native8 = require("react-native");
|
|
664
634
|
|
|
665
635
|
// src/preview/components/OnDeviceUI/addons/List.tsx
|
|
666
|
-
var
|
|
636
|
+
var import_react7 = __toESM(require("react"));
|
|
667
637
|
|
|
668
638
|
// src/preview/components/Shared/tabs.tsx
|
|
669
|
-
var
|
|
670
|
-
var
|
|
671
|
-
var import_react_native_theming3 = require("@storybook/react-native-theming");
|
|
639
|
+
var import_react6 = __toESM(require("react"));
|
|
640
|
+
var import_react_native6 = require("react-native");
|
|
672
641
|
var import_react_native_theming4 = require("@storybook/react-native-theming");
|
|
673
|
-
var
|
|
674
|
-
var
|
|
642
|
+
var import_react_native_theming5 = require("@storybook/react-native-theming");
|
|
643
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
644
|
+
var TabButtonText = import_react_native_theming4.styled.Text(({ theme: theme3, active }) => ({
|
|
675
645
|
color: active ? theme3.tabs.activeTextColor : theme3.tabs.inactiveTextColor,
|
|
676
646
|
paddingVertical: theme3.tabs.paddingVertical,
|
|
677
647
|
paddingHorizontal: theme3.tabs.paddingHorizontal,
|
|
@@ -679,14 +649,14 @@ var TabButtonText = import_react_native_theming3.styled.Text(({ theme: theme3, a
|
|
|
679
649
|
fontWeight: theme3.tabs.fontWeight
|
|
680
650
|
}));
|
|
681
651
|
var hitSlop = { top: 8, left: 0, right: 0, bottom: 20 };
|
|
682
|
-
var TabButtonTouchable =
|
|
652
|
+
var TabButtonTouchable = import_react_native_theming4.styled.TouchableOpacity(({ theme: theme3, active }) => ({
|
|
683
653
|
borderWidth: theme3.tabs.borderWidth,
|
|
684
654
|
borderColor: active ? theme3.tabs.activeBorderColor : theme3.tabs.inactiveBorderColor,
|
|
685
655
|
borderRadius: theme3.tabs.borderRadius,
|
|
686
656
|
backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tabs.inactiveBackgroundColor
|
|
687
657
|
}));
|
|
688
|
-
var TabButton =
|
|
689
|
-
return /* @__PURE__ */ (0,
|
|
658
|
+
var TabButton = import_react6.default.memo(({ onPress, id, active, children, testID }) => {
|
|
659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
690
660
|
TabButtonTouchable,
|
|
691
661
|
{
|
|
692
662
|
active,
|
|
@@ -694,15 +664,15 @@ var TabButton = import_react5.default.memo(({ onPress, id, active, children, tes
|
|
|
694
664
|
onPress: () => onPress(id),
|
|
695
665
|
activeOpacity: 0.8,
|
|
696
666
|
hitSlop,
|
|
697
|
-
children: /* @__PURE__ */ (0,
|
|
667
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TabButtonText, { active, children })
|
|
698
668
|
}
|
|
699
669
|
);
|
|
700
670
|
});
|
|
701
|
-
var TabBar =
|
|
702
|
-
const theme3 = (0,
|
|
671
|
+
var TabBar = import_react6.default.memo(({ scrollable = false, style, children }) => {
|
|
672
|
+
const theme3 = (0, import_react_native_theming5.useTheme)();
|
|
703
673
|
if (scrollable) {
|
|
704
|
-
children = /* @__PURE__ */ (0,
|
|
705
|
-
|
|
674
|
+
children = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
675
|
+
import_react_native6.ScrollView,
|
|
706
676
|
{
|
|
707
677
|
showsHorizontalScrollIndicator: false,
|
|
708
678
|
horizontal: true,
|
|
@@ -711,59 +681,62 @@ var TabBar = import_react5.default.memo(({ scrollable = false, style, children }
|
|
|
711
681
|
}
|
|
712
682
|
);
|
|
713
683
|
}
|
|
714
|
-
return /* @__PURE__ */ (0,
|
|
684
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TabBarContainer, { children }) });
|
|
715
685
|
});
|
|
716
|
-
var TabBarContainer =
|
|
686
|
+
var TabBarContainer = import_react_native_theming4.styled.View(() => ({
|
|
717
687
|
flexDirection: "row",
|
|
718
688
|
paddingVertical: 6,
|
|
719
689
|
justifyItems: "center"
|
|
720
690
|
}));
|
|
721
691
|
|
|
722
692
|
// src/preview/components/OnDeviceUI/addons/List.tsx
|
|
723
|
-
var
|
|
693
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
724
694
|
var AddonList = ({ panels, addonSelected, onPressAddon }) => {
|
|
725
695
|
const addonKeys = Object.keys(panels);
|
|
726
|
-
return /* @__PURE__ */ (0,
|
|
696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabBar, { scrollable: true, children: addonKeys.map((id) => {
|
|
727
697
|
const { title } = panels[id];
|
|
728
|
-
|
|
729
|
-
|
|
698
|
+
let resolvedTitle = typeof title === "function" ? title() : title;
|
|
699
|
+
if (typeof resolvedTitle === "string") {
|
|
700
|
+
resolvedTitle = resolvedTitle.toUpperCase();
|
|
701
|
+
}
|
|
702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
730
703
|
TabButton,
|
|
731
704
|
{
|
|
732
705
|
active: id === addonSelected,
|
|
733
706
|
id,
|
|
734
707
|
onPress: () => onPressAddon(id),
|
|
735
|
-
children: resolvedTitle
|
|
708
|
+
children: resolvedTitle
|
|
736
709
|
},
|
|
737
710
|
id
|
|
738
711
|
);
|
|
739
712
|
}) });
|
|
740
713
|
};
|
|
741
|
-
var List_default =
|
|
714
|
+
var List_default = import_react7.default.memo(AddonList);
|
|
742
715
|
|
|
743
716
|
// src/preview/components/OnDeviceUI/addons/Wrapper.tsx
|
|
744
|
-
var
|
|
745
|
-
var
|
|
746
|
-
var
|
|
747
|
-
var
|
|
748
|
-
var
|
|
717
|
+
var import_react_native_theming6 = require("@storybook/react-native-theming");
|
|
718
|
+
var import_react8 = __toESM(require("react"));
|
|
719
|
+
var import_react_native7 = require("react-native");
|
|
720
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
721
|
+
var Container2 = import_react_native_theming6.styled.View(({ selected }) => ({
|
|
749
722
|
display: selected ? "flex" : "none",
|
|
750
723
|
flex: 1
|
|
751
724
|
}));
|
|
752
725
|
var Wrapper = ({ panels, addonSelected }) => {
|
|
753
726
|
useUpdateOnStoryChanged();
|
|
754
|
-
const theme3 = (0,
|
|
727
|
+
const theme3 = (0, import_react_native_theming6.useTheme)();
|
|
755
728
|
const addonKeys = Object.keys(panels);
|
|
756
729
|
const content = addonKeys.map((id) => {
|
|
757
730
|
const selected = addonSelected === id;
|
|
758
|
-
return /* @__PURE__ */ (0,
|
|
731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Container2, { selected, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.ScrollView, { contentContainerStyle: { padding: theme3.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id);
|
|
759
732
|
});
|
|
760
|
-
return /* @__PURE__ */ (0,
|
|
733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: content });
|
|
761
734
|
};
|
|
762
|
-
var Wrapper_default =
|
|
735
|
+
var Wrapper_default = import_react8.default.memo(Wrapper);
|
|
763
736
|
|
|
764
737
|
// src/preview/components/OnDeviceUI/addons/Addons.tsx
|
|
765
|
-
var
|
|
766
|
-
var Text3 =
|
|
738
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
739
|
+
var Text3 = import_react_native_theming7.styled.Text(({ theme: theme3 }) => ({
|
|
767
740
|
marginTop: theme3.tokens.spacing4
|
|
768
741
|
}));
|
|
769
742
|
var Addons = ({ active }) => {
|
|
@@ -772,13 +745,13 @@ var Addons = ({ active }) => {
|
|
|
772
745
|
const context = useStoryContext();
|
|
773
746
|
const id = context?.id;
|
|
774
747
|
if (!id) {
|
|
775
|
-
return /* @__PURE__ */ (0,
|
|
748
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text3, { children: "No Story Selected" }) });
|
|
776
749
|
}
|
|
777
750
|
if (Object.keys(panels).length === 0) {
|
|
778
|
-
return /* @__PURE__ */ (0,
|
|
751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text3, { children: "No addons loaded." }) });
|
|
779
752
|
}
|
|
780
|
-
return /* @__PURE__ */ (0,
|
|
781
|
-
/* @__PURE__ */ (0,
|
|
753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
|
|
754
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
782
755
|
List_default,
|
|
783
756
|
{
|
|
784
757
|
onPressAddon: setAddonSelected,
|
|
@@ -786,32 +759,32 @@ var Addons = ({ active }) => {
|
|
|
786
759
|
addonSelected: active ? addonSelected : null
|
|
787
760
|
}
|
|
788
761
|
),
|
|
789
|
-
/* @__PURE__ */ (0,
|
|
762
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper_default, { addonSelected: active ? addonSelected : null, panels })
|
|
790
763
|
] });
|
|
791
764
|
};
|
|
792
|
-
var Addons_default =
|
|
765
|
+
var Addons_default = import_react9.default.memo(Addons);
|
|
793
766
|
|
|
794
767
|
// src/preview/components/OnDeviceUI/addons/AddonsSkeleton.tsx
|
|
795
|
-
var
|
|
796
|
-
var
|
|
797
|
-
var
|
|
798
|
-
var
|
|
799
|
-
var AddonsSkeleton =
|
|
800
|
-
const progress =
|
|
801
|
-
|
|
802
|
-
|
|
768
|
+
var import_react10 = __toESM(require("react"));
|
|
769
|
+
var import_react_native_theming8 = require("@storybook/react-native-theming");
|
|
770
|
+
var import_react_native9 = require("react-native");
|
|
771
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
772
|
+
var AddonsSkeleton = import_react10.default.memo(function AddonsSkeleton2({ visible }) {
|
|
773
|
+
const progress = import_react10.default.useRef(new import_react_native9.Animated.Value(visible ? 1 : 0));
|
|
774
|
+
import_react10.default.useEffect(() => {
|
|
775
|
+
import_react_native9.Animated.timing(progress.current, {
|
|
803
776
|
toValue: visible ? 1 : 0,
|
|
804
777
|
duration: ANIMATION_DURATION_TRANSITION,
|
|
805
778
|
useNativeDriver: true,
|
|
806
|
-
easing:
|
|
779
|
+
easing: import_react_native9.Easing.inOut(import_react_native9.Easing.cubic)
|
|
807
780
|
}).start();
|
|
808
781
|
}, [visible]);
|
|
809
|
-
return /* @__PURE__ */ (0,
|
|
810
|
-
/* @__PURE__ */ (0,
|
|
811
|
-
/* @__PURE__ */ (0,
|
|
782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(AddonsSkeletonContainer, { pointerEvents: "none", style: { opacity: progress.current }, children: [
|
|
783
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabsSkeleton, {}),
|
|
784
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsContentSkeleton, {})
|
|
812
785
|
] });
|
|
813
786
|
});
|
|
814
|
-
var TabSkeleton =
|
|
787
|
+
var TabSkeleton = import_react_native_theming8.styled.View(({ theme: theme3, active }) => ({
|
|
815
788
|
opacity: active ? 1 : 0.5,
|
|
816
789
|
backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tokens.color.grey200,
|
|
817
790
|
borderRadius: theme3.tokens.borderRadius.round,
|
|
@@ -819,7 +792,7 @@ var TabSkeleton = import_react_native_theming7.styled.View(({ theme: theme3, act
|
|
|
819
792
|
height: 30,
|
|
820
793
|
marginRight: 12
|
|
821
794
|
}));
|
|
822
|
-
var BoxSkeleton =
|
|
795
|
+
var BoxSkeleton = import_react_native_theming8.styled.View(
|
|
823
796
|
({ theme: theme3, width, height, marginBottom }) => ({
|
|
824
797
|
backgroundColor: theme3.tokens.color.blue200,
|
|
825
798
|
borderRadius: theme3.tokens.borderRadius.large,
|
|
@@ -829,29 +802,29 @@ var BoxSkeleton = import_react_native_theming7.styled.View(
|
|
|
829
802
|
})
|
|
830
803
|
);
|
|
831
804
|
function AddonsFieldSkeleton({ long = false }) {
|
|
832
|
-
return /* @__PURE__ */ (0,
|
|
833
|
-
/* @__PURE__ */ (0,
|
|
834
|
-
/* @__PURE__ */ (0,
|
|
805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: { marginBottom: 32 }, children: [
|
|
806
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
|
|
807
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BoxSkeleton, { width: long ? 200 : 120, height: 15 })
|
|
835
808
|
] });
|
|
836
809
|
}
|
|
837
810
|
function AddonsContentSkeleton() {
|
|
838
|
-
return /* @__PURE__ */ (0,
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
840
|
-
/* @__PURE__ */ (0,
|
|
841
|
-
/* @__PURE__ */ (0,
|
|
842
|
-
/* @__PURE__ */ (0,
|
|
811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
812
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, { long: true }),
|
|
813
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, { long: true }),
|
|
814
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, {}),
|
|
815
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddonsFieldSkeleton, {})
|
|
843
816
|
] });
|
|
844
817
|
}
|
|
845
818
|
function TabsSkeleton() {
|
|
846
|
-
return /* @__PURE__ */ (0,
|
|
847
|
-
/* @__PURE__ */ (0,
|
|
848
|
-
/* @__PURE__ */ (0,
|
|
849
|
-
/* @__PURE__ */ (0,
|
|
819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: { flexDirection: "row", marginBottom: 16 }, children: [
|
|
820
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabSkeleton, {}),
|
|
821
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabSkeleton, { active: true }),
|
|
822
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabSkeleton, {})
|
|
850
823
|
] });
|
|
851
824
|
}
|
|
852
|
-
var AddonsSkeletonContainer = (0,
|
|
825
|
+
var AddonsSkeletonContainer = (0, import_react_native_theming8.styled)(import_react_native9.Animated.View)(
|
|
853
826
|
({ theme: theme3 }) => ({
|
|
854
|
-
...
|
|
827
|
+
...import_react_native9.StyleSheet.absoluteFillObject,
|
|
855
828
|
flex: 1,
|
|
856
829
|
backgroundColor: theme3.panel.backgroundColor,
|
|
857
830
|
borderTopWidth: theme3.panel.borderWidth,
|
|
@@ -862,7 +835,7 @@ var AddonsSkeletonContainer = (0, import_react_native_theming7.styled)(import_re
|
|
|
862
835
|
);
|
|
863
836
|
|
|
864
837
|
// src/preview/components/OnDeviceUI/animation.ts
|
|
865
|
-
var
|
|
838
|
+
var import_react_native10 = require("react-native");
|
|
866
839
|
|
|
867
840
|
// src/preview/components/OnDeviceUI/navigation/constants.ts
|
|
868
841
|
var SIDEBAR = -1;
|
|
@@ -870,7 +843,7 @@ var CANVAS = 0;
|
|
|
870
843
|
var ADDONS = 1;
|
|
871
844
|
|
|
872
845
|
// src/preview/components/OnDeviceUI/animation.ts
|
|
873
|
-
var RTL_SCALE =
|
|
846
|
+
var RTL_SCALE = import_react_native10.I18nManager.isRTL ? -1 : 1;
|
|
874
847
|
var PREVIEW_SCALE = 0.3;
|
|
875
848
|
var PREVIEW_SCALE_WIDE = 0.7;
|
|
876
849
|
var PREVIEW_SCALE_SHRINK = 0.9;
|
|
@@ -965,23 +938,23 @@ var getPreviewShadowStyle = (animatedValue) => ({
|
|
|
965
938
|
});
|
|
966
939
|
|
|
967
940
|
// src/preview/components/OnDeviceUI/navigation/Navigation.tsx
|
|
968
|
-
var
|
|
969
|
-
var
|
|
941
|
+
var import_react12 = __toESM(require("react"));
|
|
942
|
+
var import_react_native12 = require("react-native");
|
|
970
943
|
var import_react_native_safe_area_context = require("react-native-safe-area-context");
|
|
971
944
|
var import_react_native_swipe_gestures = __toESM(require("react-native-swipe-gestures"));
|
|
972
945
|
|
|
973
946
|
// src/preview/components/OnDeviceUI/navigation/NavigationBar.tsx
|
|
974
|
-
var
|
|
975
|
-
var
|
|
976
|
-
var
|
|
977
|
-
var NavigationTabBar = (0,
|
|
947
|
+
var import_react11 = __toESM(require("react"));
|
|
948
|
+
var import_react_native_theming9 = require("@storybook/react-native-theming");
|
|
949
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
950
|
+
var NavigationTabBar = (0, import_react_native_theming9.styled)(TabBar)(({ theme: theme3 }) => ({
|
|
978
951
|
paddingHorizontal: theme3.tokens.spacing2,
|
|
979
952
|
backgroundColor: theme3.navigation.backgroundColor,
|
|
980
953
|
borderColor: theme3.navigation.borderColor,
|
|
981
954
|
borderTopWidth: theme3.navigation.borderWidth
|
|
982
955
|
}));
|
|
983
|
-
var NavigationBar =
|
|
984
|
-
/* @__PURE__ */ (0,
|
|
956
|
+
var NavigationBar = import_react11.default.memo(({ index, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(NavigationTabBar, { style, children: [
|
|
957
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
985
958
|
TabButton,
|
|
986
959
|
{
|
|
987
960
|
onPress,
|
|
@@ -991,20 +964,20 @@ var NavigationBar = import_react10.default.memo(({ index, onPress, style }) => /
|
|
|
991
964
|
children: "SIDEBAR"
|
|
992
965
|
}
|
|
993
966
|
),
|
|
994
|
-
/* @__PURE__ */ (0,
|
|
995
|
-
/* @__PURE__ */ (0,
|
|
967
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabButton, { onPress, testID: "BottomMenu.Canvas", id: CANVAS, active: index === CANVAS, children: "CANVAS" }),
|
|
968
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabButton, { onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS, children: "ADDONS" })
|
|
996
969
|
] }));
|
|
997
970
|
|
|
998
971
|
// src/preview/components/OnDeviceUI/navigation/NavigationButton.tsx
|
|
999
|
-
var
|
|
1000
|
-
var
|
|
972
|
+
var import_react_native11 = require("react-native");
|
|
973
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1001
974
|
var hitSlop2 = { top: 5, left: 5, right: 5, bottom: 5 };
|
|
1002
975
|
function NavigationButton({ iconName, inverseIconName, active, toggle }) {
|
|
1003
|
-
return /* @__PURE__ */ (0,
|
|
976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: { marginHorizontal: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BackgroundIcon, { style: { flex: 1, opacity: 0.8 }, name: inverseIconName, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: iconName, style: { opacity: active ? 0.6 : 0.25 } }) }) }) });
|
|
1004
977
|
}
|
|
1005
978
|
function VisibilityButton() {
|
|
1006
979
|
const [active, toggle] = useIsUIVisible();
|
|
1007
|
-
return /* @__PURE__ */ (0,
|
|
980
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1008
981
|
NavigationButton,
|
|
1009
982
|
{
|
|
1010
983
|
iconName: "layout-bottom",
|
|
@@ -1016,7 +989,7 @@ function VisibilityButton() {
|
|
|
1016
989
|
}
|
|
1017
990
|
function AddonsSplitButton() {
|
|
1018
991
|
const [active, toggle] = useIsSplitPanelVisible();
|
|
1019
|
-
return /* @__PURE__ */ (0,
|
|
992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1020
993
|
NavigationButton,
|
|
1021
994
|
{
|
|
1022
995
|
iconName: "layout-split",
|
|
@@ -1028,7 +1001,7 @@ function AddonsSplitButton() {
|
|
|
1028
1001
|
}
|
|
1029
1002
|
|
|
1030
1003
|
// src/preview/components/OnDeviceUI/navigation/Navigation.tsx
|
|
1031
|
-
var
|
|
1004
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1032
1005
|
var SWIPE_CONFIG = {
|
|
1033
1006
|
velocityThreshold: 0.2,
|
|
1034
1007
|
directionalOffsetThreshold: 80
|
|
@@ -1052,14 +1025,14 @@ var Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
|
|
|
1052
1025
|
}
|
|
1053
1026
|
};
|
|
1054
1027
|
const [isUIVisible] = useIsUIVisible();
|
|
1055
|
-
return /* @__PURE__ */ (0,
|
|
1056
|
-
/* @__PURE__ */ (0,
|
|
1028
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native12.View, { style: navStyle, onLayout, children: [
|
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { children: isUIVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1057
1030
|
import_react_native_swipe_gestures.default,
|
|
1058
1031
|
{
|
|
1059
1032
|
onSwipeLeft: handleSwipeLeft,
|
|
1060
1033
|
onSwipeRight: handleSwipeRight,
|
|
1061
1034
|
config: SWIPE_CONFIG,
|
|
1062
|
-
children: /* @__PURE__ */ (0,
|
|
1035
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1063
1036
|
NavigationBar,
|
|
1064
1037
|
{
|
|
1065
1038
|
index: tabOpen,
|
|
@@ -1069,17 +1042,17 @@ var Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
|
|
|
1069
1042
|
)
|
|
1070
1043
|
}
|
|
1071
1044
|
) }),
|
|
1072
|
-
/* @__PURE__ */ (0,
|
|
1073
|
-
/* @__PURE__ */ (0,
|
|
1074
|
-
/* @__PURE__ */ (0,
|
|
1045
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(NavigationShortcuts, { children: [
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VisibilityButton, {}),
|
|
1047
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsSplitButton, {})
|
|
1075
1048
|
] })
|
|
1076
1049
|
] });
|
|
1077
1050
|
};
|
|
1078
|
-
var Navigation_default =
|
|
1051
|
+
var Navigation_default = import_react12.default.memo(Navigation);
|
|
1079
1052
|
function NavigationShortcuts({ children }) {
|
|
1080
1053
|
const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
|
|
1081
|
-
return /* @__PURE__ */ (0,
|
|
1082
|
-
|
|
1054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1055
|
+
import_react_native12.View,
|
|
1083
1056
|
{
|
|
1084
1057
|
style: {
|
|
1085
1058
|
zIndex: 100,
|
|
@@ -1096,31 +1069,7 @@ function NavigationShortcuts({ children }) {
|
|
|
1096
1069
|
);
|
|
1097
1070
|
}
|
|
1098
1071
|
|
|
1099
|
-
// src/preview/components/OnDeviceUI/Panel.tsx
|
|
1100
|
-
var import_react12 = __toESM(require("react"));
|
|
1101
|
-
var import_react_native12 = require("react-native");
|
|
1102
|
-
var import_react_native_theming9 = require("@storybook/react-native-theming");
|
|
1103
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1104
|
-
var Container2 = (0, import_react_native_theming9.styled)(import_react_native12.Animated.View)(({ theme: theme3, edge }) => ({
|
|
1105
|
-
backgroundColor: theme3.panel.backgroundColor,
|
|
1106
|
-
borderTopWidth: edge === "top" ? theme3.panel.borderWidth : void 0,
|
|
1107
|
-
borderStartWidth: edge === "left" ? theme3.panel.borderWidth : void 0,
|
|
1108
|
-
borderEndWidth: edge === "right" ? theme3.panel.borderWidth : void 0,
|
|
1109
|
-
borderColor: theme3.panel.borderColor
|
|
1110
|
-
}));
|
|
1111
|
-
var Panel = ({ edge, children, style }) => {
|
|
1112
|
-
const containerStyle = import_react_native12.StyleSheet.flatten([
|
|
1113
|
-
edge === "top" ? void 0 : import_react_native12.StyleSheet.absoluteFillObject,
|
|
1114
|
-
style
|
|
1115
|
-
]);
|
|
1116
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Container2, { edge, style: containerStyle, children });
|
|
1117
|
-
};
|
|
1118
|
-
var Panel_default = import_react12.default.memo(Panel);
|
|
1119
|
-
|
|
1120
1072
|
// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
|
|
1121
|
-
var import_react_native14 = require("react-native");
|
|
1122
|
-
var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
|
|
1123
|
-
var import_react_native_theming11 = require("@storybook/react-native-theming");
|
|
1124
1073
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1125
1074
|
var IS_IOS = import_react_native13.Platform.OS === "ios";
|
|
1126
1075
|
var getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
|
|
@@ -1276,7 +1225,7 @@ var OnDeviceUI_default = import_react13.default.memo(OnDeviceUI);
|
|
|
1276
1225
|
|
|
1277
1226
|
// src/preview/View.tsx
|
|
1278
1227
|
var import_react_native_theming13 = require("@storybook/react-native-theming");
|
|
1279
|
-
var
|
|
1228
|
+
var import_channels = require("@storybook/channels");
|
|
1280
1229
|
|
|
1281
1230
|
// src/preview/rn-host-detect.js
|
|
1282
1231
|
function getByRemoteConfig(hostname) {
|
|
@@ -1375,7 +1324,7 @@ var View10 = class {
|
|
|
1375
1324
|
const query = params.query || "";
|
|
1376
1325
|
const websocketType = params.secured ? "wss" : "ws";
|
|
1377
1326
|
const url = `${websocketType}://${host}${port}/${query}`;
|
|
1378
|
-
return (0,
|
|
1327
|
+
return (0, import_channels.createWebSocketChannel)({
|
|
1379
1328
|
url,
|
|
1380
1329
|
async: true,
|
|
1381
1330
|
onError: async () => {
|
|
@@ -1399,6 +1348,7 @@ var View10 = class {
|
|
|
1399
1348
|
getSelection: () => {
|
|
1400
1349
|
return this._preview.currentSelection;
|
|
1401
1350
|
},
|
|
1351
|
+
// @ts-ignore :) FIXME
|
|
1402
1352
|
_channel: this._preview.channel
|
|
1403
1353
|
})
|
|
1404
1354
|
});
|
|
@@ -1426,7 +1376,7 @@ var View10 = class {
|
|
|
1426
1376
|
};
|
|
1427
1377
|
self._forceRerender = () => forceUpdate();
|
|
1428
1378
|
initialStory.then((story) => {
|
|
1429
|
-
self._preview.
|
|
1379
|
+
self._preview.selectionStore.selectionSpecifier = story;
|
|
1430
1380
|
self._preview.selectSpecifiedStory();
|
|
1431
1381
|
});
|
|
1432
1382
|
}, []);
|
|
@@ -1447,8 +1397,67 @@ var View10 = class {
|
|
|
1447
1397
|
};
|
|
1448
1398
|
};
|
|
1449
1399
|
|
|
1400
|
+
// src/preview/executeLoadable.ts
|
|
1401
|
+
var import_client_logger = require("@storybook/client-logger");
|
|
1402
|
+
function executeLoadable(loadable) {
|
|
1403
|
+
let reqs = null;
|
|
1404
|
+
if (Array.isArray(loadable)) {
|
|
1405
|
+
reqs = loadable;
|
|
1406
|
+
} else if (loadable.keys) {
|
|
1407
|
+
reqs = [loadable];
|
|
1408
|
+
}
|
|
1409
|
+
let exportsMap = /* @__PURE__ */ new Map();
|
|
1410
|
+
if (reqs) {
|
|
1411
|
+
reqs.forEach((req) => {
|
|
1412
|
+
req.keys().forEach((filename) => {
|
|
1413
|
+
try {
|
|
1414
|
+
const fileExports = req(filename);
|
|
1415
|
+
if (fileExports.default) {
|
|
1416
|
+
exportsMap.set(
|
|
1417
|
+
// NOTE context.resolve is not yet implemented for metro
|
|
1418
|
+
// typeof req.resolve === 'function' ? req.resolve(filename) : filename,
|
|
1419
|
+
filename,
|
|
1420
|
+
fileExports
|
|
1421
|
+
);
|
|
1422
|
+
}
|
|
1423
|
+
} catch (error) {
|
|
1424
|
+
const errorString = error.message && error.stack ? `${error.message}
|
|
1425
|
+
${error.stack}` : error.toString();
|
|
1426
|
+
import_client_logger.logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
|
|
1427
|
+
}
|
|
1428
|
+
});
|
|
1429
|
+
});
|
|
1430
|
+
} else {
|
|
1431
|
+
const exported = loadable();
|
|
1432
|
+
if (typeof exported === "object") {
|
|
1433
|
+
const csfExports = Object.entries(exported).filter(
|
|
1434
|
+
([_key, value]) => value.default != null
|
|
1435
|
+
);
|
|
1436
|
+
exportsMap = new Map(csfExports.map(([filePath, fileExports]) => [filePath, fileExports]));
|
|
1437
|
+
}
|
|
1438
|
+
}
|
|
1439
|
+
return exportsMap;
|
|
1440
|
+
}
|
|
1441
|
+
global.lastExportsMap = /* @__PURE__ */ new Map();
|
|
1442
|
+
function executeLoadableForChanges(loadable, m) {
|
|
1443
|
+
if (m?.hot?.accept) {
|
|
1444
|
+
m.hot.accept();
|
|
1445
|
+
}
|
|
1446
|
+
const lastExportsMap = global.lastExportsMap;
|
|
1447
|
+
const exportsMap = executeLoadable(loadable);
|
|
1448
|
+
const added = /* @__PURE__ */ new Map();
|
|
1449
|
+
Array.from(exportsMap.entries()).filter(([, fileExports]) => !!fileExports.default).filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports).forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
|
|
1450
|
+
const removed = /* @__PURE__ */ new Map();
|
|
1451
|
+
Array.from(lastExportsMap.keys()).filter((fileName) => !exportsMap.has(fileName)).forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
|
|
1452
|
+
global.lastExportsMap = exportsMap;
|
|
1453
|
+
return { added, removed };
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1450
1456
|
// src/preview/start.tsx
|
|
1451
1457
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1458
|
+
import_global.global.FEATURES = {
|
|
1459
|
+
storyStoreV7: false
|
|
1460
|
+
};
|
|
1452
1461
|
var render = (args, context) => {
|
|
1453
1462
|
const { id, component: Component } = context;
|
|
1454
1463
|
if (!Component) {
|
|
@@ -1459,11 +1468,13 @@ var render = (args, context) => {
|
|
|
1459
1468
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component, { ...args });
|
|
1460
1469
|
};
|
|
1461
1470
|
function start() {
|
|
1462
|
-
const channel = new
|
|
1471
|
+
const channel = new import_channels2.default({ async: true });
|
|
1463
1472
|
import_addons4.addons.setChannel(channel);
|
|
1464
|
-
const clientApi2 = new
|
|
1473
|
+
const clientApi2 = new import_preview_api.ClientApi();
|
|
1465
1474
|
const previewView = {
|
|
1466
|
-
prepareForStory: () =>
|
|
1475
|
+
prepareForStory: () => {
|
|
1476
|
+
return {};
|
|
1477
|
+
},
|
|
1467
1478
|
showNoPreview: () => {
|
|
1468
1479
|
},
|
|
1469
1480
|
showPreparingStory: () => {
|
|
@@ -1500,12 +1511,18 @@ function start() {
|
|
|
1500
1511
|
setQueryParams: () => {
|
|
1501
1512
|
},
|
|
1502
1513
|
setSelection: (selection) => {
|
|
1503
|
-
preview.
|
|
1514
|
+
preview.selectionStore.selection = selection;
|
|
1504
1515
|
}
|
|
1505
1516
|
};
|
|
1506
|
-
const preview = new import_preview_web.
|
|
1517
|
+
const preview = new import_preview_web.PreviewWithSelection(urlStore, previewView);
|
|
1507
1518
|
clientApi2.storyStore = preview.storyStore;
|
|
1508
|
-
(
|
|
1519
|
+
if (import_global.global) {
|
|
1520
|
+
import_global.global.__STORYBOOK_CLIENT_API__ = clientApi2;
|
|
1521
|
+
import_global.global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
|
|
1522
|
+
import_global.global.__STORYBOOK_PREVIEW__ = preview;
|
|
1523
|
+
import_global.global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
|
|
1524
|
+
}
|
|
1525
|
+
(0, import_preview_api.setGlobalRender)(render);
|
|
1509
1526
|
let initialized = false;
|
|
1510
1527
|
function onStoriesChanged() {
|
|
1511
1528
|
const storyIndex = clientApi2.getStoryIndex();
|
|
@@ -1521,9 +1538,10 @@ function start() {
|
|
|
1521
1538
|
// This gets called each time the user calls configure (i.e. once per HMR)
|
|
1522
1539
|
// The first time, it constructs thecurrentSelection preview, subsequently it updates it
|
|
1523
1540
|
configure(loadable, m) {
|
|
1524
|
-
clientApi2.addParameters({
|
|
1541
|
+
clientApi2.addParameters({ renderer: "react-native" });
|
|
1525
1542
|
const getProjectAnnotations = () => {
|
|
1526
1543
|
const { added, removed } = executeLoadableForChanges(loadable, m);
|
|
1544
|
+
clientApi2._loadAddedExports();
|
|
1527
1545
|
Array.from(added.entries()).forEach(
|
|
1528
1546
|
([fileName, fileExports]) => clientApi2.facade.addStoriesFromExports(fileName, fileExports)
|
|
1529
1547
|
);
|
|
@@ -1532,7 +1550,7 @@ function start() {
|
|
|
1532
1550
|
);
|
|
1533
1551
|
return {
|
|
1534
1552
|
...clientApi2.facade.projectAnnotations,
|
|
1535
|
-
|
|
1553
|
+
renderToCanvas: (context) => {
|
|
1536
1554
|
view2._setStory(context.storyContext);
|
|
1537
1555
|
}
|
|
1538
1556
|
};
|
|
@@ -1561,18 +1579,16 @@ function start() {
|
|
|
1561
1579
|
var import_react_native_theming14 = require("@storybook/react-native-theming");
|
|
1562
1580
|
var { clientApi, configure, view } = start();
|
|
1563
1581
|
var rawStoriesOf = clientApi.storiesOf.bind(clientApi);
|
|
1564
|
-
var setAddon = clientApi.setAddon.bind(clientApi);
|
|
1565
1582
|
var addDecorator = clientApi.addDecorator.bind(clientApi);
|
|
1566
1583
|
var addParameters = clientApi.addParameters.bind(clientApi);
|
|
1567
1584
|
var addArgsEnhancer = clientApi.addArgsEnhancer.bind(clientApi);
|
|
1568
1585
|
var addArgTypesEnhancer = clientApi.addArgTypesEnhancer.bind(clientApi);
|
|
1569
|
-
var clearDecorators = clientApi.clearDecorators.bind(clientApi);
|
|
1570
|
-
var getStorybook = clientApi.getStorybook.bind(clientApi);
|
|
1571
1586
|
var raw = clientApi.raw.bind(clientApi);
|
|
1572
|
-
var storiesOf = (kind,
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
});
|
|
1587
|
+
var storiesOf = (kind, m) => {
|
|
1588
|
+
return rawStoriesOf(kind, m).addParameters({
|
|
1589
|
+
renderer: "react-native"
|
|
1590
|
+
});
|
|
1591
|
+
};
|
|
1576
1592
|
var getStorybookUI = view.getStorybookUI;
|
|
1577
1593
|
global.__STORYBOOK_STORY_STORE__ = {
|
|
1578
1594
|
initializationPromise: clientApi.storyStore?.initializationPromise
|
|
@@ -1583,13 +1599,10 @@ global.__STORYBOOK_STORY_STORE__ = {
|
|
|
1583
1599
|
addArgsEnhancer,
|
|
1584
1600
|
addDecorator,
|
|
1585
1601
|
addParameters,
|
|
1586
|
-
clearDecorators,
|
|
1587
1602
|
configure,
|
|
1588
1603
|
darkTheme,
|
|
1589
|
-
getStorybook,
|
|
1590
1604
|
getStorybookUI,
|
|
1591
1605
|
raw,
|
|
1592
|
-
setAddon,
|
|
1593
1606
|
storiesOf,
|
|
1594
1607
|
theme
|
|
1595
1608
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/react-native",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0-alpha.1",
|
|
4
4
|
"description": "A better way to develop React Native Components for your app",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -51,16 +51,17 @@
|
|
|
51
51
|
"preset": "react-native"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@storybook/addons": "^
|
|
55
|
-
"@storybook/channel-websocket": "^
|
|
56
|
-
"@storybook/channels": "^
|
|
57
|
-
"@storybook/client-
|
|
58
|
-
"@storybook/client
|
|
59
|
-
"@storybook/core-
|
|
60
|
-
"@storybook/
|
|
61
|
-
"@storybook/
|
|
62
|
-
"@storybook/preview-
|
|
63
|
-
"@storybook/
|
|
54
|
+
"@storybook/addons": "^7",
|
|
55
|
+
"@storybook/channel-websocket": "^7",
|
|
56
|
+
"@storybook/channels": "^7",
|
|
57
|
+
"@storybook/client-logger": "^7",
|
|
58
|
+
"@storybook/core-client": "^7",
|
|
59
|
+
"@storybook/core-events": "^7",
|
|
60
|
+
"@storybook/csf": "^0.1.1",
|
|
61
|
+
"@storybook/global": "^5.0.0",
|
|
62
|
+
"@storybook/preview-api": "^7",
|
|
63
|
+
"@storybook/preview-web": "^7",
|
|
64
|
+
"@storybook/react-native-theming": "^7.0.0-alpha.1",
|
|
64
65
|
"chokidar": "^3.5.1",
|
|
65
66
|
"commander": "^8.2.0",
|
|
66
67
|
"deepmerge": "^4.3.0",
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"util": "^0.12.4"
|
|
72
73
|
},
|
|
73
74
|
"devDependencies": {
|
|
75
|
+
"@storybook/types": "^7",
|
|
74
76
|
"@types/jest": "^29.4.3",
|
|
75
77
|
"@types/react": "~18.2.14",
|
|
76
78
|
"babel-jest": "^29.4.3",
|
|
@@ -92,5 +94,5 @@
|
|
|
92
94
|
"publishConfig": {
|
|
93
95
|
"access": "public"
|
|
94
96
|
},
|
|
95
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "6e257261ea4c4f47adfbef7e1afc4fe3fe4e12bf"
|
|
96
98
|
}
|
|
@@ -13,20 +13,12 @@ import "@storybook/addon-ondevice-controls/register";
|
|
|
13
13
|
import "@storybook/addon-ondevice-backgrounds/register";
|
|
14
14
|
import "@storybook/addon-ondevice-actions/register";
|
|
15
15
|
|
|
16
|
-
import { argsEnhancers } from "@storybook/addon-actions/dist/
|
|
16
|
+
import { argsEnhancers } from "@storybook/addon-actions/dist/preview"
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
import { decorators, parameters } from './preview';
|
|
20
20
|
|
|
21
21
|
if (decorators) {
|
|
22
|
-
if(__DEV__){
|
|
23
|
-
// stops the warning from showing on every HMR
|
|
24
|
-
require('react-native').LogBox.ignoreLogs([
|
|
25
|
-
'\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
|
|
26
|
-
]);
|
|
27
|
-
}
|
|
28
|
-
// workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
|
|
29
|
-
clearDecorators();
|
|
30
22
|
decorators.forEach((decorator) => addDecorator(decorator));
|
|
31
23
|
}
|
|
32
24
|
|
|
@@ -65,20 +57,12 @@ import "@storybook/addon-ondevice-controls/register";
|
|
|
65
57
|
import "@storybook/addon-ondevice-backgrounds/register";
|
|
66
58
|
import "@storybook/addon-ondevice-actions/register";
|
|
67
59
|
|
|
68
|
-
import { argsEnhancers } from "@storybook/addon-actions/dist/
|
|
60
|
+
import { argsEnhancers } from "@storybook/addon-actions/dist/preview"
|
|
69
61
|
|
|
70
62
|
|
|
71
63
|
import { decorators, parameters } from './preview';
|
|
72
64
|
|
|
73
65
|
if (decorators) {
|
|
74
|
-
if(__DEV__){
|
|
75
|
-
// stops the warning from showing on every HMR
|
|
76
|
-
require('react-native').LogBox.ignoreLogs([
|
|
77
|
-
'\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
|
|
78
|
-
]);
|
|
79
|
-
}
|
|
80
|
-
// workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
|
|
81
|
-
clearDecorators();
|
|
82
66
|
decorators.forEach((decorator) => addDecorator(decorator));
|
|
83
67
|
}
|
|
84
68
|
|
|
@@ -117,20 +101,12 @@ import "@storybook/addon-ondevice-controls/register";
|
|
|
117
101
|
import "@storybook/addon-ondevice-backgrounds/register";
|
|
118
102
|
import "@storybook/addon-ondevice-actions/register";
|
|
119
103
|
|
|
120
|
-
import { argsEnhancers } from "@storybook/addon-actions/dist/
|
|
104
|
+
import { argsEnhancers } from "@storybook/addon-actions/dist/preview"
|
|
121
105
|
|
|
122
106
|
|
|
123
107
|
import { decorators, parameters } from './preview';
|
|
124
108
|
|
|
125
109
|
if (decorators) {
|
|
126
|
-
if(__DEV__){
|
|
127
|
-
// stops the warning from showing on every HMR
|
|
128
|
-
require('react-native').LogBox.ignoreLogs([
|
|
129
|
-
'\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
|
|
130
|
-
]);
|
|
131
|
-
}
|
|
132
|
-
// workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
|
|
133
|
-
clearDecorators();
|
|
134
110
|
decorators.forEach((decorator) => addDecorator(decorator));
|
|
135
111
|
}
|
|
136
112
|
|
|
@@ -169,20 +145,12 @@ import "@storybook/addon-ondevice-controls/register";
|
|
|
169
145
|
import "@storybook/addon-ondevice-backgrounds/register";
|
|
170
146
|
import "@storybook/addon-ondevice-actions/register";
|
|
171
147
|
|
|
172
|
-
import { argsEnhancers } from "@storybook/addon-actions/dist/
|
|
148
|
+
import { argsEnhancers } from "@storybook/addon-actions/dist/preview"
|
|
173
149
|
|
|
174
150
|
|
|
175
151
|
import { decorators, parameters } from './preview';
|
|
176
152
|
|
|
177
153
|
if (decorators) {
|
|
178
|
-
if(__DEV__){
|
|
179
|
-
// stops the warning from showing on every HMR
|
|
180
|
-
require('react-native').LogBox.ignoreLogs([
|
|
181
|
-
'\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
|
|
182
|
-
]);
|
|
183
|
-
}
|
|
184
|
-
// workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
|
|
185
|
-
clearDecorators();
|
|
186
154
|
decorators.forEach((decorator) => addDecorator(decorator));
|
|
187
155
|
}
|
|
188
156
|
|
|
@@ -221,7 +189,7 @@ import "@storybook/addon-ondevice-controls/register";
|
|
|
221
189
|
import "@storybook/addon-ondevice-backgrounds/register";
|
|
222
190
|
import "@storybook/addon-ondevice-actions/register";
|
|
223
191
|
|
|
224
|
-
import { argsEnhancers } from "@storybook/addon-actions/dist/
|
|
192
|
+
import { argsEnhancers } from "@storybook/addon-actions/dist/preview"
|
|
225
193
|
|
|
226
194
|
|
|
227
195
|
|
package/scripts/loader.js
CHANGED
|
@@ -2,24 +2,32 @@ const path = require('path');
|
|
|
2
2
|
const fs = require('fs');
|
|
3
3
|
const glob = require('glob');
|
|
4
4
|
const prettier = require('prettier');
|
|
5
|
-
const { normalizeStories,
|
|
5
|
+
const { normalizeStories, globToRegexp } = require('@storybook/core-common');
|
|
6
|
+
|
|
7
|
+
const toRequireContext = (specifier) => {
|
|
8
|
+
const { directory, files } = specifier;
|
|
9
|
+
|
|
10
|
+
// The importPathMatcher is a `./`-prefixed matcher that includes the directory
|
|
11
|
+
// For `require.context()` we want the same thing, relative to directory
|
|
12
|
+
const match = globToRegexp(`./${files}`);
|
|
13
|
+
|
|
14
|
+
return {
|
|
15
|
+
path: directory,
|
|
16
|
+
recursive: files.includes('**') || files.split('/').length > 1,
|
|
17
|
+
match,
|
|
18
|
+
};
|
|
19
|
+
};
|
|
6
20
|
|
|
7
21
|
const cwd = process.cwd();
|
|
8
22
|
const supportedExtensions = ['js', 'jsx', 'ts', 'tsx', 'cjs', 'mjs'];
|
|
9
23
|
|
|
24
|
+
// TODO check if we need clearDecorators();
|
|
25
|
+
|
|
10
26
|
// we clear decorators as a workaround for global decorators getting infinitely applied on HMR
|
|
11
27
|
const previewImports = `
|
|
12
28
|
import { decorators, parameters } from './preview';
|
|
13
29
|
|
|
14
30
|
if (decorators) {
|
|
15
|
-
if(__DEV__){
|
|
16
|
-
// stops the warning from showing on every HMR
|
|
17
|
-
require('react-native').LogBox.ignoreLogs([
|
|
18
|
-
'\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
|
|
19
|
-
]);
|
|
20
|
-
}
|
|
21
|
-
// workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
|
|
22
|
-
clearDecorators();
|
|
23
31
|
decorators.forEach((decorator) => addDecorator(decorator));
|
|
24
32
|
}
|
|
25
33
|
|
|
@@ -104,8 +112,10 @@ function writeRequires({ configPath, absolute = false, unstable_useRequireContex
|
|
|
104
112
|
if (unstable_useRequireContext) {
|
|
105
113
|
const contexts = storiesSpecifiers.map((specifier) => {
|
|
106
114
|
const { path: p, recursive: r, match: m } = toRequireContext(specifier);
|
|
107
|
-
|
|
108
|
-
|
|
115
|
+
|
|
116
|
+
const pathToStory = ensureRelativePathHasDot(path.relative(configPath, p));
|
|
117
|
+
|
|
118
|
+
return `require.context('${pathToStory}', ${r}, ${m})`;
|
|
109
119
|
});
|
|
110
120
|
|
|
111
121
|
configure = `
|
|
@@ -169,8 +179,7 @@ function writeRequires({ configPath, absolute = false, unstable_useRequireContex
|
|
|
169
179
|
|
|
170
180
|
// TODO: implement presets or something similar
|
|
171
181
|
if (main.addons?.includes('@storybook/addon-ondevice-actions')) {
|
|
172
|
-
enhancersImport =
|
|
173
|
-
'import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"';
|
|
182
|
+
enhancersImport = 'import { argsEnhancers } from "@storybook/addon-actions/dist/preview"';
|
|
174
183
|
|
|
175
184
|
// try/catch is a temporary fix for https://github.com/storybookjs/react-native/issues/327 until a fix is found
|
|
176
185
|
enhancers = `
|
|
@@ -180,10 +189,7 @@ function writeRequires({ configPath, absolute = false, unstable_useRequireContex
|
|
|
180
189
|
`;
|
|
181
190
|
}
|
|
182
191
|
|
|
183
|
-
const normalizedStories =
|
|
184
|
-
configDir: configPath,
|
|
185
|
-
workingDir: cwd,
|
|
186
|
-
}).map((specifier) => ({
|
|
192
|
+
const normalizedStories = storiesSpecifiers.map((specifier) => ({
|
|
187
193
|
...specifier,
|
|
188
194
|
importPathMatcher: specifier.importPathMatcher.source,
|
|
189
195
|
}));
|
|
@@ -193,7 +199,7 @@ function writeRequires({ configPath, absolute = false, unstable_useRequireContex
|
|
|
193
199
|
const fileContent = `
|
|
194
200
|
/* do not change this file, it is auto generated by storybook. */
|
|
195
201
|
|
|
196
|
-
import { configure, addDecorator, addParameters, addArgsEnhancer
|
|
202
|
+
import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
|
|
197
203
|
|
|
198
204
|
${globalStories}
|
|
199
205
|
|