frontend initial setup

metlo-labs · Jul 26, 2022 · 22e1f29 · 22e1f29
1 parent 9554769
commit 22e1f29
Show file tree

Hide file tree

Showing 16 changed files with 1,824 additions and 0 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,37 @@
+# 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
+
+# typescript
+*.tsbuildinfo
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,35 @@
+# 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?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-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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) 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
+# or
+pnpm create next-app --example with-chakra-ui with-chakra-ui-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`.
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.0.2",
+    "@chakra-ui/react": "^2.2.1",
+    "@chakra-ui/theme-tools": "^2.0.2",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.9.0",
+    "framer-motion": "^6.3.0",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.7.2"
+  }
+}
diff --git a/frontend/src/components/CTA.tsx b/frontend/src/components/CTA.tsx
@@ -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>
+)
diff --git a/frontend/src/components/Container.tsx b/frontend/src/components/Container.tsx
@@ -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}
+  />
+)
diff --git a/frontend/src/components/DarkModeSwitch.tsx b/frontend/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 (
+    <IconButton
+      position="fixed"
+      top={4}
+      right={4}
+      icon={isDark ? <SunIcon /> : <MoonIcon />}
+      aria-label="Toggle Theme"
+      colorScheme="green"
+      onClick={toggleColorMode}
+    />
+  )
+}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -0,0 +1,5 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+
+export const Footer = (props: FlexProps) => (
+  <Flex as="footer" py="8rem" {...props} />
+)
diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
@@ -0,0 +1,17 @@
+import { Flex, Heading } from '@chakra-ui/react'
+
+export const Hero = ({ title }: { title: string }) => (
+  <Flex
+    justifyContent="center"
+    alignItems="center"
+    height="100vh"
+    bgGradient="linear(to-l, heroGradientStart, heroGradientEnd)"
+    bgClip="text"
+  >
+    <Heading fontSize="6vw">{title}</Heading>
+  </Flex>
+)
+
+Hero.defaultProps = {
+  title: 'with-chakra-ui-typescript',
+}
diff --git a/frontend/src/components/Main.tsx b/frontend/src/components/Main.tsx
@@ -0,0 +1,13 @@
+import { Stack, StackProps } from '@chakra-ui/react'
+
+export const Main = (props: StackProps) => (
+  <Stack
+    spacing="1.5rem"
+    width="100%"
+    maxWidth="48rem"
+    mt="-45vh"
+    pt="8rem"
+    px="1rem"
+    {...props}
+  />
+)
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -0,0 +1,14 @@
+import { ChakraProvider } from '@chakra-ui/react'
+
+import theme from '../theme'
+import { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ChakraProvider theme={theme}>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  )
+}
+
+export default MyApp
diff --git a/frontend/src/pages/_document.tsx b/frontend/src/pages/_document.tsx
@@ -0,0 +1,18 @@
+import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import { ColorModeScript } from '@chakra-ui/react'
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          {/* Make Color mode to persists when you refresh the page. */}
+          <ColorModeScript />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -0,0 +1,56 @@
+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 = () => (
+  <Container height="100vh">
+    <Hero />
+    <Main>
+      <Text color="text">
+        Example repository of <Code>Next.js</Code> + <Code>chakra-ui</Code> +{' '}
+        <Code>TypeScript</Code>.
+      </Text>
+
+      <List spacing={3} my={0} color="text">
+        <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
diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
@@ -0,0 +1,40 @@
+import { extendTheme } from '@chakra-ui/react'
+import { createBreakpoints } from '@chakra-ui/theme-tools'
+
+const fonts = { mono: `'Menlo', monospace` }
+
+const breakpoints = createBreakpoints({
+  sm: '40em',
+  md: '52em',
+  lg: '64em',
+  xl: '80em',
+})
+
+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',
+  },
+  fonts,
+  breakpoints,
+})
+
+export default theme
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}