@app-studio/web 0.3.56 → 0.3.58

package/dist/components/Form/TextField/TextField/TextField.state.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { TextFieldProps } from './TextField.props';
-export declare const useTextFieldState: ({ label, placeholder, }: TextFieldProps) => {
+export declare const useTextFieldState: ({ label, placeholder, value: defaultValue, }: TextFieldProps) => {
     hint: string | undefined;
     setHint: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     isFocused: boolean;
     setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     isHovered: boolean;
     setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
-    value: string;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    value: string | undefined;
 };

package/dist/components/Formik/Formik.Checkbox.d.ts

@@ -3,4 +3,4 @@ import { CheckboxProps } from '../Form/Checkbox/Checkbox/Checkbox.props';
 /**
  * Checkbox allows users to select one or more options from a list of choices.
  */
-export declare const Checkbox: React.FC<CheckboxProps>;
+export declare const FormikCheckbox: React.FC<CheckboxProps>;

package/dist/components/Formik/Formik.CountryPicker.d.ts

@@ -3,4 +3,4 @@ import { CountryPickerProps } from '../Form/CountryPicker/CountryPicker/CountryP
 /**
  * Country picker allows users to select a country from a dropdown list or search field.
  */
-export declare const CountryPicker: React.FC<CountryPickerProps>;
+export declare const FormikCountryPicker: React.FC<CountryPickerProps>;

package/dist/components/Formik/Formik.DatePicker.d.ts

@@ -3,4 +3,4 @@ import { DatePickerProps } from '../Form/DatePicker/DatePicker/DatePicker.props'
 /**
  * Date picker allows users to select a date from a calendar view.
  */
-export declare const DatePicker: React.FC<DatePickerProps>;
+export declare const FormikDatePicker: React.FC<DatePickerProps>;

package/dist/components/Formik/Formik.Form.d.ts

@@ -21,5 +21,5 @@ interface FocusContextType {
     setInputRef: (name: string, ref: HTMLInputElement | null) => void;
 }
 export declare const useFormFocus: () => FocusContextType;
-export declare const Form: <T extends {}>({ children, autoFocus, initFocus, }: any) => React.JSX.Element;
+export declare const FormikForm: <T extends {}>({ children, autoFocus, initFocus, }: any) => React.JSX.Element;
 export {};

package/dist/components/Formik/Formik.Password.d.ts

@@ -3,4 +3,4 @@ import { PasswordProps } from '../Form/Password/Password/Password.props';
 /**
  * To allow users to securely enter sensitive information
  */
-export declare const Password: React.FC<PasswordProps>;
+export declare const FormikPassword: React.FC<PasswordProps>;

package/dist/components/Formik/Formik.Select.d.ts

@@ -3,4 +3,4 @@ import { SelectProps } from '../Form/Select/Select/Select.props';
 /**
  * Select provides a dropdown list of options for the user to choose from.
  */
-export declare const Select: React.FC<SelectProps>;
+export declare const FormikSelect: React.FC<SelectProps>;

package/dist/components/Formik/Formik.Switch.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SwitchProps } from '../Form/Switch/Switch/Switch.props';
-export declare const Switch: React.FC<SwitchProps>;
+export declare const FormikSwitch: React.FC<SwitchProps>;

package/dist/components/Formik/Formik.TextArea.d.ts

@@ -3,4 +3,4 @@ import { TextAreaProps } from '../Form/TextArea/TextArea/TextArea.props';
 /**
  * Text Area is an component used to create a multi-line input field.
  */
-export declare const TextArea: React.FC<TextAreaProps>;
+export declare const FormikTextArea: React.FC<TextAreaProps>;

package/dist/components/Formik/Formik.TextField.d.ts

@@ -3,4 +3,4 @@ import { TextFieldProps } from '../Form/TextField/TextField/TextField.props';
 /**
  * TextField is used to capture text data from users.
  */
-export declare const TextField: React.FC<TextFieldProps>;
+export declare const FormikTextField: React.FC<TextFieldProps>;

package/dist/components/Formik/examples/FormikCheckbox.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormCheckbox: () => React.JSX.Element;
+export declare const FormCheckboxExemple: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikCountryPicker.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormikCountryPicker: () => React.JSX.Element;
+export declare const FormikCountryPickerExemple: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikDatePicker.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormikDatePicker: () => React.JSX.Element;
+export declare const FormikDatePickerExemple: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikPassword.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormikPassword: () => React.JSX.Element;
+export declare const FormikPasswordExemple: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikSelect.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormikSelect: () => React.JSX.Element;
+export declare const FormikSelectExemple: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikSwitch.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormikSwitch: () => React.JSX.Element;
+export declare const FormikSwitchExemple: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikTextArea.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormikTextArea: () => React.JSX.Element;
+export declare const FormikTextAreaExemple: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikTextField.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FormikTextField: () => React.JSX.Element;
+export declare const FormikTextFieldExemple: () => React.JSX.Element;

