react-cosmos-ui 6.0.0-alpha.13 → 6.0.0-alpha.14

package/dist/plugins/Root/HomeOverlay/WelcomeCosmos.js

@@ -0,0 +1,159 @@
+import React from 'react';
+import styled from 'styled-components';
+import { IllustrationContainer, NoWrap, OverlayBody, OverlayContainer, SecondaryButton, TextContainer, } from '../../../components/ContentOverlay.js';
+import { AstronautIllustration } from '../../../components/illustrations/Astronaut.js';
+import { screenGrey1, screenGrey3, screenGrey5, screenPrimary1, screenPrimary2, screenPrimary3, } from '../../../style/colors.js';
+export function WelcomeCosmos({ onDismissWelcome }) {
+    return (React.createElement(OverlayContainer, { "data-testid": "welcome" },
+        React.createElement(OverlayBody, null,
+            React.createElement(TextContainer, null,
+                React.createElement(Header, null,
+                    "Welcome to ",
+                    React.createElement(NoWrap, null, "React Cosmos")),
+                React.createElement(List, null,
+                    React.createElement("li", null,
+                        React.createElement(Bullet, null),
+                        React.createElement("span", null,
+                            React.createElement(Link, { href: "https://github.com/react-cosmos/react-cosmos/tree/main/docs", rel: "noopener noreferrer", target: "_blank" },
+                                React.createElement("strong", null, "Read the docs")),
+                            ' ',
+                            "to get the most out of React Cosmos.",
+                            React.createElement("br", null),
+                            "Chat with us on",
+                            ' ',
+                            React.createElement(Link, { href: "https://discord.gg/3X95VgfnW5", rel: "noopener noreferrer", target: "_blank" }, "Discord"),
+                            ". Report detailed issues on",
+                            ' ',
+                            React.createElement(Link, { href: "https://github.com/react-cosmos/react-cosmos/issues", rel: "noopener noreferrer", target: "_blank" }, "GitHub"),
+                            ".")),
+                    React.createElement("li", null,
+                        React.createElement(Bullet, null),
+                        React.createElement("span", null,
+                            React.createElement(Link, { href: "https://github.com/users/skidding/sponsorship", rel: "noopener noreferrer", target: "_blank" },
+                                React.createElement("strong", null, "Become a Sponsor")),
+                            ' ',
+                            "to invest in the future of React Cosmos.",
+                            React.createElement("br", null),
+                            `Don't worry if you can't. `,
+                            React.createElement(Highlight, null, "React Cosmos will always be free.")))),
+                React.createElement(Paragraph, null,
+                    React.createElement(ActionLink, { href: "https://forms.gle/yvoie73Rfo6Zy7no7", rel: "noopener noreferrer", target: "_blank" }, "share your feedback"),
+                    React.createElement(SecondaryButton, { onClick: onDismissWelcome }, "hide this screen"))),
+            React.createElement(IllustrationContainer, null,
+                React.createElement(AstronautIllustration, { title: "astronaut" })))));
+}
+const Header = styled.h1 `
+  position: relative;
+  margin: 0 0 64px 0;
+  color: ${screenPrimary2};
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1.2em;
+  text-transform: uppercase;
+  letter-spacing: 0.015em;
+
+  ::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    left: 0;
+    width: 64px;
+    height: 3px;
+    background: ${screenPrimary2};
+  }
+`;
+const Paragraph = styled.p `
+  margin: 16px 0;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+`;
+const List = styled.ul `
+  margin: 0 0 48px 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 24px;
+  }
+`;
+const Bullet = styled.span `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin: 6px 16px 0 0;
+  padding: 0 0 0 0;
+  border-radius: 100%;
+  font-size: 18px;
+  font-weight: 600;
+  background: ${screenGrey5};
+  color: ${screenGrey3};
+
+  ::after {
+    position: absolute;
+    content: '';
+    width: 6px;
+    height: 6px;
+    top: 13px;
+    left: 13px;
+    border-radius: 100%;
+    background: ${screenGrey3};
+    transform: rotate(0deg);
+  }
+`;
+const Link = styled.a `
+  color: ${screenGrey1};
+`;
+const Highlight = styled.span `
+  padding: 2px 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 200, 0.88);
+  color: black;
+`;
+const actionLinkHeight = 36;
+const ActionLink = styled.a `
+  display: inline-block;
+  height: ${actionLinkHeight}px;
+  padding: 0 16px;
+  background: ${screenPrimary3};
+  color: #fff;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: ${actionLinkHeight}px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  transform: translate3d(0, 0, 0);
+  animation: pulse 10s ease-out infinite;
+  outline: none;
+
+  :focus {
+    box-shadow: 0 0 0px 2px ${screenPrimary1};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+
+  @keyframes pulse {
+    21.25% {
+      background: ${screenPrimary3};
+    }
+    25% {
+      background: ${screenPrimary2};
+    }
+    30% {
+      background: ${screenPrimary3};
+    }
+  }
+`;

