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.
- package/dist/components/BaseSvg.d.ts +1 -1
- package/dist/components/Icon.d.ts +2 -2
- package/dist/components/Illustration.d.ts +2 -2
- package/dist/components/KeyBox.d.ts +2 -2
- package/dist/components/SidePanel.d.ts +2 -2
- package/dist/components/Space.d.ts +2 -2
- package/dist/components/TreeView.d.ts +2 -2
- package/dist/components/ValueInputTree/ExpandCollapseValues.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInput/BooleanValueInput.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInput/NullValueInput.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInput/NumberValueInput.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInput/StringValueInput.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInput/UndefinedValueInput.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInput/UnserializableValueInput.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInput/ValueInput.d.ts +2 -2
- package/dist/components/ValueInputTree/ValueInputDir.d.ts +4 -3
- package/dist/components/ValueInputTree/ValueInputDir.js +2 -6
- package/dist/components/ValueInputTree/ValueInputTree.js +17 -2
- package/dist/components/ValueInputTree/shared.d.ts +1 -0
- package/dist/components/ValueInputTree/valueTree.d.ts +1 -1
- package/dist/components/ValueInputTree/valueTree.js +10 -5
- package/dist/components/buttons/Button32.d.ts +1 -1
- package/dist/components/buttons/Button8.d.ts +1 -1
- package/dist/components/buttons/IconButton32.d.ts +1 -1
- package/dist/components/buttons/IconButton8.d.ts +1 -1
- package/dist/components/buttons/shared.js +4 -1
- package/dist/components/icons/index.d.ts +30 -30
- package/dist/components/illustrations/ArtificialIntelligence.d.ts +2 -2
- package/dist/components/illustrations/Astronaut.d.ts +2 -2
- package/dist/components/illustrations/BlankCanvas.d.ts +2 -2
- package/dist/components/inputs/NumberInput.d.ts +2 -2
- package/dist/components/inputs/Select.d.ts +2 -2
- package/dist/cosmos.decorator.d.ts +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/dist/playground.bundle.js +326 -317
- package/dist/playground.bundle.js.map +1 -1
- package/dist/playground.js +2 -2
- package/dist/pluginMocks.d.ts +1 -0
- package/dist/pluginMocks.js +1 -0
- package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.d.ts +6 -5
- package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.js +8 -8
- package/dist/plugins/ClassStatePanel/ClassStatePanel/index.d.ts +4 -3
- package/dist/plugins/ClassStatePanel/ClassStatePanel/index.js +5 -5
- package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.d.ts +2 -2
- package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.js +6 -9
- package/dist/plugins/ClassStatePanel/index.js +5 -3
- package/dist/plugins/ClassStatePanel/shared.d.ts +2 -0
- package/dist/plugins/ControlPanel/ControlPanel.d.ts +6 -5
- package/dist/plugins/ControlPanel/ControlPanel.js +3 -3
- package/dist/plugins/ControlPanel/index.js +4 -2
- package/dist/plugins/ControlPanel/shared.d.ts +2 -0
- package/dist/plugins/ControlPanel/shared.js +1 -0
- package/dist/plugins/ControlSelect/SelectValueInput.d.ts +5 -5
- package/dist/plugins/ControlSelect/index.js +3 -6
- package/dist/plugins/FixtureBookmark/BookmarkFixtureButton.d.ts +2 -2
- package/dist/plugins/FixtureBookmark/FixtureBookmarks.d.ts +2 -2
- package/dist/plugins/FixtureSearch/FixtureSearchHeader.d.ts +2 -2
- package/dist/plugins/FixtureSearch/FixtureSearchHeader.js +1 -1
- package/dist/plugins/FixtureSearch/FixtureSearchOverlay.d.ts +2 -2
- package/dist/plugins/FixtureSearch/FixtureSearchOverlay.js +10 -4
- package/dist/plugins/FixtureSearch/FixtureSearchResult.d.ts +2 -2
- package/dist/plugins/FixtureSearch/FixtureSearchShortcuts.d.ts +2 -2
- package/dist/plugins/FixtureSearch/index.js +1 -1
- package/dist/plugins/FixtureTree/BlankState.d.ts +2 -2
- package/dist/plugins/FixtureTree/FixtureTree/FixtureButton.d.ts +2 -2
- package/dist/plugins/FixtureTree/FixtureTree/FixtureDir.d.ts +2 -2
- package/dist/plugins/FixtureTree/FixtureTree/FixtureLink.d.ts +2 -2
- package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.d.ts +2 -2
- package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureChildButton.d.ts +2 -2
- package/dist/plugins/FixtureTree/FixtureTreeContainer.d.ts +2 -2
- package/dist/plugins/FixtureTree/FixtureTreeHeader.d.ts +2 -2
- package/dist/plugins/FullScreenButton/FullScreenButton.d.ts +2 -2
- package/dist/plugins/MessageHandler/socket.js +1 -1
- package/dist/plugins/Notifications/Notifications.d.ts +2 -2
- package/dist/plugins/PluginList/PluginList.d.ts +2 -2
- package/dist/plugins/PropsPanel/BlankState.d.ts +2 -2
- package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.d.ts +6 -5
- package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.js +14 -12
- package/dist/plugins/PropsPanel/PropsPanel/index.d.ts +4 -3
- package/dist/plugins/PropsPanel/PropsPanel/index.js +5 -5
- package/dist/plugins/PropsPanel/PropsPanel/shared.d.ts +2 -2
- package/dist/plugins/PropsPanel/PropsPanel/shared.js +6 -9
- package/dist/plugins/PropsPanel/index.js +14 -9
- package/dist/plugins/PropsPanel/shared.d.ts +2 -0
- package/dist/plugins/RemoteRenderer/RemoteButton/index.d.ts +2 -2
- package/dist/plugins/RendererCore/index.js +17 -3
- package/dist/plugins/RendererCore/onRouterFixtureReselect.js +2 -2
- package/dist/plugins/RendererCore/onRouterFixtureSelect.js +2 -2
- package/dist/plugins/RendererCore/receiveResponse/rendererReady.js +8 -3
- package/dist/plugins/RendererCore/setFixtureState.d.ts +2 -2
- package/dist/plugins/RendererCore/setFixtureState.js +5 -4
- package/dist/plugins/RendererCore/setGlobalFixtureState.d.ts +2 -0
- package/dist/plugins/RendererCore/setGlobalFixtureState.js +15 -0
- package/dist/plugins/RendererCore/shared/postRequest.d.ts +1 -1
- package/dist/plugins/RendererCore/spec.d.ts +8 -3
- package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererConnected.d.ts +2 -2
- package/dist/plugins/RendererPreview/RendererOverlay/RemoteRendererOverlay.d.ts +2 -2
- package/dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.d.ts +2 -2
- package/dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.d.ts +2 -2
- package/dist/plugins/RendererPreview/RendererPreview.js +1 -1
- package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsiveHeader.d.ts +4 -3
- package/dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.d.ts +6 -5
- package/dist/plugins/ResponsivePreview/ResponsivePreview/style.d.ts +4 -4
- package/dist/plugins/ResponsivePreview/ToggleButton/index.d.ts +2 -2
- package/dist/plugins/ResponsivePreview/index.js +10 -15
- package/dist/plugins/ResponsivePreview/shared.d.ts +3 -6
- package/dist/plugins/ResponsivePreview/spec.d.ts +2 -5
- package/dist/plugins/Root/GlobalHeader.d.ts +2 -2
- package/dist/plugins/Root/HomeOverlay/HomeOverlay.d.ts +2 -2
- package/dist/plugins/Root/HomeOverlay/KeyShortcut.d.ts +2 -2
- package/dist/plugins/Root/HomeOverlay/NoFixtureSelected.d.ts +2 -2
- package/dist/plugins/Root/HomeOverlay/NoFixtureSelected.js +6 -5
- package/dist/plugins/Root/HomeOverlay/WelcomeCosmos.d.ts +2 -2
- package/dist/plugins/Root/HomeOverlay/WelcomeCosmos.js +1 -1
- package/dist/plugins/Root/Root.d.ts +6 -5
- package/dist/plugins/Root/Root.js +2 -2
- package/dist/plugins/Root/SidePanel.d.ts +4 -3
- package/dist/plugins/Root/SidePanel.js +2 -2
- package/dist/plugins/Root/ToggleNavButton.d.ts +2 -2
- package/dist/plugins/Root/index.js +1 -1
- package/dist/plugins/Root/navOpen.js +1 -1
- package/dist/plugins/Root/panelOpen.js +1 -1
- package/dist/plugins/Router/index.js +8 -1
- package/dist/plugins/Router/spec.d.ts +3 -0
- package/dist/plugins/StandardControl/index.js +3 -6
- package/dist/slots/ControlActionSlot.d.ts +4 -4
- package/dist/slots/ControlSlot.d.ts +5 -5
- package/dist/slots/FixtureActionSlot.d.ts +2 -2
- package/dist/slots/NavRowSlot.d.ts +2 -2
- package/dist/slots/RendererActionSlot.d.ts +2 -2
- package/dist/slots/SidePanelRowSlot.d.ts +6 -5
- package/dist/slots/ValueInputSlot.d.ts +2 -2
- package/dist/testHelpers/pluginMocks.d.ts +8 -4
- package/dist/testHelpers/pluginMocks.js +4 -2
- package/package.json +8 -8
- package/pluginMocks.d.ts +1 -0
- package/pluginMocks.js +1 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
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: ['⌘', '
|
|
11
|
+
React.createElement(KeyShortcut, { keys: ['⌘', 'K'], label: "Search fixtures" }),
|
|
12
12
|
React.createElement(Subtitle, null, "FIXTURE SELECTED"),
|
|
13
|
-
React.createElement(KeyShortcut, { keys: ['
|
|
14
|
-
React.createElement(KeyShortcut, { keys: ['
|
|
15
|
-
React.createElement(KeyShortcut, { keys: ['
|
|
16
|
-
React.createElement(KeyShortcut, { keys: ['
|
|
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
|
-
|
|
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://
|
|
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
|
-
|
|
2
|
-
import { FixtureId,
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
2
|
+
import { FixtureId } from 'react-cosmos-core';
|
|
3
|
+
import { GetFixtureState, SetFixtureStateByName } from '../RendererCore/spec.js';
|
|
3
4
|
type Props = {
|
|
4
5
|
fixtureId: FixtureId;
|
|
5
|
-
|
|
6
|
-
|
|
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,
|
|
6
|
-
const slotProps = React.useMemo(() => ({ fixtureId,
|
|
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
|
-
|
|
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(),
|
|
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 =
|
|
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 =
|
|
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);
|
|
@@ -13,12 +13,9 @@ plug('control-standard', ({ pluginContext, slotProps }) => {
|
|
|
13
13
|
const handleValueChange = useCallback((updatedValues) => {
|
|
14
14
|
onFixtureStateChange(fixtureState => ({
|
|
15
15
|
...fixtureState,
|
|
16
|
-
|
|
17
|
-
...
|
|
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
|
-
|
|
2
|
-
import {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ControlsFixtureState } from 'react-cosmos-core';
|
|
3
3
|
export type ControlActionSlotProps = {
|
|
4
|
-
controls:
|
|
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
|
-
|
|
2
|
-
import {
|
|
3
|
-
export type ControlSlotProps<TControl extends
|
|
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: (
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2
|
-
import { FixtureId
|
|
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
|
-
|
|
6
|
-
|
|
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.
|
|
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": "
|
|
18
|
-
"react-cosmos-core": "6.0.0-beta.
|
|
17
|
+
"lodash-es": "4.17.21",
|
|
18
|
+
"react-cosmos-core": "6.0.0-beta.11"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"fuzzaldrin-plus": "
|
|
22
|
-
"localforage": "
|
|
23
|
-
"react-plugin": "
|
|
24
|
-
"styled-components": "
|
|
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": "
|
|
26
|
+
"gitHead": "53cb725c41af2e513a6f76eac2b0a4027d2afaea"
|
|
27
27
|
}
|
package/pluginMocks.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './dist/pluginMocks.js';
|
package/pluginMocks.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './dist/pluginMocks.js';
|