@mirai/ui 1.1.0-f → 1.1.1

package/build/components/Form/Form.constants.js

@@ -10,6 +10,6 @@ var DEFAULT_TIMEOUT_ONERROR = 10;
 exports.DEFAULT_TIMEOUT_ONERROR = DEFAULT_TIMEOUT_ONERROR;
 var FIELDS_BOOLEAN = ['Component:InputOption', 'Primitive:Checkbox', 'Primitive:Radio', 'Primitive.Switch'];
 exports.FIELDS_BOOLEAN = FIELDS_BOOLEAN;
-var FIELDS_WITHOUT_ERROR = [].concat(FIELDS_BOOLEAN, ['Component:InputNumber']);
+var FIELDS_WITHOUT_ERROR = ['Primitive:Radio', 'Component:InputNumber'];
 exports.FIELDS_WITHOUT_ERROR = FIELDS_WITHOUT_ERROR;
 //# sourceMappingURL=Form.constants.js.map

package/build/components/Form/Form.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.constants.js","names":["DEFAULT_TIMEOUT_ONCHANGE","DEFAULT_TIMEOUT_ONERROR","FIELDS_BOOLEAN","FIELDS_WITHOUT_ERROR"],"sources":["../../../src/components/Form/Form.constants.js"],"sourcesContent":["const DEFAULT_TIMEOUT_ONCHANGE = 0;\nconst DEFAULT_TIMEOUT_ONERROR = 10;\nconst FIELDS_BOOLEAN = ['Component:InputOption', 'Primitive:Checkbox', 'Primitive:Radio', 'Primitive.Switch'];\nconst FIELDS_WITHOUT_ERROR = [...FIELDS_BOOLEAN, 'Component:InputNumber'];\n\nexport { DEFAULT_TIMEOUT_ONCHANGE, DEFAULT_TIMEOUT_ONERROR, FIELDS_BOOLEAN, FIELDS_WITHOUT_ERROR };\n"],"mappings":";;;;;;AAAA,IAAMA,wBAAwB,GAAG,CAAC;AAAC;AACnC,IAAMC,uBAAuB,GAAG,EAAE;AAAC;AACnC,IAAMC,cAAc,GAAG,CAAC,uBAAuB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,kBAAkB,CAAC;AAAC;AAC9G,IAAMC,oBAAoB,aAAOD,cAAc,GAAE,uBAAuB,EAAC;AAAC"}
+{"version":3,"file":"Form.constants.js","names":["DEFAULT_TIMEOUT_ONCHANGE","DEFAULT_TIMEOUT_ONERROR","FIELDS_BOOLEAN","FIELDS_WITHOUT_ERROR"],"sources":["../../../src/components/Form/Form.constants.js"],"sourcesContent":["const DEFAULT_TIMEOUT_ONCHANGE = 0;\nconst DEFAULT_TIMEOUT_ONERROR = 10;\nconst FIELDS_BOOLEAN = ['Component:InputOption', 'Primitive:Checkbox', 'Primitive:Radio', 'Primitive.Switch'];\nconst FIELDS_WITHOUT_ERROR = ['Primitive:Radio', 'Component:InputNumber'];\n\nexport { DEFAULT_TIMEOUT_ONCHANGE, DEFAULT_TIMEOUT_ONERROR, FIELDS_BOOLEAN, FIELDS_WITHOUT_ERROR };\n"],"mappings":";;;;;;AAAA,IAAMA,wBAAwB,GAAG,CAAC;AAAC;AACnC,IAAMC,uBAAuB,GAAG,EAAE;AAAC;AACnC,IAAMC,cAAc,GAAG,CAAC,uBAAuB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,kBAAkB,CAAC;AAAC;AAC9G,IAAMC,oBAAoB,GAAG,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;AAAC"}

package/build/components/Form/Form.js

