@storybook/react-native-ui
Version:
ui components for react native storybook
1,329 lines (1,302 loc) • 92.2 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.tsx
var index_exports = {};
__export(index_exports, {
ComponentNode: () => ComponentNode,
Explorer: () => Explorer,
FullUI: () => FullUI,
GroupNode: () => GroupNode,
Layout: () => Layout,
LeafNodeStyleWrapper: () => LeafNodeStyleWrapper,
Node: () => Node,
RootNode: () => RootNode,
RootNodeText: () => RootNodeText,
Sidebar: () => Sidebar,
StoryNode: () => StoryNode,
Tree: () => Tree,
useCombination: () => useCombination
});
module.exports = __toCommonJS(index_exports);
// src/TreeNode.tsx
var import_react_native_theming2 = require("@storybook/react-native-theming");
// src/icon/ComponentIcon.tsx
var import_react_native_svg = __toESM(require("react-native-svg"));
var import_jsx_runtime = require("react/jsx-runtime");
function ComponentIcon({ color = "#029CFD", ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.default, { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native_svg.Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M2.5.004a2.5 2.5 0 00-2.5 2.5v7a2.5 2.5 0 002.5 2.5h7a2.5 2.5 0 002.5-2.5v-7a2.5 2.5 0 00-2.5-2.5h-7zm8.5 5.5H6.5v-4.5h3a1.5 1.5 0 011.5 1.5v3zm0 1v3a1.5 1.5 0 01-1.5 1.5h-3v-4.5H11zm-5.5 4.5v-4.5H1v3a1.5 1.5 0 001.5 1.5h3zM1 5.504h4.5v-4.5h-3a1.5 1.5 0 00-1.5 1.5v3z",
fill: color
}
) });
}
// src/icon/GroupIcon.tsx
var import_react_native_svg2 = __toESM(require("react-native-svg"));
var import_jsx_runtime2 = require("react/jsx-runtime");
function GroupIcon({ color = "#6F2CAC", ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg2.default, { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_native_svg2.Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.962 3.704L5.376 2.118H1.057v9.514h12.685V3.704h-6.78zM7.4 2.647L6.124 1.37a1.057 1.057 0 00-.748-.31H.53A.529.529 0 000 1.59v10.57c0 .292.237.529.529.529H14.27a.529.529 0 00.528-.529V3.175a.529.529 0 00-.528-.528H7.4z",
fill: color
}
) });
}
// src/icon/StoryIcon.tsx
var import_react_native_svg3 = __toESM(require("react-native-svg"));
var import_jsx_runtime3 = require("react/jsx-runtime");
function StoryIcon({ color = "#37D5D3", ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_svg3.default, { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_native_svg3.Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M3 0h6c.237 0 .428.192.428.429V11.57c0 .224-.17.407-.389.427a.396.396 0 01-.318-.101L6 9.565l-2.721 2.332a.395.395 0 01-.325.1.429.429 0 01-.383-.426V.43C2.571.192 2.763 0 3 0zm.428 10.64l2.284-1.958.034-.028a.39.39 0 01.289-.081c.087.007.172.04.244.102L8.57 10.64V.857H3.428v9.783z",
fill: color
}
) });
}
// src/icon/CollapseIcon.tsx
var import_react_native_theming = require("@storybook/react-native-theming");
var import_react_native_svg4 = __toESM(require("react-native-svg"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var CollapseIconWrapper = import_react_native_theming.styled.View(
({ theme, isExpanded }) => ({
width: 8,
height: 8,
display: "flex",
justifyContent: "center",
alignItems: "center",
color: theme.textMutedColor,
transform: isExpanded ? "rotateZ(90deg)" : "none",
transition: "transform .1s ease-out"
})
);
var CollapseIcon = ({ isExpanded }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseIconWrapper, { isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CollapseSVG, {}) });
function CollapseSVG(props) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg4.default, { width: 8, height: 8, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native_svg4.Path,
{
fill: "#73828C",
d: "M1.896 7.146a.5.5 0 10.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 10-.708.708L5.043 4 1.896 7.146z"
}
) });
}
// src/TreeNode.tsx
var import_react = __toESM(require("react"));
var import_polished = require("polished");
var import_jsx_runtime5 = require("react/jsx-runtime");
var BranchNodeText = import_react_native_theming2.styled.Text(({ theme }) => ({
textAlign: "left",
fontSize: theme.typography.size.s2,
flexShrink: 1,
color: theme.color.defaultText
}));
var BranchNode = import_react_native_theming2.styled.TouchableOpacity(({ depth = 0, isExpandable = false, theme }) => ({
width: "100%",
border: "none",
cursor: "pointer",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
alignSelf: "flex-start",
paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
backgroundColor: "transparent",
minHeight: 28,
borderRadius: 4,
gap: 6,
paddingTop: 5,
paddingBottom: 4,
// will this actually do anything?
"&:hover, &:focus": {
backgroundColor: (0, import_polished.transparentize)(0.93, theme.color.secondary),
outline: "none"
}
}));
var LeafNode = import_react_native_theming2.styled.TouchableOpacity(
({ depth = 0, selected, theme }) => ({
alignSelf: "flex-start",
cursor: "pointer",
color: "inherit",
display: "flex",
gap: 6,
flexDirection: "row",
alignItems: "flex-start",
paddingLeft: 22 + depth * 18,
paddingTop: 5,
paddingBottom: 4,
backgroundColor: selected ? theme.color.secondary : void 0,
// not sure 👇
width: "100%",
borderRadius: 4,
paddingRight: 20,
minHeight: 28
})
);
var LeafNodeText = import_react_native_theming2.styled.Text(({ theme, selected }) => ({
fontSize: theme.typography.size.s2,
flexShrink: 1,
fontWeight: selected ? "bold" : "normal",
color: selected ? theme.color.lightest : theme.color.defaultText
}));
var Wrapper = import_react_native_theming2.styled.View({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: 6,
marginTop: 2
});
var GroupNode = import_react.default.memo(function GroupNode2({
children,
isExpanded = false,
isExpandable = false,
...props
}) {
const theme = (0, import_react_native_theming2.useTheme)();
const color = (0, import_react.useMemo)(() => {
return theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet;
}, [theme.base, theme.color.primary, theme.color.ultraviolet]);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(BranchNode, { isExpandable, ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Wrapper, { children: [
isExpandable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIcon, { isExpanded }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GroupIcon, { width: 14, height: 14, color })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
] });
});
var ComponentNode = import_react.default.memo(
function ComponentNode2({ children, isExpanded, isExpandable, ...props }) {
const theme = (0, import_react_native_theming2.useTheme)();
const color = (0, import_react.useMemo)(() => {
return theme.color.secondary;
}, [theme.color.secondary]);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(BranchNode, { isExpandable, ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Wrapper, { children: [
isExpandable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIcon, { isExpanded }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComponentIcon, { width: 12, height: 12, color })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BranchNodeText, { children })
] });
}
);
var StoryNode = import_react.default.memo(
(0, import_react.forwardRef)(function StoryNode2({ children, ...props }, ref) {
const theme = (0, import_react_native_theming2.useTheme)();
const color = (0, import_react.useMemo)(() => {
return props.selected ? theme.color.lightest : theme.color.seafoam;
}, [props.selected, theme.color.lightest, theme.color.seafoam]);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LeafNode, { ...props, ref, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StoryIcon, { width: 14, height: 14, color }) }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeafNodeText, { selected: props.selected, children })
] });
})
);
StoryNode.displayName = "StoryNode";
// src/Tree.tsx
var import_react_native_theming5 = require("@storybook/react-native-theming");
var import_react5 = __toESM(require("react"));
var import_react_native_ui_common = require("@storybook/react-native-ui-common");
// src/icon/CollapseAllIcon.tsx
var import_react_native_svg5 = require("react-native-svg");
var import_react_native_theming3 = require("@storybook/react-native-theming");
var import_react2 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var CollapseAllIcon = ({
color,
//= '#2E3438',
width = 14,
height = 14,
...props
}) => {
const theme = (0, import_react_native_theming3.useTheme)();
const fillColor = (0, import_react2.useMemo)(() => {
return color ?? theme.color.defaultText;
}, [color, theme.color.defaultText]);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_svg5.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_react_native_svg5.Path,
{
d: "M3.354.146a.5.5 0 10-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L7 3.793 3.354.146zM6.646 9.146a.5.5 0 01.708 0l4 4a.5.5 0 01-.708.708L7 10.207l-3.646 3.647a.5.5 0 01-.708-.708l4-4z",
fill: fillColor
}
) });
};
// src/icon/ExpandAllIcon.tsx
var import_react_native_svg6 = require("react-native-svg");
var import_react_native_theming4 = require("@storybook/react-native-theming");
var import_react3 = require("react");
var import_jsx_runtime7 = require("react/jsx-runtime");
var ExpandAllIcon = ({
color,
//= '#2E3438',
width = 14,
height = 14,
...props
}) => {
const theme = (0, import_react_native_theming4.useTheme)();
const fillColor = (0, import_react3.useMemo)(() => {
return color ?? theme.color.defaultText;
}, [color, theme.color.defaultText]);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_svg6.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
import_react_native_svg6.Path,
{
d: "M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z",
fill: fillColor
}
) });
};
// src/SelectedNodeProvider.tsx
var import_react4 = require("react");
var import_jsx_runtime8 = require("react/jsx-runtime");
var SelectedNodeContext = (0, import_react4.createContext)({
nodeRef: { current: null },
setNodeRef: () => {
},
scrollToSelectedNode: () => {
},
scrollRef: null
});
var SelectedNodeProvider = ({ children }) => {
const nodeRef = (0, import_react4.useRef)(null);
const setNodeRef = (0, import_react4.useCallback)((node) => {
nodeRef.current = node;
}, []);
const scrollRef = (0, import_react4.useRef)(null);
const scrollToSelectedNode = (0, import_react4.useCallback)(() => {
setTimeout(() => {
if (nodeRef?.current && scrollRef?.current) {
try {
nodeRef.current.measureLayout?.(scrollRef.current, (_x, y) => {
scrollRef.current?.scrollTo({ y: y - 100, animated: true });
});
} catch (_error) {
}
}
}, 500);
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
SelectedNodeContext.Provider,
{
value: {
nodeRef,
setNodeRef,
scrollToSelectedNode,
scrollRef
},
children
}
);
};
var useSelectedNode = () => (0, import_react4.useContext)(SelectedNodeContext);
// src/Tree.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var TextItem = import_react_native_theming5.styled.Text(({ theme }) => ({
color: theme.color.defaultText
}));
var Node = import_react5.default.memo(function Node2({
item,
refId,
isOrphan,
isDisplayed,
isSelected,
isFullyExpanded,
color: _2,
setFullyExpanded,
isExpanded,
setExpanded,
onSelectStoryId
}) {
const { setNodeRef } = useSelectedNode();
const setRef = (0, import_react5.useCallback)(
(node) => {
if (isSelected && node) {
setNodeRef(node);
}
},
[isSelected, setNodeRef]
);
if (!isDisplayed) {
return null;
}
const id = (0, import_react_native_ui_common.createId)(item.id, refId);
if (item.type === "story") {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
StoryNode,
{
ref: setRef,
selected: isSelected,
id,
depth: isOrphan ? item.depth : item.depth - 1,
onPress: () => {
onSelectStoryId(item.id);
},
children: item.renderLabel?.(item) || item.name
},
id
) });
}
if (item.type === "root") {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(RootNode, { id, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
CollapseButton,
{
"data-action": "collapse-root",
onPress: (event) => {
event.preventDefault();
setExpanded({ ids: [item.id], value: !isExpanded });
},
"aria-expanded": isExpanded,
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseIcon, { isExpanded }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
]
}
),
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_react_native_ui_common.IconButton,
{
"aria-label": isFullyExpanded ? "Expand" : "Collapse",
"data-action": "expand-all",
"data-expanded": isFullyExpanded,
onPress: (event) => {
event.preventDefault();
setFullyExpanded();
},
children: isFullyExpanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseAllIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ExpandAllIcon, {})
}
)
] }, id);
}
if (item.type === "component" || item.type === "group") {
const BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
BranchNode2,
{
id,
"aria-controls": item.children && item.children[0],
"aria-expanded": isExpanded,
depth: isOrphan ? item.depth : item.depth - 1,
isComponent: item.type === "component",
isExpandable: item.children && item.children.length > 0,
isExpanded,
onPress: (event) => {
event.preventDefault();
setExpanded({ ids: [item.id], value: !isExpanded });
},
children: item.renderLabel?.(item) || item.name
},
id
);
}
return null;
});
var LeafNodeStyleWrapper = import_react_native_theming5.styled.View(({ theme }) => ({
position: "relative",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingRight: 20,
color: theme.color.defaultText,
backgroundColor: "transparent",
minHeight: 28,
borderRadius: 4
}));
var RootNode = import_react_native_theming5.styled.View(() => ({
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginTop: 16,
marginBottom: 4,
minHeight: 28
}));
var RootNodeText = import_react_native_theming5.styled.Text(({ theme }) => ({
fontSize: theme.typography.size.s1 - 1,
fontWeight: theme.typography.weight.bold,
color: theme.textMutedColor,
lineHeight: 16,
letterSpacing: 2.5,
textTransform: "uppercase"
}));
var CollapseButton = import_react_native_theming5.styled.TouchableOpacity(() => ({
display: "flex",
flexDirection: "row",
paddingVertical: 0,
paddingHorizontal: 8,
borderRadius: 4,
gap: 6,
alignItems: "center",
cursor: "pointer",
height: 28
}));
var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
const containerRef = (0, import_react5.useRef)(null);
const [rootIds, orphanIds, initialExpanded] = (0, import_react5.useMemo)(
() => Object.keys(data).reduce(
(acc, id) => {
const item = data[id];
if (item.type === "root") acc[0].push(id);
else if (!item.parent) acc[1].push(id);
if (item.type === "root" && item.startCollapsed) acc[2][id] = false;
return acc;
},
[[], [], {}]
),
[data]
);
const { expandableDescendants } = (0, import_react5.useMemo)(() => {
return [...orphanIds, ...rootIds].reduce(
(acc, nodeId) => {
acc.expandableDescendants[nodeId] = (0, import_react_native_ui_common.getDescendantIds)(data, nodeId, false).filter(
(d) => !["story", "docs"].includes(data[d].type)
);
return acc;
},
{ orphansFirst: [], expandableDescendants: {} }
);
}, [data, rootIds, orphanIds]);
const singleStoryComponentIds = (0, import_react5.useMemo)(() => {
return Object.keys(data).filter((id) => {
const entry = data[id];
if (entry.type !== "component") return false;
const { children = [], name } = entry;
if (children.length !== 1) return false;
const onlyChild = data[children[0]];
if (onlyChild.type === "docs") return true;
if (onlyChild.type === "story") return (0, import_react_native_ui_common.isStoryHoistable)(onlyChild.name, name);
return false;
});
}, [data]);
const collapsedItems = (0, import_react5.useMemo)(
() => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
// eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/exhaustive-deps
[singleStoryComponentIds]
);
const collapsedData = (0, import_react5.useMemo)(() => {
return singleStoryComponentIds.reduce(
(acc, id) => {
const { children, parent, name } = data[id];
const [childId] = children;
if (parent) {
const siblings = [...data[parent].children];
siblings[siblings.indexOf(id)] = childId;
acc[parent] = { ...data[parent], children: siblings };
}
acc[childId] = {
...data[childId],
name,
parent,
depth: data[childId].depth - 1
};
return acc;
},
{ ...data }
);
}, [data]);
const ancestry = (0, import_react5.useMemo)(() => {
return collapsedItems.reduce(
(acc, id) => Object.assign(acc, { [id]: (0, import_react_native_ui_common.getAncestorIds)(collapsedData, id) }),
{}
);
}, [collapsedItems, collapsedData]);
const [expanded, setExpanded] = (0, import_react_native_ui_common.useExpanded)({
refId,
data: collapsedData,
initialExpanded,
rootIds,
selectedStoryId,
onSelectStoryId
});
const treeItems = (0, import_react5.useMemo)(() => {
return collapsedItems.map((itemId) => {
const item = collapsedData[itemId];
const id = (0, import_react_native_ui_common.createId)(itemId, refId);
if (item.type === "root") {
const descendants = expandableDescendants[item.id];
const isFullyExpanded = descendants.every((d) => expanded[d]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Root,
{
item,
refId,
isOrphan: false,
isDisplayed: true,
isSelected: selectedStoryId === itemId,
isExpanded: !!expanded[itemId],
setExpanded,
isFullyExpanded,
expandableDescendants: descendants,
onSelectStoryId,
docsMode: false,
color: "",
status: {}
},
id
);
}
const isDisplayed = !item.parent || ancestry[itemId].every((a) => expanded[a]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Node,
{
item,
status: status?.[itemId],
refId,
color: null,
docsMode,
isOrphan: orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`)),
isDisplayed,
isSelected: selectedStoryId === itemId,
isExpanded: !!expanded[itemId],
setExpanded,
onSelectStoryId
},
id
);
});
}, [
ancestry,
collapsedData,
collapsedItems,
docsMode,
expandableDescendants,
expanded,
onSelectStoryId,
orphanIds,
refId,
selectedStoryId,
setExpanded,
status
]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
});
var Container = import_react_native_theming5.styled.View((props) => ({
marginTop: props.hasOrphans ? 20 : 0,
marginBottom: 20
}));
var Root = import_react5.default.memo(function Root2({
setExpanded,
isFullyExpanded,
expandableDescendants,
...props
}) {
const setFullyExpanded = (0, import_react5.useCallback)(
() => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
[setExpanded, isFullyExpanded, expandableDescendants]
);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Node,
{
...props,
setExpanded,
isFullyExpanded,
setFullyExpanded
}
);
});
// src/Explorer.tsx
var import_react7 = __toESM(require("react"));
// src/Refs.tsx
var import_react6 = __toESM(require("react"));
var import_react_native_theming6 = require("@storybook/react-native-theming");
var import_react_native_ui_common2 = require("@storybook/react-native-ui-common");
var import_jsx_runtime10 = require("react/jsx-runtime");
var Wrapper2 = import_react_native_theming6.styled.View(() => ({
position: "relative"
}));
var Ref = import_react6.default.memo(
function Ref2(props) {
const {
index,
id: refId,
title = refId,
isLoading: isLoadingMain,
isBrowsing,
selectedStoryId,
loginUrl,
type,
expanded = true,
indexError,
previewInitialized,
setSelection
} = props;
const length = (0, import_react6.useMemo)(() => index ? Object.keys(index).length : 0, [index]);
const isLoadingInjected = type === "auto-inject" && !previewInitialized || type === "server-checked";
const isLoading = isLoadingMain || isLoadingInjected || type === "unknown";
const isError = !!indexError;
const isEmpty = !isLoading && length === 0;
const isAuthRequired = !!loginUrl && length === 0;
const state = (0, import_react_native_ui_common2.getStateType)(isLoading, isAuthRequired, isError, isEmpty);
const [isExpanded, setExpanded] = (0, import_react6.useState)(expanded);
(0, import_react6.useEffect)(() => {
if (index && selectedStoryId && index[selectedStoryId]) {
setExpanded(true);
}
}, [setExpanded, index, selectedStoryId]);
const onSelectStoryId = (0, import_react6.useCallback)(
(storyId) => {
setSelection({ refId, storyId });
},
[refId, setSelection]
);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: isExpanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Wrapper2, { "data-title": title, isMain: true, children: state === "ready" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Tree,
{
status: props.status,
isBrowsing,
isMain: true,
refId,
data: index,
docsMode: false,
selectedStoryId,
onSelectStoryId
}
) }) });
}
);
// src/Explorer.tsx
var import_react_native = require("react-native");
var import_jsx_runtime11 = require("react/jsx-runtime");
var import_react8 = require("react");
var Explorer = import_react7.default.memo(function Explorer2({
isLoading,
isBrowsing,
dataset,
selected,
setSelection
}) {
const containerRef = (0, import_react7.useRef)(null);
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react8.createElement)(
Ref,
{
...ref,
key: refId,
isLoading,
isBrowsing,
selectedStoryId: selected?.refId === ref.id ? selected.storyId : null,
setSelection
}
)) });
});
// src/Sidebar.tsx
var import_react12 = __toESM(require("react"));
var import_react_native_theming10 = require("@storybook/react-native-theming");
// src/Search.tsx
var import_bottom_sheet = require("@gorhom/bottom-sheet");
var import_react_native_theming8 = require("@storybook/react-native-theming");
var import_fuse = __toESM(require("fuse.js"));
var import_react9 = __toESM(require("react"));
var import_react_native2 = require("react-native");
// src/icon/CloseIcon.tsx
var import_react_native_svg7 = require("react-native-svg");
var import_jsx_runtime12 = require("react/jsx-runtime");
var CloseIcon = ({
color = "currentColor",
width = 14,
height = 14,
...props
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native_svg7.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_react_native_svg7.Path,
{
d: "M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_react_native_svg7.Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z",
fill: color
}
)
] });
};
// src/icon/SearchIcon.tsx
var import_react_native_svg8 = require("react-native-svg");
var import_react_native_theming7 = require("@storybook/react-native-theming");
var import_jsx_runtime13 = require("react/jsx-runtime");
var SearchIcon = ({ width = 14, height = 14, ...props }) => {
const theme = (0, import_react_native_theming7.useTheme)();
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg8.Svg, { width, height, viewBox: "0 0 14 14", fill: theme.color.dark, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_react_native_svg8.Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
}
) });
};
// src/Search.tsx
var import_react_native_ui_common3 = require("@storybook/react-native-ui-common");
var import_jsx_runtime14 = require("react/jsx-runtime");
var DEFAULT_MAX_SEARCH_RESULTS = 50;
var options = {
shouldSort: true,
tokenize: true,
findAllMatches: true,
includeScore: true,
includeMatches: true,
threshold: 0.2,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
{ name: "name", weight: 0.7 },
{ name: "path", weight: 0.3 }
]
};
var SearchIconWrapper = import_react_native_theming8.styled.View({
position: "absolute",
top: 0,
left: 8,
zIndex: 1,
pointerEvents: "none",
display: "flex",
flexDirection: "row",
alignItems: "center",
height: "100%"
});
var SearchField = import_react_native_theming8.styled.View({
display: "flex",
flexDirection: "column",
position: "relative"
});
var BottomSheetInput = (0, import_react_native_theming8.styled)(import_bottom_sheet.BottomSheetTextInput)(({ theme }) => ({
height: 32,
paddingLeft: 28,
paddingRight: 28,
paddingTop: import_react_native2.Platform.OS === "android" ? 0 : void 0,
paddingBottom: import_react_native2.Platform.OS === "android" ? 0 : void 0,
borderWidth: 1,
borderColor: theme.appBorderColor,
backgroundColor: "transparent",
borderRadius: 4,
fontSize: theme.typography.size.s1 + 1,
color: theme.color.defaultText,
width: "100%"
}));
var Input = (0, import_react_native_theming8.styled)(import_react_native2.TextInput)(({ theme }) => ({
height: 32,
paddingLeft: 28,
paddingRight: 28,
borderWidth: 1,
borderColor: theme.appBorderColor,
backgroundColor: "transparent",
borderRadius: 6,
fontSize: theme.typography.size.s1 + 1,
color: theme.color.defaultText,
width: "100%"
}));
var ClearIcon = import_react_native_theming8.styled.TouchableOpacity(({ theme }) => ({
position: "absolute",
top: 0,
bottom: 0,
right: 8,
zIndex: 1,
color: theme.textMutedColor,
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%"
}));
var Search = import_react9.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
const context = (0, import_bottom_sheet.useBottomSheetInternal)(true);
const isBottomSheet = context !== null;
const inputRef = (0, import_react9.useRef)(null);
const [inputValue, setInputValue] = (0, import_react9.useState)(initialQuery);
const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
const [allComponents, showAllComponents] = (0, import_react9.useState)(false);
const { scrollToSelectedNode } = useSelectedNode();
const selectStory = (0, import_react9.useCallback)(
(id, refId) => {
setSelection({ storyId: id, refId });
inputRef.current?.blur();
setIsOpen(false);
showAllComponents(false);
scrollToSelectedNode();
},
[scrollToSelectedNode, setSelection]
);
const getItemProps = (0, import_react9.useCallback)(
({ item: result }) => {
return {
icon: result?.item?.type === "component" ? "component" : "story",
result,
onPress: () => {
if (result?.item?.type === "story") {
selectStory(result.item.id, result.item.refId);
} else if (result?.item?.type === "component") {
selectStory(result.item.children[0], result.item.refId);
} else if ((0, import_react_native_ui_common3.isExpandType)(result) && result.showAll) {
result.showAll();
}
},
score: result.score,
refIndex: result.refIndex,
item: result.item,
matches: result.matches,
isHighlighted: false
};
},
[selectStory]
);
const makeFuse = (0, import_react9.useCallback)(() => {
const list = dataset.entries.reduce((acc, [refId, { index }]) => {
if (index) {
acc.push(
...Object.values(index).map((item) => {
return (0, import_react_native_ui_common3.searchItem)(item, dataset.hash[refId]);
})
);
}
return acc;
}, []);
return new import_fuse.default(list, options);
}, [dataset]);
const getResults = (0, import_react9.useCallback)(
(input2) => {
const fuse = makeFuse();
if (!input2) return [];
let results2 = [];
const resultIds = /* @__PURE__ */ new Set();
const distinctResults = fuse.search(input2).filter(({ item }) => {
if (!(item.type === "component" || item.type === "docs" || item.type === "story") || resultIds.has(item.parent)) {
return false;
}
resultIds.add(item.id);
return true;
});
if (distinctResults.length) {
results2 = distinctResults.slice(0, allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS);
if (distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
results2.push({
showAll: () => showAllComponents(true),
totalCount: distinctResults.length,
moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS
});
}
}
const lastViewed = !input2 && getLastViewed();
if (lastViewed && lastViewed.length) {
results2 = lastViewed.reduce((acc, { storyId, refId }) => {
const data = dataset.hash[refId];
if (data && data.index && data.index[storyId]) {
const story = data.index[storyId];
const item = story.type === "story" ? data.index[story.parent] : story;
if (!acc.some((res) => res.item.refId === refId && res.item.id === item.id)) {
acc.push({ item: (0, import_react_native_ui_common3.searchItem)(item, dataset.hash[refId]), matches: [], score: 0 });
}
}
return acc;
}, []);
}
return results2;
},
[allComponents, dataset.hash, getLastViewed, makeFuse]
);
const deferredQuery = (0, import_react9.useDeferredValue)(inputValue);
const input = deferredQuery ? deferredQuery.trim() : "";
const results = input ? getResults(input) : [];
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SearchField, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchIcon, {}) }),
isBottomSheet ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
BottomSheetInput,
{
ref: inputRef,
onChangeText: setInputValue,
onFocus: () => setIsOpen(true),
onBlur: () => setIsOpen(false)
}
) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input, { ref: inputRef, onChangeText: setInputValue, onFocus: () => setIsOpen(true) }),
isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
ClearIcon,
{
onPress: () => {
setInputValue("");
inputRef.current.clear();
},
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, {})
}
)
] }),
children({
query: input,
results,
isBrowsing: !isOpen || !inputValue.length,
closeMenu: () => {
},
getItemProps,
highlightedIndex: null
})
] });
});
// src/SearchResults.tsx
var import_react_native_theming9 = require("@storybook/react-native-theming");
var import_react10 = __toESM(require("react"));
var import_polished2 = require("polished");
var import_react_native_ui_common4 = require("@storybook/react-native-ui-common");
var import_react_native3 = require("react-native");
var import_jsx_runtime15 = require("react/jsx-runtime");
var import_react11 = require("react");
var ResultsList = import_react_native_theming9.styled.View({
margin: 0,
padding: 0,
marginTop: 8
});
var ResultRow = import_react_native_theming9.styled.TouchableOpacity(
({ theme, isHighlighted }) => ({
width: "100%",
border: "none",
cursor: "pointer",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
textAlign: "left",
color: theme.color.defaultText,
fontSize: theme.typography.size.s2,
backgroundColor: isHighlighted ? theme.background.hoverable : "transparent",
minHeight: 28,
borderRadius: 4,
gap: 6,
paddingTop: 7,
paddingBottom: 7,
paddingLeft: 8,
paddingRight: 8,
"&:hover, &:focus": {
backgroundColor: (0, import_polished2.transparentize)(0.93, theme.color.secondary),
outline: "none"
}
})
);
var IconWrapper = import_react_native_theming9.styled.View({
marginTop: 2
});
var ResultRowContent = import_react_native_theming9.styled.View(() => ({
display: "flex",
flexDirection: "column"
}));
var NoResults = import_react_native_theming9.styled.View(({ theme }) => ({
marginTop: 20,
textAlign: "center",
fontSize: theme.typography.size.s2,
lineHeight: 18,
color: theme.color.defaultText
}));
var Mark = import_react_native_theming9.styled.Text(({ theme }) => ({
backgroundColor: "transparent",
color: theme.color.secondary
}));
var MoreWrapper = import_react_native_theming9.styled.View({
marginTop: 8
});
var RecentlyOpenedTitle = import_react_native_theming9.styled.View(({ theme }) => ({
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
fontSize: theme.typography.size.s1 - 1,
fontWeight: theme.typography.weight.bold,
minHeight: 28,
// letterSpacing: '0.16em', <-- todo
textTransform: "uppercase",
color: theme.textMutedColor,
marginTop: 16,
marginBottom: 4,
alignItems: "center"
}));
var Highlight = import_react10.default.memo(
function Highlight2({ children, match }) {
if (!match) return children;
const { value, indices } = match;
const { nodes: result } = indices.reduce(
({ cursor, nodes }, [start, end], index, { length }) => {
nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: value.slice(cursor, start) }, `text-${index}`));
nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Mark, { children: value.slice(start, end + 1) }, `mark-${index}`));
if (index === length - 1) {
nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: value.slice(end + 1) }, `last-${index}`));
}
return { cursor: end + 1, nodes };
},
{ cursor: 0, nodes: [] }
);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: result }, `end-${match.key}`);
}
);
var Title = import_react_native_theming9.styled.Text(({ theme }) => ({
justifyContent: "flex-start",
color: theme.textMutedColor,
fontSize: theme.typography.size.s2
}));
var Path9 = import_react_native_theming9.styled.View(({ theme }) => ({
justifyContent: "flex-start",
marginVertical: 2,
color: theme.textMutedColor,
fontSize: theme.typography.size.s1 - 1,
flexDirection: "row"
}));
var PathText = import_react_native_theming9.styled.Text(({ theme }) => ({
fontSize: theme.typography.size.s1 - 1,
color: theme.textMutedColor
}));
var Result = import_react10.default.memo(function Result2({
item,
matches,
icon: _icon,
onPress,
...props
}) {
const press = (0, import_react10.useCallback)(
(event) => {
event.preventDefault();
onPress?.(event);
},
[onPress]
);
const nameMatch = matches.find((match) => match.key === "name");
const pathMatches = matches.filter((match) => match.key === "path");
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ResultRow, { ...props, onPress: press, children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(IconWrapper, { children: [
item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ComponentIcon, { width: "14", height: "14" }),
item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StoryIcon, { width: "14", height: "14" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Path9, { children: item.path.map((group, index) => {
const pathSeparator = index === item.path.length - 1 ? "" : "/";
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native3.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
Highlight,
{
match: pathMatches.find((match) => match.refIndex === index),
children: `${group}${pathSeparator}`
}
) }) }, index);
}) })
] })
] });
});
var Text = import_react_native_theming9.styled.Text(({ theme }) => ({
color: theme.color.defaultText
}));
var SearchResults = import_react10.default.memo(function SearchResults2({
query,
results,
closeMenu,
getItemProps,
highlightedIndex,
clearLastViewed
}) {
const handleClearLastViewed = () => {
clearLastViewed();
closeMenu();
};
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ResultsList, { children: [
results.length > 0 && !query ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(RecentlyOpenedTitle, { children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: "Recently opened" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_ui_common4.IconButton, { onPress: handleClearLastViewed })
] }) : null,
results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native3.View, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(NoResults, { children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { style: { marginBottom: 8 }, children: "No components found" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: "Find components by name or path." })
] }) }) : null,
results.map((result, index) => {
if ((0, import_react_native_ui_common4.isExpandType)(result)) {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_react_native_ui_common4.Button,
{
...result,
...getItemProps({ key: `${index}`, index, item: result }),
size: "small",
text: `Show ${result.moreCount} more results`
}
) }, "search-result-expand");
}
const { item } = result;
const key = `${item.refId}::${item.id}`;
return /* @__PURE__ */ (0, import_react11.createElement)(
Result,
{
...result,
...getItemProps({ key, index, item: result }),
isHighlighted: highlightedIndex === index,
key: item.id
}
);
})
] });
});
// src/Sidebar.tsx
var import_react_native_ui_common5 = require("@storybook/react-native-ui-common");
// src/constants.ts
var BREAKPOINT = 1e3;
var MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
var DEFAULT_REF_ID = "storybook_internal";
// src/Sidebar.tsx
var import_react_native4 = require("react-native");
var import_jsx_runtime16 = require("react/jsx-runtime");
var Container2 = import_react_native_theming10.styled.View(({ theme }) => ({
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
backgroundColor: theme.background.content
}));
var Top = import_react_native_theming10.styled.View({
paddingLeft: 4,
paddingRight: 4,
paddingTop: 16,
flex: 1,
flexDirection: "row"
});
var Swap = import_react12.default.memo(function Swap2({
children,
condition
}) {
const [a, b] = import_react12.default.Children.toArray(children);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native4.View, { style: { display: condition ? "flex" : "none" }, children: a }),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native4.View, { style: { display: condition ? "none" : "flex" }, children: b })
] });
});
var useCombination = (index, indexError, previewInitialized, status, refs) => {
const hash = (0, import_react12.useMemo)(
() => ({
[DEFAULT_REF_ID]: {
index,
indexError,
previewInitialized,
status,
title: null,
id: DEFAULT_REF_ID,
url: "iframe.html"
},
...refs
}),
[refs, index, indexError, previewInitialized, status]
);
return (0, import_react12.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
};
var Sidebar = import_react12.default.memo(function Sidebar2({
storyId = null,
refId = DEFAULT_REF_ID,
index,
indexError,
status,
previewInitialized,
refs = {},
setSelection
}) {
const selected = (0, import_react12.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
const dataset = useCombination(index, indexError, previewInitialized, status, refs);
const lastViewedProps = (0, import_react_native_ui_common5.useLastViewed)(selected);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Container2, { style: { paddingHorizontal: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Swap, { condition: isBrowsing, children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
Explorer,
{
dataset,
selected,
isLoading: false,
isBrowsing,
setSelection
}
),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
SearchResults,
{
query,
results,
closeMenu,
getItemProps,
highlightedIndex,
isLoading: false,
clearLastViewed: lastViewedProps.clearLastViewed
}
)
] }) }) }) });
});
// src/Layout.tsx
var import_bottom_sheet4 = require("@gorhom/bottom-sheet");
var import_portal = require("@gorhom/portal");
var import_react_native_theming15 = require("@storybook/react-native-theming");
var import_react_native_ui_common7 = require("@storybook/react-native-ui-common");
var import_react18 = require("react");
var import_react_native8 = require("react-native");
var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
var import_core_events = require("storybook/internal/core-events");
var import_manager_api2 = require("storybook/manager-api");
// src/icon/BottomBarToggleIcon.tsx
var import_react_native_svg9 = require("react-native-svg");
var import_jsx_runtime17 = require("react/jsx-runtime");
var BottomBarToggleIcon = ({
color = "currentColor",
width = 14,
height = 14,
...props
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native_svg9.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_react_native_svg9.Path,
{
d: "M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_react_native_svg9.Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z",
fill: color
}
)
] });
};
// src/icon/CloseFullscreenIcon.tsx
var import_react13 = require("react");
var import_react_native_svg10 = __toESM(require("react-native-svg"));
var import_react_native_theming11 = require("@storybook/react-native-theming");
var import_jsx_runtime18 = require("react/jsx-runtime");
function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
const theme = (0, import_react_native_theming11.useTheme)();
const fillColor = (0, import_react13.useMemo)(() => {
return color ?? theme.color.defaultText;
}, [color, theme.color.defaultText]);
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_svg10.default, { fill: fillColor, height, viewBox: "0 0 16 16", width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_svg10.Path, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.