From 42f9ffec95c1f9f5bd3a86ee25e9cf502e63a637 Mon Sep 17 00:00:00 2001 From: MehrdadAdabi <126083584+mehrdadAdabi@users.noreply.github.com> Date: Fri, 28 Nov 2025 13:55:10 +0330 Subject: [PATCH] feat: add Vazir font and refactor form components - Add vazir-font package for Persian/Arabic text support - Fix dropdown search to filter by value instead of name - Refactor select field in FormField component with simplified options mapping - Comment out dependent field fetching logic (WIP) - Update BaseDropdown props structure --- package-lock.json | 8 +++ package.json | 1 + src/core/components/base/base-drop-down.tsx | 2 +- src/core/components/base/form-field.tsx | 49 +++++++-------- src/index.css | 69 ++++++++++++++++++--- 5 files changed, 93 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index cee3a19..23e46f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "tailwind-merge": "^3.4.0", "tailwindcss": "^4.1.17", "tw-animate-css": "^1.4.0", + "vazir-font": "^30.1.0", "vite-plugin-pwa": "^1.1.0" }, "devDependencies": { @@ -7819,6 +7820,13 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/vazir-font": { + "version": "30.1.0", + "resolved": "https://registry.npmjs.org/vazir-font/-/vazir-font-30.1.0.tgz", + "integrity": "sha512-XN2Uprw/Q3QhAAApITykf+v0l4p4FpqvIh0h2XDSJRjwUiYeDpwQxECQF/93ZOCDO2t8haBi6BZZqO8sifYNRg==", + "deprecated": "vazir-font no longer supported. Use vazirmatn instead.", + "license": "OFL" + }, "node_modules/vite": { "version": "7.2.4", "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.4.tgz", diff --git a/package.json b/package.json index 1d5fb64..36915e0 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "tailwind-merge": "^3.4.0", "tailwindcss": "^4.1.17", "tw-animate-css": "^1.4.0", + "vazir-font": "^30.1.0", "vite-plugin-pwa": "^1.1.0" }, "devDependencies": { diff --git a/src/core/components/base/base-drop-down.tsx b/src/core/components/base/base-drop-down.tsx index 8d2bfab..f7cc53b 100644 --- a/src/core/components/base/base-drop-down.tsx +++ b/src/core/components/base/base-drop-down.tsx @@ -125,7 +125,7 @@ export const BaseDropdown = forwardRef( }; const filteredOptions = internalOptions.filter((option) => - option.name.toLowerCase().includes(searchQuery.toLowerCase()) + option.value.toLowerCase().includes(searchQuery.toLowerCase()) ); const hasError = !!error; diff --git a/src/core/components/base/form-field.tsx b/src/core/components/base/form-field.tsx index 4557e83..f03cc5a 100644 --- a/src/core/components/base/form-field.tsx +++ b/src/core/components/base/form-field.tsx @@ -2,9 +2,8 @@ import type { FieldDefinition } from "@/core/utils/dynamic-field.utils"; import { fieldTypeMap, FieldTypes, - FormService, normalizeInput, - regexValidators, + regexValidators } from "@/core/utils/dynamic-field.utils"; import { useEffect, useState, type ChangeEvent, type FC } from "react"; import { BaseDropdown } from "./base-drop-down"; @@ -254,31 +253,30 @@ const FormField: FC = ({ ); case "select": { - const isDependent = field.Parent_FieldID !== undefined; - const parentFieldValue = - isDependent && field.Parent_FieldID !== undefined - ? allFormValues[field.Parent_FieldID.toString()] - : undefined; - - const fetchDependentOptions = isDependent - ? async (inputValue: string) => { - if (!parentFieldValue || field.Parent_FieldID === undefined) - return []; // Don't fetch if parent value is not set or Parent_FieldID is undefined - const fetched = await FormService.fetchDependentOptions( - field.Parent_FieldID!, // Non-null assertion - parentFieldValue - ); - return fetched.filter((option) => - option.label.toLowerCase().includes(inputValue.toLowerCase()) - ); - } - : undefined; + const isDependent = field.Parent_FieldID !== 0; + // const parentFieldValue = + // isDependent && field.Parent_FieldID !== undefined + // ? allFormValues[field.Parent_FieldID.toString()] + // : undefined; + // debugger + // const fetchDependentOptions = isDependent + // ? async (inputValue: string) => { + // debugger + // if (!parentFieldValue || field.Parent_FieldID === undefined) + // return []; // Don't fetch if parent value is not set or Parent_FieldID is undefined + // const fetched = await FormService.fetchDependentOptions( + // field.Parent_FieldID!, // Non-null assertion + // parentFieldValue + // ); + // return fetched.filter((option) => + // option.label.toLowerCase().includes(inputValue.toLowerCase()) + // ); + // } + // : undefined; return ( ({ name: el.value, value: el.value }))} value={ field.parsedOptions?.find((opt) => opt.value === value)?.value || undefined @@ -286,8 +284,7 @@ const FormField: FC = ({ onChange={(optionValue: string) => onChange(optionValue)} className={`w-full p-2 border rounded-md text-right ${error ? "border-red-500" : "border-gray-300" }`} - fetchOptions={fetchDependentOptions} - disabled={isDependent && !parentFieldValue} // Disable if dependent and parent value is not set + disabled={isDependent} // Disable if dependent and parent value is not set /> ); } diff --git a/src/index.css b/src/index.css index 4dab71a..ed2ab9e 100644 --- a/src/index.css +++ b/src/index.css @@ -5,19 +5,69 @@ /* Persian Font Support */ @font-face { - font-family: "Vazir"; - src: url("https://cdn.jsdelivr.net/npm/vazir-font@31.1.0/dist/Vazir.woff2") - format("woff2"); + font-family: Vazir; + src: url('Vazir-Regular.eot'); + src: url('Vazir-Regular.eot?#iefix') format('embedded-opentype'), + url('Vazir-Regular.woff2') format('woff2'), + url('Vazir-Regular.woff') format('woff'), + url('Vazir-Regular.ttf') format('truetype'); font-weight: normal; - font-display: swap; + font-style: normal; } @font-face { - font-family: "Vazir"; - src: url("https://cdn.jsdelivr.net/npm/vazir-font@31.1.0/dist/Vazir-Bold.woff2") - format("woff2"); + font-family: Vazir; + src: url('Vazir-Bold.eot'); + src: url('Vazir-Bold.eot?#iefix') format('embedded-opentype'), + url('Vazir-Bold.woff2') format('woff2'), + url('Vazir-Bold.woff') format('woff'), + url('Vazir-Bold.ttf') format('truetype'); font-weight: bold; - font-display: swap; + font-style: normal; +} + +@font-face { + font-family: Vazir; + src: url('Vazir-Black.eot'); + src: url('Vazir-Black.eot?#iefix') format('embedded-opentype'), + url('Vazir-Black.woff2') format('woff2'), + url('Vazir-Black.woff') format('woff'), + url('Vazir-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: Vazir; + src: url('Vazir-Medium.eot'); + src: url('Vazir-Medium.eot?#iefix') format('embedded-opentype'), + url('Vazir-Medium.woff2') format('woff2'), + url('Vazir-Medium.woff') format('woff'), + url('Vazir-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: Vazir; + src: url('Vazir-Light.eot'); + src: url('Vazir-Light.eot?#iefix') format('embedded-opentype'), + url('Vazir-Light.woff2') format('woff2'), + url('Vazir-Light.woff') format('woff'), + url('Vazir-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: Vazir; + src: url('Vazir-Thin.eot'); + src: url('Vazir-Thin.eot?#iefix') format('embedded-opentype'), + url('Vazir-Thin.woff2') format('woff2'), + url('Vazir-Thin.woff') format('woff'), + url('Vazir-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; } :root { @@ -137,6 +187,7 @@ * { @apply border-border outline-ring/50; } + body { @apply bg-background text-foreground; margin: 0 auto; @@ -147,4 +198,4 @@ font-family: "Vazir", "IranSans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } -} +} \ No newline at end of file