react-cosmos-ui 6.0.0-beta.1 → 6.0.0-beta.11

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.
Files changed (138) hide show
  1. package/dist/components/BaseSvg.d.ts +1 -1
  2. package/dist/components/Icon.d.ts +2 -2
  3. package/dist/components/Illustration.d.ts +2 -2
  4. package/dist/components/KeyBox.d.ts +2 -2
  5. package/dist/components/SidePanel.d.ts +2 -2
  6. package/dist/components/Space.d.ts +2 -2
  7. package/dist/components/TreeView.d.ts +2 -2
  8. package/dist/components/ValueInputTree/ExpandCollapseValues.d.ts +2 -2
  9. package/dist/components/ValueInputTree/ValueInput/BooleanValueInput.d.ts +2 -2
  10. package/dist/components/ValueInputTree/ValueInput/NullValueInput.d.ts +2 -2
  11. package/dist/components/ValueInputTree/ValueInput/NumberValueInput.d.ts +2 -2
  12. package/dist/components/ValueInputTree/ValueInput/StringValueInput.d.ts +2 -2
  13. package/dist/components/ValueInputTree/ValueInput/UndefinedValueInput.d.ts +2 -2
  14. package/dist/components/ValueInputTree/ValueInput/UnserializableValueInput.d.ts +2 -2
  15. package/dist/components/ValueInputTree/ValueInput/ValueInput.d.ts +2 -2
  16. package/dist/components/ValueInputTree/ValueInputDir.d.ts +4 -3
  17. package/dist/components/ValueInputTree/ValueInputDir.js +2 -6
  18. package/dist/components/ValueInputTree/ValueInputTree.js +17 -2
  19. package/dist/components/ValueInputTree/shared.d.ts +1 -0
  20. package/dist/components/ValueInputTree/valueTree.d.ts +1 -1
  21. package/dist/components/ValueInputTree/valueTree.js +10 -5
  22. package/dist/components/buttons/Button32.d.ts +1 -1
  23. package/dist/components/buttons/Button8.d.ts +1 -1
  24. package/dist/components/buttons/IconButton32.d.ts +1 -1
  25. package/dist/components/buttons/IconButton8.d.ts +1 -1
  26. package/dist/components/buttons/shared.js +4 -1
  27. package/dist/components/icons/index.d.ts +30 -30
  28. package/dist/components/illustrations/ArtificialIntelligence.d.ts +2 -2
  29. package/dist/components/illustrations/Astronaut.d.ts +2 -2
  30. package/dist/components/illustrations/BlankCanvas.d.ts +2 -2
  31. package/dist/components/inputs/NumberInput.d.ts +2 -2
  32. package/dist/components/inputs/Select.d.ts +2 -2
  33. package/dist/cosmos.decorator.d.ts +1 -1
  34. package/dist/index.d.ts +0 -1
  35. package/dist/index.js +0 -1
  36. package/dist/playground.bundle.js +326 -317
  37. package/dist/playground.bundle.js.map +1 -1
  38. package/dist/playground.js +2 -2
  39. package/dist/pluginMocks.d.ts +1 -0
  40. package/dist/pluginMocks.js +1 -0
  41. package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.d.ts +6 -5
  42. package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.js +8 -8
  43. package/dist/plugins/ClassStatePanel/ClassStatePanel/index.d.ts +4 -3
  44. package/dist/plugins/ClassStatePanel/ClassStatePanel/index.js +5 -5
  45. package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.d.ts +2 -2
  46. package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.js +6 -9
  47. package/dist/plugins/ClassStatePanel/index.js +5 -3
  48. package/dist/plugins/ClassStatePanel/shared.d.ts +2 -0
  49. package/dist/plugins/ControlPanel/ControlPanel.d.ts +6 -5
  50. package/dist/plugins/ControlPanel/ControlPanel.js +3 -3
  51. package/dist/plugins/ControlPanel/index.js +4 -2
  52. package/dist/plugins/ControlPanel/shared.d.ts +2 -0
  53. package/dist/plugins/ControlPanel/shared.js +1 -0
  54. package/dist/plugins/ControlSelect/SelectValueInput.d.ts +5 -5
  55. package/dist/plugins/ControlSelect/index.js +3 -6
  56. package/dist/plugins/FixtureBookmark/BookmarkFixtureButton.d.ts +2 -2
  57. package/dist/plugins/FixtureBookmark/FixtureBookmarks.d.ts +2 -2
  58. package/dist/plugins/FixtureSearch/FixtureSearchHeader.d.ts +2 -2
  59. package/dist/plugins/FixtureSearch/FixtureSearchHeader.js +1 -1
  60. package/dist/plugins/FixtureSearch/FixtureSearchOverlay.d.ts +2 -2
  61. package/dist/plugins/FixtureSearch/FixtureSearchOverlay.js +10 -4
  62. package/dist/plugins/FixtureSearch/FixtureSearchResult.d.ts +2 -2
  63. package/dist/plugins/FixtureSearch/FixtureSearchShortcuts.d.ts +2 -2
  64. package/dist/plugins/FixtureSearch/index.js +1 -1
  65. package/dist/plugins/FixtureTree/BlankState.d.ts +2 -2
  66. package/dist/plugins/FixtureTree/FixtureTree/FixtureButton.d.ts +2 -2
  67. package/dist/plugins/FixtureTree/FixtureTree/FixtureDir.d.ts +2 -2
  68. package/dist/plugins/FixtureTree/FixtureTree/FixtureLink.d.ts +2 -2
  69. package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.d.ts +2 -2
  70. package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureChildButton.d.ts +2 -2
  71. package/dist/plugins/FixtureTree/FixtureTreeContainer.d.ts +2 -2
  72. package/dist/plugins/FixtureTree/FixtureTreeHeader.d.ts +2 -2
  73. package/dist/plugins/FullScreenButton/FullScreenButton.d.ts +2 -2
  74. package/dist/plugins/MessageHandler/socket.js +1 -1
  75. package/dist/plugins/Notifications/Notifications.d.ts +2 -2
  76. package/dist/plugins/PluginList/PluginList.d.ts +2 -2
  77. package/dist/plugins/PropsPanel/BlankState.d.ts +2 -2
  78. package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.d.ts +6 -5
  79. package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.js +14 -12
  80. package/dist/plugins/PropsPanel/PropsPanel/index.d.ts +4 -3
  81. package/dist/plugins/PropsPanel/PropsPanel/index.js +5 -5
  82. package/dist/plugins/PropsPanel/PropsPanel/shared.d.ts +2 -2
  83. package/dist/plugins/PropsPanel/PropsPanel/shared.js +6 -9
  84. package/dist/plugins/PropsPanel/index.js +14 -9
  85. package/dist/plugins/PropsPanel/shared.d.ts +2 -0
  86. package/dist/plugins/RemoteRenderer/RemoteButton/index.d.ts +2 -2
  87. package/dist/plugins/RendererCore/index.js +17 -3
  88. package/dist/plugins/RendererCore/onRouterFixtureReselect.js +2 -2
  89. package/dist/plugins/RendererCore/onRouterFixtureSelect.js +2 -2
  90. package/dist/plugins/RendererCore/receiveResponse/rendererReady.js +8 -3
  91. package/dist/plugins/RendererCore/setFixtureState.d.ts +2 -2
  92. package/dist/plugins/RendererCore/setFixtureState.js +5 -4
  93. package/dist/plugins/RendererCore/setGlobalFixtureState.d.ts +2 -0
  94. package/dist/plugins/RendererCore/setGlobalFixtureState.js +15 -0
  95. package/dist/plugins/RendererCore/shared/postRequest.d.ts +1 -1
  96. package/dist/plugins/RendererCore/spec.d.ts +8 -3
  97. package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererConnected.d.ts +2 -2
  98. package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererOverlay.d.ts +2 -2
  99. package/dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.d.ts +2 -2
  100. package/dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.d.ts +2 -2
  101. package/dist/plugins/RendererPreview/RendererPreview.js +1 -1
  102. package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsiveHeader.d.ts +4 -3
  103. package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.d.ts +6 -5
  104. package/dist/plugins/ResponsivePreview/ResponsivePreview/style.d.ts +4 -4
  105. package/dist/plugins/ResponsivePreview/ToggleButton/index.d.ts +2 -2
  106. package/dist/plugins/ResponsivePreview/index.js +10 -15
  107. package/dist/plugins/ResponsivePreview/shared.d.ts +3 -6
  108. package/dist/plugins/ResponsivePreview/spec.d.ts +2 -5
  109. package/dist/plugins/Root/GlobalHeader.d.ts +2 -2
  110. package/dist/plugins/Root/HomeOverlay/HomeOverlay.d.ts +2 -2
  111. package/dist/plugins/Root/HomeOverlay/KeyShortcut.d.ts +2 -2
  112. package/dist/plugins/Root/HomeOverlay/NoFixtureSelected.d.ts +2 -2
  113. package/dist/plugins/Root/HomeOverlay/NoFixtureSelected.js +6 -5
  114. package/dist/plugins/Root/HomeOverlay/WelcomeCosmos.d.ts +2 -2
  115. package/dist/plugins/Root/HomeOverlay/WelcomeCosmos.js +1 -1
  116. package/dist/plugins/Root/Root.d.ts +6 -5
  117. package/dist/plugins/Root/Root.js +2 -2
  118. package/dist/plugins/Root/SidePanel.d.ts +4 -3
  119. package/dist/plugins/Root/SidePanel.js +2 -2
  120. package/dist/plugins/Root/ToggleNavButton.d.ts +2 -2
  121. package/dist/plugins/Root/index.js +1 -1
  122. package/dist/plugins/Root/navOpen.js +1 -1
  123. package/dist/plugins/Root/panelOpen.js +1 -1
  124. package/dist/plugins/Router/index.js +8 -1
  125. package/dist/plugins/Router/spec.d.ts +3 -0
  126. package/dist/plugins/StandardControl/index.js +3 -6
  127. package/dist/slots/ControlActionSlot.d.ts +4 -4
  128. package/dist/slots/ControlSlot.d.ts +5 -5
  129. package/dist/slots/FixtureActionSlot.d.ts +2 -2
  130. package/dist/slots/NavRowSlot.d.ts +2 -2
  131. package/dist/slots/RendererActionSlot.d.ts +2 -2
  132. package/dist/slots/SidePanelRowSlot.d.ts +6 -5
  133. package/dist/slots/ValueInputSlot.d.ts +2 -2
  134. package/dist/testHelpers/pluginMocks.d.ts +8 -4
  135. package/dist/testHelpers/pluginMocks.js +4 -2
  136. package/package.json +8 -8
  137. package/pluginMocks.d.ts +1 -0
  138. package/pluginMocks.js +1 -0
