aport-tools 4.1.2 → 4.1.22

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './theme';
 export * from './buttons';
 export * from './cards';
 export * from './fonts';
+export * from './forms';

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-/*! aport-tools v4.1.2 | ISC */
+/*! aport-tools v4.1.22 | ISC */
 import React, { createContext, useState, useEffect, useContext, useMemo } from 'react';
-import { Appearance, StyleSheet, View, Text as Text$1, Switch, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
+import { Appearance, StyleSheet, View, Text as Text$1, Switch, TouchableOpacity, ActivityIndicator, Platform, TextInput } from 'react-native';
 import { useAsyncStorage } from '@react-native-async-storage/async-storage';
 
 /******************************************************************************
@@ -20,6 +20,29 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -313,9 +336,9 @@ var ThemeToggle = function ThemeToggle() {
     toggleTheme = _a.toggleTheme;
   var isDarkMode = theme.colors === darkTheme;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$2.container
+    style: styles$6.container
   }, /*#__PURE__*/React.createElement(Text$1, {
-    style: [styles$2.text, {
+    style: [styles$6.text, {
       color: theme.colors.text.hex
     }]
   }, "Dark Mode"), /*#__PURE__*/React.createElement(Switch, {
@@ -328,7 +351,7 @@ var ThemeToggle = function ThemeToggle() {
     thumbColor: isDarkMode ? darkTheme.secondary.hex : lightTheme.primary.hex
   }));
 };
-var styles$2 = StyleSheet.create({
+var styles$6 = StyleSheet.create({
   container: {
     marginTop: 20,
     flexDirection: 'row',
@@ -403,11 +426,11 @@ var Button = function Button(_a) {
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   var computedStyles = useMemo(function () {
-    return StyleSheet.flatten([styles$1.button, typeStyles(type, disabled, colors), rounded && {
+    return StyleSheet.flatten([styles$5.button, typeStyles(type, disabled, colors), rounded && {
       borderRadius: borderRadius
     }, isFullWidth && {
       width: '100%'
-    }, (disabled || loading) && styles$1.disabled]);
+    }, (disabled || loading) && styles$5.disabled]);
   }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
   var textColor = useMemo(function () {
     return {
@@ -429,7 +452,7 @@ var Button = function Button(_a) {
     style: textColor
   }, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase())));
 };
-var styles$1 = StyleSheet.create({
+var styles$5 = StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -485,7 +508,7 @@ var Card = function Card(_a) {
       elevation: elevation // Only applies to Android
     }
   });
-  var cardStyles = [styles.container, {
+  var cardStyles = [styles$4.container, {
     borderRadius: borderRadius,
     backgroundColor: colors.body.hex
   }, defaultShadow,
@@ -500,7 +523,7 @@ var Card = function Card(_a) {
     style: cardStyles
   }, children));
 };
-var styles = StyleSheet.create({
+var styles$4 = StyleSheet.create({
   container: {
     padding: 16,
     borderRadius: 12
@@ -572,5 +595,221 @@ StyleSheet.create({
   // Define any default styles if needed
 });
 
-export { Button, Card, Text, ThemeContext, ThemeProvider, ThemeToggle };
+// src/forms/FormContext.tsx
+var FormContext = /*#__PURE__*/createContext(undefined);
+var useFormContext = function useFormContext() {
+  var context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within a Form");
+  }
+  return context;
+};
+var Form = function Form(_a) {
+  var children = _a.children,
+    onSubmit = _a.onSubmit;
+  var _b = useState({}),
+    formValues = _b[0],
+    setFormValues = _b[1];
+  var _c = useState({}),
+    errors = _c[0],
+    setErrors = _c[1];
+  var setFormValue = function setFormValue(name, value) {
+    setFormValues(function (prev) {
+      var _a;
+      return __assign(__assign({}, prev), (_a = {}, _a[name] = value, _a));
+    });
+  };
+  var handleSubmit = function handleSubmit() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var validationErrors;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4 /*yield*/, onSubmit(formValues)];
+          case 1:
+            validationErrors = _a.sent();
+            // Set the validation errors in state
+            setErrors(validationErrors);
+            // Prevent submission if there are any errors
+            if (Object.keys(validationErrors).length > 0) {
+              return [2 /*return*/]; // Prevent submission
+            }
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: {
+      formValues: formValues,
+      setFormValue: setFormValue,
+      errors: errors,
+      setErrors: setErrors,
+      handleSubmit: handleSubmit
+    }
+  }, children);
+};
+
+// src/forms/ErrorList.tsx
+var ErrorList = function ErrorList(_a) {
+  var errors = _a.errors;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$3.container
+  }, errors.map(function (error, index) {
+    return /*#__PURE__*/React.createElement(View, {
+      key: index,
+      style: styles$3.errorItem
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles$3.bullet
+    }, "\u2022"), /*#__PURE__*/React.createElement(Text, {
+      style: styles$3.errorText
+    }, error));
+  }));
+};
+var styles$3 = StyleSheet.create({
+  container: {
+    marginTop: 4
+  },
+  errorItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 2
+  },
+  bullet: {
+    marginRight: 4,
+    color: '#FF5252',
+    // Should use 'error' color from theme
+    fontSize: 12
+  },
+  errorText: {
+    flex: 1,
+    color: '#FF5252',
+    // Should use 'error' color from theme
+    fontSize: 12
+  }
+});
+
+// src/forms/Input.tsx
+var Input = function Input(_a) {
+  var name = _a.name,
+    label = _a.label,
+    style = _a.style,
+    rest = __rest(_a, ["name", "label", "style"]);
+  var _b = useFormContext(),
+    formValues = _b.formValues,
+    setFormValue = _b.setFormValue,
+    formErrors = _b.errors;
+  var theme = useContext(ThemeContext).theme;
+  var colors = theme.colors;
+  var handleChange = function handleChange(text) {
+    setFormValue(name, text);
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$2.container
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles$2.label, {
+      color: colors.text.hex
+    }]
+  }, label), /*#__PURE__*/React.createElement(TextInput, __assign({
+    style: [styles$2.input, {
+      backgroundColor: colors.body.hex,
+      borderColor: formErrors[name] ? colors.error.hex : '#CCC',
+      color: colors.text.hex
+    }, style],
+    value: formValues[name] || '',
+    onChangeText: handleChange,
+    placeholder: label,
+    placeholderTextColor: colors.text.hex
+  }, rest)), formErrors[name] && formErrors[name].length > 0 && (/*#__PURE__*/React.createElement(ErrorList, {
+    errors: formErrors[name]
+  })));
+};
+var styles$2 = StyleSheet.create({
+  container: {
+    marginBottom: 16
+  },
+  label: {
+    marginBottom: 4,
+    fontSize: 14
+  },
+  input: {
+    height: 40,
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 8
+  }
+});
+
+// src/forms/TextArea.tsx
+var TextArea = function TextArea(_a) {
+  var name = _a.name,
+    label = _a.label;
+    _a.errors;
+    var style = _a.style,
+    rest = __rest(_a, ["name", "label", "errors", "style"]);
+  var _b = useFormContext(),
+    formValues = _b.formValues,
+    setFormValue = _b.setFormValue,
+    formErrors = _b.errors;
+  var handleChange = function handleChange(text) {
+    setFormValue(name, text);
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$1.container
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles$1.label
+  }, label), /*#__PURE__*/React.createElement(TextInput, __assign({
+    style: [styles$1.textArea, style],
+    value: formValues[name] || '',
+    onChangeText: handleChange,
+    placeholder: label,
+    placeholderTextColor: "#888" // Can be themed if needed
+    ,
+    multiline: true,
+    numberOfLines: 4,
+    textAlignVertical: "top"
+  }, rest)), formErrors[name] && formErrors[name].length > 0 && (/*#__PURE__*/React.createElement(ErrorList, {
+    errors: formErrors[name]
+  })));
+};
+var styles$1 = StyleSheet.create({
+  container: {
+    marginBottom: 16
+  },
+  label: {
+    marginBottom: 4,
+    color: '#000' // Should be themed
+  },
+  textArea: {
+    height: 100,
+    borderColor: '#CCC',
+    // Should be themed
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    backgroundColor: '#FFFFFF',
+    // Should use 'body' color from theme
+    color: '#000' // Should use 'text' color from theme
+  }
+});
+
+// src/forms/Label.tsx
+var Label = function Label(_a) {
+  var text = _a.text,
+    style = _a.style;
+  return /*#__PURE__*/React.createElement(Text, {
+    style: [styles.label, style]
+  }, text);
+};
+var styles = StyleSheet.create({
+  label: {
+    marginBottom: 4,
+    color: '#000',
+    // Should be themed
+    fontWeight: '500'
+  }
+});
+
+export { Button, Card, ErrorList, Form, Input, Label, Text, TextArea, ThemeContext, ThemeProvider, ThemeToggle, useFormContext };
 //# sourceMappingURL=index.esm.js.map