diff --git a/examples/with-chakra-ui-typescript/.gitignore b/examples/with-chakra-ui-typescript/.gitignore deleted file mode 100644 index 1437c53f70bc..000000000000 --- a/examples/with-chakra-ui-typescript/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md index ec21712d4005..f9c22dffe952 100644 --- a/examples/with-chakra-ui-typescript/README.md +++ b/examples/with-chakra-ui-typescript/README.md @@ -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) - -[![Deploy with Vercel](https://vercel.com/button)](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 `` inside `_document.ts`. +The main [`with-chakra-ui`](../with-chakra-ui) example has been refactored to use TypeScript, so this example is deprecated. diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json deleted file mode 100644 index 5bbac2940341..000000000000 --- a/examples/with-chakra-ui-typescript/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "private": true, - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "@chakra-ui/icons": "^1.0.5", - "@chakra-ui/react": "^1.4.2", - "@chakra-ui/theme-tools": "1.1.2", - "@emotion/react": "11.1.5", - "@emotion/styled": "11.1.5", - "framer-motion": "^4.0.3", - "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" - } -} diff --git a/examples/with-chakra-ui-typescript/src/components/CTA.tsx b/examples/with-chakra-ui-typescript/src/components/CTA.tsx deleted file mode 100644 index 35f9fc179a5a..000000000000 --- a/examples/with-chakra-ui-typescript/src/components/CTA.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Link as ChakraLink, Button } from '@chakra-ui/react' - -import { Container } from './Container' - -export const CTA = () => ( - - - - - - - - - -) diff --git a/examples/with-chakra-ui-typescript/src/components/Container.tsx b/examples/with-chakra-ui-typescript/src/components/Container.tsx deleted file mode 100644 index acedb42afc99..000000000000 --- a/examples/with-chakra-ui-typescript/src/components/Container.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Flex, useColorMode, FlexProps } from '@chakra-ui/react' - -export const Container = (props: FlexProps) => { - const { colorMode } = useColorMode() - - const bgColor = { light: 'gray.50', dark: 'gray.900' } - - const color = { light: 'black', dark: 'white' } - return ( - - ) -} diff --git a/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx b/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx deleted file mode 100644 index 7edd444801c9..000000000000 --- a/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { useColorMode, Switch } from '@chakra-ui/react' - -export const DarkModeSwitch = () => { - const { colorMode, toggleColorMode } = useColorMode() - const isDark = colorMode === 'dark' - return ( - - ) -} diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md index 3c4630663289..183ff659fed9 100644 --- a/examples/with-chakra-ui/README.md +++ b/examples/with-chakra-ui/README.md @@ -1,17 +1,21 @@ -# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) +# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and TypeScript -This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app. +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. -We are connecting the Next.js `_app.js` with `chakra-ui`'s Theme and ColorMode containers 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. +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) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui&project-name=with-chakra-ui&repository-name=with-chakra-ui) +[![Deploy with Vercel](https://vercel.com/button)](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&repository-name=with-chakra-ui) ## 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 @@ -28,4 +32,4 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut 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 `` inside `_document.js`. +If you don't have multi-direction app, you should make `` inside `_document.ts`. diff --git a/examples/with-chakra-ui-typescript/next-env.d.ts b/examples/with-chakra-ui/next-env.d.ts similarity index 100% rename from examples/with-chakra-ui-typescript/next-env.d.ts rename to examples/with-chakra-ui/next-env.d.ts diff --git a/examples/with-chakra-ui/package.json b/examples/with-chakra-ui/package.json index 55f53efc17a9..aa973b56cc55 100644 --- a/examples/with-chakra-ui/package.json +++ b/examples/with-chakra-ui/package.json @@ -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" } } diff --git a/examples/with-chakra-ui/src/components/CTA.js b/examples/with-chakra-ui/src/components/CTA.js deleted file mode 100644 index 8967493c3986..000000000000 --- a/examples/with-chakra-ui/src/components/CTA.js +++ /dev/null @@ -1,31 +0,0 @@ -import { Link as ChakraLink, Button } from '@chakra-ui/react' - -import { Container } from './Container' - -export const CTA = () => ( - - - - - - - - - -) diff --git a/examples/with-chakra-ui/src/components/CTA.tsx b/examples/with-chakra-ui/src/components/CTA.tsx new file mode 100644 index 000000000000..9af7f683fae0 --- /dev/null +++ b/examples/with-chakra-ui/src/components/CTA.tsx @@ -0,0 +1,41 @@ +import { Link as ChakraLink, Button } from '@chakra-ui/react' + +import { Container } from './Container' + +export const CTA = () => ( + + + + +) diff --git a/examples/with-chakra-ui/src/components/Container.js b/examples/with-chakra-ui/src/components/Container.js deleted file mode 100644 index 57b73e441954..000000000000 --- a/examples/with-chakra-ui/src/components/Container.js +++ /dev/null @@ -1,19 +0,0 @@ -import { Flex, useColorMode } from '@chakra-ui/react' - -export const Container = (props) => { - const { colorMode } = useColorMode() - - const bgColor = { light: 'gray.50', dark: 'gray.900' } - - const color = { light: 'black', dark: 'white' } - return ( - - ) -} diff --git a/examples/with-chakra-ui/src/components/Container.tsx b/examples/with-chakra-ui/src/components/Container.tsx new file mode 100644 index 000000000000..1ee74495aa6a --- /dev/null +++ b/examples/with-chakra-ui/src/components/Container.tsx @@ -0,0 +1,17 @@ +import { Flex, FlexProps } from '@chakra-ui/react' + +export const Container = (props: FlexProps) => ( + +) diff --git a/examples/with-chakra-ui/src/components/DarkModeSwitch.js b/examples/with-chakra-ui/src/components/DarkModeSwitch.js deleted file mode 100644 index 7edd444801c9..000000000000 --- a/examples/with-chakra-ui/src/components/DarkModeSwitch.js +++ /dev/null @@ -1,16 +0,0 @@ -import { useColorMode, Switch } from '@chakra-ui/react' - -export const DarkModeSwitch = () => { - const { colorMode, toggleColorMode } = useColorMode() - const isDark = colorMode === 'dark' - return ( - - ) -} diff --git a/examples/with-chakra-ui/src/components/DarkModeSwitch.tsx b/examples/with-chakra-ui/src/components/DarkModeSwitch.tsx new file mode 100644 index 000000000000..4e91c3b624ba --- /dev/null +++ b/examples/with-chakra-ui/src/components/DarkModeSwitch.tsx @@ -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 ( + : } + aria-label="Toggle Theme" + colorScheme="green" + onClick={toggleColorMode} + /> + ) +} diff --git a/examples/with-chakra-ui/src/components/Footer.js b/examples/with-chakra-ui/src/components/Footer.js deleted file mode 100644 index 3b254626539d..000000000000 --- a/examples/with-chakra-ui/src/components/Footer.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Flex } from '@chakra-ui/react' - -export const Footer = (props) => diff --git a/examples/with-chakra-ui-typescript/src/components/Footer.tsx b/examples/with-chakra-ui/src/components/Footer.tsx similarity index 100% rename from examples/with-chakra-ui-typescript/src/components/Footer.tsx rename to examples/with-chakra-ui/src/components/Footer.tsx diff --git a/examples/with-chakra-ui/src/components/Hero.js b/examples/with-chakra-ui/src/components/Hero.js deleted file mode 100644 index bf4d104cd237..000000000000 --- a/examples/with-chakra-ui/src/components/Hero.js +++ /dev/null @@ -1,17 +0,0 @@ -import { Flex, Heading } from '@chakra-ui/react' - -export const Hero = ({ title }) => ( - - - {title} - - -) - -Hero.defaultProps = { - title: 'with-chakra-ui', -} diff --git a/examples/with-chakra-ui-typescript/src/components/Hero.tsx b/examples/with-chakra-ui/src/components/Hero.tsx similarity index 83% rename from examples/with-chakra-ui-typescript/src/components/Hero.tsx rename to examples/with-chakra-ui/src/components/Hero.tsx index d10435e5526f..3ec7364c3197 100644 --- a/examples/with-chakra-ui-typescript/src/components/Hero.tsx +++ b/examples/with-chakra-ui/src/components/Hero.tsx @@ -5,7 +5,7 @@ export const Hero = ({ title }: { title: string }) => ( justifyContent="center" alignItems="center" height="100vh" - bgGradient="linear(to-l, #7928CA, #FF0080)" + bgGradient="linear(to-l, heroGradientStart, heroGradientEnd)" bgClip="text" > {title} diff --git a/examples/with-chakra-ui/src/components/Main.js b/examples/with-chakra-ui/src/components/Main.js deleted file mode 100644 index a89329e53d7a..000000000000 --- a/examples/with-chakra-ui/src/components/Main.js +++ /dev/null @@ -1,13 +0,0 @@ -import { Stack } from '@chakra-ui/react' - -export const Main = (props) => ( - -) diff --git a/examples/with-chakra-ui-typescript/src/components/Main.tsx b/examples/with-chakra-ui/src/components/Main.tsx similarity index 100% rename from examples/with-chakra-ui-typescript/src/components/Main.tsx rename to examples/with-chakra-ui/src/components/Main.tsx diff --git a/examples/with-chakra-ui/src/pages/_app.js b/examples/with-chakra-ui/src/pages/_app.js deleted file mode 100644 index 120241b21fb5..000000000000 --- a/examples/with-chakra-ui/src/pages/_app.js +++ /dev/null @@ -1,19 +0,0 @@ -import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react' - -import theme from '../theme' - -function MyApp({ Component, pageProps }) { - return ( - - - - - - ) -} - -export default MyApp diff --git a/examples/with-chakra-ui-typescript/src/pages/_app.tsx b/examples/with-chakra-ui/src/pages/_app.tsx similarity index 100% rename from examples/with-chakra-ui-typescript/src/pages/_app.tsx rename to examples/with-chakra-ui/src/pages/_app.tsx diff --git a/examples/with-chakra-ui/src/pages/_document.js b/examples/with-chakra-ui/src/pages/_document.js deleted file mode 100644 index 2b8b5740baa4..000000000000 --- a/examples/with-chakra-ui/src/pages/_document.js +++ /dev/null @@ -1,18 +0,0 @@ -import NextDocument, { Html, Head, Main, NextScript } from 'next/document' -import { ColorModeScript } from '@chakra-ui/react' - -export default class Document extends NextDocument { - render() { - return ( - - - - {/* Make Color mode to persists when you refresh the page. */} - -
- - - - ) - } -} diff --git a/examples/with-chakra-ui-typescript/src/pages/_document.tsx b/examples/with-chakra-ui/src/pages/_document.tsx similarity index 100% rename from examples/with-chakra-ui-typescript/src/pages/_document.tsx rename to examples/with-chakra-ui/src/pages/_document.tsx diff --git a/examples/with-chakra-ui/src/pages/index.js b/examples/with-chakra-ui/src/pages/index.js deleted file mode 100644 index b3e22de84965..000000000000 --- a/examples/with-chakra-ui/src/pages/index.js +++ /dev/null @@ -1,54 +0,0 @@ -import { - Link as ChakraLink, - Text, - Code, - List, - ListIcon, - ListItem, -} from '@chakra-ui/react' -import { CheckCircleIcon, LinkIcon } from '@chakra-ui/icons' -import { Hero } from '../components/Hero' -import { Container } from '../components/Container' -import { Main } from '../components/Main' -import { DarkModeSwitch } from '../components/DarkModeSwitch' -import { CTA } from '../components/CTA' -import { Footer } from '../components/Footer' - -const Index = () => ( - - -
- - Example repository of Next.js + chakra-ui. - - - - - - - Chakra UI - - - - - - Next.js - - - -
- - -
- Next ❤️ Chakra -
- - -) - -export default Index diff --git a/examples/with-chakra-ui-typescript/src/pages/index.tsx b/examples/with-chakra-ui/src/pages/index.tsx similarity index 95% rename from examples/with-chakra-ui-typescript/src/pages/index.tsx rename to examples/with-chakra-ui/src/pages/index.tsx index d20edf24bf01..2cb151cd990e 100644 --- a/examples/with-chakra-ui-typescript/src/pages/index.tsx +++ b/examples/with-chakra-ui/src/pages/index.tsx @@ -19,12 +19,12 @@ const Index = () => (
- + Example repository of Next.js + chakra-ui +{' '} TypeScript. - + - - - - ), - viewBox: '0 0 3000 3163', - }, - }, -}) - -export default theme diff --git a/examples/with-chakra-ui-typescript/src/theme.tsx b/examples/with-chakra-ui/src/theme.tsx similarity index 51% rename from examples/with-chakra-ui-typescript/src/theme.tsx rename to examples/with-chakra-ui/src/theme.tsx index 880e01bd16a3..c621d5d4e959 100644 --- a/examples/with-chakra-ui-typescript/src/theme.tsx +++ b/examples/with-chakra-ui/src/theme.tsx @@ -11,6 +11,25 @@ const breakpoints = createBreakpoints({ }) const theme = extendTheme({ + semanticTokens: { + colors: { + text: { + default: '#16161D', + _dark: '#ade3b8', + }, + heroGradientStart: { + default: '#7928CA', + _dark: '#e3a7f9', + }, + heroGradientEnd: { + default: '#FF0080', + _dark: '#fbec8f', + }, + }, + radii: { + button: '12px', + }, + }, colors: { black: '#16161D', }, diff --git a/examples/with-chakra-ui-typescript/tsconfig.json b/examples/with-chakra-ui/tsconfig.json similarity index 100% rename from examples/with-chakra-ui-typescript/tsconfig.json rename to examples/with-chakra-ui/tsconfig.json