react-cosmos-ui 6.0.0-alpha.0

package/dist/playground.d.ts

@@ -0,0 +1,11 @@
+import { PlaygroundMountArgs } from './playgroundConfig.js';
+import './plugins/pluginEntry.js';
+declare global {
+    interface Window {
+        ReactPlugin: any;
+        React: any;
+        ReactDom: any;
+        StyledComponents: any;
+    }
+}
+export default function mount({ playgroundConfig, pluginConfigs, }: PlaygroundMountArgs): Promise<void>;

package/dist/playground.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDom from 'react-dom/client';
+import * as ReactPlugin from 'react-plugin';
+import styled from 'styled-components';
+import './plugins/pluginEntry.js';
+import { DEFAULT_PLUGIN_CONFIG } from './shared/defaultPluginConfig.js';
+import { GlobalStyle } from './style/globalStyle.js';
+// Enable external plugins to use a shared copy of react-plugin. Also enable
+// fiddling with plugins from browser console :D.
+window.ReactPlugin = ReactPlugin;
+window.React = React;
+window.ReactDom = ReactDom;
+window.StyledComponents = styled;
+export default async function mount({ playgroundConfig, pluginConfigs, }) {
+    const { loadPlugins, Slot } = ReactPlugin;
+    const config = { ...DEFAULT_PLUGIN_CONFIG, ...playgroundConfig };
+    loadPlugins({ config });
+    // We can make plugin loading unblocking if react-plugin exports the
+    // reloadPlugins method.
+    await Promise.all(pluginConfigs.map(async (pluginConfig) => {
+        if (pluginConfig.ui)
+            await loadPluginScript(pluginConfig.ui);
+    }));
+    const root = ReactDom.createRoot(document.getElementById('root'));
+    root.render(React.createElement(React.Fragment, null,
+        React.createElement(GlobalStyle, null),
+        React.createElement(Slot, { name: "root" })));
+}
+async function loadPluginScript(scriptPath) {
+    console.log(`[Cosmos] Loading plugin script at ${scriptPath}`);
+    // Handle both absolute (dev server) and relative paths (static export)
+    const normalizedPath = scriptPath.startsWith('/')
+        ? scriptPath
+        : `/${scriptPath}`;
+    await import(/* webpackIgnore: true */ `./_plugin${normalizedPath}`);
+}

package/dist/playgroundConfig.d.ts

@@ -0,0 +1,10 @@
+import { CosmosPluginConfig } from 'react-cosmos-core';
+import { CoreSpec } from './plugins/Core/spec.js';
+export type PlaygroundConfig = {
+    core: CoreSpec['config'];
+    [pluginName: string]: {};
+};
+export type PlaygroundMountArgs = {
+    playgroundConfig: PlaygroundConfig;
+    pluginConfigs: CosmosPluginConfig[];
+};

package/dist/playgroundConfig.js

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

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

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

package/dist/plugins/BuildNotifications/index.js

