Halaman utama Jelajahi Bantuan
Masuk
mohamad-salimi
/
talentyar-admin
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

feat: allow changing font family in setting

* add appearance features

* feat: add Google Fonts integration and refactor font handling

* chore: format codes

* refactor: improve type safety and configurability

- update formatting to fix Prettier issues
- improve type safety and allow easier configuration
- add safelist inside `tailwind.config.js` to prevent font-related class purging

---------

Co-authored-by: satnaing <satnaingdev@gmail.com>
ali akrem barka 1 tahun lalu
induk
611c186be0
melakukan
787b46688b
6 mengubah file dengan 118 tambahan dan 12 penghapusan
Unified View Tampilkan Statistik Diff
  1. 8 0
      index.html
  2. 28 0
      src/config/fonts.ts
  3. 48 0
      src/context/font-context.tsx
  4. 23 11
      src/features/settings/appearance/appearance-form.tsx
  5. 4 1
      src/main.tsx
  6. 7 0
      tailwind.config.js

+ 8 - 0
index.html
Tampilan Berkas 

@@ -40,6 +40,14 @@
 
       content="https://shadcn-admin.netlify.app/images/shadcn-admin.png"
 
       content="https://shadcn-admin.netlify.app/images/shadcn-admin.png"
 
     />
 
     />
 
 
 
+    <!-- font family -->
 
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
+    <link
 
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap"
 
+      rel="stylesheet"
 
+    />
 
+
 
     <meta name="theme-color" content="#fff" />
 
     <meta name="theme-color" content="#fff" />
 
   </head>
 
   </head>
 
   <body class="group/body">
 
   <body class="group/body">

+ 28 - 0
src/config/fonts.ts
Tampilan Berkas 

@@ -0,0 +1,28 @@
 
+/**
 
+ * List of available font names (visit the url`/settings/appearance`).
 
+ * This array is used to generate Tailwind's `safelist` inside 'tailwind.config.js' and 'appearance-form.tsx'
 
+ * to prevent dynamic font classes (e.g., `font-inter`, `font-manrope`) from being removed during purging.
 
+ *
 
+ * 📝 How to Add a New Font:
 
+ * 1. Add the font name here.
 
+ * 2. Update the `<link>` tag in 'index.html' to include the new font from Google Fonts (or any other source).
 
+ * 3. Add new fontFamily 'tailwind.config.js'
 
+ *
 
+ * Example:
 
+ * fonts.ts           → Add 'roboto' to this array.
 
+ * index.html         → Add Google Fonts link for Roboto.
 
+ * tailwind.config.js  → Add the new font inside `theme.extend.fontFamily`.
 
+ * ```ts
 
+ * theme: {
 
+ *   // other configs
 
+ *   extend: {
 
+ *      fontFamily: {
 
+ *        inter: ['Inter', ...fontFamily.sans],
 
+ *        manrope: ['Manrope', ...fontFamily.sans],
 
+ *        roboto: ['Roboto', ...fontFamily.sans], // Add new font here
 
+ *      }
 
+ *   }
 
+ * }
 
+ * ```
 
+ */
 
+export const fonts = ['inter', 'manrope', 'system'] as const

+ 48 - 0
src/context/font-context.tsx
Tampilan Berkas 

@@ -0,0 +1,48 @@
 
+import React, { createContext, useContext, useEffect, useState } from 'react'
 
+import { fonts } from '@/config/fonts'
 
+
 
+type Font = (typeof fonts)[number]
 
+
 
+interface FontContextType {
 
+  font: Font
 
+  setFont: (font: Font) => void
 
+}
 
+
 
+const FontContext = createContext<FontContextType | undefined>(undefined)
 
+
 
