add component to storybook

src/view/screens/Storybook/Forms.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import {type TextInput, View} from 'react-native'
 
+import {getDefaultCountry} from '#/lib/international-telephone-codes'
+import {useGeolocationStatus} from '#/state/geolocation'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DateField, LabelText} from '#/components/forms/DateField'
@@ -9,6 +11,7 @@ import * as TextField from '#/components/forms/TextField'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {InternationalPhoneCodeSelect} from '#/components/InternationalPhoneCodeSelect'
 import {H1, H3} from '#/components/Typography'
 
 export function Forms() {
@@ -23,6 +26,11 @@ export function Forms() {
   const [value, setValue] = React.useState('')
   const [date, setDate] = React.useState('2001-01-01')
 
+  const {location} = useGeolocationStatus()
+  const [telCode, setTelCode] = React.useState(() =>
+    getDefaultCountry(location),
+  )
+
   const inputRef = React.useRef<TextInput>(null)
 
   return (
@@ -119,6 +127,20 @@ export function Forms() {
             label="Input"
           />
         </View>
+
+        <H3>InternationalPhoneCodeSelect</H3>
+
+        <View style={[a.flex_row, a.gap_sm, a.align_center]}>
+          <View>
+            <InternationalPhoneCodeSelect
+              value={telCode}
+              onChange={setTelCode}
+            />
+          </View>
+          <View style={[a.flex_1]}>
+            <TextField.Input label="Phone number" />
+          </View>
+        </View>
       </View>
 
       <View style={[a.gap_md, a.align_start, a.w_full]}>