From 16776ffb3708d4e8da56d4eae2f662f2af3af9c9 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Thu, 27 Jun 2024 17:35:07 +0300
Subject: [PATCH] feat(icon): icon name extendable type (#4045)

---
 packages/ui/src/components/va-icon/VaIcon.vue |  4 +++-
 packages/ui/src/components/va-icon/index.ts   |  2 ++
 packages/ui/src/components/va-icon/types.ts   | 23 +++++++++++++++++++
 .../services/icon/presets/vuestic-aliases.ts  | 10 ++++----
 packages/ui/src/services/icon/types.ts        |  6 ++---
 .../src/services/icon/types/define-aliases.ts |  9 ++++++++
 6 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/src/components/va-icon/types.ts
 create mode 100644 packages/ui/src/services/icon/types/define-aliases.ts

diff --git a/packages/ui/src/components/va-icon/VaIcon.vue b/packages/ui/src/components/va-icon/VaIcon.vue
index eb8a6d1a3f..00d26f48cf 100644
--- a/packages/ui/src/components/va-icon/VaIcon.vue
+++ b/packages/ui/src/components/va-icon/VaIcon.vue
@@ -18,6 +18,8 @@
 
 <script lang="ts" setup>
 import { PropType, computed, useAttrs } from 'vue'
+import { AnyStringPropType } from '../../utils/types/prop-type'
+import { VaIconName } from './types'
 
 import {
   useComponentPresetProp,
@@ -34,7 +36,7 @@ defineOptions({
 const props = defineProps({
   ...useSizeProps,
   ...useComponentPresetProp,
-  name: { type: String, default: '' },
+  name: { type: String as AnyStringPropType<VaIconName>, default: '' },
   tag: { type: String },
   component: { type: Object as PropType<any> },
   color: { type: String },
diff --git a/packages/ui/src/components/va-icon/index.ts b/packages/ui/src/components/va-icon/index.ts
index 38f0ed6cab..35840481df 100644
--- a/packages/ui/src/components/va-icon/index.ts
+++ b/packages/ui/src/components/va-icon/index.ts
@@ -2,3 +2,5 @@ import withConfigTransport from '../../services/config-transport/withConfigTrans
 import _VaIcon from './VaIcon.vue'
 
 export const VaIcon = withConfigTransport(_VaIcon)
+
+export * from './types'
diff --git a/packages/ui/src/components/va-icon/types.ts b/packages/ui/src/components/va-icon/types.ts
new file mode 100644
index 0000000000..c16ebfa6a8
--- /dev/null
+++ b/packages/ui/src/components/va-icon/types.ts
@@ -0,0 +1,23 @@
+import type { VuesticIconAliases } from './../../services/icon/presets/vuestic-aliases'
+import type { ExtractIconAliasesName } from '../../services/icon/types/define-aliases'
+
+type DefaultIconAliases = ExtractIconAliasesName<typeof VuesticIconAliases>
+
+/**
+ * This is a placeholder meant to be implemented via TypeScript's Module
+ * Augmentation feature to allow key type inference
+ *
+ * @example
+ * ```ts
+ * declare module 'vuestic-ui' {
+ *   interface CustomIconAliasesNKeys {
+ *     from: string
+ *   }
+ * }
+ * ```
+ *
+ * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+ */
+export interface CustomIconAliasesNKeys {}
+
+export type VaIconName = DefaultIconAliases | keyof CustomIconAliasesNKeys
diff --git a/packages/ui/src/services/icon/presets/vuestic-aliases.ts b/packages/ui/src/services/icon/presets/vuestic-aliases.ts
index 6d5513ea28..736b1e50a2 100644
--- a/packages/ui/src/services/icon/presets/vuestic-aliases.ts
+++ b/packages/ui/src/services/icon/presets/vuestic-aliases.ts
@@ -1,6 +1,6 @@
-import { IconConfiguration } from '../types'
+import { defineIconAliases } from '../types/define-aliases'
 
-export const VuesticIconAliases: IconConfiguration[] = [
+export const VuesticIconAliases = defineIconAliases([
   {
     name: 'va-unsorted',
     to: 'swap_vert',
@@ -71,10 +71,10 @@ export const VuesticIconAliases: IconConfiguration[] = [
   },
   {
     name: 'va-plus',
-    to: 'add',
+    to: 'mi-add',
   },
   {
     name: 'va-minus',
-    to: 'remove',
+    to: 'mi-remove',
   },
-]
+])
diff --git a/packages/ui/src/services/icon/types.ts b/packages/ui/src/services/icon/types.ts
index 6db7610dcb..f2d6252782 100644
--- a/packages/ui/src/services/icon/types.ts
+++ b/packages/ui/src/services/icon/types.ts
@@ -14,8 +14,8 @@ export interface IconProps {
   to?: string
 }
 
-export interface IconConfigurationString extends IconProps {
-  name: string
+export interface IconConfigurationString<Name extends string = string> extends IconProps {
+  name: Name
   resolve?: ((dynamicSegments: {[dynamicSegment: string]: string }) => IconProps)
 }
 
@@ -25,7 +25,7 @@ export interface IconConfigurationRegex extends IconProps {
   resolveFromRegex?: ((...regexGroupValues: string[]) => IconProps)
 }
 
-export type IconConfiguration = IconConfigurationString | IconConfigurationRegex
+export type IconConfiguration<Name extends string = string> = IconConfigurationString<Name> | IconConfigurationRegex
 
 export type IconConfig = IconConfiguration[]
 
diff --git a/packages/ui/src/services/icon/types/define-aliases.ts b/packages/ui/src/services/icon/types/define-aliases.ts
new file mode 100644
index 0000000000..bffaca755e
--- /dev/null
+++ b/packages/ui/src/services/icon/types/define-aliases.ts
@@ -0,0 +1,9 @@
+import { IconConfiguration } from '../types'
+
+export const defineIconAliases = <Name extends string>(aliases: IconConfiguration<Name>[]) => aliases
+
+export type ExtractIconAliasesName<T> = T extends IconConfiguration<infer Name>
+  ? Name
+  : T extends IconConfiguration<infer Name>[] ?
+    Name
+    : never