aport-tools 4.1.1 → 4.1.21

package/dist/components/Button.d.ts

@@ -31,6 +31,10 @@ interface ButtonProps {
      * Specifies the button type for styling. Can be 'submit', 'button', or 'cancel'.
      */
     type?: 'submit' | 'button' | 'cancel';
+    /**
+     * If true, a loading spinner is shown and the button is disabled.
+     */
+    loading?: boolean;
 }
 /**
  * Button component that adapts its styles based on the current theme.

package/dist/fonts/Text.d.ts

@@ -38,7 +38,7 @@ interface CustomTextProps extends TextProps {
     /**
      * Additional styles to apply to the Text component.
      */
-    style?: TextStyle;
+    style?: TextStyle | TextStyle[];
 }
 /**
  * A dynamic Text component that supports HTML-like formatting.

package/dist/forms/ErrorList.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ErrorListProps {
+    errors: string[];
+}
+declare const ErrorList: React.FC<ErrorListProps>;
+export default ErrorList;

package/dist/forms/Form.d.ts

@@ -0,0 +1 @@
+export { Form, useFormContext } from './FormContext';

package/dist/forms/FormContext.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+interface FormContextProps {
+    formValues: Record<string, any>;
+    setFormValue: (name: string, value: any) => void;
+    errors: Record<string, string[]>;
+    setErrors: (errors: Record<string, string[]>) => void;
+    handleSubmit: () => void;
+}
+export declare const useFormContext: () => FormContextProps;
+interface FormProps {
+    children: ReactNode;
+    onSubmit: (values: Record<string, any>) => Promise<Record<string, string[]>>;
+}
+export declare const Form: React.FC<FormProps>;
+export {};

package/dist/forms/Input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInputProps } from 'react-native';
+interface InputProps extends TextInputProps {
+    name: string;
+    label: string;
+}
+export declare const Input: React.FC<InputProps>;
+export {};

package/dist/forms/Label.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LabelProps {
+    text: string;
+    style?: any;
+}
+declare const Label: React.FC<LabelProps>;
+export default Label;

package/dist/forms/TextArea.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TextInputProps } from 'react-native';
+interface TextAreaProps extends TextInputProps {
+    name: string;
+    label: string;
+    errors?: string[];
+}
+declare const TextArea: React.FC<TextAreaProps>;
+export default TextArea;

package/dist/forms/index.d.ts

@@ -0,0 +1,5 @@
+export { Input } from './Input';
+export { Form, useFormContext } from './FormContext';
+export { default as TextArea } from './TextArea';
+export { default as Label } from './Label';
+export { default as ErrorList } from './ErrorList';

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.1 | ISC */
+/*! aport-tools v4.1.21 | ISC */
 import React, { createContext, useState, useEffect, useContext, useMemo } from 'react';
-import { Appearance, StyleSheet, View, Text as Text$1, Switch, TouchableOpacity, 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',
@@ -397,16 +420,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 = 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 && styles$1.disabled]);
-  }, [type, disabled, rounded, borderRadius, isFullWidth, colors]);
+    }, (disabled || loading) && styles$5.disabled]);
+  }, [type, disabled, loading, rounded, borderRadius, isFullWidth, colors]);
   var textColor = useMemo(function () {
     return {
       color: colors.textButton.hex
@@ -414,14 +439,20 @@ var Button = function Button(_a) {
   }, [type, colors]);
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: computedStyles,
-    disabled: disabled,
+    disabled: disabled || loading,
     onPress: onPress,
     activeOpacity: 0.7
-  }, /*#__PURE__*/React.createElement(Text$1, {
+  }, loading ? (
+  /*#__PURE__*/
+  // Show loading spinner if loading
+  React.createElement(ActivityIndicator, {
+    size: "small",
+    color: colors.textButton.hex
+  })) : (/*#__PURE__*/React.createElement(Text$1, {
     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 = StyleSheet.create({
+var styles$5 = StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -477,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,
@@ -492,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
@@ -564,5 +595,216 @@ 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();
+            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(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