Skip to content

Commit c144f9e

Browse files
hrhvhrhv
committed
fix: move to chakraAny
1 parent 52b1518 commit c144f9e

6 files changed

Lines changed: 56 additions & 51 deletions

File tree

‎packages/imagekit-editor-dev/src/components/header/SettingsModal.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ import { applyTemplateStorageAccessFailure } from "../../storage/templateAccessE
1111
import type { TemplateRecord } from "../../storage/types"
1212
import { useEditorStore } from "../../store"
1313
import { formatTemplateNameForUI } from "../../utils"
14+
import { chakraAny } from "../../utils/chakraAny"
1415

1516
// ---------------------------------------------------------------------------
1617
// Type casts — Chakra's strict generic signatures conflict with our JSX usage
1718
// ---------------------------------------------------------------------------
18-
const FlexAny = Flex as unknown as React.ElementType
19-
const TextAny = Text as unknown as React.ElementType
20-
const IconButtonAny = IconButton as unknown as React.ElementType
21-
const InputAny = Input as unknown as React.ElementType
19+
const FlexAny = chakraAny(Flex)
20+
const TextAny = chakraAny(Text)
21+
const IconButtonAny = chakraAny(IconButton)
22+
const InputAny = chakraAny(Input)
2223

2324
// ---------------------------------------------------------------------------
2425
// Props

‎packages/imagekit-editor-dev/src/components/header/TemplateNameInput.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import type React from "react"
33
import { useEffect, useRef, useState } from "react"
44
import { useEditorStore } from "../../store"
55
import { formatTemplateNameForUI } from "../../utils"
6+
import { chakraAny } from "../../utils/chakraAny"
67

78
const UNTITLED = "Untitled Template"
8-
const InputAny = Input as unknown as React.ElementType
9+
const InputAny = chakraAny(Input)
910

