chore: use singleQuote (#122)

.prettierrc.json

@@ -1,7 +1,7 @@
 {
   "endOfLine": "lf",
   "semi": true,
-  "singleQuote": false,
+  "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5"
 }

src/lib/components/Chakra.tsx

@@ -1,6 +1,6 @@
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider } from '@chakra-ui/react';
 
-import customTheme from "~/lib/styles/theme/index";
+import customTheme from '~/lib/styles/theme/index';
 
 interface ChakraProps {
   children: React.ReactNode;

src/lib/components/Meta.tsx

@@ -1,4 +1,4 @@
-const APP_NAME = "nextarter-chakra";
+const APP_NAME = 'nextarter-chakra';
 
 const Meta = () => {
   return (

src/lib/components/motion/Box.tsx

@@ -1,11 +1,11 @@
-import type { HTMLChakraProps } from "@chakra-ui/react";
-import { chakra } from "@chakra-ui/react";
-import type { HTMLMotionProps } from "framer-motion";
-import { motion } from "framer-motion";
+import type { HTMLChakraProps } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
+import type { HTMLMotionProps } from 'framer-motion';
+import { motion } from 'framer-motion';
 
-import type { Merge } from "~/lib/types/merge";
+import type { Merge } from '~/lib/types/merge';
 
-type MotionBoxProps = Merge<HTMLChakraProps<"div">, HTMLMotionProps<"div">>;
+type MotionBoxProps = Merge<HTMLChakraProps<'div'>, HTMLMotionProps<'div'>>;
 
 const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div);
 

src/lib/components/samples/CTASection.tsx

@@ -1,7 +1,7 @@
-import { Box, Button, Flex, Image, Link } from "@chakra-ui/react";
-import { AiFillGithub } from "react-icons/ai";
+import { Box, Button, Flex, Image, Link } from '@chakra-ui/react';
+import { AiFillGithub } from 'react-icons/ai';
 
-const repoLink = "https://github.com/sozonome/nextarter-chakra";
+const repoLink = 'https://github.com/sozonome/nextarter-chakra';
 
 const CTASection = () => {
   return (

src/lib/components/samples/HelperImage.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, Image } from "@chakra-ui/react";
+import { Tooltip, Image } from '@chakra-ui/react';
 
 type HelperImageProps = {
   label?: string;
@@ -16,7 +16,7 @@ const HelperImage = ({ label, src }: HelperImageProps) => {
 };
 
 HelperImage.defaultProps = {
-  label: "",
+  label: '',
 };
 
 export default HelperImage;

src/lib/components/samples/SomeImage.tsx

@@ -1,6 +1,6 @@
-import { Flex, useColorMode } from "@chakra-ui/react";
+import { Flex, useColorMode } from '@chakra-ui/react';
 
-import HelperImage from "./HelperImage";
+import HelperImage from './HelperImage';
 
 const SomeImage = () => {
   const { colorMode } = useColorMode();

src/lib/components/samples/SomeText.tsx

@@ -1,4 +1,4 @@
-import { Grid, Heading, Text } from "@chakra-ui/react";
+import { Grid, Heading, Text } from '@chakra-ui/react';
 
 const SomeText = () => {
   return (

src/lib/layout/Footer.tsx

@@ -1,10 +1,10 @@
-import { Flex, Link, Text } from "@chakra-ui/react";
+import { Flex, Link, Text } from '@chakra-ui/react';
 
 const Footer = () => {
   return (
     <Flex as="footer" width="full" justifyContent="center">
       <Text fontSize="sm">
-        {new Date().getFullYear()} -{" "}
+        {new Date().getFullYear()} -{' '}
         <Link href="https://sznm.dev" isExternal rel="noopener noreferrer">
           sznm.dev
         </Link>

src/lib/layout/Header.tsx

@@ -1,6 +1,6 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex } from '@chakra-ui/react';
 
-import ThemeToggle from "./ThemeToggle";
+import ThemeToggle from './ThemeToggle';
 
 const Header = () => {
   return (

src/lib/layout/ThemeToggle.tsx

@@ -1,13 +1,13 @@
-import { IconButton, useColorMode } from "@chakra-ui/react";
-import { RiMoonFill, RiSunLine } from "react-icons/ri";
+import { IconButton, useColorMode } from '@chakra-ui/react';
+import { RiMoonFill, RiSunLine } from 'react-icons/ri';
 
 const ThemeToggle = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
   return (
     <IconButton
       aria-label="theme toggle"
-      icon={colorMode === "light" ? <RiMoonFill /> : <RiSunLine />}
+      icon={colorMode === 'light' ? <RiMoonFill /> : <RiSunLine />}
       onClick={toggleColorMode}
     />
   );

src/lib/layout/index.tsx

@@ -1,8 +1,8 @@
-import { Box } from "@chakra-ui/react";
-import type { ReactNode } from "react";
+import { Box } from '@chakra-ui/react';
+import type { ReactNode } from 'react';
 
-import Footer from "./Footer";
-import Header from "./Header";
+import Footer from './Footer';
+import Header from './Header';
 
 type LayoutProps = {
   children: ReactNode;

src/lib/pages/404/index.tsx

@@ -7,11 +7,11 @@ import {
   Link as ChakraLink,
   useColorMode,
   Flex,
-} from "@chakra-ui/react";
-import Link from "next/link";
-import { NextSeo } from "next-seo";
+} from '@chakra-ui/react';
+import Link from 'next/link';
+import { NextSeo } from 'next-seo';
 
-import MotionBox from "~/lib/components/motion/Box";
+import MotionBox from '~/lib/components/motion/Box';
 
 const Page404 = () => {
   const { colorMode } = useColorMode();
@@ -21,8 +21,8 @@ const Page404 = () => {
       <NextSeo title="404 Not Found" />
       <MotionBox
         animate={{ y: 20 }}
-        transition={{ repeat: Infinity, duration: 2, repeatType: "reverse" }}
-        width={{ base: "100%", sm: "70%", md: "60%" }}
+        transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
+        width={{ base: '100%', sm: '70%', md: '60%' }}
         margin="0 auto"
       >
         <Image
@@ -52,7 +52,7 @@ const Page404 = () => {
           <Button
             as={Link}
             href="/"
-            backgroundColor={colorMode === "light" ? "gray.300" : "teal.500"}
+            backgroundColor={colorMode === 'light' ? 'gray.300' : 'teal.500'}
             size="sm"
           >
             Let&apos;s Head Back

src/lib/pages/500/index.tsx

@@ -7,11 +7,11 @@ import {
   Link as ChakraLink,
   useColorMode,
   Flex,
-} from "@chakra-ui/react";
-import Link from "next/link";
-import { NextSeo } from "next-seo";
+} from '@chakra-ui/react';
+import Link from 'next/link';
+import { NextSeo } from 'next-seo';
 
-import MotionBox from "~/lib/components/motion/Box";
+import MotionBox from '~/lib/components/motion/Box';
 
 const Page500 = () => {
   const { colorMode } = useColorMode();
@@ -21,8 +21,8 @@ const Page500 = () => {
       <NextSeo title="500 Server Side Error Occured" />
       <MotionBox
         animate={{ y: 20 }}
-        transition={{ repeat: Infinity, duration: 2, repeatType: "reverse" }}
-        width={{ base: "100%", sm: "70%", md: "60%" }}
+        transition={{ repeat: Infinity, duration: 2, repeatType: 'reverse' }}
+        width={{ base: '100%', sm: '70%', md: '60%' }}
         margin="0 auto"
       >
         <Image
@@ -49,7 +49,7 @@ const Page500 = () => {
           <Button
             as={Link}
             href="/"
-            backgroundColor={colorMode === "light" ? "gray.300" : "teal.500"}
+            backgroundColor={colorMode === 'light' ? 'gray.300' : 'teal.500'}
             size="sm"
           >
             Let&apos;s Head Back

src/lib/pages/home/index.tsx

@@ -1,9 +1,9 @@
-import { Flex } from "@chakra-ui/react";
-import { NextSeo } from "next-seo";
+import { Flex } from '@chakra-ui/react';
+import { NextSeo } from 'next-seo';
 
-import CTASection from "~/lib/components/samples/CTASection";
-import SomeImage from "~/lib/components/samples/SomeImage";
-import SomeText from "~/lib/components/samples/SomeText";
+import CTASection from '~/lib/components/samples/CTASection';
+import SomeImage from '~/lib/components/samples/SomeImage';
+import SomeText from '~/lib/components/samples/SomeText';
 
 const Home = () => {
   return (

src/lib/styles/theme/colors.ts

@@ -1,24 +1,24 @@
-import type { DeepPartial, Theme } from "@chakra-ui/react";
+import type { DeepPartial, Theme } from '@chakra-ui/react';
 
 /** extend additional color here */
 const extendedColors: DeepPartial<
-  Record<string, Theme["colors"]["blackAlpha"]>
+  Record<string, Theme['colors']['blackAlpha']>
 > = {
   brand: {
-    100: "",
-    200: "",
-    300: "",
-    400: "",
-    500: "",
-    600: "",
-    700: "",
-    800: "",
-    900: "",
+    100: '',
+    200: '',
+    300: '',
+    400: '',
+    500: '',
+    600: '',
+    700: '',
+    800: '',
+    900: '',
   },
 };
 
 /** override chakra colors here */
-const overridenChakraColors: DeepPartial<Theme["colors"]> = {};
+const overridenChakraColors: DeepPartial<Theme['colors']> = {};
 
 export const colors = {
   ...overridenChakraColors,

src/lib/styles/theme/components/button.ts

@@ -1,7 +1,7 @@
-import type { ComponentStyleConfig } from "@chakra-ui/react";
+import type { ComponentStyleConfig } from '@chakra-ui/react';
 
 export const Button: ComponentStyleConfig = {
   baseStyle: {
-    borderRadius: "full",
+    borderRadius: 'full',
   },
 };

src/lib/styles/theme/components/index.ts

@@ -1,4 +1,4 @@
-import { Button } from "./button";
+import { Button } from './button';
 
 export const components = {
   Button,

src/lib/styles/theme/config.ts

@@ -1,6 +1,6 @@
-import type { ThemeConfig } from "@chakra-ui/react";
+import type { ThemeConfig } from '@chakra-ui/react';
 
 export const config: ThemeConfig = {
-  initialColorMode: "system",
+  initialColorMode: 'system',
   disableTransitionOnChange: false,
 };

src/lib/styles/theme/fonts.ts

@@ -1,6 +1,6 @@
-import type { DeepPartial, Theme } from "@chakra-ui/react";
+import type { DeepPartial, Theme } from '@chakra-ui/react';
 
-export const fonts: DeepPartial<Theme["fonts"]> = {
+export const fonts: DeepPartial<Theme['fonts']> = {
   body: `"Figtree", sans-serif`,
   heading: `"Figtree", serif`,
 };

src/lib/styles/theme/index.ts

@@ -1,9 +1,9 @@
-import { extendTheme } from "@chakra-ui/react";
+import { extendTheme } from '@chakra-ui/react';
 
-import { colors } from "./colors";
-import { components } from "./components";
-import { config } from "./config";
-import { fonts } from "./fonts";
+import { colors } from './colors';
+import { components } from './components';
+import { config } from './config';
+import { fonts } from './fonts';
 
 const customTheme = extendTheme({
   fonts,

src/pages/404.ts

@@ -1,3 +1,3 @@
-import Page404 from "~/lib/pages/404";
+import Page404 from '~/lib/pages/404';
 
 export default Page404;

src/pages/500.ts

@@ -1,3 +1,3 @@
-import Page500 from "~/lib/pages/500";
+import Page500 from '~/lib/pages/500';
 
 export default Page500;

src/pages/_app.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import type { AppProps } from "next/app";
-import Head from "next/head";
-import { DefaultSeo } from "next-seo";
+import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import { DefaultSeo } from 'next-seo';
 
-import defaultSEOConfig from "../../next-seo.config";
-import { Chakra } from "~/lib/components/Chakra";
-import Layout from "~/lib/layout";
-import "~/lib/styles/globals.css";
+import defaultSEOConfig from '../../next-seo.config';
+import { Chakra } from '~/lib/components/Chakra';
+import Layout from '~/lib/layout';
+import '~/lib/styles/globals.css';
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (

src/pages/_document.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { ColorModeScript } from "@chakra-ui/react";
-import type { DocumentContext } from "next/document";
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import { ColorModeScript } from '@chakra-ui/react';
+import type { DocumentContext } from 'next/document';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
-import Meta from "~/lib/components/Meta";
-import customTheme from "~/lib/styles/theme";
+import Meta from '~/lib/components/Meta';
+import customTheme from '~/lib/styles/theme';
 
 class MyDocument extends Document {
   static getInitialProps(ctx: DocumentContext) {

src/pages/api/hello.ts

@@ -1,10 +1,10 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-import type { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 const hello = (req: NextApiRequest, res: NextApiResponse) => {
   res.statusCode = 200;
-  res.json({ name: "John Doe" });
+  res.json({ name: 'John Doe' });
 };
 
 export default hello;

src/pages/index.ts

@@ -1,3 +1,3 @@
-import Home from "~/lib/pages/home";
+import Home from '~/lib/pages/home';
 
 export default Home;