@elliemae/pui-app-sdk 2.17.1 → 3.0.0-beta.10

package/dist/es/view/fields/check-box/index.stories.js

@@ -1,47 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import { get } from 'react-hook-form';
-import { Form } from "../../form/index.js";
-import { CheckBox, CHECKBOX_VARIANT } from "./index.js";
-import { ConnectForm } from "../connect-form.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const Template = ({
-  name,
-  ...rest
-}) => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx2(ConnectForm, {}, void 0, ({
-  formState: {
-    errors
-  }
-}) => {
-  const errField = get(errors, name);
-  const hasError = !!errField; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-
-  const ctrlVariant = hasError ? CHECKBOX_VARIANT.ERROR : CHECKBOX_VARIANT.DEFAULT;
-  return /*#__PURE__*/_jsx(CheckBox, {
-    name: name,
-    ...rest,
-    hasError: hasError,
-    variant: ctrlVariant
-  });
-}), /*#__PURE__*/_jsx(WatchValue, {
-  name: name,
-  ...rest
-}));
-
-export default {
-  title: 'Components/Form/Controls/CheckBox',
-  component: CheckBox
-};
-export const Basic = Template.bind({});
-Basic.args = {
-  name: 'acknowledge',
-  labelText: 'Acknowledge Electronic delivery of documents',
-  rules: {
-    required: {
-      value: true,
-      message: 'Please acknowledge'
-    }
-  },
-  defaultChecked: false
-};

package/dist/es/view/fields/check-box/set-value.stories.js

@@ -1,65 +0,0 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-import _styled from "styled-components";
-
-var _ToggleValue;
-
-import { useFormContext, get } from 'react-hook-form';
-import DSButton from '@elliemae/ds-basic/Button';
-import { Form } from "../../form/index.js";
-import { CheckBox, CHECKBOX_VARIANT } from "./index.js";
-import { ConnectForm } from "../connect-form.js";
-import { jsx as _jsx2 } from "react/jsx-runtime";
-const cbName = 'acknowledge';
-
-const ToggleValue = () => {
-  const {
-    setValue,
-    watch
-  } = useFormContext();
-  const currentValue = watch(cbName);
-  return /*#__PURE__*/_jsx(_StyledDSButton, {
-    size: "m",
-    labelText: "Toggle",
-    onClick: () => setValue(cbName, !currentValue, {
-      shouldDirty: true
-    })
-  });
-};
-
-const Template = ({
-  name,
-  ...rest
-}) => /*#__PURE__*/_jsx(Form, {}, void 0, /*#__PURE__*/_jsx(ConnectForm, {}, void 0, ({
-  formState: {
-    errors
-  }
-}) => {
-  const hasError = !!get(errors, name);
-  const ctrlVariant = get(errors, name) ? CHECKBOX_VARIANT.ERROR : CHECKBOX_VARIANT.DEFAULT;
-  return /*#__PURE__*/_jsx2(CheckBox, {
-    name: name,
-    ...rest,
-    hasError: hasError,
-    variant: ctrlVariant
-  });
-}), _ToggleValue || (_ToggleValue = /*#__PURE__*/_jsx(ToggleValue, {})));
-
-export default {
-  title: 'Components/Form/Controls/CheckBox'
-};
-export const SetValue = Template.bind({});
-SetValue.args = {
-  name: cbName,
-  labelText: 'Acknowledge Electronic delivery of documents',
-  rules: {
-    required: {
-      value: true,
-      message: 'Please acknowledge'
-    }
-  },
-  defaultChecked: false
-};
-
-var _StyledDSButton = /*#__PURE__*/_styled(DSButton).withConfig({
-  componentId: "sc-1lqqv9c-0"
-})(["margin-top:10px;"]);

package/dist/es/view/fields/combo-box/index.stories.js

