chore(examples): prepare v3 + next 14 app dir

chakra-ui · Mar 28, 2024 · e516332 · e516332
1 parent 65575d9
commit e516332
Show file tree

Hide file tree

Showing 340 changed files with 856 additions and 115 deletions.
diff --git a/examples/next-app/app/layout.tsx b/examples/next-app/app/layout.tsx
@@ -1,16 +1,20 @@
-import { ColorModeScript } from "@chakra-ui/react"
+import { Inter } from "next/font/google"
 import Provider from "./provider"
 
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+})
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" data-theme="light">
+    <html className={inter.className} suppressHydrationWarning>
       <head />
       <body>
-        <ColorModeScript type="cookie" nonce="testing" />
         <Provider>{children}</Provider>
       </body>
     </html>

diff --git a/examples/next-app/app/page.tsx b/examples/next-app/app/page.tsx
@@ -1,11 +1,67 @@
-import { Box, Text } from "@chakra-ui/react"
+import {
+  Box,
+  Button,
+  Checkbox,
+  ClientOnly,
+  HStack,
+  Heading,
+  Progress,
+  RadioGroup,
+  Skeleton,
+  VStack,
+} from "@chakra-ui/react"
+import Image from "next/image"
 import { ColorModeToggle } from "../components/color-mode-toggle"
 
 export default async function Page() {
   return (
-    <Box textAlign="center" fontSize="xl">
-      <Text>Welcome to Chakra UI + Next.js</Text>
-      <ColorModeToggle />
+    <Box textAlign="center" fontSize="xl" pt="30vh">
+      <VStack gap="8">
+        <Image
+          alt="chakra logo"
+          src="/static/logo.svg"
+          width="80"
+          height="80"
+        />
+        <Heading size="2xl" letterSpacing="tight">
+          Welcome to Chakra UI v3 + Next.js (App)
+        </Heading>
+
+        <HStack gap="10">
+          <Checkbox.Root defaultChecked>
+            <Checkbox.Control />
+            <Checkbox.Label>Checkbox</Checkbox.Label>
+          </Checkbox.Root>
+
+          <RadioGroup.Root display="inline-flex" defaultValue="1">
+            <RadioGroup.Item value="1" mr="2">
+              <RadioGroup.ItemControl />
+              <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
+            </RadioGroup.Item>
+            <RadioGroup.Item value="2">
+              <RadioGroup.ItemControl />
+              <RadioGroup.ItemText lineHeight="1">Radio</RadioGroup.ItemText>
+            </RadioGroup.Item>
+          </RadioGroup.Root>
+        </HStack>
+
+        <Progress.Root width="300px" value={65} hasStripe>
+          <Progress.Track>
+            <Progress.FilledTrack />
+          </Progress.Track>
+        </Progress.Root>
+
+        <HStack>
+          <Button>Let's go!</Button>
+          <Button variant="outline">bun install @chakra-ui/react</Button>
+        </HStack>
+      </VStack>
+
+      <Box pos="absolute" top="4" right="4">
+        <ClientOnly fallback={<Skeleton w="10" h="10" rounded="md" />}>
+          <ColorModeToggle />
+        </ClientOnly>
+      </Box>
     </Box>
   )
 }
diff --git a/examples/next-app/app/provider.tsx b/examples/next-app/app/provider.tsx
@@ -1,15 +1,14 @@
 "use client"
 
-import { ChakraProvider, cookieStorageManager } from "@chakra-ui/react"
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import { ThemeProvider } from "next-themes"
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout(props: { children: React.ReactNode }) {
   return (
-    <ChakraProvider colorModeManager={cookieStorageManager}>
-      {children}
+    <ChakraProvider value={defaultSystem}>
+      <ThemeProvider attribute="class" disableTransitionOnChange>
+        {props.children}
+      </ThemeProvider>
     </ChakraProvider>
   )
 }
diff --git a/examples/next-app/components/color-mode-toggle.tsx b/examples/next-app/components/color-mode-toggle.tsx
@@ -1,7 +1,17 @@
 "use client"
-import { Button, useColorMode } from "@chakra-ui/react"
+
+import { IconButton } from "@chakra-ui/react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
 
 export function ColorModeToggle() {
-  const { toggleColorMode } = useColorMode()
-  return <Button onClick={toggleColorMode}>Click me</Button>
+  const { theme, setTheme } = useTheme()
+  const toggleColorMode = () => {
+    setTheme(theme === "light" ? "dark" : "light")
+  }
+  return (
+    <IconButton aria-label="toggle color mode" onClick={toggleColorMode}>
+      {theme === "light" ? <Moon /> : <Sun />}
+    </IconButton>
+  )
 }