package/dist/plugins/Root/HomeOverlay/welcomeDismiss.d.ts

@@ -0,0 +1,7 @@
+import { RootContext } from '../shared.js';
+export declare const WELCOME_DISMISS_STORAGE_KEY = "welcomeDismissedAt";
+export declare function useWelcomeDismiss(context: RootContext): {
+    isWelcomeDismissed: () => boolean;
+    onDismissWelcome: () => void;
+    onShowWelcome: () => void;
+};

package/dist/plugins/{ContentOverlay → Root/HomeOverlay}/welcomeDismiss.js

@@ -4,13 +4,15 @@ const SHOW_AGAIN_IN = 90 * 86400 * 1000; // ~3 months
 export function useWelcomeDismiss(context) {
     const { getMethodsOf } = context;
     const storage = getMethodsOf('storage');
-    const welcomeDismissedAt = storage.getItem(WELCOME_DISMISS_STORAGE_KEY) || 0;
-    // Show welcome screen again after a while
-    const welcomeDismissed = welcomeDismissedAt > Date.now() - SHOW_AGAIN_IN;
     const onDismissWelcome = React.useCallback(() => storage.setItem(WELCOME_DISMISS_STORAGE_KEY, Date.now()), [storage]);
     const onShowWelcome = React.useCallback(() => storage.setItem(WELCOME_DISMISS_STORAGE_KEY, 0), [storage]);
+    function isWelcomeDismissed() {
+        const welcomeDismissedAt = storage.getItem(WELCOME_DISMISS_STORAGE_KEY) || 0;
+        // Show welcome screen again after a while
+        return welcomeDismissedAt > Date.now() - SHOW_AGAIN_IN;
+    }
     return {
-        welcomeDismissed,
+        isWelcomeDismissed,
         onDismissWelcome,
         onShowWelcome,
     };

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

@@ -1,10 +1,8 @@
 import { FixtureId, FixtureState, FlatFixtureTreeItem, StateUpdater } from 'react-cosmos-core';
 type Props = {
-    storageCacheReady: boolean;
     fixtureItems: FlatFixtureTreeItem[];
     selectedFixtureId: FixtureId | null;
     rendererConnected: boolean;
-    validFixtureSelected: boolean;
     fixtureState: FixtureState;
     navOpen: boolean;
     panelOpen: boolean;
@@ -23,6 +21,9 @@ type Props = {
     onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
     setNavWidth: (width: number) => unknown;
     setPanelWidth: (width: number) => unknown;
+    welcomeDismissed: boolean;
+    onDismissWelcome: () => unknown;
+    onShowWelcome: () => unknown;
 };
-export declare function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rendererConnected, validFixtureSelected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, }: Props): JSX.Element;
+export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
 export {};

package/dist/plugins/Root/Root.js

@@ -5,9 +5,10 @@ import { useDrag } from '../../hooks/useDrag.js';
 import { NavRowSlot } from '../../slots/NavRowSlot.js';
 import { grey32, grey8, white10 } from '../../style/colors.js';
 import { GlobalHeader } from './GlobalHeader.js';
+import { HomeOverlay } from './HomeOverlay/HomeOverlay.js';
 import { RendererHeader } from './RendererHeader.js';
 import { SidePanel } from './SidePanel.js';