@@ -1,7 +1,7 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  type Props = {
3
3
  keys: string[];
4
4
  label: string;
5
5
  };
6
- export declare function KeyShortcut({ keys, label }: Props): JSX.Element;
6
+ export declare function KeyShortcut({ keys, label }: Props): React.JSX.Element;
7
7
  export {};
@@ -1,6 +1,6 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  type Props = {
3
3
  onShowWelcome: () => unknown;
4
4
  };
5
- export declare function NoFixtureSelected({ onShowWelcome }: Props): JSX.Element;
5
+ export declare function NoFixtureSelected({ onShowWelcome }: Props): React.JSX.Element;
6
6
  export {};
@@ -8,12 +8,13 @@ export function NoFixtureSelected({ onShowWelcome }) {
8
8
  return (React.createElement(OverlayContainer, { "data-testid": "blank" },
9
9
  React.createElement(OverlayBody, null,
10
10
  React.createElement(TextContainer, null,
11
- React.createElement(KeyShortcut, { keys: ['⌘', 'P'], label: "Search fixtures" }),
11
+ React.createElement(KeyShortcut, { keys: ['⌘', 'K'], label: "Search fixtures" }),
12
12
  React.createElement(Subtitle, null, "FIXTURE SELECTED"),
13
- React.createElement(KeyShortcut, { keys: ['⌘', '⇧', 'L'], label: "Toggle fixture list" }),
14
- React.createElement(KeyShortcut, { keys: ['', '⇧', 'K'], label: "Toggle control panel" }),
15
- React.createElement(KeyShortcut, { keys: ['⌘', '⇧', 'E'], label: "Edit fixture" }),
16
- React.createElement(KeyShortcut, { keys: ['⌘', '⇧', 'F'], label: "Go full screen" })),
13
+ React.createElement(KeyShortcut, { keys: ['L'], label: "Toggle fixture list" }),
14
+ React.createElement(KeyShortcut, { keys: ['P'], label: "Toggle control panel" }),
15
+ React.createElement(KeyShortcut, { keys: ['E'], label: "Edit fixture" }),
16
+ React.createElement(KeyShortcut, { keys: ['F'], label: "Go full screen" }),
17
+ React.createElement(KeyShortcut, { keys: ['R'], label: "Reload renderer" })),
17
18
  React.createElement(IllustrationContainer, null,
18
19
  React.createElement(BlankCanvasIllustration, { title: "blank state" }))),
19
20
  React.createElement(ShowWelcomeButton, { onClick: onShowWelcome }, "show welcome screen")));