package/dist/components/Formik/index.d.ts

@@ -1,9 +1,9 @@
-export { Checkbox } from './Formik.Checkbox';
-export { DatePicker } from './Formik.DatePicker';
-export { CountryPicker } from './Formik.CountryPicker';
-export { Select } from './Formik.Select';
-export { Switch } from './Formik.Switch';
-export { TextArea } from './Formik.TextArea';
-export { TextField } from './Formik.TextField';
-export { Password } from './Formik.Password';
-export { Form } from './Formik.Form';
+export { FormikCheckbox } from './Formik.Checkbox';
+export { FormikDatePicker } from './Formik.DatePicker';
+export { FormikCountryPicker } from './Formik.CountryPicker';
+export { FormikSelect } from './Formik.Select';
+export { FormikSwitch } from './Formik.Switch';
+export { FormikTextArea } from './Formik.TextArea';
+export { FormikTextField } from './Formik.TextField';
+export { FormikPassword } from './Formik.Password';
+export { FormikForm } from './Formik.Form';

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './Form/Switch/Switch';
 export * from './Form/TextArea/TextArea';
 export * from './Form/TextField/TextField';
 export * from './Layout/Center/Center';
+export * from './Formik';
 export * from './Layout/Horizontal/Horizontal';
 export * from './Layout/Vertical/Vertical';
 export * from './Layout/View/View';

package/dist/web.cjs.development.js

@@ -9,6 +9,7 @@ var React__default = _interopDefault(React);
 var appStudio = require('app-studio');
 var reactRouterDom = require('react-router-dom');
 var format = _interopDefault(require('date-fns/format'));