diff --git a/examples/next-app/package.json b/examples/next-app/package.json
@@ -17,6 +17,8 @@
     "@types/react-dom": "^18.2.22",
     "framer-motion": "^11.0.22",
     "next": "^14.1.4",
+    "next-themes": "^0.3.0",
+    "lucide-react": "^0.363.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.4.3"

diff --git a/examples/next-app/public/static/logo.svg b/examples/next-app/public/static/logo.svg
diff --git a/examples/next-app/tsconfig.json b/examples/next-app/tsconfig.json
@@ -19,11 +19,10 @@
     "allowSyntheticDefaultImports": true,
     "incremental": true,
     "customConditions": ["source"],
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@chakra-ui/react": ["../../packages/react/src"]
+    }
   },
   "exclude": ["node_modules"],
   "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]

diff --git a/examples/vite-ts/src/color-mode.tsx b/examples/vite-ts/src/color-mode.tsx
@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react"
+
+type ColorMode = "light" | "dark"
+
+interface ColorModeContextType {
+  forced?: boolean
+  colorMode: ColorMode
+  toggleColorMode: () => void
+  setColorMode: (value: any) => void
+}
+
+const ColorModeContext = createContext({} as ColorModeContextType)
+ColorModeContext.displayName = "ColorModeContext"
+
+export function useColorMode() {
+  return useContext(ColorModeContext)
+}
+
+export function useColorModeValue<TLight = unknown, TDark = unknown>(
+  light: TLight,
+  dark: TDark,
+) {
+  const { colorMode } = useColorMode()
+  return colorMode === "dark" ? dark : light
+}
diff --git a/package.json b/package.json
@@ -58,8 +58,8 @@
     "@storybook/addon-a11y": "^8.0.4",
     "@storybook/addon-essentials": "^8.0.4",
     "@storybook/addon-themes": "^8.0.4",
-    "@storybook/manager-api": "^8.0.4",
     "@storybook/cli": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
     "@storybook/react": "^8.0.4",
     "@storybook/react-vite": "^8.0.4",
     "@storybook/theming": "^8.0.4",
@@ -104,8 +104,8 @@
     "react-dom": "^18.2.0",
     "rimraf": "5.0.5",
     "rollup": "^4.13.0",
-    "rollup-plugin-banner2": "^1.2.2",
     "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "^8.0.4",
     "tsup": "^8.0.2",
     "tsx": "^4.7.1",

diff --git a/packages/hooks/src/use-animation-state.ts b/packages/hooks/src/use-animation-state.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { getOwnerWindow } from "@chakra-ui/utils"
 import { useEffect, useState } from "react"
 import { useEventListener } from "./use-event-listener"

diff --git a/packages/hooks/src/use-boolean.ts b/packages/hooks/src/use-boolean.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useMemo, useState } from "react"
 
 type InitialState = boolean | (() => boolean)

diff --git a/packages/hooks/src/use-callback-ref.ts b/packages/hooks/src/use-callback-ref.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useCallback, useEffect, useRef } from "react"
 
 export function useCallbackRef<T extends (...args: any[]) => any>(

diff --git a/packages/hooks/src/use-clipboard.ts b/packages/hooks/src/use-clipboard.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import copy from "copy-to-clipboard"
 import { useCallback, useEffect, useState } from "react"
 

diff --git a/packages/hooks/src/use-controllable-state.ts b/packages/hooks/src/use-controllable-state.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useMemo, useState } from "react"
 import { useCallbackRef } from "./use-callback-ref"
 

diff --git a/packages/hooks/src/use-counter.ts b/packages/hooks/src/use-counter.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { clampValue, countDecimalPlaces, toPrecision } from "@chakra-ui/utils"
 import { useCallback, useState } from "react"
 import { useCallbackRef } from "./use-callback-ref"

diff --git a/packages/hooks/src/use-disclosure.ts b/packages/hooks/src/use-disclosure.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import React, { useCallback, useId, useState } from "react"
 import { useCallbackRef } from "./use-callback-ref"
 

diff --git a/packages/hooks/src/use-event-listener.ts b/packages/hooks/src/use-event-listener.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect } from "react"
 import { useCallbackRef } from "./use-callback-ref"
 

