Add Form Components

example/app/_layout.tsx

@@ -27,6 +27,9 @@ export default function RootLayout() {
         <Stack.Screen name="sheetGallery" options={{ title: "Sheet" }} />
         <Stack.Screen name="selectInputGallery" options={{ title: "Select Input" }} />
         <Stack.Screen name="navigationListRowGallery" options={{ title: "Navigation Row" }} />
+        <Stack.Screen name="formTextInputGallery" options={{ title: "Form Text Input" }} />
+        <Stack.Screen name="formSwitchToggleGallery" options={{ title: "Form Switch Toggle" }} />
+        <Stack.Screen name="formDateTimeInputGallery" options={{ title: "Form Date Time Input" }} />
       </Stack>
     </ThemeContext.Provider>
   );

example/app/formDateTimeInputGallery.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useRef, useState } from "react";
+import { Alert, ScrollView, StyleSheet } from "react-native";
+
+import { FormApi } from "informed";
+
+import {
+  useThemedStyle,
+  FormDateTimeInput,
+  Form,
+  Button,
+} from "atlas-design-system";
+import moment from "moment";
+
+type FormType = {
+  favorite_day?: Date;
+};
+
+export default function FormDateTimeInputGallery() {
+  const styles = useStyles().styles;
+  const formRef = useRef<FormApi>();
+  const [enabled, setEnabled] = useState(false);
+
+  const initialValues = useRef<FormType>({ favorite_day: new Date() });
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Form
+        validateOn="change"
+        allowEmptyStrings={false}
+        initialValues={initialValues.current}
+        onSubmit={(formState) => {
+          const { values } = formState;
+          const typedValue: FormType = values;
+          Alert.alert("Your Favorite Time Is", moment(typedValue.favorite_day).format('lll'));
+        }}
+        onValid={() => {
+          setEnabled(true);
+        }}
+        onInvalid={() => {
+          setEnabled(false);
+        }}
+        formApiRef={formRef}
+      >
+        <FormDateTimeInput
+          required
+          name="favorite_day"
+          label="Enter your favorite day"
+        />
+        <FormDateTimeInput
+          required
+          name="favorite_day"
+          mode='time'
+          label="Enter your favorite time"
+        />
+      </Form>
+      <Button
+        disabled={!enabled}
+        text="Submit"
+        onPress={() => {
+          formRef.current?.submitForm();
+        }}
+      />
+    </ScrollView>
+  );
+}
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      (t) =>
+        StyleSheet.create({
+          container: {
+            rowGap: t.size.baseSize * 2,
+            paddingTop: t.size.baseSize * 4,
+            paddingHorizontal: t.size.baseSize * 4,
+          },
+        }),
+      []
+    )
+  );

example/app/formSwitchToggleGallery.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useRef, useState } from "react";
+import { Alert, ScrollView, StyleSheet } from "react-native";
+
+import { FormApi } from "informed";
+
+import {
+  useThemedStyle,
+  FormSwitchToggle,
+  Form,
+  Button,
+} from "atlas-design-system";
+
+type FormType = {
+  likes_f1?: string 
+}
+
+export default function FormSwitchToggleInputGallery() {
+  const styles = useStyles().styles;
+  const formRef = useRef<FormApi>();
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Form
+        validateOn="change"
+        allowEmptyStrings={false}
+        onSubmit={(formState) => {
+          const { values } = formState;
+          const typedValue: FormType = values;
+
+          if (typedValue.likes_f1) {
+            Alert.alert("Checkerd Flagg", 'You won the race!');
+          } else {
+            Alert.alert("Black Flagg", "You were given a black flag");
+          }
+        }}
+        formApiRef={formRef}
+      >
+        <FormSwitchToggle
+          required
+          name="likes_f1"
+          label="Do you like Formula 1"
+        />
+      </Form>
+      <Button
+        text="Submit"
+        onPress={() => {
+          formRef.current?.submitForm();
+        }}
+      />
+    </ScrollView>
+  );
+}
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      (t) =>
+        StyleSheet.create({
+          container: {
+            rowGap: t.size.baseSize * 2,
+            paddingTop: t.size.baseSize * 4,
+            paddingHorizontal: t.size.baseSize * 4,
+          },
+        }),
+      []
+    )
+  );

