react-cosmos-ui 6.0.0-alpha.0

package/dist/plugins/ContentOverlay/WelcomeCosmos.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import styled from 'styled-components';
+import { AstronautIllustration } from '../../components/illustrations/Astronaut.js';
+import { screenGrey1, screenGrey3, screenGrey5, screenPrimary1, screenPrimary2, screenPrimary3, } from '../../style/colors.js';
+import { ContentContainer, IllustrationContainer, NoWrap, SecondaryButton, TextContainer, } from './shared.js';
+export function WelcomeCosmos({ onDismissWelcome }) {
+    return (React.createElement(ContentContainer, 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://react-cosmos.slack.com/join/shared_invite/zt-g9rsalqq-clCoV7DWttVvzO5FAAmVAw", rel: "noopener noreferrer", target: "_blank" }, "Slack"),
+                        ". 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/ContentOverlay/cosmos.decorator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default _default;

package/dist/plugins/ContentOverlay/cosmos.decorator.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+import { screenGrey6 } from '../../style/colors.js';
+export default ({ children }) => (React.createElement(Wrapper, null, children));
+const Wrapper = styled.div `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: ${screenGrey6};
+  align-items: center;
+  justify-content: center;
+`;

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

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

package/dist/plugins/ContentOverlay/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { ContentOverlay } from './ContentOverlay.js';
+import { useWelcomeDismiss } from './welcomeDismiss.js';
+const { plug, register } = createPlugin({
+    name: 'contentOverlay',
+});
+plug('contentOverlay', ({ pluginContext }) => {
+    const { getMethodsOf } = pluginContext;
+    const router = getMethodsOf('router');
+    const fixtureSelected = router.getSelectedFixtureId() !== null;
+    const rendererCore = getMethodsOf('rendererCore');
+    const rendererPreview = getMethodsOf('rendererPreview');
+    const { welcomeDismissed, onDismissWelcome, onShowWelcome } = useWelcomeDismiss(pluginContext);
+    return (React.createElement(ContentOverlay, { fixtureSelected: fixtureSelected, validFixtureSelected: fixtureSelected && rendererCore.isValidFixtureSelected(), rendererConnected: rendererCore.isRendererConnected(), rendererPreviewUrlStatus: rendererPreview.getUrlStatus(), rendererPreviewRuntimeStatus: rendererPreview.getRuntimeStatus(), welcomeDismissed: welcomeDismissed, onDismissWelcome: onDismissWelcome, onShowWelcome: onShowWelcome }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

@@ -0,0 +1,9 @@
+import { PluginContext } from 'react-plugin';
+import { ContentOverlaySpec } from './spec.js';
+export type ContentOverlayContext = PluginContext<ContentOverlaySpec>;
+export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IllustrationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SecondaryButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const NoWrap: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/plugins/ContentOverlay/shared.js

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import { screenGrey1, screenGrey2, screenGrey5, screenGrey6, screenPrimary2, screenPrimary3, } from '../../style/colors.js';
+export const OverlayContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  align-items: flex-start;
+  background: ${screenGrey6};
+  overflow: auto;
+`;
+export const ContentContainer = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  min-width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+`;
+export const TextContainer = styled.div `
+  flex-shrink: 0;
+  width: 512px;
+  padding: 32px;
+  font-size: 16px;
+  line-height: 1.5em;
+  color: ${screenGrey1};
+
+  strong {
+    font-weight: 500;
+  }
+`;
+const illustrationSize = 320;
+export const IllustrationContainer = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  width: ${illustrationSize}px;
+  height: ${illustrationSize}px;
+  padding: 0 16px;
+`;
+const buttonHeight = 36;
+export const SecondaryButton = styled.button `
+  display: inline-block;
+  height: ${buttonHeight}px;
+  margin: 0 0 0 16px;
+  padding: 0 16px;
+  border: 0;
+  background: ${screenGrey5};
+  color: ${screenGrey2};
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: ${buttonHeight}px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  outline: none;
+
+  :focus {
+    color: ${screenPrimary2};
+    box-shadow: 0 0 0px 2px ${screenPrimary3};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;
+export const NoWrap = styled.span `
+  white-space: nowrap;
+`;

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

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

package/dist/plugins/ContentOverlay/spec.js

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

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

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

package/dist/plugins/ContentOverlay/welcomeDismiss.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export const WELCOME_DISMISS_STORAGE_KEY = 'welcomeDismissedAt';
+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]);
+    return {
+        welcomeDismissed,
+        onDismissWelcome,
+        onShowWelcome,
+    };
+}

package/dist/plugins/ControlPanel/ControlPanel.d.ts

@@ -0,0 +1,8 @@
+import { FixtureState, StateUpdater } from 'react-cosmos-core';
+type Props = {
+    fixtureState: FixtureState;
+    controlActionOrder: string[];
+    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+};
+export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): JSX.Element | null;
+export {};

package/dist/plugins/ControlPanel/ControlPanel.js

@@ -0,0 +1,37 @@
+import { isEqual } from 'lodash-es';
+import React from 'react';
+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 { ControlActionSlot } from '../../slots/ControlActionSlot.js';
+import { ControlSlot } from '../../slots/ControlSlot.js';
+export function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }) {
+    const handleControlsReset = React.useCallback(() => onFixtureStateChange(resetControls), [onFixtureStateChange]);
+    const controls = fixtureState.controls || {};
+    if (Object.keys(controls).length === 0)
+        return null;
+    return (React.createElement(SidePanelContainer, null,
+        React.createElement(SidePanelHeader, null,
+            React.createElement(SidePanelTitle, { label: "Controls" }),
+            React.createElement(SidePanelActions, null,
+                React.createElement(IconButton32, { title: "Reset to default values", icon: React.createElement(RotateCcwIcon, null), disabled: areControlsUnchanged(controls), onClick: handleControlsReset }),
+                React.createElement(ControlActionSlot, { slotProps: { controls }, plugOrder: controlActionOrder }))),
+        React.createElement(SidePanelBody, null, Object.keys(controls).map(controlName => (React.createElement(ControlSlot, { key: controlName, slotProps: {
+                controlName,
+                control: controls[controlName],
+                onFixtureStateChange,
+            } }))))));
+}
+function areControlsUnchanged(controls) {
+    return Object.keys(controls).every(controlName => isEqual(controls[controlName].currentValue, controls[controlName].defaultValue));
+}
+function resetControls(fixtureState) {
+    const controls = fixtureState.controls ? { ...fixtureState.controls } : {};
+    Object.keys(controls).forEach(controlName => {
+        controls[controlName] = resetControl(controls[controlName]);
+    });
+    return { ...fixtureState, controls };
+}
+function resetControl(control) {
+    return { ...control, currentValue: control.defaultValue };
+}

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

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

package/dist/plugins/ControlPanel/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { ControlPanel } from './ControlPanel.js';
+const { namedPlug, register } = createPlugin({
+    name: 'controlPanel',
+    defaultConfig: {
+        controlActionOrder: [],
+    },
+});
+namedPlug('sidePanelRow', 'values', ({ pluginContext, slotProps }) => {
+    const { controlActionOrder } = pluginContext.getConfig();
+    const { fixtureState, onFixtureStateChange } = slotProps;
+    return (React.createElement(ControlPanel, { fixtureState: fixtureState, controlActionOrder: controlActionOrder, onFixtureStateChange: onFixtureStateChange }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

@@ -0,0 +1,6 @@
+export type ControlPanelSpec = {
+    name: 'controlPanel';
+    config: {
+        controlActionOrder: string[];
+    };
+};

package/dist/plugins/ControlPanel/spec.js

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

package/dist/plugins/ControlSelect/SelectValueInput.d.ts

@@ -0,0 +1,8 @@
+import { FixtureStateSelectControl } from 'react-cosmos-core';
+type Props = {
+    name: string;
+    control: FixtureStateSelectControl;
+    onChange: (name: string, select: FixtureStateSelectControl) => unknown;
+};
+export declare function SelectValueInput({ name, control, onChange }: Props): JSX.Element;
+export {};

package/dist/plugins/ControlSelect/SelectValueInput.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Select } from '../../components/inputs/Select.js';
+import { Label, ValueDataContainer, ValueInputContainer, } from '../../components/ValueInputTree/ValueInput/shared.js';
+import { lightBlue } from '../../style/colors.js';
+export function SelectValueInput({ name, control, onChange }) {
+    const { options, currentValue } = control;
+    const id = `select-${name}`;
+    return (React.createElement(ValueInputContainer, { key: name },
+        React.createElement(Label, { title: name, htmlFor: id }, name),
+        React.createElement(ValueDataContainer, null,
+            React.createElement(Select, { id: id, options: options.map(option => ({ value: option, label: option })), value: currentValue, color: lightBlue, height: 24, padding: 5, onChange: newValue => onChange(name, {
+                    ...control,
+                    currentValue: newValue.value,
+                }) }))));
+}

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

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

package/dist/plugins/ControlSelect/index.js

@@ -0,0 +1,22 @@
+import React, { useCallback } from 'react';
+import { createPlugin } from 'react-plugin';
+import { SelectValueInput } from './SelectValueInput.js';
+const { plug, register } = createPlugin({
+    name: 'controlSelect',
+});
+plug('control-select', ({ slotProps }) => {
+    const { controlName, control, onFixtureStateChange } = slotProps;
+    const handleChange = useCallback((selectName, updatedControl) => {
+        onFixtureStateChange(fixtureState => ({
+            ...fixtureState,
+            controls: {
+                ...fixtureState.controls,
+                [selectName]: updatedControl,
+            },
+        }));
+    }, [onFixtureStateChange]);
+    return (React.createElement(SelectValueInput, { key: controlName, name: controlName, control: control, onChange: handleChange }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

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

package/dist/plugins/ControlSelect/spec.js

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

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

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

package/dist/plugins/Core/index.js

@@ -0,0 +1,68 @@
+import { omit } from 'lodash-es';
+import { registerPlaygroundShortcuts } from 'react-cosmos-core';
+import { createPlugin } from 'react-plugin';
+const { onLoad, register } = createPlugin({
+    name: 'core',
+    initialState: {
+        commands: {},
+    },
+    defaultConfig: {
+        projectId: 'defaultProjectId',
+        fixturesDir: '__fixtures__',
+        fixtureFileSuffix: 'fixture',
+        devServerOn: false,
+        webRendererUrl: null,
+    },
+    methods: {
+        registerCommands,
+        runCommand,
+        getProjectId,
+        getFixtureFileVars,
+        isDevServerOn,
+        getWebRendererUrl,
+    },
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+onLoad(pluginContext => registerPlaygroundShortcuts(command => runCommand(pluginContext, command)));
+onLoad(pluginContext => {
+    const { projectId } = pluginContext.getConfig();
+    document.title = projectId;
+});
+function registerCommands(context, commands) {
+    context.setState(prevState => {
+        const existingCommandNames = Object.keys(prevState.commands);
+        Object.keys(commands).forEach(commandName => {
+            if (existingCommandNames.indexOf(commandName) !== -1)
+                throw new Error(`Command "${commandName} already registered`);
+        });
+        return {
+            ...prevState,
+            commands: { ...prevState.commands, ...commands },
+        };
+    });
+    return () => context.setState(prevState => ({
+        ...prevState,
+        commands: omit(prevState.commands, ...Object.keys(commands)),
+    }));
+}
+function runCommand(context, name) {
+    const { commands } = context.getState();
+    if (!commands[name])
+        return console.warn(`Command "${name}" is not available`);
+    commands[name]();
+}
+function getProjectId({ getConfig }) {
+    return getConfig().projectId;
+}
+function getFixtureFileVars({ getConfig }) {
+    const { fixturesDir, fixtureFileSuffix } = getConfig();
+    return { fixturesDir, fixtureFileSuffix };
+}
+function isDevServerOn({ getConfig }) {
+    return getConfig().devServerOn;
+}
+function getWebRendererUrl({ getConfig }) {
+    return getConfig().webRendererUrl;
+}

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

@@ -0,0 +1,25 @@
+export type Commands = Record<string, () => unknown>;
+export type CoreSpec = {
+    name: 'core';
+    config: {
+        projectId: string;
+        fixturesDir: string;
+        fixtureFileSuffix: string;
+        devServerOn: boolean;
+        webRendererUrl: null | string;
+    };
+    state: {
+        commands: Commands;
+    };
+    methods: {
+        registerCommands(commands: Commands): () => void;
+        runCommand(name: string): unknown;
+        getProjectId(): string;
+        getFixtureFileVars(): {
+            fixturesDir: string;
+            fixtureFileSuffix: string;
+        };
+        isDevServerOn(): boolean;
+        getWebRendererUrl(): null | string;
+    };
+};

package/dist/plugins/Core/spec.js

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

package/dist/plugins/FixtureBookmark/BookmarkFixtureButton.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    selected: boolean;
+    onClick: () => unknown;
+};
+export declare function BookmarkFixtureButton({ selected, onClick }: Props): JSX.Element;
+export {};

package/dist/plugins/FixtureBookmark/BookmarkFixtureButton.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IconButton32 } from '../../components/buttons/index.js';
+import { StarIcon } from '../../components/icons/index.js';
+export function BookmarkFixtureButton({ selected, onClick }) {
+    return (React.createElement(IconButton32, { icon: React.createElement(StarIcon, null), selected: selected, title: "Bookmark fixture", onClick: onClick }));
+}

package/dist/plugins/FixtureBookmark/FixtureBookmarks.d.ts

@@ -0,0 +1,10 @@
+import { FixtureId, FlatFixtureTree } from 'react-cosmos-core';
+type Props = {
+    fixtureItems: FlatFixtureTree;
+    bookmarks: FixtureId[];
+    selectedFixtureId: FixtureId | null;
+    onFixtureSelect: (fixtureId: FixtureId) => void;
+    onBookmarkDelete: (fixtureId: FixtureId) => void;
+};
+export declare function FixtureBookmarks({ fixtureItems, bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }: Props): JSX.Element | null;
+export {};