@@ -1,6 +1,6 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  type Props = {
3
3
  onDismissWelcome: () => unknown;
4
4
  };
5
- export declare function WelcomeCosmos({ onDismissWelcome }: Props): JSX.Element;
5
+ export declare function WelcomeCosmos({ onDismissWelcome }: Props): React.JSX.Element;
6
6
  export {};
@@ -14,7 +14,7 @@ export function WelcomeCosmos({ onDismissWelcome }) {
14
14
  React.createElement("li", null,
15
15
  React.createElement(Bullet, null),
16
16
  React.createElement("span", null,
17
- React.createElement(Link, { href: "https://github.com/react-cosmos/react-cosmos/tree/main/docs", rel: "noopener noreferrer", target: "_blank" },
17
+ React.createElement(Link, { href: "https://reactcosmos.org/docs", rel: "noopener noreferrer", target: "_blank" },
18
18
  React.createElement("strong", null, "Read the docs")),
19
19
  ' ',
20
20
  "to get the most out of React Cosmos.",
@@ -1,10 +1,12 @@
1
- /// <reference types="react" />
2
- import { FixtureId, FixtureState, FlatFixtureTreeItem, StateUpdater } from 'react-cosmos-core';
1
+ import React from 'react';
2
+ import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
3
+ import { GetFixtureState, SetFixtureStateByName } from '../RendererCore/spec.js';
3
4
  type Props = {
4
5
  fixtureItems: FlatFixtureTreeItem[];
5
6
  selectedFixtureId: FixtureId | null;
6
7
  rendererConnected: boolean;
7
- fixtureState: FixtureState;
8
+ getFixtureState: GetFixtureState;
9
+ setFixtureState: SetFixtureStateByName;
8
10
  navOpen: boolean;
9
11
  panelOpen: boolean;
10
12
  navWidth: number;
@@ -19,12 +21,11 @@ type Props = {
19
21
  onTogglePanel: () => unknown;
20
22
  onReloadRenderer: () => unknown;
21
23
  onCloseFixture: () => unknown;
22
- onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
23
24
  setNavWidth: (width: number) => unknown;
24
25
  setPanelWidth: (width: number) => unknown;
25
26
  welcomeDismissed: boolean;
26
27
  onDismissWelcome: () => unknown;
27
28
  onShowWelcome: () => unknown;
28
29
  };
29
- export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
30
+ export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, getFixtureState, setFixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): React.JSX.Element;
30
31
  export {};
@@ -8,7 +8,7 @@ import { GlobalHeader } from './GlobalHeader.js';
8
8
  import { HomeOverlay } from './HomeOverlay/HomeOverlay.js';
9
9
  import { RendererHeader } from './RendererHeader.js';
10
10
  import { SidePanel } from './SidePanel.js';
11
- export function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
11
+ export function Root({ fixtureItems, selectedFixtureId, rendererConnected, getFixtureState, setFixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
12
12
  const navDrag = useDrag({
13
13
  value: navWidth,
14
14
  onChange: setNavWidth,
@@ -35,7 +35,7 @@ export function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtu
35
35
  React.createElement(Slot, { name: "rendererPreview" }),
36
36
  dragging && React.createElement(DragOverlay, null),
37
37
  selectedFixtureId && panelOpen && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
38
- React.createElement(SidePanel, { fixtureId: selectedFixtureId, fixtureState: fixtureState, sidePanelRowOrder: sidePanelRowOrder, onFixtureStateChange: onFixtureStateChange }),
38
+ React.createElement(SidePanel, { fixtureId: selectedFixtureId, getFixtureState: getFixtureState, setFixtureState: setFixtureState, sidePanelRowOrder: sidePanelRowOrder }),
39
39
  panelDrag.dragging && React.createElement(DragOverlay, null),
40
40
  React.createElement(PanelDragHandle, { ref: panelDrag.dragElRef })))),
41
41
  !selectedFixtureId && (React.createElement(HomeOverlay, { welcomeDismissed: welcomeDismissed, onDismissWelcome: onDismissWelcome, onShowWelcome: onShowWelcome })))),
@@ -1,9 +1,10 @@
1
1
  import React from 'react';
2
- import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
2
+ import { FixtureId } from 'react-cosmos-core';
3
+ import { GetFixtureState, SetFixtureStateByName } from '../RendererCore/spec.js';
3
4
  type Props = {
4
5
  fixtureId: FixtureId;
5
- fixtureState: FixtureState;
6
- onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
6
+ getFixtureState: GetFixtureState;
7
+ setFixtureState: SetFixtureStateByName;
7
8
  sidePanelRowOrder: string[];
8
9
  };
9
10
  export declare const SidePanel: React.NamedExoticComponent<Props>;
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  import styled from 'styled-components';
3
3
  import { SidePanelRowSlot } from '../../slots/SidePanelRowSlot.js';
4
4
  import { grey32 } from '../../style/colors.js';
5
- export const SidePanel = React.memo(function SidePanel({ fixtureId, fixtureState, onFixtureStateChange, sidePanelRowOrder, }) {
6
- const slotProps = React.useMemo(() => ({ fixtureId, fixtureState, onFixtureStateChange }), [fixtureId, fixtureState, onFixtureStateChange]);
5
+ export const SidePanel = React.memo(function SidePanel({ fixtureId, getFixtureState, setFixtureState, sidePanelRowOrder, }) {
6
+ const slotProps = React.useMemo(() => ({ fixtureId, getFixtureState, setFixtureState }), [fixtureId, getFixtureState, setFixtureState]);
7
7
  return (React.createElement(Container, null,
8
8
  React.createElement(Content, null,
9
9
  React.createElement(SidePanelRowSlot, { slotProps: slotProps, plugOrder: sidePanelRowOrder }))));
@@ -1,8 +1,8 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  type Props = {
3
3
  disabled?: boolean;
4
4
  selected: boolean;
5
5
  onToggle: () => unknown;
6
6
  };
7
- export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): JSX.Element;
7
+ export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): React.JSX.Element;
8
8
  export {};
@@ -49,7 +49,7 @@ plug('root', ({ pluginContext }) => {
49
49
  const { navWidth, setNavWidth } = getNavWidthApi(pluginContext);
50
50
  const { panelWidth, setPanelWidth } = getPanelWidthApi(pluginContext);
51
51
  const { sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, } = getConfig();
52
- return (React.createElement(Root, { fixtureItems: fixtureItems, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), fixtureState: rendererCore.getFixtureState(), navOpen: isNavOpen(pluginContext), panelOpen: isPanelOpen(pluginContext), navWidth: navWidth, panelWidth: panelWidth, sidePanelRowOrder: sidePanelRowOrder, globalActionOrder: globalActionOrder, globalOrder: globalOrder, navRowOrder: navRowOrder, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onToggleNav: onToggleNav, onTogglePanel: onTogglePanel, onReloadRenderer: rendererCore.reloadRenderer, onCloseFixture: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth, welcomeDismissed: welcomeDismiss.isWelcomeDismissed(), onDismissWelcome: welcomeDismiss.onDismissWelcome, onShowWelcome: welcomeDismiss.onShowWelcome }));
52
+ return (React.createElement(Root, { fixtureItems: fixtureItems, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), getFixtureState: rendererCore.getFixtureState, setFixtureState: rendererCore.setFixtureState, navOpen: isNavOpen(pluginContext), panelOpen: isPanelOpen(pluginContext), navWidth: navWidth, panelWidth: panelWidth, sidePanelRowOrder: sidePanelRowOrder, globalActionOrder: globalActionOrder, globalOrder: globalOrder, navRowOrder: navRowOrder, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onToggleNav: onToggleNav, onTogglePanel: onTogglePanel, onReloadRenderer: rendererCore.reloadRenderer, onCloseFixture: router.unselectFixture, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth, welcomeDismissed: welcomeDismiss.isWelcomeDismissed(), onDismissWelcome: welcomeDismiss.onDismissWelcome, onShowWelcome: welcomeDismiss.onShowWelcome }));
53
53
  });
54
54
  export { register };
55
55
  if (process.env.NODE_ENV !== 'test')
@@ -1,5 +1,5 @@
1
1
  export const NAV_OPEN_STORAGE_KEY = 'navOpen';
2
- const NAV_OPEN_DEFAULT = true;
2
+ const NAV_OPEN_DEFAULT = window.innerWidth >= 640;
3
3
  export function isNavOpen(context) {
4
4
  const storage = context.getMethodsOf('storage');
5
5
  const open = storage.getItem(NAV_OPEN_STORAGE_KEY);
@@ -1,5 +1,5 @@
1
1
  export const PANEL_OPEN_STORAGE_KEY = 'sidePanelOpen';
2
- const PANEL_OPEN_DEFAULT = true;
2
+ const PANEL_OPEN_DEFAULT = window.innerWidth >= 960;
3
3
  export function isPanelOpen(context) {
4
4
  const storage = context.getMethodsOf('storage');
5
5
  const open = storage.getItem(PANEL_OPEN_STORAGE_KEY);
@@ -3,6 +3,9 @@ import { createPlugin } from 'react-plugin';
3
3
  import { getUrlParams, pushUrlParams, subscribeToLocationChanges, } from '../../shared/url.js';
4
4
  const { onLoad, register } = createPlugin({
5
5
  name: 'router',
6
+ defaultConfig: {
7
+ initialFixtureId: null,
8
+ },
6
9
  initialState: {
7
10
  urlParams: {},
8
11
  },
@@ -13,8 +16,12 @@ const { onLoad, register } = createPlugin({
13
16
  },
14
17
  });
15
18
  onLoad(context => {
16
- const { setState } = context;
19
+ const { getConfig, setState } = context;
17
20
  setState({ urlParams: getUrlParams() });
21
+ const { initialFixtureId } = getConfig();
22
+ if (initialFixtureId) {
23
+ selectFixture(context, initialFixtureId);
24
+ }
18
25
  return subscribeToLocationChanges((urlParams) => {
19
26
  const { fixtureId } = context.getState().urlParams;
20
27
  const fixtureChanged = !isEqual(urlParams.fixtureId, fixtureId);
@@ -1,6 +1,9 @@
1
1
  import { FixtureId, PlaygroundParams } from 'react-cosmos-core';
2
2
  export type RouterSpec = {
3
3
  name: 'router';
4
+ config: {
5
+ initialFixtureId: null | FixtureId;
6
+ };
4
7
  state: {
5
8
  urlParams: PlaygroundParams;
6
9
  };
@@ -13,12 +13,9 @@ plug('control-standard', ({ pluginContext, slotProps }) => {
13
13
  const handleValueChange = useCallback((updatedValues) => {
14
14
  onFixtureStateChange(fixtureState => ({
15
15
  ...fixtureState,
16
- controls: {
17
- ...fixtureState.controls,
18
- [controlName]: {
19
- ...control,
20
- currentValue: updatedValues[controlName],
21
- },
16
+ [controlName]: {
17
+ ...control,
18
+ currentValue: updatedValues[controlName],
22
19
  },
23
20
  }));
24
21
  }, [control, controlName, onFixtureStateChange]);
@@ -1,11 +1,11 @@
1
- /// <reference types="react" />
2
- import { FixtureStateControls } from 'react-cosmos-core';
1
+ import React from 'react';
2
+ import { ControlsFixtureState } from 'react-cosmos-core';
3
3
  export type ControlActionSlotProps = {
4
- controls: FixtureStateControls;
4
+ controls: ControlsFixtureState;
5
5
  };
6
6
  type Props = {
7
7
  slotProps: ControlActionSlotProps;
8
8
  plugOrder: string[];
9
9
  };
10
- export declare function ControlActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
10
+ export declare function ControlActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
11
11
  export {};
@@ -1,12 +1,12 @@
1
- /// <reference types="react" />
2
- import { FixtureState, FixtureStateControl, StateUpdater } from 'react-cosmos-core';
3
- export type ControlSlotProps<TControl extends FixtureStateControl> = {
1
+ import React from 'react';
2
+ import { ControlFixtureState, ControlsFixtureState, FixtureStateUpdater } from 'react-cosmos-core';
3
+ export type ControlSlotProps<TControl extends ControlFixtureState> = {
4
4
  controlName: string;
5
5
  control: TControl;
6
- onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
6
+ onFixtureStateChange: (updater: FixtureStateUpdater<ControlsFixtureState>) => void;
7
7
  };
8
8
  type Props = {
9
9
  slotProps: ControlSlotProps<any>;
10
10
  };
11
- export declare function ControlSlot({ slotProps }: Props): JSX.Element;
11
+ export declare function ControlSlot({ slotProps }: Props): React.JSX.Element;
12
12
  export {};
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { FlatFixtureTreeItem } from 'react-cosmos-core';
3
3
  export type FixtureActionSlotProps = {
4
4
  fixtureItem: FlatFixtureTreeItem;
@@ -7,5 +7,5 @@ type Props = {
7
7
  slotProps: FixtureActionSlotProps;
8
8
  plugOrder: string[];
9
9
  };
10
- export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
10
+ export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
11
11
  export {};
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  export type NavRowSlotProps = {
3
3
  onCloseNav: () => unknown;
4
4
  };
@@ -6,5 +6,5 @@ type Props = {
6
6
  slotProps: NavRowSlotProps;
7
7
  plugOrder: string[];
8
8
  };
9
- export declare function NavRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
9
+ export declare function NavRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
10
10
  export {};
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { FixtureId } from 'react-cosmos-core';
3
3
  export type RendererActionSlotProps = {
4
4
  fixtureId: FixtureId;
@@ -7,5 +7,5 @@ type Props = {
7
7
  slotProps: RendererActionSlotProps;
8
8
  plugOrder: string[];
9
9
  };
10
- export declare function RendererActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
10
+ export declare function RendererActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
11
11
  export {};
@@ -1,13 +1,14 @@
1
- /// <reference types="react" />
2
- import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
1
+ import React from 'react';
2
+ import { FixtureId } from 'react-cosmos-core';
3
+ import { GetFixtureState, SetFixtureStateByName } from '../plugins/RendererCore/spec.js';
3
4
  export type SidePanelRowSlotProps = {
4
5
  fixtureId: FixtureId;
5
- fixtureState: FixtureState;
6
- onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
6
+ getFixtureState: GetFixtureState;
7
+ setFixtureState: SetFixtureStateByName;
7
8
  };
8
9
  type Props = {
9
10
  slotProps: SidePanelRowSlotProps;
10
11
  plugOrder: string[];
11
12
  };
12
- export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
13
+ export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
13
14
  export {};
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import { FixtureStatePrimitiveValue, FixtureStateUnserializableValue, PrimitiveData } from 'react-cosmos-core';
3
3
  type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
4
4
  export type ValueInputSlotProps = {
@@ -12,5 +12,5 @@ type Props = {
12
12
  children: ReactNode;
13
13
  slotProps: ValueInputSlotProps;
14
14
  };
15
- export declare function ValueInputSlot({ children, slotProps }: Props): JSX.Element;
15
+ export declare function ValueInputSlot({ children, slotProps }: Props): React.JSX.Element;
16
16
  export {};
@@ -36,12 +36,14 @@ export declare function getRendererCoreMethods(): {
36
36
  getConnectedRendererIds(): string[];
37
37
  getPrimaryRendererId(): string | null;
38
38
  getFixtures(): import("react-cosmos-core").FixtureList;
39
- getFixtureState(): import("react-cosmos-core").FixtureState;
40
39
  isRendererConnected(): boolean;
41
40
  reloadRenderer(): void;
42
- setFixtureState(stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>): void;
43
41
  selectPrimaryRenderer(primaryRendererId: string): void;
44
42
  receiveResponse(msg: import("react-cosmos-core").MessageType): void;
43
+ getAllFixtureState(): import("react-cosmos-core").FixtureState;
44
+ getFixtureState: import("../plugins/RendererCore/spec.js").GetFixtureState;
45
+ setFixtureState: import("../plugins/RendererCore/spec.js").SetFixtureStateByName;
46
+ setGlobalFixtureState<T>(name: string, state: T): void;
45
47
  };
46
48
  export declare function getNotificationsMethods(): {
47
49
  pushStickyNotification(notification: import("../plugins/Notifications/spec.js").NotificationItem): void;
@@ -79,12 +81,14 @@ export declare function mockRendererCore(methods?: MethodsOf<RendererCoreSpec>):
79
81
  getConnectedRendererIds: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string[]);
80
82
  getPrimaryRendererId: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
81
83
  getFixtures: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureList);
82
- getFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureState);
83
84
  isRendererConnected: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => boolean);
84
85
  reloadRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => void);
85
- setFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>) => void);
86
86
  selectPrimaryRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, primaryRendererId: string) => void);
87
87
  receiveResponse: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, msg: import("react-cosmos-core").MessageType) => void);
88
+ getAllFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureState);
89
+ getFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, name: string) => unknown);
90
+ setFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, name: string, change: unknown) => void);
91
+ setGlobalFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, name: string, state: unknown) => void);
88
92
  };