@@ -0,0 +1,35 @@
+import { createPlugin } from 'react-plugin';
+const { on, register } = createPlugin({
+    name: 'buildNotifications',
+});
+on('messageHandler', {
+    serverMessage: onServerMessage,
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function onServerMessage(context, msg) {
+    const { getMethodsOf } = context;
+    const notifications = getMethodsOf('notifications');
+    const serverMessage = msg;
+    switch (serverMessage.type) {
+        case 'buildStart':
+            return notifications.pushStickyNotification({
+                id: 'build',
+                type: 'loading',
+                title: 'Rebuilding...',
+                info: 'Your code is updating.',
+            });
+        case 'buildError':
+            return notifications.pushStickyNotification({
+                id: 'build',
+                type: 'error',
+                title: 'Build failed',
+                info: 'Check your terminal for more information.',
+            });
+        case 'buildDone':
+            return notifications.removeStickyNotification('build');
+        default:
+        // Nada
+    }
+}

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

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

package/dist/plugins/BuildNotifications/spec.js

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

package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.d.ts

@@ -0,0 +1,10 @@
+import { FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
+import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+type Props = {
+    fsClassState: FixtureStateClassState;
+    fixtureExpansion: FixtureExpansion;
+    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onElementExpansionChange: OnElementExpansionChange;
+};
+export declare function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): JSX.Element;
+export {};

package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.js

@@ -0,0 +1,36 @@
+import { isEqual } from 'lodash-es';
+import React, { useCallback } from 'react';
+import { updateFixtureStateClassState, } from 'react-cosmos-core';
+import { IconButton32 } from '../../../components/buttons/index.js';
+import { RotateCcwIcon } from '../../../components/icons/index.js';
+import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../../components/SidePanel.js';
+import { ExpandCollapseValues } from '../../../components/ValueInputTree/ExpandCollapseValues.js';
+import { stringifyElementId, ValueInputTree, } from '../../../components/ValueInputTree/index.js';
+import { createClassStateFsUpdater } from './shared.js';
+export function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
+    const { componentName, elementId, values } = fsClassState;
+    const [initialValues] = React.useState(() => values);
+    const handleValuesReset = React.useCallback(() => onFixtureStateChange(createClassStateFsUpdater(elementId, prevFs => updateFixtureStateClassState({
+        fixtureState: prevFs,
+        elementId,
+        values: initialValues,
+    }))), [elementId, initialValues, onFixtureStateChange]);
+    const handleValueChange = React.useCallback((newValues) => {
+        onFixtureStateChange(createClassStateFsUpdater(elementId, prevFs => updateFixtureStateClassState({
+            fixtureState: prevFs,
+            elementId,
+            values: newValues,
+        })));
+    }, [elementId, onFixtureStateChange]);
+    const strElementId = stringifyElementId(elementId);
+    const expansion = fixtureExpansion[strElementId] || {};
+    const setExpansion = useCallback((newExpansion) => onElementExpansionChange(elementId, newExpansion), [elementId, onElementExpansionChange]);
+    return (React.createElement(SidePanelContainer, null,
+        React.createElement(SidePanelHeader, null,
+            React.createElement(SidePanelTitle, { label: "Class State", componentName: componentName }),
+            React.createElement(SidePanelActions, null,
+                React.createElement(IconButton32, { title: "Reset to initial values", icon: React.createElement(RotateCcwIcon, null), disabled: isEqual(values, initialValues), onClick: handleValuesReset }),
+                React.createElement(ExpandCollapseValues, { values: values, expansion: expansion, setExpansion: setExpansion }))),
+        React.createElement(SidePanelBody, null,
+            React.createElement(ValueInputTree, { id: strElementId, values: values, expansion: expansion, onValueChange: handleValueChange, setExpansion: setExpansion }))));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FixtureState, StateUpdater } from 'react-cosmos-core';
+import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+type Props = {
+    fixtureState: FixtureState;
+    fixtureExpansion: FixtureExpansion;
+    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onElementExpansionChange: OnElementExpansionChange;
+};
+export declare const ClassStatePanel: React.NamedExoticComponent<Props>;
+export {};

package/dist/plugins/ClassStatePanel/ClassStatePanel/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { hasFsValues, sortFsValueGroups, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
+import { ComponentClassState } from './ComponentClassState.js';
+export const ClassStatePanel = React.memo(function ClassStatePanel({ fixtureState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
+    if (!fixtureState.classState) {
+        return null;
+    }
+    const classStateWithValues = fixtureState.classState.filter(hasFsValues);
+    return (React.createElement(React.Fragment, null, sortFsValueGroups(classStateWithValues).map(fsClassState => {
+        const strElementId = stringifyElementId(fsClassState.elementId);
+        return (React.createElement(ComponentClassState, { key: strElementId, fsClassState: fsClassState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
+    })));
+});

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

@@ -0,0 +1,2 @@
+import { FixtureElementId, FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
+export declare function createClassStateFsUpdater(elementId: FixtureElementId, cb: (prevFs: FixtureState) => FixtureStateClassState[]): StateUpdater<FixtureState>;

package/dist/plugins/ClassStatePanel/ClassStatePanel/shared.js

@@ -0,0 +1,16 @@
+import { findFixtureStateClassState, } from 'react-cosmos-core';
+import { stringifyElementId } from '../../../components/ValueInputTree/index.js';
+export function createClassStateFsUpdater(elementId, cb) {
+    return prevFs => {
+        const fsClassState = findFixtureStateClassState(prevFs, elementId);
+        if (!fsClassState) {
+            const elId = stringifyElementId(elementId);
+            console.warn(`Trying to update missing element with ID: ${elId}`);
+            return prevFs;
+        }
+        return {
+            ...prevFs,
+            classState: cb(prevFs),
+        };
+    };
+}

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

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

package/dist/plugins/ClassStatePanel/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { getFixtureExpansion, updateElementExpansion, } from '../../components/ValueInputTree/index.js';
+import { ClassStatePanel } from './ClassStatePanel/index.js';
+import { CLASS_STATE_TREE_EXPANSION_STORAGE_KEY } from './shared.js';
+const { namedPlug, register } = createPlugin({
+    name: 'classStatePanel',
+});
+namedPlug('sidePanelRow', 'classState', ({ pluginContext, slotProps }) => {
+    const { fixtureId, fixtureState, onFixtureStateChange } = slotProps;
+    const { fixtureExpansion, onElementExpansionChange } = useFixtureExpansion(pluginContext, fixtureId);
+    return (React.createElement(ClassStatePanel, { fixtureState: fixtureState, fixtureExpansion: fixtureExpansion, onFixtureStateChange: onFixtureStateChange, onElementExpansionChange: onElementExpansionChange }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+const DEFAULT_TREE_EXPANSION = {};
+function useFixtureExpansion(context, fixtureId) {
+    const { getMethodsOf } = context;
+    const storage = getMethodsOf('storage');
+    const classStateExpansion = storage.getItem(CLASS_STATE_TREE_EXPANSION_STORAGE_KEY) || DEFAULT_TREE_EXPANSION;
+    const fixtureExpansion = getFixtureExpansion(classStateExpansion, fixtureId);
+    const onElementExpansionChange = React.useCallback((elementId, treeExpansion) => {
+        storage.setItem(CLASS_STATE_TREE_EXPANSION_STORAGE_KEY, updateElementExpansion(classStateExpansion, fixtureId, elementId, treeExpansion));
+    }, [storage, classStateExpansion, fixtureId]);
+    return {
+        fixtureExpansion,
+        onElementExpansionChange,
+    };
+}

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

@@ -0,0 +1 @@
+export declare const CLASS_STATE_TREE_EXPANSION_STORAGE_KEY = "classStateTreeExpansion";

package/dist/plugins/ClassStatePanel/shared.js

@@ -0,0 +1 @@
+export const CLASS_STATE_TREE_EXPANSION_STORAGE_KEY = 'classStateTreeExpansion';

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

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

package/dist/plugins/ClassStatePanel/spec.js

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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,34 @@
+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/KeyShortcut.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    keys: string[];
+    label: string;
+};
+export declare function KeyShortcut({ keys, label }: Props): JSX.Element;
+export {};

package/dist/plugins/ContentOverlay/KeyShortcut.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import { KeyBox } from '../../components/KeyBox.js';
+import { screenGrey1, screenGrey5 } from '../../style/colors.js';
+export function KeyShortcut({ keys, label }) {
+    return (React.createElement(Container, null,
+        React.createElement(Keys, null, keys.map(key => (React.createElement(KeyBox, { key: key, value: key, bgColor: screenGrey5, textColor: screenGrey1, size: 26, fontSize: 16 })))),
+        React.createElement(Label, null, label)));
+}
+const Container = styled.div `
+  display: flex;
+  flex-direction: row;
+  height: 26px;
+  margin: 0 0 16px 0;
+  line-height: 26px;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+`;
+const Keys = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+const Label = styled.div `
+  flex: 1.4;
+  text-indent: 10px;
+`;

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

@@ -0,0 +1,5 @@
+type Props = {
+    onShowWelcome: () => unknown;
+};
+export declare function NoFixtureSelected({ onShowWelcome }: Props): JSX.Element;
+export {};

package/dist/plugins/ContentOverlay/NoFixtureSelected.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BlankCanvasIllustration } from '../../components/illustrations/BlankCanvas.js';
+import { screenGrey3 } from '../../style/colors.js';
+import { KeyShortcut } from './KeyShortcut.js';
+import { ContentContainer, IllustrationContainer, SecondaryButton, TextContainer, } from './shared.js';
+export function NoFixtureSelected({ onShowWelcome }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ContentContainer, null,
+            React.createElement(TextContainer, null,
+                React.createElement(KeyShortcut, { keys: ['⌘', 'P'], label: "Search fixtures" }),
+                React.createElement(Subtitle, null, "FIXTURE SELECTED"),
+                React.createElement(KeyShortcut, { keys: ['⌘', '⇧', 'L'], label: "Toggle fixture list" }),
+                React.createElement(KeyShortcut, { keys: ['⌘', '⇧', 'K'], label: "Toggle control panel" }),
+                React.createElement(KeyShortcut, { keys: ['⌘', '⇧', 'E'], label: "Edit fixture" }),
+                React.createElement(KeyShortcut, { keys: ['⌘', '⇧', 'F'], label: "Go full screen" })),
+            React.createElement(IllustrationContainer, null,
+                React.createElement(BlankCanvasIllustration, { title: "blank state" }))),
+        React.createElement(ShowWelcomeButton, { onClick: onShowWelcome }, "show welcome screen")));
+}
+const Subtitle = styled.div `
+  margin: 40px 0 24px 0;
+  color: ${screenGrey3};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 14px;
+  text-align: center;
+  letter-spacing: 0.5px;
+`;
+const ShowWelcomeButton = styled(SecondaryButton) `
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+`;

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

@@ -0,0 +1 @@
+export declare function RendererNotResponding(): JSX.Element;

package/dist/plugins/ContentOverlay/RendererNotResponding.js

@@ -0,0 +1,109 @@
+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://react-cosmos.slack.com/join/shared_invite/zt-g9rsalqq-clCoV7DWttVvzO5FAAmVAw", 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;
+`;

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

@@ -0,0 +1,5 @@
+type Props = {
+    onDismissWelcome: () => unknown;
+};
+export declare function WelcomeCosmos({ onDismissWelcome }: Props): JSX.Element;
+export {};