react-cosmos-ui 6.0.0-alpha.9 → 6.0.0-beta.2

package/dist/plugins/ContentOverlay/WelcomeCosmos.js

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

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

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

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

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

package/dist/plugins/ContentOverlay/index.js

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

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

package/dist/plugins/ContentOverlay/spec.js

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

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

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

@@ -1,2 +0,0 @@
-import { RendererCoreContext } from './shared/index.js';
-export declare function isValidFixtureSelected(context: RendererCoreContext): boolean;

package/dist/plugins/RendererCore/isValidFixtureSelected.js

@@ -1,16 +0,0 @@
-import { getSelectedFixtureId } from './shared/router.js';
-export function isValidFixtureSelected(context) {
-    const fixtureId = getSelectedFixtureId(context);
-    if (fixtureId === null) {
-        return false;
-    }
-    const { fixtures } = context.getState();
-    if (!fixtures.hasOwnProperty(fixtureId.path)) {
-        return false;
-    }
-    const fixtureItem = fixtures[fixtureId.path];
-    return fixtureItem.type === 'multi'
-        ? fixtureId.name !== undefined &&
-            fixtureItem.fixtureNames.indexOf(fixtureId.name) !== -1
-        : fixtureId.name === undefined;
-}

package/dist/plugins/RendererCore/onRouterFixtureChange.d.ts

@@ -1,3 +0,0 @@
-import { FixtureId } from 'react-cosmos-core';
-import { RendererCoreContext } from './shared/index.js';
-export declare function onRouterFixtureChange(context: RendererCoreContext, fixtureId: null | FixtureId): void;

package/dist/plugins/RendererCore/onRouterFixtureChange.js

@@ -1,18 +0,0 @@
-import { postSelectFixtureRequest, postUnselectFixtureRequest, } from './shared/postRequest.js';
-export function onRouterFixtureChange(context, fixtureId) {
-    if (fixtureId === null) {
-        return context.setState(emptyFixtureState, () => {
-            getConnectedRendererIds(context).forEach(rendererId => postUnselectFixtureRequest(context, rendererId));
-        });
-    }
-    // Clear fixture state between fixtures
-    context.setState(emptyFixtureState, () => {
-        getConnectedRendererIds(context).forEach(rendererId => postSelectFixtureRequest(context, rendererId, fixtureId, {}));
-    });
-}
-function getConnectedRendererIds(context) {
-    return context.getState().connectedRendererIds;
-}
-function emptyFixtureState(prevState) {
-    return { ...prevState, fixtureState: {} };
-}

package/dist/plugins/RendererPreview/checkRendererStatus.d.ts

@@ -1,2 +0,0 @@
-import { RendererPreviewContext } from './shared.js';
-export declare function checkRendererStatus(context: RendererPreviewContext, rendererUrl: string): (() => void) | undefined;

package/dist/plugins/RendererPreview/checkRendererStatus.js

@@ -1,31 +0,0 @@
-export function checkRendererStatus(context, rendererUrl) {
-    // We can't do fetch requests when Cosmos exports are opened without a
-    // web server (ie. via file:/// protocol) so we're left to _assume_ the
-    // renderer iframe loads alright.
-    if (location.protocol === 'file:') {
-        return;
-    }
-    // The plugin might unmount before the fetch call returns a status, in which
-    // case we no longer want to update the (unmounted) plugin state
-    let unmounted = false;
-    fetch(rendererUrl, { credentials: 'same-origin' })
-        .then(({ status }) => {
-        if (!unmounted) {
-            context.setState(state => ({
-                ...state,
-                urlStatus: status === 200 ? 'ok' : 'error',
-            }));
-        }
-    })
-        .catch(err => {
-        if (!unmounted) {
-            context.setState(state => ({
-                ...state,
-                urlStatus: 'error',
-            }));
-        }
-    });
-    return () => {
-        unmounted = true;
-    };
-}