@@ -1,48 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import { Form } from "../../form/index.js";
-import { FormItemLayout } from "../form-item-layout/index.js";
-import { ComboBox } from "./index.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/ComboBox',
-  component: ComboBox
-};
-
-const MaritalStatus = props => /*#__PURE__*/_jsx(FormItemLayout, {
-  floatingLabel: true,
-  ...props,
-  inputComponent: ComboBox,
-  required: true
-});
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(MaritalStatus, { ...args
-}), /*#__PURE__*/_jsx(WatchValue, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  name: 'marital_status',
-  labelText: 'Marital Status',
-  defaultValue: '--select--',
-  options: [{
-    value: '--select--',
-    label: '--Select--'
-  }, {
-    value: 'married',
-    label: 'Married'
-  }, {
-    value: 'unmarried',
-    label: 'Unmarried'
-  }, {
-    value: 'separated',
-    label: 'Separated'
-  }],
-  rules: {
-    required: {
-      value: true,
-      message: 'Marital Status required'
-    },
-    validate: value => value !== '--select--' || 'Please select valid value'
-  }
-};

package/dist/es/view/fields/date-input/index.stories.js

@@ -1,35 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import moment from 'moment';
-import { Form } from "../../form/index.js";
-import { DateInput } from "./index.js";
-import { FormItemLayout } from "../form-item-layout/index.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/DateInput',
-  component: DateInput
-};
-
-const DOB = props => /*#__PURE__*/_jsx(FormItemLayout, {
-  inputComponent: DateInput,
-  ...props
-});
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(DOB, { ...args
-}), /*#__PURE__*/_jsx(WatchValue, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  labelText: 'Date of Birth',
-  name: 'dob',
-  required: true,
-  defaultValue: moment('1980-01-01').toString(),
-  rules: {
-    required: {
-      value: true,
-      message: 'Date of Birth is required'
-    },
-    validate: value => moment() > value || 'Date of Birth can not be greater than current date'
-  }
-};

package/dist/es/view/fields/date-input/index1.stories.js

@@ -1,35 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import moment from 'moment';
-import { Form } from "../../form/index.js";
-import { DateInput } from "./index.js";
-import { FormItemLayout } from "../form-item-layout/index.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/DateInput',
-  component: DateInput
-};
-
-const DOB = props => /*#__PURE__*/_jsx(FormItemLayout, {
-  inputComponent: DateInput,
-  ...props
-});
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(DOB, { ...args
-}), /*#__PURE__*/_jsx(WatchValue, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  labelText: 'Date of Birth',
-  name: 'dob',
-  required: true,
-  defaultValue: moment('1980-01-01'),
-  rules: {
-    required: {
-      value: true,
-      message: 'Date of Birth is required'
-    },
-    validate: value => moment() > value || 'Date of Birth can not be greater than current date'
-  }
-};

package/dist/es/view/fields/date-picker/index.stories.js

@@ -1,35 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import moment from 'moment';
-import { Form } from "../../form/index.js";
-import { DatePicker } from "./index.js";
-import { FormItemLayout } from "../form-item-layout/index.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/DatePicker',
-  component: DatePicker
-};
-
-const DOB = props => /*#__PURE__*/_jsx(FormItemLayout, {
-  inputComponent: DatePicker,
-  ...props
-});
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(DOB, { ...args
-}), /*#__PURE__*/_jsx(WatchValue, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  labelText: 'Date of Birth',
-  name: 'dob',
-  required: true,
-  defaultValue: moment('1980-01-01').toString(),
-  rules: {
-    required: {
-      value: true,
-      message: 'Date of Birth is required'
-    },
-    validate: value => moment() > value || 'Date of Birth can not be greater than current date'
-  }
-};

package/dist/es/view/fields/form-item-layout/index.stories.js

@@ -1,27 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import { Form } from "../../form/index.js";
-import { TextBox } from "../text-box/index.js";
-import { FormItemLayout } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/FormItemLayout',
-  component: FormItemLayout
-};
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(FormItemLayout, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  floatingLabel: true,
-  inputComponent: TextBox,
-  labelText: 'First Name',
-  name: 'firstname',
-  required: true,
-  rules: {
-    required: {
-      value: true,
-      message: 'Please enter firstname'
-    }
-  }
-};

package/dist/es/view/fields/input-mask/index.stories.js

