@nlabs/gothamjs/storybook-static/components-DateField-DateField-stories.039a779e.iframe.bundle.js

Platform

"use strict";(self.webpackChunk_nlabs_gothamjs=self.webpackChunk_nlabs_gothamjs||[]).push([[47],{"./src/components/DateField/DateField.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:function(){return Default},Disabled:function(){return Disabled},WithDateRange:function(){return WithDateRange},WithDefaultValue:function(){return WithDefaultValue},WithError:function(){return WithError},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return DateField_stories}});var index_esm=__webpack_require__("./node_modules/react-hook-form/dist/index.esm.mjs"),react=__webpack_require__("../lex/node_modules/react/index.js"),jsx_runtime=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const DatePicker=({initialDate:initialDate=(new Date).getTime(),maxDate:maxDate,minDate:minDate,onDateSelect:onDateSelect})=>{const defaultDate=new Date(initialDate),[selectedDate,setSelectedDate]=(0,react.useState)(defaultDate),[currentMonth,setCurrentMonth]=(0,react.useState)(defaultDate.getMonth()),[currentYear,setCurrentYear]=(0,react.useState)(defaultDate.getFullYear());(0,react.useEffect)(()=>{const updatedDate=new Date(initialDate);setSelectedDate(updatedDate),setCurrentMonth(updatedDate.getMonth()),setCurrentYear(updatedDate.getFullYear())},[initialDate]);const isDateInRange=date=>{const dateTimestamp=date.getTime();return!(minDate&&dateTimestamp<minDate)&&!(maxDate&&dateTimestamp>maxDate)},handleDateSelect=day=>{const newDate=new Date(currentYear,currentMonth,day);isDateInRange(newDate)&&(setSelectedDate(newDate),onDateSelect&&onDateSelect(newDate.getTime()))},daysInMonth=new Date(currentYear,currentMonth+1,0).getDate();const firstDayOfMonth=((year,month)=>new Date(year,month,1).getDay())(currentYear,currentMonth),days=[];for(let i=0;i<firstDayOfMonth;i++)days.push((0,jsx_runtime.jsx)("div",{className:"h-8 w-8"},`empty-${i}`));for(let day=1;day<=daysInMonth;day++){const date=new Date(currentYear,currentMonth,day),isSelected=selectedDate.getDate()===day&&selectedDate.getMonth()===currentMonth&&selectedDate.getFullYear()===currentYear,isDisabled=!isDateInRange(date);days.push((0,jsx_runtime.jsx)("button",{onClick:()=>handleDateSelect(day),disabled:isDisabled,className:"h-7 w-7 text-sm rounded-full flex items-center justify-center "+(isSelected?"bg-blue-500 text-white":isDisabled?"text-gray-300 cursor-not-allowed":"hover:bg-gray-200"),children:day},day))}const yearOptions=(()=>{let startYear=currentYear-5,endYear=currentYear+5;if(minDate){const minYear=new Date(minDate).getFullYear();startYear=minYear}if(maxDate){endYear=new Date(maxDate).getFullYear()}return Array.from({length:endYear-startYear+1},(_,i)=>startYear+i)})();return(0,jsx_runtime.jsxs)("div",{className:"bg-white border border-gray-200 rounded-lg shadow-lg p-3",children:[(0,jsx_runtime.jsxs)("div",{className:"flex justify-between items-center mb-2",children:[(0,jsx_runtime.jsx)("button",{onClick:()=>{0===currentMonth?(setCurrentMonth(11),setCurrentYear(currentYear-1)):setCurrentMonth(currentMonth-1)},className:"p-1 rounded-full hover:bg-gray-200 text-sm",children:"<"}),(0,jsx_runtime.jsxs)("div",{className:"flex space-x-1",children:[(0,jsx_runtime.jsx)("select",{value:currentMonth,onChange:e=>{setCurrentMonth(parseInt(e.target.value,10))},className:"border border-gray-300 rounded px-1.5 py-0.5 text-sm",children:["January","February","March","April","May","June","July","August","September","October","November","December"].map((month,index)=>(0,jsx_runtime.jsx)("option",{value:index,children:month},month))}),(0,jsx_runtime.jsxs)("div",{className:"relative inline-flex items-center",children:[(0,jsx_runtime.jsx)("select",{value:currentYear,onChange:e=>{setCurrentYear(parseInt(e.target.value,10))},className:"px-1.5 py-0.5 text-sm appearance-none bg-transparent focus:outline-none pr-5 hover:text-blue-600 cursor-pointer",style:{MozAppearance:"none",WebkitAppearance:"none",scrollbarWidth:"thin"},children:yearOptions.map(year=>(0,jsx_runtime.jsx)("option",{value:year,className:"text-sm",children:year},year))}),(0,jsx_runtime.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-1 text-gray-700",children:(0,jsx_runtime.jsx)("svg",{className:"h-3 w-3 fill-current",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"})})})]})]}),(0,jsx_runtime.jsx)("button",{onClick:()=>{11===currentMonth?(setCurrentMonth(0),setCurrentYear(currentYear+1)):setCurrentMonth(currentMonth+1)},className:"p-1 rounded-full hover:bg-gray-200 text-sm",children:">"})]}),(0,jsx_runtime.jsxs)("div",{className:"grid grid-cols-7 gap-0.5",children:[["Su","Mo","Tu","We","Th","Fr","Sa"].map(day=>(0,jsx_runtime.jsx)("div",{className:"text-center font-medium text-gray-500 text-xs",children:day},day)),days]})]})};DatePicker.__docgenInfo={description:"",methods:[],displayName:"DatePicker",props:{initialDate:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"(new Date()).getTime()",computed:!0}},maxDate:{required:!1,tsType:{name:"number"},description:""},minDate:{required:!1,tsType:{name:"number"},description:""},onDateSelect:{required:!1,tsType:{name:"signature",type:"function",raw:"(date: number) => void",signature:{arguments:[{type:{name:"number"},name:"date"}],return:{name:"void"}}},description:""}}};var useIsMobile=__webpack_require__("./src/hooks/useIsMobile.ts"),colorUtils=__webpack_require__("./src/utils/colorUtils.ts"),ErrorMessage=__webpack_require__("./src/components/ErrorMessage/ErrorMessage.tsx"),InputField=__webpack_require__("./src/components/InputField/InputField.tsx"),Label=__webpack_require__("./src/components/Label/Label.tsx");const DateField=(0,react.forwardRef)(({className:className="w-full rounded-md outline-1 outline-solid focus:outline-3 px-3.5 py-2 text-black dark:text-white placeholder:text-black/50 dark:placeholder:text-white/50 sm:text-sm sm:leading-6",color:color="primary",defaultValue:defaultValue,disabled:disabled=!1,error:externalError,label:label,labelClass:labelClass="mb-1",labelColor:labelColor="neutral",maxDate:maxDate,minDate:minDate,name:name,onChange:onChange,type:type="text",value:value,...props},ref)=>{const isMobile=(0,useIsMobile.a)(),{control:control,formState:{errors:errors},clearErrors:clearErrors,trigger:trigger}=(0,index_esm.xW)(),formError=null==errors?void 0:errors[name],hasError=!!formError||!!externalError,[isPickerVisible,setIsPickerVisible]=(0,react.useState)(!1),pickerRef=(0,react.useRef)(null),inputRef=(0,react.useRef)(null),outlineClasses=(0,react.useMemo)(()=>(0,colorUtils.TL)(hasError?"error":color,{hasFocus:!0,hasHover:!0}),[color,hasError]),inputClasses=["bg-white/30 dark:bg-black/30",disabled?"text-neutral/30 dark:text-neutral-dark/30 outline-neutral/30 dark:outline-neutral-dark/30":outlineClasses,className].filter(Boolean).join(" ");(0,react.useEffect)(()=>{ref&&"object"==typeof ref&&inputRef.current&&(ref.current=inputRef.current)},[ref,inputRef.current]);const formatDateForInput=timestamp=>new Date(timestamp).toISOString().split("T")[0],isDateValid=timestamp=>!(minDate&&timestamp<minDate)&&!(maxDate&&timestamp>maxDate);return(0,react.useEffect)(()=>{const handleClickOutside=event=>{pickerRef.current&&!pickerRef.current.contains(event.target)&&inputRef.current&&!inputRef.current.contains(event.target)&&setIsPickerVisible(!1)};return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[]),(0,jsx_runtime.jsx)(index_esm.xI,{control:control,name:name,defaultValue:value||(timestamp=defaultValue||(new Date).getTime(),timestamp?minDate&&timestamp<minDate?minDate:maxDate&&timestamp>maxDate?maxDate:timestamp:timestamp),render:({field:field})=>(0,jsx_runtime.jsxs)("div",{className:"flex flex-col w-full",ref:ref,children:[(0,jsx_runtime.jsx)(Label.J,{className:labelClass,color:labelColor,hasError:hasError,label:label,name:name}),(0,jsx_runtime.jsxs)("div",{className:"relative",children:[(0,jsx_runtime.jsx)(InputField.FO,{...props,ref:inputRef,disabled:disabled,value:formatDateForInput(field.value),onChange:changeEvent=>{const timestamp=(dateString=changeEvent.target.value,new Date(dateString).getTime());var dateString;field.onChange(timestamp),isDateValid(timestamp)&&(clearErrors(name),trigger(name)),onChange&&onChange(timestamp)},onFocus:()=>{isMobile||setIsPickerVisible(!0)},onBlur:()=>{trigger(name)},className:inputClasses,type:isMobile?"date":type,min:minDate?formatDateForInput(minDate):void 0,max:maxDate?formatDateForInput(maxDate):void 0}),isPickerVisible&&!disabled&&!isMobile&&(0,jsx_runtime.jsx)("div",{ref:pickerRef,className:"absolute z-10 mt-1",children:(0,jsx_runtime.jsx)(DatePicker,{initialDate:field.value,minDate:minDate,maxDate:maxDate,onDateSelect:timestamp=>{field.onChange(timestamp),isDateValid(timestamp)&&(clearErrors(name),trigger(name)),onChange&&onChange(timestamp),setIsPickerVisible(!1)}})}),(0,jsx_runtime.jsx)(ErrorMessage.K,{message:null==formError?void 0:formError.message})]})]})});var timestamp});DateField.__docgenInfo={description:"",methods:[],displayName:"DateField",props:{className:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'w-full rounded-md outline-1 outline-solid focus:outline-3 px-3.5 py-2 text-black dark:text-white placeholder:text-black/50 dark:placeholder:text-white/50 sm:text-sm sm:leading-6'",computed:!1}},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:"'primary'",computed:!1}},defaultValue:{required:!1,tsType:{name:"number"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},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}},name:{required:!0,tsType:{name:"string"},description:""},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:""},maxDate:{required:!1,tsType:{name:"number"},description:""},minDate:{required:!1,tsType:{name:"number"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(date) => void",signature:{arguments:[{name:"date"}],return:{name:"void"}}},description:""},value:{required:!1,tsType:{name:"number"},description:""},type:{defaultValue:{value:"'text'",computed:!1},required:!1}}};var DateField_stories={argTypes:{color:{control:"select",defaultValue:"primary",description:"The color of the date field",options:colorUtils.v1},disabled:{control:"boolean",defaultValue:!1,description:"Whether the date field is disabled"},error:{control:"boolean",defaultValue:!1,description:"Whether the date field has an error"},errorColor:{control:"select",defaultValue:"error",description:"The color of the error state",options:colorUtils.v1},label:{control:"text",description:"The label text for the date field"},maxDate:{control:"date",description:"The maximum allowed date"},minDate:{control:"date",description:"The minimum allowed date"}},component:DateField,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/DateField"};const Default={args:{color:"primary",disabled:!1,error:!1,label:"Select Date",name:"date",required:!0}},WithDefaultValue={args:{color:"primary",defaultValue:(new Date).getTime(),disabled:!1,error:!1,label:"Date with Default Value",name:"dateWithDefault"}},WithDateRange={args:{color:"primary",disabled:!1,error:!1,label:"Date with Range",maxDate:new Date((new Date).setFullYear((new Date).getFullYear()+1)).getTime(),minDate:new Date((new Date).setFullYear((new Date).getFullYear()-1)).getTime(),name:"dateWithRange"}},WithError={args:{color:"primary",disabled:!1,error:!0,errorColor:"error",label:"Date with Error",name:"dateWithError"}},Disabled={args:{color:"primary",defaultValue:(new Date).getTime(),disabled:!0,error:!1,label:"Disabled Date Field",name:"disabledDate"}},__namedExportsOrder=["Default","WithDefaultValue","WithDateRange","WithError","Disabled"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {\n    color: 'primary',\n    disabled: false,\n    error: false,\n    label: 'Select Date',\n    name: 'date',\n    required: true\n  }\n}",...Default.parameters?.docs?.source}}},WithDefaultValue.parameters={...WithDefaultValue.parameters,docs:{...WithDefaultValue.parameters?.docs,source:{originalSource:"{\n  args: {\n    color: 'primary',\n    defaultValue: new Date().getTime(),\n    disabled: false,\n    error: false,\n    label: 'Date with Default Value',\n    name: 'dateWithDefault'\n  }\n}",...WithDefaultValue.parameters?.docs?.source}}},WithDateRange.parameters={...WithDateRange.parameters,docs:{...WithDateRange.parameters?.docs,source:{originalSource:"{\n  args: {\n    color: 'primary',\n    disabled: false,\n    error: false,\n    label: 'Date with Range',\n    maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).getTime(),\n    minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime(),\n    name: 'dateWithRange'\n  }\n}",...WithDateRange.parameters?.docs?.source}}},WithError.parameters={...WithError.parameters,docs:{...WithError.parameters?.docs,source:{originalSource:"{\n  args: {\n    color: 'primary',\n    disabled: false,\n    error: true,\n    errorColor: 'error',\n    label: 'Date with Error',\n    name: 'dateWithError'\n  }\n}",...WithError.parameters?.docs?.source}}},Disabled.parameters={...Disabled.parameters,docs:{...Disabled.parameters?.docs,source:{originalSource:"{\n  args: {\n    color: 'primary',\n    defaultValue: new Date().getTime(),\n    disabled: true,\n    error: false,\n    label: 'Disabled Date Field',\n    name: 'disabledDate'\n  }\n}",...Disabled.parameters?.docs?.source}}}},"./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/hooks/useIsMobile.ts":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{a:function(){return useIsMobile}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../lex/node_modules/react/index.js");const useIsMobile=()=>{const[isMobile,setIsMobile]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1);return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(()=>{const checkIfMobile=()=>{setIsMobile(window.matchMedia("(max-width: 768px)").matches)};return checkIfMobile(),window.addEventListener("resize",checkIfMobile),()=>{window.removeEventListener("resize",checkIfMobile)}},[]),isMobile}}}]);