aport-tools 4.1.1 → 4.1.21

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! aport-tools v4.1.1 | ISC */
+/*! aport-tools v4.1.21 | ISC */
 'use strict';
 
 var React = require('react');
@@ -22,6 +22,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) {
@@ -315,9 +338,9 @@ var ThemeToggle = function ThemeToggle() {
     toggleTheme = _a.toggleTheme;
   var isDarkMode = theme.colors === darkTheme;
   return /*#__PURE__*/React.createElement(reactNative.View, {
-    style: styles$2.container
+    style: styles$6.container
   }, /*#__PURE__*/React.createElement(reactNative.Text, {
-    style: [styles$2.text, {
+    style: [styles$6.text, {
       color: theme.colors.text.hex
     }]
   }, "Dark Mode"), /*#__PURE__*/React.createElement(reactNative.Switch, {
@@ -330,7 +353,7 @@ var ThemeToggle = function ThemeToggle() {
     thumbColor: isDarkMode ? darkTheme.secondary.hex : lightTheme.primary.hex
   }));
 };
-var styles$2 = reactNative.StyleSheet.create({
+var styles$6 = reactNative.StyleSheet.create({
   container: {
     marginTop: 20,
     flexDirection: 'row',
@@ -399,16 +422,18 @@ var Button = function Button(_a) {
     borderRadius = _e === void 0 ? 30 : _e,
     _f = _a.isFullWidth,
     isFullWidth = _f === void 0 ? false : _f,
+    _g = _a.loading,
+    loading = _g === void 0 ? false : _g,
     onPress = _a.onPress;
   var theme = React.useContext(ThemeContext).theme;
   var colors = theme.colors;
   var computedStyles = React.useMemo(function () {
-    return reactNative.StyleSheet.flatten([styles$1.button, typeStyles(type, disabled, colors), rounded && {
+    return reactNative.StyleSheet.flatten([styles$5.button, typeStyles(type, disabled, colors), rounded && {
       borderRadius: borderRadius
     }, isFullWidth && {
       width: '100%'
-    }, disabled && styles$1.disabled]);
-  }, [type, disabled, rounded, borderRadius, isFullWidth, colors]);
+    }, (disabled || loading) && styles$5.disabled]);
+  }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
   var textColor = React.useMemo(function () {
     return {
       color: colors.textButton.hex
@@ -416,14 +441,20 @@ var Button = function Button(_a) {
   }, [type, colors]);
   return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
     style: computedStyles,
-    disabled: disabled,
+    disabled: disabled || loading,
     onPress: onPress,
     activeOpacity: 0.7
-  }, /*#__PURE__*/React.createElement(reactNative.Text, {
+  }, loading ? (
+  /*#__PURE__*/
+  // Show loading spinner if loading
+  React.createElement(reactNative.ActivityIndicator, {
+    size: "small",
+    color: colors.textButton.hex
+  })) : (/*#__PURE__*/React.createElement(reactNative.Text, {
     style: textColor
-  }, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase()));
+  }, Array.isArray(children) ? children.join('').toUpperCase() : children === null || children === void 0 ? void 0 : children.toUpperCase())));
 };
-var styles$1 = reactNative.StyleSheet.create({
+var styles$5 = reactNative.StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -479,7 +510,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,
@@ -494,7 +525,7 @@ var Card = function Card(_a) {
     style: cardStyles
   }, children));
 };
-var styles = reactNative.StyleSheet.create({
+var styles$4 = reactNative.StyleSheet.create({
   container: {
     padding: 16,
     borderRadius: 12
@@ -566,10 +597,227 @@ reactNative.StyleSheet.create({
   // Define any default styles if needed
 });
 
+// src/forms/FormContext.tsx
+var FormContext = /*#__PURE__*/React.createContext(undefined);
+var useFormContext = function useFormContext() {
+  var context = React.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 = React.useState({}),
+    formValues = _b[0],
+    setFormValues = _b[1];
+  var _c = React.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();
+            setErrors(validationErrors);
+            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(reactNative.View, {
+    style: styles$3.container
+  }, errors.map(function (error, index) {
+    return /*#__PURE__*/React.createElement(reactNative.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 = reactNative.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 = React.useContext(ThemeContext).theme;
+  var colors = theme.colors;
+  var handleChange = function handleChange(text) {
+    setFormValue(name, text);
+  };
+  return /*#__PURE__*/React.createElement(reactNative.View, {
+    style: styles$2.container
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles$2.label, {
+      color: colors.text.hex
+    }]
+  }, label), /*#__PURE__*/React.createElement(reactNative.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 = reactNative.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(reactNative.View, {
+    style: styles$1.container
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles$1.label
+  }, label), /*#__PURE__*/React.createElement(reactNative.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 = reactNative.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 = reactNative.StyleSheet.create({
+  label: {
+    marginBottom: 4,
+    color: '#000',
+    // Should be themed
+    fontWeight: '500'
+  }
+});
+
 exports.Button = Button;
 exports.Card = Card;
+exports.ErrorList = ErrorList;
+exports.Form = Form;
+exports.Input = Input;
+exports.Label = Label;
 exports.Text = Text;
+exports.TextArea = TextArea;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeToggle = ThemeToggle;
+exports.useFormContext = useFormContext;
 //# sourceMappingURL=index.js.map