-export function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rendererConnected, validFixtureSelected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, }) {
+export function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onFixtureSelect, onFixtureClose, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
     const navDrag = useDrag({
         value: navWidth,
         onChange: setNavWidth,
@@ -17,29 +18,27 @@ export function Root({ storageCacheReady, fixtureItems, selectedFixtureId, rende
         reverse: true,
         onChange: setPanelWidth,
     });
-    if (!storageCacheReady) {
-        return React.createElement(Container, null);
-    }
-    const showNav = rendererConnected && (navOpen || !validFixtureSelected);
+    const showNav = navOpen || !selectedFixtureId;
     const dragging = navDrag.dragging || panelDrag.dragging;
     // z-indexes are set here on purpose to show the layer hierarchy at a glance
     return (React.createElement(Container, { dragging: dragging },
         showNav && (React.createElement(Draggable, { style: { width: navWidth, zIndex: 2 } },
-            React.createElement(Nav, null, rendererConnected && (React.createElement(NavRowSlot, { slotProps: { onCloseNav: onToggleNav }, plugOrder: navRowOrder }))),
+            React.createElement(Nav, null,
+                React.createElement(NavRowSlot, { slotProps: { onCloseNav: onToggleNav }, plugOrder: navRowOrder })),
             navDrag.dragging && React.createElement(DragOverlay, null),
             React.createElement(NavDragHandle, { ref: navDrag.dragElRef }))),
         React.createElement(MainContainer, { key: "main", style: { zIndex: 1 } },
-            !validFixtureSelected && (React.createElement(GlobalHeader, { selectedFixtureId: selectedFixtureId, rendererConnected: rendererConnected, validFixtureSelected: validFixtureSelected, globalActionOrder: globalActionOrder })),
+            !selectedFixtureId && (React.createElement(GlobalHeader, { rendererConnected: rendererConnected, globalActionOrder: globalActionOrder })),
             React.createElement(RendererContainer, { key: "rendererContainer" },
-                selectedFixtureId && validFixtureSelected && (React.createElement(RendererHeader, { fixtureItems: fixtureItems, fixtureId: selectedFixtureId, navOpen: navOpen, panelOpen: panelOpen, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onOpenNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: onFixtureSelect, onClose: onFixtureClose })),
+                selectedFixtureId && (React.createElement(RendererHeader, { fixtureItems: fixtureItems, fixtureId: selectedFixtureId, navOpen: navOpen, panelOpen: panelOpen, fixtureActionOrder: fixtureActionOrder, rendererActionOrder: rendererActionOrder, onOpenNav: onToggleNav, onTogglePanel: onTogglePanel, onFixtureSelect: onFixtureSelect, onClose: onFixtureClose })),
                 React.createElement(RendererBody, { key: "rendererBody" },
                     React.createElement(Slot, { name: "rendererPreview" }),
                     dragging && React.createElement(DragOverlay, null),
-                    panelOpen && selectedFixtureId && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
+                    selectedFixtureId && panelOpen && (React.createElement(ControlPanelContainer, { style: { width: panelWidth, zIndex: 3 } },
                         React.createElement(SidePanel, { fixtureId: selectedFixtureId, fixtureState: fixtureState, sidePanelRowOrder: sidePanelRowOrder, onFixtureStateChange: onFixtureStateChange }),
                         panelDrag.dragging && React.createElement(DragOverlay, null),
                         React.createElement(PanelDragHandle, { ref: panelDrag.dragElRef })))),
-                React.createElement(Slot, { name: "contentOverlay" }))),
+                !selectedFixtureId && (React.createElement(HomeOverlay, { welcomeDismissed: welcomeDismissed, onDismissWelcome: onDismissWelcome, onShowWelcome: onShowWelcome })))),
         React.createElement("div", { style: { zIndex: 4 } },
             React.createElement(ArraySlot, { name: "global", plugOrder: globalOrder }))));
 }

package/dist/plugins/Root/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createFixtureTree, flattenFixtureTree } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
+import { useWelcomeDismiss } from './HomeOverlay/welcomeDismiss.js';
 import { isNavOpen, openNav } from './navOpen.js';
 import { getNavWidthApi } from './navWidth.js';
 import { isPanelOpen, openPanel } from './panelOpen.js';
@@ -41,14 +42,14 @@ plug('root', ({ pluginContext }) => {
     const fixtureItems = useFixtureItems(pluginContext);
     const onToggleNav = useOpenNav(pluginContext);
     const onTogglePanel = useOpenPanel(pluginContext);
+    const welcomeDismiss = useWelcomeDismiss(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: () => { } }));
-    }
+    if (!storageCacheReady)
+        return null;
     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 }));
+    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, onFixtureSelect: router.selectFixture, onFixtureClose: router.unselectFixture, onFixtureStateChange: rendererCore.setFixtureState, 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/panelOpen.js

