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

package/dist/plugins/Root/Root.js

@@ -8,7 +8,7 @@ import { GlobalHeader } from './GlobalHeader.js';
 import { HomeOverlay } from './HomeOverlay/HomeOverlay.js';
 import { RendererHeader } from './RendererHeader.js';
 import { SidePanel } from './SidePanel.js';
-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, }) {
+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, }) {
     const navDrag = useDrag({
         value: navWidth,
         onChange: setNavWidth,
@@ -35,7 +35,7 @@ export function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtu
                     React.createElement(Slot, { name: "rendererPreview" }),
                     dragging && React.createElement(DragOverlay, null),
                     selectedFixtureId && panelOpen && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
-                        React.createElement(SidePanel, { fixtureId: selectedFixtureId, fixtureState: fixtureState, sidePanelRowOrder: sidePanelRowOrder, onFixtureStateChange: onFixtureStateChange }),
+                        React.createElement(SidePanel, { fixtureId: selectedFixtureId, getFixtureState: getFixtureState, setFixtureState: setFixtureState, sidePanelRowOrder: sidePanelRowOrder }),
                         panelDrag.dragging && React.createElement(DragOverlay, null),
                         React.createElement(PanelDragHandle, { ref: panelDrag.dragElRef })))),
                 !selectedFixtureId && (React.createElement(HomeOverlay, { welcomeDismissed: welcomeDismissed, onDismissWelcome: onDismissWelcome, onShowWelcome: onShowWelcome })))),

package/dist/plugins/Root/SidePanel.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
+import { FixtureId } from 'react-cosmos-core';
+import { GetFixtureState, SetFixtureStateByName } from '../RendererCore/spec.js';
 type Props = {
     fixtureId: FixtureId;
-    fixtureState: FixtureState;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    getFixtureState: GetFixtureState;
+    setFixtureState: SetFixtureStateByName;
     sidePanelRowOrder: string[];
 };
 export declare const SidePanel: React.NamedExoticComponent<Props>;

package/dist/plugins/Root/SidePanel.js

@@ -2,8 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { SidePanelRowSlot } from '../../slots/SidePanelRowSlot.js';
 import { grey32 } from '../../style/colors.js';
-export const SidePanel = React.memo(function SidePanel({ fixtureId, fixtureState, onFixtureStateChange, sidePanelRowOrder, }) {
-    const slotProps = React.useMemo(() => ({ fixtureId, fixtureState, onFixtureStateChange }), [fixtureId, fixtureState, onFixtureStateChange]);
+export const SidePanel = React.memo(function SidePanel({ fixtureId, getFixtureState, setFixtureState, sidePanelRowOrder, }) {
+    const slotProps = React.useMemo(() => ({ fixtureId, getFixtureState, setFixtureState }), [fixtureId, getFixtureState, setFixtureState]);
     return (React.createElement(Container, null,
         React.createElement(Content, null,
             React.createElement(SidePanelRowSlot, { slotProps: slotProps, plugOrder: sidePanelRowOrder }))));

package/dist/plugins/Root/ToggleNavButton.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     disabled?: boolean;
     selected: boolean;
     onToggle: () => unknown;
 };
-export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): JSX.Element;
+export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): React.JSX.Element;
 export {};

package/dist/plugins/Root/index.js

@@ -49,7 +49,7 @@ plug('root', ({ pluginContext }) => {
     const { navWidth, setNavWidth } = getNavWidthApi(pluginContext);
     const { panelWidth, setPanelWidth } = getPanelWidthApi(pluginContext);
     const { sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, } = getConfig();
-    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 }));
+    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 }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')

package/dist/plugins/Root/navOpen.js

@@ -1,5 +1,5 @@
 export const NAV_OPEN_STORAGE_KEY = 'navOpen';
