Merge remote-tracking branch 'origin/main' into feat/bare-example

duongdev · Jan 25, 2025 · b5acefe · b5acefe
2 parents 6daab3f + 85b8b5d
commit b5acefe
Show file tree

Hide file tree

Showing 22 changed files with 6,698 additions and 8,200 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -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/.gitignore b/.gitignore
@@ -42,6 +42,7 @@ node_modules/
 npm-debug.log
 yarn-debug.log
 yarn-error.log
+!yarn.lock
 
 # BUCK
 buck-out/
@@ -56,4 +57,5 @@ android/keystores/debug.keystore
 /lib/
 
 # ignore generated icon files
-/src/
+src/*
+!src/lib/
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "core"]
+	path = core
+	url = [email protected]:phosphor-icons/core.git
diff --git a/core b/core
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -21,6 +21,7 @@ export default [
       'src/thin/',
       'src/index.tsx',
       'example/',
+      'core/',
     ],
   },
   eslintPluginPrettierRecommended,

diff --git a/example/app/(tabs)/_layout.tsx b/example/app/(tabs)/_layout.tsx
@@ -34,6 +34,15 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="single-imports"
+        options={{
+          title: 'Single',
+          tabBarIcon: ({ color, focused }) => (
+            <TestTube weight={focused ? 'fill' : 'light'} color={color} />
+          ),
+        }}
+      />
     </Tabs>
   );
 }
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)/single-imports.tsx b/example/app/(tabs)/single-imports.tsx
@@ -0,0 +1 @@
+export { default } from '@/components/single-imports';
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';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from '@/components/single-imports';