chore: Add usage examples for vike-react-chakra in `/examples/react…

…-chakra`

examples/react-chakra/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/react-chakra/components/Counter.tsx

@@ -0,0 +1,13 @@
+export { Counter }
+
+import React, { useState } from 'react'
+import { Button } from '@chakra-ui/react'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <Button size="sm" colorPalette="teal" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </Button>
+  )
+}

examples/react-chakra/components/Link.tsx

@@ -0,0 +1,15 @@
+export { Link }
+
+import { usePageContext } from 'vike-react/usePageContext'
+import React from 'react'
+
+function Link({ href, children }: { href: string; children: string }) {
+  const pageContext = usePageContext()
+  const { urlPathname } = pageContext
+  const isActive = href === '/' ? urlPathname === href : urlPathname.startsWith(href)
+  return (
+    <a href={href} className={isActive ? 'is-active' : undefined}>
+      {children}
+    </a>
+  )
+}

examples/react-chakra/components/ui/alert.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { Alert as ChakraAlert } from '@chakra-ui/react'
+
+export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
+  startElement?: React.ReactNode
+  endElement?: React.ReactNode
+  title?: React.ReactNode
+  icon?: React.ReactElement
+  closable?: boolean
+  onClose?: () => void
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
+  const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props
+  return (
+    <ChakraAlert.Root ref={ref} {...rest}>
+      {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+      {children ? (
+        <ChakraAlert.Content>
+          <ChakraAlert.Title>{title}</ChakraAlert.Title>
+          <ChakraAlert.Description>{children}</ChakraAlert.Description>
+        </ChakraAlert.Content>
+      ) : (
+        <ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
+      )}
+      {endElement}
+    </ChakraAlert.Root>
+  )
+})

examples/react-chakra/components/ui/avatar.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import React, { forwardRef } from 'react'
+import type { GroupProps, SlotRecipeProps } from '@chakra-ui/react'
+import { Avatar as ChakraAvatar, Group } from '@chakra-ui/react'
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+
+export interface AvatarProps extends ChakraAvatar.RootProps {
+  name?: string
+  src?: string
+  srcSet?: string
+  loading?: ImageProps['loading']
+  icon?: React.ReactElement
+  fallback?: React.ReactNode
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(props, ref) {
+  const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props
+  return (
+    <ChakraAvatar.Root ref={ref} {...rest}>
+      <AvatarFallback name={name} icon={icon}>
+        {fallback}
+      </AvatarFallback>
+      <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
+      {children}
+    </ChakraAvatar.Root>
+  )
+})
+
+interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
+  name?: string
+  icon?: React.ReactElement
+}
+
+const AvatarFallback = forwardRef<HTMLDivElement, AvatarFallbackProps>(function AvatarFallback(props, ref) {
+  const { name, icon, children, ...rest } = props
+  return (
+    <ChakraAvatar.Fallback ref={ref} {...rest}>
+      {children}
+      {name != null && children == null && <>{getInitials(name)}</>}
+      {name == null && children == null && <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>}
+    </ChakraAvatar.Fallback>
+  )
+})
+
+function getInitials(name: string) {
+  const names = name.trim().split(' ')
+  const firstName = names[0] != null ? names[0] : ''
+  const lastName = names.length > 1 ? names[names.length - 1] : ''
+  return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0)
+}
+
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<'avatar'> {}
+
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(props, ref) {
+  const { size, variant, borderless, ...rest } = props
+  return (
+    <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
+      <Group gap="0" spaceX="-3" ref={ref} {...rest} />
+    </ChakraAvatar.PropsProvider>
+  )
+})

