React does not recognize the duotoneColor prop on a DOM element. (#66)

* fix: react does not recognize the duotoneColor prop on a DOM element. Closes #65 * fix: upgrade deps * fix: upgrade deps * 2.2.3 * fix: previous solution was overkill * fix: remove condition
duongdev · Jan 8, 2025 · bcc9e2f · bcc9e2f
1 parent c3c840d
commit bcc9e2f
Show file tree

Hide file tree

Showing 11 changed files with 1,953 additions and 2,326 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -27,15 +27,9 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn install --production=false
-
-      - name: Run code generator
-        run: yarn generate
+        run: yarn install --production=false # will run prepare, which generates icons
 
       - name: Run linter & formatter
         run: |
           yarn format
           yarn lint
-
-      - name: Run prepare
-        run: yarn prepare
diff --git a/example/app/(tabs)/index.tsx b/example/app/(tabs)/index.tsx
@@ -1,164 +1 @@
-/* eslint-disable react-native/no-inline-styles */
-/* eslint-disable  @typescript-eslint/no-explicit-any */
-
-import { useCallback, useState, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  FlatList,
-  StatusBar,
-  Image,
-  TouchableOpacity,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import * as IconPack from '@/components/icons';
-import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { IconContext, ...Icons } = IconPack;
-
-const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
-
-export default function HomeScreen() {
-  const [weightIdx, setWeightIdx] = useState(2);
-  const [iconColor, setIconColor] = useState(undefined);
-  const [mirrorActive, setMirrorActive] = useState(false);
-
-  const weight: IconPack.IconWeight = useMemo(
-    () => weights[weightIdx] as any,
-    [weightIdx]
-  );
-
-  const handleChangeWeight = useCallback(() => {
-    setWeightIdx((weightIdx + 1) % weights.length);
-  }, [weightIdx]);
-
-  const handleChangeIconColor = useCallback(() => {
-    setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
-  }, []);
-
-  const handleToggleMirror = useCallback(() => {
-    setMirrorActive(!mirrorActive);
-  }, [mirrorActive]);
-
-  return (
-    <View style={styles.rootView}>
-      <StatusBar barStyle="light-content" />
-
-      <SafeAreaView style={styles.headerContainer}>
-        <View style={styles.header}>
-          <Image source={PhosphorLogo} style={styles.logoImage} />
-          <View
-            style={{
-              flex: 1,
-              alignItems: 'flex-start',
-              justifyContent: 'center',
-              paddingStart: 10,
-            }}
-          >
-            <Text style={styles.headerText}>Phosphor React Native</Text>
-            <Text
-              style={{
-                color: '#fff',
-                opacity: 0.8,
-                textTransform: 'capitalize',
-              }}
-            >
-              {weight}
-            </Text>
-          </View>
-          <TouchableOpacity
-            style={styles.weightSelect}
-            onPress={handleChangeIconColor}
-          >
-            <IconPack.Palette color="#FFF" weight={weight} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.weightSelect}
-            onPress={handleChangeWeight}
-          >
-            <IconPack.PencilLine color="#FFF" weight={weight} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.weightSelect}
-            onPress={handleToggleMirror}
-          >
-            <IconPack.Swap color="#FFF" weight={weight} />
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-      <FlatList
-        style={styles.scrollView}
-        contentContainerStyle={styles.main}
-        data={Object.entries(Icons).filter(([, Icon]) => !!Icon) as any[]}
-        keyExtractor={(item) => item[0]}
-        numColumns={3}
-        renderItem={({ item: [name, Icon] }) => (
-          <View style={styles.iconItem}>
-            <Icon
-              size={48}
-              weight={weight}
-              mirrored={mirrorActive}
-              color={iconColor}
-            />
-            <Text style={styles.iconName}>{name}</Text>
-          </View>
-        )}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  rootView: {
-    flex: 1,
-    backgroundColor: '#FFF',
-  },
-  headerContainer: {
-    backgroundColor: '#e76f51',
-  },
-  header: {
-    backgroundColor: '#e76f51',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    paddingBottom: 16,
-    paddingHorizontal: 16,
-  },
-  logoImage: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
-  headerText: {
-    color: '#FFF',
-    fontSize: 18,
-    fontWeight: 'bold',
-    flex: 1,
-    textAlign: 'center',
-  },
-  weightSelect: {
-    width: 35,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  main: {
-    backgroundColor: 'white',
-    paddingHorizontal: 8,
-    paddingBottom: 16,
-  },
-  iconItem: {
-    width: '33%',
-    height: 100,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 8,
-  },
-  iconName: {
-    textAlign: 'center',
-    opacity: 0.8,
-    marginTop: 4,
-  },
-});
+export { default } from '@/components/home';
diff --git a/example/app/(tabs)/test-lab.tsx b/example/app/(tabs)/test-lab.tsx
@@ -1,133 +1 @@
-/* eslint-disable react-native/no-inline-styles */
-
-import { useCallback, useState } from 'react';
-
-import {
-  StyleSheet,
-  View,
-  Text,
-  StatusBar,
-  Image,
-  FlatList,
-  TouchableOpacity,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
-import * as IconPack from '@/components/icons';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { IconContext, ...Icons } = IconPack;
-
-export default function TestLabScreen() {
-  const [toggleActive, setToggleActive] = useState(false);
-
-  const handleToggle = useCallback(() => {
-    setToggleActive(!toggleActive);
-  }, [toggleActive]);
-  return (
-    <View style={styles.rootView}>
-      <StatusBar barStyle="light-content" />
-      <SafeAreaView style={styles.headerContainer}>
-        <View style={styles.header}>
-          <Image source={PhosphorLogo} style={styles.logoImage} />
-          <View
-            style={{
-              flex: 1,
-              alignItems: 'flex-start',
-              justifyContent: 'center',
-              paddingStart: 10,
-            }}
-          >
-            <Text style={styles.headerText}>Phosphor React Native</Text>
-            <Text
-              style={{
-                color: '#fff',
-                opacity: 0.8,
-                textTransform: 'capitalize',
-              }}
-            >
-              Duotone test lab
-            </Text>
-          </View>
-          <TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
-            <IconPack.Swap color="#FFF" weight={'regular'} />
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-      <FlatList
-        style={styles.scrollView}
-        contentContainerStyle={styles.main}
-        data={Object.entries(Icons)
-          .filter(([, Icon]) => !!Icon)
-          .slice(0, 6)}
-        keyExtractor={(item) => item[0]}
-        numColumns={3}
-        renderItem={({ item: [name, Icon] }) => (
-          <View style={styles.iconItem}>
-            <Icon
-              size={48}
-              weight={'duotone'}
-              color={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
-              duotoneColor={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
-              duotoneOpacity={Math.random()}
-            />
-            <Text style={styles.iconName}>{name}</Text>
-          </View>
-        )}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  rootView: {
-    flex: 1,
-    backgroundColor: '#FFF',
-  },
-  headerContainer: {
-    backgroundColor: '#e76f51',
-  },
-  header: {
-    backgroundColor: '#e76f51',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    paddingBottom: 16,
-    paddingHorizontal: 16,
-  },
-  logoImage: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
-  headerText: {
-    color: '#FFF',
-    fontSize: 18,
-    fontWeight: 'bold',
-    flex: 1,
-    textAlign: 'center',
-  },
-  weightSelect: {
-    width: 35,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  main: {
-    backgroundColor: 'white',
-    paddingHorizontal: 8,
-    paddingBottom: 16,
-  },
-  iconItem: {
-    width: '33%',
-    height: 100,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 8,
-  },
-  iconName: {
-    textAlign: 'center',
-    opacity: 0.8,
-    marginTop: 4,
-  },
-});
+export { default } from '@/components/test-lab';