feat: new extension vike-react-chakra

package.json

@@ -27,7 +27,8 @@
     "overrides": {
       "vike-react": "link:./packages/vike-react/",
       "vike-react-query": "link:./packages/vike-react-query/",
-      "vike-react-apollo": "link:./packages/vike-react-apollo/"
+      "vike-react-apollo": "link:./packages/vike-react-apollo/",
+      "vike-react-chakra": "link:./packages/vike-react-chakra/"
     }
   },
   "devDependencies": {

packages/vike-react-chakra/.gitignore

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

packages/vike-react-chakra/README.md

@@ -0,0 +1,99 @@
+<!-- WARNING: keep links absolute in this file so they work on NPM too -->
+
+[<img src="https://vike.dev/vike-readme.svg" align="right" height="90">](https://vike.dev)
+[![npm version](https://img.shields.io/npm/v/vike-react-chakra)](https://www.npmjs.com/package/vike-react-chakra)
+
+# `vike-react-chakra`
+
+[Installation](#installation)  
+[Basic usage](#basic-usage)  
+[`+ChakraProvider` Setting](#chakraprovider-setting)  
+[See also](#see-also)  
+
+<br/>
+
+## Installation
+
+1. npm install @chakra-ui/react @emotion/react vike-react-chakra
+2. Extend `+config.js`:
+   ```js
+   // pages/+config.js
+
+   import vikeReact from 'vike-react/config'
+   import vikeReactChakra from 'vike-react-chakra/config'
+
+   export default {
+     // ...
+     extends: [vikeReact, vikeReactChakra]
+   }
+   ```
+
+> [!NOTE]
+> The `vike-react-chakra` extension requires [`vike-react`](https://vike.dev/vike-react).
+
+<br/>
+
+## Basic usage
+```jsx
+import { HStack, Button } from '@chakra-ui/react'
+
+const Demo = () => {
+  return (
+    <HStack>
+      <Button>Click me</Button>
+      <Button>Click me</Button>
+    </HStack>
+  )
+}
+```
+
+> [!NOTE]
+> Chakra UI provides a cli tool to add snippets.  
+> Snippets are pre-built components that you can use to build your UI faster.  
+> Using the `@chakra-ui/cli` you can add snippets to your project.
+
+```
+npx @chakra-ui/cli snippet add
+```
+
+<br/>
+
+## `+ChakraProvider` Setting
+`vike-react-chakra` provides a custom setting, `+ChakraProvider`, for configuring custom Provider and also custom theme system.
+```js
+// pages/+ChakraProvider.js
+import React, { ReactNode } from 'react'
+import { ChakraProvider as Provider } from "@chakra-ui/react"
+import { ColorModeProvider } from '../components/ui/color-mode'
+import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react'
+
+const customConfig = defineConfig({
+  globalCss: {
+    "html, body": {
+      margin: 0,
+      padding: 0,
+    },
+  },
+})
+
+const system = createSystem(defaultConfig, customConfig)
+
+export function ChakraProvider({ children }: { children: ReactNode }) {
+    return (
+        <Provider value={system}>
+            <ColorModeProvider>
+                {children}
+            </ColorModeProvider>
+        </Provider>
+    )
+}
+
+```
+
+<br/>
+
+## See also
+
+- [Chakra UI Components](https://www.chakra-ui.com/docs/components/concepts/overview)
+- [Chakra UI Styling](https://www.chakra-ui.com/docs/styling/overview)
+- [Chakra UI Theming](https://www.chakra-ui.com/docs/theming/overview)

packages/vike-react-chakra/integration/+config.ts

@@ -0,0 +1,28 @@
+export { config as default }
+
+import type { ReactNode } from 'react'
+import type { Config, ImportString } from 'vike/types'
+
+const config = {
+  name: 'vike-react-chakra',
+  require: {
+    'vike-react': '>=0.4.13',
+  },
+  Wrapper: 'import:vike-react-chakra/__internal/integration/Wrapper:Wrapper',
+  meta: {
+    ChakraProvider: {
+      env: {
+        server: true,
+        client: true,
+      },
+    },
+  },
+} satisfies Config
+
+declare global {
+  namespace Vike {
+    interface Config {
+      ChakraProvider?: ((props: { children: ReactNode }) => ReactNode) | ImportString
+    }
+  }
+}

packages/vike-react-chakra/integration/Wrapper.tsx

@@ -0,0 +1,16 @@
+export { Wrapper }
+
+import React, { ReactNode } from 'react'
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
+import { usePageContext } from 'vike-react/usePageContext'
+
+function Wrapper({ children }: { children: ReactNode }) {
+  const pageContext = usePageContext()
+  const { ChakraProvider: CustomChakraProvider } = pageContext.config
+
+  if (CustomChakraProvider) {
+    return <CustomChakraProvider>{children}</CustomChakraProvider>
+  }
+
+  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
+}

packages/vike-react-chakra/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "vike-react-chakra",
+    "version": "0.0.1",
+    "type": "module",
+    "exports": {
+        "./config": "./dist/integration/+config.js",
+        "./__internal/integration/Wrapper": "./dist/integration/Wrapper.js"
+    },
+    "scripts": {
+        "dev": "tsc --watch",
+        "build": "rimraf dist/ && tsc"
+    },
+    "peerDependencies": {
+        "@chakra-ui/react": ">=3",
+        "@emotion/react": ">=11",
+        "react": ">=18.0.0",
+        "vike-react": ">=0.4.13"
+    },
+    "devDependencies": {
+        "@chakra-ui/react": "^3.0.2",
+        "@emotion/react": "^11.13.3",
+        "@types/node": "^20.11.17",
+        "@types/react": "^18.2.55",
+        "jsdom": "^24.0.0",
+        "react": "^18.3.1",
+        "rimraf": "^5.0.5",
+        "typescript": "^5.5.3",
+        "vike": "^0.4.197",
+        "vike-react": "^0.5.7",
+        "vite": "^5.4.0"
+    },
+    "typesVersions": {
+        "*": {
+            "config": [
+                "dist/integration/+config.d.ts"
+            ],
+            "__internal/integration/Wrapper": [
+                "dist/integration/Wrapper.d.ts"
+            ]
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "repository": "github:vikejs/vike-react",
+    "license": "MIT"
+}

packages/vike-react-chakra/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    // Resolution
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    // Libs
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "vike-react"],
+    // Strictness
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitAny": true,
+    // Output
+    "declaration": true,
+    "noEmitOnError": false,
+    "rootDir": "./",
+    // Misc
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "jsx": "react"
+  }
+}