examples/react-chakra/components/ui/blockquote.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react'
+import { Blockquote as ChakraBlockquote } from '@chakra-ui/react'
+
+export interface BlockquoteProps extends ChakraBlockquote.RootProps {
+  cite?: React.ReactNode
+  citeUrl?: string
+  icon?: React.ReactNode
+  showDash?: boolean
+}
+
+export const Blockquote = forwardRef<HTMLDivElement, BlockquoteProps>(function Blockquote(props, ref) {
+  const { children, cite, citeUrl, showDash, icon, ...rest } = props
+
+  return (
+    <ChakraBlockquote.Root ref={ref} {...rest}>
+      {icon}
+      <ChakraBlockquote.Content cite={citeUrl}>{children}</ChakraBlockquote.Content>
+      {cite && (
+        <ChakraBlockquote.Caption>
+          {showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
+        </ChakraBlockquote.Caption>
+      )}
+    </ChakraBlockquote.Root>
+  )
+})
+
+export const BlockquoteIcon = ChakraBlockquote.Icon

examples/react-chakra/layouts/HeadDefault.tsx

@@ -0,0 +1,13 @@
+export default HeadDefault
+
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+
+function HeadDefault() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="icon" href={logoUrl} />
+    </>
+  )
+}

examples/react-chakra/layouts/LayoutDefault.tsx

@@ -0,0 +1,74 @@
+export default LayoutDefault
+
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+import { Link } from '../components/Link'
+
+function LayoutDefault({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxWidth: 900,
+        margin: 'auto',
+      }}
+    >
+      <Sidebar>
+        <Logo />
+        <Link href="/">Welcome</Link>
+        <Link href="/examples">Examples</Link>
+      </Sidebar>
+      <Content>{children}</Content>
+    </div>
+  )
+}
+
+function Sidebar({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      id="sidebar"
+      style={{
+        padding: 20,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        lineHeight: '1.8em',
+        borderRight: '2px solid #eee',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Content({ children }: { children: React.ReactNode }) {
+  return (
+    <div id="page-container">
+      <div
+        id="page-content"
+        style={{
+          padding: 20,
+          paddingBottom: 50,
+          minHeight: '100vh',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Logo() {
+  return (
+    <div
+      style={{
+        marginTop: 20,
+        marginBottom: 10,
+      }}
+    >
+      <a href="/">
+        <img src={logoUrl} height={64} width={64} />
+      </a>
+    </div>
+  )
+}

examples/react-chakra/package.json

@@ -0,0 +1,21 @@
+{
+    "scripts": {
+        "dev": "vite dev",
+        "preview": "vite build && vite preview"
+    },
+    "dependencies": {
+        "@chakra-ui/react": "^3.0.2",
+        "@emotion/react": "^11.13.3",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
+        "@vitejs/plugin-react": "^4.2.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "typescript": "^5.5.3",
+        "vike": "^0.4.197",
+        "vike-react": "^0.5.7",
+        "vike-react-chakra": "^0.0.1",
+        "vite": "^5.4.0"
+    },
+    "type": "module"
+}

examples/react-chakra/pages/+config.ts

@@ -0,0 +1,14 @@
+import type { Config } from 'vike/types'
+import Layout from '../layouts/LayoutDefault'
+import Head from '../layouts/HeadDefault'
+import vikeReact from 'vike-react/config'
+import vikeReactChakra from 'vike-react-chakra/config'
+
+// Default configs (can be overridden by pages)
+export default {
+  Layout,
+  Head,
+  // <title>
+  title: 'My Vike + React App',
+  extends: [vikeReact, vikeReactChakra],
+} satisfies Config

examples/react-chakra/pages/+system.ts

@@ -0,0 +1,36 @@
+// example of how to customize the global CSS in Chakra UI.
+import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react'
+
+const customConfig = defineConfig({
+  globalCss: {
+    /* Reset */
+    '*': {
+      boxSizing: 'border-box',
+    },
+    body: {
+      margin: 0,
+      fontFamily: 'sans-serif',
+    },
+    /* Links */
+    a: {
+      textDecoration: 'none',
+    },
+    '#sidebar a': {
+      padding: '2px 10px',
+      marginLeft: '-10px',
+    },
+    '#sidebar a.is-active': {
+      backgroundColor: 'gray.200',
+    },
+    /* Page Transition Anmiation */
+    '#page-content': {
+      opacity: 1,
+      transition: 'opacity 0.3s ease-in-out',
+    },
+    'body.page-is-transitioning #page-content': {
+      opacity: 0,
+    },
+  },
+})
+
+export const system = createSystem(defaultConfig, customConfig)