fix: make all the font name types work

oblador · Oct 9, 2024 · 9537575 · 9537575
1 parent 527389c
commit 9537575
Show file tree

Hide file tree

Showing 7 changed files with 318 additions and 586 deletions.
diff --git a/.knip.jsonc b/.knip.jsonc
@@ -43,7 +43,7 @@
       "ignoreDependencies": ["@testing-library/user-event"]
     },
     "packages/icon-explorer": {
-      "entry": ["index.js", "metro.config.js", "react-native.config.js", "configPlugin.js"],
+      "entry": ["index.js", "metro.config.js", "react-native.config.js", "configPlugin.js", "src/Types.tsx"],
       "ignoreDependencies": [
         "@react-native-vector-icons/common",
         "@babel/preset-env",

diff --git a/packages/fontawesome-common/generators/app/templates/src/index.tsx b/packages/fontawesome-common/generators/app/templates/src/index.tsx
@@ -7,16 +7,12 @@
  * <%= className %> icon set component.
  * Usage: <<%= className %> name="icon-name" size={20} color="#4F8EF7" />
  */
-import type { FC } from 'react';
+import type { ComponentProps } from 'react';
 import { Platform, type TextStyle } from 'react-native';
 
-import {
-  DEFAULT_ICON_COLOR,
-  DEFAULT_ICON_SIZE,
-  type IconProps,
-  createIconSet as commonCreateIconSet,
-} from '@react-native-vector-icons/common';
+import { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE, createIconSet } from '@react-native-vector-icons/common';
 
+<% upperDefaultStyleName = meta.defaultStyleName.charAt(0).toUpperCase() + meta.defaultStyleName.slice(1) -%>
 <% meta.styleNames.sort().forEach((styleName) => { -%>
 import <%= styleName %>GM from '../glyphmaps/<%= className %>_<%= styleName %>.json';
 <% }) -%>
@@ -33,111 +29,91 @@ const fontStyle = (fontWeight: TextStyle['fontWeight']) =>
     default: {},
   });
 
