@nlabs/gothamjs
Version:
Platform
1 lines • 15.7 kB
JavaScript
;(self.webpackChunk_nlabs_gothamjs=self.webpackChunk_nlabs_gothamjs||[]).push([[807],{"./src/components/ErrorMessage/ErrorMessage.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{K:function(){return ErrorMessage}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../lex/node_modules/react/index.js"),_utils_colorUtils__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/utils/colorUtils.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const ErrorMessage=({color:color,message:message})=>{if(!message)return null;const errorClasses=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(()=>(0,_utils_colorUtils__WEBPACK_IMPORTED_MODULE_1__.jr)(color),[color]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{className:`absolute -bottom-5 left-5 text-xs ${errorClasses}`,children:message})};ErrorMessage.__docgenInfo={description:"",methods:[],displayName:"ErrorMessage",props:{color:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:""},message:{required:!1,tsType:{name:"string"},description:""}}}},"./src/components/Label/Label.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{J:function(){return Label}});var _nlabs_utils__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@nlabs/utils/lib/index.js"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../lex/node_modules/react/index.js"),_utils_colorUtils__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/utils/colorUtils.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const Label=({className:className,color:color="neutral",hasError:hasError=!1,label:label,name:name})=>{const labelClasses=(0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>(0,_utils_colorUtils__WEBPACK_IMPORTED_MODULE_2__.IR)(hasError?"error":color),[color,hasError]);return label?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("label",{className:(0,_nlabs_utils__WEBPACK_IMPORTED_MODULE_0__.cn)(className,labelClasses),htmlFor:name,children:label}):null};Label.__docgenInfo={description:"",methods:[],displayName:"Label",props:{className:{required:!1,tsType:{name:"string"},description:""},color:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'neutral'",computed:!1}},errorColor:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:""},hasError:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},label:{required:!0,tsType:{name:"string"},description:""},name:{required:!0,tsType:{name:"string"},description:""}}}},"./src/components/TextField/TextField.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:function(){return Default},Multiline:function(){return Multiline},WithPattern:function(){return WithPattern},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return TextField_stories}});var index_esm=__webpack_require__("./node_modules/react-hook-form/dist/index.esm.mjs"),react=__webpack_require__("../lex/node_modules/react/index.js"),ErrorMessage=__webpack_require__("./src/components/ErrorMessage/ErrorMessage.tsx"),InputField=__webpack_require__("./src/components/InputField/InputField.tsx"),Label=__webpack_require__("./src/components/Label/Label.tsx"),jsx_runtime=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const TextField=(0,react.forwardRef)(({borderColor:borderColor="black",borderType:borderType,className:className,color:color="neutral",defaultValue:defaultValue="",error:externalError,errorColor:errorColor="error",inputClass:inputClass,label:label,labelClass:labelClass="mb-1",labelColor:labelColor="neutral",multiline:multiline=!1,name:name,onChange:onChangeProp,onValidate:onValidate,pattern:pattern,placeholderColor:placeholderColor="neutral",rows:rows,textColor:textColor="neutral",value:value,...restInputProps},ref)=>{const{control:control,formState:{errors:errors}}=(0,index_esm.xW)(),formError=null==errors?void 0:errors[name],hasError=!!formError;return(0,jsx_runtime.jsx)(index_esm.xI,{control:control,name:name,defaultValue:defaultValue,render:({field:{onBlur:onBlur,onChange:onChange,ref:fieldRef,value:value}})=>(0,jsx_runtime.jsxs)("div",{className:"flex flex-col w-full",children:[(0,jsx_runtime.jsx)(Label.J,{className:labelClass,color:labelColor,label:label,name:name}),(0,jsx_runtime.jsxs)("div",{className:"relative",children:[(0,jsx_runtime.jsx)(InputField.FO,{borderColor:borderColor,borderType:borderType,className:inputClass,color:hasError?"error":color,id:name,multiline:multiline,onBlur:onBlur,onChange:onChange,placeholderColor:placeholderColor,textColor:textColor,value:value,ref:e=>{fieldRef(e),ref&&"object"==typeof ref&&(ref.current=e)},...restInputProps}),(0,jsx_runtime.jsx)(ErrorMessage.K,{message:null==formError?void 0:formError.message,color:errorColor})]})]})})});TextField.__docgenInfo={description:"",methods:[],displayName:"TextField",props:{borderColor:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'black'",computed:!1}},borderType:{required:!1,tsType:{name:"union",raw:"'solid' | 'rounded' | 'none' | 'underline'",elements:[{name:"literal",value:"'solid'"},{name:"literal",value:"'rounded'"},{name:"literal",value:"'none'"},{name:"literal",value:"'underline'"}]},description:""},className:{required:!1,tsType:{name:"string"},description:""},color:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'neutral'",computed:!1}},defaultValue:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},error:{required:!1,tsType:{name:"boolean"},description:""},errorColor:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'error'",computed:!1}},hasError:{required:!1,tsType:{name:"boolean"},description:""},inputClass:{required:!1,tsType:{name:"string"},description:""},label:{required:!1,tsType:{name:"string"},description:""},labelClass:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'mb-1'",computed:!1}},labelColor:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'neutral'",computed:!1}},multiline:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},name:{required:!0,tsType:{name:"string"},description:""},onValidate:{required:!1,tsType:{name:"signature",type:"function",raw:"(isValid: boolean) => void",signature:{arguments:[{type:{name:"boolean"},name:"isValid"}],return:{name:"void"}}},description:""},pattern:{required:!1,tsType:{name:"string"},description:""},placeholderColor:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'neutral'",computed:!1}},rows:{required:!1,tsType:{name:"number"},description:""},textColor:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'neutral'",computed:!1}}}};var colorUtils=__webpack_require__("./src/utils/colorUtils.ts");var TextField_stories={argTypes:{borderColor:{control:"select",defaultValue:"secondary",description:"The color of the border",options:colorUtils.v1},borderType:{control:"select",defaultValue:"underline",description:"The type of border of the text field",options:["solid","rounded","none","underline"]},hasError:{control:"boolean",defaultValue:!1,description:"Whether the text field has an error"},labelColor:{control:"select",defaultValue:"white",description:"The color of the label",options:colorUtils.v1},multiline:{control:"boolean",defaultValue:!1,description:"Whether the text field is multiline"},pattern:{control:"text",description:"The pattern of the text field"},placeholderColor:{control:"select",defaultValue:"secondary",description:"The color of the placeholder",options:colorUtils.v1},rows:{control:"number",defaultValue:1,description:"The number of rows of the text field"},textColor:{control:"select",defaultValue:"white",description:"The color of the text",options:colorUtils.v1}},component:TextField,decorators:[Story=>{const methods=(0,index_esm.mN)();return(0,jsx_runtime.jsx)(index_esm.Op,{...methods,children:(0,jsx_runtime.jsx)("div",{className:"p-4 max-w-md",children:(0,jsx_runtime.jsx)(Story,{})})})}],parameters:{backgrounds:{default:"light",values:[{name:"light",value:"#ffffff"},{name:"dark",value:"#1a1a1a"}]},layout:"centered"},title:"Components/TextField"};const Default={args:{borderColor:"secondary",borderType:"underline",disabled:!1,error:!1,label:"Default TextField",labelColor:"black",name:"default",placeholder:"Textfield placeholder",placeholderColor:"secondary",required:!0}},Multiline={args:{borderColor:"secondary",borderType:"solid",disabled:!1,error:!1,label:"Default TextField",labelColor:"black",multiline:!0,name:"default",placeholder:"Description",placeholderColor:"secondary",required:!0,rows:1,textColor:"black"}},WithPattern={args:{disabled:!1,label:"Email TextField",name:"email",pattern:"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$",placeholder:"Enter email address"}},__namedExportsOrder=["Default","Multiline","WithPattern"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n args: {\n borderColor: 'secondary',\n borderType: 'underline',\n disabled: false,\n error: false,\n label: 'Default TextField',\n labelColor: 'black',\n name: 'default',\n placeholder: 'Textfield placeholder',\n placeholderColor: 'secondary',\n required: true\n }\n}",...Default.parameters?.docs?.source}}},Multiline.parameters={...Multiline.parameters,docs:{...Multiline.parameters?.docs,source:{originalSource:"{\n args: {\n borderColor: 'secondary',\n borderType: 'solid',\n disabled: false,\n error: false,\n label: 'Default TextField',\n labelColor: 'black',\n multiline: true,\n name: 'default',\n placeholder: 'Description',\n placeholderColor: 'secondary',\n required: true,\n rows: 1,\n textColor: 'black'\n }\n}",...Multiline.parameters?.docs?.source}}},WithPattern.parameters={...WithPattern.parameters,docs:{...WithPattern.parameters?.docs,source:{originalSource:"{\n args: {\n disabled: false,\n label: 'Email TextField',\n name: 'email',\n pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+\\\\.[a-z]{2,}$',\n placeholder: 'Enter email address'\n }\n}",...WithPattern.parameters?.docs?.source}}}}}]);