+export const FontProvider: React.FC<{ children: React.ReactNode }> = ({
 
+  children,
 
+}) => {
 
+  const [font, _setFont] = useState<Font>(() => {
 
+    const savedFont = localStorage.getItem('font')
 
+    return fonts.includes(savedFont as Font) ? (savedFont as Font) : fonts[0]
 
+  })
 
+
 
+  useEffect(() => {
 
+    const applyFont = (font: string) => {
 
+      const root = document.documentElement
 
+      root.classList.forEach((cls) => {
 
+        if (cls.startsWith('font-')) root.classList.remove(cls)
 
+      })
 
+      root.classList.add(`font-${font}`)
 
+    }
 
+
 
+    applyFont(font)
 
+  }, [font])
 
+
 
+  const setFont = (font: Font) => {
 
+    localStorage.setItem('font', font)
 
+    _setFont(font)
 
+  }
 
+
 
+  return <FontContext value={{ font, setFont }}>{children}</FontContext>
 
+}
 
+
 
+// eslint-disable-next-line react-refresh/only-export-components
 
+export const useFont = () => {
 
+  const context = useContext(FontContext)
 
+  if (!context) {
 
+    throw new Error('useFont must be used within a FontProvider')
 
+  }
 
+  return context
 
+}

+ 23 - 11
src/features/settings/appearance/appearance-form.tsx
Tampilan Berkas 

@@ -2,7 +2,10 @@ import { z } from 'zod'
 
 import { useForm } from 'react-hook-form'
 
 import { useForm } from 'react-hook-form'
 
 import { ChevronDownIcon } from '@radix-ui/react-icons'
 
 import { ChevronDownIcon } from '@radix-ui/react-icons'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 
+import { fonts } from '@/config/fonts'
 
 import { cn } from '@/lib/utils'
 
 import { cn } from '@/lib/utils'
 
+import { useFont } from '@/context/font-context'
 
