-
Notifications
You must be signed in to change notification settings - Fork 26.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'canary' into fix-next-node-buildin-module-error-message
- Loading branch information
Showing
71 changed files
with
782 additions
and
804 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.