Add with-chakra-ui example (#10033)

* add with-chakra-ui example

* lint

Co-authored-by: Joe Haddad <timer150@gmail.com>

examples/with-chakra-ui/README.md

@@ -0,0 +1,50 @@
+# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui)
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-chakra-ui)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-chakra-ui with-chakra-ui-app
+# or
+yarn create next-app --example with-chakra-ui with-chakra-ui-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-chakra-ui
+cd with-chakra-ui
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app.
+
+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.

examples/with-chakra-ui/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "with-chakra-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/core": "^0.5.2",
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
+    "emotion-theming": "^10.0.27",
+    "next": "^9.1.7",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

examples/with-chakra-ui/src/components/CTA.js

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+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}
+  >
+    <Link isExternal href="https://chakra-ui.com">
+      <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
+        <Button width="100%" variant="outline" variantColor="green">
+          chakra-ui
+        </Button>
+      </ChakraLink>
+    </Link>
+    <Link
+      isExternal
+      href="https://github.com/zeit/next.js/blob/canary/examples/with-chakra-ui"
+    >
+      <ChakraLink
+        isExternal
+        href="https://github.com/zeit/next.js/blob/canary/examples/with-chakra-ui"
+        flexGrow={3}
+        mx={2}
+      >
+        <Button width="100%" variant="solid" variantColor="green">
+          View Repo
+        </Button>
+      </ChakraLink>
+    </Link>
+  </Container>
+)

examples/with-chakra-ui/src/components/Container.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Flex, useColorMode } from '@chakra-ui/core'
+
+export const Container = props => {
+  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/src/components/DarkModeSwitch.js

@@ -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/src/components/Footer.js

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

examples/with-chakra-ui/src/components/Hero.js

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

examples/with-chakra-ui/src/components/Main.js

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

examples/with-chakra-ui/src/pages/_app.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import NextApp from 'next/app'
+import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core'
+
+import theme from '../theme'
+
+class App extends NextApp {
+  render() {
+    const { Component } = this.props
+    return (
+      <ThemeProvider theme={theme}>
+        <CSSReset />
+        <ColorModeProvider>
+          <Component />
+        </ColorModeProvider>
+      </ThemeProvider>
+    )
+  }
+}
+
+export default App

examples/with-chakra-ui/src/pages/index.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import Link from 'next/link'
+import { withTheme } from 'emotion-theming'
+import {
+  Link as ChakraLink,
+  Text,
+  Code,
+  Icon,
+  List,
+  ListIcon,
+  ListItem,
+} from '@chakra-ui/core'
+
+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>
+    <Hero />
+    <Main>
+      <Text>
+        Example repository of <Code>Next.js</Code> + <Code>chakra-ui</Code>.
+      </Text>
+
+      <List spacing={3} my={0}>
+        <ListItem>
+          <ListIcon icon="check-circle" color="green.500" />
+          <Link href="https://chakra-ui.com">
+            <ChakraLink
+              isExternal
+              href="https://chakra-ui.com"
+              flexGrow={1}
+              mr={2}
+            >
+              Chakra UI <Icon name="external-link" mx="2px" />
+            </ChakraLink>
+          </Link>
+        </ListItem>
+        <ListItem>
+          <ListIcon icon="check-circle" color="green.500" />
+          <Link href="https://nextjs.org">
+            <ChakraLink
+              isExternal
+              href="https://nextjs.org"
+              flexGrow={1}
+              mr={2}
+            >
+              Next.js <Icon name="external-link" mx="2px" />
+            </ChakraLink>
+          </Link>
+        </ListItem>
+      </List>
+    </Main>
+
+    <DarkModeSwitch />
+    <Footer>
+      <Text>Next ❤️ Chakra</Text>
+    </Footer>
+    <CTA />
+  </Container>
+)
+
+export default withTheme(Index)

examples/with-chakra-ui/src/theme.js

@@ -0,0 +1,39 @@
+import React from 'react'
+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,
+  icons: {
+    ...chakraTheme.icons,
+    logo: {
+      path: (
+        <svg
+          width="3000"
+          height="3163"
+          viewBox="0 0 3000 3163"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect width="3000" height="3162.95" fill="none" />
+          <path
+            d="M1470.89 1448.81L2170 2488.19H820V706.392H2170L1470.89 1448.81ZM1408.21 1515.37L909.196 2045.3V2393.46H1998.84L1408.21 1515.37Z"
+            fill="currentColor"
+          />
+        </svg>
+      ),
+      viewBox: '0 0 3000 3163',
+    },
+  },
+}
+
+export default theme