Add a banner and button to the welcome screen introducing the Stately visual editor

.changeset/twelve-kids-exist.md

@@ -0,0 +1,5 @@
+---
+'xstate-viz-app': minor
+---
+
+Add a banner and welcome screen link introducing the Stately visual editor

README.md

@@ -1,12 +1,13 @@
-# XState Visualizer
+# XState (Legacy) Visualizer
 
-Visualize [XState](https://xstate.js.org) state machines and statecharts in real-time.
+Visualize [XState](https://stately.ai/docs/xstate) state machines and statecharts in real-time.
 
-[🔗 Use the Visualizer](https://stately.ai/viz).
+[🪄 Use the new Stately visual editor](https://state.new?source=viz-readme)
+[🔗 Use the legacy Visualizer](https://stately.ai/viz).
 
 ## Usage
 
-[Visit stately.ai/viz to use the Visualizer](https://stately.ai/viz).
+[Visit stately.ai/viz to use the Visualizer](https://stately.ai/viz?source=viz-readme).
 
 Alternatively, you can install it locally (see installation)
 
@@ -19,8 +20,6 @@ Alternatively, you can install it locally (see installation)
 - View list of events sent to the simulated machine
 - Access quick features via the command palette: <kbd>cmd</kbd>/<kbd>ctrl</kbd> + <kbd>k</kbd>
 - Inspect machines by setting `url: 'https://stately.ai/viz?inspect'` in `@xstate/inspect`
-- Save your machines in the [Stately Registry](https://stately.ai/registry)
-- _And many more upcoming features_
 
 ## Installation
 

src/AppHead.tsx

@@ -46,7 +46,7 @@ export const AppHead = ({ importElk = true, ...props }: AppHeadProps) => {
       <script
         async
         data-domain="stately.ai"
-        src="https://plausible.io/js/plausible.js"
+        src="https://plausible.io/js/script.tagged-events.js"
       />
     </Head>
   );

src/CanvasHeader.tsx

@@ -38,6 +38,7 @@ export const CanvasHeader: React.FC = () => {
         }}
         target="_blank"
         rel="noreferrer"
+        className="plausible-event-name=viz+stately-logo"
       >
         <Logo
           fill="white"

src/CanvasView.tsx

@@ -16,6 +16,7 @@ import {
   MenuList,
   Portal,
   Spinner,
+  Text,
   VStack,
 } from '@chakra-ui/react';
 import { useSelector } from '@xstate/react';
@@ -93,6 +94,28 @@ export const CanvasView: React.FC = () => {
       {!embed?.isEmbedded && (
         <Box data-testid="canvas-header" bg="gray.800" zIndex={1} padding="0">
           <CanvasHeader />
+          <Box
+            bg="blue.600"
+            px="1"
+            py="2"
+            color="white"
+            textAlign="center"
+            fontWeight="600"
+          >
+            <Text>
+              ✨ Our{' '}
+              <Link
+                href="https://stately.ai?source=viz-banner"
+                target="_blank"
+                color="blue.50"
+                textDecoration="underline"
+                className="plausible-event-name=viz+editor-banner"
+              >
+                new Stately visual editor
+              </Link>{' '}
+              is out now! ✨
+            </Text>
+          </Box>
         </Box>
       )}
       <CanvasContainer panModeEnabled={panModeEnabled}>

src/Icons.tsx

@@ -61,6 +61,9 @@ export const MagicIcon = makeIcon(
       </g>
     </g>
   </>,
+  {
+    fill: 'current',
+  },
 );
 
 export const SaveIcon = makeIcon(

src/Overlay.tsx

@@ -1,7 +1,7 @@
-import { Box } from '@chakra-ui/react';
+import { Box, BoxProps } from '@chakra-ui/react';
 import React from 'react';
 
-export const Overlay: React.FC = ({ children }) => {
+export const Overlay: React.FC<BoxProps> = ({ children, ...props }) => {
   return (
     <Box
       display="flex"
@@ -12,7 +12,7 @@ export const Overlay: React.FC = ({ children }) => {
       height="100%"
       width="100%"
       background="blackAlpha.100"
-      zIndex={1}
+      zIndex={props.zIndex ?? 1}
     >
       {children}
     </Box>

src/WelcomeArea.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   ButtonProps,
+  Heading,
   HStack,
   Link,
   Stack,
@@ -12,7 +13,7 @@ import { useMachine, useSelector } from '@xstate/react';
 import React from 'react';
 import { createMachine } from 'xstate';
 import { useAuth } from './authContext';
-import { BoltIcon, LightbulbIcon } from './Icons';
+import { BoltIcon, LightbulbIcon, MagicIcon } from './Icons';
 import { Overlay } from './Overlay';
 import { getSourceActor } from './sourceMachine';
 
@@ -81,7 +82,7 @@ export const WelcomeArea = () => {
   });
 
   return (
-    <Overlay>
+    <Overlay zIndex={0}>
       <Box maxW="lg" p="4">
         {state.matches('seeingExample') && (
           <>
@@ -96,7 +97,7 @@ export const WelcomeArea = () => {
               <Link
                 color="blue.300"
                 fontSize="sm"
-                href="https://xstate.js.org/docs"
+                href="https://stately.ai/docs/xstate"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -118,7 +119,7 @@ export const WelcomeArea = () => {
               <Link
                 color="blue.300"
                 fontSize="sm"
-                href="https://xstate.js.org/docs"
+                href="https://stately.ai/docs/xstate"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -129,45 +130,109 @@ export const WelcomeArea = () => {
         )}
         {state.matches('welcomeArea') && (
           <>
-            <Stack spacing="6">
-              <Stack>
-                <Title>XState Visualizer</Title>
-                <Description>
-                  Welcome to the visualizer! Here, you can build state machine
-                  diagrams using XState.
-                </Description>
-              </Stack>
-              <Stack spacing="3">
-                <Button
-                  {...buttonStyleProps}
-                  onClick={() => send('CLICK_SEE_EXAMPLE')}
-                >
-                  <HStack spacing="4">
-                    <ViewIcon color="gray.200" h="6" w="6" />
-                    <Text color="gray.100">See an example</Text>
-                  </HStack>
-                </Button>
-                <Button
-                  {...buttonStyleProps}
-                  as={Link}
-                  href="http://xstate.js.org/docs"
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  <HStack spacing="4">
-                    <LightbulbIcon color="gray.200" h="6" w="6" />
-                    <Text color="gray.100">Learn how to build machines</Text>
-                  </HStack>
-                </Button>
-                <Button
-                  {...buttonStyleProps}
-                  onClick={() => send('CLICK_START_CODING')}
-                >
-                  <HStack spacing="4">
-                    <BoltIcon color="gray.200" h="6" w="6" />
-                    <Text color="gray.100">Start coding right away</Text>
-                  </HStack>
-                </Button>
+            <Stack spacing="3">
+              <Stack spacing="6">
+                <Title>
+                  <Heading size="lg">Stately Visualizer</Heading>
+                </Title>
+                <Text color="gray.400" size="md">
+                  Build state machine diagrams using XState.
+                </Text>
+                <Stack backgroundColor="gray.700" spacing="5" padding="6">
+                  <Text>
+                    This legacy visualizer is deprecated and is no longer
+                    maintained.
+                  </Text>
+                  <Text>
+                    For the best experience,{' '}
+                    <Link
+                      href="https://stately.ai?source=viz"
+                      target="_blank"
+                      color="blue.300"
+                      className="plausible-event-name=viz+stately-editor-button"
+                    >
+                      use our new Stately editor
+                    </Link>{' '}
+                    to build and visualize state machines with drag-and-drop, AI
+                    assistance, exporting to XState V5, and more.
+                  </Text>
+                  <Text>
+                    Full parity between the new Stately editor and this
+                    visualizer is coming soon.
+                    <Link
+                      href="https://stately.ai/docs/visualizer"
+                      target="_blank"
+                      color="blue.300"
+                      className="plausible-event-name=viz+docs"
+                    >
+                      {' '}
+                      Read our docs for more information on the differences
+                      between the legacy visualizer and new visualizer.
+                    </Link>
+                  </Text>
+                  <Text>
+                    <Button
+                      {...buttonStyleProps}
+                      as={Link}
+                      href="https://stately.ai?source=viz"
+                      rel="noreferrer"
+                      target="_blank"
+                      bg="orange.600"
+                      maxWidth="auto"
+                      className="plausible-event-name=viz+new-visualizer"
+                    >
+                      <HStack spacing="4">
+                        <MagicIcon color="gray.200" h="6" w="6" />
+                        <Text color="gray.100">
+                          Use the new Stately visualizer
+                        </Text>
+                      </HStack>
+                    </Button>
+                  </Text>
+                </Stack>
+                <Stack spacing="3">
+                  <Heading
+                    size="md"
+                    paddingTop="3"
+                    fontWeight="400"
+                    color="gray.400"
+                  >
+                    Start using legacy visualizer
+                  </Heading>
+                  <Button
+                    {...buttonStyleProps}
+                    onClick={() => send('CLICK_SEE_EXAMPLE')}
+                    className="plausible-event-name=viz+legacy-example"
+                  >
+                    <HStack spacing="4">
+                      <ViewIcon color="gray.200" h="6" w="6" />
+                      <Text color="gray.100">See an example</Text>
+                    </HStack>
+                  </Button>
+                  <Button
+                    {...buttonStyleProps}
+                    as={Link}
+                    href="http://stately.ai/docs/xstate"
+                    rel="noreferrer"
+                    target="_blank"
+                    className="plausible-event-name=viz+docs"
+                  >
+                    <HStack spacing="4">
+                      <LightbulbIcon color="gray.200" h="6" w="6" />
+                      <Text color="gray.100">Learn how to build machines</Text>
+                    </HStack>
+                  </Button>
+                  <Button
+                    {...buttonStyleProps}
+                    onClick={() => send('CLICK_START_CODING')}
+                    className="plausible-event-name=viz+start-coding-using-legacy"
+                  >
+                    <HStack spacing="4">
+                      <BoltIcon color="gray.200" h="6" w="6" />
+                      <Text color="gray.100">Start coding right away</Text>
+                    </HStack>
+                  </Button>
+                </Stack>
               </Stack>
             </Stack>
           </>