@@ -27,6 +27,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var timeoutError;
 var Form = function Form(_ref) {
   var children = _ref.children,
     _ref$debounce = _ref.debounce,
@@ -68,6 +69,7 @@ var Form = function Form(_ref) {
     if (JSON.stringify(nextChildrenKeys) !== JSON.stringify(Object.keys(initialValue).sort())) {
       setInitialValue(nextValues);
       setValues(nextValues);
+      clearTimeout(timeoutError);
       if (validateOnMount) handleError(nextValues);else setError({});
       setTouched({});
     } else {
@@ -103,7 +105,7 @@ var Form = function Form(_ref) {
   var handleChange = function handleChange(field, fieldValue) {
     var nextValues = _objectSpread(_objectSpread({}, values), {}, _defineProperty({}, field, fieldValue));
     setValues(nextValues);
-    setTimeout(function () {
+    timeoutError = setTimeout(function () {
       return handleError(nextValues);
     }, _Form.DEFAULT_TIMEOUT_ONERROR);
   };

package/build/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":["Form","children","debounce","DEFAULT_TIMEOUT_ONCHANGE","schema","showErrors","tag","validateOnMount","onChange","onEnter","onError","onLeave","onSubmit","others","useState","error","setError","initialValue","setInitialValue","touched","setTouched","values","setValues","useEffect","nextValues","getChildrenValues","nextChildrenKeys","Object","keys","sort","length","JSON","stringify","handleError","collision","some","key","groupState","value","timer","setTimeout","clearTimeout","handleChange","field","fieldValue","DEFAULT_TIMEOUT_ONERROR","next","getChildrenErrors","handleLeave","event","handleSubmit","preventDefault","errors","useMemo","React","createElement","Primitive","role","Children","map","child","index","props","type","displayName","getField","cloneElement","FIELDS_WITHOUT_ERROR","includes","FIELDS_BOOLEAN","undefined","onPress","propTypes","PropTypes","node","number","shape","bool","string","func"],"sources":["../../../src/components/Form/Form.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { Primitive } from '../../primitives';\nimport {\n  DEFAULT_TIMEOUT_ONCHANGE,\n  DEFAULT_TIMEOUT_ONERROR,\n  FIELDS_BOOLEAN,\n  FIELDS_WITHOUT_ERROR,\n} from './Form.constants';\nimport { getChildrenErrors, getChildrenValues, getField, groupState } from './helpers';\n\nconst Form = ({\n  children,\n  debounce = DEFAULT_TIMEOUT_ONCHANGE,\n  schema = {},\n  showErrors = false,\n  tag = 'form',\n  validateOnMount = false,\n  onChange,\n  onEnter,\n  onError,\n  onLeave,\n  onSubmit,\n  ...others\n}) => {\n  const [error, setError] = useState({});\n  const [initialValue, setInitialValue] = useState({});\n  const [touched, setTouched] = useState({});\n  const [values, setValues] = useState({});\n\n  useEffect(() => {\n    const nextValues = getChildrenValues(children);\n    const nextChildrenKeys = Object.keys(nextValues).sort();\n\n    if (!Object.keys(nextValues).length) return;\n\n    if (JSON.stringify(nextChildrenKeys) !== JSON.stringify(Object.keys(initialValue).sort())) {\n      setInitialValue(nextValues);\n      setValues(nextValues);\n\n      if (validateOnMount) handleError(nextValues);\n      else setError({});\n\n      setTouched({});\n    } else {\n      const collision = nextChildrenKeys.some((key) => JSON.stringify(values[key]) !== JSON.stringify(nextValues[key]));\n      if (collision) {\n        setValues(nextValues);\n        handleError(nextValues);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children]);\n\n  useEffect(() => {\n    if (!onChange || values === initialValue || !Object.keys(values).length) return;\n\n    if (!debounce) return onChange(values, groupState({ initialValue, value: values, touched }));\n\n    const timer = setTimeout(() => onChange(values, groupState({ initialValue, value: values, touched })), debounce);\n    return () => clearTimeout(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [values]);\n\n  const handleChange = (field, fieldValue) => {\n    const nextValues = { ...values, [field]: fieldValue };\n\n    setValues(nextValues);\n    setTimeout(() => handleError(nextValues), DEFAULT_TIMEOUT_ONERROR);\n  };\n\n  const handleError = (values) => {\n    const next = getChildrenErrors({ children, schema, values });\n\n    setError(next);\n    if (JSON.stringify(error) !== JSON.stringify(next)) onError && onError(next);\n\n    return next;\n  };\n\n  const handleLeave = (field, event) => {\n    setTouched({ ...touched, [field]: true });\n    if (onEnter) onEnter(field, event);\n  };\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    const errors = handleError(values);\n\n    if (Object.keys(errors).length) onError(errors);\n    else if (onSubmit) onSubmit(values, groupState({ initialValue, value: values, touched }), event);\n  };\n\n  return useMemo(\n    () =>\n      React.createElement(\n        Primitive,\n        {\n          ...others,\n          role: others.role || 'form',\n          tag,\n          onSubmit: handleSubmit,\n        },\n        React.Children.map(children, (child, index) => {\n          if (!child || child === null) return;\n\n          const { props = {}, type: { displayName } = {} } = child || {};\n          const { type } = props;\n          const field = getField(props);\n\n          return React.cloneElement(child, {\n            key: index,\n            ...(field\n              ? {\n                  ...props,\n                  ...schema[field],\n                  error: !FIELDS_WITHOUT_ERROR.includes(displayName) && (props.error || (showErrors && !!error[field])),\n                  value: !FIELDS_BOOLEAN.includes(displayName) ? values[field] : props.value,\n                  onChange: (value) => handleChange(field, value),\n                  onEnter: (event) => handleLeave(field, event),\n                  onLeave: onLeave ? (event) => onLeave(field, event) : undefined,\n                }\n              : type === 'submit'\n              ? { ...props, onPress: handleSubmit }\n              : undefined),\n          });\n        }),\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, error, others, schema],\n  );\n};\n\nForm.displayName = 'Component:Form';\n\nForm.propTypes = {\n  children: PropTypes.node,\n  debounce: PropTypes.number,\n  schema: PropTypes.shape({}),\n  showErrors: PropTypes.bool,\n  tag: PropTypes.string,\n  validateOnMount: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n  onSubmit: PropTypes.func,\n};\n\nexport { Form };\n"],"mappings":"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"}
+{"version":3,"file":"Form.js","names":["timeoutError","Form","children","debounce","DEFAULT_TIMEOUT_ONCHANGE","schema","showErrors","tag","validateOnMount","onChange","onEnter","onError","onLeave","onSubmit","others","useState","error","setError","initialValue","setInitialValue","touched","setTouched","values","setValues","useEffect","nextValues","getChildrenValues","nextChildrenKeys","Object","keys","sort","length","JSON","stringify","clearTimeout","handleError","collision","some","key","groupState","value","timer","setTimeout","handleChange","field","fieldValue","DEFAULT_TIMEOUT_ONERROR","next","getChildrenErrors","handleLeave","event","handleSubmit","preventDefault","errors","useMemo","React","createElement","Primitive","role","Children","map","child","index","props","type","displayName","getField","cloneElement","FIELDS_WITHOUT_ERROR","includes","FIELDS_BOOLEAN","undefined","onPress","propTypes","PropTypes","node","number","shape","bool","string","func"],"sources":["../../../src/components/Form/Form.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { Primitive } from '../../primitives';\nimport {\n  DEFAULT_TIMEOUT_ONCHANGE,\n  DEFAULT_TIMEOUT_ONERROR,\n  FIELDS_BOOLEAN,\n  FIELDS_WITHOUT_ERROR,\n} from './Form.constants';\nimport { getChildrenErrors, getChildrenValues, getField, groupState } from './helpers';\n\nlet timeoutError;\n\nconst Form = ({\n  children,\n  debounce = DEFAULT_TIMEOUT_ONCHANGE,\n  schema = {},\n  showErrors = false,\n  tag = 'form',\n  validateOnMount = false,\n  onChange,\n  onEnter,\n  onError,\n  onLeave,\n  onSubmit,\n  ...others\n}) => {\n  const [error, setError] = useState({});\n  const [initialValue, setInitialValue] = useState({});\n  const [touched, setTouched] = useState({});\n  const [values, setValues] = useState({});\n\n  useEffect(() => {\n    const nextValues = getChildrenValues(children);\n    const nextChildrenKeys = Object.keys(nextValues).sort();\n\n    if (!Object.keys(nextValues).length) return;\n\n    if (JSON.stringify(nextChildrenKeys) !== JSON.stringify(Object.keys(initialValue).sort())) {\n      setInitialValue(nextValues);\n      setValues(nextValues);\n      clearTimeout(timeoutError);\n\n      if (validateOnMount) handleError(nextValues);\n      else setError({});\n\n      setTouched({});\n    } else {\n      const collision = nextChildrenKeys.some((key) => JSON.stringify(values[key]) !== JSON.stringify(nextValues[key]));\n      if (collision) {\n        setValues(nextValues);\n        handleError(nextValues);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children]);\n\n  useEffect(() => {\n    if (!onChange || values === initialValue || !Object.keys(values).length) return;\n\n    if (!debounce) return onChange(values, groupState({ initialValue, value: values, touched }));\n\n    const timer = setTimeout(() => onChange(values, groupState({ initialValue, value: values, touched })), debounce);\n    return () => clearTimeout(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [values]);\n\n  const handleChange = (field, fieldValue) => {\n    const nextValues = { ...values, [field]: fieldValue };\n\n    setValues(nextValues);\n    timeoutError = setTimeout(() => handleError(nextValues), DEFAULT_TIMEOUT_ONERROR);\n  };\n\n  const handleError = (values) => {\n    const next = getChildrenErrors({ children, schema, values });\n\n    setError(next);\n    if (JSON.stringify(error) !== JSON.stringify(next)) onError && onError(next);\n\n    return next;\n  };\n\n  const handleLeave = (field, event) => {\n    setTouched({ ...touched, [field]: true });\n    if (onEnter) onEnter(field, event);\n  };\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    const errors = handleError(values);\n\n    if (Object.keys(errors).length) onError(errors);\n    else if (onSubmit) onSubmit(values, groupState({ initialValue, value: values, touched }), event);\n  };\n\n  return useMemo(\n    () =>\n      React.createElement(\n        Primitive,\n        {\n          ...others,\n          role: others.role || 'form',\n          tag,\n          onSubmit: handleSubmit,\n        },\n        React.Children.map(children, (child, index) => {\n          if (!child || child === null) return;\n\n          const { props = {}, type: { displayName } = {} } = child || {};\n          const { type } = props;\n          const field = getField(props);\n\n          return React.cloneElement(child, {\n            key: index,\n            ...(field\n              ? {\n                  ...props,\n                  ...schema[field],\n                  error: !FIELDS_WITHOUT_ERROR.includes(displayName) && (props.error || (showErrors && !!error[field])),\n                  value: !FIELDS_BOOLEAN.includes(displayName) ? values[field] : props.value,\n                  onChange: (value) => handleChange(field, value),\n                  onEnter: (event) => handleLeave(field, event),\n                  onLeave: onLeave ? (event) => onLeave(field, event) : undefined,\n                }\n              : type === 'submit'\n              ? { ...props, onPress: handleSubmit }\n              : undefined),\n          });\n        }),\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children, error, others, schema],\n  );\n};\n\nForm.displayName = 'Component:Form';\n\nForm.propTypes = {\n  children: PropTypes.node,\n  debounce: PropTypes.number,\n  schema: PropTypes.shape({}),\n  showErrors: PropTypes.bool,\n  tag: PropTypes.string,\n  validateOnMount: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n  onSubmit: PropTypes.func,\n};\n\nexport { Form };\n"],"mappings":"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"}

package/build/components/Form/Form.stories.js

@@ -171,7 +171,12 @@ var Story = function Story(props) {
     type: "checkbox",
     name: "checkbox",
     label: "checkbox",
-    checked: form.checkbox,
+    checked: form.checkbox
+  }), /*#__PURE__*/_react.default.createElement(_.InputOption, {
+    type: "checkbox",
+    name: "checkboxRequired",
+    label: "checkbox",
+    checked: form.checkboxRequired,
     required: true,
     showRequired: true
   }), /*#__PURE__*/_react.default.createElement(_.InputOption, {

package/build/components/Form/Form.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.js","names":["title","Story","props","useState","condition","setCondition","email","checkbox","dateOfBirth","switch","radio","form","setForm","error","setError","useEffect","setTimeout","password","phone","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","handleSubmit","value","includes","gender","undefined","bio","children","Array","from","keys","map","index","Object","length","justifyContent","marginTop","marginRight","storyName","args","debounce","schema","showErrors","validateOnMount","testId","style","argTypes"],"sources":["../../../src/components/Form/Form.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputDate, InputNumber, InputOption, InputPhone, InputText, InputSelect, Text, View } from '../../';\nimport { Form } from './Form';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [condition, setCondition] = useState(false);\n  const [form, setForm] = useState({\n    email: 'javi@mirai.com',\n    checkbox: true,\n    dateOfBirth: '04/10/1980',\n    switch: true,\n    radio: 'radio-0',\n  });\n  const [error, setError] = useState({});\n\n  useEffect(\n    () =>\n      setTimeout(() => {\n        setForm({\n          ...form,\n          email: 'javi@hotmail.com',\n          password: '1234567890',\n          dateOfBirth: '',\n          switch: false,\n          phone: '+34 61570',\n          radio: 'radio-1',\n        });\n      }, 1000),\n\n    [],\n  ); // * Simulate a state hydration\n\n  const handleChange = (next, ...others) => {\n    setForm(next);\n    console.log('<Form>::onChange', next, ...others);\n  };\n\n  const handleEnter = (...others) => console.log('<Form>::onEnter', ...others);\n\n  const handleError = (next, ...others) => {\n    setError(next);\n    console.log('<Form>::onError', next, ...others);\n  };\n\n  const handleLeave = (...others) => console.log('<Form>::onLeave', ...others);\n\n  const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);\n\n  return (\n    <>\n      <Form\n        {...props}\n        onLeave={handleLeave}\n        onChange={handleChange}\n        onError={handleError}\n        onEnter={handleEnter}\n        onSubmit={handleSubmit}\n      >\n        <View row>\n          <Text headline>Form component</Text>\n        </View>\n\n        <InputText\n          name=\"email\"\n          error={!!error.email}\n          test={(value) => value.includes('@mirai.com')}\n          label=\"Email\"\n          hint=\"Should contains @mirai.com\"\n          required\n          showRequired\n          type=\"email\"\n          value={form.email}\n        />\n        <InputText\n          name=\"password\"\n          error={!!error.password}\n          hint=\"At least 10 chars.\"\n          label=\"Password\"\n          required\n          showRequired\n          minLength={10}\n          type=\"password\"\n          value={form.password}\n        />\n        <InputSelect\n          name=\"gender\"\n          emptyOption=\"Select...\"\n          error={!!error.gender}\n          label=\"Your gender\"\n          options={['one', 'two', 'three', 'four', 'five']}\n          value={form.gender}\n          required\n          showRequired\n        />\n        <InputDate\n          name=\"dateOfBirth\"\n          error={!!error.dateOfBirth}\n          label=\"Your birthdate\"\n          max=\"31/12/2022\"\n          min=\"10/04/1980\"\n          required\n          showRequired\n          type=\"inputDate\"\n          value={form.dateOfBirth}\n        />\n        <InputPhone\n          name=\"phone\"\n          emptyOption={!form.phone ? 'Select...' : undefined}\n          error={!!error.phone}\n          label=\"Phone\"\n          labelPrefix=\"Prefix\"\n          prefixes={['+34', '+44', '+001', '+999', '+39', '+56']}\n          required\n          showRequired\n          type=\"inputPhone\"\n          value={form.phone}\n        />\n        <InputText name=\"bio\" label=\"Bio\" multiLine value={form.bio} />\n        <InputNumber name=\"children\" label=\"Children\" hint=\"Ages 0 - 17\" value={form.children} />\n        <InputOption type=\"checkbox\" name=\"checkbox\" label=\"checkbox\" checked={form.checkbox} required showRequired />\n        <InputOption type=\"switch\" name=\"switch\" label=\"switch\" checked={form.switch} />\n\n        {Array.from(Array(3).keys()).map((index) => (\n          <InputOption\n            key={index}\n            type=\"radio\"\n            name=\"radio\"\n            value={`radio-${index}`}\n            label={`radio-${index}`}\n            checked={form.radio === `radio-${index}`}\n          />\n        ))}\n        {condition && <InputText label=\"condition\" name=\"condition\" />}\n\n        <Button disabled={Object.keys(error).length !== 0} type=\"submit\" wide>\n          Submit\n        </Button>\n      </Form>\n\n      <View row style={{ justifyContent: 'flex-end', marginTop: 'var(--mirai-ui-space-L)' }}>\n        <Button small secondary onPress={() => setForm({})} style={{ marginRight: 'var(--mirai-ui-space-M)' }}>\n          Reset\n        </Button>\n        <Button small secondary onPress={() => setCondition(!condition)}>\n          {`${condition ? 'Hide' : 'Show'} dynamic field`}\n        </Button>\n      </View>\n    </>\n  );\n};\n\nStory.storyName = 'Form';\n\nStory.args = {\n  debounce: 0,\n  schema: {},\n  showErrors: false,\n  validateOnMount: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
+{"version":3,"file":"Form.stories.js","names":["title","Story","props","useState","condition","setCondition","email","checkbox","dateOfBirth","switch","radio","form","setForm","error","setError","useEffect","setTimeout","password","phone","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","handleSubmit","value","includes","gender","undefined","bio","children","checkboxRequired","Array","from","keys","map","index","Object","length","justifyContent","marginTop","marginRight","storyName","args","debounce","schema","showErrors","validateOnMount","testId","style","argTypes"],"sources":["../../../src/components/Form/Form.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputDate, InputNumber, InputOption, InputPhone, InputText, InputSelect, Text, View } from '../../';\nimport { Form } from './Form';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [condition, setCondition] = useState(false);\n  const [form, setForm] = useState({\n    email: 'javi@mirai.com',\n    checkbox: true,\n    dateOfBirth: '04/10/1980',\n    switch: true,\n    radio: 'radio-0',\n  });\n  const [error, setError] = useState({});\n\n  useEffect(\n    () =>\n      setTimeout(() => {\n        setForm({\n          ...form,\n          email: 'javi@hotmail.com',\n          password: '1234567890',\n          dateOfBirth: '',\n          switch: false,\n          phone: '+34 61570',\n          radio: 'radio-1',\n        });\n      }, 1000),\n\n    [],\n  ); // * Simulate a state hydration\n\n  const handleChange = (next, ...others) => {\n    setForm(next);\n    console.log('<Form>::onChange', next, ...others);\n  };\n\n  const handleEnter = (...others) => console.log('<Form>::onEnter', ...others);\n\n  const handleError = (next, ...others) => {\n    setError(next);\n    console.log('<Form>::onError', next, ...others);\n  };\n\n  const handleLeave = (...others) => console.log('<Form>::onLeave', ...others);\n\n  const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);\n\n  return (\n    <>\n      <Form\n        {...props}\n        onLeave={handleLeave}\n        onChange={handleChange}\n        onError={handleError}\n        onEnter={handleEnter}\n        onSubmit={handleSubmit}\n      >\n        <View row>\n          <Text headline>Form component</Text>\n        </View>\n\n        <InputText\n          name=\"email\"\n          error={!!error.email}\n          test={(value) => value.includes('@mirai.com')}\n          label=\"Email\"\n          hint=\"Should contains @mirai.com\"\n          required\n          showRequired\n          type=\"email\"\n          value={form.email}\n        />\n        <InputText\n          name=\"password\"\n          error={!!error.password}\n          hint=\"At least 10 chars.\"\n          label=\"Password\"\n          required\n          showRequired\n          minLength={10}\n          type=\"password\"\n          value={form.password}\n        />\n        <InputSelect\n          name=\"gender\"\n          emptyOption=\"Select...\"\n          error={!!error.gender}\n          label=\"Your gender\"\n          options={['one', 'two', 'three', 'four', 'five']}\n          value={form.gender}\n          required\n          showRequired\n        />\n        <InputDate\n          name=\"dateOfBirth\"\n          error={!!error.dateOfBirth}\n          label=\"Your birthdate\"\n          max=\"31/12/2022\"\n          min=\"10/04/1980\"\n          required\n          showRequired\n          type=\"inputDate\"\n          value={form.dateOfBirth}\n        />\n        <InputPhone\n          name=\"phone\"\n          emptyOption={!form.phone ? 'Select...' : undefined}\n          error={!!error.phone}\n          label=\"Phone\"\n          labelPrefix=\"Prefix\"\n          prefixes={['+34', '+44', '+001', '+999', '+39', '+56']}\n          required\n          showRequired\n          type=\"inputPhone\"\n          value={form.phone}\n        />\n        <InputText name=\"bio\" label=\"Bio\" multiLine value={form.bio} />\n        <InputNumber name=\"children\" label=\"Children\" hint=\"Ages 0 - 17\" value={form.children} />\n        <InputOption type=\"checkbox\" name=\"checkbox\" label=\"checkbox\" checked={form.checkbox} />\n        <InputOption\n          type=\"checkbox\"\n          name=\"checkboxRequired\"\n          label=\"checkbox\"\n          checked={form.checkboxRequired}\n          required\n          showRequired\n        />\n        <InputOption type=\"switch\" name=\"switch\" label=\"switch\" checked={form.switch} />\n\n        {Array.from(Array(3).keys()).map((index) => (\n          <InputOption\n            key={index}\n            type=\"radio\"\n            name=\"radio\"\n            value={`radio-${index}`}\n            label={`radio-${index}`}\n            checked={form.radio === `radio-${index}`}\n          />\n        ))}\n        {condition && <InputText label=\"condition\" name=\"condition\" />}\n\n        <Button disabled={Object.keys(error).length !== 0} type=\"submit\" wide>\n          Submit\n        </Button>\n      </Form>\n\n      <View row style={{ justifyContent: 'flex-end', marginTop: 'var(--mirai-ui-space-L)' }}>\n        <Button small secondary onPress={() => setForm({})} style={{ marginRight: 'var(--mirai-ui-space-M)' }}>\n          Reset\n        </Button>\n        <Button small secondary onPress={() => setCondition(!condition)}>\n          {`${condition ? 'Hide' : 'Show'} dynamic field`}\n        </Button>\n      </View>\n    </>\n  );\n};\n\nStory.storyName = 'Form';\n\nStory.args = {\n  debounce: 0,\n  schema: {},\n  showErrors: false,\n  validateOnMount: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}

package/build/components/Form/__tests__/__snapshots__/Form.test.jsx.snap

@@ -11,36 +11,36 @@ exports[`component:<Form> inherit:className 1`] = `
 exports[`component:<Form> prop:children 1`] = `
 <DocumentFragment>
   <form>
-    <ui_view
+    <div
       class="view inputContainer"
     >
-      <ui_view
+      <div
         class="view row inputBorder"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
-          <ui_text
+          <span
             class="text paragraph text label"
           >
             label
-          </ui_text>
+          </span>
           <input
             class="input input withLabel"
             name="name"
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
+        </div>
+      </div>
+    </div>
   </form>
 </DocumentFragment>
 `;
 
 exports[`component:<Form> prop:tag 1`] = `
 <DocumentFragment>
-  <ui_tag />
+  <fieldset />
 </DocumentFragment>
 `;
 

package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap

@@ -2,13 +2,13 @@
 
 exports[`component:<InputDate> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view inputContainer mirai"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view wide content"
       >
         <input
@@ -19,21 +19,21 @@ exports[`component:<InputDate> inherit:className 1`] = `
           type="text"
           value=""
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<InputDate> prop:format 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view inputContainer"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view wide content"
       >
         <input
@@ -44,21 +44,21 @@ exports[`component:<InputDate> prop:format 1`] = `
           type="text"
           value=""
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<InputDate> prop:placeholder 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view inputContainer"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view wide content"
       >
         <input
@@ -69,21 +69,21 @@ exports[`component:<InputDate> prop:placeholder 1`] = `
           type="text"
           value=""
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<InputDate> prop:value & prop:format 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view inputContainer"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view wide content"
       >
         <input
@@ -94,21 +94,21 @@ exports[`component:<InputDate> prop:value & prop:format 1`] = `
           type="text"
           value="04/80"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<InputDate> prop:value 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view inputContainer"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view wide content"
       >
         <input
@@ -119,21 +119,21 @@ exports[`component:<InputDate> prop:value 1`] = `
           type="text"
           value="10/04/1980"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<InputDate> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view inputContainer"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view wide content"
       >
         <input
@@ -144,21 +144,21 @@ exports[`component:<InputDate> renders 1`] = `
           type="text"
           value=""
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<InputDate> testId 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view inputContainer"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view wide content"
       >
         <input
@@ -170,8 +170,8 @@ exports[`component:<InputDate> testId 1`] = `
           type="text"
           value=""
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;

package/build/components/InputNumber/InputNumber.js

@@ -63,6 +63,7 @@ var InputNumber = function InputNumber(_ref) {
     value: _primitives.ICON.REMOVE
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     headline: true,
+    tag: "span",
     className: (0, _helpers.styles)(_InputNumberModule.default.value, disabled && _InputNumberModule.default.disabled)
   }, typeof value === 'number' ? value : min), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     disabled: disabled || value >= max,
@@ -77,7 +78,7 @@ var InputNumber = function InputNumber(_ref) {
   })));
 };
 exports.InputNumber = InputNumber;
-InputNumber.displayName = 'Component:InputOption';
+InputNumber.displayName = 'Component:InputNumber';
 InputNumber.propTypes = {
   disabled: _propTypes.default.bool,
   hint: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),

package/build/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","showRequired","step","value","onChange","others","role","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { Hint, Label } from '../InputText/partials';\nimport style from './InputNumber.module.css';\n\nconst InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  required,\n  rounded = true,\n  showRequired = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} role={others.role || 'input-number'} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Label {...{ disabled, label, required: showRequired && required }} className={style.label} />}\n      {hint && <Hint {...{ disabled, hint }} className={style.hint} />}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text headline className={styles(style.value, disabled && style.disabled)}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputOption';\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  rounded: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n\nexport { InputNumber };\n"],"mappings":"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"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","showRequired","step","value","onChange","others","role","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { Hint, Label } from '../InputText/partials';\nimport style from './InputNumber.module.css';\n\nconst InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  required,\n  rounded = true,\n  showRequired = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} role={others.role || 'input-number'} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Label {...{ disabled, label, required: showRequired && required }} className={style.label} />}\n      {hint && <Hint {...{ disabled, hint }} className={style.hint} />}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text headline tag=\"span\" className={styles(style.value, disabled && style.disabled)}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputNumber';\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  rounded: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n\nexport { InputNumber };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,WAAW,GAAG,SAAdA,WAAW;EAAA,IACfC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IACPC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,IAAI;IAAA,yBACdC,YAAY;IAAZA,YAAY,kCAAG,KAAK;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAChBC,MAAM;EAAA,oBAET,6BAAC,gBAAI,eAAKA,MAAM;IAAE,IAAI,EAAEA,MAAM,CAACC,IAAI,IAAI,cAAe;IAAC,GAAG;IAAC,SAAS,EAAE,IAAAC,eAAM,EAACC,0BAAK,CAACC,WAAW,EAAEJ,MAAM,CAACK,SAAS;EAAE,iBAChH,6BAAC,gBAAI;IAAC,SAAS,EAAEF,0BAAK,CAACG;EAAM,GAC1BhB,KAAK,iBAAI,6BAAC,eAAK;IAAOF,QAAQ,EAARA,QAAQ;IAAEE,KAAK,EAALA,KAAK;IAAEI,QAAQ,EAAEE,YAAY,IAAIF,QAAQ;IAAI,SAAS,EAAES,0BAAK,CAACb;EAAM,EAAG,EACvGD,IAAI,iBAAI,6BAAC,cAAI;IAAOD,QAAQ,EAARA,QAAQ;IAAEC,IAAI,EAAJA,IAAI;IAAI,SAAS,EAAEc,0BAAK,CAACd;EAAK,EAAG,CAC3D,eACP,6BAAC,cAAM;IACL,QAAQ,EAAED,QAAQ,IAAIU,KAAK,IAAIN,GAAI;IACnC,OAAO,EAAEG,OAAQ;IACjB,SAAS;IACT,OAAO;IACP,OAAO,EAAE;MAAA,OAAMI,QAAQ,CAACD,KAAK,GAAGD,IAAI,EAAEJ,IAAI,CAAC;IAAA;EAAC,gBAE5C,6BAAC,gBAAI;IAAC,KAAK,EAAEc,gBAAI,CAACC;EAAO,EAAG,CACrB,eACT,6BAAC,gBAAI;IAAC,QAAQ;IAAC,GAAG,EAAC,MAAM;IAAC,SAAS,EAAE,IAAAN,eAAM,EAACC,0BAAK,CAACL,KAAK,EAAEV,QAAQ,IAAIe,0BAAK,CAACf,QAAQ;EAAE,GAClF,OAAOU,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGN,GAAG,CACnC,eACP,6BAAC,cAAM;IACL,QAAQ,EAAEJ,QAAQ,IAAIU,KAAK,IAAIP,GAAI;IACnC,OAAO,EAAEI,OAAQ;IACjB,SAAS;IACT,OAAO;IACP,OAAO,EAAE;MAAA,OAAMI,QAAQ,CAACD,KAAK,GAAGD,IAAI,EAAEJ,IAAI,CAAC;IAAA;EAAC,gBAE5C,6BAAC,gBAAI;IAAC,KAAK,EAAEc,gBAAI,CAACE;EAAI,EAAG,CAClB,CACJ;AAAA,CACR;AAAC;AAEFtB,WAAW,CAACuB,WAAW,GAAG,uBAAuB;AAEjDvB,WAAW,CAACwB,SAAS,GAAG;EACtBvB,QAAQ,EAAEwB,kBAAS,CAACC,IAAI;EACxBxB,IAAI,EAAEuB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,KAAK,CAAC,CAAC;EAC9D1B,KAAK,EAAEsB,kBAAS,CAACG,MAAM;EACvBxB,GAAG,EAAEqB,kBAAS,CAACK,MAAM;EACrBzB,GAAG,EAAEoB,kBAAS,CAACK,MAAM;EACrBxB,IAAI,EAAEmB,kBAAS,CAACG,MAAM,CAACG,UAAU;EACjCxB,QAAQ,EAAEkB,kBAAS,CAACC,IAAI;EACxBlB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,YAAY,EAAEgB,kBAAS,CAACC,IAAI;EAC5BhB,IAAI,EAAEe,kBAAS,CAACK,MAAM;EACtBnB,KAAK,EAAEc,kBAAS,CAACK,MAAM;EACvBlB,QAAQ,EAAEa,kBAAS,CAACO;AACtB,CAAC"}