-const NAV_OPEN_DEFAULT = true;
+const NAV_OPEN_DEFAULT = window.innerWidth >= 640;
 export function isNavOpen(context) {
     const storage = context.getMethodsOf('storage');
     const open = storage.getItem(NAV_OPEN_STORAGE_KEY);

package/dist/plugins/Root/panelOpen.js

@@ -1,5 +1,5 @@
 export const PANEL_OPEN_STORAGE_KEY = 'sidePanelOpen';
-const PANEL_OPEN_DEFAULT = true;
+const PANEL_OPEN_DEFAULT = window.innerWidth >= 960;
 export function isPanelOpen(context) {
     const storage = context.getMethodsOf('storage');
     const open = storage.getItem(PANEL_OPEN_STORAGE_KEY);

package/dist/plugins/Router/index.js

@@ -3,6 +3,9 @@ import { createPlugin } from 'react-plugin';
 import { getUrlParams, pushUrlParams, subscribeToLocationChanges, } from '../../shared/url.js';
 const { onLoad, register } = createPlugin({
     name: 'router',
+    defaultConfig: {
+        initialFixtureId: null,
+    },
     initialState: {
         urlParams: {},
     },
@@ -13,8 +16,12 @@ const { onLoad, register } = createPlugin({
     },
 });
 onLoad(context => {
-    const { setState } = context;
+    const { getConfig, setState } = context;
     setState({ urlParams: getUrlParams() });
+    const { initialFixtureId } = getConfig();
+    if (initialFixtureId) {
+        selectFixture(context, initialFixtureId);
+    }
     return subscribeToLocationChanges((urlParams) => {
         const { fixtureId } = context.getState().urlParams;
         const fixtureChanged = !isEqual(urlParams.fixtureId, fixtureId);

package/dist/plugins/Router/spec.d.ts

@@ -1,6 +1,9 @@
 import { FixtureId, PlaygroundParams } from 'react-cosmos-core';
 export type RouterSpec = {
     name: 'router';
+    config: {
+        initialFixtureId: null | FixtureId;
+    };
     state: {
         urlParams: PlaygroundParams;
     };

package/dist/plugins/StandardControl/index.js

@@ -13,12 +13,9 @@ plug('control-standard', ({ pluginContext, slotProps }) => {
     const handleValueChange = useCallback((updatedValues) => {
         onFixtureStateChange(fixtureState => ({
             ...fixtureState,
-            controls: {
-                ...fixtureState.controls,
-                [controlName]: {
-                    ...control,
-                    currentValue: updatedValues[controlName],
-                },
+            [controlName]: {
+                ...control,
+                currentValue: updatedValues[controlName],
             },
         }));
     }, [control, controlName, onFixtureStateChange]);

package/dist/slots/ControlActionSlot.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { FixtureStateControls } from 'react-cosmos-core';
+import React from 'react';
+import { ControlsFixtureState } from 'react-cosmos-core';
 export type ControlActionSlotProps = {
-    controls: FixtureStateControls;
+    controls: ControlsFixtureState;
 };
 type Props = {
     slotProps: ControlActionSlotProps;
     plugOrder: string[];
 };
-export declare function ControlActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function ControlActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

package/dist/slots/ControlSlot.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { FixtureState, FixtureStateControl, StateUpdater } from 'react-cosmos-core';
-export type ControlSlotProps<TControl extends FixtureStateControl> = {
+import React from 'react';
+import { ControlFixtureState, ControlsFixtureState, FixtureStateUpdater } from 'react-cosmos-core';
+export type ControlSlotProps<TControl extends ControlFixtureState> = {
     controlName: string;
     control: TControl;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onFixtureStateChange: (updater: FixtureStateUpdater<ControlsFixtureState>) => void;
 };
 type Props = {
     slotProps: ControlSlotProps<any>;
 };
-export declare function ControlSlot({ slotProps }: Props): JSX.Element;
+export declare function ControlSlot({ slotProps }: Props): React.JSX.Element;
 export {};

package/dist/slots/FixtureActionSlot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FlatFixtureTreeItem } from 'react-cosmos-core';
 export type FixtureActionSlotProps = {
     fixtureItem: FlatFixtureTreeItem;
@@ -7,5 +7,5 @@ type Props = {
     slotProps: FixtureActionSlotProps;
     plugOrder: string[];
 };
-export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

package/dist/slots/NavRowSlot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export type NavRowSlotProps = {
     onCloseNav: () => unknown;
 };
@@ -6,5 +6,5 @@ type Props = {
     slotProps: NavRowSlotProps;
     plugOrder: string[];
 };
-export declare function NavRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function NavRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

package/dist/slots/RendererActionSlot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId } from 'react-cosmos-core';
 export type RendererActionSlotProps = {
     fixtureId: FixtureId;
@@ -7,5 +7,5 @@ type Props = {
     slotProps: RendererActionSlotProps;
     plugOrder: string[];
 };
-export declare function RendererActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function RendererActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

package/dist/slots/SidePanelRowSlot.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="react" />
-import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
+import React from 'react';
+import { FixtureId } from 'react-cosmos-core';
+import { GetFixtureState, SetFixtureStateByName } from '../plugins/RendererCore/spec.js';
 export type SidePanelRowSlotProps = {
     fixtureId: FixtureId;
-    fixtureState: FixtureState;
-    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    getFixtureState: GetFixtureState;
+    setFixtureState: SetFixtureStateByName;
 };
 type Props = {
     slotProps: SidePanelRowSlotProps;
     plugOrder: string[];
 };
-export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

package/dist/slots/ValueInputSlot.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FixtureStatePrimitiveValue, FixtureStateUnserializableValue, PrimitiveData } from 'react-cosmos-core';
 type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
 export type ValueInputSlotProps = {
@@ -12,5 +12,5 @@ type Props = {
     children: ReactNode;
     slotProps: ValueInputSlotProps;
 };
-export declare function ValueInputSlot({ children, slotProps }: Props): JSX.Element;
+export declare function ValueInputSlot({ children, slotProps }: Props): React.JSX.Element;
 export {};

package/dist/testHelpers/pluginMocks.d.ts

@@ -36,12 +36,14 @@ export declare function getRendererCoreMethods(): {
     getConnectedRendererIds(): string[];
     getPrimaryRendererId(): string | null;
     getFixtures(): import("react-cosmos-core").FixtureList;
-    getFixtureState(): import("react-cosmos-core").FixtureState;
     isRendererConnected(): boolean;
     reloadRenderer(): void;
-    setFixtureState(stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>): void;
     selectPrimaryRenderer(primaryRendererId: string): void;
     receiveResponse(msg: import("react-cosmos-core").MessageType): void;
+    getAllFixtureState(): import("react-cosmos-core").FixtureState;
+    getFixtureState: import("../plugins/RendererCore/spec.js").GetFixtureState;
+    setFixtureState: import("../plugins/RendererCore/spec.js").SetFixtureStateByName;
+    setGlobalFixtureState<T>(name: string, state: T): void;
 };
 export declare function getNotificationsMethods(): {
     pushStickyNotification(notification: import("../plugins/Notifications/spec.js").NotificationItem): void;
@@ -79,12 +81,14 @@ export declare function mockRendererCore(methods?: MethodsOf<RendererCoreSpec>):
     getConnectedRendererIds: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string[]);
     getPrimaryRendererId: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
     getFixtures: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureList);
-    getFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureState);
     isRendererConnected: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => boolean);
     reloadRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => void);
-    setFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, stateUpdater: import("react-cosmos-core").StateUpdater<import("react-cosmos-core").FixtureState>) => void);
     selectPrimaryRenderer: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, primaryRendererId: string) => void);
     receiveResponse: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, msg: import("react-cosmos-core").MessageType) => void);
+    getAllFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => import("react-cosmos-core").FixtureState);
+    getFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, name: string) => unknown);
+    setFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, name: string, change: unknown) => void);
+    setGlobalFixtureState: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>, name: string, state: unknown) => void);
 };
 export declare function mockRendererPreview(methods?: MethodsOf<RendererPreviewSpec>): {
     getRuntimeStatus: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererPreviewSpec>) => import("../plugins/RendererPreview/spec.js").RuntimeStatus);

