uangcermat-web-toolkit-v2 0.2.11 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/build/src/components/SwitchPicker/BaseSwitchPicker.d.ts +1 -1
- package/build/src/components/SwitchPicker/BaseSwitchPicker.js +1 -1
- package/build/src/components/SwitchPicker/BaseSwitchPicker.js.map +1 -1
- package/build/src/components/SwitchPicker/BaseSwitchPicker.type.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
# UangCermat Web Toolkit v2
|
|
2
2
|
|
|
3
3
|
TODO: add jest and commit lint
|
|
4
|
+
|
|
5
|
+
WARN : If you get an error below
|
|
6
|
+
|
|
7
|
+
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
|
|
8
|
+
|
|
9
|
+
then increase max_old_space_size by modify dev script:
|
|
10
|
+
|
|
11
|
+
"dev": "NODE_OPTIONS=--max_old_space_size=8129 yarn storybook", //use 8gb of ram
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { BaseSwitchPickerInterface } from './BaseSwitchPicker.type';
|
|
2
|
-
declare const BaseSwitchPicker: ({ containerStyles, iconName, iconStyles, itemContainerStyles, itemsContainerStyles, tableLabel, tableStyles, position, isAutoFlip, selectedItems, onSelectItem, data, activeItemTextStyles }: BaseSwitchPickerInterface) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const BaseSwitchPicker: ({ containerStyles, iconName, iconStyles, itemContainerStyles, itemsContainerStyles, tableLabel, tableStyles, position, isAutoFlip, selectedItems, onSelectItem, data, activeItemTextStyles, inactiveItemTextStyles }: BaseSwitchPickerInterface) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default BaseSwitchPicker;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),s=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),t=require("../../../node_modules/classnames/index.js"),l=require("react"),i=require("../Icon/Icon.js"),a=require("../Switch/BaseSwitch.js"),r=require("../Text/BaseText.js");require("../Text/Text.js");var o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),n=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({containerStyles:c,iconName:x,iconStyles:u,itemContainerStyles:b,itemsContainerStyles:m,tableLabel:j,tableStyles:f,position:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),s=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),t=require("../../../node_modules/classnames/index.js"),l=require("react"),i=require("../Icon/Icon.js"),a=require("../Switch/BaseSwitch.js"),r=require("../Text/BaseText.js");require("../Text/Text.js");var o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),n=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({containerStyles:c,iconName:x,iconStyles:u,itemContainerStyles:b,itemsContainerStyles:m,tableLabel:j,tableStyles:f,position:g,isAutoFlip:h,selectedItems:p,onSelectItem:w,data:v,activeItemTextStyles:S,inactiveItemTextStyles:O})=>e.jsx(n.Listbox,Object.assign({multiple:!0},{children:e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(s.Float,Object.assign({placement:g,flip:h},{children:[e.jsx(n.ListboxButton,Object.assign({className:o.twMerge("bg-light-aliceBlue border-none p-0 w-[30px] h-[30px] flex items-center justify-center rounded",c)},{children:e.jsx("div",Object.assign({className:"w-full h-full flex items-center justify-center"},{children:e.jsx(i,{name:x||"configuration",className:o.twMerge("fill-dark-blackCoral w-5 h-5",u)})}))})),e.jsx(d.Transition,Object.assign({as:l.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(n.ListboxOptions,Object.assign({className:o.twMerge("rounded min-w-[224px] bg-white flex flex-col overflow-hidden p-3 list-none",m)},{children:e.jsxs("div",Object.assign({className:"flex flex-col border border-solid border-dark-solitude rounded overflow-hidden"},{children:[e.jsx("div",Object.assign({className:"p-2 border-b-[1px]"},{children:e.jsx(r.default,{label:j||"Show Column",className:"text-[10px] font-normal text-dark-gumbo"})})),e.jsx("div",Object.assign({className:o.twMerge("flex flex-1 flex-col overflow-auto scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",f)},{children:v.map(((s,l)=>e.jsx(n.ListboxOption,Object.assign({className:o.twMerge("relative cursor-default select-none p-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even",b),value:s},{children:({active:l})=>{const i=p.some((e=>e.id===s.id));return e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-1 cursor-pointer text-xs text-dropdownList-text-default"},{children:[e.jsx(a,{isSelected:i,isDisabled:s.isDisabled,customStyles:s.switchCustomStyles,onClickSwitch:()=>{w(i?p.filter((e=>e.id!==s.id)):[...p,s])}}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(r.default,{label:s.name,className:t.default("text-xs text-dark-blackCoral",`${s.isDisabled&&"text-dropdownList-text-default cursor-not-allowed"}`,`${l&&!s.isDisabled?o.twMerge("font-semibold text-dropdownList-text-hover",S):o.twMerge("font-normal",O)}`,i&&!s.isDisabled&&s.labelCustomStyles,i&&s.isDisabled&&"text-dropdownList-text-disable")})}))]}))}}),`list-box-option-${l}`)))}))]}))}))}))]}))}))}));
|
|
2
2
|
//# sourceMappingURL=BaseSwitchPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSwitchPicker.js","sources":["../../../../src/components/SwitchPicker/BaseSwitchPicker.tsx"],"sourcesContent":["import {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { Icon } from '../Icon';\nimport BaseSwitch from '../Switch/BaseSwitch';\nimport { BaseText } from '../Text';\nimport { BaseSwitchPickerInterface } from './BaseSwitchPicker.type';\n\nconst BaseSwitchPicker = ({\n containerStyles,\n iconName,\n iconStyles,\n itemContainerStyles,\n itemsContainerStyles,\n tableLabel,\n tableStyles,\n position,\n isAutoFlip,\n selectedItems,\n onSelectItem,\n data,\n activeItemTextStyles\n}: BaseSwitchPickerInterface) => {\n const scrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n return (\n <Listbox multiple>\n <div className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <ListboxButton\n className={twMerge(\n 'bg-light-aliceBlue border-none p-0 w-[30px] h-[30px] flex items-center justify-center rounded',\n containerStyles\n )}\n >\n <div className='w-full h-full flex items-center justify-center'>\n <Icon\n name={iconName || 'configuration'}\n className={twMerge('fill-dark-blackCoral w-5 h-5', iconStyles)}\n />\n </div>\n </ListboxButton>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <ListboxOptions\n className={twMerge(\n 'rounded min-w-[224px] bg-white flex flex-col overflow-hidden p-3 list-none',\n itemsContainerStyles\n )}\n >\n <div className='flex flex-col border border-solid border-dark-solitude rounded overflow-hidden'>\n <div className='p-2 border-b-[1px]'>\n <BaseText\n label={tableLabel || 'Show Column'}\n className='text-[10px] font-normal text-dark-gumbo'\n />\n </div>\n <div\n className={twMerge(\n `flex flex-1 flex-col overflow-auto ${scrollbarStyles}`,\n tableStyles\n )}\n >\n {data.map((item, index) => (\n <ListboxOption\n key={`list-box-option-${index}`}\n className={twMerge(\n 'relative cursor-default select-none p-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n itemContainerStyles\n )}\n value={item}\n >\n {({ active }) => {\n const selected = selectedItems.some((i) => i.id === item.id);\n return (\n <div className='flex flex-row items-center gap-x-1 cursor-pointer text-xs text-dropdownList-text-default'>\n <BaseSwitch\n isSelected={selected}\n isDisabled={item.isDisabled}\n customStyles={item.switchCustomStyles}\n onClickSwitch={() => {\n if (selected) {\n onSelectItem(selectedItems.filter((i) => i.id !== item.id));\n } else {\n onSelectItem([...selectedItems, item]);\n }\n }}\n />\n\n <div className='flex flex-1'>\n <BaseText\n label={item.name}\n className={classNames(\n 'text-xs',\n `${\n item.isDisabled &&\n 'text-dropdownList-text-default cursor-not-allowed'\n }`,\n `${\n active && !item.isDisabled\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : 'font-normal'\n }`,\n selected && !item.isDisabled && item.labelCustomStyles,\n selected && item.isDisabled && 'text-dropdownList-text-disable'\n )}\n />\n </div>\n </div>\n );\n }}\n </ListboxOption>\n ))}\n </div>\n </div>\n </ListboxOptions>\n </Transition>\n </Float>\n </div>\n </Listbox>\n );\n};\n\nexport default BaseSwitchPicker;\n"],"names":["containerStyles","iconName","iconStyles","itemContainerStyles","itemsContainerStyles","tableLabel","tableStyles","position","isAutoFlip","selectedItems","onSelectItem","data","activeItemTextStyles","_jsx","Listbox","Object","assign","multiple","jsx","className","_jsxs","jsxs","Float","placement","flip","children","ListboxButton","twMerge","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","BaseText","label","map","item","index","ListboxOption","value","active","selected","some","i","id","BaseSwitch","isSelected","isDisabled","customStyles","switchCustomStyles","onClickSwitch","filter","classNames","labelCustomStyles"],"mappings":"omBAiByB,EACvBA,kBACAC,WACAC,aACAC,sBACAC,uBACAC,aACAC,cACAC,WACAC,aACAC,gBACAC,eACAC,OACAC,
|
|
1
|
+
{"version":3,"file":"BaseSwitchPicker.js","sources":["../../../../src/components/SwitchPicker/BaseSwitchPicker.tsx"],"sourcesContent":["import {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { Icon } from '../Icon';\nimport BaseSwitch from '../Switch/BaseSwitch';\nimport { BaseText } from '../Text';\nimport { BaseSwitchPickerInterface } from './BaseSwitchPicker.type';\n\nconst BaseSwitchPicker = ({\n containerStyles,\n iconName,\n iconStyles,\n itemContainerStyles,\n itemsContainerStyles,\n tableLabel,\n tableStyles,\n position,\n isAutoFlip,\n selectedItems,\n onSelectItem,\n data,\n activeItemTextStyles,\n inactiveItemTextStyles\n}: BaseSwitchPickerInterface) => {\n const scrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n return (\n <Listbox multiple>\n <div className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <ListboxButton\n className={twMerge(\n 'bg-light-aliceBlue border-none p-0 w-[30px] h-[30px] flex items-center justify-center rounded',\n containerStyles\n )}\n >\n <div className='w-full h-full flex items-center justify-center'>\n <Icon\n name={iconName || 'configuration'}\n className={twMerge('fill-dark-blackCoral w-5 h-5', iconStyles)}\n />\n </div>\n </ListboxButton>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <ListboxOptions\n className={twMerge(\n 'rounded min-w-[224px] bg-white flex flex-col overflow-hidden p-3 list-none',\n itemsContainerStyles\n )}\n >\n <div className='flex flex-col border border-solid border-dark-solitude rounded overflow-hidden'>\n <div className='p-2 border-b-[1px]'>\n <BaseText\n label={tableLabel || 'Show Column'}\n className='text-[10px] font-normal text-dark-gumbo'\n />\n </div>\n <div\n className={twMerge(\n `flex flex-1 flex-col overflow-auto ${scrollbarStyles}`,\n tableStyles\n )}\n >\n {data.map((item, index) => (\n <ListboxOption\n key={`list-box-option-${index}`}\n className={twMerge(\n 'relative cursor-default select-none p-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n itemContainerStyles\n )}\n value={item}\n >\n {({ active }) => {\n const selected = selectedItems.some((i) => i.id === item.id);\n return (\n <div className='flex flex-row items-center gap-x-1 cursor-pointer text-xs text-dropdownList-text-default'>\n <BaseSwitch\n isSelected={selected}\n isDisabled={item.isDisabled}\n customStyles={item.switchCustomStyles}\n onClickSwitch={() => {\n if (selected) {\n onSelectItem(selectedItems.filter((i) => i.id !== item.id));\n } else {\n onSelectItem([...selectedItems, item]);\n }\n }}\n />\n\n <div className='flex flex-1'>\n <BaseText\n label={item.name}\n className={classNames(\n 'text-xs text-dark-blackCoral',\n `${\n item.isDisabled &&\n 'text-dropdownList-text-default cursor-not-allowed'\n }`,\n `${\n active && !item.isDisabled\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : twMerge('font-normal', inactiveItemTextStyles)\n }`,\n selected && !item.isDisabled && item.labelCustomStyles,\n selected && item.isDisabled && 'text-dropdownList-text-disable'\n )}\n />\n </div>\n </div>\n );\n }}\n </ListboxOption>\n ))}\n </div>\n </div>\n </ListboxOptions>\n </Transition>\n </Float>\n </div>\n </Listbox>\n );\n};\n\nexport default BaseSwitchPicker;\n"],"names":["containerStyles","iconName","iconStyles","itemContainerStyles","itemsContainerStyles","tableLabel","tableStyles","position","isAutoFlip","selectedItems","onSelectItem","data","activeItemTextStyles","inactiveItemTextStyles","_jsx","Listbox","Object","assign","multiple","jsx","className","_jsxs","jsxs","Float","placement","flip","children","ListboxButton","twMerge","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","BaseText","label","map","item","index","ListboxOption","value","active","selected","some","i","id","BaseSwitch","isSelected","isDisabled","customStyles","switchCustomStyles","onClickSwitch","filter","classNames","labelCustomStyles"],"mappings":"omBAiByB,EACvBA,kBACAC,WACAC,aACAC,sBACAC,uBACAC,aACAC,cACAC,WACAC,aACAC,gBACAC,eACAC,OACAC,uBACAC,4BAMEC,EAAAA,IAACC,EAAAA,QAAQC,OAAAC,OAAA,CAAAC,uBACPJ,EAAKK,IAAA,MAAAH,OAAAC,OAAA,CAAAG,UAAU,mCACbC,EAACC,KAAAC,EAAKA,MAACP,OAAAC,OAAA,CAAAO,UAAWjB,EAAUkB,KAAMjB,GAChC,CAAAkB,SAAA,CAAAZ,EAAAA,IAACa,EAAAA,cAAaX,OAAAC,OAAA,CACZG,UAAWQ,EAAOA,QAChB,gGACA5B,cAGFc,MAAK,MAAAE,OAAAC,OAAA,CAAAG,UAAU,kDAAgD,CAAAM,SAC7DZ,EAAAA,IAACe,GACCC,KAAM7B,GAAY,gBAClBmB,UAAWQ,EAAAA,QAAQ,+BAAgC1B,WAIzDY,EAAAK,IAACY,aACCf,OAAAC,OAAA,CAAAe,GAAIC,WACJC,MAAM,kCACNC,UAAU,cACVC,QAAQ,aAER,CAAAV,SAAAZ,EAAAA,IAACuB,EAAcA,eAAArB,OAAAC,OAAA,CACbG,UAAWQ,EAAOA,QAChB,6EACAxB,IAGF,CAAAsB,SAAAL,EAAAC,KAAA,MAAAN,OAAAC,OAAA,CAAKG,UAAU,kFACb,CAAAM,SAAA,CAAAZ,EAAAA,IAAA,MAAAE,OAAAC,OAAA,CAAKG,UAAU,sBACb,CAAAM,SAAAZ,MAACwB,EAAAA,QACC,CAAAC,MAAOlC,GAAc,cACrBe,UAAU,+CAGdN,EACEK,IAAA,MAAAH,OAAAC,OAAA,CAAAG,UAAWQ,EAAOA,QAChB,sKACAtB,IACD,CAAAoB,SAEAf,EAAK6B,KAAI,CAACC,EAAMC,IACf5B,MAAC6B,EAAAA,cAEC3B,OAAAC,OAAA,CAAAG,UAAWQ,EAAOA,QAChB,kHACAzB,GAEFyC,MAAOH,GAEN,CAAAf,SAAA,EAAGmB,aACF,MAAMC,EAAWrC,EAAcsC,MAAMC,GAAMA,EAAEC,KAAOR,EAAKQ,KACzD,OACE5B,EAAAC,KAAA,MAAAN,OAAAC,OAAA,CAAKG,UAAU,4FAA0F,CAAAM,SAAA,CACvGZ,EAACK,IAAA+B,EACC,CAAAC,WAAYL,EACZM,WAAYX,EAAKW,WACjBC,aAAcZ,EAAKa,mBACnBC,cAAe,KAEX7C,EADEoC,EACWrC,EAAc+C,QAAQR,GAAMA,EAAEC,KAAOR,EAAKQ,KAE1C,IAAIxC,EAAegC,GACjC,IAIL3B,MAAA,MAAAE,OAAAC,OAAA,CAAKG,UAAU,eACb,CAAAM,SAAAZ,EAAAK,IAACmB,UAAQ,CACPC,MAAOE,EAAKX,KACZV,UAAWqC,EAAAA,QACT,+BACA,GACEhB,EAAKW,YACL,sDAEF,GACEP,IAAWJ,EAAKW,WACZxB,EAAOA,QACL,6CACAhB,GAEFgB,UAAQ,cAAef,KAE7BiC,IAAaL,EAAKW,YAAcX,EAAKiB,kBACrCZ,GAAYL,EAAKW,YAAc,0CAKvC,IA/CC,mBAAmBV"}
|