New rich text composer + autocomplete (#10159)

src/view/screens/Storybook/Forms.tsx

@@ -3,8 +3,9 @@ import {type TextInput, View} from 'react-native'
 
 import {APP_LANGUAGES} from '#/lib/../locale/languages'
 import {type CountryCode} from '#/lib/international-telephone-codes'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {AutosizedTextarea} from '#/components/forms/AutosizedTextarea'
 import {DateField, LabelText} from '#/components/forms/DateField'
 import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import * as TextField from '#/components/forms/TextField'
@@ -16,6 +17,7 @@ import * as Select from '#/components/Select'
 import {H1, H3} from '#/components/Typography'
 
 export function Forms() {
+  const t = useTheme()
   const [toggleGroupAValues, setToggleGroupAValues] = useState(['a'])
   const [toggleGroupBValues, setToggleGroupBValues] = useState(['a', 'b'])
   const [toggleGroupCValues, setToggleGroupCValues] = useState(['a', 'b'])
@@ -36,6 +38,44 @@ export function Forms() {
     <View style={[a.gap_4xl, a.align_start]}>
       <H1>Forms</H1>
 
+      <View style={[a.gap_md, a.align_start, a.w_full]}>
+        <AutosizedTextarea
+          label="minRows=1 maxRows=5"
+          style={[
+            a.w_full,
+            a.p_md,
+            a.rounded_sm,
+            a.border,
+            t.atoms.border_contrast_medium,
+          ]}
+          maxRows={5}
+        />
+        <AutosizedTextarea
+          label="defaultValue minRows=1 maxRows=2"
+          style={[
+            a.w_full,
+            a.p_md,
+            a.rounded_sm,
+            a.border,
+            t.atoms.border_contrast_medium,
+          ]}
+          maxRows={2}
+          defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies lacinia, nunc nisl aliquam nisl, eget aliquam nunc nisl eget nunc."
+        />
+        <AutosizedTextarea
+          label="minRows=3 maxRows=10"
+          style={[
+            a.w_full,
+            a.p_md,
+            a.rounded_sm,
+            a.border,
+            t.atoms.border_contrast_medium,
+          ]}
+          minRows={3}
+          maxRows={10}
+        />
+      </View>
+
       <Select.Root value={lang} onValueChange={setLang}>
         <Select.Trigger label="Select app language">
           <Select.ValueText />