Add with-chakra-ui-typescript example (#16561)

This PR adds an example Next.js project with chakra-ui as its component library using TypeScript.
![image](https://user-images.githubusercontent.com/11686408/91192736-a8ec5980-e6cc-11ea-8f95-b9180defbf47.png)
Both libraries has built-in TypeScript declarations. Will help to encourage typed projects, so why not?

It's a combination of two existing examples [with-chakra-ui](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui) and [with-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-typescript).

All credits for their contributors.

examples/with-chakra-ui-typescript/.gitignore

@@ -0,0 +1,34 @@
+# 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

examples/with-chakra-ui-typescript/README.md

@@ -0,0 +1,27 @@
+# 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 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):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/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
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-chakra-ui-typescript/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/with-chakra-ui-typescript/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "with-chakra-ui-typescript",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/core": "^1.0.0-rc.3",
+    "@chakra-ui/icons": "^1.0.0-rc.3",
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.6.0",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "typescript": "4.0.2"
+  },
+  "license": "MIT"
+}

examples/with-chakra-ui-typescript/src/components/CTA.tsx

@@ -0,0 +1,31 @@
+import { Link as ChakraLink, Button } from '@chakra-ui/core'
+
+import { Container } from './Container'
+
+export const CTA = () => (
+  <Container
+    flexDirection="row"
+    position="fixed"
+    bottom="0"
+    width="100%"
+    maxWidth="48rem"
+    py={2}
+  >
+    <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
+      <Button width="100%" variant="outline" colorScheme="green">
+        chakra-ui
+      </Button>
+    </ChakraLink>
+
+    <ChakraLink
+      isExternal
+      href="https://github.com/vercel/next.js/blob/canary/examples/with-chakra-ui-typescript"
+      flexGrow={3}
+      mx={2}
+    >
+      <Button width="100%" variant="solid" colorScheme="green">
+        View Repo
+      </Button>
+    </ChakraLink>
+  </Container>
+)

examples/with-chakra-ui-typescript/src/components/Container.tsx

@@ -0,0 +1,19 @@
+import { Flex, useColorMode, FlexProps } from '@chakra-ui/core'
+
+export const Container = (props: FlexProps) => {
+  const { colorMode } = useColorMode()
+
+  const bgColor = { light: 'gray.50', dark: 'gray.900' }
+
+  const color = { light: 'black', dark: 'white' }
+  return (
+    <Flex
+      direction="column"
+      alignItems="center"
+      justifyContent="flex-start"
+      bg={bgColor[colorMode]}
+      color={color[colorMode]}
+      {...props}
+    />
+  )
+}

examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx

@@ -0,0 +1,16 @@
+import { useColorMode, Switch } from '@chakra-ui/core'
+
+export const DarkModeSwitch = () => {
+  const { colorMode, toggleColorMode } = useColorMode()
+  const isDark = colorMode === 'dark'
+  return (
+    <Switch
+      position="fixed"
+      top="1rem"
+      right="1rem"
+      color="green"
+      isChecked={isDark}
+      onChange={toggleColorMode}
+    />
+  )
+}

examples/with-chakra-ui-typescript/src/components/Footer.tsx

@@ -0,0 +1,5 @@
+import { Flex, FlexProps } from '@chakra-ui/core'
+
+export const Footer = (props: FlexProps) => (
+  <Flex as="footer" py="8rem" {...props} />
+)

examples/with-chakra-ui-typescript/src/components/Hero.tsx

@@ -0,0 +1,11 @@
+import { Flex, Heading } from '@chakra-ui/core'
+
+export const Hero = ({ title }: { title: string }) => (
+  <Flex justifyContent="center" alignItems="center" height="100vh">
+    <Heading fontSize="6vw">{title}</Heading>
+  </Flex>
+)
+
+Hero.defaultProps = {
+  title: 'with-chakra-ui-typescript',
+}

examples/with-chakra-ui-typescript/src/components/Main.tsx

@@ -0,0 +1,13 @@
+import { Stack, StackProps } from '@chakra-ui/core'
+
+export const Main = (props: StackProps) => (
+  <Stack
+    spacing="1.5rem"
+    width="100%"
+    maxWidth="48rem"
+    mt="-45vh"
+    pt="8rem"
+    px="1rem"
+    {...props}
+  />
+)

examples/with-chakra-ui-typescript/src/pages/_app.tsx

@@ -0,0 +1,14 @@
+import { ChakraProvider } from '@chakra-ui/core'
+
+import theme from '../theme'
+import { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ChakraProvider resetCSS theme={theme}>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  )
+}
+
+export default MyApp

examples/with-chakra-ui-typescript/src/pages/index.tsx

@@ -0,0 +1,56 @@
+import {
+  Link as ChakraLink,
+  Text,
+  Code,
+  List,
+  ListIcon,
+  ListItem,
+} from '@chakra-ui/core'
+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 = () => (
+  <Container height="100vh">
+    <Hero />
+    <Main>
+      <Text>
+        Example repository of <Code>Next.js</Code> + <Code>chakra-ui</Code> +{' '}
+        <Code>typescript</Code>.
+      </Text>
+
+      <List spacing={3} my={0}>
+        <ListItem>
+          <ListIcon as={CheckCircleIcon} color="green.500" />
+          <ChakraLink
+            isExternal
+            href="https://chakra-ui.com"
+            flexGrow={1}
+            mr={2}
+          >
+            Chakra UI <LinkIcon />
+          </ChakraLink>
+        </ListItem>
+        <ListItem>
+          <ListIcon as={CheckCircleIcon} color="green.500" />
+          <ChakraLink isExternal href="https://nextjs.org" flexGrow={1} mr={2}>
+            Next.js <LinkIcon />
+          </ChakraLink>
+        </ListItem>
+      </List>
+    </Main>
+
+    <DarkModeSwitch />
+    <Footer>
+      <Text>Next ❤️ Chakra</Text>
+    </Footer>
+    <CTA />
+  </Container>
+)
+
+export default Index

examples/with-chakra-ui-typescript/src/theme.tsx

@@ -0,0 +1,17 @@
+import { theme as chakraTheme } from '@chakra-ui/core'
+
+const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` }
+
+const breakpoints = ['40em', '52em', '64em']
+
+const theme = {
+  ...chakraTheme,
+  colors: {
+    ...chakraTheme.colors,
+    black: '#16161D',
+  },
+  fonts,
+  breakpoints,
+}
+
+export default theme

examples/with-chakra-ui-typescript/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "es2017"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx"]
+}