+var formik = require('formik');
 var zustand = require('zustand');
 
 var useButtonState = function useButtonState() {
@@ -3349,7 +3350,8 @@ var DatePicker = DatePickerComponent;
 
 var useTextFieldState = function useTextFieldState(_ref) {
   var label = _ref.label,
-    placeholder = _ref.placeholder;
+    placeholder = _ref.placeholder,
+    defaultValue = _ref.value;
   var _useState = React.useState(label != null ? label : placeholder),
     hint = _useState[0],
     setHint = _useState[1];
@@ -3359,7 +3361,7 @@ var useTextFieldState = function useTextFieldState(_ref) {
   var _useState3 = React.useState(false),
     isHovered = _useState3[0],
     setIsHovered = _useState3[1];
-  var _useState4 = React.useState(''),
+  var _useState4 = React.useState(defaultValue),
     value = _useState4[0],
     setValue = _useState4[1];
   React.useMemo(function () {
@@ -4391,6 +4393,258 @@ var TextFieldComponent = function TextFieldComponent(props) {
  */
 var TextField = TextFieldComponent;
 
+var FocusContext = /*#__PURE__*/React.createContext({
+  active: false,
+  focusNextInput: function focusNextInput() {},
+  setInputRef: function setInputRef() {},
+  handleSubmitEditing: function handleSubmitEditing() {},
+  getReturnKeyType: function getReturnKeyType() {
+    return 'next';
+  }
+});
+var useFormFocus = function useFormFocus() {
+  return React.useContext(FocusContext);
+};
+var FormikForm = function FormikForm(_ref) {
+  var children = _ref.children,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    initFocus = _ref.initFocus;
+  var formik$1 = formik.useFormikContext();
+  var inputRefs = React.useRef({});
+  var inputNames = React.useRef([]);
+  var setInputRef = function setInputRef(name, ref) {
+    inputRefs.current[name] = ref;
+    if (!inputNames.current.includes(name)) {
+      inputNames.current.push(name);
+    }
+  };
+  var focusNextInput = function focusNextInput(currentName) {
+    if (autoFocus) {
+      var currentIndex = inputNames.current.indexOf(currentName);
+      var nextIndex = currentIndex + 1;
+      if (nextIndex < inputNames.current.length) {
+        var _inputRefs$current$in;
+        (_inputRefs$current$in = inputRefs.current[inputNames.current[nextIndex]]) == null || _inputRefs$current$in.focus();
+      } else if (formik$1.onSubmit) {
+        formik$1.onSubmit(formik$1.values);
+      }
+    }
+  };
+  var contextValue = {
+    active: autoFocus,
+    focusNextInput: focusNextInput,
+    setInputRef: setInputRef,
+    handleSubmitEditing: focusNextInput,
+    getReturnKeyType: function getReturnKeyType(name) {
+      return inputNames.current.indexOf(name) === inputNames.current.length - 1 ? 'done' : 'next';
+    }
+  };
+  React.useEffect(function () {
+    if (autoFocus) {
+      if (initFocus && inputRefs.current[initFocus]) {
+        var _inputRefs$current$in2;
+        (_inputRefs$current$in2 = inputRefs.current[initFocus]) == null || _inputRefs$current$in2.focus();
+      } else if (inputNames.current[0]) {
+        var _inputRefs$current$in3;
+        (_inputRefs$current$in3 = inputRefs.current[inputNames.current[0]]) == null || _inputRefs$current$in3.focus();
+      }
+    }
+  }, [autoFocus, initFocus]);
+  return React__default.createElement(FocusContext.Provider, {
+    value: contextValue
+  }, React__default.createElement(appStudio.Form, null, children));
+};
+
+var _excluded$u = ["name", "type"];
+var getInputTypeProps = function getInputTypeProps(type) {
+  switch (type) {
+    case 'email':
+      return {
+        autoCorrect: 'off',
+        keyboardType: 'email-address',
+        autoCapitalize: 'none'
+      };
+    case 'password':
+      return {
+        autoCorrect: 'off',
+        secureTextEntry: true,
+        autoCapitalize: 'none'
+      };
+    case 'digits':
+      return {
+        keyboardType: 'phone-pad'
+      };
+    case 'name':
+      return {
+        autoCorrect: 'off'
+      };
+    default:
+      return {};
+  }
+};
+var useFormikInput = function useFormikInput(_ref) {
+  var name = _ref.name,
+    type = _ref.type,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+  var focus = useFormFocus();
+  var _useFormikContext = formik.useFormikContext(),
+    touched = _useFormikContext.touched,
+    errors = _useFormikContext.errors,
+    submitCount = _useFormikContext.submitCount,
+    values = _useFormikContext.values,
+    setFieldTouched = _useFormikContext.setFieldTouched,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var error = touched[name] || submitCount > 0 ? errors[name] : undefined;
+  var onChangeText = function onChangeText(text) {
+    setFieldValue(name, text);
+    props.onChangeText == null || props.onChangeText(text);
+  };
+  var onChange = function onChange(value) {
+    setFieldValue(name, value);
+    props.onChange == null || props.onChange(value);
+  };
+  var handleBlur = function handleBlur() {
+    setFieldTouched(name, true);
+    // if(props.onBlur)props.onBlur();
+  };
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      focus.focusNextInput(name);
+    }
+  };
+  var isText = ['text', 'password', 'email', 'digits'].includes(type);
+  return _extends({}, getInputTypeProps(type), props, {
+    value: values[name],
+    error: error,
+    onBlur: handleBlur,
+    onKeyPress: handleKeyPress
+  }, isText ? {
+    onChangeText: onChangeText
+  } : {
+    onChange: onChange
+  }, focus.active ? {
+    handleKeyPress: handleKeyPress
+  } : {});
+};
+// import FormPicker from 'src/Picker/Picker';
+// import FormRater from 'src/Rate/Rate';
+// import Upload from 'src/Upload/Upload';
+
+var _excluded$v = ["value"];
+var CheckboxComponent$1 = function CheckboxComponent(props) {
+  var _useFormikInput = useFormikInput(props),
+    value = _useFormikInput.value,
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$v);
+  formProps.isChecked = value;
+  var checkboxStates = useCheckboxState(props);
+  return React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
+};
+/**
+ * Checkbox allows users to select one or more options from a list of choices.
+ */
+var FormikCheckbox = CheckboxComponent$1;
+
+var DatePickerComponent$1 = function DatePickerComponent(props) {
+  var formProps = useFormikInput(props);
+  var datePickerStates = useDatePickerState();
+  return React__default.createElement(DatePickerView, Object.assign({}, datePickerStates, formProps));
+};
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+var FormikDatePicker = DatePickerComponent$1;
+
+var CountryPickerComponent$1 = function CountryPickerComponent(props) {
+  var formProps = useFormikInput(props);
+  var countryPickerStates = useCountryPickerState(props);
+  return React__default.createElement(CountryPickerView, Object.assign({}, countryPickerStates, formProps));
+};
+/**
+ * Country picker allows users to select a country from a dropdown list or search field.
+ */
+var FormikCountryPicker = CountryPickerComponent$1;
+
+var SelectComponent$1 = function SelectComponent(props) {
+  var formProps = useFormikInput(props);
+  formProps.selected = formProps.value;
+  var selectStates = useSelectState(props);
+  return React__default.createElement(SelectView, Object.assign({}, selectStates, formProps));
+};
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+var FormikSelect = SelectComponent$1;
+
+var _excluded$w = ["value"];
+var SwitchComponent$1 = function SwitchComponent(props) {
+  var _useFormikInput = useFormikInput(props),
+    value = _useFormikInput.value,
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$w);
+  formProps.isChecked = value;
+  var switchStates = useSwitchState(props);
+  return React__default.createElement(SwitchView, Object.assign({}, switchStates, formProps));
+};
+var FormikSwitch = SwitchComponent$1;
+
+var TextAreaComponent$1 = function TextAreaComponent(props) {
+  var formProps = useFormikInput(props);
+  var textAreaState = useTextAreaState(props);
+  return React__default.createElement(TextAreaView, Object.assign({}, textAreaState, formProps));
+};
+/**
+ * Text Area is an component used to create a multi-line input field.
+ */
+var FormikTextArea = TextAreaComponent$1;
+
+var _excluded$x = ["value"];
+var TextFieldComponent$1 = function TextFieldComponent(props) {
+  var formProps = useFormikInput(props);
+  var _useTextFieldState = useTextFieldState(props),
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$x);
+  return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+var FormikTextField = TextFieldComponent$1;
+
+var _excluded$y = ["visibleIcon", "hiddenIcon"],
+  _excluded2$3 = ["isVisible", "setIsVisible"];
+var PasswordComponent$1 = function PasswordComponent(_ref) {
+  var _ref$visibleIcon = _ref.visibleIcon,
+    visibleIcon = _ref$visibleIcon === void 0 ? React__default.createElement(OpenEyeSvg, {
+      size: 14
+    }) : _ref$visibleIcon,
+    _ref$hiddenIcon = _ref.hiddenIcon,
+    hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
+      size: 14
+    }) : _ref$hiddenIcon,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+  var formProps = useFormikInput(props);
+  var _usePasswordState = usePasswordState(formProps),
+    isVisible = _usePasswordState.isVisible,
+    setIsVisible = _usePasswordState.setIsVisible,
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$3);
+  return React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
+    type: isVisible ? 'text' : 'password',
+    isClearable: false,
+    rightChild: React__default.createElement(appStudio.View, {
+      onClick: function onClick() {
+        if (!props.isDisabled) {
+          setIsVisible(!isVisible);
+        }
+      }
+    }, isVisible ? visibleIcon : hiddenIcon)
+  }));
+};
+/**
+ * To allow users to securely enter sensitive information
+ */
+var FormikPassword = PasswordComponent$1;
+
 var useModalStore = /*#__PURE__*/zustand.create(function (set) {
   return {
     modal: false,
@@ -4476,8 +4730,8 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$u = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$3 = ["children", "shadow", "isFullScreen", "shape"],
+var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
   _excluded5 = ["children"];
@@ -4492,7 +4746,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4525,7 +4779,7 @@ var ModalContainer = function ModalContainer(_ref2) {
     isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
     _ref2$shape = _ref2.shape,
     shape = _ref2$shape === void 0 ? 'rounded' : _ref2$shape,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
   } : {
@@ -4648,12 +4902,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$v = ["src", "color"],
-  _excluded2$4 = ["path"];
+var _excluded$A = ["src", "color"],
+  _excluded2$5 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {
@@ -4668,7 +4922,7 @@ var FileSVG = function FileSVG(_ref) {
 };
 var FileImage = function FileImage(_ref2) {
   var path = _ref2.path,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
   return React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -4682,6 +4936,15 @@ exports.CountryPicker = CountryPicker;
 exports.DatePicker = DatePicker;
 exports.FileImage = FileImage;
 exports.FileSVG = FileSVG;
+exports.FormikCheckbox = FormikCheckbox;
+exports.FormikCountryPicker = FormikCountryPicker;
+exports.FormikDatePicker = FormikDatePicker;
+exports.FormikForm = FormikForm;
+exports.FormikPassword = FormikPassword;
+exports.FormikSelect = FormikSelect;
+exports.FormikSwitch = FormikSwitch;
+exports.FormikTextArea = FormikTextArea;
+exports.FormikTextField = FormikTextField;
 exports.Horizontal = Horizontal;
 exports.Inline = Inline;
 exports.Left = Left;