react-cosmos-ui 6.0.0-alpha.0

package/dist/plugins/Root/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { createFixtureTree, flattenFixtureTree } from 'react-cosmos-core';
+import { createPlugin } from 'react-plugin';
+import { isNavOpen, openNav } from './navOpen.js';
+import { getNavWidthApi } from './navWidth.js';
+import { isPanelOpen, openPanel } from './panelOpen.js';
+import { getPanelWidthApi } from './panelWidth.js';
+import { Root } from './Root.js';
+const { onLoad, plug, register } = createPlugin({
+    name: 'root',
+    defaultConfig: {
+        sidePanelRowOrder: [],
+        globalActionOrder: [],
+        globalOrder: [],
+        navRowOrder: [],
+        fixtureActionOrder: [],
+        rendererActionOrder: [],
+    },
+    initialState: {
+        storageCacheReady: false,
+    },
+});
+onLoad(context => {
+    const storage = context.getMethodsOf('storage');
+    const core = context.getMethodsOf('core');
+    storage.loadCache(core.getProjectId()).then(() => {
+        context.setState({ storageCacheReady: true });
+    });
+});
+onLoad(context => {
+    const core = context.getMethodsOf('core');
+    return core.registerCommands({
+        toggleFixtureList: () => openNav(context, !isNavOpen(context)),
+        toggleControlPanel: () => openPanel(context, !isPanelOpen(context)),
+    });
+});
+plug('root', ({ pluginContext }) => {
+    const { getConfig, getState, getMethodsOf } = pluginContext;
+    const router = getMethodsOf('router');
+    const rendererCore = getMethodsOf('rendererCore');
+    const fixtureItems = useFixtureItems(pluginContext);
+    const onToggleNav = useOpenNav(pluginContext);
+    const onTogglePanel = useOpenPanel(pluginContext);
+    const { storageCacheReady } = getState();
+    if (!storageCacheReady) {
+        return (React.createElement(Root, { storageCacheReady: false, fixtureItems: [], selectedFixtureId: null, rendererConnected: false, validFixtureSelected: false, fixtureState: {}, navOpen: false, panelOpen: false, navWidth: 0, panelWidth: 0, sidePanelRowOrder: [], globalActionOrder: [], globalOrder: [], navRowOrder: [], fixtureActionOrder: [], rendererActionOrder: [], onToggleNav: () => { }, onTogglePanel: () => { }, onFixtureSelect: () => { }, onFixtureClose: () => { }, onFixtureStateChange: () => { }, setNavWidth: () => { }, setPanelWidth: () => { } }));
+    }
+    const { navWidth, setNavWidth } = getNavWidthApi(pluginContext);
+    const { panelWidth, setPanelWidth } = getPanelWidthApi(pluginContext);
+    const { sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, } = getConfig();
+    return (React.createElement(Root, { storageCacheReady: true, fixtureItems: fixtureItems, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), validFixtureSelected: rendererCore.isValidFixtureSelected(), 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, onFixtureSelect: router.selectFixture, onFixtureClose: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, setNavWidth: setNavWidth, setPanelWidth: setPanelWidth }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function useFixtureItems(context) {
+    const { getMethodsOf } = context;
+    const core = getMethodsOf('core');
+    const { fixturesDir, fixtureFileSuffix } = core.getFixtureFileVars();
+    const rendererCore = getMethodsOf('rendererCore');
+    const fixtures = rendererCore.getFixtures();
+    return React.useMemo(() => flattenFixtureTree(createFixtureTree({ fixturesDir, fixtureFileSuffix, fixtures })), [fixtureFileSuffix, fixtures, fixturesDir]);
+}
+function useOpenNav(context) {
+    return React.useCallback(() => {
+        openNav(context, !isNavOpen(context));
+    }, [context]);
+}
+function useOpenPanel(context) {
+    return React.useCallback(() => {
+        openPanel(context, !isPanelOpen(context));
+    }, [context]);
+}

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

@@ -0,0 +1,4 @@
+import { RootContext } from './shared.js';
+export declare const NAV_OPEN_STORAGE_KEY = "navOpen";
+export declare function isNavOpen(context: RootContext): boolean;
+export declare function openNav(context: RootContext, open: boolean): void;

package/dist/plugins/Root/navOpen.js

@@ -0,0 +1,11 @@
+export const NAV_OPEN_STORAGE_KEY = 'navOpen';
+const NAV_OPEN_DEFAULT = true;
+export function isNavOpen(context) {
+    const storage = context.getMethodsOf('storage');
+    const open = storage.getItem(NAV_OPEN_STORAGE_KEY);
+    return typeof open === 'boolean' ? open : NAV_OPEN_DEFAULT;
+}
+export function openNav(context, open) {
+    const storage = context.getMethodsOf('storage');
+    storage.setItem(NAV_OPEN_STORAGE_KEY, open);
+}

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

@@ -0,0 +1,5 @@
+import { RootContext } from './shared.js';
+export declare function getNavWidthApi({ getMethodsOf }: RootContext): {
+    navWidth: number;
+    setNavWidth: (newWidth: number) => void;
+};

package/dist/plugins/Root/navWidth.js

@@ -0,0 +1,14 @@
+const NAV_WIDTH_STORAGE_KEY = 'navWidth';
+const NAV_WIDTH_DEFAULT = 320;
+const NAV_WIDTH_MIN = 224;
+const NAV_WIDTH_MAX = 512;
+export function getNavWidthApi({ getMethodsOf }) {
+    const storage = getMethodsOf('storage');
+    return {
+        navWidth: storage.getItem(NAV_WIDTH_STORAGE_KEY) || NAV_WIDTH_DEFAULT,
+        setNavWidth: (newWidth) => storage.setItem(NAV_WIDTH_STORAGE_KEY, restrictNavWidth(newWidth)),
+    };
+}
+function restrictNavWidth(navWidth) {
+    return Math.min(NAV_WIDTH_MAX, Math.max(NAV_WIDTH_MIN, navWidth));
+}

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

@@ -0,0 +1,4 @@
+import { RootContext } from './shared.js';
+export declare const PANEL_OPEN_STORAGE_KEY = "sidePanelOpen";
+export declare function isPanelOpen(context: RootContext): boolean;
+export declare function openPanel(context: RootContext, open: boolean): void;

package/dist/plugins/Root/panelOpen.js

@@ -0,0 +1,16 @@
+export const PANEL_OPEN_STORAGE_KEY = 'sidePanelOpen';
+const PANEL_OPEN_DEFAULT = true;
+export function isPanelOpen(context) {
+    const { getMethodsOf } = context;
+    const rendererCore = getMethodsOf('rendererCore');
+    if (!rendererCore.isValidFixtureSelected()) {
+        return false;
+    }
+    const storage = context.getMethodsOf('storage');
+    const open = storage.getItem(PANEL_OPEN_STORAGE_KEY);
+    return typeof open === 'boolean' ? open : PANEL_OPEN_DEFAULT;
+}
+export function openPanel(context, open) {
+    const storage = context.getMethodsOf('storage');
+    storage.setItem(PANEL_OPEN_STORAGE_KEY, open);
+}

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

@@ -0,0 +1,5 @@
+import { RootContext } from './shared.js';
+export declare function getPanelWidthApi({ getMethodsOf }: RootContext): {
+    panelWidth: number;
+    setPanelWidth: (newWidth: number) => void;
+};

package/dist/plugins/Root/panelWidth.js

@@ -0,0 +1,14 @@
+const PANEL_WIDTH_STORAGE_KEY = 'panelWidth';
+const PANEL_WIDTH_DEFAULT = 320;
+const PANEL_WIDTH_MIN = 224;
+const PANEL_WIDTH_MAX = 512;
+export function getPanelWidthApi({ getMethodsOf }) {
+    const storage = getMethodsOf('storage');
+    return {
+        panelWidth: storage.getItem(PANEL_WIDTH_STORAGE_KEY) || PANEL_WIDTH_DEFAULT,
+        setPanelWidth: (newWidth) => storage.setItem(PANEL_WIDTH_STORAGE_KEY, restrictPanelWidth(newWidth)),
+    };
+}
+function restrictPanelWidth(panelWidth) {
+    return Math.min(PANEL_WIDTH_MAX, Math.max(PANEL_WIDTH_MIN, panelWidth));
+}

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

@@ -0,0 +1,3 @@
+import { PluginContext } from 'react-plugin';
+import { RootSpec } from './spec.js';
+export type RootContext = PluginContext<RootSpec>;

package/dist/plugins/Root/shared.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+export type RootSpec = {
+    name: 'root';
+    config: {
+        sidePanelRowOrder: string[];
+        globalActionOrder: string[];
+        globalOrder: string[];
+        navRowOrder: string[];
+        fixtureActionOrder: string[];
+        rendererActionOrder: string[];
+    };
+    state: {
+        storageCacheReady: boolean;
+    };
+};

package/dist/plugins/Root/spec.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/Router/index.js

@@ -0,0 +1,56 @@
+import { isEqual } from 'lodash-es';
+import { createPlugin } from 'react-plugin';
+import { getUrlParams, pushUrlParams, subscribeToLocationChanges, } from '../../shared/url.js';
+const { onLoad, register } = createPlugin({
+    name: 'router',
+    initialState: {
+        urlParams: {},
+    },
+    methods: {
+        getSelectedFixtureId,
+        selectFixture,
+        unselectFixture,
+    },
+});
+onLoad(context => {
+    const { setState } = context;
+    setState({ urlParams: getUrlParams() });
+    return subscribeToLocationChanges((urlParams) => {
+        const { fixtureId } = context.getState().urlParams;
+        const fixtureChanged = !isEqual(urlParams.fixtureId, fixtureId);
+        setState({ urlParams }, () => {
+            if (fixtureChanged) {
+                emitFixtureChangeEvent(context);
+            }
+        });
+    });
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function getSelectedFixtureId({ getState }) {
+    return getState().urlParams.fixtureId || null;
+}
+function selectFixture(context, fixtureId) {
+    setUrlParams(context, { fixtureId });
+}
+function unselectFixture(context) {
+    setUrlParams(context, {});
+}
+function setUrlParams(context, nextUrlParams) {
+    const { urlParams } = context.getState();
+    const fixtureChanged = !isEqual(nextUrlParams.fixtureId, urlParams.fixtureId);
+    const urlParamsEqual = isEqual(nextUrlParams, urlParams);
+    context.setState({ urlParams: nextUrlParams }, () => {
+        // Setting identical url params is considered a "reset" request
+        if (fixtureChanged || urlParamsEqual) {
+            emitFixtureChangeEvent(context);
+        }
+        if (!urlParamsEqual) {
+            pushUrlParams(context.getState().urlParams);
+        }
+    });
+}
+function emitFixtureChangeEvent(context) {
+    context.emit('fixtureChange', getSelectedFixtureId(context));
+}

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

@@ -0,0 +1,15 @@
+import { FixtureId, PlaygroundUrlParams } from 'react-cosmos-core';
+export type RouterSpec = {
+    name: 'router';
+    state: {
+        urlParams: PlaygroundUrlParams;
+    };
+    methods: {
+        getSelectedFixtureId(): null | FixtureId;
+        selectFixture(fixtureId: FixtureId): void;
+        unselectFixture(): void;
+    };
+    events: {
+        fixtureChange(fixtureId: null | FixtureId): void;
+    };
+};

package/dist/plugins/Router/spec.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/StandardControl/index.d.ts

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/StandardControl/index.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useMemo } from 'react';
+import { createPlugin } from 'react-plugin';
+import { ExpandCollapseValues } from '../../components/ValueInputTree/ExpandCollapseValues.js';
+import { ValueInputTree } from '../../components/ValueInputTree/index.js';
+import { useTreeExpansionStorage } from './storage.js';
+const { namedPlug, plug, register } = createPlugin({
+    name: 'standardControl',
+});
+plug('control-standard', ({ pluginContext, slotProps }) => {
+    const { controlName, control, onFixtureStateChange } = slotProps;
+    const treeExpansionApi = useTreeExpansionStorage(pluginContext);
+    const values = useMemo(() => ({ [controlName]: control.currentValue }), [control.currentValue, controlName]);
+    const handleValueChange = useCallback((updatedValues) => {
+        onFixtureStateChange(fixtureState => ({
+            ...fixtureState,
+            controls: {
+                ...fixtureState.controls,
+                [controlName]: {
+                    ...control,
+                    currentValue: updatedValues[controlName],
+                },
+            },
+        }));
+    }, [control, controlName, onFixtureStateChange]);
+    return (React.createElement(ValueInputTree, { id: `control-${controlName}`, values: values, onValueChange: handleValueChange, ...treeExpansionApi }));
+});
+namedPlug('controlAction', 'expandCollapse', ({ pluginContext, slotProps }) => {
+    const { controls } = slotProps;
+    const treeExpansionApi = useTreeExpansionStorage(pluginContext);
+    return (React.createElement(ExpandCollapseValues, { values: extractValuesFromStandardControls(controls), ...treeExpansionApi }));
+});
+function extractValuesFromStandardControls(controls) {
+    const values = {};
+    Object.keys(controls).forEach(controlName => {
+        const control = controls[controlName];
+        if (control.type === 'standard')
+            values[controlName] = control.currentValue;
+    });
+    return values;
+}
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

@@ -0,0 +1,3 @@
+export type StandardControlSpec = {
+    name: 'standardControl';
+};

package/dist/plugins/StandardControl/spec.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/StandardControl/storage.d.ts

@@ -0,0 +1,7 @@
+import { PluginContext } from 'react-plugin';
+import { TreeExpansion } from '../../shared/treeExpansion.js';
+import { StandardControlSpec } from './spec.js';
+export declare function useTreeExpansionStorage(pluginContext: PluginContext<StandardControlSpec>): {
+    expansion: TreeExpansion;
+    setExpansion: (newTreeExpansion: TreeExpansion) => void;
+};

package/dist/plugins/StandardControl/storage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+const storageKey = 'standardControlTreeExpansion';
+const emptyTreeExpansion = {};
+// TODO: Persist tree expansion state per fixture ID?
+export function useTreeExpansionStorage(pluginContext) {
+    const storage = pluginContext.getMethodsOf('storage');
+    const expansion = storage.getItem(storageKey) || emptyTreeExpansion;
+    const setExpansion = React.useCallback((newTreeExpansion) => storage.setItem(storageKey, newTreeExpansion), [storage]);
+    return { expansion, setExpansion };
+}

package/dist/plugins/Storage/index.d.ts

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/Storage/index.js

@@ -0,0 +1,40 @@
+import localForage from 'localforage';
+import { createPlugin } from 'react-plugin';
+const { register } = createPlugin({
+    name: 'storage',
+    initialState: {
+        cache: null,
+    },
+    methods: {
+        loadCache,
+        getItem,
+        setItem,
+    },
+});
+if (process.env.NODE_ENV !== 'test')
+    register();
+export { register };
+async function loadCache(context, projectId) {
+    const items = (await localForage.getItem(getProjectKey(projectId))) || {};
+    context.setState({ cache: { projectId, items } });
+}
+function getItem(context, key) {
+    const { cache } = context.getState();
+    if (!cache) {
+        throw new Error(`Can't retrieve item "${key}" before loading storage`);
+    }
+    return cache.items[key];
+}
+function setItem(context, key, value) {
+    const { cache } = context.getState();
+    if (!cache) {
+        throw new Error(`Can't set item "${key}" before loading storage`);
+    }
+    const { projectId, items } = cache;
+    const newItems = { ...items, [key]: value };
+    context.setState({ cache: { projectId, items: newItems } });
+    localForage.setItem(getProjectKey(projectId), newItems);
+}
+function getProjectKey(projectId) {
+    return `cosmos-${projectId}`;
+}

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

@@ -0,0 +1,18 @@
+type Cache = {
+    projectId: string;
+    items: {
+        [key: string]: any;
+    };
+};
+export type StorageSpec = {
+    name: 'storage';
+    state: {
+        cache: null | Cache;
+    };
+    methods: {
+        loadCache(projectId: string): Promise<unknown>;
+        getItem<T>(key: string): void | T;
+        setItem<T>(key: string, value: T): void;
+    };
+};
+export {};

package/dist/plugins/Storage/spec.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/pluginEntry.d.ts

@@ -0,0 +1,23 @@
+import './BuildNotifications/index.js';
+import './ClassStatePanel/index.js';
+import './ContentOverlay/index.js';
+import './ControlPanel/index.js';
+import './ControlSelect/index.js';
+import './Core/index.js';
+import './FixtureBookmark/index.js';
+import './FixtureSearch/index.js';
+import './FixtureTree/index.js';
+import './FullScreenButton/index.js';
+import './MessageHandler/index.js';
+import './Notifications/index.js';
+import './PluginList/index.js';
+import './PropsPanel/index.js';
+import './RemoteRenderer/index.js';
+import './RendererCore/index.js';
+import './RendererPreview/index.js';
+import './RendererSelect/index.js';
+import './ResponsivePreview/index.js';
+import './Root/index.js';
+import './Router/index.js';
+import './StandardControl/index.js';
+import './Storage/index.js';

package/dist/plugins/pluginEntry.js

@@ -0,0 +1,29 @@
+import { enablePlugin } from 'react-plugin';
+import './BuildNotifications/index.js';
+import './ClassStatePanel/index.js';
+import './ContentOverlay/index.js';
+import './ControlPanel/index.js';
+import './ControlSelect/index.js';
+import './Core/index.js';
+import './FixtureBookmark/index.js';
+import './FixtureSearch/index.js';
+import './FixtureTree/index.js';
+import './FullScreenButton/index.js';
+import './MessageHandler/index.js';
+import './Notifications/index.js';
+import './PluginList/index.js';
+import './PropsPanel/index.js';
+import './RemoteRenderer/index.js';
+import './RendererCore/index.js';
+import './RendererPreview/index.js';
+import './RendererSelect/index.js';
+import './ResponsivePreview/index.js';
+import './Root/index.js';
+import './Router/index.js';
+import './StandardControl/index.js';
+import './Storage/index.js';
+const disabledPlugins = ['rendererSelect', 'pluginList'];
+// Unregistering plugins first makes this file hot-reloadable because a plugin
+// can only be registered once with a given name
+// resetPlugins();
+disabledPlugins.forEach(disabledPlugin => enablePlugin(disabledPlugin, false));

package/dist/shared/defaultPluginConfig.d.ts

@@ -0,0 +1,13 @@
+export declare const DEFAULT_PLUGIN_CONFIG: {
+    root: {
+        sidePanelRowOrder: string[];
+        globalActionOrder: string[];
+        globalOrder: string[];
+        navRowOrder: string[];
+        fixtureActionOrder: string[];
+        rendererActionOrder: string[];
+    };
+    controlPanel: {
+        controlActionOrder: string[];
+    };
+};

package/dist/shared/defaultPluginConfig.js

@@ -0,0 +1,13 @@
+export const DEFAULT_PLUGIN_CONFIG = {
+    root: {
+        sidePanelRowOrder: ['values', 'props', 'classState'],
+        globalActionOrder: ['remoteRenderer'],
+        globalOrder: ['fixtureSearch', 'notifications'],
+        navRowOrder: ['fixtureSearch', 'fixtureBookmarks', 'fixtureTree'],
+        fixtureActionOrder: ['bookmarkFixture'],
+        rendererActionOrder: ['editFixture', 'fullScreen', 'responsivePreview'],
+    },
+    controlPanel: {
+        controlActionOrder: ['expandCollapse'],
+    },
+};

package/dist/shared/fixtureTree.d.ts

@@ -0,0 +1,3 @@
+import { FixtureId, FixtureTreeNode } from 'react-cosmos-core';
+export declare function recordContainsFixtureId(fixtureIds: Record<string, FixtureId>, fixtureId: FixtureId): boolean;
+export declare function nodeContainsFixtureId({ data, children }: FixtureTreeNode, fixtureId: FixtureId): boolean;

package/dist/shared/fixtureTree.js

@@ -0,0 +1,12 @@
+import { isEqual } from 'lodash-es';
+export function recordContainsFixtureId(fixtureIds, fixtureId) {
+    return Object.keys(fixtureIds).some(fixtureName => isEqual(fixtureIds[fixtureName], fixtureId));
+}
+export function nodeContainsFixtureId({ data, children }, fixtureId) {
+    if (data.type === 'fixture')
+        return isEqual(data.fixtureId, fixtureId);
+    if (data.type === 'multiFixture')
+        return recordContainsFixtureId(data.fixtureIds, fixtureId);
+    return (children !== undefined &&
+        Object.keys(children).some(childName => nodeContainsFixtureId(children[childName], fixtureId)));
+}

package/dist/shared/treeExpansion.d.ts

@@ -0,0 +1,7 @@
+import { TreeNode } from 'react-cosmos-core';
+export type TreeExpansion = {
+    [nodePath: string]: boolean;
+};
+export declare function isTreeFullyCollapsed(treeExpansion: TreeExpansion): boolean;
+export declare function getFullTreeExpansion(rootNode: TreeNode<any>): Record<string, boolean>;
+export declare function hasExpandableNodes(rootNode: TreeNode<any>): boolean;

package/dist/shared/treeExpansion.js

@@ -0,0 +1,24 @@
+export function isTreeFullyCollapsed(treeExpansion) {
+    return Object.keys(treeExpansion).every(childPath => treeExpansion[childPath] === false);
+}
+export function getFullTreeExpansion(rootNode) {
+    const childPaths = getExpandableNodes(rootNode);
+    return childPaths.reduce((treeExpansion, dirName) => ({ ...treeExpansion, [dirName]: true }), {});
+}
+export function hasExpandableNodes(rootNode) {
+    return getExpandableNodes(rootNode).length > 0;
+}
+function getExpandableNodes(treeNode, parents = []) {
+    const { children } = treeNode;
+    if (!children)
+        return [];
+    const nodePaths = [];
+    Object.keys(children).forEach(childName => {
+        const childNode = children[childName];
+        if (childNode.children && Object.keys(childNode.children).length > 0) {
+            nodePaths.push([...parents, childName].join('/'));
+            nodePaths.push(...getExpandableNodes(childNode, [...parents, childName]));
+        }
+    });
+    return nodePaths;
+}

package/dist/shared/url.d.ts

@@ -0,0 +1,5 @@
+import { PlaygroundUrlParams } from 'react-cosmos-core';
+export declare function getUrlParams(): PlaygroundUrlParams;
+export declare function pushUrlParams(urlParams: PlaygroundUrlParams): void;
+export declare function subscribeToLocationChanges(userHandler: (urlParams: PlaygroundUrlParams) => unknown): () => void;
+export declare function createRelativePlaygroundUrl(urlParams: PlaygroundUrlParams): string;

package/dist/shared/url.js

@@ -0,0 +1,33 @@
+import { parsePlaygroundUrlQuery, stringifyPlaygroundUrlQuery, } from 'react-cosmos-core';
+export function getUrlParams() {
+    return parsePlaygroundUrlQuery(location.search);
+}
+export function pushUrlParams(urlParams) {
+    const query = stringifyPlaygroundUrlQuery(urlParams);
+    // Refresh page completely when pushState isn't supported
+    if (!history.pushState) {
+        location.search = query;
+        return;
+    }
+    // Update URL without refreshing page
+    history.pushState({}, '', createRelativeUrlWithQuery(query));
+}
+export function subscribeToLocationChanges(userHandler) {
+    const handler = () => {
+        userHandler(getUrlParams());
+    };
+    window.addEventListener('popstate', handler);
+    return () => {
+        window.removeEventListener('popstate', handler);
+    };
+}
+export function createRelativePlaygroundUrl(urlParams) {
+    const query = stringifyPlaygroundUrlQuery(urlParams);
+    return createRelativeUrlWithQuery(query);
+}
+function createRelativeUrlWithQuery(query) {
+    // NOTE: "./" is used to return to the home URL. Passing an empty string
+    // doesn't do anything. And passing "/" doesn't work if Cosmos is not hosted
+    // at root (sub)domain level.
+    return query.length > 0 ? `?${query}` : './';
+}

package/dist/slots/ControlActionSlot.d.ts

@@ -0,0 +1,10 @@
+import { FixtureStateControls } from 'react-cosmos-core';
+export type ControlActionSlotProps = {
+    controls: FixtureStateControls;
+};
+type Props = {
+    slotProps: ControlActionSlotProps;
+    plugOrder: string[];
+};
+export declare function ControlActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export {};

package/dist/slots/ControlActionSlot.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ArraySlot } from 'react-plugin';
+export function ControlActionSlot({ slotProps, plugOrder }) {
+    return (React.createElement(ArraySlot, { name: "controlAction", slotProps: slotProps, plugOrder: plugOrder }));
+}

package/dist/slots/ControlSlot.d.ts

@@ -0,0 +1,11 @@
+import { FixtureState, FixtureStateControl, StateUpdater } from 'react-cosmos-core';
+export type ControlSlotProps<TControl extends FixtureStateControl> = {
+    controlName: string;
+    control: TControl;
+    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+};
+type Props = {
+    slotProps: ControlSlotProps<any>;
+};
+export declare function ControlSlot({ slotProps }: Props): JSX.Element;
+export {};

package/dist/slots/ControlSlot.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Slot } from 'react-plugin';
+export function ControlSlot({ slotProps }) {
+    return (React.createElement(Slot, { name: `control-${slotProps.control.type}`, slotProps: slotProps }));
+}

package/dist/slots/FixtureActionSlot.d.ts

@@ -0,0 +1,10 @@
+import { FixtureId } from 'react-cosmos-core';
+export type FixtureActionSlotProps = {
+    fixtureId: FixtureId;
+};
+type Props = {
+    slotProps: FixtureActionSlotProps;
+    plugOrder: string[];
+};
+export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export {};