@@ -1,35 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import { Form } from "../../form/index.js";
-import { InputMask, MASK_TYPES } from "./index.js";
-import { FormItemLayout } from "../form-item-layout/index.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/InputMask',
-  component: InputMask
-};
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: InputMask,
-  required: true,
-  ...args
-}), /*#__PURE__*/_jsx(WatchValue, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  name: 'otp',
-  labelText: 'Enter One time passcode',
-  mask: number => MASK_TYPES.NUMBER({
-    decimalLimit: 2,
-    integerLimit: 8,
-    allowDecimal: true
-  })(number),
-  rules: {
-    required: {
-      value: true,
-      message: 'Please enter OTP'
-    }
-  }
-};

package/dist/es/view/fields/large-text-box/index.stories.js

@@ -1,30 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import { Form } from "../../form/index.js";
-import { LargeTextBox } from "./index.js";
-import { FormItemLayout } from "../form-item-layout/index.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/LargeTextBox',
-  component: LargeTextBox
-};
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: LargeTextBox,
-  required: true,
-  ...args
-}), /*#__PURE__*/_jsx(WatchValue, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  name: 'feedback',
-  labelText: 'Enter Feedback',
-  rules: {
-    required: {
-      value: true,
-      message: 'Please enter feedback'
-    }
-  }
-};

package/dist/es/view/fields/radio/index.stories.js

@@ -1,43 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import { get } from 'react-hook-form';
-import { Form } from "../../form/index.js";
-import { Radio } from "./index.js";
-import { ConnectForm } from "../connect-form.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const Template = ({
-  name,
-  ...rest
-}) => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx2(ConnectForm, {}, void 0, ({
-  formState: {
-    errors
-  }
-}) => {
-  const hasError = !!get(errors, name);
-  return /*#__PURE__*/_jsx(Radio, {
-    name: name,
-    ...rest,
-    hasError: hasError
-  });
-}), /*#__PURE__*/_jsx(WatchValue, {
-  name: name,
-  ...rest
-}));
-
-export default {
-  title: 'Components/Form/Controls/Radio',
-  component: Radio
-};
-export const Basic = Template.bind({});
-Basic.args = {
-  name: 'gender',
-  labelText: 'Male',
-  rules: {
-    required: {
-      value: true,
-      message: 'Please select a gender'
-    }
-  },
-  defaultChecked: false
-};

package/dist/es/view/fields/radio/set-value.stories.js

@@ -1,63 +0,0 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-import _styled from "styled-components";
-
-var _ToggleValue;
-
-import { useFormContext, get } from 'react-hook-form';
-import DSButton from '@elliemae/ds-basic/Button';
-import { Form } from "../../form/index.js";
-import { Radio } from "./index.js";
-import { ConnectForm } from "../connect-form.js";
-import { jsx as _jsx2 } from "react/jsx-runtime";
-const radioName = 'gender';
-
-const ToggleValue = () => {
-  const {
-    setValue,
-    watch
-  } = useFormContext();
-  const currentValue = watch(radioName);
-  return /*#__PURE__*/_jsx(_StyledDSButton, {
-    size: "m",
-    labelText: "Toggle",
-    onClick: () => setValue(radioName, !currentValue, {
-      shouldDirty: true
-    })
-  });
-};
-
-const Template = ({
-  name,
-  ...rest
-}) => /*#__PURE__*/_jsx(Form, {}, void 0, /*#__PURE__*/_jsx(ConnectForm, {}, void 0, ({
-  formState: {
-    errors
-  }
-}) => {
-  const hasError = !!get(errors, name);
-  return /*#__PURE__*/_jsx2(Radio, {
-    name: name,
-    ...rest,
-    hasError: hasError
-  });
-}), _ToggleValue || (_ToggleValue = /*#__PURE__*/_jsx(ToggleValue, {})));
-
-export default {
-  title: 'Components/Form/Controls/Radio'
-};
-export const SetValue = Template.bind({});
-SetValue.args = {
-  name: radioName,
-  labelText: 'Male',
-  rules: {
-    required: {
-      value: true,
-      message: 'Please select a gender'
-    }
-  },
-  defaultChecked: true
-};
-
-var _StyledDSButton = /*#__PURE__*/_styled(DSButton).withConfig({
-  componentId: "sc-fd8n0e-0"
-})(["margin-top:10px;"]);

