-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathEmailField-EmailField-stories.9a133f7f.iframe.bundle.js
1 lines (1 loc) · 20.2 KB
/
EmailField-EmailField-stories.9a133f7f.iframe.bundle.js
1
"use strict";(self.webpackChunk_haaretz_a_htz_sg=self.webpackChunk_haaretz_a_htz_sg||[]).push([[4467],{"../../../node_modules/.pnpm/@[email protected][email protected]/node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{NF:()=>withMDXComponents,Zo:()=>MDXProvider,ah:()=>useMDXComponents,pC:()=>MDXContext});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"../../ds-molecules/s-form-fields/src/EmailField/EmailField.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CustomBehavior:()=>CustomBehavior,Overview:()=>Overview,default:()=>EmailField_stories});var defineProperty=__webpack_require__("../../../node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),jsx_runtime=__webpack_require__("../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react/jsx-runtime.js"),src=__webpack_require__("../../ds-atoms/s-button/src/index.ts"),react=__webpack_require__("../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react/index.js"),style9=__webpack_require__("../../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/style9/index.mjs"),EmailField_EmailField=__webpack_require__("../../ds-molecules/s-form-fields/src/EmailField/EmailField.tsx"),lib=__webpack_require__("../../../node_modules/.pnpm/@[email protected][email protected]/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("../../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@storybook/addon-docs/dist/index.mjs");function _createMdxContent(props){const _components=Object.assign({h1:"h1",h2:"h2",p:"p",strong:"strong",code:"code",pre:"pre",h3:"h3"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"emailfield",children:"EmailField"}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n","\n","\n","\n",(0,jsx_runtime.jsx)(_components.h2,{id:"installation",children:"Installation"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["Make sure the package you use ",(0,jsx_runtime.jsx)(_components.code,{children:"EmailField"})," in has ",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/s-form-fields"}),"\nlisted in its ",(0,jsx_runtime.jsx)(_components.code,{children:"package.json"}),"'s ",(0,jsx_runtime.jsx)(_components.code,{children:"dependencies"})," field:"]})}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:'// package.json\n{\n // ...\n "dependencies": {\n "@haaretz/s-form-fields": "workspace:*"\n // ...\n }\n}\n'})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Because internal monorepo packages are wired up using TypeScript's path aliases\nfeature in dev mode, importing ",(0,jsx_runtime.jsx)(_components.code,{children:"EmailField"})," without listing it as a dependency\nwill work in dev mode, but will fail in production. There should be a\n",(0,jsx_runtime.jsx)(_components.code,{children:"import/no-unresolved"})," eslint error when trying to import it when it is not\nlisted as a dependency."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"You can then import it like this:"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:"import EmailField from '@haaretz/s-form-fields';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"An email input. Tests for a valid email and shows text according to the email\nbeing empty, invalid or valid behavior. Allows for custom behavior, used mostly\nfor a successful or a failed response from server."}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"emailfield--overview"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"props",children:"Props"}),"\n",(0,jsx_runtime.jsx)(dist.$4,{story:"^"}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"custom",children:"Custom"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"emailfield--custom-behavior"})})]})}const EmailField_doc=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)};var _Overview$parameters,_Overview$parameters2,_CustomBehavior$param,_CustomBehavior$param2;function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,defineProperty.Z)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const meta={component:EmailField_EmailField.Z,title:"Molecules/EmailField",args:{inlineStyle:{},styleExtend:[]},argTypes:{styleExtend:{control:!1}},parameters:{docs:{page:EmailField_doc}}},c_base={marginBottom:"bhkcqS",textAlign:"hmKFEM"},Overview=()=>(0,jsx_runtime.jsxs)("form",{onSubmit:e=>e.preventDefault(),children:[(0,jsx_runtime.jsx)(EmailField_EmailField.Z,{}),(0,jsx_runtime.jsx)(src.ZP,{type:"submit",children:"Submit"})]}),CustomBehavior=()=>{const[state,setState]=react.useState("default"),[description,setDescription]=react.useState(""),[isBusy,setIsBusy]=react.useState(!1),buttonStateProps=isBusy?{state:"busy",busyNotice:"Loading"}:{state:"auto"};return(0,jsx_runtime.jsxs)("form",{onSubmit:async e=>{e.preventDefault(),setIsBusy(!0);try{await(()=>{const randomBoolean=Math.random()<.5;return new Promise(((resolve,reject)=>{setTimeout((()=>{randomBoolean?resolve(200):reject(403)}),500)}))})(),setDescription("Successfully sent to the server"),setState("default"),setIsBusy(!1)}catch{setDescription("Something went wrong! please try again"),setState("invalid"),setIsBusy(!1)}},children:[(0,jsx_runtime.jsx)("p",{className:(0,style9.Z)(c_base),children:"Fill a valid email for demonstration. Try clicking multiple times to see both options (success and failed)"}),(0,jsx_runtime.jsx)(EmailField_EmailField.Z,{externalState:{stateProp:state,setStateProp:setState,descriptionState:description,setDescriptionProp:setDescription}}),(0,jsx_runtime.jsx)(src.ZP,_objectSpread(_objectSpread({type:"submit"},buttonStateProps),{},{children:"Submit"}))]})},EmailField_stories=meta;Overview.parameters=_objectSpread(_objectSpread({},Overview.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Overview$parameters=Overview.parameters)||void 0===_Overview$parameters?void 0:_Overview$parameters.docs),{},{source:_objectSpread({originalSource:'() => <form onSubmit={e => e.preventDefault()}>\n <EmailField />\n <Button type="submit">Submit</Button>\n </form>'},null===(_Overview$parameters2=Overview.parameters)||void 0===_Overview$parameters2||null===(_Overview$parameters2=_Overview$parameters2.docs)||void 0===_Overview$parameters2?void 0:_Overview$parameters2.source)})}),CustomBehavior.parameters=_objectSpread(_objectSpread({},CustomBehavior.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_CustomBehavior$param=CustomBehavior.parameters)||void 0===_CustomBehavior$param?void 0:_CustomBehavior$param.docs),{},{source:_objectSpread({originalSource:"() => {\n const [state, setState] = React.useState<State>('default');\n const [description, setDescription] = React.useState('');\n const [isBusy, setIsBusy] = React.useState(false);\n const buttonStateProps: ButtonState = isBusy ? {\n state: 'busy',\n busyNotice: 'Loading'\n } : {\n state: 'auto'\n };\n return <form onSubmit={async e => {\n e.preventDefault();\n setIsBusy(true);\n try {\n await mockServer();\n setDescription('Successfully sent to the server');\n setState('default');\n setIsBusy(false);\n } catch {\n setDescription('Something went wrong! please try again');\n setState('invalid');\n setIsBusy(false);\n }\n }}>\n <p className={s9(c.base)}>\n Fill a valid email for demonstration. Try clicking multiple times to see both options\n (success and failed)\n </p>\n <EmailField externalState={{\n stateProp: state,\n setStateProp: setState,\n descriptionState: description,\n setDescriptionProp: setDescription\n }} />\n <Button type=\"submit\" {...buttonStateProps}>\n Submit\n </Button>\n </form>;\n}"},null===(_CustomBehavior$param2=CustomBehavior.parameters)||void 0===_CustomBehavior$param2||null===(_CustomBehavior$param2=_CustomBehavior$param2.docs)||void 0===_CustomBehavior$param2?void 0:_CustomBehavior$param2.source)})})},"../../ds-atoms/s-button/src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZP:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__=__webpack_require__("../../ds-atoms/s-button/src/Button.tsx").ZP},"../../ds-atoms/s-text-field/src/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZP:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__=__webpack_require__("../../ds-atoms/s-text-field/src/TextField.tsx").ZP},"../../ds-molecules/s-form-fields/src/EmailField/EmailField.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>EmailField});var _home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../../node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../../node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react/jsx-runtime.js"),_haaretz_s_text_field__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../ds-atoms/s-text-field/src/index.ts"),_haaretz_s_validators_emailValidator__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../utils/s-validators/src/emailValidator/index.ts"),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react/index.js");const _excluded=["externalState","styleExtend","inlineStyle"];function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__.Z)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const c={field:{height:"iIftcP",width:"cRUUAa"},fullWidthColumn:{gridColumnStart:"DIEXk"}};function EmailField(_ref){var _textFieldRef$current;let{externalState,styleExtend=[],inlineStyle}=_ref,props=(0,_home_runner_work_fe_fe_node_modules_pnpm_babel_runtime_7_22_10_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__.Z)(_ref,_excluded);const[internalState,internalSetState]=react__WEBPACK_IMPORTED_MODULE_2__.useState("default"),state=null!=externalState&&externalState.stateProp?externalState.stateProp:internalState,setState=null!=externalState&&externalState.setStateProp?externalState.setStateProp:internalSetState,textFieldRef=react__WEBPACK_IMPORTED_MODULE_2__.useRef(null),value=(null===(_textFieldRef$current=textFieldRef.current)||void 0===_textFieldRef$current?void 0:_textFieldRef$current.value)||"",description=(null==externalState?void 0:externalState.descriptionState)||(0,_haaretz_s_validators_emailValidator__WEBPACK_IMPORTED_MODULE_4__.Z)(value).text;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_haaretz_s_text_field__WEBPACK_IMPORTED_MODULE_5__.ZP,_objectSpread(_objectSpread({},props),{},{autoFocus:!0,name:"email","data-testid":"email-field",required:!0,maxLength:64,description,isInvalid:"default"!==state,label:"אימייל",placeholder:"[email protected]",type:"email",pattern:"\\S+@\\S+\\.\\S+",onInput:()=>{"default"!==state&&(setState("default"),(null==externalState?void 0:externalState.setDescriptionProp)&&externalState.setDescriptionProp(""))},styleExtend:[c.field,c.fullWidthColumn,...styleExtend],inlineStyle,onInvalid:e=>{e.preventDefault(),setState(e.currentTarget.value?"invalid":"empty")},ref:textFieldRef}))}try{EmailField.displayName="EmailField",EmailField.__docgenInfo={description:"",displayName:"EmailField",props:{description:{defaultValue:null,description:"",name:"description",required:!1,type:{name:"string | undefined"}},inlineStyle:{defaultValue:null,description:"CSS declarations to be set as inline `style` on the\nhtml element.\n\nBy setting values of CSS Custom Properties based on\nprops or state in the consuming component (where\nthe value of `inlineStyle` is passed), `inlineStyle`\ncan be used as an API contract for setting dynamic\nvalues to styles created with `style9.create()`:\n@example ```ts\nimport s9 from 'style9';\n\nconst { styleExtend, } = s9.create({\n styleExtend: {\n color: 'var(--color-based-on-prop)',\n },\n});\n\nfunction MyTextField(props) {\n const inlineStyle = {\n '--color-based-on-prop': props.color,\n },\n\n return (\n <TextField\n styleExtend={[ styleExtend, ]}\n inlineStyle={inlineStyle}\n />\n );\n}\n```",name:"inlineStyle",required:!1,type:{name:"InlineStyles | undefined"}},styleExtend:{defaultValue:{value:"[]"},description:"An array of `Style`s created by `style9.create()`.\nWARNING: **_do not_** pass simple CSS-in-JS object.\nThe items in the array must be created with Style9's\n`create` function.\nThe array can also hold falsy values to assist with\nconditional inclusion of `Style`s:\n@example ```ts\nconst { foo, bar, } = s9.create({ foo: { ... }, bar: { ... }, });\n<TextField styleExtend={[ someCondition && foo, bar, ]} />\n```",name:"styleExtend",required:!1,type:{name:"StyleExtend | undefined"}},state:{defaultValue:null,description:"The input's functional state\n@defaultValue 'default'",name:"state",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"disabled"'},{value:'"default"'}]}},variant:{defaultValue:null,description:"Sets the basic visual appearance of the input.\n@defaultValue 'default'",name:"variant",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"default"'},{value:'"inverse"'}]}},isInvalid:{defaultValue:null,description:"Indicate the input is in an invalid state",name:"isInvalid",required:!1,type:{name:"boolean | undefined"}},opaque:{defaultValue:null,description:"Give input a solid opaque background\n@defaultValue false",name:"opaque",required:!1,type:{name:"boolean | undefined"}},type:{defaultValue:null,description:"The input's type attribue\n@defaultValue 'text'",name:"type",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"number"'},{value:'"hidden"'},{value:'"search"'},{value:'"text"'},{value:'"tel"'},{value:'"email"'},{value:'"password"'}]}},label:{defaultValue:null,description:"The input's label",name:"label",required:!1,type:{name:"string | undefined"}},sharp:{defaultValue:null,description:"Sets sharp corners (without border-radius) on two or more corners",name:"sharp",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"bottom"'},{value:'"top"'},{value:'"all"'},{value:'"end"'},{value:'"start"'}]}},startIcon:{defaultValue:null,description:"An icon component to place at the beginning of the input.",name:"startIcon",required:!1,type:{name:"ReactNode"}},endIcon:{defaultValue:null,description:"An icon component to place at the end of the input.",name:"endIcon",required:!1,type:{name:"ReactNode"}},required:{defaultValue:null,description:"Indicates if the input is required\n@defaultValue false",name:"required",required:!1,type:{name:"boolean | undefined"}},hideBorder:{defaultValue:null,description:"An input edge (or edges) on which the border is invisible\n(e.g. for grouping with a button)",name:"hideBorder",required:!1,type:{name:"enum",value:[{value:"undefined"},{value:'"bottom"'},{value:'"top"'},{value:'"all"'},{value:'"inline"'},{value:'"end"'},{value:'"start"'},{value:'"block"'}]}},externalState:{defaultValue:null,description:"",name:"externalState",required:!1,type:{name:"SetState | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../ds-molecules/s-form-fields/src/EmailField/EmailField.tsx#EmailField"]={docgenInfo:EmailField.__docgenInfo,name:"EmailField",path:"../../ds-molecules/s-form-fields/src/EmailField/EmailField.tsx#EmailField"})}catch(__react_docgen_typescript_loader_error){}},"../../utils/s-validators/src/emailValidator/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>src_emailValidator});const src_emailValidator=function emailValidator(email){return email?/\S+@\S+\.\S+/.test(email)?email.length>64?{valid:!1,text:"תווים 64 יש להזין אימייל מעלה"}:{valid:!0,text:"אנא הזינו אימייל"}:{valid:!1,text:"יש להזין אימייל תקין"}:{valid:!1,text:"אנא הזינו אימייל"}}},"../../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/style9/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{function merge(target,source){for(const key in source)"object"==typeof source[key]?target[key]=merge({...target[key]},source[key]):target[key]=source[key];return target}function getValues(obj){const values=[];for(const key in obj){const val=obj[key];"object"==typeof val?values.push(...getValues(val)):values.push(val)}return values}function style9(...styles){return getValues(styles.reduce(merge,{})).join(" ")}__webpack_require__.d(__webpack_exports__,{Z:()=>style9}),style9.create=()=>{throw new Error("style9.create calls should be compiled away")},style9.keyframes=()=>{throw new Error("style9.keyframes calls should be compiled away")}}}]);