@@ -1,11 +1,6 @@
 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;

package/dist/plugins/pluginEntry.d.ts

@@ -1,6 +1,5 @@
 import './BuildNotifications/index.js';
 import './ClassStatePanel/index.js';
-import './ContentOverlay/index.js';
 import './ControlPanel/index.js';
 import './ControlSelect/index.js';
 import './Core/index.js';

package/dist/plugins/pluginEntry.js

@@ -1,7 +1,6 @@
 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';

package/dist/style/vars.d.ts

@@ -1,2 +1,3 @@
 export declare const fontFamily = "-apple-system, BlinkMacSystemFont, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif";
 export declare const quick = 0.32;
+export declare const rendererBg = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")";

package/dist/style/vars.js

@@ -1,2 +1,3 @@
 export const fontFamily = `-apple-system, BlinkMacSystemFont, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif`;
 export const quick = 0.32;
+export const rendererBg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;

package/dist/testHelpers/pluginMocks.d.ts

@@ -38,7 +38,6 @@ export declare function getRendererCoreMethods(): {
     getFixtures(): import("react-cosmos-core").FixtureList;
     getFixtureState(): import("react-cosmos-core").FixtureState;
     isRendererConnected(): boolean;
-    isValidFixtureSelected(): boolean;
     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;
@@ -82,7 +81,6 @@ export declare function mockRendererCore(methods?: MethodsOf<RendererCoreSpec>):
     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);
-    isValidFixtureSelected: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => boolean);
     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);

package/dist/testHelpers/pluginMocks.js

@@ -75,7 +75,6 @@ export function mockRendererCore(methods = {}) {
         getFixtures: jest.fn(),
         getFixtureState: jest.fn(),
         isRendererConnected: jest.fn(),
-        isValidFixtureSelected: jest.fn(),
         setFixtureState: jest.fn(),
         selectPrimaryRenderer: jest.fn(),
         receiveResponse: jest.fn(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-alpha.13",
+  "version": "6.0.0-alpha.14",
   "description": "React Cosmos UI",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
   "license": "MIT",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "6.0.0-alpha.13"
+    "react-cosmos-core": "6.0.0-alpha.14"
   },
   "devDependencies": {
     "fuzzaldrin-plus": "^0.6.0",
@@ -23,5 +23,5 @@
     "react-plugin": "^3.0.0-alpha.4",
     "styled-components": "^5.3.8"
   },
-  "gitHead": "cf95e67ce942f6a242f023ecebe45d6916d5b753"
+  "gitHead": "ed13194534675df091da3ceaef4202572ddeed12"
 }

package/dist/plugins/ContentOverlay/ContentOverlay.d.ts