package/dist/es/view/fields/radio-group/index.stories.js

@@ -1,68 +0,0 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-
-var _DSRadio, _DSRadio2;
-
-import DSRadio from '@elliemae/ds-basic/form/Radio';
-import { get } from 'react-hook-form';
-import { RadioGroup } from "./index.js";
-import { Form } from "../../form/index.js";
-import { ConnectForm } from "../connect-form.js";
-import { WatchValue } from "../watch-value.js";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx2 } from "react/jsx-runtime";
-const radioName = 'gender';
-
-const Gender = ({
-  feedbackMessage,
-  ...rest
-}) => /*#__PURE__*/_jsxs(RadioGroup, {
-  name: radioName,
-  labelProps: {
-    labelText: 'Gender',
-    required: true,
-    feedbackMessage
-  },
-  orientation: "horizontal",
-  ...rest,
-  children: [_DSRadio || (_DSRadio = /*#__PURE__*/_jsx(DSRadio, {
-    name: radioName,
-    value: "male",
-    labelText: "Male"
-  })), _DSRadio2 || (_DSRadio2 = /*#__PURE__*/_jsx(DSRadio, {
-    name: radioName,
-    value: "female",
-    labelText: "Female"
-  }))]
-});
-
-const Template = ({
-  props
-}) => /*#__PURE__*/_jsx(Form, {}, void 0, /*#__PURE__*/_jsx(ConnectForm, {}, void 0, ({
-  formState: {
-    errors
-  }
-}) => {
-  const errField = get(errors, radioName);
-  const feedbackMessage = errField === null || errField === void 0 ? void 0 : errField.message;
-  return /*#__PURE__*/_jsx2(Gender, {
-    feedbackMessage: feedbackMessage,
-    ...props
-  });
-}), /*#__PURE__*/_jsx2(WatchValue, {
-  name: radioName,
-  ...props
-}));
-
-export default {
-  title: 'Components/Form/Controls/RadioGroup',
-  component: RadioGroup
-};
-export const Basic = Template.bind({});
-Basic.args = {
-  rules: {
-    required: {
-      value: true,
-      message: 'Please select a gender'
-    }
-  }
-};

package/dist/es/view/fields/text-box/index.stories.js

@@ -1,31 +0,0 @@
-import _jsx2 from "@babel/runtime/helpers/jsx";
-import { Form } from "../../form/index.js";
-import { TextBox } from "./index.js";
-import { FormItemLayout } from "../form-item-layout/index.js";
-import { WatchValue } from "../watch-value.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Form/Controls/TextBox',
-  component: TextBox
-};
-
-const Template = args => /*#__PURE__*/_jsx2(Form, {}, void 0, /*#__PURE__*/_jsx(FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: TextBox,
-  required: true,
-  ...args
-}), /*#__PURE__*/_jsx(WatchValue, { ...args
-}));
-
-export const Basic = Template.bind({});
-Basic.args = {
-  name: 'firstname',
-  labelText: 'First Name',
-  defaultValue: 'John',
-  rules: {
-    required: {
-      value: true,
-      message: 'Please enter firstname'
-    }
-  }
-};

package/dist/es/view/form/index.stories.js

