Merge pull request #205 from chromaui/no-dev-server

Show screen when there's no dev server

src/Panel.tsx

@@ -21,6 +21,7 @@ import { GitNotFound } from "./screens/Errors/GitNotFound";
 import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkingProjectFailed } from "./screens/LinkProject/LinkingProjectFailed";
 import { LinkProject } from "./screens/LinkProject/LinkProject";
+import { NoDevServer } from "./screens/NoDevServer/NoDevServer";
 import { UninstallProvider } from "./screens/Uninstalled/UninstallContext";
 import { Uninstalled } from "./screens/Uninstalled/Uninstalled";
 import { ControlsProvider } from "./screens/VisualTests/ControlsContext";
@@ -89,6 +90,10 @@ export const Panel = ({ active, api }: PanelProps) => {
     </Provider>
   );
 
+  if (global.CONFIG_TYPE !== "DEVELOPMENT") {
+    return withProviders(<NoDevServer />);
+  }
+
   if (addonUninstalled) {
     return withProviders(<Uninstalled />);
   }

src/SidebarTop.tsx

@@ -161,6 +161,10 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
   if (gitInfoError) warning = "Visual tests locked due to Git synchronization problem.";
   if (hasConfigProblem) warning = "Visual tests locked due to configuration problem.";
 
+  if (global.CONFIG_TYPE !== "DEVELOPMENT") {
+    return null;
+  }
+
   return (
     <SidebarTopButton
       isDisabled={!!warning}

src/screens/NoDevServer/NoDevServer.stories.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { NoDevServer } from "./NoDevServer";
+
+const meta = {
+  component: NoDevServer,
+} satisfies Meta<typeof NoDevServer>;
+
+export const Default = {} satisfies StoryObj<typeof meta>;
+
+export default meta;

src/screens/NoDevServer/NoDevServer.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { Code } from "../../components/Code";
+import { Container } from "../../components/Container";
+import { Heading } from "../../components/Heading";
+import { VisualTestsIcon } from "../../components/icons/VisualTestsIcon";
+import { Screen } from "../../components/Screen";
+import { Stack } from "../../components/Stack";
+import { Text } from "../../components/Text";
+
+export const NoDevServer = () => {
+  return (
+    <Screen footer={null}>
+      <Container>
+        <Stack>
+          <div>
+            <VisualTestsIcon />
+            <Heading>Visual tests</Heading>
+            <Text>
+              Visual tests only runs locally. To test this Storybook, clone it to your machine and
+              run <Code>npx storybook dev</Code>.
+            </Text>
+          </div>
+        </Stack>
+      </Container>
+    </Screen>
+  );
+};

src/types.ts

@@ -3,6 +3,11 @@ import type { Configuration, getConfiguration, GitInfo, TaskName } from "chromat
 
 import { SelectedBuildFieldsFragment } from "./gql/graphql";
 
+declare global {
+  // eslint-disable-next-line no-var, vars-on-top
+  var CONFIG_TYPE: string;
+}
+
 export type AnnouncedBuild = Extract<SelectedBuildFieldsFragment, { __typename: "AnnouncedBuild" }>;
 export type PublishedBuild = Extract<SelectedBuildFieldsFragment, { __typename: "PublishedBuild" }>;
 export type StartedBuild = Extract<SelectedBuildFieldsFragment, { __typename: "StartedBuild" }>;

types.d.ts

@@ -1,4 +1,4 @@
 declare module "*.png" {
   const content: any;
   export default content;
-}
+}