1011
export function TemplateNameInput() {
1112
const templateNameRaw = useEditorStore((s) => s.templateName)

‎packages/imagekit-editor-dev/src/components/header/TemplateStatus.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,20 @@ import {
1414
import { IoMdCloudDone } from "@react-icons/all-files/io/IoMdCloudDone"
1515
import { MdSync } from "@react-icons/all-files/md/MdSync"
1616
import { MdSyncProblem } from "@react-icons/all-files/md/MdSyncProblem"
17-
import type React from "react"
1817
import { useEffect, useRef, useState } from "react"
1918
import { useTemplateStorage } from "../../context/TemplateStorageContext"
2019
import { useSaveTemplate } from "../../hooks/useSaveTemplate"
2120
import { useEditorStore } from "../../store"
21+
import { chakraAny } from "../../utils/chakraAny"
2222

2323
const NOTIFICATION_DURATION_MS = 3000
2424

25-
const TextAny = Text as unknown as React.FC<Record<string, unknown>>
26-
const TextAny2 = Text as unknown as React.FC<Record<string, unknown>>
27-
const FlexAny = Flex as unknown as React.FC<Record<string, unknown>>
28-
const PopoverContentAny = PopoverContent as unknown as React.FC<
29-
Record<string, unknown>
30-
>
31-
const TooltipAny = Tooltip as unknown as React.FC<Record<string, unknown>>
32-
const PopoverBodyAny = PopoverBody as unknown as React.FC<
33-
Record<string, unknown>
34-
>
25+
const TextAny = chakraAny(Text)
26+
const TextAny2 = chakraAny(Text)
27+
const FlexAny = chakraAny(Flex)
28+
const PopoverContentAny = chakraAny(PopoverContent)
29+
const TooltipAny = chakraAny(Tooltip)
30+
const PopoverBodyAny = chakraAny(PopoverBody)
3531

3632
export function TemplateStatus() {
3733
const syncStatus = useEditorStore((s) => s.syncStatus)

‎packages/imagekit-editor-dev/src/components/header/TemplatesDropdown.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,27 +33,22 @@ import type { TemplateRecord } from "../../storage"
3333
import { applyTemplateStorageAccessFailure } from "../../storage/templateAccessError"
3434
import { useEditorStore } from "../../store"
3535
import { formatTemplateNameForUI, truncateTemplateName } from "../../utils"
36-
37-
const PopoverContentAny = PopoverContent as unknown as React.FC<
38-
Record<string, unknown>
39-
>
40-
41-
const PopoverBodyAny = PopoverBody as unknown as React.FC<
42-
Record<string, unknown>
43-
>
44-
45-
const BoxAny = Box as unknown as React.FC<Record<string, unknown>>
46-
const TextAny = Text as unknown as React.ElementType
47-
const FlexAny = Flex as unknown as React.ElementType
48-
const DividerAny = Divider as unknown as React.ElementType
49-
const ButtonAny = Button as unknown as React.ElementType
50-
const IconAny = Icon as unknown as React.ElementType
51-
const InputGroupAny = InputGroup as unknown as React.ElementType
52-
const InputLeftElementAny = InputLeftElement as unknown as React.ElementType
53-
const InputAny = Input as unknown as React.ElementType
54-
const BadgeAny = Badge as unknown as React.ElementType
55-
const AvatarAny = Avatar as unknown as React.ElementType
56-
const SpinnerAny = Spinner as unknown as React.ElementType
36+
import { chakraAny } from "../../utils/chakraAny"
37+
38+
const PopoverContentAny = chakraAny(PopoverContent)
39+
const PopoverBodyAny = chakraAny(PopoverBody)
40+
const BoxAny = chakraAny(Box)
41+
const TextAny = chakraAny(Text)
42+
const FlexAny = chakraAny(Flex)
43+
const DividerAny = chakraAny(Divider)
44+
const ButtonAny = chakraAny(Button)
45+
const IconAny = chakraAny(Icon)
46+
const InputGroupAny = chakraAny(InputGroup)
47+
const InputLeftElementAny = chakraAny(InputLeftElement)
48+
const InputAny = chakraAny(Input)
49+
const BadgeAny = chakraAny(Badge)
50+
const AvatarAny = chakraAny(Avatar)
51+
const SpinnerAny = chakraAny(Spinner)
5752

5853
const MAX_VISIBLE = 5
5954

‎packages/imagekit-editor-dev/src/components/templates/TemplatesLibraryView.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { useDebounce } from "../../hooks/useDebounce"
3636
import type { TemplateRecord } from "../../storage"
3737
import { useEditorStore } from "../../store"
3838
import { formatTemplateNameForUI, truncateTemplateName } from "../../utils"
39+
import { chakraAny } from "../../utils/chakraAny"
3940
import FilterChipsField from "../common/FilterChipsField"
4041
import MultiSelectListField from "../common/MultiSelectListField"
4142
import { SettingsModal } from "../header/SettingsModal"
@@ -44,20 +45,20 @@ interface Props {
4445
onClose(): void
4546
}
4647

47-
const FlexAny = Flex as unknown as React.ElementType
48-
const TextAny = Text as unknown as React.ElementType
49-
const AvatarAny = Avatar as unknown as React.ElementType
50-
const ButtonAny = Button as unknown as React.ElementType
51-
const SpinnerAny = Spinner as unknown as React.ElementType
52-
const BadgeAny = Badge as unknown as React.ElementType
53-
const InputGroupAny = InputGroup as unknown as React.ElementType
54-
const InputLeftElementAny = InputLeftElement as unknown as React.ElementType
55-
const InputAny = Input as unknown as React.ElementType
56-
const IconAny = Icon as unknown as React.ElementType
57-
const PopoverContentAny = PopoverContent as unknown as React.ElementType
58-
const PopoverBodyAny = PopoverBody as unknown as React.ElementType
59-
const DividerAny = Divider as unknown as React.ElementType
60-
const TooltipAny = Tooltip as unknown as React.ElementType
48+
const FlexAny = chakraAny(Flex)
49+
const TextAny = chakraAny(Text)
50+
const AvatarAny = chakraAny(Avatar)
51+
const ButtonAny = chakraAny(Button)
52+
const SpinnerAny = chakraAny(Spinner)
53+
const BadgeAny = chakraAny(Badge)
54+
const InputGroupAny = chakraAny(InputGroup)
55+
const InputLeftElementAny = chakraAny(InputLeftElement)
56+
const InputAny = chakraAny(Input)
57+
const IconAny = chakraAny(Icon)
58+
const PopoverContentAny = chakraAny(PopoverContent)
59+
const PopoverBodyAny = chakraAny(PopoverBody)
60+
const DividerAny = chakraAny(Divider)
61+
const TooltipAny = chakraAny(Tooltip)
6162

6263
function formatRelativeTime(ts: number): string {
6364
const now = Date.now()

‎packages/imagekit-editor-dev/src/utils/chakraAny.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type React from "react"
2+
3+
/**
4+
* Chakra components sometimes have strict generic/polymorphic typings that can
5+
* get in the way of our JSX usage (especially `as="button"` and certain prop
6+
* combinations). This helper centralizes the escape hatch so individual
7+
* components don't need repeated `as unknown as React.ElementType` boilerplate.
8+
*/
9+
export function chakraAny(component: unknown): React.ElementType {
10+
return component as unknown as React.ElementType
11+
}

0 commit comments

Comments
 (0)