feat: add resizable examples

apps/website/src/components/layout/header.tsx

@@ -13,6 +13,28 @@ import {
 } from '@saas-ui/react'
 import { ButtonLink } from '../link'
 
+const GlobalBanner = () => {
+  return (
+    <Banner
+      variant="solid"
+      colorScheme="primary"
+      display="flex"
+      justifyContent="center"
+    >
+      <BannerContent alignItems="center" justifyContent="center">
+        <BannerTitle>Black Friday Sale 🤩</BannerTitle>
+        <BannerDescription>
+          Use code <strong>BLACKFRIDAY30</strong> and get{' '}
+          <strong>30% OFF</strong>
+        </BannerDescription>
+        <BannerActions>
+          <ButtonLink href="/pricing">Buy now</ButtonLink>
+        </BannerActions>
+      </BannerContent>
+    </Banner>
+  )
+}
+
 export interface HeaderProps extends Omit<BoxProps, 'children'> {}
 
 const Header = (props: HeaderProps) => {
@@ -42,23 +64,6 @@ const Header = (props: HeaderProps) => {
       }}
       {...props}
     >
-      <Banner
-        variant="solid"
-        colorScheme="primary"
-        display="flex"
-        justifyContent="center"
-      >
-        <BannerContent alignItems="center" justifyContent="center">
-          <BannerTitle>Black Friday Sale 🤩</BannerTitle>
-          <BannerDescription>
-            Use code <strong>BLACKFRIDAY30</strong> and get{' '}
-            <strong>30% OFF</strong>
-          </BannerDescription>
-          <BannerActions>
-            <ButtonLink href="/pricing">Buy now</ButtonLink>
-          </BannerActions>
-        </BannerContent>
-      </Banner>
       <Box
         zIndex="1"
         position="relative"

apps/website/src/docs/components/mdx-components/codeblock/codeblock.tsx

@@ -31,6 +31,7 @@ function CodeBlock(props) {
     overflowY,
     center,
     padding,
+    inline,
   } = props.children.props
 
   const _live = live === 'true' || live === true