example/app/formTextInputGallery.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useRef, useState } from "react";
+import { Alert, ScrollView, StyleSheet } from "react-native";
+
+import { FormApi } from "informed";
+
+import {
+  useThemedStyle,
+  FormTextInput,
+  Form,
+  Button,
+} from "atlas-design-system";
+
+type FormType = {
+    favorite_food?: string 
+}
+
+export default function FormTextInputGallery() {
+  const styles = useStyles().styles;
+  const formRef = useRef<FormApi>();
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Form
+        validateOn="change"
+        allowEmptyStrings={false}
+        onSubmit={(formState) => {
+          const { values } = formState;
+          const typedValue: FormType = values;
+          Alert.alert("Your Favorite Food", typedValue.favorite_food);
+        }}
+        onValid={() => {
+          setEnabled(true);
+        }}
+        onInvalid={() => {
+          setEnabled(false);
+        }}
+        formApiRef={formRef}
+      >
+        <FormTextInput
+          required
+          name="favorite_food"
+          label="Enter your favorite food"
+        />
+      </Form>
+      <Button
+        disabled={!enabled}
+        text="Submit"
+        onPress={() => {
+          formRef.current?.submitForm();
+        }}
+      />
+    </ScrollView>
+  );
+}
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      (t) =>
+        StyleSheet.create({
+          container: {
+            rowGap: t.size.baseSize * 2,
+            paddingTop: t.size.baseSize * 4,
+            paddingHorizontal: t.size.baseSize * 4,
+          },
+        }),
+      []
+    )
+  );

example/app/index.tsx

@@ -1,9 +1,11 @@
-import { ScrollView } from "react-native";
+import { ScrollView, StyleSheet } from "react-native";
 import { router } from "expo-router";
 
-import { NavigationListRow } from "atlas-design-system";
+import { NavigationListRow, Text, useThemedStyle } from "atlas-design-system";
+import { useCallback } from "react";
 
 export default function Index() {
+  const styles = useStyles().styles;
   return (
     <ScrollView
       contentContainerStyle={{
@@ -59,6 +61,43 @@ export default function Index() {
         }}
         label="Navigation List Row"
       />
+      <Text style={styles.sectionHeader} category="h2">
+        Form Components
+      </Text>
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/formTextInputGallery");
+        }}
+        label="Form Text Input"
+      />
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/formSwitchToggleGallery");
+        }}
+        label="Form Switch Toggle"
+      />
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/formDateTimeInputGallery");
+        }}
+        label="Form Date Time Input"
+      />
     </ScrollView>
   );
 }
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      (t) =>
+        StyleSheet.create({
+          sectionHeader: {
+            paddingTop: t.size.baseSize * 4,
+            paddingHorizontal: t.size.baseSize * 4,
+            alignSelf: "flex-start",
+            paddingBottom: t.size.baseSize * 2,
+          },
+        }),
+      []
+    )
+  );

example/app/navigationListRowGallery.tsx

@@ -1,9 +1,9 @@
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import { Alert, ScrollView, StyleSheet } from "react-native";
 
 import { NavigationListRow, useThemedStyle } from "atlas-design-system";
 
-export default function DateTimeInputGallery() {
+export default function NavigationListRowGallery() {
   const styles = useStyles().styles;
 
   return (
@@ -25,7 +25,6 @@ const useStyles = () =>
         StyleSheet.create({
           container: {
             paddingTop: t.size.baseSize *4,
-            paddingHorizontal: t.size.baseSize * 4,
           },
         }),
       []

example/app/textInputGallery.tsx

@@ -3,12 +3,12 @@ import { ScrollView, StyleSheet } from "react-native";
 
 import { TextInput, useThemedStyle } from "atlas-design-system";
 
-export default function DateTimeInputGallery() {
+export default function TextInputGallery() {
   const styles = useStyles().styles;
-  const [text, setText] = useState();
+  const [text, setText] = useState('');
   return (
     <ScrollView contentContainerStyle={styles.container}>
-      <TextInput value={text} onChange={setText} label="Text Input"/>
+      <TextInput value={text} onChangeText={setText} label="Text Input"/>
     </ScrollView>
   );
 }

example/package.json

@@ -27,6 +27,7 @@
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
     "expo-web-browser": "~13.0.3",
+    "informed": "^4.60.3",
     "moment": "^2.30.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

example/tsconfig.json

@@ -3,8 +3,9 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
+      "atlas-design-system": ["../"],
       "@/*": [
-        "./*"
+        "./*",
       ]
     }
   },

example/yarn.lock

@@ -4501,6 +4501,13 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
+informed@^4.60.3:
+  version "4.60.3"
+  resolved "https://registry.yarnpkg.com/informed/-/informed-4.60.3.tgz#381ad88aa29e3b46c90abfc8938aa28eaba8b20b"
+  integrity sha512-ZCs/Yky8RiJ1F0qoNJm1vrRpInRO2PplIiO5I1YRDxiiXEaa8X+LiZQiotva5fSmEws4RVfg+L0J6M+Q0HTGaA==
+  optionalDependencies:
+    react-dom "^16.8.0 || ^17.0.0 || ^18.0.0"
+
 inherits@2, [email protected], inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
@@ -6722,6 +6729,14 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.2"
+
 react-fast-compare@^3.2.2:
   version "3.2.2"
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
@@ -7167,7 +7182,7 @@ [email protected]:
   dependencies:
     loose-envify "^1.1.0"
 
-scheduler@^0.23.0:
+scheduler@^0.23.0, scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz"
   integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==