@@ -1,56 +0,0 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-import _styled2 from "styled-components";
-import _styled from "styled-components";
-
-var _h, _FirstName, _DOB, _State, _MaritalStatus, _WatchDashBoard;
-
-import styled from 'styled-components';
-import { useFormContext } from 'react-hook-form';
-import { FormSubmitButton } from "./submit-button/index.js";
-import { Form } from "./index.js";
-import { FirstName, DOB, State, MaritalStatus } from "./personal-info-section.js";
-import { jsx as _jsx2 } from "react/jsx-runtime";
-const btnProps = {
-  containerProps: {
-    id: 'submit'
-  },
-  labelText: 'Submit Application',
-  size: 'l'
-};
-export default {
-  title: 'Components/Form',
-  component: Form
-};
-const StyledButton = /*#__PURE__*/styled(FormSubmitButton).withConfig({
-  componentId: "sc-1mzmcta-0"
-})(["margin-top:", ";"], ({
-  theme
-}) => theme.space.xs);
-
-const WatchDashBoard = () => {
-  const {
-    watch
-  } = useFormContext();
-  const watchFirstName = watch('firstname', '');
-  const watchDOB = watch('dob', '');
-  const watchState = watch('state', '');
-  const watchMaritalStatus = watch('marital_status', '');
-  return /*#__PURE__*/_jsx(_StyledSection, {}, void 0, _h || (_h = /*#__PURE__*/_jsx("h4", {}, void 0, "Form Data:")), /*#__PURE__*/_jsx(_StyledDiv, {}, void 0, /*#__PURE__*/_jsx("div", {}, void 0, "FirstName : ", /*#__PURE__*/_jsx("strong", {}, void 0, watchFirstName)), /*#__PURE__*/_jsx("div", {}, void 0, "DOB : ", /*#__PURE__*/_jsx("strong", {}, void 0, JSON.stringify(watchDOB))), /*#__PURE__*/_jsx("div", {}, void 0, "State : ", /*#__PURE__*/_jsx("strong", {}, void 0, watchState)), /*#__PURE__*/_jsx("div", {}, void 0, "Marital Status : ", /*#__PURE__*/_jsx("strong", {}, void 0, watchMaritalStatus))));
-}; // eslint-disable-next-line no-unused-vars
-
-
-const Template = () => /*#__PURE__*/_jsx(Form, {
-  onSubmit: data => {}
-}, void 0, _FirstName || (_FirstName = /*#__PURE__*/_jsx(FirstName, {})), _DOB || (_DOB = /*#__PURE__*/_jsx(DOB, {})), _State || (_State = /*#__PURE__*/_jsx(State, {})), _MaritalStatus || (_MaritalStatus = /*#__PURE__*/_jsx(MaritalStatus, {})), /*#__PURE__*/_jsx2(StyledButton, { ...btnProps
-}), _WatchDashBoard || (_WatchDashBoard = /*#__PURE__*/_jsx(WatchDashBoard, {})));
-
-export const WatchFormControls = Template.bind({});
-WatchFormControls.args = {};
-
-var _StyledSection = /*#__PURE__*/styled("section").withConfig({
-  componentId: "sc-1mzmcta-1"
-})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]);
-
-var _StyledDiv = /*#__PURE__*/styled("div").withConfig({
-  componentId: "sc-1mzmcta-2"
-})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]);

package/dist/es/view/form/usecases.stories.js

@@ -1,43 +0,0 @@
-import _jsx from "@babel/runtime/helpers/jsx";
-
-var _FirstName, _DOB, _State, _MaritalStatus;
-
-import styled from 'styled-components';
-import { FormSubmitButton } from "./submit-button/index.js";
-import { Form } from "./index.js";
-import { FirstName, DOB, State, MaritalStatus } from "./personal-info-section.js";
-import { jsx as _jsx2 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const btnProps = {
-  containerProps: {
-    id: 'submit'
-  },
-  labelText: 'Submit Application',
-  size: 'l'
-};
-export default {
-  title: 'Components/Form',
-  component: FormSubmitButton
-};
-const StyledButton = /*#__PURE__*/styled(FormSubmitButton).withConfig({
-  componentId: "sc-1wwguuk-0"
-})(["margin-top:", ";"], ({
-  theme
-}) => theme.space.xs);
-
-const Template = args => /*#__PURE__*/_jsxs(Form, { ...args,
-  children: [_FirstName || (_FirstName = /*#__PURE__*/_jsx(FirstName, {})), _DOB || (_DOB = /*#__PURE__*/_jsx(DOB, {})), _State || (_State = /*#__PURE__*/_jsx(State, {})), _MaritalStatus || (_MaritalStatus = /*#__PURE__*/_jsx(MaritalStatus, {})), /*#__PURE__*/_jsx2(StyledButton, { ...btnProps
-  })]
-});
-
-export const FormValidationOnBlur = Template.bind({});
-FormValidationOnBlur.args = {
-  onSubmit: data => {}
-};
-export const FormValidationOnSubmit = Template.bind({});
-FormValidationOnSubmit.args = {
-  onSubmit: data => {},
-  reactHookFormProps: {
-    mode: 'onSubmit'
-  }
-};