diff --git a/docs/assets/base-80a1f760-6ac9ba40.js b/docs/assets/base-80a1f760-213c0e0a.js similarity index 89% rename from docs/assets/base-80a1f760-6ac9ba40.js rename to docs/assets/base-80a1f760-213c0e0a.js index 7455d36f..1c35b8f8 100644 --- a/docs/assets/base-80a1f760-6ac9ba40.js +++ b/docs/assets/base-80a1f760-213c0e0a.js @@ -1 +1 @@ -import{e as n}from"./index-082449c3.js";var p=function(){function o(t,i,e){e===void 0&&(e={}),this.status="idle",this.options=e,this.sandboxSetup=i,this.iframeSelector=t}return o.prototype.updateOptions=function(t){n(this.options,t)||(this.options=t,this.updateSandbox())},o.prototype.updateSandbox=function(t,i){throw t===void 0&&(t=this.sandboxSetup),Error("Method not implemented")},o.prototype.destroy=function(){throw Error("Method not implemented")},o.prototype.dispatch=function(t){throw Error("Method not implemented")},o.prototype.listen=function(t){throw Error("Method not implemented")},o}();export{p as S}; +import{e as n}from"./index-fcbc73c3.js";var p=function(){function o(t,i,e){e===void 0&&(e={}),this.status="idle",this.options=e,this.sandboxSetup=i,this.iframeSelector=t}return o.prototype.updateOptions=function(t){n(this.options,t)||(this.options=t,this.updateSandbox())},o.prototype.updateSandbox=function(t,i){throw t===void 0&&(t=this.sandboxSetup),Error("Method not implemented")},o.prototype.destroy=function(){throw Error("Method not implemented")},o.prototype.dispatch=function(t){throw Error("Method not implemented")},o.prototype.listen=function(t){throw Error("Method not implemented")},o}();export{p as S}; diff --git a/docs/assets/consoleHook-cdbe54ab-3ce2906c.js b/docs/assets/consoleHook-cdbe54ab-fb629b26.js similarity index 99% rename from docs/assets/consoleHook-cdbe54ab-3ce2906c.js rename to docs/assets/consoleHook-cdbe54ab-fb629b26.js index 2caf1fca..b58019fd 100644 --- a/docs/assets/consoleHook-cdbe54ab-3ce2906c.js +++ b/docs/assets/consoleHook-cdbe54ab-fb629b26.js @@ -1,2 +1,2 @@ -import{d as h,i as M}from"./index-082449c3.js";var k=function(){function t(){this.listeners={},this.listenersCount=0,this.channelId=Math.floor(Math.random()*1e6),this.listeners=[]}return t.prototype.cleanup=function(){this.listeners={},this.listenersCount=0},t.prototype.dispatch=function(r){Object.values(this.listeners).forEach(function(e){return e(r)})},t.prototype.listener=function(r){var e=this;if(typeof r!="function")return function(){};var s=this.listenersCount;return this.listeners[s]=r,this.listenersCount++,function(){delete e.listeners[s]}},t}();function v(t){return/[a-zA-Z.]/.test(t)}function b(t){return/[a-zA-Z]/.test(t)}function S(t){return/\s/.test(t)}function y(t){return/[&|]/.test(t)}function g(t){return/-/.test(t)}function w(t){return/["']/.test(t)}function _(t){return b(t)&&t===t.toUpperCase()}var a;(function(t){t.OR="OR",t.AND="AND",t.PIPE="PIPE",t.Command="Command",t.Argument="Argument",t.String="String",t.EnvVar="EnvVar"})(a||(a={}));var O=new Map([["&&",{type:a.AND}],["||",{type:a.OR}],["|",{type:a.PIPE}],["-",{type:a.Argument}]]);function E(t){var r=0,e=[];function s(){for(var n="";v(t[r])&&r-1){var n=this.circularCandidatesDescrs[e];return-1===n.refIdx&&(n.refIdx=n.parent?++this.circularRefCount:0),t._createRefMark(n.refIdx)}return null},t.prototype._handleValue=function(t,r,e){try{var n=t(),a=typeof n,o="object"===a&&null!==n;if(o){var i=this._ensureCircularReference(n);if(i)return i}var u=this._findTransform(a,n);return u?this._applyTransform(n,r,e,u):o?this._handleObject(n,r,e):n}catch(t){try{return this._handleValue((function(){return t instanceof Error?t:new Error(t)}),r,e)}catch(t){return null}}},t.prototype._makeTransformsMap=function(){if(o){var t=new Map;return this.transforms.forEach((function(r){r.lookup&&t.set(r.lookup,r)})),t}},t.prototype._findTransform=function(t,r){if(o&&r&&r.constructor&&(null==(a=this.transformsMap.get(r.constructor))?void 0:a.shouldTransform(t,r)))return a;for(var e=0,n=this.transforms;e0&&(e[o.refIdx]=o.parent[o.key],o.parent[o.key]=t._createRefMark(o.refIdx))}return e},t}(),l=function(){function t(t,r){this.activeTransformsStack=[],this.visitedRefs=Object.create(null),this.references=t,this.transformMap=r}return t.prototype._handlePlainObject=function(t){var r=Object.create(null);for(var n in"constructor"in t&&(t.constructor&&"string"==typeof t.constructor.name||(t.constructor={name:"Object"})),t)t.hasOwnProperty(n)&&(this._handleValue(t[n],t,n),e.test(n)&&(r[n.substring(1)]=t[n],delete t[n]));for(var a in r)t[a]=r[a]},t.prototype._handleTransformedObject=function(t,e,n){var a=t[r],o=this.transformMap[a];if(!o)throw new Error("Can't find transform for \\""+a+'" type.');this.activeTransformsStack.push(t),this._handleValue(t.data,t,"data"),this.activeTransformsStack.pop(),e[n]=o.fromSerializable(t.data)},t.prototype._handleCircularSelfRefDuringTransform=function(t,r,e){var n=this.references;Object.defineProperty(r,e,{val:void 0,configurable:!0,enumerable:!0,get:function(){return void 0===this.val&&(this.val=n[t]),this.val},set:function(t){this.val=t}})},t.prototype._handleCircularRef=function(t,r,e){this.activeTransformsStack.includes(this.references[t])?this._handleCircularSelfRefDuringTransform(t,r,e):(this.visitedRefs[t]||(this.visitedRefs[t]=!0,this._handleValue(this.references[t],this.references,t)),r[e]=this.references[t])},t.prototype._handleValue=function(t,e,n){if("object"==typeof t&&null!==t){var a=t["@r"];if(void 0!==a)this._handleCircularRef(a,e,n);else if(t[r])this._handleTransformedObject(t,e,n);else if(Array.isArray(t))for(var o=0;o-1&&this.transforms.splice(a,1),delete this.transformsMap[n.type]}return this},t.prototype.encode=function(t){var r=new c(t,this.transforms).transform();return this.serializer.serialize(r)},t.prototype.decode=function(t){var r=this.serializer.deserialize(t);return new l(r,this.transformsMap).transform()},t}();t.default=p}(z);var E=t&&t.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};S.__esModule=!0,S.Decode=P=S.Encode=void 0;var k=E(O),C=E(w),D=E(A),I=E(j),N=E(z),R=[D.default,C.default,k.default,I.default],x=new N.default;x.addTransforms(R);var P=S.Encode=function(t){return JSON.parse(x.encode(t))};S.Decode=function(t){return x.decode(JSON.stringify(t))},function(r){var e=t&&t.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};r.__esModule=!0;var a=e(n),i=e(o),u=S;r.default=function(t,r,e){void 0===e&&(e=!0);for(var n=t,o={pointers:{},src:{npm:"https://npmjs.com/package/console-feed",github:"https://github.com/samdenty99/console-feed"}},s=function(t){var a=n[t];n[t]=function(){a.apply(this,arguments);var n=[].slice.call(arguments);setTimeout((function(){var a=i.default(t,n);if(a){var o=a;e&&(o=u.Encode(a)),r(o,a)}}))},o.pointers[t]=a},f=0,c=a.default;f-1){var n=this.circularCandidatesDescrs[e];return-1===n.refIdx&&(n.refIdx=n.parent?++this.circularRefCount:0),t._createRefMark(n.refIdx)}return null},t.prototype._handleValue=function(t,r,e){try{var n=t(),a=typeof n,o="object"===a&&null!==n;if(o){var i=this._ensureCircularReference(n);if(i)return i}var u=this._findTransform(a,n);return u?this._applyTransform(n,r,e,u):o?this._handleObject(n,r,e):n}catch(t){try{return this._handleValue((function(){return t instanceof Error?t:new Error(t)}),r,e)}catch(t){return null}}},t.prototype._makeTransformsMap=function(){if(o){var t=new Map;return this.transforms.forEach((function(r){r.lookup&&t.set(r.lookup,r)})),t}},t.prototype._findTransform=function(t,r){if(o&&r&&r.constructor&&(null==(a=this.transformsMap.get(r.constructor))?void 0:a.shouldTransform(t,r)))return a;for(var e=0,n=this.transforms;e0&&(e[o.refIdx]=o.parent[o.key],o.parent[o.key]=t._createRefMark(o.refIdx))}return e},t}(),l=function(){function t(t,r){this.activeTransformsStack=[],this.visitedRefs=Object.create(null),this.references=t,this.transformMap=r}return t.prototype._handlePlainObject=function(t){var r=Object.create(null);for(var n in"constructor"in t&&(t.constructor&&"string"==typeof t.constructor.name||(t.constructor={name:"Object"})),t)t.hasOwnProperty(n)&&(this._handleValue(t[n],t,n),e.test(n)&&(r[n.substring(1)]=t[n],delete t[n]));for(var a in r)t[a]=r[a]},t.prototype._handleTransformedObject=function(t,e,n){var a=t[r],o=this.transformMap[a];if(!o)throw new Error("Can't find transform for \\""+a+'" type.');this.activeTransformsStack.push(t),this._handleValue(t.data,t,"data"),this.activeTransformsStack.pop(),e[n]=o.fromSerializable(t.data)},t.prototype._handleCircularSelfRefDuringTransform=function(t,r,e){var n=this.references;Object.defineProperty(r,e,{val:void 0,configurable:!0,enumerable:!0,get:function(){return void 0===this.val&&(this.val=n[t]),this.val},set:function(t){this.val=t}})},t.prototype._handleCircularRef=function(t,r,e){this.activeTransformsStack.includes(this.references[t])?this._handleCircularSelfRefDuringTransform(t,r,e):(this.visitedRefs[t]||(this.visitedRefs[t]=!0,this._handleValue(this.references[t],this.references,t)),r[e]=this.references[t])},t.prototype._handleValue=function(t,e,n){if("object"==typeof t&&null!==t){var a=t["@r"];if(void 0!==a)this._handleCircularRef(a,e,n);else if(t[r])this._handleTransformedObject(t,e,n);else if(Array.isArray(t))for(var o=0;o-1&&this.transforms.splice(a,1),delete this.transformsMap[n.type]}return this},t.prototype.encode=function(t){var r=new c(t,this.transforms).transform();return this.serializer.serialize(r)},t.prototype.decode=function(t){var r=this.serializer.deserialize(t);return new l(r,this.transformsMap).transform()},t}();t.default=p}(z);var E=t&&t.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};S.__esModule=!0,S.Decode=P=S.Encode=void 0;var k=E(O),C=E(w),D=E(A),I=E(j),N=E(z),R=[D.default,C.default,k.default,I.default],x=new N.default;x.addTransforms(R);var P=S.Encode=function(t){return JSON.parse(x.encode(t))};S.Decode=function(t){return x.decode(JSON.stringify(t))},function(r){var e=t&&t.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};r.__esModule=!0;var a=e(n),i=e(o),u=S;r.default=function(t,r,e){void 0===e&&(e=!0);for(var n=t,o={pointers:{},src:{npm:"https://npmjs.com/package/console-feed",github:"https://github.com/samdenty99/console-feed"}},s=function(t){var a=n[t];n[t]=function(){a.apply(this,arguments);var n=[].slice.call(arguments);setTimeout((function(){var a=i.default(t,n);if(a){var o=a;e&&(o=u.Encode(a)),r(o,a)}}))},o.pointers[t]=a},f=0,c=a.default;fr in e?ne(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t;var p=(e,r,t)=>(ie(e,typeof r!="symbol"?r+"":r,t),t),T=(e,r,t)=>{if(!r.has(e))throw TypeError("Cannot "+t)};var k=(e,r,t)=>(T(e,r,"read from private field"),t?t.call(e):r.get(e)),R=(e,r,t)=>{if(r.has(e))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(e):r.set(e,t)},V=(e,r,t,n)=>(T(e,r,"write to private field"),n?n.call(e,t):r.set(e,t),t);var F=(e,r,t)=>(T(e,r,"access private method"),t);import{_ as se,a as E,b as P,c as A,d as K,n as N}from"./index-082449c3.js";import{S as oe}from"./base-80a1f760-6ac9ba40.js";import{c as ae,g as z,r as U,f as ce,w as W,a as de,b as le,E as ue}from"./consoleHook-cdbe54ab-3ce2906c.js";var he=Object.create,q=Object.defineProperty,fe=Object.getOwnPropertyDescriptor,X=Object.getOwnPropertyNames,pe=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty,ve=(e,r,t)=>r in e?q(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,b=(e,r)=>function(){return r||(0,e[X(e)[0]])((r={exports:{}}).exports,r),r.exports},we=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of X(r))!me.call(e,s)&&s!==t&&q(e,s,{get:()=>r[s],enumerable:!(n=fe(r,s))||n.enumerable});return e},j=(e,r,t)=>(t=e!=null?he(pe(e)):{},we(r||!e||!e.__esModule?q(t,"default",{value:e,enumerable:!0}):t,e)),ge=(e,r,t)=>(ve(e,typeof r!="symbol"?r+"":r,t),t),H=(e,r,t)=>{if(!r.has(e))throw TypeError("Cannot "+t)},y=(e,r,t)=>(H(e,r,"read from private field"),t?t.call(e):r.get(e)),O=(e,r,t)=>{if(r.has(e))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(e):r.set(e,t)},C=(e,r,t,n)=>(H(e,r,"write to private field"),n?n.call(e,t):r.set(e,t),t),_=(e,r,t)=>(H(e,r,"access private method"),t),Q=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/lib/pad.js"(e,r){r.exports=function(n,s){var i="000000000"+n;return i.substr(i.length-s)}}}),ye=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/lib/fingerprint.browser.js"(e,r){var t=Q(),n=typeof window=="object"?window:self,s=Object.keys(n).length,i=navigator.mimeTypes?navigator.mimeTypes.length:0,o=t((i+navigator.userAgent.length).toString(36)+s.toString(36),4);r.exports=function(){return o}}}),_e=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/lib/getRandomValue.browser.js"(e,r){var t,n=typeof window<"u"&&(window.crypto||window.msCrypto)||typeof self<"u"&&self.crypto;n?(s=Math.pow(2,32)-1,t=function(){return Math.abs(n.getRandomValues(new Uint32Array(1))[0]/s)}):t=Math.random;var s;r.exports=t}}),Z=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/index.js"(e,r){var t=ye(),n=Q(),s=_e(),i=0,o=4,a=36,c=Math.pow(a,o);function l(){return n((s()*c<<0).toString(a),o)}function h(){return i=i=7&&S<=10},f.fingerprint=t,r.exports=f}}),ee=b({"../../node_modules/.pnpm/@open-draft+deferred-promise@2.1.0/node_modules/@open-draft/deferred-promise/build/createDeferredExecutor.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.createDeferredExecutor=void 0;function r(){const t=(n,s)=>{t.state="pending",t.resolve=i=>{if(t.state!=="pending")return;t.result=i;const o=a=>(t.state="fulfilled",a);return n(i instanceof Promise?i:Promise.resolve(i).then(o))},t.reject=i=>{if(t.state==="pending")return queueMicrotask(()=>{t.state="rejected"}),s(t.rejectionReason=i)}};return t}e.createDeferredExecutor=r}}),Ee=b({"../../node_modules/.pnpm/@open-draft+deferred-promise@2.1.0/node_modules/@open-draft/deferred-promise/build/DeferredPromise.js"(e){var n,s,D,o;Object.defineProperty(e,"__esModule",{value:!0}),e.DeferredPromise=void 0;var r=ee(),t=(o=class extends Promise{constructor(c=null){const l=(0,r.createDeferredExecutor)();super((h,f)=>{l(h,f),c==null||c(l.resolve,l.reject)});R(this,s);R(this,n,void 0);p(this,"resolve");p(this,"reject");V(this,n,l),this.resolve=k(this,n).resolve,this.reject=k(this,n).reject}get state(){return k(this,n).state}get rejectionReason(){return k(this,n).rejectionReason}then(c,l){return F(this,s,D).call(this,super.then(c,l))}catch(c){return F(this,s,D).call(this,super.catch(c))}finally(c){return F(this,s,D).call(this,super.finally(c))}},n=new WeakMap,s=new WeakSet,D=function(c){return Object.defineProperties(c,{resolve:{configurable:!0,value:this.resolve},reject:{configurable:!0,value:this.reject}})},o);e.DeferredPromise=t}}),$=b({"../../node_modules/.pnpm/@open-draft+deferred-promise@2.1.0/node_modules/@open-draft/deferred-promise/build/index.js"(e){var r=e&&e.__createBinding||(Object.create?function(n,s,i,o){o===void 0&&(o=i);var a=Object.getOwnPropertyDescriptor(s,i);(!a||("get"in a?!s.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return s[i]}}),Object.defineProperty(n,o,a)}:function(n,s,i,o){o===void 0&&(o=i),n[o]=s[i]}),t=e&&e.__exportStar||function(n,s){for(var i in n)i!=="default"&&!Object.prototype.hasOwnProperty.call(s,i)&&r(s,n,i)};Object.defineProperty(e,"__esModule",{value:!0}),t(ee(),e),t(Ee(),e)}}),te=b({"../../node_modules/.pnpm/strict-event-emitter@0.4.3/node_modules/strict-event-emitter/lib/MemoryLeakError.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.MemoryLeakError=void 0;var r=class extends Error{constructor(n,s,i){super(`Possible EventEmitter memory leak detected. ${i} ${s.toString()} listeners added. Use emitter.setMaxListeners() to increase limit`);p(this,"emitter");p(this,"type");p(this,"count");this.emitter=n,this.type=s,this.count=i,this.name="MaxListenersExceededWarning"}};e.MemoryLeakError=r}}),Pe=b({"../../node_modules/.pnpm/strict-event-emitter@0.4.3/node_modules/strict-event-emitter/lib/Emitter.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Emitter=void 0;var r=te(),t,n,s,i,o,a,c,l,h,f,v,w=class{constructor(){O(this,i),O(this,a),O(this,l),O(this,f),O(this,t,void 0),O(this,n,void 0),O(this,s,void 0),C(this,t,new Map),C(this,n,w.defaultMaxListeners),C(this,s,!1)}static listenerCount(d,u){return d.listenerCount(u)}setMaxListeners(d){return C(this,n,d),this}getMaxListeners(){return y(this,n)}eventNames(){return Array.from(y(this,t).keys())}emit(d,...u){const m=_(this,i,o).call(this,d);return m.forEach(M=>{M.apply(this,u)}),m.length>0}addListener(d,u){_(this,f,v).call(this,"newListener",d,u);const m=_(this,i,o).call(this,d).concat(u);if(y(this,t).set(d,m),y(this,n)>0&&this.listenerCount(d)>y(this,n)&&!y(this,s)){C(this,s,!0);const M=new r.MemoryLeakError(this,d,this.listenerCount(d));console.warn(M)}return this}on(d,u){return this.addListener(d,u)}once(d,u){return this.addListener(d,_(this,l,h).call(this,d,u))}prependListener(d,u){const m=_(this,i,o).call(this,d);if(m.length>0){const M=[u].concat(m);y(this,t).set(d,M)}else y(this,t).set(d,m.concat(u));return this}prependOnceListener(d,u){return this.prependListener(d,_(this,l,h).call(this,d,u))}removeListener(d,u){const m=_(this,i,o).call(this,d);return m.length>0&&(_(this,a,c).call(this,m,u),y(this,t).set(d,m),_(this,f,v).call(this,"removeListener",d,u)),this}off(d,u){return this.removeListener(d,u)}removeAllListeners(d){return d?y(this,t).delete(d):y(this,t).clear(),this}listeners(d){return Array.from(_(this,i,o).call(this,d))}listenerCount(d){return _(this,i,o).call(this,d).length}rawListeners(d){return this.listeners(d)}},S=w;t=new WeakMap,n=new WeakMap,s=new WeakMap,i=new WeakSet,o=function(d){return y(this,t).get(d)||[]},a=new WeakSet,c=function(d,u){const m=d.indexOf(u);return m>-1&&d.splice(m,1),[]},l=new WeakSet,h=function(d,u){const m=(...M)=>{this.removeListener(d,m),u.apply(this,M)};return m},f=new WeakSet,v=function(d,u,m){this.emit(d,u,m)},ge(S,"defaultMaxListeners",10),e.Emitter=S}}),be=b({"../../node_modules/.pnpm/strict-event-emitter@0.4.3/node_modules/strict-event-emitter/lib/index.js"(e){var r=e&&e.__createBinding||(Object.create?function(n,s,i,o){o===void 0&&(o=i);var a=Object.getOwnPropertyDescriptor(s,i);(!a||("get"in a?!s.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return s[i]}}),Object.defineProperty(n,o,a)}:function(n,s,i,o){o===void 0&&(o=i),n[o]=s[i]}),t=e&&e.__exportStar||function(n,s){for(var i in n)i!=="default"&&!Object.prototype.hasOwnProperty.call(s,i)&&r(s,n,i)};Object.defineProperty(e,"__esModule",{value:!0}),t(Pe(),e),t(te(),e)}}),Se=j(Z()),Le=/(%?)(%([sdjo]))/g;function Ie(e,r){switch(r){case"s":return e;case"d":case"i":return Number(e);case"j":return JSON.stringify(e);case"o":{if(typeof e=="string")return e;const t=JSON.stringify(e);return t==="{}"||t==="[]"||/^\[object .+?\]$/.test(t)?e:t}}}function g(e,...r){if(r.length===0)return e;let t=0,n=e.replace(Le,(s,i,o,a)=>{const c=r[t],l=Ie(c,a);return i?s:(t++,l)});return tr in e?ne(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t;var p=(e,r,t)=>(ie(e,typeof r!="symbol"?r+"":r,t),t),T=(e,r,t)=>{if(!r.has(e))throw TypeError("Cannot "+t)};var k=(e,r,t)=>(T(e,r,"read from private field"),t?t.call(e):r.get(e)),R=(e,r,t)=>{if(r.has(e))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(e):r.set(e,t)},V=(e,r,t,n)=>(T(e,r,"write to private field"),n?n.call(e,t):r.set(e,t),t);var F=(e,r,t)=>(T(e,r,"access private method"),t);import{_ as se,a as E,b as P,c as A,d as K,n as N}from"./index-fcbc73c3.js";import{S as oe}from"./base-80a1f760-213c0e0a.js";import{c as ae,g as z,r as U,f as ce,w as W,a as de,b as le,E as ue}from"./consoleHook-cdbe54ab-fb629b26.js";var he=Object.create,q=Object.defineProperty,fe=Object.getOwnPropertyDescriptor,X=Object.getOwnPropertyNames,pe=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty,ve=(e,r,t)=>r in e?q(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,b=(e,r)=>function(){return r||(0,e[X(e)[0]])((r={exports:{}}).exports,r),r.exports},we=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of X(r))!me.call(e,s)&&s!==t&&q(e,s,{get:()=>r[s],enumerable:!(n=fe(r,s))||n.enumerable});return e},j=(e,r,t)=>(t=e!=null?he(pe(e)):{},we(r||!e||!e.__esModule?q(t,"default",{value:e,enumerable:!0}):t,e)),ge=(e,r,t)=>(ve(e,typeof r!="symbol"?r+"":r,t),t),H=(e,r,t)=>{if(!r.has(e))throw TypeError("Cannot "+t)},y=(e,r,t)=>(H(e,r,"read from private field"),t?t.call(e):r.get(e)),O=(e,r,t)=>{if(r.has(e))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(e):r.set(e,t)},C=(e,r,t,n)=>(H(e,r,"write to private field"),n?n.call(e,t):r.set(e,t),t),_=(e,r,t)=>(H(e,r,"access private method"),t),Q=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/lib/pad.js"(e,r){r.exports=function(n,s){var i="000000000"+n;return i.substr(i.length-s)}}}),ye=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/lib/fingerprint.browser.js"(e,r){var t=Q(),n=typeof window=="object"?window:self,s=Object.keys(n).length,i=navigator.mimeTypes?navigator.mimeTypes.length:0,o=t((i+navigator.userAgent.length).toString(36)+s.toString(36),4);r.exports=function(){return o}}}),_e=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/lib/getRandomValue.browser.js"(e,r){var t,n=typeof window<"u"&&(window.crypto||window.msCrypto)||typeof self<"u"&&self.crypto;n?(s=Math.pow(2,32)-1,t=function(){return Math.abs(n.getRandomValues(new Uint32Array(1))[0]/s)}):t=Math.random;var s;r.exports=t}}),Z=b({"../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/index.js"(e,r){var t=ye(),n=Q(),s=_e(),i=0,o=4,a=36,c=Math.pow(a,o);function l(){return n((s()*c<<0).toString(a),o)}function h(){return i=i=7&&S<=10},f.fingerprint=t,r.exports=f}}),ee=b({"../../node_modules/.pnpm/@open-draft+deferred-promise@2.1.0/node_modules/@open-draft/deferred-promise/build/createDeferredExecutor.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.createDeferredExecutor=void 0;function r(){const t=(n,s)=>{t.state="pending",t.resolve=i=>{if(t.state!=="pending")return;t.result=i;const o=a=>(t.state="fulfilled",a);return n(i instanceof Promise?i:Promise.resolve(i).then(o))},t.reject=i=>{if(t.state==="pending")return queueMicrotask(()=>{t.state="rejected"}),s(t.rejectionReason=i)}};return t}e.createDeferredExecutor=r}}),Ee=b({"../../node_modules/.pnpm/@open-draft+deferred-promise@2.1.0/node_modules/@open-draft/deferred-promise/build/DeferredPromise.js"(e){var n,s,D,o;Object.defineProperty(e,"__esModule",{value:!0}),e.DeferredPromise=void 0;var r=ee(),t=(o=class extends Promise{constructor(c=null){const l=(0,r.createDeferredExecutor)();super((h,f)=>{l(h,f),c==null||c(l.resolve,l.reject)});R(this,s);R(this,n,void 0);p(this,"resolve");p(this,"reject");V(this,n,l),this.resolve=k(this,n).resolve,this.reject=k(this,n).reject}get state(){return k(this,n).state}get rejectionReason(){return k(this,n).rejectionReason}then(c,l){return F(this,s,D).call(this,super.then(c,l))}catch(c){return F(this,s,D).call(this,super.catch(c))}finally(c){return F(this,s,D).call(this,super.finally(c))}},n=new WeakMap,s=new WeakSet,D=function(c){return Object.defineProperties(c,{resolve:{configurable:!0,value:this.resolve},reject:{configurable:!0,value:this.reject}})},o);e.DeferredPromise=t}}),$=b({"../../node_modules/.pnpm/@open-draft+deferred-promise@2.1.0/node_modules/@open-draft/deferred-promise/build/index.js"(e){var r=e&&e.__createBinding||(Object.create?function(n,s,i,o){o===void 0&&(o=i);var a=Object.getOwnPropertyDescriptor(s,i);(!a||("get"in a?!s.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return s[i]}}),Object.defineProperty(n,o,a)}:function(n,s,i,o){o===void 0&&(o=i),n[o]=s[i]}),t=e&&e.__exportStar||function(n,s){for(var i in n)i!=="default"&&!Object.prototype.hasOwnProperty.call(s,i)&&r(s,n,i)};Object.defineProperty(e,"__esModule",{value:!0}),t(ee(),e),t(Ee(),e)}}),te=b({"../../node_modules/.pnpm/strict-event-emitter@0.4.3/node_modules/strict-event-emitter/lib/MemoryLeakError.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.MemoryLeakError=void 0;var r=class extends Error{constructor(n,s,i){super(`Possible EventEmitter memory leak detected. ${i} ${s.toString()} listeners added. Use emitter.setMaxListeners() to increase limit`);p(this,"emitter");p(this,"type");p(this,"count");this.emitter=n,this.type=s,this.count=i,this.name="MaxListenersExceededWarning"}};e.MemoryLeakError=r}}),Pe=b({"../../node_modules/.pnpm/strict-event-emitter@0.4.3/node_modules/strict-event-emitter/lib/Emitter.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.Emitter=void 0;var r=te(),t,n,s,i,o,a,c,l,h,f,v,w=class{constructor(){O(this,i),O(this,a),O(this,l),O(this,f),O(this,t,void 0),O(this,n,void 0),O(this,s,void 0),C(this,t,new Map),C(this,n,w.defaultMaxListeners),C(this,s,!1)}static listenerCount(d,u){return d.listenerCount(u)}setMaxListeners(d){return C(this,n,d),this}getMaxListeners(){return y(this,n)}eventNames(){return Array.from(y(this,t).keys())}emit(d,...u){const m=_(this,i,o).call(this,d);return m.forEach(M=>{M.apply(this,u)}),m.length>0}addListener(d,u){_(this,f,v).call(this,"newListener",d,u);const m=_(this,i,o).call(this,d).concat(u);if(y(this,t).set(d,m),y(this,n)>0&&this.listenerCount(d)>y(this,n)&&!y(this,s)){C(this,s,!0);const M=new r.MemoryLeakError(this,d,this.listenerCount(d));console.warn(M)}return this}on(d,u){return this.addListener(d,u)}once(d,u){return this.addListener(d,_(this,l,h).call(this,d,u))}prependListener(d,u){const m=_(this,i,o).call(this,d);if(m.length>0){const M=[u].concat(m);y(this,t).set(d,M)}else y(this,t).set(d,m.concat(u));return this}prependOnceListener(d,u){return this.prependListener(d,_(this,l,h).call(this,d,u))}removeListener(d,u){const m=_(this,i,o).call(this,d);return m.length>0&&(_(this,a,c).call(this,m,u),y(this,t).set(d,m),_(this,f,v).call(this,"removeListener",d,u)),this}off(d,u){return this.removeListener(d,u)}removeAllListeners(d){return d?y(this,t).delete(d):y(this,t).clear(),this}listeners(d){return Array.from(_(this,i,o).call(this,d))}listenerCount(d){return _(this,i,o).call(this,d).length}rawListeners(d){return this.listeners(d)}},S=w;t=new WeakMap,n=new WeakMap,s=new WeakMap,i=new WeakSet,o=function(d){return y(this,t).get(d)||[]},a=new WeakSet,c=function(d,u){const m=d.indexOf(u);return m>-1&&d.splice(m,1),[]},l=new WeakSet,h=function(d,u){const m=(...M)=>{this.removeListener(d,m),u.apply(this,M)};return m},f=new WeakSet,v=function(d,u,m){this.emit(d,u,m)},ge(S,"defaultMaxListeners",10),e.Emitter=S}}),be=b({"../../node_modules/.pnpm/strict-event-emitter@0.4.3/node_modules/strict-event-emitter/lib/index.js"(e){var r=e&&e.__createBinding||(Object.create?function(n,s,i,o){o===void 0&&(o=i);var a=Object.getOwnPropertyDescriptor(s,i);(!a||("get"in a?!s.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return s[i]}}),Object.defineProperty(n,o,a)}:function(n,s,i,o){o===void 0&&(o=i),n[o]=s[i]}),t=e&&e.__exportStar||function(n,s){for(var i in n)i!=="default"&&!Object.prototype.hasOwnProperty.call(s,i)&&r(s,n,i)};Object.defineProperty(e,"__esModule",{value:!0}),t(Pe(),e),t(te(),e)}}),Se=j(Z()),Le=/(%?)(%([sdjo]))/g;function Ie(e,r){switch(r){case"s":return e;case"d":case"i":return Number(e);case"j":return JSON.stringify(e);case"o":{if(typeof e=="string")return e;const t=JSON.stringify(e);return t==="{}"||t==="[]"||/^\[object .+?\]$/.test(t)?e:t}}}function g(e,...r){if(r.length===0)return e;let t=0,n=e.replace(Le,(s,i,o,a)=>{const c=r[t],l=Ie(c,a);return i?s:(t++,l)});return t{if(!e)throw new je(r,...t)};L.as=(e,r,t,...n)=>{if(!r)throw e.prototype.name!=null?new e(g(t,n)):e(g(t,n))};var B=j($()),ke=window.localStorage.CSB_EMULATOR_DEBUG,Ce="\x1B[0m",Fe="\x1B[32;1m",Ae="\x1B[31m",xe="\x1B[34m",De="\x1B[33;1m",Te="\x1B[35;1m",G="\x1B[36;1m",Re={preview:De,emulator:Te,runtime:G,bridge:xe,"runtime:worker":G};function re(e){return function(t,...n){if(ke==="true"){const s=()=>t.includes("sender")?`${Fe}sender`:t.includes("receiver")?`${Ae}receiver`:"",i=t.replace(/\[.+\]:/,"");console.debug(`${Re[e]}${e}:${s()}${Ce}:${i}`,...n)}}}var I=re("emulator"),Ue=class{constructor(e){p(this,"emitter");p(this,"channel");p(this,"receiverPort");p(this,"receiverReadyPromise");this.target=e,this.emitter=new EventTarget,this.channel=new MessageChannel,this.receiverPort=this.channel.port1;const r=new B.DeferredPromise,t=n=>{n.data.type==="internal/ready"&&(I("[message-sender]: runtime is ready"),r.resolve())};window.addEventListener("message",t),r.then(()=>{window.removeEventListener("message",t)}),this.receiverReadyPromise=r,this.receiverPort.onmessage=n=>{const s=n.data;s.type!=null&&(I('[message-sender]: emitting "%s" event...',s.type,s.payload),this.emitter.dispatchEvent(new MessageEvent(s.type,{data:s.payload})))}}async handshake(){const e=new B.DeferredPromise;await this.receiverReadyPromise,I("[message-sender]: sending handshake"),this.target.postMessage({type:"internal/handshake"},"*",[this.channel.port2]),this.on("internal/handshake/done",()=>{e.resolve(),clearTimeout(r)});const r=setTimeout(()=>{e.reject(new Error("MessageSender: Handshake timeout"))},5e3);return e}on(e,r,t){I('[message-sender]: add listener "%s"',e),this.emitter.addEventListener(e,n=>{n instanceof MessageEvent&&r(n)},t)}off(e,r,t){this.emitter.removeEventListener(e,r,t)}async send(e,...r){const t=new B.DeferredPromise,n=(0,Se.default)(),s=r[0]||{};I('[message-sender]: send "%s" (%s)',e,n,s),this.receiverPort.postMessage({type:e,payload:{operationId:n,payload:s}}),I('[message-sender]: adding done listener for "%s" (%s)',e,n);const i=a=>{const{data:c}=a;if(c.operationId===n){const l=c.listenerPayload||{};I('[message-sender]: resolving "%s (%s) promise!',e,n),t.resolve({...l,operationId:c.operationId})}},o=a=>{const{data:c}=a;c.operationId===n&&(I('[message-sender]: rejecting "%s (%s) promise!',e,n),t.reject(c.error))};return this.on("internal/operation/done",i),this.on("internal/operation/failed",o),t.finally(()=>{this.emitter.removeEventListener("internal/operation/done",i),this.emitter.removeEventListener("internal/operation/failed",o)})}},J=j($()),We=j(Z()),Be=class{constructor(e){this.channel=e}async init(e){await this.channel.send("fs/init",{files:e})}async readFile(e,r){const t=await this.channel.send("fs/readFile",{path:e,encoding:r}).catch(n=>{throw new Error(g('Failed to read file at path "%s"',e),{cause:n})});if(!t)throw new Error("File not found");return t.data}async writeFile(e,r,t){let n,s=!1;typeof t=="object"?(n=t.encoding,s=!!t.recursive):typeof t=="string"&&(n=t),await this.channel.send("fs/writeFile",{path:e,content:r,encoding:n,recursive:s}).catch(i=>{throw new Error(g('Failed to write file at path "%s"',e),{cause:i})})}async readdir(e){const r=await this.channel.send("fs/readdir",{path:e}).catch(t=>{throw new Error(g('Failed to read directory at path "%s"',e),{cause:t})});if(!r)throw new Error("Directory not found");return r.data}async mkdir(e,r){const t=!!(r!=null&&r.recursive);await this.channel.send("fs/mkdir",{path:e,recursive:t}).catch(n=>{throw new Error(g('Failed to make directory at path "%s"',e),{cause:n})})}async stat(e){const r=await this.channel.send("fs/stat",{path:e}).catch(t=>{throw new Error(g('Failed to stat file at path "%s"',e),{cause:t})});if(!r)throw new Error("File not found");return r.data}async rm(e,r){const{force:t,recursive:n}=r||{};await this.channel.send("fs/rm",{path:e,force:t,recursive:n}).catch(s=>{throw new Error(g('Failed to remove file at path "%s"',e),{cause:s})})}async watch(e,r,t){const n=(0,We.default)();return await this.channel.send("fs/watch",{watcherId:n,includes:e,excludes:r}),this.channel.on("fs/watch-event",({data:s})=>{if(s.watcherId===n&&t){const i={...s};delete i.watcherId,t(i)}}),{dispose:()=>this.channel.send("fs/unwatch",{watcherId:n})}}},Y=j(be()),Ne=class{constructor(e){this.channel=e}create(){return new qe(this.channel)}},qe=class{constructor(e){p(this,"id");p(this,"state");p(this,"stdout");p(this,"stderr");p(this,"stdin");this.channel=e,this.state="running",this.stdout=new Y.Emitter,this.stderr=new Y.Emitter,this.stdin={write:r=>{if(!this.id)throw new Error("Failed to write to stdin, no process is currently running");return this.channel.send("shell/stdin",{data:r,workerId:this.id})}},this.forwardStdEvents()}forwardStdEvents(){this.channel.on("worker/tty",e=>{const{data:r}=e;if(r.workerId===this.id)switch(r.payload.type){case"out":{this.stdout.emit("data",r.payload.data);break}case"err":{this.stderr.emit("data",r.payload.data);break}}})}async runCommand(e,r,t={}){L(!this.id,'Failed to run "runCommand" on a ShellProcess: there is already a process running.');const n=await this.channel.send("shell/runCommand",{command:e,args:r,options:t});return L(n,'Failed to run "runCommand" on a ShellProcess: was not able to retrieve a running process.'),this.id=n.id,this.state="running",n}async on(e,r){switch(e){case"progress":{this.channel.on("worker/progress",({data:t})=>{r(t.status)});return}case"exit":{this.channel.on("worker/exit",({data:t})=>{t.workerId===this.id&&r(t.exitCode,t.error)});return}}}async kill(){L(this.id,'Failed to run "kill" on a ShellProcess: there is no process running. Did you forget to run it?'),this.state="idle",await this.channel.send("shell/exit",{id:this.id}).catch(e=>{throw new Error(g('Failed to kill shell with ID "%s"',this.id),{cause:e})}),this.id=void 0}},He=j($()),$e=2e4,Ve=class{constructor(e){this.channel=e}async waitFor(e,r,t=$e){const n=new He.DeferredPromise,s=setTimeout(()=>{n.reject()},t),i=await this.channel.send("preview/get/info",e).catch(a=>{n.reject(new Error(g('Failed to look up preview information for shell ID "%s" (port: %d)',e.sourceShellId,e.port)))}),o=i&&r(i);return o&&n.resolve({url:i.url,port:i.port,sourceShellId:i.sourceShellId}),this.channel.on("preview/port/ready",({data:a})=>{!o&&r(a)&&n.resolve({url:a.url,port:a.port,sourceShellId:a.sourceShellId})}),n.finally(()=>{clearTimeout(s)})}async getByShellId(e,r){return this.waitFor({sourceShellId:e},t=>t.sourceShellId===e,r).catch(t=>{throw new Error(g('Failed to get shell by ID "%s"',e),{cause:t})})}async waitForPort(e,r){return this.waitFor({port:e},t=>t.port===e,r).catch(t=>{throw new Error(g("Failed to await port %d",e),{cause:t})})}},ze="https://nodebox-runtime.codesandbox.io",x=re("emulator"),Ge=class{constructor(e){p(this,"channel",null);p(this,"isConnected");p(this,"url");p(this,"fileSystemApi",null);p(this,"shellApi",null);p(this,"previewApi",null);this.options=e,L(this.options.iframe,'Failed to create a Nodebox: expected "iframe" argument to be a reference to an \\n\\n## Getting Started\\n\\n##### Install with npm\\n\\n```\\nnpm install --save informed\\n```\\n\\n#### What Can it do ?\\n\\nSee for yourself.\\n\\nBy default it comes with native dom inputs that are controlled by informed.\\n\\n```jsx\\nimport { Form, Input, Select, Checkbox, Relevant, Debug } from 'informed';\\n\\nconst onSubmit = ({ values }) => console.log(values);\\n\\nconst ExampleForm = () => (\\n
\\n \\n \\n \\n \\n \\n formState.values.married}>\\n \\n \\n \\n \\n \\n);\\n```\\n\\n\\n\";","import React from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport { Form, Input, Select, Checkbox, Relevant, Debug } from '../../../src';\n// import { CodeBlock } from '../../utils/CodeBlock';\n\nconst code = `\nimport { Form, Input, Select, Checkbox, Relevant } from 'informed';\nimport style from './style.css';\n\nconst onSubmit = ({values}) => console.log(values);\n\nexport default function App() {\n return (\n
\n \n \n \n \n \n formState.values.married}>\n \n \n \n
\n )\n}`;\n\nconst onSubmit = ({ values }) => console.log(values);\n\nconst GettingStarted = () => (\n <>\n
\n
\n
\n \n \n \n \n \n formState.values.married}>\n \n \n \n
\n
\n \n
\n
\n
\n
\n {/* */}\n \n);\n\nexport default withDocs(readme, GettingStarted);\n","export default \"## Schema Vs Format\\n\\nHere is the same form with Format Based ( JSX ), and with JSON Schema.\\n\\n\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport { SchemaFields, Form, Input, Select } from '../../../src';\n\nconst codeHeight = '1250px';\n\nconst onSubmit = ({ values }) => console.log(data);\n\nconst schema = {\n type: 'object',\n required: ['age'],\n properties: {\n name: {\n type: 'string',\n title: 'Name',\n 'ui:props': {\n placeholder: 'Elon'\n }\n },\n age: {\n type: 'number',\n title: 'Age',\n errorMessage: {\n required: 'Age Required'\n }\n },\n phone: {\n type: 'string',\n title: 'Phone',\n 'ui:props': {\n formatter: '+1 (###)-###-####'\n }\n },\n color: {\n type: 'string',\n title: 'Color',\n 'ui:control': 'select',\n oneOf: [\n { const: 'md', title: 'Model S' },\n { const: 'm3', title: 'Model 3' },\n { const: 'mx', title: 'Model X' },\n { const: 'my', title: 'Model Y' }\n ],\n 'ui:props': {\n initialValue: 'ms'\n }\n }\n }\n};\n\nconst GettingStarted = () => (\n
\n
\n

Format Based (JSX)

\n
\n \n \n \n \n \n
\n 
\n        \n          {`\nimport { SchemaFields, Form, Input, Select } from 'informed';\n\nconst onSubmit = ({values}) => console.log(values);\n\nconst ExampleForm = () => (\n  
\n    \n    \n    \n    \n    \n    \n  \n);\n`}\n        
\n
\n
\n
\n

Schema Based

\n
\n \n \n \n 
\n        \n          {`\nimport { Form } from 'informed';\n\nconst onSubmit = ({values}) => console.log(values);\n\nconst schema = {\n  type: 'object',\n  required: ['age'],\n  properties: {\n    name: {\n      type: 'string',\n      title: 'Name',\n      'ui:props': {\n        placeholder: 'Elon'\n      },\n    },\n    age: {\n      type: 'number',\n      title: 'Age',\n      errorMessage: {\n        required: 'Age Required'\n      }\n    },\n    phone: {\n      type: 'string',\n      title: 'Phone',\n      'ui:props': {\n        formatter: \"+1 (###)-###-####\"\n      },\n    },\n    color: {\n      type: 'string',\n      title: 'Color',\n      'ui:control': 'select',\n      oneOf: [\n        { const: 'md', title: 'Model S' },\n        { const: 'm3', title: 'Model 3' },\n        { const: 'mx', title: 'Model X' },\n        { const: 'my', title: 'Model Y' },\n      ],\n      'ui:props': {\n        initialValue: \"ms\"\n      },\n    },\n  }\n};\n\nconst ExampleForm = () => {\n  return (\n    
\n      \n      \n    \n  )\n}\n`}\n        
\n
\n
\n
\n);\n\nexport default withDocs(readme, GettingStarted);\n","export default \"### useForm Hook\\n\\nHooks are all the rage these days, and some people want to \\\"hook things up themselves\\\" :)\\nHere is an example where you can use the `useFormHook`.\\n\\n\\n\\n```jsx\\nimport { Form, Input } from 'informed';\\n\\nconst validate = value => {\\n if (!value || value.length < 5)\\n return 'Field must be at least five characters';\\n};\\n\\nconst onSubmit = ({ values }) =>\\n window.alert(`Form successfully submitted with ${JSON.stringify(values)}`);\\n\\nconst UseFormExample = () => {\\n const { formController, formState, render } = useForm({\\n onSubmit\\n });\\n\\n return render(\\n \\n \\n \\n 
\\n        {JSON.stringify(formState, null, 2)}\\n
\\n \\n );\\n};\\n```\\n\\n
\\n\";","import React from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport { Input, useForm } from '../../../src';\n\nconst validate = value => {\n if (!value || value.length < 5)\n return 'Field must be at least five characters';\n};\n\nconst onSubmit = ({ values }) =>\n window.alert(`Form successfully submitted with ${JSON.stringify(values)}`);\n\nconst UseForm = () => {\n const { formController, formState, render } = useForm({\n onSubmit\n });\n\n return render(\n
\n \n
\n
\n \n \n
\n \n 
\n              {JSON.stringify(formState, null, 2)}\n
\n
\n
\n \n \n );\n};\n\nexport default withDocs(readme, UseForm);\n","export default \"### Whate Else?\\n\\n**This is sick! What else can I do???**\\n\\nSoo much!!!\\n\\n\\n\\n# Where should I go next?\\n\\nTo see all of the available stuff in informed. I would recoomend you check out the `Form > Props`, `Form > State`, `Form > Api`, and `Inputs > Intro` sections of the docs.\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport { Form, Text } from '../../../src';\nimport ComplexForm from '../../Form/Complex';\nimport DynamicArrays from '../../Arrays/DynamicArrays';\n// import CustomInputs from './CustomInputs';\n\nconst WhatElse = () => (\n <>\n \n
\n \n
\n {/* */}\n \n);\n\nexport default withDocs(readme, WhatElse);\n","import React from 'react';\nimport GettingStarted from './GettingStarted';\nimport FormState from './FormState';\nimport FormApi from './FormApi';\nimport WhatElse from './WhatElse';\nimport UseForm from './UseForm';\nimport IntroComp from './Intro';\nimport CustomIntro from './CustomIntro';\nimport SchemaVsFormat from './SchemaVsFormat';\n\nconst Intro = () => (\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {/* */}\n {/* */}\n
\n);\n\nexport default Intro;\n","export default \"# Keep\\n\\nSometimes you need to keep the state of a field even when it gets unmounted ( no longer rendered on screen ). In the below example we have a field that gets hidden when the hide button is clicked, when it gets unmounted its state would normally get removed, by passing `keep={{ value: true }}` we can control what state ( if any ) should be kept.\\n\\nNote: Click on the \\\"Submit\\\" button. See how the state shows an error and the value.\\n\\nNext: Click on the \\\"Hide\\\" button and note fields error state gets removed but NOT the value.\\n\\nNext: Click on the \\\"Show\\\" button and note the fields value state comes back but NOT the error state.\\n\\n\\n\\n```jsx\\nimport { Form, Input, Checkbox, Relevant, Debug } from 'informed';\\n\\nconst Example = () => {\\n const [show, setShow] = useState(true);\\n\\n return (\\n
\\n {show ? (\\n \\n ) : null}\\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useState } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Checkbox, Relevant, Debug } from '../../../src';\n\nconst Example = () => {\n const [show, setShow] = useState(true);\n\n const toggle = () => setShow(prev => !prev);\n\n return (\n
\n {show ? (\n \n ) : null}\n \n \n \n \n );\n};\n\nexport default withDocs(readme, Example);\n","export default \"# Keep State\\n\\nSometimes you need to keep the state of a field even when it gets unmounted ( no longer rendered on screen ). In the below example, when you toggle showing the fields the `name1` field will get removed from the form state but the name2 fields state will be kept.\\n\\nNote: Fill in both fields then click on the hide button and then show. Pay attention to how name2's state stays but name1's gets removed\\n\\n\\n\\n```jsx\\nimport { Form, Input, Debug } from 'informed';\\n\\nconst Example = () => {\\n const [show, setShow] = useState(true);\\n\\n return (\\n
\\n {show ? : null}\\n {show ? : null}\\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useState } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Debug } from '../../../src';\n\nconst Example = () => {\n const [show, setShow] = useState(true);\n\n const toggle = () => setShow(prev => !prev);\n\n return (\n
\n {show ? : null}\n {show ? : null}\n \n \n \n );\n};\n\nexport default withDocs(readme, Example);\n","export default \"# Keep State If Relevant\\n\\nSometimes you need to keep the state of a field even when it gets unmounted ( no longer rendered on screen ). In the below example, when you toggle showing the fields the `name1` field will get removed from the form state but the name2 fields state will be kept. However if that field is irrelevant it will NOT be kept.\\n\\nNote: Fill in both fields then click on the hide button and then show. Pay attention to how name2's state stays but name1's gets removed\\n\\nNext: Click on the toggle input and note how name2's state gets removed as its irrelevant.\\n\\n\\n\\n```jsx\\nimport { Form, Input, Checkbox, Relevant, Debug } from 'informed';\\n\\nconst Example = () => {\\n const [show, setShow] = useState(true);\\n\\n return (\\n
\\n {show ? : null}\\n \\n formState.values.show}>\\n {show ? : null}\\n \\n
\\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useState } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Checkbox, Relevant, Debug } from '../../../src';\n\nconst Example = () => {\n const [show, setShow] = useState(true);\n\n const toggle = () => setShow(prev => !prev);\n\n return (\n
\n {show ? : null}\n \n formState.values.show}>\n {show ? : null}\n \n
\n \n \n \n );\n};\n\nexport default withDocs(readme, Example);\n","export default \"# Multistep Forms\\n\\nSomtimes you need to take actions when moving from step A to B.\\n\\n\\n\\n```jsx\\nimport {\\n Form,\\n Input,\\n Multistep,\\n Checkbox,\\n Debug,\\n useMultistepApi\\n} from 'informed';\\n\\nconst Info = () => {\\n const { next } = useMultistepApi();\\n\\n const [loading, setLoading] = useState(false);\\n const [error, setError] = useState();\\n\\n const doSomething = ({ values }) => {\\n const { first } = values;\\n return new Promise((resolve, reject) => {\\n setLoading(true);\\n setTimeout(() => {\\n // Simulate username check\\n if (['joe', 'tanner', 'billy', 'bob'].includes(first)) {\\n setLoading(false);\\n const error = 'That name is taken';\\n setError(error);\\n return reject(error);\\n }\\n // Simulate request faulure\\n if (first === 'reject') {\\n setLoading(false);\\n const error = 'Unable to validate name.';\\n setError(error);\\n return reject(new Error(error));\\n }\\n setLoading(false);\\n setError();\\n return resolve();\\n }, 2000);\\n });\\n };\\n\\n return (\\n \\n \\n \\n \\n {loading ?
Loading...
: null}\\n {error ?
Error: {error}
: null}\\n \\n );\\n};\\n\\nconst Favorite = () => {\\n const { next, previous } = useMultistepApi();\\n return (\\n \\n \\n \\n
\\n \\n \\n {/* You can do this to skip this step */}\\n \\n
\\n \\n );\\n};\\n\\nconst Additional = () => {\\n const { previous } = useMultistepApi();\\n return (\\n \\n \\n \\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst Example = () => {\\n return (\\n
\\n \\n \\n \\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useState, useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport {\n Form,\n Input,\n useFormApi,\n useMultistepApi,\n useMultistepState,\n useFormState,\n useFieldState,\n //FormState,\n ArrayField,\n Multistep,\n Checkbox,\n RadioGroup,\n Radio,\n Relevant,\n Debug\n} from '../../../src';\n\nconst asyncValidate = username => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(username)) {\n return resolve('That username is taken');\n }\n // Simulate request faulure\n if (username === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nconst Info = () => {\n const { next } = useMultistepApi();\n\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState();\n\n const doSomething = ({ values }) => {\n const { first } = values;\n return new Promise((resolve, reject) => {\n setLoading(true);\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(first)) {\n setLoading(false);\n const error = 'That name is taken';\n setError(error);\n return reject(error);\n }\n // Simulate request faulure\n if (first === 'reject') {\n setLoading(false);\n const error = 'Unable to validate name.';\n setError(error);\n return reject(new Error(error));\n }\n setLoading(false);\n setError();\n return resolve();\n }, 2000);\n });\n };\n\n return (\n \n \n \n \n {loading ?
Loading...
: null}\n {error ?
Error: {error}
: null}\n \n );\n};\n\nconst Favorite = () => {\n const { next, previous } = useMultistepApi();\n return (\n \n \n \n
\n \n \n {/* You can do this to skip this step */}\n \n
\n \n );\n};\n\nconst Additional = () => {\n const { previous } = useMultistepApi();\n return (\n \n \n \n
\n \n \n
\n \n );\n};\n\nconst Basic = () => {\n return (\n
\n
\n
\n
\n \n \n \n \n \n
\n \n
\n
\n \n
\n
\n \n \n );\n};\n\nexport default withDocs(readme, Basic);\n","export default \"# Multistep Forms\\n\\nSometimes you have forms with multiple steps.\\n\\n\\n\\n```jsx\\nimport {\\n Form,\\n Input,\\n Multistep,\\n Checkbox,\\n Debug,\\n useMultistepApi\\n} from 'informed';\\n\\nconst Info = () => {\\n const { next } = useMultistepApi();\\n return (\\n \\n \\n \\n \\n \\n );\\n};\\n\\nconst Favorite = () => {\\n const { next, previous } = useMultistepApi();\\n return (\\n \\n \\n \\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst Additional = () => {\\n const { previous } = useMultistepApi();\\n return (\\n \\n \\n \\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst Example = () => {\\n return (\\n
\\n \\n \\n \\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useState, useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport {\n Form,\n Input,\n useFormApi,\n useMultistepApi,\n useMultistepState,\n useFormState,\n useFieldState,\n //FormState,\n ArrayField,\n Multistep,\n Checkbox,\n RadioGroup,\n Radio,\n Relevant,\n Debug\n} from '../../../src';\n\nconst asyncValidate = username => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(username)) {\n return resolve('That username is taken');\n }\n // Simulate request faulure\n if (username === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nconst doSomething = ({ values }) => {\n const { first } = values;\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(first)) {\n return reject('That username is taken');\n }\n // Simulate request faulure\n if (first === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nconst Info = () => {\n const { next } = useMultistepApi();\n return (\n \n \n \n {/* \n {/* */}\n \n );\n};\n\nconst Favorite = () => {\n const { next, previous } = useMultistepApi();\n return (\n \n \n \n
\n \n \n
\n \n );\n};\n\nconst Additional = () => {\n const { previous } = useMultistepApi();\n return (\n \n \n \n
\n \n \n
\n \n );\n};\n\nconst Basic = () => {\n return (\n
\n
\n
\n
\n \n \n \n \n \n
\n \n
\n
\n \n
\n
\n \n \n );\n};\n\nexport default withDocs(readme, Basic);\n","export default \"# Multistep Forms\\n\\nSomtimes you need to create a form with multiple steps and the steps are dynamic, meaning the next\\nsteps depend on the previous steps. This can easliy be done with informed.\\nBelow is an example of a form that has four steps. It will not proceed to the next step,\\nunless the previous step is valid. In addition it will only validate relevant fields where a fields \\\"relevance\\\"\\ncan be defined by a `relevant` function.\\n\\nThis is hard to describe in words so hopefully the example below helps!\\n\\n**Hint:** Perform the user flow described below.\\n\\n1. Click the next button to trigger validation.\\n1. Fill out the fields and click next.\\n1. Select the checkbox because you're allergic to peanut butter, then click next.\\n1. Select that you have an epipen, then click next.\\n1. Type in your favorite color and food, DONT CLICK NEXT.\\n1. You just remembered that you actually are NOT allergic to peanut butter. So Jump back to the allergies question.\\n1. Uncheck the checkbox and note how the form state changes! The souse name goes away!\\n1. Click next and note how you go to the favorite question instead of the epipen question.\\n\\n\\n\\n```jsx\\nimport {\\n Form,\\n Input,\\n Multistep,\\n Checkbox,\\n RadioGroup,\\n Radio,\\n Relevant,\\n Debug,\\n useMultistepApi,\\n useMultistepState,\\n useFieldState\\n} from 'informed';\\n\\nconst validate = value =>\\n value == null ? 'This field is required' : undefined;\\n\\nconst Info = () => {\\n const { next } = useMultistepApi();\\n return (\\n \\n \\n \\n \\n \\n );\\n};\\n\\nconst Allergic = () => {\\n const { next, previous } = useMultistepApi();\\n return (\\n \\n
Are you allergic to any of the following?
\\n \\n \\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst EpiPen = () => {\\n const { next, previous } = useMultistepApi();\\n\\n // Only relevant if the person is allergic to something\\n const relevant = ({ formState }) => {\\n const { allergies } = formState.values;\\n return allergies && Object.values(allergies).some(a => !!a);\\n };\\n\\n return (\\n \\n \\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst Color = () => {\\n const { next, previous } = useMultistepApi();\\n const { nextStep } = useMultistepState();\\n\\n return (\\n \\n \\n \\n \\n
\\n \\n {nextStep ? (\\n \\n ) : null}\\n {!nextStep ? : null}\\n
\\n \\n );\\n};\\n\\nconst Dog = () => {\\n const { previous } = useMultistepApi();\\n\\n // Only relevant if the person is has a pet\\n const relevant = ({ formState }) => {\\n const { favorite } = formState.values;\\n return favorite?.pet;\\n };\\n\\n return (\\n \\n \\n formApi.getValue(`${scope}.hasDog`)}>\\n \\n \\n \\n formApi.getValue(`${scope}.hasCat`)}\\n />\\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst StepperStep = ({ step, label, number, isComplete }) => {\\n const { current } = useMultistepState();\\n const { setCurrent } = useMultistepApi();\\n const state = useFieldState(step);\\n\\n const active = current === step ? 'active' : '';\\n const complete = isComplete(state) ? 'complete' : '';\\n\\n return (\\n
\\n setCurrent(step)}>\\n {number}\\n
\\n
{label}
\\n \\n );\\n};\\n\\nconst Stepper = () => {\\n return (\\n
\\n s.value?.first && s.value?.last}\\n />\\n
\\n s.touched}\\n />\\n
\\n s.value?.epipen != null}\\n />\\n
\\n s.value?.color && s.value?.food}\\n />\\n
\\n s.value?.name}\\n />\\n
\\n );\\n};\\n\\nconst Example = () => {\\n return (\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n );\\n};\\n```\\n\\n### The CSS used in this example is here\\n\\n```css\\n.stepper-wrapper {\\n display: flex;\\n flex-direction: row;\\n justify-content: space-between;\\n}\\n\\n.stepper-item {\\n text-align: center;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n margin-left: 10px;\\n margin-right: 10px;\\n}\\n\\n.stepper-item:first-child::before {\\n content: none;\\n}\\n.stepper-item:last-child::after {\\n content: none;\\n}\\n\\n.stepper-divider {\\n width: 100%;\\n height: 5px;\\n background-color: grey;\\n margin-top: 22px;\\n}\\n\\n.stepper-counter {\\n border-radius: 50%;\\n background-color: grey;\\n width: 50px;\\n height: 50px;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.stepper-counter:hover {\\n cursor: pointer;\\n}\\n\\n.stepper-counter.complete {\\n background-color: rgb(10, 118, 29);\\n}\\n\\n.stepper-counter.active {\\n background-color: rgb(155, 18, 29);\\n}\\n```\\n\";","import React, { useState, useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport {\n Form,\n Input,\n useFormApi,\n useMultistepApi,\n useMultistepState,\n useFormState,\n useFieldState,\n //FormState,\n ArrayField,\n Multistep,\n Checkbox,\n RadioGroup,\n Radio,\n Relevant,\n Debug\n} from '../../../src';\n\nconst asyncValidate = username => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(username)) {\n return resolve('That username is taken');\n }\n // Simulate request faulure\n if (username === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nconst doSomething = ({ values }) => {\n const { first } = values;\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(first)) {\n return reject('That username is taken');\n }\n // Simulate request faulure\n if (first === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nconst Info = () => {\n const { next } = useMultistepApi();\n return (\n \n \n \n {/* \n \n );\n};\n\nconst Allergic = () => {\n const { next, previous } = useMultistepApi();\n return (\n \n
Are you allergic to any of the following?
\n \n \n
\n \n \n
\n \n );\n};\n\nconst EpiPen = () => {\n const { next, previous } = useMultistepApi();\n\n // Only relevant if the person is allergic to something\n const relevant = ({ formState }) => {\n const { allergies } = formState.values;\n return allergies && Object.values(allergies).some(a => !!a);\n };\n\n return (\n \n \n
\n \n \n
\n \n );\n};\n\nconst Color = () => {\n const { next, previous } = useMultistepApi();\n const { nextStep } = useMultistepState();\n\n return (\n \n \n \n \n
\n \n {nextStep ? (\n \n ) : null}\n {!nextStep ? : null}\n
\n \n );\n};\n\nconst Dog = () => {\n const { previous } = useMultistepApi();\n\n // Only relevant if the person is has a pet\n const relevant = ({ formState }) => {\n const { favorite } = formState.values;\n return favorite?.pet;\n };\n\n return (\n \n \n formApi.getValue(`${scope}.hasDog`)}>\n \n \n \n formApi.getValue(`${scope}.hasCat`)}\n />\n
\n \n \n
\n \n );\n};\n\nconst StepperStep = ({ step, label, number, isComplete }) => {\n const { current } = useMultistepState();\n const { setCurrent } = useMultistepApi();\n const state = useFieldState(step);\n\n const active = current === step ? 'active' : '';\n const complete = isComplete(state) ? 'complete' : '';\n\n return (\n
\n setCurrent(step)}>\n {number}\n
\n
{label}
\n
\n );\n};\n\nconst Stepper = () => {\n return (\n
\n s.value?.first && s.value?.last}\n />\n
\n s.touched}\n />\n
\n s.value?.epipen != null}\n />\n
\n s.value?.color && s.value?.food}\n />\n
\n s.value?.name}\n />\n
\n );\n};\n\nconst MultistepState = () => {\n const state = useMultistepState();\n\n return (\n 
\n      {JSON.stringify(state, null, 2)}\n
\n );\n};\n\nconst Basic = () => {\n const [state, setState] = useState(0);\n const multistepApiRef = useRef();\n\n // const initialValues = {\n // first: 'Joe',\n // allergic: true,\n // epipen: 'yes'\n // };\n\n // const initialValues = {\n // info: {\n // first: 'Joe',\n // last: 'Puzzo'\n // },\n // allergies: {\n // peanuts: false\n // },\n // treatment: {\n // epipen: 'yes'\n // }\n // }\n\n return (\n
\n {/* {state}\n */}\n {/* multistepApiRef.current.setCurrent('color')}>\n Click Me\n */}\n\n
\n
\n
\n {/* initialStep=\"info\" */}\n \n \n \n \n \n \n \n \n
\n {/* */}\n \n
\n
\n \n
\n
\n \n
\n );\n};\n\nexport default withDocs(readme, Basic);\n","export default \"# MultistepState\\n\\nSometimes you need access to the state. Below we show what step we are on and the buttons tell us where we go if we click them.\\n\\n### MultistepSate\\n\\n| Name | Example | Description |\\n| ------------ | ------- | -------------------------- |\\n| current | \\\"step2\\\" | the current step we are on |\\n| nextStep | \\\"step3\\\" | the next step |\\n| previousStep | \\\"step1\\\" | the previous step |\\n\\n\\n\\n```jsx\\nimport {\\n Form,\\n Input,\\n Multistep,\\n Checkbox,\\n Debug,\\n useMultistepApi,\\n useMultistepState\\n} from 'informed';\\n\\nfunction capitalize(string) {\\n return string ? string.charAt(0).toUpperCase() + string.slice(1) : string;\\n}\\n\\nconst Info = () => {\\n const { next } = useMultistepApi();\\n const { nextStep } = useMultistepState();\\n return (\\n \\n \\n \\n \\n \\n );\\n};\\n\\nconst Favorite = () => {\\n const { next, previous } = useMultistepApi();\\n const { nextStep, previousStep } = useMultistepState();\\n return (\\n \\n \\n \\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst Additional = () => {\\n const { previous } = useMultistepApi();\\n const { previousStep } = useMultistepState();\\n return (\\n \\n \\n \\n
\\n \\n \\n
\\n \\n );\\n};\\n\\nconst StepIndicator = () => {\\n const { current } = useMultistepState();\\n\\n return

{capitalize(current)}

;\\n};\\n\\nconst Example = () => {\\n return (\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useState, useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport {\n Form,\n Input,\n useFormApi,\n useMultistepApi,\n useMultistepState,\n useFormState,\n useFieldState,\n //FormState,\n ArrayField,\n Multistep,\n Checkbox,\n RadioGroup,\n Radio,\n Relevant,\n Debug\n} from '../../../src';\n\nconst asyncValidate = username => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(username)) {\n return resolve('That username is taken');\n }\n // Simulate request faulure\n if (username === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nconst doSomething = ({ values }) => {\n const { first } = values;\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(first)) {\n return reject('That username is taken');\n }\n // Simulate request faulure\n if (first === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nfunction capitalize(string) {\n return string ? string.charAt(0).toUpperCase() + string.slice(1) : string;\n}\n\nconst Info = () => {\n const { next, getCurrentStep } = useMultistepApi();\n const { nextStep } = useMultistepState();\n return (\n \n \n \n {/* \n {/* */}\n \n );\n};\n\nconst Favorite = () => {\n const { next, previous, getCurrentStep } = useMultistepApi();\n const { nextStep, previousStep } = useMultistepState();\n return (\n \n \n \n
\n \n \n {/* */}\n
\n \n );\n};\n\nconst Additional = () => {\n const { previous } = useMultistepApi();\n const { previousStep } = useMultistepState();\n return (\n \n \n \n
\n \n \n
\n \n );\n};\n\nconst StepIndicator = () => {\n const { current } = useMultistepState();\n\n return

{capitalize(current)}

;\n};\n\nconst Basic = () => {\n return (\n
\n
\n
\n
\n \n \n \n \n \n \n
\n \n
\n
\n \n
\n
\n \n
\n );\n};\n\nexport default withDocs(readme, Basic);\n","export default \"# Playground - Format\\n\\n\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n// import { CodeBlock } from '../../utils/CodeBlock';\n\nlet code = `\nimport { Form, Input, Text, Select, Relevant, Checkbox, Debug } from 'informed';\nimport './style.css';\n\nconst onSubmit = ({values}) => {\n window.alert(JSON.stringify(values));\n}\n\nexport default function App() {\n return (\n
\n \n \n \n \n \n formState.values.married}>\n \n \n \n \n \n );\n};\n`;\n\nconst Playground = () => {\n // return ;\n return null;\n};\n\nexport default withDocs(readme, Playground);\n","export default \"# Playground - Schema\\n\\n\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\n// import { CodeBlock } from '../../utils/CodeBlock';\n\nlet code = `\nimport { Form, SchemaFields, Debug } from 'informed';\nimport './style.css';\n\nconst onSubmit = ({values}) => {\n window.alert(JSON.stringify(values));\n}\n\nconst schema = {\n type: 'object',\n required: ['color'],\n properties: {\n name: {\n type: 'string',\n title: 'First Name',\n 'ui:control': 'input',\n 'ui:props': {\n placeholder: 'Elon'\n }\n },\n color: {\n type: 'string',\n title: 'Color',\n 'ui:control': 'select',\n oneOf: [\n {\n const: '',\n title: '- Select -',\n 'ui:props': {\n disabled: true\n }\n },\n { const: 'red', title: 'Red' },\n { const: 'black', title: 'Black' },\n { const: 'white', title: 'White' }\n ]\n },\n model: {\n type: 'string',\n title: 'Model',\n 'ui:control': 'radio',\n oneOf: [\n { const: 'ms', title: 'Model S' },\n { const: 'm3', title: 'Model 3' },\n { const: 'mx', title: 'Model X' },\n { const: 'my', title: 'Model Y' }\n ],\n default: null,\n 'ui:props': {\n initialValue: 'm3'\n }\n },\n }\n};\n\nexport default function App() {\n return (\n
\n \n \n \n );\n};\n\n`;\n\nconst Playground = () => {\n return null;\n // return ;\n};\n\nexport default withDocs(readme, Playground);\n","export default \"# Relevance Optimization\\n\\nBy default the relevant function will evaluate on every single form state change.\\n\\nBelow you can see a form with relevance on two components.\\n\\n1. Has `relevanceWhen`\\n2. Has NO `relevanceWhen`\\n\\nClick the checkbox and see what happens.\\n\\nNote how the second count went up by 5, where the first went up by one!\\n\\nThis is because we told the first one to ONLY evaluate relevance when the `showInfo` field changes.\\n\\n\\n\\n```jsx\\nimport React, { useState } from 'react';\\nimport { Form, Input, Checkbox, Relevant } from 'informed';\\n\\nconst RelevantComp = () => {\\n const [call1, setCall1] = useState(0);\\n const [call2, setCall2] = useState(0);\\n\\n const relevant1 = ({ formState }) => {\\n setCall1(prev => prev + 1);\\n return formState.values.showInfo;\\n };\\n\\n const relevant2 = ({ formState }) => {\\n setCall2(prev => prev + 1);\\n return formState.values.showInfo;\\n };\\n\\n return (\\n
\\n relevant1 called {call1} times\\n relevant2 called {call2} times\\n \\n \\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useState, useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Debug, Checkbox } from '../../../src';\n\n// A custom input with a render counter\n// const Input = props => {\n// const count = useRef(1);\n\n// const { render, informed, userProps, fieldState, ref } = useField({\n// type: 'text',\n// ...props\n// });\n// const { label, id, ...rest } = userProps;\n// return render(\n// <>\n// \n// \n// \n// );\n// };\n\nconst RelevantComp = () => {\n const [call1, setCall1] = useState(0);\n const [call2, setCall2] = useState(0);\n\n const relevant1 = ({ formState }) => {\n setCall1(prev => prev + 1);\n return formState.values.showInfo;\n };\n\n const relevant2 = ({ formState }) => {\n setCall2(prev => prev + 1);\n return formState.values.showInfo;\n };\n\n return (\n
\n relevant1 called {call1} times\n
\n
\n relevant2 called {call2} times\n
\n
\n \n \n \n \n \n );\n};\n\nexport default withDocs(readme, RelevantComp);\n","export default \"# Relevant Prop\\n\\nSometimes you need to conditionally render fields. Below is a simple\\nexample the shows or hides a spouse depending on a checkbox.\\n\\n\\n\\n```jsx\\nimport { Form, Input, Checkbox, Relevant } from 'informed';\\n\\nconst RelevanceProp = () => (\\n
\\n \\n \\n formState.values.married}\\n />\\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Debug, Checkbox } from '../../../src';\n\nconst RelevanceProp = () => (\n
\n \n \n formState.values.married}\n />\n \n \n);\n\nexport default withDocs(readme, RelevanceProp);\n","export default \"# Relevance Component\\n\\nSometimes you need to conditionally render fields. Below is a simple\\nexample the shows or hides a spouse depending on a checkbox.\\n\\n\\n\\n```jsx\\nimport { Form, Input, Checkbox, Relevant } from 'informed';\\n\\nconst RelevantComonent = () => (\\n
\\n \\n \\n formState.values.married}>\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport {\n Form,\n Input,\n RadioGroup,\n Radio,\n Relevant,\n Debug,\n Checkbox\n} from '../../../src';\n\nconst RelevantComonent = () => (\n
\n \n \n formState.values.married}>\n \n \n \n \n);\n\nexport default withDocs(readme, RelevantComonent);\n","export default \"# Scoped Relevance\\n\\nSometimes you need to conditionally render fields when they are within a scope.\\n\\nThis is particularly usefull in array fields where your field might be:\\n\\n```js\\n'friends[1].name';\\n// OR\\n'friends[4].name';\\n// So you\\n`${scope}.name`;\\n```\\n\\n
\\n\\nBelow will use the scope component to show this off. When the child is over 16 they can have a car!\\n\\n\\n\\n```jsx\\nimport { Form, Input, Select, Relevant, Scope, Debug } from 'informed';\\n\\nconst Example = () => (\\n
\\n \\n \\n formApi.getValue(`${scope}.age`) >= 16}>\\n \\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Select, Relevant, Debug, Scope } from '../../../src';\n\nconst RelevantComonent = () => (\n
\n \n \n formApi.getValue(`${scope}.age`) >= 16}>\n \n \n \n \n \n);\n\nexport default withDocs(readme, RelevantComonent);\n","export default \"# Array Field in Schema !!!\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\nimport Ajv from 'ajv';\\n\\nconst initialValue = [\\n {\\n name: 'Joe',\\n age: '26'\\n },\\n {\\n name: 'Elon',\\n age: '49'\\n }\\n];\\n\\nconst schema = {\\n type: 'object',\\n required: ['name', 'siblings'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n siblings: {\\n type: 'array',\\n minItems: 2,\\n 'ui:control': 'array',\\n 'ui:props': {\\n initialValue\\n },\\n 'ui:before': [{ 'ui:control': 'add' }],\\n items: {\\n type: 'object',\\n required: ['name', 'age'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'Sibling name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Sibling age',\\n minimum: 0,\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n },\\n married: {\\n type: 'string',\\n title: 'Are you married?',\\n enum: ['yes', 'no'],\\n 'ui:control': 'radio',\\n 'ui:props': {\\n notify: ['spouse']\\n }\\n },\\n spouse: {\\n type: 'string',\\n title: 'Spouse name',\\n 'ui:control': 'input',\\n 'ui:props': {\\n relevant: (values, { parentPath, get }) => {\\n const married = get(values, `${parentPath}.married`);\\n return married === 'yes';\\n }\\n }\\n },\\n 'ui:component:remove': { 'ui:control': 'remove' }\\n }\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n window.alert(JSON.stringify(values, null, 2))}>\\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport Ajv from 'ajv';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst initialValue = [\n {\n name: 'Joe',\n age: '26'\n },\n {\n name: 'Elon',\n age: '49'\n }\n];\n\n// const defaultValue = [\n// {\n// name: 'foo',\n// age: '100'\n// },\n// {\n// name: 'Bar',\n// age: '100'\n// }\n// ];\n\n// const initialValues = {\n// siblings: initialValue\n// };\n\nconst schema = {\n type: 'object',\n required: ['name', 'siblings'],\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n siblings: {\n type: 'array',\n minItems: 2,\n 'ui:control': 'array',\n 'ui:props': {\n // initialValue\n // initialValue: defaultValue\n // defaultValue\n initialValue\n },\n 'ui:before': [{ 'ui:control': 'add' }],\n items: {\n type: 'object',\n required: ['name', 'age'],\n properties: {\n name: {\n type: 'string',\n title: 'Sibling name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Sibling age',\n minimum: 0,\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n },\n married: {\n type: 'string',\n title: 'Are you married?',\n enum: ['yes', 'no'],\n 'ui:control': 'radio'\n // 'ui:props': {\n // notify: ['spouse']\n // }\n },\n spouse: {\n type: 'string',\n title: 'Spouse name',\n 'ui:control': 'input',\n 'ui:props': {\n relevant: ({ scope, formApi }) => {\n const married = formApi.getValue(`${scope}.married`);\n return married === 'yes';\n }\n }\n },\n 'ui:component:remove': { 'ui:control': 'remove' }\n }\n }\n }\n }\n};\n\nconst Schema = () => (\n window.alert(JSON.stringify(values, null, 2))}>\n
\n
\n \n \n
\n
\n \n
\n
\n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Double Nested Array Fields\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\nimport Ajv from 'ajv';\\n\\nconst initialValue = [\\n {\\n name: 'Joe',\\n age: '26',\\n friends: [\\n {\\n name: 'Andres'\\n }\\n ]\\n },\\n {\\n name: 'Elon',\\n age: '49',\\n friends: [\\n {\\n name: 'Kimbal'\\n }\\n ]\\n }\\n];\\n\\nconst schema = {\\n type: 'object',\\n required: ['name', 'siblings'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n siblings: {\\n type: 'array',\\n minItems: 2,\\n 'ui:control': 'array',\\n 'ui:before': [\\n { 'ui:control': 'add', 'ui:props': { text: 'Add Sibling' } }\\n ],\\n 'ui:props': {\\n initialValue\\n },\\n items: {\\n type: 'object',\\n required: ['name', 'age'],\\n properties: {\\n 'ui:component:remove': {\\n 'ui:control': 'remove',\\n 'ui:props': { text: 'Remove Sibling' }\\n },\\n name: {\\n type: 'string',\\n title: 'Sibling name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Sibling age',\\n 'ui:control': 'input'\\n },\\n married: {\\n type: 'string',\\n title: 'Are you married?',\\n enum: ['yes', 'no'],\\n 'ui:control': 'radio'\\n },\\n spouse: {\\n type: 'string',\\n title: 'Spouse name',\\n 'ui:control': 'input',\\n 'ui:props': {\\n relevant: ({ scope, formApi }) => {\\n const married = formApi.getValue(`${scope}.married`);\\n return married === 'yes';\\n }\\n }\\n },\\n friends: {\\n type: 'array',\\n minItems: 2,\\n 'ui:control': 'array',\\n 'ui:before': [\\n { 'ui:control': 'add', 'ui:props': { text: 'Add Friend' } }\\n ],\\n items: {\\n type: 'object',\\n required: ['name'],\\n properties: {\\n 'ui:component:remove': {\\n 'ui:control': 'remove',\\n 'ui:props': { text: 'Remove Friend' }\\n },\\n name: {\\n type: 'string',\\n title: 'Friends name',\\n 'ui:control': 'input'\\n },\\n married: {\\n type: 'string',\\n title: 'Married?',\\n enum: ['yes', 'no'],\\n 'ui:control': 'radio'\\n },\\n spouse: {\\n type: 'string',\\n title: 'Spouse',\\n 'ui:control': 'input',\\n 'ui:props': {\\n relevant: ({ scope, formApi }) => {\\n const married = formApi.getValue(`${scope}.married`);\\n return married === 'yes';\\n },\\n keepState: true\\n }\\n }\\n }\\n }\\n }\\n }\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n window.alert(JSON.stringify(values, null, 2))}>\\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport Ajv from 'ajv';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst initialValue = [\n {\n name: 'Joe',\n age: '26',\n friends: [\n {\n name: 'Andres'\n }\n ]\n },\n {\n name: 'Elon',\n age: '49',\n friends: [\n {\n name: 'Kimbal'\n }\n ]\n }\n];\n\nconst schema = {\n type: 'object',\n required: ['name', 'siblings'],\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n siblings: {\n type: 'array',\n minItems: 2,\n 'ui:control': 'array',\n 'ui:before': [\n { 'ui:control': 'add', 'ui:props': { text: 'Add Sibling' } }\n ],\n 'ui:props': {\n initialValue\n },\n items: {\n type: 'object',\n required: ['name', 'age'],\n properties: {\n 'ui:component:remove': {\n 'ui:control': 'remove',\n 'ui:props': { text: 'Remove Sibling' }\n },\n name: {\n type: 'string',\n title: 'Sibling name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Sibling age',\n 'ui:control': 'input'\n },\n married: {\n type: 'string',\n title: 'Are you married?',\n enum: ['yes', 'no'],\n 'ui:control': 'radio'\n // 'ui:props': {\n // notify: ['spouse']\n // }\n },\n spouse: {\n type: 'string',\n title: 'Spouse name',\n 'ui:control': 'input',\n 'ui:props': {\n relevant: ({ scope, formApi }) => {\n const married = formApi.getValue(`${scope}.married`);\n return married === 'yes';\n }\n }\n },\n friends: {\n type: 'array',\n minItems: 2,\n 'ui:control': 'array',\n 'ui:before': [\n { 'ui:control': 'add', 'ui:props': { text: 'Add Friend' } }\n ],\n items: {\n type: 'object',\n // 'ui:after': [{ 'ui:control': 'remove' }],\n required: ['name'],\n properties: {\n 'ui:component:remove': {\n 'ui:control': 'remove',\n 'ui:props': { text: 'Remove Friend' }\n },\n name: {\n type: 'string',\n title: 'Friends name',\n 'ui:control': 'input'\n // 'ui:props': {\n // style: { marginLeft: '200px' }\n // }\n },\n married: {\n type: 'string',\n title: 'Married?',\n enum: ['yes', 'no'],\n 'ui:control': 'radio'\n // 'ui:props': {\n // notify: ['spouse']\n // }\n },\n spouse: {\n type: 'string',\n title: 'Spouse',\n 'ui:control': 'input',\n 'ui:props': {\n relevant: ({ scope, formApi }) => {\n const married = formApi.getValue(`${scope}.married`);\n return married === 'yes';\n },\n keepState: true\n }\n }\n }\n }\n }\n }\n }\n }\n }\n};\n\nconst Schema = () => (\n window.alert(JSON.stringify(values, null, 2))}>\n
\n
\n \n \n
\n
\n \n
\n
\n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Relevant Array Field in Schema !!!\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\nimport Ajv from 'ajv';\\n\\nconst initialValue = [\\n {\\n name: 'Joe',\\n age: '26'\\n },\\n {\\n name: 'Elon',\\n age: '49'\\n }\\n];\\n\\nconst schema = {\\n type: 'object',\\n required: ['name', 'siblings'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n siblings: {\\n type: 'array',\\n minItems: 2,\\n 'ui:control': 'array',\\n 'ui:before': [{ 'ui:control': 'add' }],\\n 'ui:props': {\\n initialValue,\\n relevant: ({ formState }) => {\\n const { name } = formState.values;\\n return !name || name.length < 10;\\n }\\n },\\n items: {\\n type: 'object',\\n required: ['name', 'age'],\\n properties: {\\n 'ui:component:remove': { 'ui:control': 'remove' },\\n name: {\\n type: 'string',\\n title: 'Sibling name',\\n 'ui:control': 'input',\\n 'ui:props': {\\n keepState: true\\n }\\n },\\n age: {\\n type: 'number',\\n title: 'Sibling age',\\n minimum: 0,\\n 'ui:control': 'input',\\n 'ui:props': {\\n keepState: true,\\n type: 'number'\\n }\\n },\\n married: {\\n type: 'string',\\n title: 'Are you married?',\\n enum: ['yes', 'no'],\\n 'ui:control': 'radio',\\n 'ui:props': {\\n keepState: true\\n }\\n },\\n spouse: {\\n type: 'string',\\n title: 'Spouse name',\\n 'ui:control': 'input',\\n 'ui:props': {\\n relevant: ({ scope, formApi }) => {\\n const married = formApi.getValue(`${scope}.married`);\\n return married === 'yes';\\n },\\n keepStateIfRelevant: true\\n }\\n }\\n }\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n window.alert(JSON.stringify(values, null, 2))}>\\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport Ajv from 'ajv';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst initialValue = [\n {\n name: 'Joe',\n age: 26\n },\n {\n name: 'Elon',\n age: 49\n }\n];\n\nconst schema = {\n type: 'object',\n required: ['name', 'siblings'],\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n siblings: {\n type: 'array',\n minItems: 2,\n 'ui:control': 'array',\n 'ui:before': [{ 'ui:control': 'add' }],\n 'ui:props': {\n initialValue,\n relevant: ({ formState }) => {\n const { name } = formState.values;\n return !name || name.length < 10;\n }\n },\n items: {\n type: 'object',\n required: ['name', 'age'],\n properties: {\n 'ui:component:remove': { 'ui:control': 'remove' },\n name: {\n type: 'string',\n title: 'Sibling name',\n 'ui:control': 'input',\n 'ui:props': {\n keepState: true\n }\n },\n age: {\n type: 'number',\n title: 'Sibling age',\n minimum: 0,\n 'ui:control': 'input',\n 'ui:props': {\n keepState: true,\n type: 'number'\n }\n },\n married: {\n type: 'string',\n title: 'Are you married?',\n enum: ['yes', 'no'],\n 'ui:control': 'radio',\n 'ui:props': {\n keepState: true\n }\n },\n spouse: {\n type: 'string',\n title: 'Spouse name',\n 'ui:control': 'input',\n 'ui:props': {\n relevant: ({ scope, formApi }) => {\n const married = formApi.getValue(`${scope}.married`);\n return married === 'yes';\n },\n keepStateIfRelevant: true\n }\n }\n }\n }\n }\n }\n};\n\nconst Schema = () => (\n window.alert(JSON.stringify(values, null, 2))}>\n
\n
\n \n \n
\n
\n \n
\n
\n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Changing Schema\\n\\nSometimes you want to swap schema out for another schema\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields, Debug } from 'informed';\\n\\nconst schema1 = {\\n type: 'object',\\n properties: {\\n name: {\\n type: 'string',\\n title: 'Name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Age',\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n }\\n }\\n};\\n\\nconst schema2 = {\\n type: 'object',\\n properties: {\\n brother: {\\n type: 'string',\\n title: 'Brother name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Brother age',\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => {\\n const [schema, setSchema] = useState(schema1);\\n const formApiRef = useRef();\\n\\n const onClick = useCallback(() => {\\n // Set new schema\\n setSchema(prev => (prev === schema1 ? schema2 : schema1));\\n }, []);\\n\\n useEffect(\\n () => {\\n // Reset the form\\n formApiRef.current?.reset();\\n },\\n [schema]\\n );\\n\\n return (\\n
\\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Debug, SchemaFields } from '../../../src';\n\nconst schema1 = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n title: 'Name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Age',\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n }\n }\n};\n\nconst schema2 = {\n type: 'object',\n properties: {\n brother: {\n type: 'string',\n title: 'Brother name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Brother age',\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n }\n }\n};\n\nconst Schema = () => {\n const [schema, setSchema] = useState(schema1);\n const formApiRef = useRef();\n\n const onClick = useCallback(() => {\n // Set new schema\n setSchema(prev => (prev === schema1 ? schema2 : schema1));\n }, []);\n\n useEffect(\n () => {\n // Reset the form\n formApiRef.current?.reset();\n },\n [schema]\n );\n\n return (\n
\n \n \n \n \n );\n};\n\nexport default withDocs(readme, Schema);\n","export default \"# Conditional Options\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\n\\nconst schema = {\\n type: 'object',\\n properties: {\\n type: {\\n type: 'string',\\n 'ui:control': 'select',\\n title: 'Would you like a car or truck?',\\n oneOf: [\\n { const: 'car', title: 'Car' },\\n { const: 'truck', title: 'Truck' }\\n ],\\n 'ui:props': {\\n initialValue: 'car'\\n }\\n },\\n product: {\\n type: 'string',\\n 'ui:control': 'select',\\n title: 'Product'\\n }\\n },\\n allOf: [\\n {\\n if: { properties: { type: { const: 'car' } }, required: ['type'] },\\n then: {\\n properties: {\\n product: {\\n oneOf: [\\n { const: '', title: '- Select -' },\\n { const: 'modelS', title: 'Model S' },\\n { const: 'modelX', title: 'Model X' },\\n { const: 'model3', title: 'Model 3' }\\n ]\\n }\\n }\\n }\\n },\\n {\\n if: { properties: { type: { const: 'truck' } }, required: ['type'] },\\n then: {\\n properties: {\\n product: {\\n oneOf: [\\n { const: '', title: '- Select -' },\\n { const: 'semi', title: 'Semi Truck' },\\n { const: 'cyber', title: 'Cyber Truck' }\\n ]\\n }\\n }\\n }\\n }\\n ]\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n properties: {\n type: {\n type: 'string',\n 'ui:control': 'select',\n title: 'Would you like a car or truck?',\n oneOf: [\n { const: 'car', title: 'Car' },\n { const: 'truck', title: 'Truck' }\n ],\n 'ui:props': {\n initialValue: 'car'\n }\n },\n product: {\n type: 'string',\n 'ui:control': 'select',\n title: 'Product'\n }\n },\n allOf: [\n {\n if: { properties: { type: { const: 'car' } }, required: ['type'] },\n then: {\n properties: {\n product: {\n oneOf: [\n { const: '', title: '- Select -' },\n { const: 'modelS', title: 'Model S' },\n { const: 'modelX', title: 'Model X' },\n { const: 'model3', title: 'Model 3' }\n ]\n }\n }\n }\n },\n {\n if: { properties: { type: { const: 'truck' } }, required: ['type'] },\n then: {\n properties: {\n product: {\n oneOf: [\n { const: '', title: '- Select -' },\n { const: 'semi', title: 'Semi Truck' },\n { const: 'cyber', title: 'Cyber Truck' }\n ]\n // 'ui:props': {\n // disabled: true\n // }\n }\n }\n }\n }\n ]\n};\n\nconst Schema = () => (\n
\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Conditional Schema\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\n\\nconst schema = {\\n type: 'object',\\n required: ['name'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n married: {\\n type: 'string',\\n title: 'Are you married?',\\n enum: ['yes', 'no'],\\n 'ui:control': 'radio'\\n }\\n },\\n allOf: [\\n {\\n if: {\\n properties: {\\n married: { const: 'yes' }\\n },\\n required: ['married']\\n },\\n then: {\\n properties: {\\n spouse: {\\n type: 'string',\\n title: 'Spouse name',\\n 'ui:control': 'input'\\n }\\n }\\n }\\n }\\n ]\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n required: ['name'],\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n married: {\n type: 'string',\n title: 'Are you married?',\n enum: ['yes', 'no'],\n 'ui:control': 'radio'\n }\n },\n allOf: [\n {\n if: {\n properties: {\n married: { const: 'yes' }\n },\n required: ['married']\n },\n then: {\n properties: {\n spouse: {\n type: 'string',\n title: 'Spouse name',\n 'ui:control': 'input'\n }\n }\n }\n }\n ]\n};\n\n// const schema = {\n// properties: {\n// 'ui:foo_wrapper': {}\n// },\n// allOf: [\n// {\n// $id: 'foo_wrapper',\n// 'ui:control': 'DivComp',\n// type: 'object',\n// properties: {\n// firstName: {\n// type: 'string',\n// title: 'First name',\n// 'ui:control': 'input'\n// },\n// lastName: {\n// type: 'string',\n// title: 'Last name',\n// 'ui:control': 'input'\n// }\n// }\n// }\n// ]\n// };\n\n// const schema = {\n// type: 'object',\n// required: ['name'],\n// properties: {}\n// };\n\n// for (let i = 0; i < 500; i++) {\n// schema.properties[`name${i}`] = {\n// type: 'string',\n// title: 'Last name',\n// 'ui:control': 'input'\n// };\n// }\n\nconst DivComp = ({ children }) => {\n return (\n
\n

Hello World

\n {children}\n
\n );\n};\n\nconst Schema = () => (\n
\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Conditional Schema\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\n\\nconst schema = {\\n type: 'object',\\n properties: {\\n firstName: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n 'ui:lastName': {},\\n email: {\\n type: 'string',\\n title: 'Email',\\n format: 'email',\\n 'ui:control': 'input'\\n },\\n married: {\\n type: 'string',\\n title: 'Are you married?',\\n enum: ['yes', 'no'],\\n 'ui:control': 'radio'\\n },\\n 'ui:spouse': {},\\n drinking: {\\n type: 'object',\\n properties: {\\n age: {\\n type: 'number',\\n title: 'your age?',\\n 'ui:control': 'input'\\n },\\n 'ui:idrink': {}\\n },\\n allOf: [\\n {\\n $id: 'idrink',\\n if: {\\n properties: {\\n age: { minimum: 21, maximum: 30 }\\n },\\n required: ['age']\\n },\\n then: {\\n properties: {\\n doDrink: {\\n type: 'boolean',\\n title: 'I drink',\\n 'ui:control': 'checkbox',\\n 'ui:props': {\\n initialValue: true\\n }\\n },\\n 'ui:favoriteDrink': {}\\n },\\n allOf: [\\n {\\n $id: 'favoriteDrink',\\n if: {\\n properties: { doDrink: { not: false } }\\n },\\n then: {\\n properties: {\\n favoriteDrink: {\\n type: 'string',\\n title: 'Favorite drink',\\n 'ui:control': 'input'\\n }\\n }\\n }\\n }\\n ]\\n }\\n }\\n ]\\n }\\n },\\n allOf: [\\n {\\n $id: 'spouse',\\n if: {\\n properties: {\\n married: { const: 'yes' }\\n },\\n required: ['married']\\n },\\n then: {\\n properties: {\\n spouse: {\\n type: 'string',\\n title: 'Spouse name',\\n 'ui:control': 'input'\\n }\\n },\\n required: ['spouse']\\n }\\n },\\n {\\n $id: 'lastName',\\n if: {\\n properties: {\\n firstName: { not: { enum: ['Robin', 'Joe'] } }\\n }\\n },\\n then: {\\n properties: {\\n lastName: {\\n type: 'string',\\n title: 'Last name',\\n 'ui:control': 'input'\\n }\\n }\\n }\\n }\\n ],\\n required: ['name', 'email']\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n properties: {\n firstName: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n 'ui:lastName': {},\n email: {\n type: 'string',\n title: 'Email',\n format: 'email',\n 'ui:control': 'input'\n },\n married: {\n type: 'string',\n title: 'Are you married?',\n enum: ['yes', 'no'],\n 'ui:control': 'radio'\n },\n 'ui:spouse': {},\n drinking: {\n type: 'object',\n properties: {\n age: {\n type: 'number',\n title: 'your age?',\n 'ui:control': 'input'\n },\n 'ui:idrink': {}\n },\n allOf: [\n {\n $id: 'idrink',\n if: {\n properties: {\n age: { minimum: 21, maximum: 30 }\n },\n required: ['age']\n },\n then: {\n properties: {\n doDrink: {\n type: 'boolean',\n title: 'I drink',\n 'ui:control': 'checkbox',\n 'ui:props': {\n initialValue: true\n }\n },\n 'ui:favoriteDrink': {}\n },\n allOf: [\n {\n $id: 'favoriteDrink',\n if: {\n properties: { doDrink: { not: false } }\n },\n then: {\n properties: {\n favoriteDrink: {\n type: 'string',\n title: 'Favorite drink',\n 'ui:control': 'input'\n }\n }\n }\n }\n ]\n }\n }\n ]\n }\n },\n allOf: [\n {\n $id: 'spouse',\n if: {\n properties: {\n married: { const: 'yes' }\n },\n required: ['married']\n },\n then: {\n properties: {\n spouse: {\n type: 'string',\n title: 'Spouse name',\n 'ui:control': 'input'\n }\n },\n required: ['spouse']\n }\n },\n {\n $id: 'lastName',\n if: {\n properties: {\n firstName: { not: { enum: ['Robin', 'Joe'] } }\n }\n },\n then: {\n properties: {\n lastName: {\n type: 'string',\n title: 'Last name',\n 'ui:control': 'input'\n }\n }\n }\n }\n ],\n required: ['name', 'email']\n};\n\nconst Schema = () => (\n
\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Custom Schema\\n\\nInformed comes with a custom schema adapter that maps field types to actual JSX elements.\\n\\nWhenever you create your own inputs, you have to create or add to informds `fieldMap`.\\n\\n```jsx\\nimport {\\n useForm,\\n useField,\\n useArrayFieldApi,\\n useArrayFieldItemApi,\\n ArrayField,\\n FormComponents,\\n FormFields,\\n Relevant,\\n Debug\\n} from 'informed';\\n\\n// Step 1. Build your form component ---------------------\\n\\nconst Form = ({ children, ...rest }) => {\\n const { formController, render, userProps } = useForm(rest);\\n\\n return render(\\n
\\n {children}\\n
\\n );\\n};\\n\\n// Step 2. Build your input components --------------------\\n\\nconst Input = ({ label, ...props }) => {\\n const { render, informed, userProps, ref } = useField({\\n type: 'text',\\n ...props\\n });\\n\\n return render(\\n \\n );\\n};\\n\\nconst Checkbox = ({ label, ...props }) => {\\n const { render, informed, userProps, ref } = useField({\\n type: 'checkbox',\\n ...props\\n });\\n\\n return render(\\n \\n );\\n};\\n\\nconst Select = ({ label, children, options, ...props }) => {\\n const { render, informed, userProps, ref } = useField({\\n type: 'select',\\n ...props\\n });\\n\\n return render(\\n \\n );\\n};\\n\\nconst AddButton = () => {\\n const { add } = useArrayFieldApi();\\n\\n return (\\n {\\n add();\\n }}\\n type=\\\"button\\\">\\n Add\\n \\n );\\n};\\n\\nconst RemoveButton = () => {\\n const { remove } = useArrayFieldItemApi();\\n\\n return (\\n {\\n remove();\\n }}\\n type=\\\"button\\\">\\n Remove\\n \\n );\\n};\\n\\nconst MyArrayField = ({ name, items, ...props }) => {\\n return (\\n \\n \\n \\n {() => (\\n <>\\n \\n \\n \\n )}\\n \\n \\n );\\n};\\n\\n// Step 3. Define your field map --------------------\\n\\nconst adapter = {\\n select: Select,\\n input: Input,\\n checkbox: Checkbox,\\n add: AddButton,\\n remove: RemoveButton,\\n array: MyArrayField\\n};\\n\\n// Step 4. Build your forms!! -----------------------\\n\\nconst initialValue = [\\n {\\n name: 'Joe',\\n age: '26'\\n },\\n {\\n name: 'Elon',\\n age: '49'\\n }\\n];\\n\\nconst schema = {\\n type: 'object',\\n required: ['name', 'siblings'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n authorize: {\\n type: 'boolean',\\n title: 'Authorize',\\n 'ui:control': 'checkbox'\\n },\\n model: {\\n type: 'string',\\n title: 'Model',\\n 'ui:control': 'select',\\n oneOf: [\\n { const: 'ms', title: 'Model S' },\\n { const: 'm3', title: 'Model 3' },\\n { const: 'mx', title: 'Model X' },\\n { const: 'my', title: 'Model Y' }\\n ],\\n 'ui:props': {\\n initialValue: 'm3'\\n }\\n },\\n siblings: {\\n type: 'array',\\n minItems: 2,\\n 'ui:control': 'array',\\n 'ui:props': {\\n initialValue\\n },\\n items: {\\n type: 'object',\\n required: ['name', 'age'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'Sibling name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Sibling age',\\n minimum: 0,\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n }\\n }\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n \\n);\\n```\\n\\n\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport {\n useField,\n useForm,\n useArrayFieldApi,\n useArrayFieldItemApi,\n ArrayField,\n FormComponents,\n FormFields,\n SchemaFields,\n Debug\n} from '../../../src';\n\n// Step 1. Build your form component ---------------------\n\nconst Form = ({ children, ...rest }) => {\n const { formController, render, userProps } = useForm(rest);\n\n return render(\n
\n {children}\n
\n );\n};\n\n// Step 2. Build your input components --------------------\n\nconst Input = ({ label, ...props }) => {\n const { render, informed, userProps, ref } = useField({\n type: 'text',\n ...props\n });\n\n return render(\n \n );\n};\n\nconst Checkbox = ({ label, ...props }) => {\n const { render, informed, userProps, ref } = useField({\n type: 'checkbox',\n ...props\n });\n return render(\n \n );\n};\n\nconst Select = ({ label, children, options, ...props }) => {\n const { render, informed, userProps, ref } = useField({\n type: 'select',\n ...props\n });\n\n return render(\n \n );\n};\n\nconst AddButton = () => {\n const { add } = useArrayFieldApi();\n\n return (\n {\n add();\n }}\n type=\"button\">\n Add\n \n );\n};\n\nconst RemoveButton = () => {\n const { remove } = useArrayFieldItemApi();\n\n return (\n {\n remove();\n }}\n type=\"button\">\n Remove\n \n );\n};\n\nconst MyArrayField = ({ name, items, ...props }) => {\n return (\n \n \n \n {() => (\n <>\n \n \n \n )}\n \n \n );\n};\n\n// Step 3. Define your adapter --------------------\n\nconst adapter = {\n select: Select,\n input: Input,\n checkbox: Checkbox,\n add: AddButton,\n remove: RemoveButton,\n array: MyArrayField\n};\n\n// Step 4. Build your forms!! -----------------------\n\nconst initialValue = [\n {\n name: 'Joe',\n age: '26'\n },\n {\n name: 'Elon',\n age: '49'\n }\n];\n\nconst schema = {\n type: 'object',\n required: ['name', 'siblings'],\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n authorize: {\n type: 'string',\n title: 'Authorize',\n 'ui:control': 'checkbox'\n },\n model: {\n type: 'boolean',\n title: 'Model',\n 'ui:control': 'select',\n oneOf: [\n { const: 'ms', title: 'Model S' },\n { const: 'm3', title: 'Model 3' },\n { const: 'mx', title: 'Model X' },\n { const: 'my', title: 'Model Y' }\n ],\n 'ui:props': {\n initialValue: 'm3'\n }\n },\n siblings: {\n type: 'array',\n minItems: 2,\n 'ui:control': 'array',\n 'ui:props': {\n initialValue\n },\n items: {\n type: 'object',\n required: ['name', 'age'],\n properties: {\n name: {\n type: 'string',\n title: 'Sibling name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Sibling age',\n minimum: 0,\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n }\n }\n }\n }\n }\n};\n\nconst Schema = () => (\n
\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Formatted Schema\\n\\nSometimes you want to control where the fields will end up in the dom.\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from '../../../src';\\n\\nconst schema = {\\n type: 'object',\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n brother: {\\n type: 'object',\\n properties: {\\n name: {\\n type: 'string',\\n title: 'Brother name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Brother age',\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n }\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n
\\n
Your Info:
\\n \\n
\\n
Brothers Info:
\\n \\n \\n \\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, FormField, Scope, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n brother: {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n title: 'Brother name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Brother age',\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n }\n }\n }\n }\n};\n\nconst Schema = () => (\n
\n
Your Info:
\n \n
\n
Brothers Info:
\n \n \n \n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# JSON Schema Form\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields, Debug } from 'informed';\\n\\nconst schema = {\\n type: 'object',\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input',\\n 'ui:props': {\\n validate: v => (v == null ? 'Required' : undefined)\\n }\\n },\\n age: {\\n type: 'number',\\n title: 'First name',\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n },\\n bio: {\\n type: 'string',\\n title: 'Bio',\\n 'ui:control': 'textarea'\\n },\\n authorize: {\\n type: 'string',\\n title: 'Authorize',\\n 'ui:control': 'checkbox'\\n },\\n color: {\\n type: 'string',\\n title: 'Color',\\n 'ui:control': 'select',\\n oneOf: [\\n {\\n const: '',\\n title: '- Select -',\\n 'ui:props': {\\n disabled: true\\n }\\n },\\n { const: 'red', title: 'Red' },\\n { const: 'black', title: 'Black' },\\n { const: 'white', title: 'White' }\\n ]\\n },\\n model: {\\n type: 'string',\\n title: 'Model',\\n 'ui:control': 'radio',\\n oneOf: [\\n { const: 'ms', title: 'Model S' },\\n { const: 'm3', title: 'Model 3' },\\n { const: 'mx', title: 'Model X' },\\n { const: 'my', title: 'Model Y' }\\n ],\\n default: null,\\n 'ui:props': {\\n initialValue: 'm3'\\n }\\n },\\n cars: {\\n type: 'array',\\n title: 'Cars',\\n 'ui:control': 'select',\\n 'ui:props': {\\n multiple: true,\\n style: { height: '100px', width: '200px' }\\n },\\n items: {\\n oneOf: [\\n { const: 'tesla', title: 'Tesla' },\\n { const: 'volvo', title: 'Volvo' },\\n { const: 'audi', title: 'Audi' },\\n { const: 'jeep', title: 'Jeep' }\\n ]\\n },\\n 'ui:props': {\\n initialValue: ['jeep', 'tesla']\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, SchemaFields, FormField, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input',\n 'ui:props': {\n validate: v => (v == null ? 'Required' : undefined)\n },\n 'informed:validate': {}\n },\n age: {\n type: 'number',\n title: 'Age',\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n },\n bio: {\n type: 'string',\n title: 'Bio',\n 'ui:control': 'textarea'\n },\n authorize: {\n type: 'string',\n title: 'Authorize',\n 'ui:control': 'checkbox'\n },\n color: {\n type: 'string',\n title: 'Color',\n 'ui:control': 'select',\n oneOf: [\n {\n const: '',\n title: '- Select -',\n 'ui:props': {\n disabled: true\n }\n },\n { const: 'red', title: 'Red' },\n { const: 'black', title: 'Black' },\n { const: 'white', title: 'White' }\n ]\n },\n model: {\n type: 'string',\n title: 'Model',\n 'ui:control': 'radio',\n oneOf: [\n { const: 'ms', title: 'Model S' },\n { const: 'm3', title: 'Model 3' },\n { const: 'mx', title: 'Model X' },\n { const: 'my', title: 'Model Y' }\n ],\n default: null,\n 'ui:props': {\n initialValue: 'm3'\n }\n },\n cars: {\n type: 'array',\n title: 'Cars',\n 'ui:control': 'select',\n 'ui:props': {\n multiple: true,\n style: { height: '100px', width: '200px' },\n initialValue: ['jeep', 'tesla']\n },\n items: {\n oneOf: [\n { const: 'tesla', title: 'Tesla' },\n { const: 'volvo', title: 'Volvo' },\n { const: 'audi', title: 'Audi' },\n { const: 'jeep', title: 'Jeep' }\n ]\n }\n }\n }\n};\n\nconst onSubmit = ({ values }) => console.log(values);\n\n// const schema2 = {\n// type: 'object',\n// required: ['name'],\n// properties: {\n// name: {\n// type: 'string',\n// title: 'First name',\n// 'ui:control': 'input'\n// },\n// married: {\n// type: 'string',\n// title: 'Are you married?',\n// enum: ['yes', 'no'],\n// 'ui:control': 'radio'\n// }\n// },\n// allOf: [\n// {\n// if: {\n// properties: {\n// married: { const: 'yes' }\n// },\n// required: ['married']\n// },\n// then: {\n// properties: {\n// spouse: {\n// type: 'string',\n// title: 'Spouse name',\n// 'ui:control': 'input'\n// }\n// }\n// }\n// }\n// ]\n// };\n\n// function App() {\n// return (\n//
\n// \n// \n// \n// \n// \n// );\n// }\n\nconst Schema = () => (\n
\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Nested Schema\\n\\n** Note: This is in beta and is subject to change! **\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\n\\nconst schema = {\\n type: 'object',\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n brother: {\\n type: 'object',\\n properties: {\\n name: {\\n type: 'string',\\n title: 'Brother name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Brother age',\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n }\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n brother: {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n title: 'Brother name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Brother age',\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n }\n }\n }\n }\n};\n\nconst Schema = () => (\n
\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Schema Components\\n\\nInformed 5.0 added the ability to add custom components to schema based forms, using special property names in the form of ui:[$id].\\n\\n```js\\n{\\n \\\"properties\\\": {\\n \\\"ui:myId\\\": {}\\n }\\n}\\n```\\n\\n
\\n\\nWhen wanting to render fields as children of your component, you should add these inside an allOf[] in the parent of the properties object. The entry in allOf[] should have an $id property to be able to reference those fields.\\n\\n```js\\n{\\n \\\"allOf\\\": [\\n {\\n \\\"$id\\\": \\\"myId\\\",\\n \\\"properties\\\": {\\n \\\"myField\\\": {\\n \\\"type\\\": \\\"string\\\",\\n \\\"title\\\": \\\"My field\\\"\\n }\\n }\\n }\\n ]\\n}\\n```\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields } from 'informed';\\n\\nconst schema = {\\n properties: {\\n 'ui:fullName_wrapper': {},\\n favorite: {\\n 'ui:control': 'PurpleBorder',\\n type: 'object',\\n properties: {\\n color: {\\n type: 'string',\\n title: 'Favorite color',\\n 'ui:control': 'input'\\n },\\n food: {\\n type: 'string',\\n title: 'Favorite Food',\\n 'ui:control': 'input'\\n }\\n }\\n }\\n },\\n allOf: [\\n {\\n $id: 'fullName_wrapper',\\n 'ui:control': 'PurpleBorder',\\n type: 'object',\\n properties: {\\n firstName: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n lastName: {\\n type: 'string',\\n title: 'Last name',\\n 'ui:control': 'input'\\n }\\n }\\n }\\n ]\\n};\\n\\nconst PurpleBorder = ({ children }) => {\\n return (\\n
\\n {children}\\n
\\n );\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst schema = {\n properties: {\n 'ui:fullName_wrapper': {},\n favorite: {\n 'ui:control': 'PurpleBorder',\n type: 'object',\n properties: {\n color: {\n type: 'string',\n title: 'Favorite color',\n 'ui:control': 'input'\n },\n food: {\n type: 'string',\n title: 'Favorite Food',\n 'ui:control': 'input'\n }\n }\n }\n },\n allOf: [\n {\n $id: 'fullName_wrapper',\n 'ui:control': 'PurpleBorder',\n type: 'object',\n properties: {\n firstName: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n lastName: {\n type: 'string',\n title: 'Last name',\n 'ui:control': 'input'\n }\n }\n }\n ]\n};\n\nconst PurpleBorder = ({ children }) => {\n return (\n \n {children}\n
\n );\n};\n\nconst Schema = () => (\n
\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Sub Schema\\n\\nSometimes you want to render separate schemas\\n\\n\\n\\n```jsx\\nimport { Form, FormFields } from 'informed';\\n\\nconst schema1 = {\\n type: 'object',\\n properties: {\\n name: {\\n type: 'string',\\n title: 'Name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Age',\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n }\\n }\\n};\\n\\nconst schema2 = {\\n type: 'object',\\n properties: {\\n brother: {\\n type: 'string',\\n title: 'Brother name',\\n 'ui:control': 'input'\\n },\\n age: {\\n type: 'number',\\n title: 'Brother age',\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n
\\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, FormFields } from '../../../src';\n\nconst schema1 = {\n type: 'object',\n properties: {\n name: {\n type: 'string',\n title: 'Name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Age',\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n }\n }\n};\n\nconst schema2 = {\n type: 'object',\n properties: {\n brother: {\n type: 'string',\n title: 'Brother name',\n 'ui:control': 'input'\n },\n age: {\n type: 'number',\n title: 'Brother age',\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n }\n }\n};\n\nconst Schema = () => (\n
\n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Scope Component\\n\\nSometimes you need to scope specific fields ( group them ). This is easily achieved with the use of `Scope`.\\n\\n\\n\\n```jsx\\nimport { Form, Input, Scope } from 'informed';\\n\\nconst initialValues = {\\n name: 'Elon',\\n age: 50,\\n spouse: {\\n name: 'Talulah',\\n age: 36\\n }\\n};\\n\\nconst ScopeComonent = () => (\\n
\\n

Your Info

\\n \\n \\n \\n

Spouses Info

\\n \\n \\n \\n \\n \\n);\\n```\\n\";","import React, { useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Scope, Debug, Checkbox } from '../../../src';\n\nconst initialValues = {\n name: 'Elon',\n age: 50,\n spouse: {\n name: 'Talulah',\n age: 36\n }\n};\n\nconst ScopeComonent = () => {\n // const formApiRef = useRef();\n\n // const onClick = () => {\n // formApiRef.current.resetPath('spouse');\n // };\n\n return (\n
\n

Your Info

\n \n \n \n

Spouses Info

\n \n \n \n {/* */}\n \n \n );\n};\n\nexport default withDocs(readme, ScopeComonent);\n","export default \"# useScope\\n\\nSometimes you need to scope specific fields ( group them ). This is easily achieved with the use of `Scope`. But then, you may also want to access that scopes you are in, this can be done with `useScope`.\\n\\nNote: you can also use this to scope a given string!\\n\\n\\n\\n```jsx\\nimport { Form, Input, Scope, useScope } from 'informed';\\n\\nconst initialValues = {\\n name: 'Elon',\\n age: 50,\\n spouse: {\\n name: 'Talulah',\\n age: 36\\n },\\n mother: {\\n name: 'Maye',\\n age: 74\\n }\\n};\\n\\nconst WhereAmI = () => {\\n const scope = useScope();\\n return (\\n
\\n You are within {scope}s scope.\\n
\\n );\\n};\\n\\nconst ScopeThis = ({ name }) => {\\n const scopedName = useScope(name);\\n return (\\n
\\n Scoped name {scopedName}.\\n
\\n );\\n};\\n\\nconst ScopeComonent = () => (\\n
\\n

Your Info

\\n \\n \\n \\n \\n \\n

Spouses Info

\\n \\n \\n \\n \\n \\n
\\n \\n

Mothers Info

\\n \\n \\n \\n \\n \\n \\n);\\n```\\n\";","import React, { useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Scope, useScope } from '../../../src';\n\nconst initialValues = {\n name: 'Elon',\n age: 50,\n spouse: {\n name: 'Talulah',\n age: 36\n },\n mother: {\n name: 'Maye',\n age: 74\n }\n};\n\nconst WhereAmI = () => {\n const scope = useScope();\n return (\n
\n You are within {scope}s scope.\n
\n );\n};\n\nconst ScopeThis = ({ name }) => {\n const scopedName = useScope(name);\n return (\n
\n Scoped name {scopedName}.\n
\n );\n};\n\nconst ScopeComonent = () => {\n // const formApiRef = useRef();\n\n // const onClick = () => {\n // formApiRef.current.resetPath('spouse');\n // };\n\n return (\n
\n

Your Info

\n \n \n \n \n \n

Spouses Info

\n \n \n \n \n \n
\n \n

Mothers Info

\n \n \n \n \n \n {/* */}\n \n );\n};\n\nexport default withDocs(readme, ScopeComonent);\n","export default \"# useScopedState\\n\\nSometimes you need to scope specific fields ( group them ). This is easily achieved with the use of `Scope`. But then, you may also want to access that scopes state, this can be done with `useScopedState`.\\n\\n\\n\\n```jsx\\nimport { Form, Input, Scope, useScopedState } from 'informed';\\n\\nconst initialValues = {\\n name: 'Elon',\\n age: 50,\\n spouse: {\\n name: 'Talulah',\\n age: 36\\n },\\n mother: {\\n name: 'Maye',\\n age: 74\\n }\\n};\\n\\nconst ComponentUsingScopedState = () => {\\n const state = useScopedState();\\n return (\\n 
\\n      {JSON.stringify(state, null, 2)}\\n
\\n );\\n};\\n\\nconst ScopeComonent = () => (\\n
\\n

Your Info

\\n \\n \\n \\n

Spouses Info

\\n \\n \\n \\n \\n
\\n \\n

Mothers Info

\\n \\n \\n \\n \\n
\\n);\\n```\\n\";","import React, { useRef } from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nimport { Form, Input, Scope, useScopedState } from '../../../src';\n\nconst initialValues = {\n name: 'Elon',\n age: 50,\n spouse: {\n name: 'Talulah',\n age: 36\n },\n mother: {\n name: 'Maye',\n age: 74\n }\n};\n\nconst ComponentUsingScopedState = () => {\n const state = useScopedState();\n return (\n 
\n      {JSON.stringify(state, null, 2)}\n
\n );\n};\n\nconst ScopeComonent = () => {\n // const formApiRef = useRef();\n\n // const onClick = () => {\n // formApiRef.current.resetPath('spouse');\n // };\n\n return (\n
\n

Your Info

\n \n \n \n

Spouses Info

\n \n \n \n \n
\n \n

Mothers Info

\n \n \n \n \n {/* */}\n
\n );\n};\n\nexport default withDocs(readme, ScopeComonent);\n","export default \"# Creating Your Own Fields\\n\\nInformed makes it very easy to create your own custom fields!\\n\\n```jsx\\nimport { useForm, useField, Relevant, Debug } from 'informed';\\n\\n// Step 1. Build your form component ---------------------\\n\\nconst Form = ({ children, ...rest }) => {\\n const { formController, render, userProps } = useForm(rest);\\n\\n return render(\\n
\\n {children}\\n
\\n );\\n};\\n\\n// Step 2. Build your input components --------------------\\n\\nconst Input = props => {\\n const { render, informed, userProps, fieldState, ref } = useField({\\n type: 'text',\\n ...props\\n });\\n const { label, id, ...rest } = userProps;\\n const { showError } = fieldState;\\n const style = showError ? { border: 'solid 1px red' } : null;\\n return render(\\n <>\\n \\n \\n {showError && {fieldState.error}}\\n \\n );\\n};\\n\\nconst Checkbox = props => {\\n const { render, informed, userProps, ref } = useField({\\n type: 'checkbox',\\n ...props\\n });\\n const { label, id, ...rest } = userProps;\\n return render(\\n <>\\n \\n \\n \\n );\\n};\\n\\nconst Select = props => {\\n const { render, informed, userProps, ref } = useField({\\n type: 'select',\\n ...props\\n });\\n const { label, id, children, ...rest } = userProps;\\n return render(\\n <>\\n \\n \\n \\n );\\n};\\n\\n// Step 3. Build your forms! ---------------------------\\n\\nconst onSubmit = ({ values }) => console.log(values);\\n\\nconst ExampleForm = () => (\\n
\\n \\n \\n \\n \\n \\n formState.values.married}>\\n \\n \\n \\n \\n \\n);\\n```\\n\\n\\n\";","import React from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport { useField, useForm, Relevant, Debug } from '../../../src';\n\n// Step 1. Build your form component ---------------------\n\nconst Form = ({ children, ...rest }) => {\n const { formController, render, userProps } = useForm(rest);\n\n return render(\n
\n {children}\n
\n );\n};\n\n// Step 2. Build your input components --------------------\n\nconst Input = props => {\n const { render, informed, userProps, fieldState, ref } = useField({\n type: 'text',\n ...props\n });\n const { label, id, ...rest } = userProps;\n const { showError } = fieldState;\n const style = showError ? { border: 'solid 1px red' } : null;\n return render(\n <>\n \n \n {showError && {fieldState.error}}\n \n );\n};\n\nconst Checkbox = props => {\n const { render, informed, userProps, ref } = useField({\n type: 'checkbox',\n ...props\n });\n const { label, id, ...rest } = userProps;\n return render(\n <>\n \n \n \n );\n};\n\nconst Select = props => {\n const { render, informed, userProps, ref } = useField({\n type: 'select',\n ...props\n });\n const { label, id, children, ...rest } = userProps;\n return render(\n <>\n \n \n \n );\n};\n\nconst onSubmit = ({ values }) => console.log(values);\n\nconst GettingStarted = () => (\n
\n
\n
\n \n \n \n \n \n formState.values.married}>\n \n \n \n
\n
\n \n
\n
\n
\n);\n\nexport default withDocs(readme, GettingStarted);\n","export default \"# TLDR\\n\\n[![Docs](https://badgen.net/badge/V4/Docs/purple)](https://teslamotors.github.io/informed)\\n[![npmversion](https://img.shields.io/npm/v/informed.svg)](https://www.npmjs.com/package/informed)\\n[![github](https://badgen.net/badge/gihub/main/green?icon=github)](https://github.com/teslamotors/informed)\\n[![Docs](https://badgen.net/badge/V3/Docs/red)](https://61af80ffc6bc460007bf9ec7--joepuzzo-informed.netlify.app/)\\n\\n##### Install\\n\\n```\\nnpm install --save informed\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\n\nexport default withDocs(readme, () => null);\n","import React from 'react';\nimport GettingStarted from './GettingStarted';\nimport Intro from './Intro';\nimport SchemaVsFormat from '../Intro/SchemaVsFormat';\n\nconst TLDR = () => (\n
\n \n \n
\n \n
\n);\n\nexport default TLDR;\n","export default \"# AJV Validation\\n\\nYou can pass a JSON schema to the form to both build and validate the form!\\n\\n\\n\\n```jsx\\nimport { Form, SchemaFields, Debug } from 'informed';\\nimport Ajv from 'ajv';\\n\\nconst schema = {\\n type: 'object',\\n required: ['name', 'friend', 'age', 'bio', 'color', 'model', 'cars'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name',\\n 'ui:control': 'input'\\n },\\n friend: {\\n type: 'string',\\n title: 'Friend',\\n 'ui:control': 'input',\\n oneOf: [{ const: 'Elon' }, { const: 'Kimbal' }]\\n },\\n age: {\\n type: 'number',\\n title: 'Age',\\n minimum: 0,\\n 'ui:control': 'input',\\n 'ui:props': {\\n type: 'number'\\n }\\n },\\n bio: {\\n type: 'string',\\n title: 'Bio',\\n 'ui:control': 'textarea',\\n minLength: 10\\n },\\n authorize: {\\n type: 'boolean',\\n title: 'Authorize',\\n 'ui:control': 'checkbox'\\n },\\n color: {\\n type: 'string',\\n title: 'Color',\\n 'ui:control': 'select',\\n oneOf: [\\n {\\n const: '',\\n title: '- Select -',\\n 'ui:props': {\\n disabled: true\\n }\\n },\\n { const: 'red', title: 'Red' },\\n { const: 'black', title: 'Black' },\\n { const: 'white', title: 'White' }\\n ]\\n },\\n model: {\\n type: 'string',\\n title: 'Model',\\n 'ui:control': 'radio',\\n oneOf: [\\n { const: 'ms', title: 'Model S' },\\n { const: 'm3', title: 'Model 3' },\\n { const: 'mx', title: 'Model X' },\\n { const: 'my', title: 'Model Y' }\\n ],\\n 'ui:props': {\\n initialValue: 'm3'\\n }\\n },\\n cars: {\\n type: 'array',\\n title: 'Cars',\\n minItems: 3,\\n 'ui:control': 'select',\\n 'ui:props': {\\n multiple: true,\\n style: { height: '100px', width: '200px' }\\n },\\n items: {\\n oneOf: [\\n { const: 'tesla', title: 'Tesla' },\\n { const: 'volvo', title: 'Volvo' },\\n { const: 'audi', title: 'Audi' },\\n { const: 'jeep', title: 'Jeep' }\\n ]\\n },\\n 'ui:props': {\\n initialValue: ['jeep', 'tesla']\\n }\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n window.alert(JSON.stringify(values, null, 2))}>\\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport Ajv from 'ajv';\n\nimport { Form, SchemaFields, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n required: ['name', 'friend', 'age', 'bio', 'color', 'model', 'cars'],\n properties: {\n name: {\n type: 'string',\n title: 'First name',\n 'ui:control': 'input'\n },\n friend: {\n type: 'string',\n title: 'Friend',\n 'ui:control': 'input',\n oneOf: [{ const: 'Elon' }, { const: 'Kimbal' }]\n },\n age: {\n type: 'number',\n title: 'Age',\n minimum: 0,\n 'ui:control': 'input',\n 'ui:props': {\n type: 'number'\n }\n },\n bio: {\n type: 'string',\n title: 'Bio',\n 'ui:control': 'textarea',\n minLength: 10\n },\n authorize: {\n type: 'boolean',\n title: 'Authorize',\n 'ui:control': 'checkbox'\n },\n color: {\n type: 'string',\n title: 'Color',\n 'ui:control': 'select',\n oneOf: [\n {\n const: '',\n title: '- Select -',\n 'ui:props': {\n disabled: true\n }\n },\n { const: 'red', title: 'Red' },\n { const: 'black', title: 'Black' },\n { const: 'white', title: 'White' }\n ]\n },\n model: {\n type: 'string',\n title: 'Model',\n 'ui:control': 'radio',\n oneOf: [\n { const: 'ms', title: 'Model S' },\n { const: 'm3', title: 'Model 3' },\n { const: 'mx', title: 'Model X' },\n { const: 'my', title: 'Model Y' }\n ],\n 'ui:props': {\n initialValue: 'm3'\n }\n },\n cars: {\n type: 'array',\n title: 'Cars',\n minItems: 3,\n 'ui:control': 'select',\n 'ui:props': {\n multiple: true,\n style: { height: '100px', width: '200px' },\n initialValue: ['jeep', 'tesla']\n },\n items: {\n oneOf: [\n { const: 'tesla', title: 'Tesla' },\n { const: 'volvo', title: 'Volvo' },\n { const: 'audi', title: 'Audi' },\n { const: 'jeep', title: 'Jeep' }\n ]\n }\n }\n }\n};\n\nconst Schema = () => (\n window.alert(JSON.stringify(values, null, 2))}>\n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# AJV Validation\\n\\nYou can pass a JSON schema to the form but manually render the fields. ( Validation Only )\\n\\n\\n\\n```jsx\\nimport { Form, Input, Debug } from 'informed';\\nimport Ajv from 'ajv';\\n\\nconst schema = {\\n type: 'object',\\n required: ['name', 'age', 'friend'],\\n properties: {\\n name: {\\n type: 'string',\\n title: 'First name'\\n },\\n age: {\\n type: 'number',\\n title: 'Age',\\n minimum: 0\\n },\\n friend: {\\n type: 'string',\\n title: 'Friend',\\n oneOf: [{ const: 'Elon' }, { const: 'Kimbal' }]\\n }\\n }\\n};\\n\\nconst Schema = () => (\\n window.alert(JSON.stringify(values, null, 2))}>\\n \\n \\n \\n \\n \\n \\n);\\n```\\n\";","import React from 'react';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport Ajv from 'ajv';\n\nimport { Form, Input, Debug } from '../../../src';\n\nconst schema = {\n type: 'object',\n required: ['name', 'age', 'friend'],\n properties: {\n name: {\n type: 'string',\n title: 'First name'\n },\n age: {\n type: 'number',\n title: 'Age',\n minimum: 0\n },\n friend: {\n type: 'string',\n title: 'Friend',\n oneOf: [{ const: 'Elon' }, { const: 'Kimbal' }]\n }\n }\n};\n\nconst Schema = () => (\n window.alert(JSON.stringify(values, null, 2))}>\n \n \n \n \n \n \n);\n\nexport default withDocs(readme, Schema);\n","export default \"# Async Validation\\n\\nAsync validation can be achieved by passing an asyncValidation function to the input.\\nBelow is an example form that has validation functions. The synchronous function defined\\nwill return an error when the input is empty, and nothing otherwise. The second asynchronous\\nfunction defined will, after two seconds, resolve an error or nothing depending on what is typed.\\nWe pass these validation functions to the username input and validation will **occur on blur by default**.\\n\\n**Try clicking the submit button WITH AN EMPTY FIELD! and see what happens:**\\n\\n\\n\\nWhat just happened? When you clicked on the submit button the synchronous\\nvalidation function was triggered. Because the field was empty ( if you left it empty )\\nit failed synchronous validation, and therefore did not run the async validation or\\nactually submit the form.\\n\\n**Get rid of the synchronous error by typing \\\"FooBar\\\" in the username field, then\\nclick the submit button again, WAIT TWO SECONDS, and see what happens:**\\n\\nThe form submitted!! Why? Because both our synchronous and asynchronous validation passed.\\nLets make our asynchronous validation fail!\\n\\n**Ok now type \\\"billy\\\" into the field, click on the submit button, and wait two more seconds.**\\n\\nThe form did NOT submit!! Why? Because asynchronous validation failed.\\n\\n**Ok now type \\\"reject\\\" into the field, click on the submit button, and wait two more seconds.**\\n\\nThe form did not submit because the \\\"apicall\\\" to validate failed.\\n\\n```jsx\\nimport { Form, Input } from 'informed';\\n\\nconst validate = username =>\\n !username || username.trim() === ''\\n ? 'Username is a required field'\\n : undefined;\\n\\nconst asyncValidate = username => {\\n return new Promise((resolve, reject) => {\\n setTimeout(() => {\\n // Simulate username check\\n if (['joe', 'tanner', 'billy', 'bob'].includes(username)) {\\n return resolve('That username is taken');\\n }\\n // Simulate request faulure\\n if (username === 'reject') {\\n return reject(new Error('Unable to validate username.'));\\n }\\n return resolve();\\n }, 2000);\\n });\\n};\\n\\nconst ExampleForm = () => {\\n return (\\n
console.log(values)}>\\n \\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { useRef } from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport Modal from '../../utils/Modal';\nimport readme from './README.md';\n\nimport { Form, Input, Debug, DebugField } from '../../../src';\n\nconst validate = username => {\n return !username || username.trim() === ''\n ? 'Username is a required field'\n : undefined;\n};\n\nconst asyncValidate = username => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n // Simulate username check\n if (['joe', 'tanner', 'billy', 'bob'].includes(username)) {\n return resolve('That username is taken');\n }\n // Simulate request faulure\n if (username === 'reject') {\n return reject(new Error('Unable to validate username.'));\n }\n return resolve();\n }, 2000);\n });\n};\n\nconst AsyncValidation = () => {\n return (\n
\n
console.log('Submitted', values)}>\n
\n
\n \n \n
\n
\n
Form State:
\n \n
\n
\n
Field State:
\n \n
\n
\n
\n
\n );\n};\n\nexport default withDocs(readme, () => );\n","export default \"# Complex Validation\\n\\nComplex validation can be achieved by passing a validation function to an input,\\nthat also accepts all the values in the form. Below is an example form\\nthat has validation functions on each input. The Basic validation function will\\nreturn an error when the input has less than five characters, or there is no\\nvalue at all, and undefined otherwise. The friendValidation function will show errors\\nwhen basic validation fails OR two friends have the same name. We pass the input\\nvalidation function to every input and the friendValidation function to the\\nfriend fields. Validation will **occur on submission**.\\n\\n**Try clicking the submit button and see what happens:**\\n\\n\\n\\nWhat just happened? When you clicked on the submit button all of the validation\\nfunctions were triggered for each field. Because every validation failed, the\\nform never actually called onSubmit. In other words, informed will only\\nsubmit a valid form.\\n\\n**Get rid of the errors by typing more than 5 characters in each field and\\nalso type \\\"George\\\" in two of the friend fields. Click the submit button again\\nand see what happens:**\\n\\nAll of our basic level validation passed but when the form attempted to submit\\nthe additional friend checks failed.\\n\\n\\n\\n```jsx\\nimport { Form, Input, Scope } from 'informed';\\n\\nconst basicValidation = value => {\\n return !value || value.length < 5\\n ? 'Field must be longer than five characters'\\n : undefined;\\n};\\n\\nconst duplicateValidation = (value, values) => {\\n return values.filter(v => v === value).length > 1\\n ? 'This field must be unique.'\\n : undefined;\\n};\\n\\nconst friendValidation = (value, values) => {\\n return basicValidation(value) || duplicateValidation(value, values.friends);\\n};\\n\\nconst Example = () => (\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n);\\n```\\n\";","import React from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport Modal from '../../utils/Modal';\n\nimport { Form, Input, Scope, Debug } from '../../../src';\n\nconst basicValidation = value => {\n return !value || value.length < 5\n ? 'Field must be at least five characters'\n : undefined;\n};\n\nconst duplicateValidation = (value, values) => {\n return values.filter(v => v === value).length > 1\n ? 'This field must be unique.'\n : undefined;\n};\n\nconst friendValidation = (value, values) => {\n // console.log('WTF1', basicValidation(value));\n // console.log('WTF2', values.fiends && duplicateValidation(value, values.friends));\n return basicValidation(value) || duplicateValidation(value, values.friends);\n};\n\nclass ComplexValidation extends React.Component {\n render() {\n return (\n
\n \n window.alert(JSON.stringify(values, null, 2))\n }>\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n
\n \n
\n );\n }\n}\n\nexport default withDocs(readme, () => );\n","export default \"# Elon Validator\\n\\nSimple validation can be achieved by passing a validation function to the input. But what if you want to perform multiple validations??\\n\\nWell, Elon is here to help you out!\\n\\n\\n\\n```jsx\\nimport { Form, Input, Select, Elon } from 'informed';\\n\\nconst validate = Elon.inspect([\\n (value, values) => {\\n if (values.country === 'US' && !value) {\\n return 'this field should not be empty when in the US';\\n }\\n },\\n (value, values) => {\\n if (value && value.length < 2) {\\n return 'this field should contain more than 2 characters';\\n }\\n }\\n]);\\n\\nconst Example = () => {\\n return (\\n window.alert(JSON.stringify(values, null, 2))}>\\n \\n \\n \\n \\n );\\n};\\n```\\n\";","import React, { Component } from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport Modal from '../../utils/Modal';\nimport readme from './README.md';\n\nimport { Form, Input, Select, Debug, Elon } from '../../../src';\n\nconst validate = Elon.inspect([\n (value, values) => {\n if (values.country === 'US' && !value) {\n return 'this field should not be empty when in the US';\n }\n },\n (value, values) => {\n if (value && value.length < 2) {\n return 'this field should contain more than 2 characters';\n }\n }\n]);\n\nclass SimpleValidation extends Component {\n render() {\n return (\n
\n \n window.alert(JSON.stringify(values, null, 2))\n }>\n
\n
\n \n \n \n
\n
\n \n
\n
\n \n
\n );\n }\n}\n\nexport default withDocs(readme, () => );\n","export default \"# Field Level Yup Validation\\n\\nValidation via yup can be achieved at the field level by passing a validationSchema to a field.\\n\\n**Try clicking the submit button and see what happens:**\\n\\n\\n\\nWhat just happened? When you clicked on the submit button informed triggered validate on the yup schema.\\nThen it triggered validation at the field level. How cool is that!\\n\\n\\n\\n```jsx\\nimport { Form, Text } from 'informed';\\nimport * as Yup from 'yup';\\n\\nconst SignupSchema = Yup.object().shape({\\n firstName: Yup.string()\\n .min(2, 'Too Short!')\\n .max(50, 'Too Long!')\\n .required('Required'),\\n email: Yup.string()\\n .email('Invalid email')\\n .required('Required')\\n});\\n\\nconst lastNameSchema = Yup.string()\\n .min(2, 'Last Name Too Short!')\\n .max(50, 'Last Name Too Long!')\\n .required('Last Name Required');\\n\\n
\\n \\n \\n \\n \\n
;\\n```\\n\";","import React, { Component } from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport Modal from '../../utils/Modal';\nimport readme from './README.md';\n\nimport { Form, Input, Debug } from '../../../src';\nimport * as Yup from 'yup'; // for everything\n\nconst SignupSchema = Yup.object().shape({\n firstName: Yup.string()\n .min(2, 'Too Short!')\n .max(50, 'Too Long!')\n .required('Required'),\n email: Yup.string()\n .email('Invalid email')\n .required('Required')\n});\n\nconst lastNameSchema = Yup.string()\n .min(2, 'Last Name Too Short!')\n .max(50, 'Last Name Too Long!')\n .required('Last Name Required');\n\nclass SimpleValidation extends Component {\n render() {\n return (\n
\n \n window.alert(JSON.stringify(values, null, 2))\n }>\n
\n
\n \n \n \n \n
\n
\n \n
\n
\n \n
\n );\n }\n}\n\nexport default withDocs(readme, () => );\n","export default \"# Paired Validation\\n\\nSometimes when validating you may need to revalidate when a sibling field changes.\\nA great example of this is when you have a password and confirm password field,\\nand when one changes you want the other to validate as well. To achieve this, `informed`\\nallows you to pass validateWhen to an input with an array of field names that will re-trigger validation on the field.\\n\\n**The form below is an example of this scenario:**\\n\\n\\n\\n```jsx\\nimport { Form, Input } from 'informed';\\n\\nconst basicValidation = value => {\\n return !value || value.length < 5\\n ? 'Password must be at least five characters'\\n : undefined;\\n};\\n\\nconst matchValidation = (password1, password2) => {\\n return password1 !== password2 ? 'Passwords must match' : undefined;\\n};\\n\\nconst passwordValidation = (password1, password2) => {\\n return basicValidation(password1) || matchValidation(password1, password2);\\n};\\n\\nconst validatePassword = (value, values) =>\\n passwordValidation(value, values.confirmPassword);\\nconst validateConfim = (value, values) =>\\n passwordValidation(value, values.password);\\n\\n
\\n \\n \\n \\n \\n;\\n```\\n\";","import React from 'react';\nimport Code from '../../utils/Code';\nimport withDocs from '../../utils/withDocs';\nimport readme from './README.md';\nimport Modal from '../../utils/Modal';\n\nimport { Form, Input, Debug } from '../../../src';\n\nconst basicValidation = value => {\n return !value || value.length < 5\n ? 'Password must be at least five characters'\n : undefined;\n};\n\nconst matchValidation = (password1, password2) => {\n return password1 !== password2 ? 'Passwords must match' : undefined;\n};\n\nconst passwordValidation = (password1, password2) => {\n return basicValidation(password1) || matchValidation(password1, password2);\n};\n\nconst validatePassword = (value, values) =>\n passwordValidation(value, values.confirmPassword);\nconst validateConfim = (value, values) =>\n passwordValidation(value, values.password);\n\nclass Notifications extends React.Component {\n render() {\n return (\n
\n
this.modal.open()} id=\"notify-validation-form\">\n {({ formState }) => (\n
\n
\n \n \n \n \n \n
\n
\n \n
\n (this.modal = model)}>\n Form Successfully Submitted!\n \n
\n )}\n
\n
\n );\n }\n}\n\nexport default withDocs(readme, () => );\n","export default \"# Required\\n\\nOne of the most common validation rules is marking a field as required. We make this dead simple for you.\\n\\n```jsx\\nimport {\\n Form,\\n Input,\\n TextArea,\\n RadioGroup,\\n Radio,\\n Select,\\n Option,\\n Checkbox,\\n Scope,\\n Debug\\n} from 'informed';\\n\\nconst validate = value => {\\n if (!value || value.length < 5)\\n return 'Field must be at least five characters';\\n};\\n\\nconst Example = () => (\\n window.alert(JSON.stringify(values, null, 2))}>\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n