@nlabs/gothamjs/storybook-static/components-SelectField-SelectField-stories.ae82a88e.iframe.bundle.js

Platform

"use strict";(self.webpackChunk_nlabs_gothamjs=self.webpackChunk_nlabs_gothamjs||[]).push([[727],{"./src/components/SelectField/SelectField.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:function(){return Default},WithDefaultValue:function(){return WithDefaultValue},WithIcons:function(){return WithIcons},WithImages:function(){return WithImages},WithLongLabels:function(){return WithLongLabels},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return SelectField_stories}});var index_esm=__webpack_require__("./node_modules/react-hook-form/dist/index.esm.mjs"),listbox=__webpack_require__("./node_modules/@headlessui/react/dist/components/listbox/listbox.js"),label_label=__webpack_require__("./node_modules/@headlessui/react/dist/components/label/label.js"),lib=__webpack_require__("./node_modules/@nlabs/utils/lib/index.js"),chevrons_up_down=__webpack_require__("./node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js"),react=__webpack_require__("../lex/node_modules/react/index.js"),check=__webpack_require__("./node_modules/lucide-react/dist/esm/icons/check.js"),Svg=__webpack_require__("./src/components/Svg/Svg.tsx"),jsx_runtime=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const SelectOption=({option:option})=>(0,jsx_runtime.jsxs)(listbox.h7,{value:option.value,className:"group relative cursor-default py-2 pr-9 pl-3 text-gray-900 select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden",children:[(0,jsx_runtime.jsxs)("div",{className:"flex items-center",children:[option.icon&&(0,jsx_runtime.jsx)(Svg.B,{className:"size-5 shrink-0 rounded-full",name:option.icon}),option.image&&(0,jsx_runtime.jsx)("img",{alt:"",className:"size-5 shrink-0 rounded-full",src:option.image}),(0,jsx_runtime.jsx)("span",{className:"ml-3 block truncate font-normal group-data-selected:font-semibold",children:option.label})]}),(0,jsx_runtime.jsx)("span",{className:"absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-not-data-selected:hidden group-data-focus:text-white",children:(0,jsx_runtime.jsx)(check.A,{"aria-hidden":"true",className:"size-5"})})]},option.id||option.label);SelectOption.__docgenInfo={description:"",methods:[],displayName:"SelectOption",props:{option:{required:!0,tsType:{name:"signature",type:"object",raw:"{\n  readonly icon?: string;\n  readonly id?: number;\n  readonly image?: string;\n  readonly label: string;\n  readonly value: string;\n}",signature:{properties:[{key:"icon",value:{name:"string",required:!1}},{key:"id",value:{name:"number",required:!1}},{key:"image",value:{name:"string",required:!1}},{key:"label",value:{name:"string",required:!0}},{key:"value",value:{name:"string",required:!0}}]}},description:""}}};var useIsMobile=__webpack_require__("./src/hooks/useIsMobile.ts"),colorUtils=__webpack_require__("./src/utils/colorUtils.ts"),InputField=__webpack_require__("./src/components/InputField/InputField.tsx");const SelectField=({backgroundColor:backgroundColor="transparent",borderColor:borderColor="black",borderType:borderType="solid",className:className="cursor-default grid outline-1 w-full grid-cols-1 rounded-md px-3.5 py-2 text-left sm:text-sm/6",color:color="primary",defaultValue:defaultValue,label:label,labelClass:labelClass,labelColor:labelColor="neutral",name:name,options:options})=>{const isMobile=(0,useIsMobile.a)(),{control:control,formState:{errors:errors},clearErrors:clearErrors,trigger:trigger}=(0,index_esm.xW)(),[selected,setSelected]=(0,react.useState)(null==options?void 0:options.find(option=>option.value===defaultValue)),selectClasses=(0,react.useMemo)(()=>(0,lib.cn)("flex relative w-full",(0,InputField.Zm)(borderType,borderColor,color,"transparent"),className),[borderType,borderColor,color,className]),labelClasses=(0,react.useMemo)(()=>(0,lib.cn)(labelClass,"block text-sm/6 font-medium",(0,colorUtils.IR)(labelColor)),[labelClass,labelColor]),optionsClasses=(0,react.useMemo)(()=>(0,lib.cn)("absolute z-10 max-h-56 w-full overflow-auto rounded-md py-1 text-base focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm",(0,colorUtils.rt)("white"),(0,colorUtils.TL)(color,{hasFocus:!0,hasHover:!0})),[backgroundColor,color]),chevronClasses=(0,react.useMemo)(()=>(0,lib.cn)("col-start-1 row-start-1 size-5 self-center justify-self-end sm:size-4",(0,colorUtils.IR)(color)),[color]),onChange=value=>{setSelected(null==options?void 0:options.find(option=>option.value===value)),trigger(name)};return(0,jsx_runtime.jsx)(index_esm.xI,{control:control,defaultValue:defaultValue,name:name,render:({field:field})=>isMobile?(0,jsx_runtime.jsx)("select",{...field,value:null==selected?void 0:selected.value,children:options.map(option=>(0,jsx_runtime.jsx)("option",{value:option.value,children:option.label},option.id))}):(0,jsx_runtime.jsx)("div",{className:"flex flex-col w-full",children:(0,jsx_runtime.jsxs)(listbox.WF,{value:selected,onChange:onChange,children:[(0,jsx_runtime.jsx)(label_label.JU,{className:labelClasses,children:label}),(0,jsx_runtime.jsx)("select",{...field,hidden:!0,value:null==selected?void 0:selected.value}),(0,jsx_runtime.jsxs)("div",{className:(0,lib.cn)("flex flex-col relative w-full",{"mt-2":label}),children:[(0,jsx_runtime.jsxs)(listbox.go,{className:selectClasses,children:[(0,jsx_runtime.jsxs)("span",{className:"col-start-1 row-start-1 flex items-center gap-3 pr-6",children:[(null==selected?void 0:selected.image)&&(0,jsx_runtime.jsx)("img",{alt:"",src:selected.image,className:"size-5 shrink-0 rounded-full"}),(null==selected?void 0:selected.icon)&&(0,jsx_runtime.jsx)(Svg.B,{className:"size-5 shrink-0 rounded-full",name:selected.icon}),(0,jsx_runtime.jsxs)("span",{className:"block truncate",children:[null==selected?void 0:selected.label," "]})]}),(0,jsx_runtime.jsx)(chevrons_up_down.A,{"aria-hidden":"true",className:chevronClasses})]}),(0,jsx_runtime.jsx)(listbox.wh,{transition:!0,className:optionsClasses,children:options.map(option=>option&&(0,jsx_runtime.jsx)(SelectOption,{option:option},(null==option?void 0:option.id)||(null==option?void 0:option.label)))})]})]})})})};SelectField.__docgenInfo={description:"",methods:[],displayName:"SelectField",props:{backgroundColor:{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:"'transparent'",computed:!1}},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:"",defaultValue:{value:"'solid'",computed:!1}},className:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'cursor-default grid outline-1 w-full grid-cols-1 rounded-md px-3.5 py-2 text-left sm:text-sm/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:"string"},description:""},label:{required:!1,tsType:{name:"string"},description:""},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}},labelClass:{required:!1,tsType:{name:"string"},description:""},name:{required:!0,tsType:{name:"string"},description:""},options:{required:!0,tsType:{name:"Array",elements:[{name:"signature",raw:"SelectOptionProps['option']"}],raw:"SelectOptionProps['option'][]"},description:""}}};var SelectField_stories={argTypes:{color:{control:"select",description:"The color of the select field",options:colorUtils.v1},defaultValue:{control:"text",description:"The default selected value"},label:{control:"text",description:"The label text for the select field"},name:{control:"text",description:"The name of the select field"},options:{control:"object",description:"Array of select options"}},component:SelectField,decorators:[Story=>{const methods=(0,index_esm.mN)();return(0,jsx_runtime.jsx)(index_esm.Op,{...methods,children:(0,jsx_runtime.jsx)("div",{className:"flex flex-col items-center justify-center min-h-screen w-full p-4",style:{width:"300px"},children:(0,jsx_runtime.jsx)(Story,{})})})}],title:"Components/SelectField"};const defaultOptions=[{id:1,label:"First Option",value:"1"},{id:2,label:"Second Option",value:"2"},{id:3,label:"Third Option",value:"3"}],Default={args:{label:"Select an Option",name:"selectGroup",options:defaultOptions}},WithDefaultValue={args:{defaultValue:"2",label:"Select an Option",name:"selectGroupWithDefault",options:defaultOptions}},WithIcons={args:{label:"Select a Category",name:"categorySelect",options:[{icon:"briefcase",id:1,label:"Work",value:"work"},{icon:"user",id:2,label:"Personal",value:"personal"},{icon:"shopping-cart",id:3,label:"Shopping",value:"shopping"}]}},WithImages={args:{label:"Select a Country",name:"countrySelect",options:[{id:1,image:"https://flagcdn.com/w20/us.png",label:"United States",value:"us"},{id:2,image:"https://flagcdn.com/w20/gb.png",label:"United Kingdom",value:"gb"},{id:3,image:"https://flagcdn.com/w20/ca.png",label:"Canada",value:"ca"}]}},WithLongLabels={args:{label:"Select a Plan",name:"planSelect",options:[{id:1,label:"Basic Plan - Perfect for individuals and small projects",value:"basic"},{id:2,label:"Professional Plan - Ideal for growing businesses with advanced features",value:"pro"},{id:3,label:"Enterprise Plan - Full-featured solution with dedicated support",value:"enterprise"}]}},__namedExportsOrder=["Default","WithDefaultValue","WithIcons","WithImages","WithLongLabels"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {\n    label: 'Select an Option',\n    name: 'selectGroup',\n    options: defaultOptions\n  }\n}",...Default.parameters?.docs?.source}}},WithDefaultValue.parameters={...WithDefaultValue.parameters,docs:{...WithDefaultValue.parameters?.docs,source:{originalSource:"{\n  args: {\n    defaultValue: '2',\n    label: 'Select an Option',\n    name: 'selectGroupWithDefault',\n    options: defaultOptions\n  }\n}",...WithDefaultValue.parameters?.docs?.source}}},WithIcons.parameters={...WithIcons.parameters,docs:{...WithIcons.parameters?.docs,source:{originalSource:"{\n  args: {\n    label: 'Select a Category',\n    name: 'categorySelect',\n    options: [{\n      icon: 'briefcase',\n      id: 1,\n      label: 'Work',\n      value: 'work'\n    }, {\n      icon: 'user',\n      id: 2,\n      label: 'Personal',\n      value: 'personal'\n    }, {\n      icon: 'shopping-cart',\n      id: 3,\n      label: 'Shopping',\n      value: 'shopping'\n    }]\n  }\n}",...WithIcons.parameters?.docs?.source}}},WithImages.parameters={...WithImages.parameters,docs:{...WithImages.parameters?.docs,source:{originalSource:"{\n  args: {\n    label: 'Select a Country',\n    name: 'countrySelect',\n    options: [{\n      id: 1,\n      image: 'https://flagcdn.com/w20/us.png',\n      label: 'United States',\n      value: 'us'\n    }, {\n      id: 2,\n      image: 'https://flagcdn.com/w20/gb.png',\n      label: 'United Kingdom',\n      value: 'gb'\n    }, {\n      id: 3,\n      image: 'https://flagcdn.com/w20/ca.png',\n      label: 'Canada',\n      value: 'ca'\n    }]\n  }\n}",...WithImages.parameters?.docs?.source}}},WithLongLabels.parameters={...WithLongLabels.parameters,docs:{...WithLongLabels.parameters?.docs,source:{originalSource:"{\n  args: {\n    label: 'Select a Plan',\n    name: 'planSelect',\n    options: [{\n      id: 1,\n      label: 'Basic Plan - Perfect for individuals and small projects',\n      value: 'basic'\n    }, {\n      id: 2,\n      label: 'Professional Plan - Ideal for growing businesses with advanced features',\n      value: 'pro'\n    }, {\n      id: 3,\n      label: 'Enterprise Plan - Full-featured solution with dedicated support',\n      value: 'enterprise'\n    }]\n  }\n}",...WithLongLabels.parameters?.docs?.source}}}},"./src/components/Svg/Svg.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{B:function(){return Svg}});var _nlabs_utils__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@nlabs/utils/lib/index.js"),_config_appConfig__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/config/appConfig.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const Svg=({className:className,color:color="inherit",height:height=32,name:name,width:width=32})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("svg",{className:(0,_nlabs_utils__WEBPACK_IMPORTED_MODULE_0__.cn)("w-full h-full",className),viewBox:`0 0 ${width} ${height}`,style:{color:color,fill:color,height:`${height}px`,width:`${width}px`},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("use",{href:`${_config_appConfig__WEBPACK_IMPORTED_MODULE_1__.T.get("baseUrl")}/icons/icons.svg#${name}`})});Svg.__docgenInfo={description:"",methods:[],displayName:"Svg",props:{className:{required:!1,tsType:{name:"string"},description:""},color:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'inherit'",computed:!1}},height:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"32",computed:!1}},name:{required:!0,tsType:{name:"string"},description:""},width:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"32",computed:!1}}}}},"./src/config/appConfig.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{T:function(){return Config}});var _nlabs_utils__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@nlabs/utils/lib/index.js");class Config{static values={};static set(values){return(0,_nlabs_utils__WEBPACK_IMPORTED_MODULE_0__.h1)(this.values,values)}static get(path,defaultValue){const configValues={...this.values,environment:"development"};return(0,_nlabs_utils__WEBPACK_IMPORTED_MODULE_0__.Jt)(configValues,path,defaultValue)}}},"./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}}}]);