Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(examples): Updated Chakra UI examples (#36333)
## Overview This PR updates both Chakra UI examples by updating the Chakra UI packages to the latest versions, and added better examples for Semantic Tokens (new feature in Chakra UI), and pseudo props. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
- Loading branch information
1 parent
38aa6d7
commit cc35859
Showing
30 changed files
with
121 additions
and
404 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -1,35 +1,3 @@ | ||
| # Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and TypeScript | ||
| ## Deprecated | ||
|
|
||
| This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with TypeScript. | ||
|
|
||
| Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away. | ||
|
|
||
| We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props. | ||
|
|
||
| ## Deploy your own | ||
|
|
||
| Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript) | ||
|
|
||
| [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript&project-name=with-chakra-ui-typescript&repository-name=with-chakra-ui-typescript) | ||
|
|
||
| ## How to use | ||
|
|
||
| ### Using `create-next-app` | ||
|
|
||
| Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
|
|
||
| ```bash | ||
| npx create-next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app | ||
| # or | ||
| yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app | ||
| # or | ||
| pnpm create next-app -- --example with-chakra-ui-typescript with-chakra-ui-typescript-app | ||
| ``` | ||
|
|
||
| Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
|
||
| ## Notes | ||
|
|
||
| Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support). | ||
|
|
||
| If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.ts`. | ||
| The main [`with-chakra-ui`](../with-chakra-ui) example has been refactored to use TypeScript, so this example is deprecated. |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
19 changes: 0 additions & 19 deletions
19
examples/with-chakra-ui-typescript/src/components/Container.tsx
This file was deleted.
Oops, something went wrong.
16 changes: 0 additions & 16 deletions
16
examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx
This file was deleted.
Oops, something went wrong.
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
File renamed without changes.
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 |
|---|---|---|
| @@ -1,18 +1,24 @@ | ||
| { | ||
| "private": true, | ||
| "scripts": { | ||
| "dev": "next dev", | ||
| "dev": "next", | ||
| "build": "next build", | ||
| "start": "next start" | ||
| }, | ||
| "dependencies": { | ||
| "@chakra-ui/icons": "^1.0.0", | ||
| "@chakra-ui/react": "^1.4.2", | ||
| "@emotion/react": "^11.0.0", | ||
| "@emotion/styled": "^11.0.0", | ||
| "framer-motion": "^4.0.3", | ||
| "@chakra-ui/icons": "^1.1.7", | ||
| "@chakra-ui/react": "1.8.8", | ||
| "@emotion/react": "^11", | ||
| "@emotion/styled": "^11", | ||
| "framer-motion": "^6", | ||
| "next": "latest", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/node": "^14.6.0", | ||
| "@types/react": "^17.0.3", | ||
| "@types/react-dom": "^17.0.3", | ||
| "typescript": "4.3.2" | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
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,41 @@ | ||
| import { Link as ChakraLink, Button } from '@chakra-ui/react' | ||
|
|
||
| import { Container } from './Container' | ||
|
|
||
| export const CTA = () => ( | ||
| <Container | ||
| flexDirection="row" | ||
| position="fixed" | ||
| bottom={0} | ||
| width="full" | ||
| maxWidth="3xl" | ||
| py={3} | ||
| > | ||
| <Button | ||
| as={ChakraLink} | ||
| isExternal | ||
| href="https://chakra-ui.com" | ||
| variant="outline" | ||
| colorScheme="green" | ||
| rounded="button" | ||
| flexGrow={1} | ||
| mx={2} | ||
| width="full" | ||
| > | ||
| chakra-ui | ||
| </Button> | ||
| <Button | ||
| as={ChakraLink} | ||
| isExternal | ||
| href="https://github.com/vercel/next.js/blob/canary/examples/with-chakra-ui-typescript" | ||
| variant="solid" | ||
| colorScheme="green" | ||
| rounded="button" | ||
| flexGrow={3} | ||
| mx={2} | ||
| width="full" | ||
| > | ||
| View Repo | ||
| </Button> | ||
| </Container> | ||
| ) |
This file was deleted.
Oops, something went wrong.
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,17 @@ | ||
| import { Flex, FlexProps } from '@chakra-ui/react' | ||
|
|
||
| export const Container = (props: FlexProps) => ( | ||
| <Flex | ||
| direction="column" | ||
| alignItems="center" | ||
| justifyContent="flex-start" | ||
| bg="gray.50" | ||
| color="black" | ||
| _dark={{ | ||
| bg: 'gray.900', | ||
| color: 'white', | ||
| }} | ||
| transition="all 0.15s ease-out" | ||
| {...props} | ||
| /> | ||
| ) |
This file was deleted.
Oops, something went wrong.
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,18 @@ | ||
| import { useColorMode, IconButton } from '@chakra-ui/react' | ||
| import { SunIcon, MoonIcon } from '@chakra-ui/icons' | ||
|
|
||
| export const DarkModeSwitch = () => { | ||
| const { colorMode, toggleColorMode } = useColorMode() | ||
| const isDark = colorMode === 'dark' | ||
| return ( | ||
| <IconButton | ||
| position="fixed" | ||
| top={4} | ||
| right={4} | ||
| icon={isDark ? <SunIcon /> : <MoonIcon />} | ||
| aria-label="Toggle Theme" | ||
| colorScheme="green" | ||
| onClick={toggleColorMode} | ||
| /> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.
File renamed without changes.
Oops, something went wrong.