@storybook/react-native
Version:
A better way to develop React Native Components for your app
890 lines (867 loc) • 77 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
addArgTypesEnhancer: () => addArgTypesEnhancer,
addArgsEnhancer: () => addArgsEnhancer,
addDecorator: () => addDecorator,
addParameters: () => addParameters,
clearDecorators: () => clearDecorators,
configure: () => configure,
darkTheme: () => import_react_native_theming14.darkTheme,
getStorybook: () => getStorybook,
getStorybookUI: () => getStorybookUI,
raw: () => raw,
setAddon: () => setAddon,
storiesOf: () => storiesOf,
theme: () => import_react_native_theming14.theme
});
module.exports = __toCommonJS(src_exports);
// src/preview/start.tsx
var import_addons4 = require("@storybook/addons");
var import_channels = __toESM(require("@storybook/channels"));
var import_client_api = require("@storybook/client-api");
var import_core_events3 = __toESM(require("@storybook/core-events"));
var import_preview_web = require("@storybook/preview-web");
// src/preview/executeLoadable.ts
var import_client_logger = require("@storybook/client-logger");
function executeLoadable(loadable) {
let reqs = null;
if (Array.isArray(loadable)) {
reqs = loadable;
} else if (loadable.keys) {
reqs = [loadable];
}
let exportsMap = /* @__PURE__ */ new Map();
if (reqs) {
reqs.forEach((req) => {
req.keys().forEach((filename) => {
try {
const fileExports = req(filename);
exportsMap.set(
// NOTE context.resolve is not yet implemented for metro
// typeof req.resolve === 'function' ? req.resolve(filename) : filename,
filename,
fileExports
);
} catch (error) {
const errorString = error.message && error.stack ? `${error.message}
${error.stack}` : error.toString();
import_client_logger.logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
}
});
});
} else {
const exported = loadable();
if (typeof exported === "object") {
const csfExports = Object.entries(exported).filter(
([_key, value]) => value.default != null
);
exportsMap = new Map(csfExports.map(([filePath, fileExports]) => [filePath, fileExports]));
}
}
return exportsMap;
}
global.lastExportsMap = /* @__PURE__ */ new Map();
function executeLoadableForChanges(loadable, m) {
if (m?.hot?.accept) {
m.hot.accept();
}
const lastExportsMap = global.lastExportsMap;
const exportsMap = executeLoadable(loadable);
const added = /* @__PURE__ */ new Map();
Array.from(exportsMap.entries()).filter(([, fileExports]) => !!fileExports.default).filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports).forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
const removed = /* @__PURE__ */ new Map();
Array.from(lastExportsMap.keys()).filter((fileName) => !exportsMap.has(fileName)).forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
global.lastExportsMap = exportsMap;
return { added, removed };
}
// src/preview/View.tsx
var import_react14 = require("react");
var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
var import_csf = require("@storybook/csf");
var import_addons3 = require("@storybook/addons");
var import_react_native_theming12 = require("@storybook/react-native-theming");
var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
// src/hooks.tsx
var import_react = __toESM(require("react"));
var import_jotai = require("jotai");
var storyContextAtom = (0, import_jotai.atom)(null);
function useSetStoryContext() {
return (0, import_jotai.useSetAtom)(storyContextAtom);
}
function useStoryContext() {
return (0, import_jotai.useAtomValue)(storyContextAtom);
}
function useStoryContextParam(name, defaultValue) {
const paramAtom = (0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.parameters?.[name]), [name]);
return (0, import_jotai.useAtomValue)(paramAtom) ?? defaultValue;
}
function useIsStorySelected(storyId) {
return (0, import_jotai.useAtomValue)(
(0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.id === storyId), [storyId])
);
}
function useIsStorySectionSelected(title) {
return (0, import_jotai.useAtomValue)(
(0, import_react.useMemo)(
() => (0, import_jotai.atom)((get) => {
const contextTitle = get(storyContextAtom)?.title;
return contextTitle === title || contextTitle?.startsWith(`${title}/`);
}),
[title]
)
);
}
function useIsChildSelected(entries) {
return (0, import_jotai.useAtomValue)(
(0, import_react.useMemo)(
() => (0, import_jotai.atom)((get) => {
const contextId = get(storyContextAtom)?.id;
return !!entries.find(({ id }) => id === contextId);
}),
[entries]
)
);
}
function useUpdateOnStoryChanged() {
(0, import_jotai.useAtomValue)((0, import_react.useMemo)(() => (0, import_jotai.atom)((get) => get(storyContextAtom)?.id), []));
}
function atomWithToggle(initialValue) {
const anAtom = (0, import_jotai.atom)(initialValue, (get, set, nextValue) => {
const update = nextValue ?? !get(anAtom);
set(anAtom, update);
});
return anAtom;
}
var isUIVisibleAtom = atomWithToggle(true);
function useIsUIVisible() {
return (0, import_jotai.useAtom)(isUIVisibleAtom);
}
var isSplitPanelVisibleAtom = atomWithToggle(false);
function useIsSplitPanelVisible() {
return (0, import_jotai.useAtom)(isSplitPanelVisibleAtom);
}
function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
const jotaiStore = (0, import_jotai.getDefaultStore)();
if (isUIVisible !== void 0) {
jotaiStore.set(isUIVisibleAtom, isUIVisible);
}
if (isSplitPanelVisible !== void 0) {
jotaiStore.set(isSplitPanelVisibleAtom, isSplitPanelVisible);
}
}
var selectedAddonAtom = (0, import_jotai.atom)(void 0);
function useSelectedAddon(initialValue) {
const result = (0, import_jotai.useAtom)(selectedAddonAtom);
const set = result[1];
import_react.default.useEffect(() => {
const jotaiStore = (0, import_jotai.getDefaultStore)();
if (jotaiStore.get(selectedAddonAtom) === void 0) {
set(initialValue);
}
}, []);
return result;
}
// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
var import_react_native_theming10 = require("@storybook/react-native-theming");
var import_react13 = __toESM(require("react"));
var import_react_native13 = require("react-native");
// src/constants.ts
var ANIMATION_DURATION_TRANSITION = 400;
// src/preview/components/StoryListView/StoryListView.tsx
var import_addons = require("@storybook/addons");
var import_core_events = __toESM(require("@storybook/core-events"));
var import_react_native_theming = require("@storybook/react-native-theming");
var import_react2 = __toESM(require("react"));
var import_react_native2 = require("react-native");
// src/preview/components/Shared/icons.tsx
var import_react_native = require("react-native");
var import_jsx_runtime = require("react/jsx-runtime");
var iconSources = {
grid: {
uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdQTFRFAAAAIJ//Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Haf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqb9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hmz01QAAAD10Uk5TAAAEGjNefYqLXDUFAjSY0e79/9KZAghmyMkBQbz6vUIBBnD1cQcOo6Sp76qBePTHVOoC+RQTX4mCDZsBMmX5zDcAAAHcSURBVHic7ZrrcoIwEIVX8W5VpAiUaq33GyJqrfby/s9VacsCDojUJNNx9vzCTLLfZJdkHM4ChJTJSrl8oVj6s4qFckWqZiBed7V6Q24qV6op36uVVgxC042rAQh60LUIhPnY7rBCuOo8dZ9PGb3+gCXC1WA4CjPGE9YIV9NxiNHmwVCUWYAy4rIPV1PMmNnnxVCUoVf9LvOa+xp0f89HqCDzhbWMle3NsuPnWIt5MF7757zogfOxcqLOEGrtzVufm6U5Kz9iR3eHNgYObNWXc4svhQDs1C0GNTbHgZp/l6hnt5ECApqKQZu1471b93O1S1h6OQR2fsbqGcg28JeTtDIFBBwM28iCJON7lZSsVBAN3zFZCpRkkbgwDQQWWJQcvOK2LLYQCwPnoYDPS7aQJQYuwJ4/ZA8l/pASQQhCEIIQhCAEIQhBghB7nSj839xMnmtHQriJIAS5IYiQw3g7dxdBCEIQghCEIAQhyH+ECPmMLsQQKOMzY2vjgIHLYkwaIXaTEOMM+FuAIMbMhJYIW1aIwczaKj9EWuVCTH++7Quml8Qev0aMnl+qtxkfxnu4cYXLXiYhhpg2H4AP1g1L7a55ygDGrVdGZOuVKwFNZN/KSp/XtsPVpOpJ0C+2naE/XA0rpwAAAABJRU5ErkJggg=="
},
"story-white": {
uri: "data:image/png;base64,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"
},
"story-blue": {
uri: "data:image/png;base64,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"
},
search: {
uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kd8rg1EYxz/baGLy88KFsjSuTEyJG2USamnNlOFme+2H2ubtfbe03Cq3K0rc+HXBX8Ctcq0UkZJbrokb1ut5t9Uke07PeT7ne87zdM5zwBpMKim9ZgBS6YwWmPI6F0KLTvsLVlqw00VrWNHVcb/fR1X7vMdixlu3Wav6uX+tYSWqK2CpEx5TVC0jPC3sW8+oJu8ItyuJ8IrwmXCfJhcUvjP1SIlfTY6X+NtkLRiYAGuzsDP+iyO/WEloKWF5Oa5UMquU72O+xBFNz89J7BbvRCfAFF6czDDJBMMMMirzMG489MuKKvkDxfxZ1iRXkVklh8YqcRJk6BM1K9WjEmOiR2UkyZn9/9tXPTbkKVV3eKH22TDee8C+DYW8YXwdGUbhGGxPcJmu5K8dwsiH6PmK5jqApk04v6pokV242IKORzWshYuSTdwai8HbKTSGoO0G6pdKPSvvc/IAwQ35qmvY24deOd+0/AMfDGfFB6WkFAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAqNJREFUWIXF2DmIFFEQBuBvVh3FC0EFdT3QaDORTUTFI9hQPAIRQxE0ETXwQBADD7zAaBEDTQxlIxExE4VFjTzYxQNFERUTr/VCvII3Q78Ze2Z6drvZH5ppmqq//q73XnXVlGRHFzZgJeZiDibjLd7gMa7gOr62wdsWStiEAfzNeH3HhYroXNGNu02CPsN9vMOfBjZHUc5DzBb8qAtwG7uxMMW+jB704kOd3w3MGImYg3WEQ9jehn8nrtVxPMeC4YjZ4v+3S8tIFmzD54jrnnAIMqNbWPcqwRFhU48EC/A04uzLyllSu4Fv5CCmimX4HXGvzeK0Se2eGe4yNcLpiH8QY1s5xHVmR85iYEJFSDXG5mbGXZHhnQLEVLEqinO5meGByHBPgYJKeF2J80XIWirimrGoQEFwLoq1PM2gQyhkhMr8vGBBg9H9nFaC3hYshtAVVNGZZtAhqZ5DhcupjTE+zaBDkplZhcthdnQ/kGbQIUnjTDm1Ck0QL9ODRoKeVO5LQjdYJFZXfj/hVSOjjZKj2FugmGn4WYlzq5nhJMlX/oMGxzEHHJa8+MlWxhcj46sFiFkiyc57TG/lME9tL7Q1RzFlYQNXuXdmdTweOX3C/JwEHYt4BzAuq2MZNyPnx1g6AiFlYer4FXH2tEsyEy8igl84of36tFgYkepHo2F1EwvxsI7oIVZk8J2KQ5INnHbta0bQqG+egktYV/f8lTAuDwoVfkj4HHRijVD44mw+ErLShbPR8/041UxYI7HrK6RZx+jq9RG71G7gvdrIVDOMFea1PuFPhEYiPqMfZ4S9mIaWotoddSYK81unUNHHC0f5AV5WgrTCXrXLNazlyxu5LV+eSBU1ZhQF9eObpFj2CIdh1BFn6s1oZqiKfqHtWYLz/wAUO/neFu9thgAAAABJRU5ErkJggg=="
},
"layout-bottom": {
uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEzSURBVHgB7ZjhDYIwEIWfTsAIjOAIHYGNZANwAnQi3KBu4AhYIiYNNHCF0ivxvuR+mHjNe70eyR0gCIKQOspEZUKb6CJFa6IxkWMD2SC8Y45q0OItvgXALd6uiJeJFG7eVQkSuSNZ49sL3qVcSQF3zylKcoOp+FjCbTJMTdSUxPHbL8CHwvQyFxmXjZMMC3pOjqSO8J+YzOo54+CIAW7EADdigBsxwI0Y4EYMcLPWwNXEG+HGxf4s8si4xNI8sOe8XK7Q450Q8uZdlfDS85c9cMN+PBAAypvrtwOhm7jcoGc2gWOlYuPdA6/R7wv4GK90niDQPw/bsUY6i62GkqgwLVt/UKwFVzZo0A4dOfWQGvt969cGaa1o38Kh1+s/EylUosbGHsxN3BG3InoQriAIgpA0H3BBw2jFymiHAAAAAElFTkSuQmCC"
},
"layout-bottom-inverse": {
uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFgSURBVHgB7ZjhcYMwDIXlTEA2YISOYDbIRmSD0AloJ+kIyQbuBskGqnz4R+OYw7jYchN9dzouwYIn2+LgAQiCIFQNImqKE4XBcpwpRooWUqHkxgnnxmpo5nSqOfF0+KJ4gzq4UHRKqZt/YjeT0EM94i1WSx81kma/DSyjwakXGigA3eeA4Z7TMcljQHwR4Z6OJlDEEJN49pIOwIRb9bvJ9MeoQBLeDSCACbfy19//+XqqLsCypGcH/xwpgBspgBspgBspgBspgBspgJukAugFsae44nbYa51gC/wrB87ndCqOa/Ws/h6ws0WHXJ+YN7rdHlboeckeeId8fMJfWdpzbsyA2zfxMUXPYg8Q+5AjVoqUHvj2frM5dPho6VxikgZv1QzWY2yNMYk6sEcNFjK4nHCNYWuxjb3IgPURtBWf0153AzvI+8yPxWrokp+EONntH/ho+ubE4LSNNQiCIFTND53ElQfvR3pDAAAAAElFTkSuQmCC"
},
"layout-split": {
uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADxSURBVHgB7ZjhCcIwFITP4gAdISM4QkZwI0doNqgb1Q3iJjU/Imga5YVK3yveB/ejkJa7vgTCAYQQYh2fNCTFpHkjTUljksMK+mx8VtaQvTSbnwBom3+dSFMIC3++NgkRDlA3+0m+NNtVAlxgl7NkkaW9XyqWZg+VADNs8+a5w85hAG0YQBsG0IYBtNl9gKNgzQG6fL3acAtpwwDaMIA2DKDNXwRorvW2pBbgXjyfoEfZA90gIGDZxWhMoceyER8lL3rUCyVRK/YD+uwhVnw46UcC7LVyAQ3svl5/hrAwiYCVZ9AlXbHtRGI27kEIIaZ5ALildIGPrcQbAAAAAElFTkSuQmCC"
},
"layout-split-inverse": {
uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEaSURBVHgB7ZntDYJADIaLcQBGYARHgAl0I0YQJ8BNdAPZ4BzBDWov8ENrkYuJtJA+SUO4D/K+1yaQAuA4jmMaRCwpjhQB5+NG0VIU8Cu0OR+EaxM15GM6szHxdLlQ7MAGHUWVZdmDT2xGNtRgR3wkaqmliY8MYF93AWwSs3B9HZAyUINdDnxAMmCpdDh7PiCVEIJhqITeNG9g4bgBbdyANm5AGzegzeINbKcW8Ff33Ex92ngJaeMGtHED2rgBbdZv4FtbzwKSgTu7V2uz0OHxPlCXsqlhzdWgkQXsm8uBaWlTNpZChzgIp/EXBuElyu38IvUhDdqjkbSus70+LKwoTqBP1CCKT4KyUVCcsf/tMxcB+zIuwXEcxzRPpfGo9y3IYogAAAAASUVORK5CYII="
},
folder: {
uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHTSURBVGiB7Zk7LwRRGIbf7wwRRIJGlDSEpdmI6Fw6lRWZXiJ0lkZUsn8A2dD5B0MhkS1UepGIXZu4hsKlJASxyZyjoJAx4uzutztjc57yXN58T+Z8M5kZoEKg2R4nSpL6IdCQ72YlhQLh3LLc/dUj+7YUBepC8ciWYshxidSy+1a/tHYx+s6QlzeCKcdSihZEzWtqfsCpZcrMCy6RTwgj8knsBCHDKwIEJsPVI36cKOCGK4ygnkHYbcpkNxJISO98lc+eR4Au9eJVG4DmXyY7CejUrvRPCFCIPUQifTjG1I9ZnyuynTyeiOlEx3udDkixB6CVo1RdXCHb19P21fexonokmbZPIeQQgPuiKssTS1K3d6zoZg9Choh+tATLXSuZtk8tSwyC1B1HXiH4NXtBrByNn8V7nWFIMcmVCVJzAGp0lrKJAF/HDFjkyotHtmagKcL/QAwIIxI2jEjYMCJhw4iEDSMSNoxI2DAiYcOIhI2KEfF71W2c7XGiZa/EDwVLd6mfyCApccBYTlmomKNlRAJFymvv0P8TIRzediHjHRYAMgBK9Y+EkxygUpBybHPTdr2TBADT0Z06K/ek9UUvKFpk9Usia+eCrsNgMBgMBkM5+ADkCHptw04GlAAAAABJRU5ErkJggg=="
}
};
function Icon({ name, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native.Image,
{
source: {
...iconSources[name],
width: 16,
height: 16
},
...props
}
);
}
function BackgroundIcon({ name, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native.ImageBackground,
{
source: {
...iconSources[name],
width: 16,
height: 16
},
...props
}
);
}
// src/preview/components/StoryListView/getNestedStories.ts
function getNestedStories(storyIndex) {
const stories = Object.values(storyIndex.stories);
const group = [];
stories.forEach((story) => {
const nameParts = story.title.split("/");
formGroup(nameParts, story, group);
});
return group;
}
function formGroup(nameParts, story, group) {
if (nameParts.length === 1) {
const current = group.find(({ name }) => name === nameParts[0]);
if (current) {
current.stories.push(story);
} else {
group.push({
title: story.title,
name: nameParts[0],
children: [],
stories: [story]
});
}
return;
}
const newParts = nameParts.slice(1);
const currentListPart = group.find(({ name }) => name === nameParts[0]);
if (!currentListPart) {
const toPush = {
name: nameParts[0],
title: story.title,
children: [],
stories: []
};
group.push(toPush);
return formGroup(newParts, story, toPush.children);
} else if (!currentListPart.children) {
currentListPart.children = [];
}
const newGroup = currentListPart.children;
return formGroup(newParts, story, newGroup);
}
var filterNestedStories = (stories, filter) => {
const filteredStories = [];
stories.forEach((story) => {
const filtered = filterStoryGroup(story, filter);
if (filtered) {
filteredStories.push(filtered);
}
});
return filteredStories;
};
var filterStoryGroup = (story, filter) => {
const filteredStories = story.stories.filter(
(item) => item.title.toLowerCase().includes(filter.toLowerCase()) || item.name.toLowerCase().includes(filter.toLowerCase())
);
const filteredChildren = filterNestedStories(story.children, filter);
if (filteredStories.length || filteredChildren.length) {
return {
...story,
children: filteredChildren,
stories: filteredStories
};
}
};
var findFirstChildStory = (story) => {
if (story.stories.length) {
return story.stories[0];
}
if (story.children.length) {
return findFirstChildStory(story.children[0]);
}
};
// src/preview/components/StoryListView/StoryListView.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
fontSize: theme3.storyList.fontSize,
color: theme3.storyList.headerTextColor,
fontWeight: theme3.storyList.headerFontWeight,
flexShrink: 1
}));
var StoryNameText = import_react_native_theming.styled.Text(({ selected, theme: theme3 }) => ({
fontSize: theme3.storyList.fontSize,
fontWeight: selected ? theme3.storyList.storySelectedFontWeight : theme3.storyList.storyFontWeight,
color: selected ? theme3.storyList.storySelectedTextColor : theme3.storyList.storyTextColor
}));
var SEARCH_ICON_SIZE = 24;
var SearchInput = import_react_native_theming.styled.TextInput(
{
padding: 0,
...import_react_native2.StyleSheet.absoluteFillObject
},
({ theme: theme3 }) => ({
fontSize: theme3.storyList.search.fontSize,
paddingStart: theme3.storyList.search.paddingHorizontal + SEARCH_ICON_SIZE,
color: theme3.storyList.search.textColor
})
);
var SearchContainer = import_react_native_theming.styled.View(({ theme: theme3 }) => ({
flexDirection: "row",
alignItems: "center",
margin: theme3.panel.paddingHorizontal,
paddingVertical: theme3.storyList.search.paddingVertical,
paddingStart: theme3.storyList.search.paddingHorizontal,
borderColor: theme3.storyList.search.borderColor,
borderWidth: theme3.storyList.search.borderWidth,
borderRadius: theme3.storyList.search.borderRadius,
backgroundColor: theme3.storyList.search.backgroundColor
}));
var SearchBar = (props) => {
const theme3 = (0, import_react_native_theming.useTheme)();
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SearchContainer, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "search", style: { opacity: 0.5 } }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
SearchInput,
{
...props,
autoCapitalize: "none",
autoComplete: "off",
autoCorrect: false,
spellCheck: false,
clearButtonMode: "while-editing",
disableFullscreenUI: true,
placeholderTextColor: theme3.storyList.search.placeholderTextColor,
returnKeyType: "search"
}
)
] });
};
var HeaderContainer = import_react_native_theming.styled.TouchableOpacity(
{
flexDirection: "row",
alignItems: "center"
},
({ selected, theme: theme3, childSelected }) => ({
marginTop: theme3.storyList.sectionSpacing,
paddingHorizontal: theme3.storyList.headerPaddingHorizontal,
paddingVertical: theme3.storyList.headerPaddingVertical,
backgroundColor: selected ? theme3.storyList.sectionActiveBackgroundColor : void 0,
borderTopLeftRadius: theme3.storyList.sectionBorderRadius,
borderTopRightRadius: theme3.storyList.sectionBorderRadius,
borderBottomLeftRadius: selected && !childSelected ? theme3.storyList.sectionBorderRadius : void 0,
borderBottomRightRadius: selected && !childSelected ? theme3.storyList.sectionBorderRadius : void 0
})
);
var SectionHeader = import_react2.default.memo(
({ name, onPress, isChildSelected, icon = "grid", expanded }) => {
const selected = useIsStorySectionSelected(name) || isChildSelected;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
HeaderContainer,
{
selected,
childSelected: isChildSelected,
onPress,
activeOpacity: 0.8,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_native2.View,
{
style: {
transform: [{ rotate: expanded ? "90deg" : "0deg" }],
marginRight: 6,
alignItems: "center",
justifyContent: "center"
},
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { fontSize: 8, color: "grey", lineHeight: 8 }, children: "\u27A4" })
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: icon, width: 12, height: 12, style: { marginRight: 6 } }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionHeaderText, { numberOfLines: 2, selected, children: name })
]
},
name
);
}
);
var ItemTouchable = import_react_native_theming.styled.TouchableOpacity(
{
flexDirection: "row",
alignItems: "center"
},
({ selected, sectionSelected, isLastItem, theme: theme3 }) => ({
padding: theme3.storyList.storyPaddingHorizontal,
paddingStart: theme3.storyList.storyIndent,
backgroundColor: selected ? theme3.storyList.storySelectedBackgroundColor : sectionSelected ? theme3.storyList.sectionActiveBackgroundColor : void 0,
borderBottomLeftRadius: isLastItem ? theme3.storyList.sectionBorderRadius : void 0,
borderBottomRightRadius: isLastItem ? theme3.storyList.sectionBorderRadius : void 0
})
);
var ListItem = ({
storyId,
kind,
title,
isLastItem,
onPress,
isSiblingSelected
}) => {
const selected = useIsStorySelected(storyId);
const sectionSelected = useIsStorySectionSelected(kind) || isSiblingSelected;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
ItemTouchable,
{
onPress,
activeOpacity: 0.8,
testID: `Storybook.ListItem.${kind}.${title}`,
accessibilityLabel: `Storybook.ListItem.${title}`,
selected,
sectionSelected,
isLastItem,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Icon,
{
width: 14,
height: 14,
name: selected ? "story-white" : "story-blue",
style: { marginRight: 6 }
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryNameText, { selected, children: title })
]
},
title
);
};
var styles = import_react_native2.StyleSheet.create({
sectionList: { flex: 1 },
sectionListContentContainer: { paddingBottom: 6 }
});
function keyExtractor(item, index) {
return item.name + index;
}
var RenderItem = ({
item,
changeStory
}) => {
const isChildSelected = useIsChildSelected(item.stories);
const firstChild = findFirstChildStory(item);
const firstChildSelected = useIsStorySelected(firstChild?.id);
const [showChildren, setShowChildren] = (0, import_react2.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
SectionHeader,
{
name: item.name,
isChildSelected,
onPress: () => {
if (firstChildSelected && showChildren) {
setShowChildren(false);
} else if (!showChildren && firstChild) {
setShowChildren(true);
changeStory(firstChild.id);
} else if (showChildren && !firstChildSelected && firstChild) {
changeStory(firstChild.id);
}
},
icon: item.children.length ? "folder" : "grid",
expanded: showChildren
}
),
showChildren && item.stories?.map((story, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ListItem,
{
storyId: story.id,
title: story.name,
kind: item.name,
isSiblingSelected: isChildSelected,
isLastItem: idx === item.stories.length - 1,
onPress: () => changeStory(story.id)
},
story.id
)),
showChildren && item.children?.map((child, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { marginLeft: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item: child, changeStory }) }, `${child.title}-${idx}`))
] });
};
var StoryListView = ({ storyIndex }) => {
const originalData = (0, import_react2.useMemo)(() => getNestedStories(storyIndex), [storyIndex]);
const [data, setData] = (0, import_react2.useState)(originalData);
const theme3 = (0, import_react_native_theming.useTheme)();
const handleChangeSearchText = (text) => {
const query = text.trim();
if (!query) {
setData(originalData);
return;
}
setData(filterNestedStories(originalData, query));
};
const changeStory = (storyId) => {
const channel = import_addons.addons.getChannel();
channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
};
const renderItem = import_react2.default.useCallback(({ item }) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
SearchBar,
{
testID: "Storybook.ListView.SearchBar",
onChangeText: handleChangeSearchText,
placeholder: "Find by name"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_native2.FlatList,
{
style: styles.sectionList,
contentContainerStyle: [
styles.sectionListContentContainer,
{
paddingVertical: theme3.panel.paddingVertical,
paddingHorizontal: theme3.panel.paddingHorizontal
}
],
testID: "Storybook.ListView",
renderItem,
keyExtractor,
data
}
)
] });
};
var StoryListView_default = import_react2.default.memo(StoryListView);
// src/preview/components/StoryView/StoryView.tsx
var import_react3 = __toESM(require("react"));
var import_react_native_theming2 = require("@storybook/react-native-theming");
var import_react_native3 = require("react-native");
var import_jsx_runtime3 = require("react/jsx-runtime");
function dismissOnStartResponder() {
import_react_native3.Keyboard.dismiss();
return false;
}
var StoryView = () => {
const context = useStoryContext();
const id = context?.id;
const { backgroundColor } = (0, import_react_native_theming2.useTheme)();
if (context && context.unboundStoryFn) {
const { unboundStoryFn: StoryComponent } = context;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_native3.View,
{
style: { flex: 1, backgroundColor },
testID: id,
onStartShouldSetResponder: dismissOnStartResponder,
children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryComponent, { ...context })
},
id
);
}
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { flex: 1, padding: 16, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Please open the sidebar and select a story to preview." }) });
};
var StoryView_default = import_react3.default.memo(StoryView);
// src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
var import_react4 = __toESM(require("react"));
var import_react_native4 = require("react-native");
var import_jsx_runtime4 = require("react/jsx-runtime");
var AbsolutePositionedKeyboardAwareView = ({
onLayout,
previewDimensions: { width, height },
children
}) => {
const onLayoutHandler = ({ nativeEvent }) => {
const { height: layoutHeight, width: layoutWidth } = nativeEvent.layout;
if (layoutHeight !== height || layoutWidth !== width) {
onLayout({
height: layoutHeight,
width: layoutWidth
});
}
};
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles2.container, onLayout: onLayoutHandler, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native4.View,
{
style: width === 0 ? styles2.container : [styles2.absolute, { position: "absolute", width, height }],
children
}
) });
};
var styles2 = import_react_native4.StyleSheet.create({
absolute: { position: "absolute" },
container: { flex: 1 }
});
var absolute_positioned_keyboard_aware_view_default = import_react4.default.memo(AbsolutePositionedKeyboardAwareView);
// src/preview/components/OnDeviceUI/addons/Addons.tsx
var import_addons2 = require("@storybook/addons");
var import_react_native_theming6 = require("@storybook/react-native-theming");
var import_react8 = __toESM(require("react"));
var import_react_native7 = require("react-native");
// src/preview/components/OnDeviceUI/addons/List.tsx
var import_react6 = __toESM(require("react"));
// src/preview/components/Shared/tabs.tsx
var import_react5 = __toESM(require("react"));
var import_react_native5 = require("react-native");
var import_react_native_theming3 = require("@storybook/react-native-theming");
var import_react_native_theming4 = require("@storybook/react-native-theming");
var import_jsx_runtime5 = require("react/jsx-runtime");
var TabButtonText = import_react_native_theming3.styled.Text(({ theme: theme3, active }) => ({
color: active ? theme3.tabs.activeTextColor : theme3.tabs.inactiveTextColor,
paddingVertical: theme3.tabs.paddingVertical,
paddingHorizontal: theme3.tabs.paddingHorizontal,
fontSize: theme3.tabs.fontSize,
fontWeight: theme3.tabs.fontWeight
}));
var hitSlop = { top: 8, left: 0, right: 0, bottom: 20 };
var TabButtonTouchable = import_react_native_theming3.styled.TouchableOpacity(({ theme: theme3, active }) => ({
borderWidth: theme3.tabs.borderWidth,
borderColor: active ? theme3.tabs.activeBorderColor : theme3.tabs.inactiveBorderColor,
borderRadius: theme3.tabs.borderRadius,
backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tabs.inactiveBackgroundColor
}));
var TabButton = import_react5.default.memo(({ onPress, id, active, children, testID }) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
TabButtonTouchable,
{
active,
testID,
onPress: () => onPress(id),
activeOpacity: 0.8,
hitSlop,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TabButtonText, { active, children })
}
);
});
var TabBar = import_react5.default.memo(({ scrollable = false, style, children }) => {
const theme3 = (0, import_react_native_theming4.useTheme)();
if (scrollable) {
children = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_react_native5.ScrollView,
{
showsHorizontalScrollIndicator: false,
horizontal: true,
contentContainerStyle: { paddingHorizontal: theme3.tokens.spacing2 },
children
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TabBarContainer, { children }) });
});
var TabBarContainer = import_react_native_theming3.styled.View(() => ({
flexDirection: "row",
paddingVertical: 6,
justifyItems: "center"
}));
// src/preview/components/OnDeviceUI/addons/List.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var AddonList = ({ panels, addonSelected, onPressAddon }) => {
const addonKeys = Object.keys(panels);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TabBar, { scrollable: true, children: addonKeys.map((id) => {
const { title } = panels[id];
const resolvedTitle = typeof title === "function" ? title() : title;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
TabButton,
{
active: id === addonSelected,
id,
onPress: () => onPressAddon(id),
children: resolvedTitle.toUpperCase()
},
id
);
}) });
};
var List_default = import_react6.default.memo(AddonList);
// src/preview/components/OnDeviceUI/addons/Wrapper.tsx
var import_react7 = __toESM(require("react"));
var import_react_native6 = require("react-native");
var import_react_native_theming5 = require("@storybook/react-native-theming");
var import_jsx_runtime7 = require("react/jsx-runtime");
var Container = import_react_native_theming5.styled.View(({ selected }) => ({
display: selected ? "flex" : "none",
flex: 1
}));
var Wrapper = ({ panels, addonSelected }) => {
useUpdateOnStoryChanged();
const theme3 = (0, import_react_native_theming5.useTheme)();
const addonKeys = Object.keys(panels);
const content = addonKeys.map((id) => {
const selected = addonSelected === id;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Container, { selected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.ScrollView, { contentContainerStyle: { padding: theme3.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id);
});
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: content });
};
var Wrapper_default = import_react7.default.memo(Wrapper);
// src/preview/components/OnDeviceUI/addons/Addons.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Text3 = import_react_native_theming6.styled.Text(({ theme: theme3 }) => ({
marginTop: theme3.tokens.spacing4
}));
var Addons = ({ active }) => {
const panels = import_addons2.addons.getElements("panel");
const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
const context = useStoryContext();
const id = context?.id;
if (!id) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text3, { children: "No Story Selected" }) });
}
if (Object.keys(panels).length === 0) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text3, { children: "No addons loaded." }) });
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: { flex: 1 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
List_default,
{
onPressAddon: setAddonSelected,
panels,
addonSelected: active ? addonSelected : null
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Wrapper_default, { addonSelected: active ? addonSelected : null, panels })
] });
};
var Addons_default = import_react8.default.memo(Addons);
// src/preview/components/OnDeviceUI/addons/AddonsSkeleton.tsx
var import_react9 = __toESM(require("react"));
var import_react_native_theming7 = require("@storybook/react-native-theming");
var import_react_native8 = require("react-native");
var import_jsx_runtime9 = require("react/jsx-runtime");
var AddonsSkeleton = import_react9.default.memo(function AddonsSkeleton2({ visible }) {
const progress = import_react9.default.useRef(new import_react_native8.Animated.Value(visible ? 1 : 0));
import_react9.default.useEffect(() => {
import_react_native8.Animated.timing(progress.current, {
toValue: visible ? 1 : 0,
duration: ANIMATION_DURATION_TRANSITION,
useNativeDriver: true,
easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
}).start();
}, [visible]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(AddonsSkeletonContainer, { pointerEvents: "none", style: { opacity: progress.current }, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabsSkeleton, {}),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsContentSkeleton, {})
] });
});
var TabSkeleton = import_react_native_theming7.styled.View(({ theme: theme3, active }) => ({
opacity: active ? 1 : 0.5,
backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tokens.color.grey200,
borderRadius: theme3.tokens.borderRadius.round,
width: active ? 100 : 70,
height: 30,
marginRight: 12
}));
var BoxSkeleton = import_react_native_theming7.styled.View(
({ theme: theme3, width, height, marginBottom }) => ({
backgroundColor: theme3.tokens.color.blue200,
borderRadius: theme3.tokens.borderRadius.large,
height,
marginBottom,
width
})
);
function AddonsFieldSkeleton({ long = false }) {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { marginBottom: 32 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BoxSkeleton, { width: long ? 200 : 120, height: 15 })
] });
}
function AddonsContentSkeleton() {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, { long: true }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, { long: true }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, {}),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddonsFieldSkeleton, {})
] });
}
function TabsSkeleton() {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { flexDirection: "row", marginBottom: 16 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabSkeleton, {}),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabSkeleton, { active: true }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TabSkeleton, {})
] });
}
var AddonsSkeletonContainer = (0, import_react_native_theming7.styled)(import_react_native8.Animated.View)(
({ theme: theme3 }) => ({
...import_react_native8.StyleSheet.absoluteFillObject,
flex: 1,
backgroundColor: theme3.panel.backgroundColor,
borderTopWidth: theme3.panel.borderWidth,
borderColor: theme3.panel.borderColor,
padding: theme3.panel.paddingHorizontal,
overflow: "hidden"
})
);
// src/preview/components/OnDeviceUI/animation.ts
var import_react_native9 = require("react-native");
// src/preview/components/OnDeviceUI/navigation/constants.ts
var SIDEBAR = -1;
var CANVAS = 0;
var ADDONS = 1;
// src/preview/components/OnDeviceUI/animation.ts
var RTL_SCALE = import_react_native9.I18nManager.isRTL ? -1 : 1;
var PREVIEW_SCALE = 0.3;
var PREVIEW_SCALE_WIDE = 0.7;
var PREVIEW_SCALE_SHRINK = 0.9;
var SCALE_OFFSET = 0.025;
var TRANSLATE_Y_OFFSET = 12;
var panelWidth = (width, wide) => {
const scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
return width * (1 - scale - SCALE_OFFSET);
};
var getSidebarPanelPosition = (animatedValue, previewWidth, wide) => {
return [
{
transform: [
{
translateX: animatedValue.interpolate({
inputRange: [SIDEBAR, CANVAS],
outputRange: [0, (-panelWidth(previewWidth, wide) - 1)