From 3dee6097cd4ebf3bedd321eb1d5c34d367270a40 Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Mon, 21 Sep 2020 01:54:15 -0300 Subject: [PATCH] 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 | 34 +++++++++++ examples/with-chakra-ui-typescript/README.md | 27 +++++++++ .../with-chakra-ui-typescript/next-env.d.ts | 2 + .../with-chakra-ui-typescript/package.json | 23 ++++++++ .../src/components/CTA.tsx | 31 ++++++++++ .../src/components/Container.tsx | 19 +++++++ .../src/components/DarkModeSwitch.tsx | 16 ++++++ .../src/components/Footer.tsx | 5 ++ .../src/components/Hero.tsx | 11 ++++ .../src/components/Main.tsx | 13 +++++ .../src/pages/_app.tsx | 14 +++++ .../src/pages/index.tsx | 56 +++++++++++++++++++ .../with-chakra-ui-typescript/src/theme.tsx | 17 ++++++ .../with-chakra-ui-typescript/tsconfig.json | 23 ++++++++ 14 files changed, 291 insertions(+) create mode 100644 examples/with-chakra-ui-typescript/.gitignore create mode 100644 examples/with-chakra-ui-typescript/README.md create mode 100644 examples/with-chakra-ui-typescript/next-env.d.ts create mode 100644 examples/with-chakra-ui-typescript/package.json create mode 100644 examples/with-chakra-ui-typescript/src/components/CTA.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Container.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Footer.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Hero.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Main.tsx create mode 100644 examples/with-chakra-ui-typescript/src/pages/_app.tsx create mode 100644 examples/with-chakra-ui-typescript/src/pages/index.tsx create mode 100644 examples/with-chakra-ui-typescript/src/theme.tsx create mode 100644 examples/with-chakra-ui-typescript/tsconfig.json diff --git a/examples/with-chakra-ui-typescript/.gitignore b/examples/with-chakra-ui-typescript/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ b/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 diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md new file mode 100644 index 0000000000000..59d8810b32cc7 --- /dev/null +++ b/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)). diff --git a/examples/with-chakra-ui-typescript/next-env.d.ts b/examples/with-chakra-ui-typescript/next-env.d.ts new file mode 100644 index 0000000000000..7b7aa2c7727d8 --- /dev/null +++ b/examples/with-chakra-ui-typescript/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json new file mode 100644 index 0000000000000..72dcb5f66e307 --- /dev/null +++ b/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" +} diff --git a/examples/with-chakra-ui-typescript/src/components/CTA.tsx b/examples/with-chakra-ui-typescript/src/components/CTA.tsx new file mode 100644 index 0000000000000..d2e3dc10078fc --- /dev/null +++ b/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 = () => ( + + + + + + + + + +) diff --git a/examples/with-chakra-ui-typescript/src/components/Container.tsx b/examples/with-chakra-ui-typescript/src/components/Container.tsx new file mode 100644 index 0000000000000..8746555f42aac --- /dev/null +++ b/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 ( + + ) +} diff --git a/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx b/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx new file mode 100644 index 0000000000000..f19e44a6c7e63 --- /dev/null +++ b/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 ( + + ) +} diff --git a/examples/with-chakra-ui-typescript/src/components/Footer.tsx b/examples/with-chakra-ui-typescript/src/components/Footer.tsx new file mode 100644 index 0000000000000..6b6d00e54cede --- /dev/null +++ b/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) => ( + +) diff --git a/examples/with-chakra-ui-typescript/src/components/Hero.tsx b/examples/with-chakra-ui-typescript/src/components/Hero.tsx new file mode 100644 index 0000000000000..f4ed0a9646697 --- /dev/null +++ b/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 }) => ( + + {title} + +) + +Hero.defaultProps = { + title: 'with-chakra-ui-typescript', +} diff --git a/examples/with-chakra-ui-typescript/src/components/Main.tsx b/examples/with-chakra-ui-typescript/src/components/Main.tsx new file mode 100644 index 0000000000000..771a458f0f556 --- /dev/null +++ b/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) => ( + +) diff --git a/examples/with-chakra-ui-typescript/src/pages/_app.tsx b/examples/with-chakra-ui-typescript/src/pages/_app.tsx new file mode 100644 index 0000000000000..a7d811a3fd250 --- /dev/null +++ b/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 ( + + + + ) +} + +export default MyApp diff --git a/examples/with-chakra-ui-typescript/src/pages/index.tsx b/examples/with-chakra-ui-typescript/src/pages/index.tsx new file mode 100644 index 0000000000000..704e8c6d59ea5 --- /dev/null +++ b/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 = () => ( + + +
+ + Example repository of Next.js + chakra-ui +{' '} + typescript. + + + + + + + Chakra UI + + + + + + Next.js + + + +
+ + +
+ Next ❤️ Chakra +
+ + +) + +export default Index diff --git a/examples/with-chakra-ui-typescript/src/theme.tsx b/examples/with-chakra-ui-typescript/src/theme.tsx new file mode 100644 index 0000000000000..1f585c1e8517e --- /dev/null +++ b/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 diff --git a/examples/with-chakra-ui-typescript/tsconfig.json b/examples/with-chakra-ui-typescript/tsconfig.json new file mode 100644 index 0000000000000..c65399cb28e5d --- /dev/null +++ b/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"] +}