feat: Initial sanity setup

sites/sanity/plugins/sanity-plugin-tutorial/GetStartedTutorial.js

@@ -0,0 +1,105 @@
+import React, {useState} from 'react'
+import {
+  Card,
+  Container,
+  Button,
+  Flex,
+  Label,
+  Heading,
+  Text,
+  Stack,
+  useElementRect,
+  useTheme,
+} from '@sanity/ui'
+import {CloseIcon} from '@sanity/icons'
+import styled, {css} from 'styled-components'
+
+const BlueColor = css`
+  color: ${({theme}) => theme.sanity.color.muted.primary.enabled.fg};
+`
+
+const LabelContainer = styled(Label)`
+  ${BlueColor}
+`
+
+const TextContainer = styled(Text)`
+  ${BlueColor}
+`
+
+export const GetStartedTutorial = () => {
+  const [hideTutorial, setShowTutorial] = useState(
+    window.localStorage.getItem('getstarted_closedTutorial') !== null
+  )
+
+  const {sanity} = useTheme()
+  const [rootElement, setRootElement] = useState()
+  const rect = useElementRect(rootElement)
+  const isSmallScreen = rect?.width < sanity.media[1]
+  const isProdEnv = process.env.NODE_ENV !== 'development'
+
+  const onClose = () => {
+    window.localStorage.setItem('getstarted_closedTutorial', 'true')
+    setShowTutorial(true)
+  }
+
+  if (hideTutorial || isProdEnv) {
+    return null
+  }
+
+  return (
+    <div ref={setRootElement}>
+      <Card tone="primary" padding={isSmallScreen ? 3 : 5} paddingBottom={isSmallScreen ? 4 : 6}>
+        <Flex justify={isSmallScreen ? 'space-between' : 'flex-end'} align="center">
+          {isSmallScreen && (
+            <LabelContainer forwardedAs="p">Your Sanity Studio is all set up!</LabelContainer>
+          )}
+
+          <Button
+            aria-label="Close dialog"
+            icon={CloseIcon}
+            mode="bleed"
+            onClick={onClose}
+            padding={isSmallScreen ? undefined : 3}
+          />
+        </Flex>
+        <Stack space={5}>
+          {!isSmallScreen && (
+            <>
+              <LabelContainer forwardedAs="p" align="center">
+                Get started with sanity
+              </LabelContainer>
+
+              <Heading as="h1" size={4} align="center">
+                Your Sanity Studio is all set up!
+              </Heading>
+            </>
+          )}
+
+          <Container width={1}>
+            <TextContainer
+              forwardedAs="p"
+              size={isSmallScreen ? 1 : undefined}
+              align={isSmallScreen ? 'start' : 'center'}
+            >
+              Next, our docs will guide you through building schemas, adding content, and connecting
+              a frontend. You’ll see updates reflected in your Studio below.
+            </TextContainer>
+          </Container>
+
+          <Flex justify={isSmallScreen ? 'start' : 'center'}>
+            <Button
+              as="a"
+              href="https://www.sanity.io/docs/create-a-schema-and-configure-sanity-studio"
+              target="_blank"
+              padding={isSmallScreen ? undefined : 4}
+              tone="primary"
+              text="Build a schema"
+            />
+          </Flex>
+        </Stack>
+      </Card>
+    </div>
+  )
+}
+
+export default GetStartedTutorial