-<% meta.styleNames.forEach((styleName) => { -%>
-type <%= styleName %>IconProps = IconProps<keyof typeof <%= styleName %>GM>;
-<% }) -%>
-type Props =
-<% meta.styleNames.forEach((styleName) => { -%>
-  | ({ iconStyle?: '<%= styleName %>' } & <%= styleName %>IconProps)
-<% }) -%>
-  | ({ iconStyle?: never } & <%= meta.defaultStyleName %>IconProps);
-
-type ValueData = { uri: string; scale: number };
-type GetImageSourceSyncIconFunc<GM> = (name: GM, size?: number, color?: TextStyle['color']) => ValueData | undefined;
-type GetImageSourceIconFunc<GM> = (
-  name: GM,
-  size?: number,
-  color?: TextStyle['color'],
-) => Promise<ValueData | undefined>;
-
-type Icons = {
-<% meta.styleNames.sort().forEach((styleName) => { -%>
-  <%= styleName %>: FC<<%= styleName %>IconProps> & {
-    getImageSource: GetImageSourceIconFunc<keyof typeof <%= styleName %>GM>;
-    getImageSourceSync: GetImageSourceSyncIconFunc<keyof typeof <%= styleName %>GM>;
-  };
+<% Object.entries(meta.styles).forEach(([styleName, { family, name, weight }]) => { -%>
+<% upperStyleName = styleName.charAt(0).toUpperCase() + styleName.slice(1) -%>
+// biome-ignore format: We want these to be consistent and we are fine with single for all
+const <%= upperStyleName %>Icon = createIconSet(<%= styleName %>GM, '<%= family %>', '<%= name %>', fontStyle('<%= weight %>'));
 <% }) -%>
-};
 
-const Icons: Icons = {
+type Props =
 <% Object.entries(meta.styles).forEach(([styleName, { family, name, weight }]) => { -%>
-  // biome-ignore format: We want these to be consistent and we are fine with multiline for all
-  <%= styleName %>: commonCreateIconSet(
-    <%= styleName %>GM,
-    '<%= family %>',
-    '<%= name %>',
-    fontStyle('<%= weight %>'),
-  ),
+<% upperStyleName = styleName.charAt(0).toUpperCase() + styleName.slice(1) -%>
+  | ({ iconStyle: '<%= styleName %>' } & ComponentProps<typeof <%= upperStyleName %>Icon>)
 <% }) -%>
-};
+  | ({ iconStyle?: never } & ComponentProps<typeof <%= upperDefaultStyleName %>Icon>);
 
 const Icon = (props: Props) => {
   const { iconStyle, name } = props;
   if (!iconStyle) {
-    return <Icons.<%= meta.defaultStyleName %> {...(props as <%= meta.defaultStyleName %>IconProps)} />;
+    return <<%= upperDefaultStyleName %>Icon {...props} />;
   }
 
-  if (!glyphValidator(name as string, iconStyle)) {
+  if (!glyphValidator(name, iconStyle)) {
     console.warn(`noSuchGlyph: glyph ${String(name)} does not exist for '${iconStyle}' icon type for <%= className %>`);
 
-    return <Icons.<%= meta.defaultStyleName %> {...(props as <%= meta.defaultStyleName %>IconProps)} />;
+    return <<%= upperDefaultStyleName %>Icon {...(props as ComponentProps<typeof <%= upperDefaultStyleName %>Icon>)} />;
   }
 
   switch (iconStyle) {
 <% meta.styleNames.forEach((styleName) => { -%>
+<% upperStyleName = styleName.charAt(0).toUpperCase() + styleName.slice(1) -%>
     case '<%= styleName %>':
-      return <Icons.<%= styleName %> {...props} />;
+      return <<%= upperStyleName %>Icon {...props} />;
 <% }) -%>
     default:
       console.warn(`noSuchIconTypeName: '${iconStyle}' icon type does not exist for <%= className %>`);
-      return <Icons.<%= meta.defaultStyleName %> {...(props as <%= meta.defaultStyleName %>IconProps)} />;
+      return <<%= upperDefaultStyleName %>Icon {...(props as ComponentProps<typeof <%= upperDefaultStyleName %>Icon>)} />;
   }
 };
 
 type GetImageSourceFunc = {
 <% meta.styleNames.forEach((styleName) => { -%>
+<% upperStyleName = styleName.charAt(0).toUpperCase() + styleName.slice(1) -%>
   (
     iconStyle: '<%= styleName %>',
-    name: keyof typeof <%= styleName %>GM,
+    name: ComponentProps<typeof <%= upperStyleName %>Icon>['name'],
     size?: number,
     color?: TextStyle['color'],
-  ): ReturnType<(typeof Icons.<%= styleName %>)['getImageSource']>;
+  ): ReturnType<(typeof <%= upperStyleName %>Icon)['getImageSource']>;
 <% }) -%>
 };
 // biome-ignore format: We want these to be consistent and we are fine with single for all
 const getImageSource: GetImageSourceFunc = (iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR) => {
   switch (iconStyle) {
 <% meta.styleNames.forEach((styleName) => { -%>
+<% upperStyleName = styleName.charAt(0).toUpperCase() + styleName.slice(1) -%>
     case '<%= styleName %>':
-      return Icons.<%= styleName %>.getImageSource(name as keyof typeof <%= styleName %>GM, size, color);
+      return <%= upperStyleName %>Icon.getImageSource(name as keyof typeof <%= styleName %>GM, size, color);
 <% }) -%>
     default:
       console.warn(`noSuchIconTypeName: '${iconStyle}' icon type does not exist for <%= className %>`);
-      return Icons.<%= meta.defaultStyleName %>.getImageSource(name as keyof typeof <%= meta.defaultStyleName %>GM, size, color);
+      return <%= upperDefaultStyleName %>Icon.getImageSource(name as keyof typeof <%= meta.defaultStyleName %>GM, size, color);
   }
 };
 Icon.getImageSource = getImageSource;
 
 type GetImageSourceSyncFunc = {
 <% meta.styleNames.forEach((styleName) => { -%>
+<% upperStyleName = styleName.charAt(0).toUpperCase() + styleName.slice(1) -%>
   (
     iconStyle: '<%= styleName %>',
-    name: keyof typeof <%= styleName %>GM,
+    name: ComponentProps<typeof <%= upperStyleName %>Icon>['name'],
     size?: number,
     color?: TextStyle['color'],
-  ): ReturnType<(typeof Icons.<%= styleName %>)['getImageSourceSync']>;
+  ): ReturnType<(typeof <%= upperStyleName %>Icon)['getImageSourceSync']>;
 <% }) -%>
 };
 // biome-ignore format: We want these to be consistent and we are fine with single for all
 const getImageSourceSync: GetImageSourceSyncFunc = (iconStyle, name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR) => {
   switch (iconStyle) {
 <% meta.styleNames.forEach((styleName) => { -%>
+<% upperStyleName = styleName.charAt(0).toUpperCase() + styleName.slice(1) -%>
     case '<%= styleName %>':
-      return Icons.<%= styleName %>.getImageSourceSync(name as keyof typeof <%= styleName %>GM, size, color);
+      return <%= upperStyleName %>Icon.getImageSourceSync(name as keyof typeof <%= styleName %>GM, size, color);
 <% }) -%>
     default:
       console.warn(`noSuchIconTypeName: '${iconStyle}' icon type does not exist for <%= className %>`);
-      return Icons.<%= meta.defaultStyleName %>.getImageSourceSync(name as keyof typeof <%= meta.defaultStyleName %>GM, size, color);
+      return <%= upperDefaultStyleName %>Icon.getImageSourceSync(name as keyof typeof <%= meta.defaultStyleName %>GM, size, color);
   }
 };
 Icon.getImageSourceSync = getImageSourceSync;