89
93
  export declare function mockRendererPreview(methods?: MethodsOf<RendererPreviewSpec>): {
90
94
  getRuntimeStatus: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererPreviewSpec>) => import("../plugins/RendererPreview/spec.js").RuntimeStatus);
@@ -73,12 +73,14 @@ export function mockRendererCore(methods = {}) {
73
73
  getConnectedRendererIds: jest.fn(),
74
74
  getPrimaryRendererId: jest.fn(),
75
75
  getFixtures: jest.fn(),
76
- getFixtureState: jest.fn(),
77
76
  isRendererConnected: jest.fn(),
78
77
  reloadRenderer: jest.fn(),
79
- setFixtureState: jest.fn(),
80
78
  selectPrimaryRenderer: jest.fn(),
81
79
  receiveResponse: jest.fn(),
80
+ getAllFixtureState: jest.fn(),
81
+ getFixtureState: jest.fn(),
82
+ setFixtureState: jest.fn(),
83
+ setGlobalFixtureState: jest.fn(),
82
84
  ...methods,
83
85
  };
84
86
  mockMethodsOf('rendererCore', allMethods);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-cosmos-ui",
3
- "version": "6.0.0-beta.1",
3
+ "version": "6.0.0-beta.11",
4
4
  "description": "React Cosmos UI",
