chore: migrate to chakra-ui v3 (#151)

agustinusnathaniel · Oct 28, 2024 · 1a73290 · 1a73290
1 parent aa054ec
commit 1a73290
Show file tree

Hide file tree

Showing 27 changed files with 2,688 additions and 1,857 deletions.
diff --git a/next.config.ts b/next.config.ts
@@ -1,6 +1,9 @@
 import { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  experimental: {
+    optimizePackageImports: ["@chakra-ui/react"]
+  },
   reactStrictMode: true,
   eslint: {
     dirs: ['src'],

diff --git a/package.json b/package.json
@@ -28,17 +28,16 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@chakra-ui/next-js": "^2.2.0",
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^3.0.1",
     "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "framer-motion": "^11.5.4",
     "next": "^15.0.1",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0"
   },
   "devDependencies": {
+    "@chakra-ui/cli": "^3.0.1",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "19.5.0",
     "@commitlint/cz-commitlint": "19.5.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata, Viewport } from 'next';
 
-import { Layout } from '~/lib/layout';
-import { RootProviders } from '~/lib/providers/root';
+import { Provider } from '@/components/ui/provider';
+import { Layout } from '@/lib/layout';
 
 type RootLayoutProps = {
   children: React.ReactNode;
@@ -44,11 +44,11 @@ export const viewport: Viewport = {
 
 const RootLayout = ({ children }: RootLayoutProps) => {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body>
-        <RootProviders>
+        <Provider>
           <Layout>{children}</Layout>
-        </RootProviders>
+        </Provider>
       </body>
     </html>
   );

diff --git a/src/app/not-found.ts b/src/app/not-found.ts
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 
-import { Page404 } from '~/lib/pages/404';
+import { Page404 } from '@/lib/pages/404';
 
 export const metadata: Metadata = {
   title: '404 Not Found',

diff --git a/src/app/page.ts b/src/app/page.ts
@@ -1,3 +1,3 @@
-import { Home } from '~/lib/pages/home';
+import { Home } from '@/lib/pages/home';
 
 export default Home;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -0,0 +1,40 @@
+import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
+import {
+  AbsoluteCenter,
+  Button as ChakraButton,
+  Span,
+  Spinner,
+} from '@chakra-ui/react';
+import { forwardRef } from 'react';
+
+interface ButtonLoadingProps {
+  loading?: boolean;
+  loadingText?: React.ReactNode;
+}
+
+export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props;
+    return (
+      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
+        {loading && !loadingText ? (
+          <>
+            <AbsoluteCenter display="inline-flex">
+              <Spinner size="inherit" color="inherit" />
+            </AbsoluteCenter>
+            <Span opacity={0}>{children}</Span>
+          </>
+        ) : loading && loadingText ? (
+          <>
+            <Spinner size="inherit" color="inherit" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </ChakraButton>
+    );
+  }
+);
diff --git a/src/components/ui/color-mode.tsx b/src/components/ui/color-mode.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import type { IconButtonProps } from '@chakra-ui/react';
+import { ClientOnly, IconButton, Skeleton } from '@chakra-ui/react';
+import { ThemeProvider, useTheme } from 'next-themes';
+import type { ThemeProviderProps } from 'next-themes/dist/types';
+import { forwardRef } from 'react';
+import { LuMoon, LuSun } from 'react-icons/lu';
+
+export function ColorModeProvider(props: ThemeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  );
+}
+
+export function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+  };
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  };
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode();
+  return colorMode === 'light' ? light : dark;
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode();
+  return colorMode === 'light' ? <LuSun /> : <LuMoon />;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface ColorModeButtonProps extends Omit<IconButtonProps, 'aria-label'> {}
+
+export const ColorModeButton = forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode();
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: '5',
+            height: '5',
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  );
+});
diff --git a/src/components/ui/provider.tsx b/src/components/ui/provider.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { ChakraProvider } from '@chakra-ui/react';
+
+import customTheme from '@/lib/styles/theme';
+
+import { ColorModeProvider } from './color-mode';
+
+export function Provider(props: React.PropsWithChildren) {
+  return (
+    <ChakraProvider value={customTheme}>
+      <ColorModeProvider>{props.children}</ColorModeProvider>
+    </ChakraProvider>
+  );
+}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react';
+import { forwardRef } from 'react';
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean;
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  content: React.ReactNode;
+  contentProps?: ChakraTooltip.ContentProps;
+  disabled?: boolean;
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props;
+
+    if (disabled) return children;
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    );
+  }
+);
diff --git a/src/lib/components/chakra-provider.tsx b/src/lib/components/chakra-provider.tsx
diff --git a/src/lib/layout/components/footer.tsx b/src/lib/layout/components/footer.tsx
@@ -5,7 +5,7 @@ export const Footer = () => {
     <Flex as="footer" width="full" justifyContent="center">
       <Text fontSize="sm">
         {new Date().getFullYear()} -{' '}
-        <Link href="https://sznm.dev" isExternal rel="noopener noreferrer">
+        <Link href="https://sznm.dev" target="_blank" rel="noopener noreferrer">
           sznm.dev
         </Link>
       </Text>

diff --git a/src/lib/layout/components/header.tsx b/src/lib/layout/components/header.tsx
@@ -1,12 +1,12 @@
 import { Box, Flex } from '@chakra-ui/react';
 
-import { ThemeToggle } from './theme-toggle';
+import { ColorModeButton } from '@/components/ui/color-mode';
 
 export const Header = () => {
   return (
     <Flex as="header" width="full" align="center">
       <Box marginLeft="auto">
-        <ThemeToggle />
+        <ColorModeButton />
       </Box>
     </Flex>
   );

diff --git a/src/lib/layout/components/theme-toggle.tsx b/src/lib/layout/components/theme-toggle.tsx
diff --git a/src/lib/pages/404/index.tsx b/src/lib/pages/404/index.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@/components/ui/button';
 import {
   Box,
-  Button,
   Heading,
   Image,
   Text,
@@ -21,7 +21,7 @@ export const Page404 = () => {
       <Text textAlign="center" fontSize="xs" color="gray">
         <ChakraLink
           href="https://stories.freepik.com/web"
-          isExternal
+          target="_blank"
           rel="noopener noreferrer"
         >
           Illustration by Freepik Stories
@@ -37,8 +37,8 @@ export const Page404 = () => {
           <Text fontSize="sm" color="gray">
             It&apos;s Okay!
           </Text>
-          <Button as={Link} href="/" size="sm">
-            Let&apos;s Head Back
+          <Button asChild size="sm">
+            <Link href="/">Let&apos;s Head Back</Link>
           </Button>
         </Box>
       </Box>

diff --git a/src/lib/pages/home/components/cta-section.tsx b/src/lib/pages/home/components/cta-section.tsx
@@ -10,7 +10,7 @@ export const CTASection = () => {
         <Flex marginY={4} justifyContent="center" gap={2}>
           <Link
             aria-label="Deploy to Vercel"
-            isExternal
+            target="_blank"
             rel="noopener noreferrer"
             href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsozonome%2Fnextarter-chakra"
           >
@@ -23,7 +23,7 @@ export const CTASection = () => {
 
           <Link
             aria-label="Deploy to Netlify"
-            isExternal
+            target="_blank"
             rel="noopener noreferrer"
             href="https://app.netlify.com/start/deploy?repository=https://github.com/sozonome/nextarter-chakra"
           >
@@ -37,22 +37,19 @@ export const CTASection = () => {
       </Box>
 
       <Flex justifyContent="center" alignItems="center" gap={2}>
-        <Button
-          as="a"
-          href="https://github.com/sozonome/nextarter-chakra/generate"
-          target="_blank"
-          size="sm"
-        >
-          Use This Template
+        <Button asChild size="sm">
+          <a
+            href="https://github.com/sozonome/nextarter-chakra/generate"
+            target="_blank"
+          >
+            Use This Template
+          </a>
         </Button>
-        <Button
-          as="a"
-          href={repoLink}
-          target="_blank"
-          leftIcon={<AiFillGithub />}
-          size="sm"
-        >
-          Open in Github
+        <Button asChild size="sm">
+          <a href={repoLink} target="_blank">
+            <AiFillGithub />
+            Open in Github
+          </a>
         </Button>
       </Flex>
     </Box>