storybook 10.2.0-alpha.14 → 10.2.0-alpha.16
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/_browser-chunks/{chunk-3PJE6VLG.js → chunk-ASKQZAOS.js} +1 -12
- package/dist/_browser-chunks/{chunk-BGSDJMFM.js → chunk-NVLTWT3B.js} +18 -6
- package/dist/_node-chunks/{builder-manager-5XVPVHCY.js → builder-manager-DQ6DNDHX.js} +12 -12
- package/dist/_node-chunks/{camelcase-FFGUJRYA.js → camelcase-ILOVTISA.js} +7 -7
- package/dist/_node-chunks/{chunk-E6HZLFOP.js → chunk-3PMH6BEP.js} +6 -6
- package/dist/_node-chunks/{chunk-2YADPD4P.js → chunk-47ZRY4XW.js} +6 -6
- package/dist/_node-chunks/{chunk-CMIHYY2B.js → chunk-5E2HAJXY.js} +6 -6
- package/dist/_node-chunks/{chunk-YTUKBZV2.js → chunk-6QEWR44T.js} +7 -7
- package/dist/_node-chunks/{chunk-QMQVY3KQ.js → chunk-CFXIZS6A.js} +7 -7
- package/dist/_node-chunks/chunk-DGLVYUKY.js +61 -0
- package/dist/_node-chunks/{chunk-6GTCCSGS.js → chunk-FNQ5WLS5.js} +7 -7
- package/dist/_node-chunks/{chunk-QIMAARKG.js → chunk-IVYTDHSW.js} +7 -7
- package/dist/_node-chunks/{chunk-NTVADDN6.js → chunk-JXU4P6K3.js} +6 -6
- package/dist/_node-chunks/{chunk-JFZSVDUQ.js → chunk-K6FMM5LS.js} +6 -6
- package/dist/_node-chunks/{chunk-GCGJVMS3.js → chunk-KAAWGCHX.js} +12 -12
- package/dist/_node-chunks/{chunk-BVSGQAFJ.js → chunk-LOJ73E6E.js} +9 -9
- package/dist/_node-chunks/{chunk-5QADKW4W.js → chunk-M6AUSQA3.js} +20 -20
- package/dist/_node-chunks/chunk-MSK3YTQT.js +23 -0
- package/dist/_node-chunks/{chunk-3VHD3RGW.js → chunk-OKUHCLLJ.js} +8 -8
- package/dist/_node-chunks/{chunk-GCZN63RS.js → chunk-PGYIGHRK.js} +9 -9
- package/dist/_node-chunks/{chunk-AAS5TNPH.js → chunk-RIEIAV32.js} +7 -7
- package/dist/_node-chunks/chunk-SPPXK6CQ.js +18 -0
- package/dist/_node-chunks/{chunk-HCZ44VWL.js → chunk-SWN4HCJE.js} +6 -6
- package/dist/_node-chunks/{chunk-WSH26TMB.js → chunk-TDBTCAEB.js} +12 -12
- package/dist/_node-chunks/{chunk-TXHI4M3M.js → chunk-TLGG6YAX.js} +29 -26
- package/dist/_node-chunks/{chunk-OYPD7MWQ.js → chunk-TTACLBSG.js} +7 -7
- package/dist/_node-chunks/{chunk-HMYS7PGR.js → chunk-WIOSV6HC.js} +6 -6
- package/dist/_node-chunks/{chunk-MBD6J24T.js → chunk-WVXPIXUS.js} +7 -7
- package/dist/_node-chunks/{chunk-XDKXHH75.js → chunk-XJMJA2L4.js} +13 -13
- package/dist/_node-chunks/{chunk-AKBKA7MR.js → chunk-XWGABQX7.js} +6 -6
- package/dist/_node-chunks/{chunk-YUBIHW7G.js → chunk-YFUVKP3W.js} +7 -7
- package/dist/_node-chunks/{chunk-APXUJGPH.js → chunk-ZN5DGHF3.js} +10 -10
- package/dist/_node-chunks/{globby-WIEDAEV7.js → globby-A35XB3PP.js} +9 -9
- package/dist/_node-chunks/{lib-2RMM65EQ.js → lib-D5I6ETBH.js} +7 -7
- package/dist/_node-chunks/{mdx-N42X6CFJ-AFWG3A6F.js → mdx-N42X6CFJ-DZ4EAFAE.js} +8 -8
- package/dist/_node-chunks/{p-limit-JNVCICJD.js → p-limit-2CRKZRXN.js} +7 -7
- package/dist/babel/index.js +10 -10
- package/dist/bin/core.js +12 -12
- package/dist/bin/dispatcher.js +11 -11
- package/dist/bin/loader.js +9 -9
- package/dist/cli/index.d.ts +176 -176
- package/dist/cli/index.js +18 -18
- package/dist/common/index.js +19 -19
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +167 -166
- package/dist/core-events/index.d.ts +4 -4
- package/dist/core-server/index.d.ts +11 -1
- package/dist/core-server/index.js +217 -76
- package/dist/core-server/presets/common-manager.js +176 -134
- package/dist/core-server/presets/common-override-preset.js +9 -9
- package/dist/core-server/presets/common-preset.js +27 -26
- package/dist/csf/index.d.ts +132 -12
- package/dist/csf/index.js +5 -2
- package/dist/csf-tools/index.js +10 -10
- package/dist/docs-tools/index.d.ts +2 -2
- package/dist/manager/globals-runtime.js +97 -94
- package/dist/manager/runtime.js +1755 -985
- package/dist/manager-api/index.d.ts +1 -1
- package/dist/manager-api/index.js +10 -8
- package/dist/mocking-utils/index.js +8 -8
- package/dist/node-logger/index.js +9 -9
- package/dist/preview/runtime.js +18 -6
- package/dist/preview-api/index.d.ts +67 -68
- package/dist/preview-api/index.js +1 -1
- package/dist/server-errors.js +11 -11
- package/dist/telemetry/index.js +22 -22
- package/dist/types/index.d.ts +12 -6
- package/dist/viewport/index.d.ts +5 -3
- package/dist/viewport/index.js +12 -3
- package/package.json +2 -2
- package/dist/_node-chunks/chunk-N72VKZTH.js +0 -23
- package/dist/_node-chunks/chunk-NKHFAHA7.js +0 -18
- package/dist/_node-chunks/chunk-ZJ3OV7OO.js +0 -61
- package/dist/_node-chunks/dist-OBG2P3MZ.js +0 -121
|
@@ -49,9 +49,8 @@ import {
|
|
|
49
49
|
PARAM_KEY
|
|
50
50
|
} from "../../_browser-chunks/chunk-6XWLIJQL.js";
|
|
51
51
|
import {
|
|
52
|
-
MINIMAL_VIEWPORTS
|
|
53
|
-
|
|
54
|
-
} from "../../_browser-chunks/chunk-3PJE6VLG.js";
|
|
52
|
+
MINIMAL_VIEWPORTS
|
|
53
|
+
} from "../../_browser-chunks/chunk-ASKQZAOS.js";
|
|
55
54
|
import {
|
|
56
55
|
ADDON_ID as ADDON_ID2,
|
|
57
56
|
PARAM_KEY as PARAM_KEY2,
|
|
@@ -6882,164 +6881,207 @@ import * as React67 from "react";
|
|
|
6882
6881
|
import { addons as addons7, types as types7 } from "storybook/manager-api";
|
|
6883
6882
|
|
|
6884
6883
|
// src/viewport/components/Tool.tsx
|
|
6885
|
-
import React66, {
|
|
6886
|
-
import {
|
|
6887
|
-
import { GrowIcon
|
|
6888
|
-
import {
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
6893
|
-
|
|
6894
|
-
|
|
6895
|
-
|
|
6896
|
-
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
|
|
6900
|
-
|
|
6901
|
-
|
|
6902
|
-
|
|
6903
|
-
|
|
6904
|
-
|
|
6905
|
-
|
|
6906
|
-
|
|
6907
|
-
|
|
6908
|
-
|
|
6909
|
-
|
|
6910
|
-
|
|
6911
|
-
|
|
6912
|
-
|
|
6913
|
-
|
|
6914
|
-
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
6923
|
-
|
|
6924
|
-
|
|
6925
|
-
|
|
6926
|
-
|
|
6884
|
+
import React66, { useMemo as useMemo7 } from "react";
|
|
6885
|
+
import { Select as Select2 } from "storybook/internal/components";
|
|
6886
|
+
import { GrowIcon } from "@storybook/icons";
|
|
6887
|
+
import { styled as styled33 } from "storybook/theming";
|
|
6888
|
+
|
|
6889
|
+
// src/viewport/useViewport.ts
|
|
6890
|
+
import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo6, useRef as useRef7 } from "react";
|
|
6891
|
+
import { useGlobals as useGlobals5, useParameter as useParameter4, useStorybookApi as useStorybookApi10 } from "storybook/manager-api";
|
|
6892
|
+
var URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/, VIEWPORT_MIN_WIDTH = 40, VIEWPORT_MIN_HEIGHT = 40, cycle = (viewports, current, direction = 1) => {
|
|
6893
|
+
let keys = Object.keys(viewports), nextIndex = (current ? keys.indexOf(current) : -1) + direction;
|
|
6894
|
+
return nextIndex < 0 ? keys[keys.length - 1] : nextIndex >= keys.length ? keys[0] : keys[nextIndex];
|
|
6895
|
+
}, normalizeGlobal = (value2, defaultIsRotated) => typeof value2 == "string" ? { value: value2, isRotated: defaultIsRotated } : { value: value2?.value, isRotated: value2?.isRotated ?? defaultIsRotated }, parseGlobals = (globals, storyGlobals, userGlobals, options, lastSelectedOption, disable, viewMode) => {
|
|
6896
|
+
if (viewMode !== "story")
|
|
6897
|
+
return {
|
|
6898
|
+
name: "Responsive",
|
|
6899
|
+
type: "desktop",
|
|
6900
|
+
width: "100%",
|
|
6901
|
+
height: "100%",
|
|
6902
|
+
value: "100pct-100pct",
|
|
6903
|
+
option: void 0,
|
|
6904
|
+
isCustom: !1,
|
|
6905
|
+
isDefault: !0,
|
|
6906
|
+
isLocked: !0,
|
|
6907
|
+
isRotated: !1
|
|
6908
|
+
};
|
|
6909
|
+
let global4 = normalizeGlobal(globals?.[PARAM_KEY2]), userGlobal = normalizeGlobal(userGlobals?.[PARAM_KEY2]), storyGlobal = normalizeGlobal(storyGlobals?.[PARAM_KEY2]), value2 = userGlobal?.value ?? storyGlobal?.value ?? global4?.value, isRotated = userGlobal?.isRotated ?? storyGlobal?.isRotated ?? global4?.isRotated ?? !1, keys = Object.keys(options), isLocked = disable || PARAM_KEY2 in storyGlobals || !keys.length, [match, vx, ux, vy, uy] = value2?.match(URL_VALUE_PATTERN) || [];
|
|
6910
|
+
if (match) {
|
|
6911
|
+
let x2 = ux && ux !== "px" ? vx : Math.max(Number(vx), VIEWPORT_MIN_WIDTH), y2 = uy && uy !== "px" ? vy : Math.max(Number(vy), VIEWPORT_MIN_HEIGHT), width = `${x2}${ux === "pct" ? "%" : ux || "px"}`, height = `${y2}${uy === "pct" ? "%" : uy || "px"}`, selection = lastSelectedOption ? options[lastSelectedOption] : void 0;
|
|
6912
|
+
return {
|
|
6913
|
+
name: selection?.name ?? "Custom",
|
|
6914
|
+
type: selection?.type ?? "other",
|
|
6915
|
+
width: isRotated ? height : width,
|
|
6916
|
+
height: isRotated ? width : height,
|
|
6917
|
+
value: match,
|
|
6918
|
+
option: void 0,
|
|
6919
|
+
isCustom: !0,
|
|
6920
|
+
isDefault: !1,
|
|
6921
|
+
isLocked,
|
|
6922
|
+
isRotated
|
|
6923
|
+
};
|
|
6924
|
+
}
|
|
6925
|
+
if (value2 && keys.length) {
|
|
6926
|
+
let { name, styles, type = "other" } = options[value2] ?? options[keys[0]];
|
|
6927
|
+
return {
|
|
6928
|
+
name,
|
|
6929
|
+
type,
|
|
6930
|
+
width: isRotated ? styles.height : styles.width,
|
|
6931
|
+
height: isRotated ? styles.width : styles.height,
|
|
6932
|
+
value: value2,
|
|
6933
|
+
option: value2,
|
|
6934
|
+
isCustom: !1,
|
|
6935
|
+
isDefault: !1,
|
|
6936
|
+
isLocked,
|
|
6937
|
+
isRotated
|
|
6938
|
+
};
|
|
6939
|
+
}
|
|
6940
|
+
return {
|
|
6941
|
+
name: "Responsive",
|
|
6942
|
+
type: "desktop",
|
|
6943
|
+
width: "100%",
|
|
6944
|
+
height: "100%",
|
|
6945
|
+
value: "100pct-100pct",
|
|
6946
|
+
option: void 0,
|
|
6947
|
+
isCustom: !1,
|
|
6948
|
+
isDefault: !0,
|
|
6949
|
+
isLocked,
|
|
6950
|
+
isRotated: !1
|
|
6951
|
+
};
|
|
6952
|
+
}, useViewport = () => {
|
|
6953
|
+
let api = useStorybookApi10(), { viewMode } = api.getUrlState(), lastSelectedOption = useRef7(), parameter = useParameter4(PARAM_KEY2), [globals, updateGlobals, storyGlobals, userGlobals] = useGlobals5(), { options = MINIMAL_VIEWPORTS, disable = !1 } = parameter || {}, { name, type, width, height, value: value2, option, isCustom, isDefault, isLocked, isRotated } = parseGlobals(
|
|
6954
|
+
globals,
|
|
6955
|
+
storyGlobals,
|
|
6956
|
+
userGlobals,
|
|
6957
|
+
options,
|
|
6958
|
+
lastSelectedOption.current,
|
|
6959
|
+
disable,
|
|
6960
|
+
viewMode
|
|
6961
|
+
), update = useCallback10(
|
|
6962
|
+
(input) => updateGlobals({ [PARAM_KEY2]: input }),
|
|
6963
|
+
[updateGlobals]
|
|
6964
|
+
), resize = useCallback10(
|
|
6965
|
+
(width2, height2) => {
|
|
6966
|
+
let w2 = width2.replace(/px$/, "").replace(/%$/, "pct"), h2 = height2.replace(/px$/, "").replace(/%$/, "pct"), value3 = isRotated ? `${h2}-${w2}` : `${w2}-${h2}`, [match, vx, ux, vy, uy] = value3.match(URL_VALUE_PATTERN) || [];
|
|
6967
|
+
match && (ux || Number(vx) >= 40) && (uy || Number(vy) >= 40) && update({ value: match, isRotated });
|
|
6968
|
+
},
|
|
6969
|
+
[update, isRotated]
|
|
6970
|
+
);
|
|
6971
|
+
return useEffect18(() => {
|
|
6972
|
+
PARAM_KEY2 in storyGlobals && (update(normalizeGlobal(storyGlobals?.[PARAM_KEY2], !1)), lastSelectedOption.current = void 0);
|
|
6973
|
+
}, [storyGlobals, update]), useEffect18(() => {
|
|
6974
|
+
option && (Object.hasOwn(options, option) ? lastSelectedOption.current = option : (lastSelectedOption.current = void 0, update(normalizeGlobal(storyGlobals?.[PARAM_KEY2], !1))));
|
|
6975
|
+
}, [storyGlobals, options, option, update]), useEffect18(() => {
|
|
6976
|
+
api.setAddonShortcut(ADDON_ID2, {
|
|
6977
|
+
label: "Next viewport",
|
|
6978
|
+
defaultShortcut: ["alt", "V"],
|
|
6979
|
+
actionName: "next",
|
|
6980
|
+
action: () => update({ value: cycle(options, lastSelectedOption.current), isRotated })
|
|
6981
|
+
}), api.setAddonShortcut(ADDON_ID2, {
|
|
6982
|
+
label: "Previous viewport",
|
|
6983
|
+
defaultShortcut: ["alt", "shift", "V"],
|
|
6984
|
+
actionName: "previous",
|
|
6985
|
+
action: () => update({ value: cycle(options, lastSelectedOption.current, -1), isRotated })
|
|
6986
|
+
}), api.setAddonShortcut(ADDON_ID2, {
|
|
6987
|
+
label: "Reset viewport",
|
|
6988
|
+
defaultShortcut: ["alt", "control", "V"],
|
|
6989
|
+
actionName: "reset",
|
|
6990
|
+
action: () => update({ value: void 0, isRotated: !1 })
|
|
6991
|
+
});
|
|
6992
|
+
}, [api, update, options, isRotated]), useMemo6(
|
|
6993
|
+
() => ({
|
|
6994
|
+
name,
|
|
6995
|
+
type,
|
|
6996
|
+
width,
|
|
6997
|
+
height,
|
|
6998
|
+
value: value2,
|
|
6999
|
+
option,
|
|
7000
|
+
isCustom,
|
|
7001
|
+
isDefault,
|
|
7002
|
+
isLocked,
|
|
7003
|
+
isRotated,
|
|
7004
|
+
options,
|
|
7005
|
+
lastSelectedOption: lastSelectedOption.current,
|
|
7006
|
+
resize,
|
|
7007
|
+
reset: () => update({ value: void 0, isRotated: !1 }),
|
|
7008
|
+
rotate: () => update({ value: value2, isRotated: !isRotated }),
|
|
7009
|
+
select: (value3) => update({ value: value3, isRotated })
|
|
7010
|
+
}),
|
|
7011
|
+
[
|
|
7012
|
+
name,
|
|
7013
|
+
type,
|
|
7014
|
+
width,
|
|
7015
|
+
height,
|
|
7016
|
+
value2,
|
|
7017
|
+
option,
|
|
7018
|
+
isCustom,
|
|
7019
|
+
isDefault,
|
|
7020
|
+
isRotated,
|
|
7021
|
+
isLocked,
|
|
7022
|
+
options,
|
|
7023
|
+
resize,
|
|
7024
|
+
update
|
|
7025
|
+
]
|
|
7026
|
+
);
|
|
6927
7027
|
};
|
|
6928
7028
|
|
|
6929
|
-
// src/viewport/
|
|
6930
|
-
import React65
|
|
6931
|
-
import { BrowserIcon, MobileIcon, TabletIcon } from "@storybook/icons";
|
|
6932
|
-
|
|
6933
|
-
var ActiveViewportSize = styled33.div({
|
|
6934
|
-
display: "inline-flex",
|
|
6935
|
-
alignItems: "center"
|
|
6936
|
-
}), ActiveViewportLabel = styled33.div(({ theme: theme3 }) => ({
|
|
6937
|
-
display: "inline-block",
|
|
6938
|
-
textDecoration: "none",
|
|
6939
|
-
padding: 10,
|
|
6940
|
-
fontWeight: theme3.typography.weight.bold,
|
|
6941
|
-
fontSize: theme3.typography.size.s2 - 1,
|
|
6942
|
-
lineHeight: "1",
|
|
6943
|
-
height: 40,
|
|
6944
|
-
border: "none",
|
|
6945
|
-
borderTop: "3px solid transparent",
|
|
6946
|
-
borderBottom: "3px solid transparent",
|
|
6947
|
-
background: "transparent"
|
|
6948
|
-
})), iconsMap = {
|
|
7029
|
+
// src/viewport/viewportIcons.tsx
|
|
7030
|
+
import React65 from "react";
|
|
7031
|
+
import { BrowserIcon, DiamondIcon, MobileIcon, TabletIcon, WatchIcon } from "@storybook/icons";
|
|
7032
|
+
var iconsMap = {
|
|
6949
7033
|
desktop: React65.createElement(BrowserIcon, null),
|
|
6950
7034
|
mobile: React65.createElement(MobileIcon, null),
|
|
6951
7035
|
tablet: React65.createElement(TabletIcon, null),
|
|
6952
|
-
|
|
7036
|
+
watch: React65.createElement(WatchIcon, null),
|
|
7037
|
+
other: React65.createElement(DiamondIcon, null)
|
|
6953
7038
|
};
|
|
6954
7039
|
|
|
6955
7040
|
// src/viewport/components/Tool.tsx
|
|
6956
|
-
var
|
|
6957
|
-
|
|
6958
|
-
|
|
6959
|
-
|
|
6960
|
-
|
|
6961
|
-
|
|
6962
|
-
|
|
6963
|
-
|
|
6964
|
-
|
|
6965
|
-
|
|
6966
|
-
|
|
6967
|
-
return disable ? null : React66.createElement(
|
|
6968
|
-
Pure2,
|
|
6969
|
-
{
|
|
6970
|
-
item,
|
|
6971
|
-
updateGlobals,
|
|
6972
|
-
viewportMap: options,
|
|
6973
|
-
viewportName,
|
|
6974
|
-
isRotated,
|
|
6975
|
-
isLocked,
|
|
6976
|
-
width,
|
|
6977
|
-
height
|
|
6978
|
-
}
|
|
6979
|
-
);
|
|
6980
|
-
}, FirstDimension = styled34(ActiveViewportLabel)({
|
|
6981
|
-
order: 1
|
|
6982
|
-
}), DimensionSeparator = styled34.div({
|
|
6983
|
-
order: 2
|
|
6984
|
-
}), LastDimension = styled34(ActiveViewportLabel)({
|
|
6985
|
-
order: 3
|
|
6986
|
-
}), Pure2 = React66.memo(function(props) {
|
|
6987
|
-
let { item, viewportMap, viewportName, isRotated, updateGlobals, isLocked, width, height } = props, update = useCallback10(
|
|
6988
|
-
(input) => updateGlobals({ [PARAM_KEY2]: input }),
|
|
6989
|
-
[updateGlobals]
|
|
6990
|
-
), options = useMemo6(
|
|
6991
|
-
() => Object.entries(viewportMap).map(([k2, value2]) => ({
|
|
7041
|
+
var Dimensions = styled33.div(({ theme: theme3 }) => ({
|
|
7042
|
+
display: "flex",
|
|
7043
|
+
gap: 2,
|
|
7044
|
+
marginLeft: 20,
|
|
7045
|
+
fontFamily: theme3.typography.fonts.mono,
|
|
7046
|
+
fontSize: theme3.typography.size.s1 - 1,
|
|
7047
|
+
fontWeight: theme3.typography.weight.regular,
|
|
7048
|
+
color: theme3.textMutedColor
|
|
7049
|
+
})), ViewportTool = () => {
|
|
7050
|
+
let { name, value: value2, isDefault, isLocked, options: viewportMap, reset, select } = useViewport(), options = useMemo7(
|
|
7051
|
+
() => Object.entries(viewportMap).map(([k2, value3]) => ({
|
|
6992
7052
|
value: k2,
|
|
6993
|
-
title:
|
|
6994
|
-
icon: iconsMap[
|
|
7053
|
+
title: value3.name,
|
|
7054
|
+
icon: iconsMap[value3.type],
|
|
7055
|
+
right: React66.createElement(Dimensions, null, React66.createElement("span", null, value3.styles.width.replace("px", "")), React66.createElement("span", null, "\xD7"), React66.createElement("span", null, value3.styles.height.replace("px", "")))
|
|
6995
7056
|
})),
|
|
6996
7057
|
[viewportMap]
|
|
6997
7058
|
);
|
|
6998
|
-
return React66.createElement(
|
|
7059
|
+
return React66.createElement(
|
|
6999
7060
|
Select2,
|
|
7000
7061
|
{
|
|
7001
7062
|
resetLabel: "Reset viewport",
|
|
7002
|
-
onReset:
|
|
7063
|
+
onReset: reset,
|
|
7003
7064
|
key: "viewport",
|
|
7004
7065
|
disabled: isLocked,
|
|
7005
7066
|
ariaLabel: isLocked ? "Viewport size set by story parameters" : "Viewport size",
|
|
7006
|
-
ariaDescription: "Select a viewport
|
|
7007
|
-
tooltip: isLocked ? "Viewport
|
|
7008
|
-
defaultOptions:
|
|
7067
|
+
ariaDescription: "Select a viewport among predefined options for the preview area, or reset to the default viewport.",
|
|
7068
|
+
tooltip: isLocked ? "Viewport set by story parameters" : "Change viewport",
|
|
7069
|
+
defaultOptions: value2,
|
|
7009
7070
|
options,
|
|
7010
|
-
onSelect: (selected) =>
|
|
7071
|
+
onSelect: (selected) => select(selected),
|
|
7011
7072
|
icon: React66.createElement(GrowIcon, null)
|
|
7012
7073
|
},
|
|
7013
|
-
|
|
7014
|
-
)
|
|
7015
|
-
|
|
7016
|
-
{
|
|
7017
|
-
styles: {
|
|
7018
|
-
'iframe[data-is-storybook="true"]': { width, height }
|
|
7019
|
-
}
|
|
7020
|
-
}
|
|
7021
|
-
), item !== responsiveViewport ? React66.createElement(ActiveViewportSize, null, React66.createElement(FirstDimension, { title: "Viewport width" }, React66.createElement("span", { className: "sb-sr-only" }, "Viewport width: "), width.replace("px", "")), isLocked && React66.createElement(DimensionSeparator, null, "/"), React66.createElement(LastDimension, { title: "Viewport height" }, React66.createElement("span", { className: "sb-sr-only" }, "Viewport height: "), height.replace("px", "")), !isLocked && React66.createElement(DimensionSeparator, null, React66.createElement(
|
|
7022
|
-
Button9,
|
|
7023
|
-
{
|
|
7024
|
-
key: "viewport-rotate",
|
|
7025
|
-
padding: "small",
|
|
7026
|
-
variant: "ghost",
|
|
7027
|
-
ariaLabel: "Rotate viewport",
|
|
7028
|
-
onClick: () => {
|
|
7029
|
-
update({ value: viewportName, isRotated: !isRotated });
|
|
7030
|
-
}
|
|
7031
|
-
},
|
|
7032
|
-
React66.createElement(TransferIcon, null)
|
|
7033
|
-
))) : null);
|
|
7034
|
-
});
|
|
7074
|
+
isDefault ? null : name
|
|
7075
|
+
);
|
|
7076
|
+
};
|
|
7035
7077
|
|
|
7036
7078
|
// src/viewport/manager.tsx
|
|
7037
|
-
var manager_default7 = addons7.register(ADDON_ID2, (
|
|
7079
|
+
var manager_default7 = addons7.register(ADDON_ID2, () => {
|
|
7038
7080
|
globalThis?.FEATURES?.viewport && addons7.add(TOOL_ID, {
|
|
7039
7081
|
title: "viewport / media-queries",
|
|
7040
7082
|
type: types7.TOOL,
|
|
7041
7083
|
match: ({ viewMode, tabId }) => viewMode === "story" && !tabId,
|
|
7042
|
-
render: () => React67.createElement(ViewportTool,
|
|
7084
|
+
render: () => React67.createElement(ViewportTool, null)
|
|
7043
7085
|
});
|
|
7044
7086
|
});
|
|
7045
7087
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import CJS_COMPAT_NODE_URL_4zwbyhk64wx from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_4zwbyhk64wx from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_4zwbyhk64wx from "node:module";
|
|
4
4
|
|
|
5
|
-
var __filename =
|
|
6
|
-
var __dirname =
|
|
7
|
-
var require =
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_4zwbyhk64wx.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_4zwbyhk64wx.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_4zwbyhk64wx.createRequire(import.meta.url);
|
|
8
8
|
|
|
9
9
|
// ------------------------------------------------------------
|
|
10
10
|
// end of CJS compatibility banner, injected by Storybook's esbuild configuration
|
|
11
11
|
// ------------------------------------------------------------
|
|
12
12
|
import {
|
|
13
13
|
glob
|
|
14
|
-
} from "../../_node-chunks/chunk-
|
|
14
|
+
} from "../../_node-chunks/chunk-6QEWR44T.js";
|
|
15
15
|
import {
|
|
16
16
|
slash
|
|
17
|
-
} from "../../_node-chunks/chunk-
|
|
18
|
-
import "../../_node-chunks/chunk-
|
|
17
|
+
} from "../../_node-chunks/chunk-47ZRY4XW.js";
|
|
18
|
+
import "../../_node-chunks/chunk-3PMH6BEP.js";
|
|
19
19
|
|
|
20
20
|
// src/core-server/utils/remove-mdx-entries.ts
|
|
21
21
|
import { isAbsolute, join, relative } from "node:path";
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import CJS_COMPAT_NODE_URL_4zwbyhk64wx from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_4zwbyhk64wx from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_4zwbyhk64wx from "node:module";
|
|
4
4
|
|
|
5
|
-
var __filename =
|
|
6
|
-
var __dirname =
|
|
7
|
-
var require =
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_4zwbyhk64wx.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_4zwbyhk64wx.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_4zwbyhk64wx.createRequire(import.meta.url);
|
|
8
8
|
|
|
9
9
|
// ------------------------------------------------------------
|
|
10
10
|
// end of CJS compatibility banner, injected by Storybook's esbuild configuration
|
|
11
11
|
// ------------------------------------------------------------
|
|
12
|
-
import "../../_node-chunks/chunk-
|
|
12
|
+
import "../../_node-chunks/chunk-KAAWGCHX.js";
|
|
13
13
|
import {
|
|
14
14
|
parseStaticDir,
|
|
15
15
|
sendTelemetryError,
|
|
16
16
|
throttle
|
|
17
|
-
} from "../../_node-chunks/chunk-
|
|
18
|
-
import "../../_node-chunks/chunk-
|
|
19
|
-
import "../../_node-chunks/chunk-
|
|
20
|
-
import "../../_node-chunks/chunk-
|
|
17
|
+
} from "../../_node-chunks/chunk-XJMJA2L4.js";
|
|
18
|
+
import "../../_node-chunks/chunk-MSK3YTQT.js";
|
|
19
|
+
import "../../_node-chunks/chunk-CFXIZS6A.js";
|
|
20
|
+
import "../../_node-chunks/chunk-K6FMM5LS.js";
|
|
21
21
|
import {
|
|
22
22
|
globalSettings
|
|
23
|
-
} from "../../_node-chunks/chunk-
|
|
23
|
+
} from "../../_node-chunks/chunk-LOJ73E6E.js";
|
|
24
24
|
import {
|
|
25
25
|
invariant
|
|
26
|
-
} from "../../_node-chunks/chunk-
|
|
27
|
-
import "../../_node-chunks/chunk-
|
|
26
|
+
} from "../../_node-chunks/chunk-JXU4P6K3.js";
|
|
27
|
+
import "../../_node-chunks/chunk-SWN4HCJE.js";
|
|
28
28
|
import {
|
|
29
29
|
resolvePackageDir
|
|
30
|
-
} from "../../_node-chunks/chunk-
|
|
30
|
+
} from "../../_node-chunks/chunk-RIEIAV32.js";
|
|
31
31
|
import {
|
|
32
32
|
isAbsolute,
|
|
33
33
|
join
|
|
34
|
-
} from "../../_node-chunks/chunk-
|
|
34
|
+
} from "../../_node-chunks/chunk-XWGABQX7.js";
|
|
35
35
|
import {
|
|
36
36
|
loadConfig
|
|
37
|
-
} from "../../_node-chunks/chunk-
|
|
38
|
-
import "../../_node-chunks/chunk-
|
|
37
|
+
} from "../../_node-chunks/chunk-TLGG6YAX.js";
|
|
38
|
+
import "../../_node-chunks/chunk-5E2HAJXY.js";
|
|
39
39
|
import {
|
|
40
40
|
require_dist
|
|
41
|
-
} from "../../_node-chunks/chunk-
|
|
42
|
-
import "../../_node-chunks/chunk-
|
|
43
|
-
import "../../_node-chunks/chunk-
|
|
41
|
+
} from "../../_node-chunks/chunk-YFUVKP3W.js";
|
|
42
|
+
import "../../_node-chunks/chunk-PGYIGHRK.js";
|
|
43
|
+
import "../../_node-chunks/chunk-WVXPIXUS.js";
|
|
44
44
|
import {
|
|
45
45
|
require_picocolors
|
|
46
|
-
} from "../../_node-chunks/chunk-
|
|
46
|
+
} from "../../_node-chunks/chunk-FNQ5WLS5.js";
|
|
47
47
|
import {
|
|
48
48
|
__commonJS,
|
|
49
49
|
__require,
|
|
50
50
|
__toESM
|
|
51
|
-
} from "../../_node-chunks/chunk-
|
|
51
|
+
} from "../../_node-chunks/chunk-3PMH6BEP.js";
|
|
52
52
|
|
|
53
53
|
// ../../node_modules/shell-quote/quote.js
|
|
54
54
|
var require_quote = __commonJS({
|
|
@@ -516,7 +516,7 @@ import { isCsfFactoryPreview } from "storybook/internal/csf-tools";
|
|
|
516
516
|
var import_ts_dedent = __toESM(require_dist(), 1);
|
|
517
517
|
|
|
518
518
|
// src/core-server/utils/get-component-variable-name.ts
|
|
519
|
-
var getComponentVariableName = async (name) => (await import("../../_node-chunks/camelcase-
|
|
519
|
+
var getComponentVariableName = async (name) => (await import("../../_node-chunks/camelcase-ILOVTISA.js")).default(name.replace(/^[^a-zA-Z_$]*/, ""), { pascalCase: !0 }).replace(/[^a-zA-Z_$]+/, "");
|
|
520
520
|
|
|
521
521
|
// src/core-server/utils/new-story-templates/csf-factory-template.ts
|
|
522
522
|
async function getCsfFactoryTemplateForNewStoryFile(data) {
|
|
@@ -781,7 +781,7 @@ async function searchFiles({
|
|
|
781
781
|
ignoredFiles = IGNORED_FILES,
|
|
782
782
|
fileExtensions = FILE_EXTENSIONS
|
|
783
783
|
}) {
|
|
784
|
-
let { globby, isDynamicPattern } = await import("../../_node-chunks/globby-
|
|
784
|
+
let { globby, isDynamicPattern } = await import("../../_node-chunks/globby-A35XB3PP.js"), hasSearchSpecialGlobChars = isDynamicPattern(searchQuery, { cwd }), searchQueryHasExtension = /(\.[a-z]+)$/i.test(searchQuery), fileExtensionsPattern = `{${fileExtensions.join(",")}}`, globbedSearchQuery = hasSearchSpecialGlobChars ? searchQuery : searchQueryHasExtension ? [`**/*${searchQuery}*`, `**/*${searchQuery}*/**`] : [
|
|
785
785
|
`**/*${searchQuery}*.${fileExtensionsPattern}`,
|
|
786
786
|
`**/*${searchQuery}*/**/*.${fileExtensionsPattern}`
|
|
787
787
|
];
|
|
@@ -1495,7 +1495,8 @@ var interpolate = (string, data = {}) => Object.entries(data).reduce((acc, [k, v
|
|
|
1495
1495
|
actions: !0,
|
|
1496
1496
|
backgrounds: !0,
|
|
1497
1497
|
outline: !0,
|
|
1498
|
-
measure: !0
|
|
1498
|
+
measure: !0,
|
|
1499
|
+
sidebarOnboardingChecklist: !0
|
|
1499
1500
|
}), csfIndexer = {
|
|
1500
1501
|
test: /(stories|story)\.(m?js|ts)x?$/,
|
|
1501
1502
|
createIndex: async (fileName, options) => (await readCsf2(fileName, options)).parse().indexInputs
|