✨ feat(chakra): added generate custom theme typings

paalamugan · Aug 28, 2023 · 21e83a1 · 21e83a1
1 parent 42c5892
commit 21e83a1
Show file tree

Hide file tree

Showing 16 changed files with 71 additions and 194 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,6 +1,6 @@
 import type { Preview } from '@storybook/react';
 
-import theme from '../src/styles/theme';
+import { theme } from '../src/styles/theme';
 
 const preview: Preview = {
   parameters: {

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies, import/extensions */
-import './src/libs/Env.mjs';
+import './src/libs/env.mjs';
 import withBundleAnalyzer from '@next/bundle-analyzer';
 
 const bundleAnalyzer = withBundleAnalyzer({
@@ -9,7 +9,7 @@ const bundleAnalyzer = withBundleAnalyzer({
 /** @type {import('next').NextConfig} */
 export default bundleAnalyzer({
   eslint: {
-    dirs: ['.'],
+    dirs: ['src'],
   },
   poweredByHeader: false,
   basePath: '',

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "build-stats": "cross-env ANALYZE=true yarn build",
     "clean": "rimraf .next .swc out coverage",
     "lint": "next lint",
-    "format": "next lint --fix && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore",
+    "format": "yarn lint --fix && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore",
     "check-types": "tsc --noEmit --pretty && tsc --project cypress --noEmit --pretty",
     "test": "jest",
     "db:generate": "drizzle-kit generate:sqlite",
@@ -28,7 +28,8 @@
     "postbuild": "next-sitemap",
     "release": "standard-version",
     "commit": "git-cz",
-    "build:tokens": "chakra-cli tokens packages/components/theme/src/index.ts --out packages/core/styled-system/dist/theming.types.d.ts"
+    "postinstall": "yarn gen:theme",
+    "gen:theme": "npx @chakra-ui/cli tokens ./src/styles/theme/index.ts"
   },
   "dependencies": {
     "@chakra-ui/next-js": "^2.1.5",
@@ -115,7 +116,7 @@
     "standard-version": "^9.5.0",
     "start-server-and-test": "^2.0.0",
     "storybook": "^7.3.2",
-    "typescript": "5.2.2"
+    "typescript": "~5.1.0"
   },
   "repository": {
     "type": "git",

diff --git a/src/app/api/guestbook/route.ts b/src/app/api/guestbook/route.ts
@@ -2,7 +2,7 @@ import { eq } from 'drizzle-orm';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
 
-import { db } from '@/libs/DB';
+import { db } from '@/libs/db';
 import { guestbookTable } from '@/models/Schema';
 import {
   DeleteGuestbookSchema,

diff --git a/src/app/guestbook/page.tsx b/src/app/guestbook/page.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import { DeleteGuestbookEntry } from '@/components/DeleteGuestbookEntry';
 import { EditableGuestbookEntry } from '@/components/EditableGuestbookEntry';
 import { GuestbookForm } from '@/components/GuestbookForm';
-import { db } from '@/libs/DB';
+import { db } from '@/libs/db';
 import { guestbookTable } from '@/models/Schema';
 import { Main } from '@/templates/Main';
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import '@/styles/global.css';
 
 import type { Metadata } from 'next';
 
-import { ColorModeScript } from '@/components/chakra-ui';
 import { Providers } from '@/providers/providers';
 
 export const metadata: Metadata = {
@@ -40,7 +39,6 @@ export default function RootLayout({
   return (
     <html lang="en" data-theme="light">
       <body>
-        <ColorModeScript type="cookie" nonce="testing" />
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/src/styles/theme/fonts/index.ts → src/fonts/index.ts b/src/styles/theme/fonts/index.ts → src/fonts/index.ts
diff --git a/src/libs/DB.ts → src/libs/db.ts b/src/libs/DB.ts → src/libs/db.ts
@@ -2,7 +2,7 @@ import { createClient } from '@libsql/client';
 import { drizzle } from 'drizzle-orm/libsql';
 import { migrate } from 'drizzle-orm/libsql/migrator';
 
-import { Env } from './Env.mjs';
+import { Env } from './env.mjs';
 
 const client = createClient({
   url: Env.DATABASE_URL,

diff --git a/src/libs/Env.mjs → src/libs/env.mjs b/src/libs/Env.mjs → src/libs/env.mjs
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -3,12 +3,22 @@ import '@/styles/global.css';
 import { ChakraProvider } from '@chakra-ui/react';
 import type { AppProps } from 'next/app';
 
-import theme from '@/styles/theme';
+import { inter } from '@/fonts';
+import { theme } from '@/styles/theme';
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
-  <ChakraProvider theme={theme}>
-    <Component {...pageProps} />
-  </ChakraProvider>
+  <>
+    <style jsx global>
+      {`
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+        }
+      `}
+    </style>
+    <ChakraProvider theme={theme}>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  </>
 );
 
 export default MyApp;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,7 +1,7 @@
 import { ColorModeScript } from '@chakra-ui/react';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 
-import theme from '@/styles/theme';
+import { theme } from '@/styles/theme';
 import { AppConfig } from '@/utils/AppConfig';
 
 // Need to create a custom _document because i18n support is not compatible with `next export`.

diff --git a/src/providers/providers.tsx b/src/providers/providers.tsx
@@ -4,17 +4,27 @@ import { CacheProvider } from '@chakra-ui/next-js';
 import { ChakraProvider, cookieStorageManager } from '@chakra-ui/react';
 import type { FC } from 'react';
 
-import theme from '@/styles/theme';
+import { inter } from '@/fonts';
+import { theme } from '@/styles/theme';
 
 interface ProvidersProps {
   children: React.ReactNode;
 }
 export const Providers: FC<ProvidersProps> = ({ children }) => {
   return (
-    <CacheProvider>
-      <ChakraProvider theme={theme} colorModeManager={cookieStorageManager}>
-        {children}
-      </ChakraProvider>
-    </CacheProvider>
+    <>
+      <style jsx global>
+        {`
+          :root {
+            --font-inter: ${inter.style.fontFamily};
+          }
+        `}
+      </style>
+      <CacheProvider>
+        <ChakraProvider theme={theme} colorModeManager={cookieStorageManager}>
+          {children}
+        </ChakraProvider>
+      </CacheProvider>
+    </>
   );
 };
diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
@@ -3,19 +3,22 @@ import { extendTheme, withDefaultColorScheme } from '@chakra-ui/react';
 import { CardComponent } from './additions/card/Card';
 import { PanelContainerComponent } from './additions/layout/PanelContainer';
 import { components } from './components';
-import { inter } from './fonts';
 import { foundations } from './foundations';
 import { globalStyles } from './styles';
 
-const theme = extendTheme(
+const config = {
+  initialColorMode: 'light',
+};
+
+const fonts = {
+  heading: 'var(--font-inter)',
+  body: 'var(--font-inter)',
+};
+
+export const theme = extendTheme(
   {
-    fonts: {
-      heading: inter.style.fontFamily,
-    },
-    config: {
-      cssVarPrefix: 'app',
-      initialColorMode: 'light',
-    },
+    fonts,
+    config,
     ...foundations,
     components,
   },
@@ -24,5 +27,3 @@ const theme = extendTheme(
   CardComponent,
   PanelContainerComponent
 );
-
-export default theme;
diff --git a/src/styles/theme/styles.ts b/src/styles/theme/styles.ts
@@ -1,13 +1,8 @@
-import { inter } from './fonts';
-
 export const globalStyles = {
   styles: {
     global: () => ({
-      body: {
-        fontFamily: inter.style.fontFamily,
-      },
       html: {
-        fontFamily: inter.style.fontFamily,
+        fontFamily: 'var(--font-inter)',
       },
     }),
   },

diff --git a/tsconfig.json b/tsconfig.json
@@ -10,32 +10,27 @@
     "alwaysStrict": true,
     "strictNullChecks": true,
     "noUncheckedIndexedAccess": true,
-
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "allowUnreachableCode": false,
     "noFallthroughCasesInSwitch": true,
-
     "target": "es2017",
     "outDir": "out",
     "declaration": true,
     "sourceMap": true,
-
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-
     "jsx": "preserve",
     "noEmit": true,
     "isolatedModules": true,
     "incremental": true,
-
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
@@ -54,6 +49,6 @@
     "**/*.tsx",
     ".storybook/*.ts",
     ".next/types/**/*.ts",
-    "src/libs/Env.mjs"
+    "src/libs/env.mjs"
   ]
 }