robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
lazy load storybook (#9612)
samuel.fm
+168
-177
+11
-26
src/view/screens/Storybook/Forms.tsx
+11
-26
src/view/screens/Storybook/Forms.tsx
···
2
2
import {type TextInput, View} from 'react-native'
3
3
4
4
import {APP_LANGUAGES} from '#/lib/../locale/languages'
5
+
import {type CountryCode} from '#/lib/international-telephone-codes'
5
6
import {atoms as a} from '#/alf'
6
7
import {Button, ButtonText} from '#/components/Button'
7
8
import {DateField, LabelText} from '#/components/forms/DateField'
···
25
26
26
27
const [value, setValue] = React.useState('')
27
28
const [date, setDate] = React.useState('2001-01-01')
28
-
const [countryCode, setCountryCode] = React.useState('US')
29
+
const [countryCode, setCountryCode] = React.useState<CountryCode>('US')
29
30
const [phoneNumber, setPhoneNumber] = React.useState('')
30
31
const [lang, setLang] = React.useState('en')
31
32
···
54
55
}))}
55
56
/>
56
57
</Select.Root>
57
-
58
-
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
59
-
<View>
60
-
<InternationalPhoneCodeSelect
61
-
// @ts-ignore
62
-
value={countryCode}
63
-
onChange={value => setCountryCode(value)}
64
-
/>
65
-
</View>
66
-
67
-
<View style={[a.flex_1]}>
68
-
<TextField.Input
69
-
label="Phone number"
70
-
value={phoneNumber}
71
-
onChangeText={setPhoneNumber}
72
-
/>
73
-
</View>
74
-
</View>
75
58
76
59
<View style={[a.gap_md, a.align_start, a.w_full]}>
77
60
<H3>InputText</H3>
···
163
146
label="Input"
164
147
/>
165
148
</View>
166
-
167
-
{/* commented out so it's not in the web bundle */}
168
-
{/*<H3>InternationalPhoneCodeSelect</H3>
149
+
<H3>InternationalPhoneCodeSelect</H3>
169
150
170
151
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
171
152
<View>
172
153
<InternationalPhoneCodeSelect
173
-
value={telCode}
174
-
onChange={setTelCode}
154
+
value={countryCode}
155
+
onChange={value => setCountryCode(value)}
175
156
/>
176
157
</View>
177
158
<View style={[a.flex_1]}>
178
-
<TextField.Input label="Phone number" />
159
+
<TextField.Input
160
+
label="Phone number"
161
+
value={phoneNumber}
162
+
onChangeText={setPhoneNumber}
163
+
/>
179
164
</View>
180
-
</View>*/}
165
+
</View>
181
166
</View>
182
167
183
168
<View style={[a.gap_md, a.align_start, a.w_full]}>
+148
src/view/screens/Storybook/Storybook.tsx
+148
src/view/screens/Storybook/Storybook.tsx
···
1
+
import React from 'react'
2
+
import {View} from 'react-native'
3
+
import {useNavigation} from '@react-navigation/native'
4
+
5
+
import {type NavigationProp} from '#/lib/routes/types'
6
+
import {useSetThemePrefs} from '#/state/shell'
7
+
import {ListContained} from '#/view/screens/Storybook/ListContained'
8
+
import {atoms as a, ThemeProvider} from '#/alf'
9
+
import {Button, ButtonText} from '#/components/Button'
10
+
import {
11
+
useDeviceGeolocationApi,
12
+
useRequestDeviceGeolocation,
13
+
} from '#/geolocation'
14
+
import {Admonitions} from './Admonitions'
15
+
import {Breakpoints} from './Breakpoints'
16
+
import {Buttons} from './Buttons'
17
+
import {Dialogs} from './Dialogs'
18
+
import {Forms} from './Forms'
19
+
import {Icons} from './Icons'
20
+
import {Links} from './Links'
21
+
import {Menus} from './Menus'
22
+
import {Settings} from './Settings'
23
+
import {Shadows} from './Shadows'
24
+
import {Spacing} from './Spacing'
25
+
import {Theming} from './Theming'
26
+
import {Toasts} from './Toasts'
27
+
import {Typography} from './Typography'
28
+
29
+
export default function Storybook() {
30
+
const {setColorMode, setDarkTheme} = useSetThemePrefs()
31
+
const [showContainedList, setShowContainedList] = React.useState(false)
32
+
const navigation = useNavigation<NavigationProp>()
33
+
const requestDeviceGeolocation = useRequestDeviceGeolocation()
34
+
const {setDeviceGeolocation} = useDeviceGeolocationApi()
35
+
36
+
return (
37
+
<>
38
+
<View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
39
+
{!showContainedList ? (
40
+
<>
41
+
<View style={[a.flex_row, a.align_start, a.gap_md]}>
42
+
<Button
43
+
color="primary"
44
+
size="small"
45
+
label='Set theme to "system"'
46
+
onPress={() => setColorMode('system')}>
47
+
<ButtonText>System</ButtonText>
48
+
</Button>
49
+
<Button
50
+
color="secondary"
51
+
size="small"
52
+
label='Set theme to "light"'
53
+
onPress={() => setColorMode('light')}>
54
+
<ButtonText>Light</ButtonText>
55
+
</Button>
56
+
<Button
57
+
color="secondary"
58
+
size="small"
59
+
label='Set theme to "dim"'
60
+
onPress={() => {
61
+
setColorMode('dark')
62
+
setDarkTheme('dim')
63
+
}}>
64
+
<ButtonText>Dim</ButtonText>
65
+
</Button>
66
+
<Button
67
+
color="secondary"
68
+
size="small"
69
+
label='Set theme to "dark"'
70
+
onPress={() => {
71
+
setColorMode('dark')
72
+
setDarkTheme('dark')
73
+
}}>
74
+
<ButtonText>Dark</ButtonText>
75
+
</Button>
76
+
</View>
77
+
78
+
<Button
79
+
color="primary"
80
+
size="small"
81
+
onPress={() => navigation.navigate('SharedPreferencesTester')}
82
+
label="two"
83
+
testID="sharedPrefsTestOpenBtn">
84
+
<ButtonText>Open Shared Prefs Tester</ButtonText>
85
+
</Button>
86
+
<Button
87
+
color="primary_subtle"
88
+
size="large"
89
+
onPress={() =>
90
+
requestDeviceGeolocation().then(req => {
91
+
if (req.granted && req.location) {
92
+
setDeviceGeolocation(req.location)
93
+
}
94
+
})
95
+
}
96
+
label="crash">
97
+
<ButtonText>Get GPS Location</ButtonText>
98
+
</Button>
99
+
100
+
<ThemeProvider theme="light">
101
+
<Theming />
102
+
</ThemeProvider>
103
+
<ThemeProvider theme="dim">
104
+
<Theming />
105
+
</ThemeProvider>
106
+
<ThemeProvider theme="dark">
107
+
<Theming />
108
+
</ThemeProvider>
109
+
110
+
<Toasts />
111
+
<Buttons />
112
+
<Forms />
113
+
<Typography />
114
+
<Spacing />
115
+
<Shadows />
116
+
<Icons />
117
+
<Links />
118
+
<Dialogs />
119
+
<Menus />
120
+
<Breakpoints />
121
+
<Dialogs />
122
+
<Admonitions />
123
+
<Settings />
124
+
125
+
<Button
126
+
color="primary"
127
+
size="large"
128
+
label="Switch to Contained List"
129
+
onPress={() => setShowContainedList(true)}>
130
+
<ButtonText>Switch to Contained List</ButtonText>
131
+
</Button>
132
+
</>
133
+
) : (
134
+
<>
135
+
<Button
136
+
color="primary"
137
+
size="large"
138
+
label="Switch to Storybook"
139
+
onPress={() => setShowContainedList(false)}>
140
+
<ButtonText>Switch to Storybook</ButtonText>
141
+
</Button>
142
+
<ListContained />
143
+
</>
144
+
)}
145
+
</View>
146
+
</>
147
+
)
148
+
}
+7
-149
src/view/screens/Storybook/index.tsx
+7
-149
src/view/screens/Storybook/index.tsx
···
1
-
import React from 'react'
2
-
import {View} from 'react-native'
3
-
import {useNavigation} from '@react-navigation/native'
1
+
import {lazy, Suspense} from 'react'
4
2
5
-
import {type NavigationProp} from '#/lib/routes/types'
6
-
import {useSetThemePrefs} from '#/state/shell'
7
-
import {ListContained} from '#/view/screens/Storybook/ListContained'
8
-
import {atoms as a, ThemeProvider} from '#/alf'
9
-
import {Button, ButtonText} from '#/components/Button'
10
3
import * as Layout from '#/components/Layout'
11
-
import {
12
-
useDeviceGeolocationApi,
13
-
useRequestDeviceGeolocation,
14
-
} from '#/geolocation'
15
-
import {Admonitions} from './Admonitions'
16
-
import {Breakpoints} from './Breakpoints'
17
-
import {Buttons} from './Buttons'
18
-
import {Dialogs} from './Dialogs'
19
-
import {Forms} from './Forms'
20
-
import {Icons} from './Icons'
21
-
import {Links} from './Links'
22
-
import {Menus} from './Menus'
23
-
import {Settings} from './Settings'
24
-
import {Shadows} from './Shadows'
25
-
import {Spacing} from './Spacing'
26
-
import {Theming} from './Theming'
27
-
import {Toasts} from './Toasts'
28
-
import {Typography} from './Typography'
4
+
5
+
const Storybook = lazy(() => import('./Storybook'))
29
6
30
-
export function Storybook() {
7
+
export function StorybookScreen() {
31
8
return (
32
9
<Layout.Screen>
33
10
<Layout.Header.Outer>
···
38
15
<Layout.Header.Slot />
39
16
</Layout.Header.Outer>
40
17
<Layout.Content keyboardShouldPersistTaps="handled">
41
-
<StorybookInner />
18
+
<Suspense fallback={null}>
19
+
<Storybook />
20
+
</Suspense>
42
21
</Layout.Content>
43
22
</Layout.Screen>
44
23
)
45
24
}
46
-
47
-
function StorybookInner() {
48
-
const {setColorMode, setDarkTheme} = useSetThemePrefs()
49
-
const [showContainedList, setShowContainedList] = React.useState(false)
50
-
const navigation = useNavigation<NavigationProp>()
51
-
const requestDeviceGeolocation = useRequestDeviceGeolocation()
52
-
const {setDeviceGeolocation} = useDeviceGeolocationApi()
53
-
54
-
return (
55
-
<>
56
-
<View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
57
-
{!showContainedList ? (
58
-
<>
59
-
<View style={[a.flex_row, a.align_start, a.gap_md]}>
60
-
<Button
61
-
color="primary"
62
-
size="small"
63
-
label='Set theme to "system"'
64
-
onPress={() => setColorMode('system')}>
65
-
<ButtonText>System</ButtonText>
66
-
</Button>
67
-
<Button
68
-
color="secondary"
69
-
size="small"
70
-
label='Set theme to "light"'
71
-
onPress={() => setColorMode('light')}>
72
-
<ButtonText>Light</ButtonText>
73
-
</Button>
74
-
<Button
75
-
color="secondary"
76
-
size="small"
77
-
label='Set theme to "dim"'
78
-
onPress={() => {
79
-
setColorMode('dark')
80
-
setDarkTheme('dim')
81
-
}}>
82
-
<ButtonText>Dim</ButtonText>
83
-
</Button>
84
-
<Button
85
-
color="secondary"
86
-
size="small"
87
-
label='Set theme to "dark"'
88
-
onPress={() => {
89
-
setColorMode('dark')
90
-
setDarkTheme('dark')
91
-
}}>
92
-
<ButtonText>Dark</ButtonText>
93
-
</Button>
94
-
</View>
95
-
96
-
<Button
97
-
color="primary"
98
-
size="small"
99
-
onPress={() => navigation.navigate('SharedPreferencesTester')}
100
-
label="two"
101
-
testID="sharedPrefsTestOpenBtn">
102
-
<ButtonText>Open Shared Prefs Tester</ButtonText>
103
-
</Button>
104
-
<Button
105
-
color="primary_subtle"
106
-
size="large"
107
-
onPress={() =>
108
-
requestDeviceGeolocation().then(req => {
109
-
if (req.granted && req.location) {
110
-
setDeviceGeolocation(req.location)
111
-
}
112
-
})
113
-
}
114
-
label="crash">
115
-
<ButtonText>Get GPS Location</ButtonText>
116
-
</Button>
117
-
118
-
<ThemeProvider theme="light">
119
-
<Theming />
120
-
</ThemeProvider>
121
-
<ThemeProvider theme="dim">
122
-
<Theming />
123
-
</ThemeProvider>
124
-
<ThemeProvider theme="dark">
125
-
<Theming />
126
-
</ThemeProvider>
127
-
128
-
<Toasts />
129
-
<Buttons />
130
-
<Forms />
131
-
<Typography />
132
-
<Spacing />
133
-
<Shadows />
134
-
<Icons />
135
-
<Links />
136
-
<Dialogs />
137
-
<Menus />
138
-
<Breakpoints />
139
-
<Dialogs />
140
-
<Admonitions />
141
-
<Settings />
142
-
143
-
<Button
144
-
color="primary"
145
-
size="large"
146
-
label="Switch to Contained List"
147
-
onPress={() => setShowContainedList(true)}>
148
-
<ButtonText>Switch to Contained List</ButtonText>
149
-
</Button>
150
-
</>
151
-
) : (
152
-
<>
153
-
<Button
154
-
color="primary"
155
-
size="large"
156
-
label="Switch to Storybook"
157
-
onPress={() => setShowContainedList(false)}>
158
-
<ButtonText>Switch to Storybook</ButtonText>
159
-
</Button>
160
-
<ListContained />
161
-
</>
162
-
)}
163
-
</View>
164
-
</>
165
-
)
166
-
}