feat: examples - chakra-ui added

examples/with-chakra-ui/README.md

@@ -0,0 +1,41 @@
+<p align="center">
+<img src="https://i.imgur.com/oahHuxG.png">
+<img src="https://i.imgur.com/sZ01Nyl.png">
+</p>
+
+## Usage
+
+### Create an App
+
+```
+# with npx
+$ npx create-nextron-app my-app --example with-chakra-ui
+
+# with yarn
+$ yarn create nextron-app my-app --example with-chakra-ui
+
+# with pnpm
+$ pnpm dlx create-nextron-app my-app --example with-chakra-ui
+```
+
+### Install Dependencies
+
+```
+$ cd my-app
+
+# using yarn or npm
+$ yarn (or `npm install`)
+
+# using pnpm
+$ pnpm install --shamefully-hoist
+```
+
+### Use it
+
+```
+# development mode
+$ yarn dev (or `npm run dev` or `pnpm run dev`)
+
+# production build
+$ yarn build (or `npm run build` or `pnpm run build`)
+```

examples/with-chakra-ui/electron-builder.yml

@@ -0,0 +1,12 @@
+appId: com.example.nextron
+productName: My Nextron App
+copyright: Copyright © 2018 Yoshihide Shiono
+directories:
+  output: dist
+  buildResources: resources
+files:
+  - from: .
+    filter:
+      - package.json
+      - app
+publish: null

examples/with-chakra-ui/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "name": "my-nextron-app",
+  "description": "My application description",
+  "version": "1.0.0",
+  "author": "Ketan Patel <ktan.p.patel@gmail.com>",
+  "main": "app/background.js",
+  "scripts": {
+    "dev": "nextron",
+    "build": "nextron build",
+    "postinstall": "electron-builder install-app-deps"
+  },
+  "dependencies": {
+    "electron-serve": "^1.1.0",
+    "electron-store": "^8.1.0"
+  },
+  "devDependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.1",
+    "@chakra-ui/theme-tools": "^2.1.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "electron": "^21.3.3",
+    "electron-builder": "^23.6.0",
+    "framer-motion": "^6.5.1",
+    "next": "^12.3.4",
+    "nextron": "^8.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.5"
+  }
+}

examples/with-chakra-ui/renderer/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}
+  />
+)

examples/with-chakra-ui/renderer/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}
+    />
+  )
+}

examples/with-chakra-ui/renderer/components/Footer.tsx

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

examples/with-chakra-ui/renderer/components/Hero.tsx

@@ -0,0 +1,16 @@
+import { Flex, Heading } from '@chakra-ui/react'
+
+export const Hero = ({ title }: { title: string }) => (
+  <Flex
+    justifyContent="center"
+    alignItems="center"
+    bgGradient="linear(to-l, heroGradientStart, heroGradientEnd)"
+    bgClip="text"
+  >
+    <Heading fontSize="4vw">{title}</Heading>
+  </Flex>
+)
+
+Hero.defaultProps = {
+  title: 'with-typescript-chakra-ui',
+}

examples/with-chakra-ui/renderer/components/Main.tsx

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

examples/with-chakra-ui/renderer/lib/theme.tsx

@@ -0,0 +1,39 @@
+import { extendTheme } from '@chakra-ui/react'
+
+const fonts = { mono: `'Menlo', monospace` }
+
+const breakpoints = {
+  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

examples/with-chakra-ui/renderer/next.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.target = 'electron-renderer'
+    }
+
+    return config
+  },
+}

examples/with-chakra-ui/renderer/pages/_app.tsx

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

examples/with-chakra-ui/renderer/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>
+    )
+  }
+}

examples/with-chakra-ui/renderer/pages/home.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import Head from 'next/head'
+import Image from 'next/image'
+import { Button, Link as ChakraLink } from "@chakra-ui/react"
+
+import { Container } from '../components/Container'
+import { DarkModeSwitch } from '../components/DarkModeSwitch'
+import { Footer } from '../components/Footer'
+import { Hero } from "../components/Hero"
+
+const Home = () => (
+  <React.Fragment>
+    <Head>
+      <title>Home - Nextron (with-typescript-chakra-ui)</title>
+    </Head>
+    <Container minHeight="100vh">
+      <DarkModeSwitch />
+      <Image
+        src="/images/logo.png"
+        alt="Logo image"
+        height='200px'
+        width='200px'
+      />
+      <Hero title={`⚡Electron⚡ + Next.js + Chakra UI = 🔥`} />
+      <Footer>
+        <Button
+          as={ChakraLink}
+          href="/next"
+          variant="solid"
+          colorScheme="teal"
+          rounded="button"
+          width="full"
+        >
+          Go to next page
+        </Button>
+      </Footer>
+
+    </Container>
+  </React.Fragment>
+)
+
+export default Home

examples/with-chakra-ui/renderer/pages/next.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import Head from 'next/head'
+import Image from 'next/image'
+import { Button, Link as ChakraLink } from "@chakra-ui/react"
+
+import { Container } from '../components/Container'
+import { DarkModeSwitch } from '../components/DarkModeSwitch'
+import { Footer } from '../components/Footer'
+import { Hero } from '../components/Hero'
+
+const Next = () => {
+    return (
+        <React.Fragment>
+            <Head>
+                <title>Next - Nextron (with-typescript-chakra-ui)</title>
+            </Head>
+            <Container minHeight="100vh">
+                <DarkModeSwitch />
+                <Image
+                    src="/images/logo.png"
+                    alt="Logo image"
+                    height='200px'
+                    width='200px'
+                />
+                <Hero title={`⚡ Nextron ⚡`} />
+                <Footer>
+                    <Button
+                        as={ChakraLink}
+                        href="/home"
+                        variant="outline"
+                        colorScheme="teal"
+                        rounded="button"
+                        width="full"
+                    >
+                        Go to home page
+                    </Button>
+                </Footer>
+
+            </Container>
+        </React.Fragment>
+    )
+}
+
+export default Next

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

@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/with-chakra-ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules", "renderer/next.config.js", "app", "dist"]
+}