+import { useTheme } from '@/context/theme-context'
 
 import { toast } from '@/hooks/use-toast'
 
 import { toast } from '@/hooks/use-toast'
 
 import { Button, buttonVariants } from '@/components/ui/button'
 
 import { Button, buttonVariants } from '@/components/ui/button'
 
 import {
 
 import {
 
@@ -20,7 +23,7 @@ const appearanceFormSchema = z.object({
 
   theme: z.enum(['light', 'dark'], {
 
   theme: z.enum(['light', 'dark'], {
 
     required_error: 'Please select a theme.',
 
     required_error: 'Please select a theme.',
 
   }),
 
   }),
 
-  font: z.enum(['inter', 'manrope', 'system'], {
 
+  font: z.enum(fonts, {
 
     invalid_type_error: 'Select a font',
 
     invalid_type_error: 'Select a font',
 
     required_error: 'Please select a font.',
 
     required_error: 'Please select a font.',
 
   }),
 
   }),
 
@@ -28,18 +31,25 @@ const appearanceFormSchema = z.object({
 
 
 
 type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
 
 type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
 
 
 
-// This can come from your database or API.
 
-const defaultValues: Partial<AppearanceFormValues> = {
 
-  theme: 'light',
 
-}
 
-
 
 export function AppearanceForm() {
 
 export function AppearanceForm() {
 
+  const { font, setFont } = useFont()
 
+  const { theme, setTheme } = useTheme()
 
+
 
+  // This can come from your database or API.
 
+  const defaultValues: Partial<AppearanceFormValues> = {
 
+    theme: theme as 'light' | 'dark',
 
+    font,
 
+  }
 
+
 
   const form = useForm<AppearanceFormValues>({
 
   const form = useForm<AppearanceFormValues>({
 
     resolver: zodResolver(appearanceFormSchema),
 
     resolver: zodResolver(appearanceFormSchema),
 
     defaultValues,
 
     defaultValues,
 
   })
 
   })
 
 
 
   function onSubmit(data: AppearanceFormValues) {
 
   function onSubmit(data: AppearanceFormValues) {
 
+    if (data.font != font) setFont(data.font)
 
+    if (data.theme != theme) setTheme(data.theme)
 
+
 
     toast({
 
     toast({
 
       title: 'You submitted the following values:',
 
       title: 'You submitted the following values:',
 
       description: (
 
       description: (
 
@@ -64,18 +74,20 @@ export function AppearanceForm() {
 
                   <select
 
                   <select
 
                     className={cn(
 
                     className={cn(
 
                       buttonVariants({ variant: 'outline' }),
 
                       buttonVariants({ variant: 'outline' }),
 
-                      'w-[200px] appearance-none font-normal'
 
+                      'w-[200px] appearance-none font-normal capitalize'
 
                     )}
 
                     )}
 
                     {...field}
 
                     {...field}
 
                   >
 
                   >
 
-                    <option value='inter'>Inter</option>
 
-                    <option value='manrope'>Manrope</option>
 
-                    <option value='system'>System</option>
 
+                    {fonts.map((font) => (
 
+                      <option key={font} value={font}>
 
+                        {font}
 
+                      </option>
 
+                    ))}
 
                   </select>
 
                   </select>
 
                 </FormControl>
 
                 </FormControl>
 
                 <ChevronDownIcon className='absolute right-3 top-2.5 h-4 w-4 opacity-50' />
 
                 <ChevronDownIcon className='absolute right-3 top-2.5 h-4 w-4 opacity-50' />
 
               </div>
 
               </div>
 
-              <FormDescription>
 
+              <FormDescription className='font-manrope'>
 
                 Set the font you want to use in the dashboard.
 
                 Set the font you want to use in the dashboard.
 
               </FormDescription>
 
               </FormDescription>
 
               <FormMessage />
 
               <FormMessage />

+ 4 - 1
src/main.tsx
Tampilan Berkas 

@@ -10,6 +10,7 @@ import { RouterProvider, createRouter } from '@tanstack/react-router'
 
 import { useAuthStore } from '@/stores/authStore'
 
 import { useAuthStore } from '@/stores/authStore'
 
 import { handleServerError } from '@/utils/handle-server-error'
 
 import { handleServerError } from '@/utils/handle-server-error'
 
 import { toast } from '@/hooks/use-toast'
 
 import { toast } from '@/hooks/use-toast'
 
+import { FontProvider } from './context/font-context'
 
 import { ThemeProvider } from './context/theme-context'
 
 import { ThemeProvider } from './context/theme-context'
 
 import './index.css'
 
 import './index.css'
 
 // Generated Routes
 
 // Generated Routes
 
@@ -98,7 +99,9 @@ if (!rootElement.innerHTML) {
 
     <StrictMode>
 
     <StrictMode>
 
       <QueryClientProvider client={queryClient}>
 
       <QueryClientProvider client={queryClient}>
 
         <ThemeProvider defaultTheme='light' storageKey='vite-ui-theme'>
 
         <ThemeProvider defaultTheme='light' storageKey='vite-ui-theme'>
 
-          <RouterProvider router={router} />
 
+          <FontProvider>
 
+            <RouterProvider router={router} />
 
+          </FontProvider>
 
         </ThemeProvider>
 
         </ThemeProvider>
 
       </QueryClientProvider>
 
       </QueryClientProvider>
 
     </StrictMode>
 
     </StrictMode>

+ 7 - 0
tailwind.config.js
Tampilan Berkas 

@@ -1,9 +1,12 @@
 
 import tailwindCssAnimate from 'tailwindcss-animate'
 
 import tailwindCssAnimate from 'tailwindcss-animate'
 
+import { fontFamily } from 'tailwindcss/defaultTheme'
 
+import { fonts } from './src/config/fonts'
 
 
 
 /** @type {import('tailwindcss').Config} */
 
 /** @type {import('tailwindcss').Config} */
 
 export default {
 
 export default {
 
   darkMode: ['class'],
 
   darkMode: ['class'],
 
   content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
 
   content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
 
+  safelist: fonts.map((font) => `font-${font}`),
 
   theme: {
 
   theme: {
 
     container: {
 
     container: {
 
       center: 'true',
 
       center: 'true',
 
@@ -13,6 +16,10 @@ export default {
 
       },
 
       },
 
     },
 
     },
 
     extend: {
 
     extend: {
 
+      fontFamily: {
 
+        inter: ['Inter', ...fontFamily.sans],
 
+        manrope: ['Manrope', ...fontFamily.sans],
 
+      },
 
       borderRadius: {
 
       borderRadius: {
 
         lg: 'var(--radius)',
 
         lg: 'var(--radius)',
 
         md: 'calc(var(--radius) - 2px)',
 
         md: 'calc(var(--radius) - 2px)',