@@ -1,13 +0,0 @@
-import { RuntimeStatus, UrlStatus } from '../RendererPreview/shared.js';
-type Props = {
-    fixtureSelected: boolean;
-    validFixtureSelected: boolean;
-    rendererConnected: boolean;
-    rendererPreviewUrlStatus: UrlStatus;
-    rendererPreviewRuntimeStatus: RuntimeStatus;
-    welcomeDismissed: boolean;
-    onDismissWelcome: () => unknown;
-    onShowWelcome: () => unknown;
-};
-export declare function ContentOverlay({ fixtureSelected, validFixtureSelected, rendererConnected, rendererPreviewUrlStatus, rendererPreviewRuntimeStatus, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element | null;
-export {};

package/dist/plugins/ContentOverlay/ContentOverlay.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { NoFixtureSelected } from './NoFixtureSelected.js';
-import { RendererNotResponding } from './RendererNotResponding.js';
-import { ContentContainer, OverlayContainer } from './shared.js';
-import { WelcomeCosmos } from './WelcomeCosmos.js';
-export function ContentOverlay({ fixtureSelected, validFixtureSelected, rendererConnected, rendererPreviewUrlStatus, rendererPreviewRuntimeStatus, welcomeDismissed, onDismissWelcome, onShowWelcome, }) {
-    if (rendererPreviewUrlStatus === 'error') {
-        return (React.createElement(OverlayContainer, { "data-testid": "rendererNotResponding" },
-            React.createElement(RendererNotResponding, null)));
-    }
-    if (validFixtureSelected || rendererPreviewRuntimeStatus === 'error') {
-        // Usually the content overlay is only hidden when a valid fixture is
-        // selected. However, when the renderer is in error state, we also hide the
-        // content overlay to avoid showing a blank screen and to uncover the error
-        // message.
-        return null;
-    }
-    if (!rendererConnected) {
-        // Delay "waiting for renderer" state to avoid rapidly changing visual
-        // states when renderer is already compiled and will respond immediately
-        return (React.createElement(OverlayContainer, { "data-testid": "waiting" },
-            React.createElement(ContentContainer, null)));
-    }
-    if (fixtureSelected) {
-        return (React.createElement(OverlayContainer, { "data-testid": "notFound" },
-            React.createElement(ContentContainer, null)));
-    }
-    if (welcomeDismissed) {
-        return (React.createElement(OverlayContainer, { "data-testid": "blank" },
-            React.createElement(NoFixtureSelected, { onShowWelcome: onShowWelcome })));
-    }
-    return (React.createElement(OverlayContainer, { "data-testid": "welcome" },
-        React.createElement(WelcomeCosmos, { onDismissWelcome: onDismissWelcome })));
-}

package/dist/plugins/ContentOverlay/RendererNotResponding.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import { Slot } from 'react-plugin';
-import styled from 'styled-components';
-import { ArtificialIntelligenceIllustration } from '../../components/illustrations/ArtificialIntelligence.js';
-import { screenGrey3, screenGrey5, screenPrimary2, screenPrimary3, } from '../../style/colors.js';
-import { ContentContainer, IllustrationContainer, NoWrap, TextContainer, } from './shared.js';
-export function RendererNotResponding() {
-    return (React.createElement(ContentContainer, null,
-        React.createElement(TextContainer, null,
-            React.createElement(Header, null,
-                "Renderer ",
-                React.createElement(NoWrap, null, "not responding")),
-            React.createElement(Paragraph, null, `It's usually one of the following...`),
-            React.createElement(List, null,
-                React.createElement("li", null,
-                    React.createElement(No, null, "1"),
-                    React.createElement("span", null,
-                        React.createElement("strong", null, "Please check your terminal for errors."),
-                        React.createElement("br", null),
-                        "Your build might be broken.")),
-                React.createElement("li", null,
-                    React.createElement(No, null, "2"),
-                    React.createElement("span", null,
-                        React.createElement(Slot, { name: "rendererError" },
-                            "If you use a bundler plugin,",
-                            ' ',
-                            React.createElement("strong", null,
-                                "make sure",
-                                React.createElement("br", null),
-                                "your build is generating an index.html page."))))),
-            React.createElement(Paragraph, null,
-                React.createElement(ActionLink, { href: "https://discord.gg/3X95VgfnW5", rel: "noopener noreferrer", target: "_blank" }, "ask for help"))),
-        React.createElement(IllustrationContainer, null,
-            React.createElement(ArtificialIntelligenceIllustration, { title: "robot" }))));
-}
-const Header = styled.h1 `
-  position: relative;
-  margin: 0 0 64px 0;
-  color: ${screenPrimary2};
-  font-size: 30px;
-  font-weight: 700;
-  line-height: 1.2em;
-  text-transform: uppercase;
-  letter-spacing: 0.015em;
-
-  ::after {
-    content: '';
-    position: absolute;
-    bottom: -12px;
-    left: 0;
-    width: 64px;
-    height: 3px;
-    background: ${screenPrimary2};
-  }
-`;
-const Paragraph = styled.p `
-  margin: 16px 0;
-
-  :last-child {
-    margin-bottom: 0;
-  }
-`;
-const List = styled.ul `
-  margin: 0 0 48px 0;
-  padding: 0;
-  list-style: none;
-
-  li {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin-bottom: 12px;
-  }
-`;
-const No = styled.span `
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  width: 32px;
-  height: 32px;
-  margin: 6px 16px 0 0;
-  padding: 0 6px 0 0;
-  border-radius: 100%;
-  font-size: 18px;
-  font-weight: 600;
-  background: ${screenGrey5};
-  color: ${screenGrey3};
-
-  ::after {
-    content: '.';
-  }
-`;
-const actionLinkHeight = 36;
-const ActionLink = styled.a `
-  display: inline-block;
-  height: ${actionLinkHeight}px;
-  padding: 0 16px;
-  background: ${screenPrimary3};
-  color: #fff;
-  border-radius: 5px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: ${actionLinkHeight}px;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  text-decoration: none;
-`;