Skip to content

Commit b5acefe

Browse files
mrkpatchaamrkpatchaa
committed
Merge remote-tracking branch 'origin/main' into feat/bare-example
2 parents 6daab3f + 85b8b5d commit b5acefe

File tree

22 files changed

+6698
-8200
lines changed

22 files changed

+6698
-8200
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ jobs:
99
- uses: actions/checkout@v4
1010
- uses: actions/setup-node@v4
1111
with:
12-
node-version: 18
12+
node-version: 22
1313

1414
- name: Get yarn cache directory path
1515
id: yarn-cache-dir-path
@@ -27,15 +27,9 @@ jobs:
2727
${{ runner.os }}-yarn-
2828
2929
- name: Install dependencies
30-
run: yarn install --production=false
31-
32-
- name: Run code generator
33-
run: yarn generate
30+
run: yarn install --production=false # will run prepare, which generates icons
3431

3532
- name: Run linter & formatter
3633
run: |
3734
yarn format
3835
yarn lint
39-
40-
- name: Run prepare
41-
run: yarn prepare

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ node_modules/
4242
npm-debug.log
4343
yarn-debug.log
4444
yarn-error.log
45+
!yarn.lock
4546

4647
# BUCK
4748
buck-out/
@@ -56,4 +57,5 @@ android/keystores/debug.keystore
5657
/lib/
5758

5859
# ignore generated icon files
59-
/src/
60+
src/*
61+
!src/lib/

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[submodule "core"]
2+
path = core
3+
url = [email protected]:phosphor-icons/core.git

‎core‎

Submodule core added at 24fd919

‎eslint.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default [
2121
'src/thin/',
2222
'src/index.tsx',
2323
'example/',
24+
'core/',
2425
],
2526
},
2627
eslintPluginPrettierRecommended,

‎example/app/(tabs)/_layout.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,15 @@ export default function TabLayout() {
3434
),
3535
}}
3636
/>
37+
<Tabs.Screen
38+
name="single-imports"
39+
options={{
40+
title: 'Single',
41+
tabBarIcon: ({ color, focused }) => (
42+
<TestTube weight={focused ? 'fill' : 'light'} color={color} />
43+
),
44+
}}
45+
/>
3746
</Tabs>
3847
);
3948
}

‎example/app/(tabs)/index.tsx‎

Lines changed: 1 addition & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1 @@
1-
/* eslint-disable react-native/no-inline-styles */
2-
/* eslint-disable @typescript-eslint/no-explicit-any */
3-
4-
import { useCallback, useState, useMemo } from 'react';
5-
import {
6-
StyleSheet,
7-
View,
8-
Text,
9-
FlatList,
10-
StatusBar,
11-
Image,
12-
TouchableOpacity,
13-
} from 'react-native';
14-
import { SafeAreaView } from 'react-native-safe-area-context';
15-
import * as IconPack from '@/components/icons';
16-
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
17-
18-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
19-
const { IconContext, ...Icons } = IconPack;
20-
21-
const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
22-
23-
export default function HomeScreen() {
24-
const [weightIdx, setWeightIdx] = useState(2);
25-
const [iconColor, setIconColor] = useState(undefined);
26-
const [mirrorActive, setMirrorActive] = useState(false);
27-
28-
const weight: IconPack.IconWeight = useMemo(
29-
() => weights[weightIdx] as any,
30-
[weightIdx]
31-
);
32-
33-
const handleChangeWeight = useCallback(() => {
34-
setWeightIdx((weightIdx + 1) % weights.length);
35-
}, [weightIdx]);
36-
37-
const handleChangeIconColor = useCallback(() => {
38-
setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
39-
}, []);
40-
41-
const handleToggleMirror = useCallback(() => {
42-
setMirrorActive(!mirrorActive);
43-
}, [mirrorActive]);
44-
45-
return (
46-
<View style={styles.rootView}>
47-
<StatusBar barStyle="light-content" />
48-
49-
<SafeAreaView style={styles.headerContainer}>
50-
<View style={styles.header}>
51-
<Image source={PhosphorLogo} style={styles.logoImage} />
52-
<View
53-
style={{
54-
flex: 1,
55-
alignItems: 'flex-start',
56-
justifyContent: 'center',
57-
paddingStart: 10,
58-
}}
59-
>
60-
<Text style={styles.headerText}>Phosphor React Native</Text>
61-
<Text
62-
style={{
63-
color: '#fff',
64-
opacity: 0.8,
65-
textTransform: 'capitalize',
66-
}}
67-
>
68-
{weight}
69-
</Text>
70-
</View>
71-
<TouchableOpacity
72-
style={styles.weightSelect}
73-
onPress={handleChangeIconColor}
74-
>
75-
<IconPack.Palette color="#FFF" weight={weight} />
76-
</TouchableOpacity>
77-
<TouchableOpacity
78-
style={styles.weightSelect}
79-
onPress={handleChangeWeight}
80-
>
81-
<IconPack.PencilLine color="#FFF" weight={weight} />
82-
</TouchableOpacity>
83-
<TouchableOpacity
84-
style={styles.weightSelect}
85-
onPress={handleToggleMirror}
86-
>
87-
<IconPack.Swap color="#FFF" weight={weight} />
88-
</TouchableOpacity>
89-
</View>
90-
</SafeAreaView>
91-
<FlatList
92-
style={styles.scrollView}
93-
contentContainerStyle={styles.main}
94-
data={Object.entries(Icons).filter(([, Icon]) => !!Icon) as any[]}
95-
keyExtractor={(item) => item[0]}
96-
numColumns={3}
97-
renderItem={({ item: [name, Icon] }) => (
98-
<View style={styles.iconItem}>
99-
<Icon
100-
size={48}
101-
weight={weight}
102-
mirrored={mirrorActive}
103-
color={iconColor}
104-
/>
105-
<Text style={styles.iconName}>{name}</Text>
106-
</View>
107-
)}
108-
/>
109-
</View>
110-
);
111-
}
112-
113-
const styles = StyleSheet.create({
114-
rootView: {
115-
flex: 1,
116-
backgroundColor: '#FFF',
117-
},
118-
headerContainer: {
119-
backgroundColor: '#e76f51',
120-
},
121-
header: {
122-
backgroundColor: '#e76f51',
123-
alignItems: 'center',
124-
justifyContent: 'center',
125-
flexDirection: 'row',
126-
paddingBottom: 16,
127-
paddingHorizontal: 16,
128-
},
129-
logoImage: {
130-
width: 40,
131-
height: 40,
132-
borderRadius: 20,
133-
},
134-
headerText: {
135-
color: '#FFF',
136-
fontSize: 18,
137-
fontWeight: 'bold',
138-
flex: 1,
139-
textAlign: 'center',
140-
},
141-
weightSelect: {
142-
width: 35,
143-
},
144-
scrollView: {
145-
flex: 1,
146-
},
147-
main: {
148-
backgroundColor: 'white',
149-
paddingHorizontal: 8,
150-
paddingBottom: 16,
151-
},
152-
iconItem: {
153-
width: '33%',
154-
height: 100,
155-
alignItems: 'center',
156-
justifyContent: 'center',
157-
padding: 8,
158-
},
159-
iconName: {
160-
textAlign: 'center',
161-
opacity: 0.8,
162-
marginTop: 4,
163-
},
164-
});
1+
export { default } from '@/components/home';