package/dist/testHelpers/pluginMocks.js

@@ -73,12 +73,14 @@ export function mockRendererCore(methods = {}) {
         getConnectedRendererIds: jest.fn(),
         getPrimaryRendererId: jest.fn(),
         getFixtures: jest.fn(),
-        getFixtureState: jest.fn(),
         isRendererConnected: jest.fn(),
         reloadRenderer: jest.fn(),
-        setFixtureState: jest.fn(),
         selectPrimaryRenderer: jest.fn(),
         receiveResponse: jest.fn(),
+        getAllFixtureState: jest.fn(),
+        getFixtureState: jest.fn(),
+        setFixtureState: jest.fn(),
+        setGlobalFixtureState: jest.fn(),
         ...methods,
     };
     mockMethodsOf('rendererCore', allMethods);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.10",
   "description": "React Cosmos UI",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
   "license": "MIT",
@@ -14,14 +14,14 @@
     "playground": "cosmos"
   },
   "dependencies": {
-    "lodash-es": "^4.17.21",
-    "react-cosmos-core": "6.0.0-beta.1"
+    "lodash-es": "4.17.21",
+    "react-cosmos-core": "6.0.0-beta.10"
   },
   "devDependencies": {
-    "fuzzaldrin-plus": "^0.6.0",
-    "localforage": "^1.10.0",
-    "react-plugin": "^3.0.0-alpha.4",
-    "styled-components": "^5.3.10"
+    "fuzzaldrin-plus": "0.6.0",
+    "localforage": "1.10.0",
+    "react-plugin": "3.0.0-alpha.4",
+    "styled-components": "5.3.11"
   },
-  "gitHead": "960ef665baa732f71ac8dd6cf19e4500d9cff8b8"
+  "gitHead": "6e8136d65a0e78ead6dd27d65e1c08cde6999d26"
 }

package/pluginMocks.d.ts

@@ -0,0 +1 @@
+export * from './dist/pluginMocks.js';

package/pluginMocks.js

@@ -0,0 +1 @@
+export * from './dist/pluginMocks.js';