diff --git a/packages/hooks/src/use-focus-effect.ts b/packages/hooks/src/use-focus-effect.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import {
   FocusableElement,
   getActiveElement,

diff --git a/packages/hooks/src/use-focus-on-pointer-down.ts b/packages/hooks/src/use-focus-on-pointer-down.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEventListener } from "./use-event-listener"
 
 export interface UseFocusOnMouseDownProps {

diff --git a/packages/hooks/src/use-interval.ts b/packages/hooks/src/use-interval.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect } from "react"
 import { useCallbackRef } from "./use-callback-ref"
 

diff --git a/packages/hooks/src/use-latest-ref.ts b/packages/hooks/src/use-latest-ref.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useRef } from "react"
 
 /**

diff --git a/packages/hooks/src/use-media-query.ts b/packages/hooks/src/use-media-query.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useState } from "react"
 import { useCallbackRef } from "./use-callback-ref"
 

diff --git a/packages/hooks/src/use-merge-refs.ts b/packages/hooks/src/use-merge-refs.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useMemo } from "react"
 
 export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>

diff --git a/packages/hooks/src/use-outside-click.ts b/packages/hooks/src/use-outside-click.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef } from "react"
 import { useCallbackRef } from "./use-callback-ref"
 

diff --git a/packages/hooks/src/use-pan-event/use-pan-event.ts b/packages/hooks/src/use-pan-event/use-pan-event.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { addPointerEvent } from "@chakra-ui/utils"
 import { useEffect, useRef } from "react"
 import { useLatestRef } from "../use-latest-ref"

diff --git a/packages/hooks/src/use-previous.ts b/packages/hooks/src/use-previous.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef } from "react"
 
 export function usePrevious<T>(value: T) {

diff --git a/packages/hooks/src/use-safe-layout-effect.ts b/packages/hooks/src/use-safe-layout-effect.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useLayoutEffect } from "react"
 
 export const useSafeLayoutEffect = Boolean(globalThis?.document)

diff --git a/packages/hooks/src/use-size.ts b/packages/hooks/src/use-size.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { ElementSize, trackElementSize } from "@zag-js/element-size"
 import { useEffect, useLayoutEffect, useState } from "react"
 

diff --git a/packages/hooks/src/use-timeout.ts b/packages/hooks/src/use-timeout.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect } from "react"
 import { useCallbackRef } from "./use-callback-ref"
 

diff --git a/packages/hooks/src/use-update-effect.ts b/packages/hooks/src/use-update-effect.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef } from "react"
 
 /**

diff --git a/packages/react/src/components/accordion/accordion-content.tsx b/packages/react/src/components/accordion/accordion-content.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { cx } from "@chakra-ui/utils"
 import { forwardRef } from "react"
 import { HTMLChakraProps, chakra } from "../../styled-system"

diff --git a/packages/react/src/components/accordion/accordion-indicator.tsx b/packages/react/src/components/accordion/accordion-indicator.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { cx } from "@chakra-ui/utils"
 import { forwardRef } from "react"
 import { HTMLChakraProps, chakra } from "../../styled-system"

diff --git a/packages/react/src/components/accordion/accordion-item.tsx b/packages/react/src/components/accordion/accordion-item.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { MaybeRenderProp, cx, runIfFn } from "@chakra-ui/utils"
 import { forwardRef } from "react"
 import { HTMLChakraProps, chakra } from "../../styled-system"

diff --git a/packages/react/src/components/accordion/accordion-root.tsx b/packages/react/src/components/accordion/accordion-root.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useMergeRefs } from "@chakra-ui/hooks"
 import { cx } from "@chakra-ui/utils"
 import { forwardRef } from "react"

diff --git a/packages/react/src/components/accordion/accordion-trigger.tsx b/packages/react/src/components/accordion/accordion-trigger.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { cx } from "@chakra-ui/utils"
 import { forwardRef } from "react"
 import { HTMLChakraProps, chakra } from "../../styled-system"

diff --git a/packages/react/src/components/accordion/use-accordion-item-state.ts b/packages/react/src/components/accordion/use-accordion-item-state.ts
@@ -1,8 +1,7 @@
+"use client"
+
 import { useAccordionItemContext } from "./accordion-context"
 
-/**
- * React hook to get the state and actions of an accordion item
- */
 export function useAccordionItemState() {
   const { open, disabled, onClose, onOpen } = useAccordionItemContext()
   return { open, onClose, disabled, onOpen }

diff --git a/packages/react/src/components/accordion/use-accordion-item.ts b/packages/react/src/components/accordion/use-accordion-item.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { mergeRefs } from "@chakra-ui/hooks"
 import { callAllHandlers, dataAttr } from "@chakra-ui/utils"
 import { nextById, prevById, queryAll } from "@zag-js/dom-utils"