feat(docs): open in stackblitz (#1593)

* chore(docs): open in stackblitz * chore: update code * chore: update code * refactor: logic and expose demo api * docs: fix * fix: docs --------- Co-authored-by: Segun Adebayo <[email protected]>
chakra-ui · Sep 10, 2024 · 203f21c · 203f21c
1 parent 4465743
commit 203f21c
Show file tree

Hide file tree

Showing 16 changed files with 412 additions and 31 deletions.
diff --git a/examples/next-ts/next-env.d.ts b/examples/next-ts/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/components/machines/progress-circular.tsx b/website/components/machines/progress-circular.tsx
@@ -2,7 +2,7 @@ import * as progress from "@zag-js/progress"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function CircularProgress(props: any) {
+export function ProgressCircular(props: any) {
   const [state, send] = useMachine(progress.machine({ id: useId() }), {
     context: props.controls,
   })

diff --git a/website/components/machines/progress-linear.tsx b/website/components/machines/progress-linear.tsx
@@ -2,7 +2,7 @@ import * as progress from "@zag-js/progress"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function LinearProgress(props: any) {
+export function ProgressLinear(props: any) {
   const [state, send] = useMachine(progress.machine({ id: useId() }), {
     context: props.controls,
   })

diff --git a/website/components/machines/qr-code.tsx b/website/components/machines/qr-code.tsx
@@ -3,7 +3,7 @@ import * as qrCode from "@zag-js/qr-code"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function QRCode(props: any) {
+export function QrCode(props: any) {
   const [state, send] = useMachine(
     qrCode.machine({
       id: useId(),

diff --git a/website/components/mdx-components.tsx b/website/components/mdx-components.tsx
@@ -1,7 +1,6 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { allComponents, allSnippets } from "@/contentlayer"
 import { Icon } from "@chakra-ui/icon"
-import { Box, HStack, Wrap } from "@chakra-ui/layout"
+import { Box, HStack, StackProps, Wrap } from "@chakra-ui/layout"
 import { chakra } from "@chakra-ui/system"
 import { allComponents as Anatomies } from "@zag-js/anatomy-icons"
 import { normalizeProps, useMachine } from "@zag-js/react"
@@ -34,12 +33,17 @@ function SnippetItem({ body, id }: { body: MDX; id: string }) {
 }
 
 type ResourceLinkProps = {
-  href: string | undefined
+  href?: string | undefined
   icon: FC
   children: any
 }
 
-export function ResourceLink({ href, icon, children }: ResourceLinkProps) {
+export function ResourceLink({
+  href,
+  icon,
+  children,
+  ...rest
+}: ResourceLinkProps & StackProps) {
   return (
     <HStack
       as="a"
@@ -50,6 +54,8 @@ export function ResourceLink({ href, icon, children }: ResourceLinkProps) {
       py="1"
       fontSize="sm"
       spacing="1"
+      cursor="pointer"
+      {...rest}
     >
       <Icon as={icon} color="green.500" fontSize="lg" />
       <span>{children}</span>
@@ -71,6 +77,7 @@ const components: Record<string, FC<any>> = {
   },
   Resources(props) {
     const comp = allComponents.find((c) => c.package === props.pkg)
+
     if (!comp) return null
     return (
       <Wrap mt="6" spacingX="4">

diff --git a/website/components/mutli-framework.tsx b/website/components/mutli-framework.tsx
@@ -93,6 +93,7 @@ export function MultiframeworkTabs() {
           }}
         >
           <Playground
+            name="number-input"
             component={NumberInput}
             hideControls
             defaultContext={{ value: 0 }}

diff --git a/website/components/playground.tsx b/website/components/playground.tsx
@@ -1,6 +1,8 @@
-import { Box, Flex, Stack } from "@chakra-ui/layout"
+import { Box, Flex, HStack, Stack } from "@chakra-ui/layout"
 import { chakra } from "@chakra-ui/system"
+import { openInStackblitz } from "lib/open-in-stackblitz"
 import { useState } from "react"
+import { SiStackblitz } from "react-icons/si"
 
 const Header = (props: any) => (
   <Flex
@@ -16,6 +18,7 @@ const Header = (props: any) => (
 )
 
 type PlaygroundProps = {
+  name: string
   component: (props: any) => JSX.Element
   defaultContext?: Record<string, any>
   defaultProps?: Record<
@@ -29,8 +32,41 @@ type PlaygroundProps = {
   debug?: boolean
 }
 
+const isObject = (value: any): value is Record<string, any> =>
+  typeof value === "object" && value !== null && !Array.isArray(value)
+
+const OpenInStackblitz = (props: { name: string; defaultProps: any }) => {
+  const { name } = props
+  const defaultProps = Object.fromEntries(
+    Object.entries(props.defaultProps).map(([key, value]) => [
+      key,
+      isObject(value) ? value.default : value,
+    ]),
+  )
+
+  return (
+    <HStack
+      spacing="1"
+      as="button"
+      bg="#1574ef"
+      color="white"
+      fontSize="sm"
+      px="2"
+      py="1"
+      shadow="rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset"
+      onClick={() => {
+        openInStackblitz(name, defaultProps)
+      }}
+    >
+      <SiStackblitz />
+      <p>Stackblitz</p>
+    </HStack>
+  )
+}
+
 export function Playground(props: PlaygroundProps) {
   const {
+    name: componentName,
     component: Comp,
     defaultProps = {},
     debug,
@@ -54,11 +90,16 @@ export function Playground(props: PlaygroundProps) {
       id="playground"
       direction={{ base: "column", md: "row" }}
       borderWidth="1px"
+      pos="relative"
       minHeight="24em"
       my="16"
       bg="bg-code-block"
       borderColor="border-subtle"
     >
+      <Box pos="absolute" bottom="2" right="2">
+        <OpenInStackblitz name={componentName} defaultProps={defaultProps} />
+      </Box>
+
       <Flex
         align="flex-start"
         justify="center"
@@ -83,7 +124,7 @@ export function Playground(props: PlaygroundProps) {
         hidden={isEmpty}
       >
         <Header>Properties</Header>
-        <Stack direction="column" spacing="4" px="5" py="4">
+        <Stack pos="relative" direction="column" spacing="4" px="5" py="4">
           {Object.keys(state).map((key) => {
             const value = state[key]
             const type = defaultProps[key]