‎example/app/(tabs)/single-imports.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from '@/components/single-imports';

‎example/app/(tabs)/test-lab.tsx‎

Lines changed: 1 addition & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1 @@
1-
/* eslint-disable react-native/no-inline-styles */
2-
3-
import { useCallback, useState } from 'react';
4-
5-
import {
6-
StyleSheet,
7-
View,
8-
Text,
9-
StatusBar,
10-
Image,
11-
FlatList,
12-
TouchableOpacity,
13-
} from 'react-native';
14-
import { SafeAreaView } from 'react-native-safe-area-context';
15-
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
16-
import * as IconPack from '@/components/icons';
17-
18-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
19-
const { IconContext, ...Icons } = IconPack;
20-
21-
export default function TestLabScreen() {
22-
const [toggleActive, setToggleActive] = useState(false);
23-
24-
const handleToggle = useCallback(() => {
25-
setToggleActive(!toggleActive);
26-
}, [toggleActive]);
27-
return (
28-
<View style={styles.rootView}>
29-
<StatusBar barStyle="light-content" />
30-
<SafeAreaView style={styles.headerContainer}>
31-
<View style={styles.header}>
32-
<Image source={PhosphorLogo} style={styles.logoImage} />
33-
<View
34-
style={{
35-
flex: 1,
36-
alignItems: 'flex-start',
37-
justifyContent: 'center',
38-
paddingStart: 10,
39-
}}
40-
>
41-
<Text style={styles.headerText}>Phosphor React Native</Text>
42-
<Text
43-
style={{
44-
color: '#fff',
45-
opacity: 0.8,
46-
textTransform: 'capitalize',
47-
}}
48-
>
49-
Duotone test lab
50-
</Text>
51-
</View>
52-
<TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
53-
<IconPack.Swap color="#FFF" weight={'regular'} />
54-
</TouchableOpacity>
55-
</View>
56-
</SafeAreaView>
57-
<FlatList
58-
style={styles.scrollView}
59-
contentContainerStyle={styles.main}
60-
data={Object.entries(Icons)
61-
.filter(([, Icon]) => !!Icon)
62-
.slice(0, 6)}
63-
keyExtractor={(item) => item[0]}
64-
numColumns={3}
65-
renderItem={({ item: [name, Icon] }) => (
66-
<View style={styles.iconItem}>
67-
<Icon
68-
size={48}
69-
weight={'duotone'}
70-
color={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
71-
duotoneColor={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
72-
duotoneOpacity={Math.random()}
73-
/>
74-
<Text style={styles.iconName}>{name}</Text>
75-
</View>
76-
)}
77-
/>
78-
</View>
79-
);
80-
}
81-
82-
const styles = StyleSheet.create({
83-
rootView: {
84-
flex: 1,
85-
backgroundColor: '#FFF',
86-
},
87-
headerContainer: {
88-
backgroundColor: '#e76f51',
89-
},
90-
header: {
91-
backgroundColor: '#e76f51',
92-
alignItems: 'center',
93-
justifyContent: 'center',
94-
flexDirection: 'row',
95-
paddingBottom: 16,
96-
paddingHorizontal: 16,
97-
},
98-
logoImage: {
99-
width: 40,
100-
height: 40,
101-
borderRadius: 20,
102-
},
103-
headerText: {
104-
color: '#FFF',
105-
fontSize: 18,
106-
fontWeight: 'bold',
107-
flex: 1,
108-
textAlign: 'center',
109-
},
110-
weightSelect: {
111-
width: 35,
112-
},
113-
scrollView: {
114-
flex: 1,
115-
},
116-
main: {
117-
backgroundColor: 'white',
118-
paddingHorizontal: 8,
119-
paddingBottom: 16,
120-
},
121-
iconItem: {
122-
width: '33%',
123-
height: 100,
124-
alignItems: 'center',
125-
justifyContent: 'center',
126-
padding: 8,
127-
},
128-
iconName: {
129-
textAlign: 'center',
130-
opacity: 0.8,
131-
marginTop: 4,
132-
},
133-
});
1+
export { default } from '@/components/test-lab';

0 commit comments

Comments
 (0)