@@ -57,6 +58,7 @@ function CodeBlock(props) {
     overflowY,
     center,
     padding,
+    inline,
   }
 
   if (isMounted && language === 'jsx' && _live === true) {

apps/website/src/docs/components/mdx-components/codeblock/frame-provider.tsx

@@ -5,7 +5,7 @@ import weakMemoize from '@emotion/weak-memoize'
 import { FrameContextConsumer, useFrame } from 'react-frame-component'
 import { SaasProvider } from '@saas-ui/react'
 import theme from '../../../../styles/theme'
-import { useColorMode } from '@chakra-ui/system'
+import { GlobalStyle, useColorMode } from '@chakra-ui/system'
 
 let memoizedCreateCacheWithContainer = weakMemoize((container: Node) => {
   let newCache = createCache({ key: 'frame', container })

apps/website/src/docs/components/mdx-components/codeblock/react-live-block.tsx

@@ -12,7 +12,7 @@ import CodeContainer from './code-container'
 import CopyButton from './copy-button'
 import scope from './react-live-scope'
 import { liveEditorStyle, liveErrorStyle } from './styles'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Splitter } from '@ark-ui/react'
 import Frame from 'react-frame-component'
 import { FrameProvider } from './frame-provider'
@@ -114,14 +114,20 @@ function ReactLiveBlock({
   rawCode,
   theme,
   height,
+  inline,
   overflow,
   overflowY,
   center,
-  padding,
+  padding = 4,
   ...rest
 }) {
   const [editorCode, setEditorCode] = useState(rawCode.trim())
   const onChange = (newCode) => setEditorCode(newCode.trim())
+
+  const [frameHeight, setFrameHeight] = useState<string | undefined>()
+
+  const [frameRef, setFrameRef] = useState<HTMLIFrameElement | null>(null)
+
   const liveProviderProps = {
     code: editorCode,
     scope,
@@ -139,12 +145,32 @@ function ReactLiveBlock({
     sx = {
       display: 'flex',
       justifyContent: 'center',
+      alignItems: 'center',
       ...sx,
     }
   }
 
   const [isResizing, setResizing] = useState(false)
 
+  useEffect(() => {
+    if (frameRef && !inline) {
+      setInterval(() => {
+        const height = frameRef.contentWindow?.document.body.scrollHeight ?? 240
+        setFrameHeight(height + 'px')
+      }, 500)
+    }
+  }, [frameRef, inline])
+
+  const frame = inline ? (
+    <LiveCodePreview fontSize="sm" sx={sx} />
+  ) : (
+    <Frame ref={(ref) => setFrameRef(ref)} width="100%" height="100%">
+      <FrameProvider>
+        <LiveCodePreview fontSize="sm" sx={sx} minHeight="$100vh" />
+      </FrameProvider>
+    </Frame>
+  )
+
   return (
     <FeaturesProvider value={features}>
       <LiveProvider {...liveProviderProps}>
@@ -153,7 +179,7 @@ function ReactLiveBlock({
           display="flex"
           alignItems="center"
           defaultSize={[
-            { id: 'a', size: 100 },
+            { id: 'a', size: 100, minSize: 40 },
             { id: 'b', size: 0 },
           ]}
           onSizeChangeStart={() => setResizing(true)}
@@ -162,13 +188,10 @@ function ReactLiveBlock({
           <Splitter.Panel id="a">
             <LiveCodePreviewWrapper
               pointerEvents={isResizing ? 'none' : undefined}
-              height={height}
+              height={height || frameHeight}
+              boxSizing="content-box"
             >
-              <Frame width="100%" height="100%">
-                <FrameProvider>
-                  <LiveCodePreview fontSize="sm" sx={sx} />
-                </FrameProvider>
-              </Frame>
+              {frame}
             </LiveCodePreviewWrapper>
           </Splitter.Panel>
           <Box

apps/website/src/docs/components/mdx-components/codeblock/react-live-scope.tsx

@@ -16,6 +16,7 @@ import * as YupForm from '@saas-ui/forms/yup'
 import * as ZodForm from '@saas-ui/forms/zod'
 import SaasUILogo from '@/components/saas-ui'
 import SaasUIGlyph from '@/components/saas-ui-glyph'
+import * as Assets from '@saas-ui/assets'
 import * as sampleData from '@/data/sample-data'
 import FocusLock from 'react-focus-lock'
 import { yupResolver } from '@hookform/resolvers/yup'
@@ -191,6 +192,7 @@ const ReactLiveScope = {
     '@saas-ui-pro/feature-flags': SaasUIFeatures,
     '@saas-ui-pro/kanban': SaasUIKanban,
     '@saas-ui/date-picker': DatePicker,
+    '@saas-ui/assets': Assets,
     '@chakra-ui/icons': Icons,
     'react-icons/fi': reactIcons,
     '@hookform/resolvers/yup': { yupResolver },

apps/website/src/docs/components/mdx-components/mdx-components.tsx

@@ -84,11 +84,11 @@ const BestPractice = ({ children, title, ...props }) => {
 }
 
 const Do = (props) => {
-  return <BestPractice {...props} status="success" title="Do" />
+  return <BestPractice {...props} status="success" title="Do" fontSize="md" />
 }
 
 const Dont = (props) => {
-  return <BestPractice {...props} status="error" title="Don't" />
+  return <BestPractice {...props} status="error" title="Don't" fontSize="md" />
 }
 
 export const MDXComponents = {

apps/website/src/pages/docs/components/advanced-data/kanban/usage.mdx

@@ -40,7 +40,7 @@ These Kanban primitives can be used to build advanced workflows that allows item
 
 This is a basic example showing a simple Kanban board with 3 columns.
 
-```jsx
+```jsx inline=true
 import { Card, CardBody } from '@chakra-ui/react'
 import {
   Kanban,
@@ -115,7 +115,7 @@ export default function Basic() {
 
 You can control the items by passing the `items` and `onChange` props to the `Kanban` component.
 
-```jsx
+```jsx inline=true
 import { Card, CardBody } from '@chakra-ui/react'
 import {
   Kanban,
@@ -192,7 +192,7 @@ export default function Controlled() {
 
 You can make columns draggable by using the `KanbanColumnDragHandle` component.
 
-```jsx
+```jsx inline=true
 import { Card, CardBody, Spacer } from '@chakra-ui/react'
 import {
   Kanban,
@@ -303,7 +303,7 @@ export default function DraggableColumns() {
 
 You can toggle column visibility by using useState.
 
-```jsx
+```jsx inline=true
 import { Button, Card, CardBody } from '@chakra-ui/react'
 import {
   Kanban,
@@ -417,7 +417,7 @@ export default function ToggleColumn() {
 
 You can remove items by dragging them into the `KanbanTrash` component.
 
-```jsx
+```jsx inline=true
 import { Button, Card, CardBody } from '@chakra-ui/react'
 import {
   Kanban,
@@ -502,7 +502,7 @@ The `Kanban` component provides several event listeners that can be used to list
 - `onCardDragEnd`: Called when a card drag ends.
 - `onColumnDragEnd`: Called when a column drag ends.
 
-```jsx
+```jsx inline=true
 import { Button, Card, CardBody } from '@chakra-ui/react'
 import {
   Kanban,

apps/website/src/pages/docs/components/authentication/auth/usage.mdx

@@ -48,7 +48,7 @@ If you need more flexiblity it's possible to use these components directly.
 
 The default authentication strategy is `magiclink`.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { Auth } from '@saas-ui/auth'
 
@@ -70,7 +70,7 @@ export default function AuthPage() {
 
 Using the `type` prop you can switch to password login.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { Auth } from '@saas-ui/auth'
 
@@ -92,7 +92,7 @@ export default function AuthPage() {
 
 Using the `providers` prop you can add social login buttons.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { Auth } from '@saas-ui/auth'
 
@@ -122,7 +122,7 @@ export default function AuthPage() {
 Using the `view` prop you can switch different supported view. The default view is `login`.
 Supported views: `login`, `signup`, `forgotPassword`, `updatePassword`, `otp`.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { Auth } from '@saas-ui/auth'
 
@@ -150,7 +150,7 @@ export default function AuthPage() {
 
 ### One time password
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { Auth } from '@saas-ui/auth'
 
@@ -172,7 +172,7 @@ export default function AuthPage() {
 
 Use the `redirectTo` prop to redirect the user after login.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { useSnackbar } from '@saas-ui/react'
 import { Auth } from '@saas-ui/auth'
@@ -212,7 +212,7 @@ export default function AuthPage() {
 The `Auth` component accepts an `onError` prop that can be used to handle errors.
 You can use the `useSnackbar` hook to display a message.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { useSnackbar } from '@saas-ui/react'
 import { Auth } from '@saas-ui/auth'
@@ -253,7 +253,7 @@ export default function AuthPage() {
 
 ### Custom links
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { useSnackbar } from '@saas-ui/react'
 import { Auth } from '@saas-ui/auth'
@@ -293,7 +293,7 @@ export default function AuthPage() {
 
 The authentication forms can be used directly, for example in a custom log in page.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { useSnackbar } from '@saas-ui/react'
 import { PasswordForm, useAuth } from '@saas-ui/auth'
@@ -321,7 +321,7 @@ export default function LoginPage() {
 
 You can add extra fields to the sign up form by using the `PasswordForm` component directly.
 
-```jsx center=true
+```jsx center=true height=550px
 import { Card, CardHeader, CardBody } from '@chakra-ui/react'
 import { useSnackbar } from '@saas-ui/react'
 import { PasswordForm, useAuth } from '@saas-ui/auth'
@@ -355,7 +355,7 @@ export default function LoginPage() {
 
 The authentication forms accept a React Hook Form `resolver` prop that can be used to validate the form data.
 
-```jsx center=true
+```jsx center=true height=550px
 import * as yup from 'yup'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { PasswordForm, useAuth } from '@saas-ui/auth'

apps/website/src/pages/docs/components/data-display/command/usage.mdx

@@ -18,7 +18,7 @@ The `Command` component wraps individual keys in a `<Kbd />` component.
 import { Command } from '@saas-ui/react'
 ```
 
-```jsx
+```jsx center=true
 <Command>shift H</Command>
 ```
 
@@ -36,27 +36,27 @@ Use [useHotkeys](/navigation/hotkeys) to manage and register your hotkey actions
 The only punctuation you should need is the **+** to indicate that a combination
 of keys will activate the shortcut, used on Windows and Unix machines.
 
-```jsx
+```jsx center=true
 <Command>shift+X</Command>
 ```
 
 For a sequence of keys where one must follow the other, write "then" in between.
 Stick to lowercase to match the non-letter keys.
 
-```jsx
+```jsx center=true
 <Command>G then D</Command>
 ```
 
 If two different keys can execute the same action or the shortcut itself may
 look different on the user’s keyboard, write "or" in between.
 
-```jsx
+```jsx center=true
 <Command>alt or option</Command>
 ```
 
 ## Use in tooltips
 
-```jsx
+```jsx center=true
 <Tooltip
   label={
     <>