5
5
  "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
6
6
  "license": "MIT",
@@ -14,14 +14,14 @@
14
14
  "playground": "cosmos"
15
15
  },
16
16
  "dependencies": {
17
- "lodash-es": "^4.17.21",
18
- "react-cosmos-core": "6.0.0-beta.1"
17
+ "lodash-es": "4.17.21",
18
+ "react-cosmos-core": "6.0.0-beta.11"
19
19
  },
20
20
  "devDependencies": {
21
- "fuzzaldrin-plus": "^0.6.0",
22
- "localforage": "^1.10.0",
23
- "react-plugin": "^3.0.0-alpha.4",
24
- "styled-components": "^5.3.10"
21
+ "fuzzaldrin-plus": "0.6.0",
22
+ "localforage": "1.10.0",
23
+ "react-plugin": "3.0.0-alpha.4",
24
+ "styled-components": "5.3.11"
25
25
  },
26
- "gitHead": "960ef665baa732f71ac8dd6cf19e4500d9cff8b8"
26
+ "gitHead": "53cb725c41af2e513a6f76eac2b0a4027d2afaea"
27
27
  }
@@ -0,0 +1 @@
1
+ export * from './dist/pluginMocks.js';
package/pluginMocks.js ADDED
@@ -0,0 +1 @@
1
+ export * from './dist/pluginMocks.js';