-
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
new extension
vike-react-chakra (#151)
- Loading branch information
Showing
15 changed files
with
2,114 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| /node_modules/ | ||
| /dist/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| # `vike-react-chakra` | ||
|
|
||
| [Installation](#installation) | ||
| [Settings](#settings) | ||
|
|
||
| <br/> | ||
|
|
||
| ## Installation | ||
|
|
||
| 1. `npm install vike-react-chakra @chakra-ui/react @emotion/react` | ||
| 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] | ||
| } | ||
| ``` | ||
| 3. You can now use Chakra at any of your components. | ||
| ```jsx | ||
| import { HStack, Button } from '@chakra-ui/react' | ||
|
|
||
| function SomeComponent() { | ||
| return ( | ||
| <HStack> | ||
| <Button>Click me</Button> | ||
| <Button>Click me</Button> | ||
| </HStack> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| > [!NOTE] | ||
| > The `vike-react-chakra` extension requires [`vike-react`](https://vike.dev/vike-react). | ||
| > [!NOTE] | ||
| > The extension does only one thing: it adds [a Wrapper](https://github.com/vikejs/vike-react/blob/main/packages/vike-react-chakra/Wrapper.tsx) to your pages. | ||
| <br/> | ||
|
|
||
|
|
||
| ## Settings | ||
|
|
||
| `vike-react-chakra` provides a configuration `+chakra` for setting the theme system and locale. | ||
| ```js | ||
| // pages/+chakra.js | ||
|
|
||
| export { chakra } | ||
|
|
||
| import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react' | ||
|
|
||
| const customConfig = defineConfig({ | ||
| globalCss: { | ||
| "html, body": { | ||
| margin: 0, | ||
| padding: 0 | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| const system = createSystem(defaultConfig, customConfig) | ||
|
|
||
| const chakra = { | ||
| system, | ||
| locale: "fr-FR" | ||
| } | ||
| ``` | ||
|
|
||
| You can remove Chakra from [some of your pages](https://vike.dev/config#inheritance): | ||
| ```js | ||
| // pages/about/+chakra.js | ||
|
|
||
| export const chakra = null | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| export { Wrapper } | ||
|
|
||
| import React, { type ReactNode } from 'react' | ||
| import { ChakraProvider, LocaleProvider, defaultSystem } from '@chakra-ui/react' | ||
| import { usePageContext } from 'vike-react/usePageContext' | ||
|
|
||
| function Wrapper({ children }: { children: ReactNode }) { | ||
| const pageContext = usePageContext() | ||
| const { chakra } = pageContext.config | ||
|
|
||
| if (chakra === null) { | ||
| return <>{children}</> | ||
| } | ||
|
|
||
| return ( | ||
| <ChakraProvider value={chakra?.system ?? defaultSystem}> | ||
| <ChakraLocaleProvider locale={chakra?.locale}>{children}</ChakraLocaleProvider> | ||
| </ChakraProvider> | ||
| ) | ||
| } | ||
|
|
||
| function ChakraLocaleProvider({ locale, children }: { locale?: string; children: ReactNode }) { | ||
| if (locale) { | ||
| return <LocaleProvider locale={locale}>{children}</LocaleProvider> | ||
| } | ||
| return <>{children}</> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| export { config as default } | ||
|
|
||
| import type { LocaleProviderProps, SystemContext } from '@chakra-ui/react' | ||
| import type { Config } from 'vike/types' | ||
|
|
||
| const config = { | ||
| name: 'vike-react-chakra', | ||
| require: { | ||
| vike: '>=0.4.203', | ||
| 'vike-react': '>=0.4.13', | ||
| }, | ||
| Wrapper: 'import:vike-react-chakra/__internal/Wrapper:Wrapper', | ||
| meta: { | ||
| chakra: { | ||
| env: { | ||
| server: true, | ||
| client: true, | ||
| }, | ||
| }, | ||
| }, | ||
| } satisfies Config | ||
|
|
||
| declare global { | ||
| namespace Vike { | ||
| interface Config { | ||
| chakra?: null | { | ||
| system?: SystemContext | ||
| locale?: LocaleProviderProps['locale'] | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| { | ||
| "name": "vike-react-chakra", | ||
| "version": "0.0.0", | ||
| "type": "module", | ||
| "exports": { | ||
| "./config": "./dist/config.js", | ||
| "./__internal/Wrapper": "./dist/Wrapper.js" | ||
| }, | ||
| "scripts": { | ||
| "dev": "tsc --watch", | ||
| "build": "rimraf dist/ && tsc", | ||
| "release": "release-me patch", | ||
| "release:minor": "release-me minor", | ||
| "release:major": "release-me major", | ||
| "release:commit": "release-me commit" | ||
| }, | ||
| "peerDependencies": { | ||
| "@chakra-ui/react": ">=3", | ||
| "@emotion/react": ">=11", | ||
| "react": ">=18", | ||
| "vike-react": ">=0.4.13" | ||
| }, | ||
| "devDependencies": { | ||
| "@brillout/release-me": "^0.3.8", | ||
| "@chakra-ui/react": "^3.0.2", | ||
| "@emotion/react": "^11.13.3", | ||
| "@types/react": "^18.2.55", | ||
| "react": "^18.3.1", | ||
| "rimraf": "^5.0.5", | ||
| "typescript": "^5.5.3", | ||
| "vike": "^0.4.203", | ||
| "vike-react": "^0.5.7", | ||
| "vite": "^5.4.0" | ||
| }, | ||
| "typesVersions": { | ||
| "*": { | ||
| "config": ["dist/config.d.ts"], | ||
| "__internal/Wrapper": ["dist/Wrapper.d.ts"] | ||
| } | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "repository": "https://github.com/vikejs/vike-react/tree/main/packages/vike-react-chakra", | ||
| "license": "MIT" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "declaration": true, | ||
| "target": "ESNext", | ||
| "module": "ESNext", | ||
| "moduleResolution": "Bundler", | ||
| "jsx": "react", | ||
| "outDir": "./dist/", | ||
| "skipLibCheck": true, | ||
| "types": ["vike-react"], | ||
| // Strictness | ||
| "strict": true, | ||
| "noUncheckedIndexedAccess": true, | ||
| "noImplicitAny": true | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.