@apia/components 0.0.7 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apia/components",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "author": "alexisleite <alexisleite@live.com>",
   "homepage": "",
   "license": "MIT",
@@ -8,24 +8,34 @@
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "tsup",
-    "buildDev": "tsup",
-    "test": "node ./__tests__/components.test.js"
+    "build": "rollup -c rollup.config.esb.mjs",
+    "buildDev": "rollup -c rollup.config.esb.mjs --dev",
+    "watch": "rollup -c rollup.config.esb.mjs --dev --watch"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@types/react-calendar": "^3.4.3",
     "@types/react-input-mask": "^3.0.2",
-    "tsup": "^6.6.3",
-    "type-fest": "^3.6.1",
+    "esbuild": "^0.17.14",
+    "rollup": "^3.20.2",
+    "rollup-plugin-bundle-analyzer": "^1.6.6",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-esbuild": "^5.0.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@apia/icons": "^0.0.7",
-    "@apia/notifications": "^0.0.7",
-    "@apia/util": "^0.0.7",
-    "@meronex/icons": "^4.0.0",
+    "@apia/dom-store": "^0.1.0",
+    "@apia/icons": "^0.1.0",
+    "@apia/notifications": "^0.1.0",
+    "@apia/theme": "^0.1.0",
+    "@apia/util": "^0.1.0",
     "@theme-ui/color": "^0.15.5",
     "@theme-ui/match-media": "^0.15.5",
+    "react-animate-height": "^3.1.2",
     "react-calendar": "^3.4.0",
     "react-cool-portal": "^1.2.0",
     "react-focus-lock": "^2.9.4",
@@ -33,7 +43,6 @@
     "react-spinners": "^0.13.8"
   },
   "peerDependencies": {
-    "@apia/theme": "^0.0.7-alpha.0",
     "@emotion/react": "^11.10.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -48,5 +57,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "a3010b3c00d9f5eac216a167418750c391f4201d"
+  "gitHead": "86196b99a03a2e33392a8b95b847b4d036271a48"
 }

package/dist/IconButton.d.ts

@@ -1,29 +0,0 @@
-import { IconType } from '@meronex/icons/lib';
-import * as React from 'react';
-import { IconButtonProps } from 'theme-ui';
-import { TIconName } from '@apia/icons';
-
-type TApiaIconButton = 'icon' | 'icon-primary' | 'icon-outline' | 'icon-only';
-type TIconButton = IconButtonProps & React.AriaAttributes & {
-    className?: string;
-    /**
-     * Es posible pasar explícitamente un ícono o el nombre del ícono de
-     * acuerdo a la librería de la aplicación. Ver Icon.tsx
-     */
-    icon: IconType | TIconName;
-    iconSize?: number | string;
-    id?: string;
-    disabled?: boolean;
-    href?: string;
-    isLoading?: boolean;
-    isToggled?: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
-    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
-    size?: number | string;
-    title?: string;
-    variant?: string;
-};
-declare const IconButton: React.ForwardRefExoticComponent<Omit<TIconButton, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-
-export { TApiaIconButton, TIconButton, IconButton as default };

package/dist/IconButton.js

@@ -1 +0,0 @@
-"use strict";var j=Object.create;var c=Object.defineProperty,N=Object.defineProperties,S=Object.getOwnPropertyDescriptor,V=Object.getOwnPropertyDescriptors,_=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var b=(t,e,n)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,g=(t,e)=>{for(var n in e||(e={}))f.call(e,n)&&b(t,n,e[n]);if(d)for(var n of d(e))h.call(e,n)&&b(t,n,e[n]);return t},T=(t,e)=>N(t,V(e));var R=(t,e)=>{var n={};for(var o in t)f.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(t!=null&&d)for(var o of d(t))e.indexOf(o)<0&&h.call(t,o)&&(n[o]=t[o]);return n};var q=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},y=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of _(e))!f.call(t,i)&&i!==n&&c(t,i,{get:()=>e[i],enumerable:!(o=S(e,i))||o.enumerable});return t};var D=(t,e,n)=>(n=t!=null?j(k(t)):{},y(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t)),F=t=>y(c({},"__esModule",{value:!0}),t);var J={};q(J,{default:()=>G});module.exports=F(J);var r=D(require("react")),m=require("theme-ui"),H=require("@apia/icons"),E=require("@apia/theme");var l=require("react/jsx-runtime"),v=r.forwardRef((K,U)=>{var M=K,{icon:t,id:e,isLoading:n=!1,disabled:o=!1,href:i,iconSize:u="iconSm",onClick:s=()=>{},onMouseOver:O=()=>{},onMouseOut:w=()=>{},size:a,title:B,isToggled:L=!1,className:p,type:x="button",variant:A="icon"}=M,I=R(M,["icon","id","isLoading","disabled","href","iconSize","onClick","onMouseOver","onMouseOut","size","title","isToggled","className","type","variant"]);let P=r.useMemo(()=>({width:a,minWidth:a,height:a,minHeight:a,svg:{width:u,minWidth:u,height:u,minHeight:u}}),[u,a]),W=r.useMemo(()=>typeof t=="string"?H.icons[t]:t,[t]);return(0,l.jsx)(m.IconButton,T(g(T(g({id:e,ref:U,onClick:r.useCallback($=>{i&&window.open(i,"_blank"),s==null||s($)},[i,s]),onMouseOver:O,onMouseOut:w},(0,E.getVariant)(A)),{sx:P,disabled:n||o,className:`${p!=null?p:""} iconButton ${L?"isToggled":""}`,title:B,"aria-label":I.as!==void 0?void 0:B,type:I.as!==void 0?void 0:x,role:i?"link":void 0}),I),{children:n?(0,l.jsx)(m.Spinner,{color:"inherit"}):(0,l.jsx)(W,{})}))});v.displayName="IconButton";var G=v;0&&(module.exports={});

package/dist/IconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/IconButton.tsx"],"sourcesContent":["import { IconType } from '@meronex/icons/lib';\r\nimport * as React from 'react';\r\nimport {\r\n  IconButton as IconButtonThemeUI,\r\n  Spinner,\r\n  IconButtonProps,\r\n  ThemeUIStyleObject,\r\n} from 'theme-ui';\r\nimport { icons, TIconName } from '@apia/icons';\r\nimport { getVariant } from '@apia/theme';\r\n\r\nexport type TApiaIconButton =\r\n  | 'icon'\r\n  | 'icon-primary'\r\n  | 'icon-outline'\r\n  | 'icon-only';\r\n\r\nexport type TIconButton = IconButtonProps &\r\n  React.AriaAttributes & {\r\n    className?: string;\r\n    /**\r\n     * Es posible pasar explícitamente un ícono o el nombre del ícono de\r\n     * acuerdo a la librería de la aplicación. Ver Icon.tsx\r\n     */\r\n    icon: IconType | TIconName;\r\n    iconSize?: number | string;\r\n    id?: string;\r\n    disabled?: boolean;\r\n    href?: string;\r\n    isLoading?: boolean;\r\n    isToggled?: boolean;\r\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n    onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;\r\n    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\r\n    size?: number | string;\r\n    title?: string;\r\n    variant?: string;\r\n  };\r\n\r\nexport const IconButton = React.forwardRef(\r\n  (\r\n    {\r\n      icon,\r\n      id,\r\n      isLoading = false,\r\n      disabled = false,\r\n      href,\r\n      iconSize = 'iconSm',\r\n      onClick = () => {},\r\n      onMouseOver = () => {},\r\n      onMouseOut = () => {},\r\n      size,\r\n      title,\r\n      isToggled = false,\r\n      className,\r\n      type = 'button',\r\n      variant = 'icon',\r\n      ...rest\r\n    }: TIconButton,\r\n    ref: React.Ref<HTMLButtonElement>,\r\n  ) => {\r\n    const sx: ThemeUIStyleObject = React.useMemo(() => {\r\n      return {\r\n        width: size,\r\n        minWidth: size,\r\n        height: size,\r\n        minHeight: size,\r\n        svg: {\r\n          width: iconSize,\r\n          minWidth: iconSize,\r\n          height: iconSize,\r\n          minHeight: iconSize,\r\n        },\r\n      };\r\n    }, [iconSize, size]);\r\n\r\n    const ActualIcon = React.useMemo(() => {\r\n      return typeof icon === 'string' ? icons[icon] : icon;\r\n    }, [icon]);\r\n\r\n    return (\r\n      <IconButtonThemeUI\r\n        id={id}\r\n        ref={ref}\r\n        onClick={React.useCallback(\r\n          (ev: React.MouseEvent<HTMLButtonElement>) => {\r\n            if (href) window.open(href, '_blank');\r\n            onClick?.(ev);\r\n          },\r\n          [href, onClick],\r\n        )}\r\n        onMouseOver={onMouseOver}\r\n        onMouseOut={onMouseOut}\r\n        {...getVariant(variant)}\r\n        sx={sx}\r\n        disabled={isLoading || disabled}\r\n        className={`${className ?? ''} iconButton ${\r\n          isToggled ? 'isToggled' : ''\r\n        }`}\r\n        title={title}\r\n        aria-label={rest.as !== undefined ? undefined : title}\r\n        type={rest.as !== undefined ? undefined : type}\r\n        role={href ? 'link' : undefined}\r\n        {...rest}\r\n      >\r\n        {isLoading ? <Spinner color=\"inherit\" /> : <ActualIcon />}\r\n      </IconButtonThemeUI>\r\n    );\r\n  },\r\n);\r\n\r\nIconButton.displayName = 'IconButton';\r\n"],"mappings":"mjCAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GACA,IAAAI,EAAuB,oBACvBC,EAKO,oBACPC,EAAiC,uBACjCC,EAA2B,uBAgGN,IAAAC,EAAA,6BAlERC,EAAmB,aAC9B,CACEC,EAkBAC,IACG,CAnBH,IAAAC,EAAAF,EACE,MAAAG,EACA,GAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,KAAAC,EACA,SAAAC,EAAW,SACX,QAAAC,EAAU,IAAM,CAAC,EACjB,YAAAC,EAAc,IAAM,CAAC,EACrB,WAAAC,EAAa,IAAM,CAAC,EACpB,KAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,MAxDhB,EAyCIf,EAgBKgB,EAAAC,EAhBLjB,EAgBK,CAfH,OACA,KACA,YACA,WACA,OACA,WACA,UACA,cACA,aACA,OACA,QACA,YACA,YACA,OACA,YAKF,IAAMkB,EAA+B,UAAQ,KACpC,CACL,MAAOR,EACP,SAAUA,EACV,OAAQA,EACR,UAAWA,EACX,IAAK,CACH,MAAOJ,EACP,SAAUA,EACV,OAAQA,EACR,UAAWA,CACb,CACF,GACC,CAACA,EAAUI,CAAI,CAAC,EAEbS,EAAmB,UAAQ,IACxB,OAAOlB,GAAS,SAAW,QAAMA,CAAI,EAAIA,EAC/C,CAACA,CAAI,CAAC,EAET,SACE,OAAC,EAAAmB,WAAAC,EAAAC,EAAAD,EAAAC,EAAA,CACC,GAAIpB,EACJ,IAAKH,EACL,QAAe,cACZwB,GAA4C,CACvClB,GAAM,OAAO,KAAKA,EAAM,QAAQ,EACpCE,GAAA,MAAAA,EAAUgB,EACZ,EACA,CAAClB,EAAME,CAAO,CAChB,EACA,YAAaC,EACb,WAAYC,MACR,cAAWM,CAAO,GAZvB,CAaC,GAAIG,EACJ,SAAUf,GAAaC,EACvB,UAAW,GAAGS,GAAA,KAAAA,EAAa,iBACzBD,EAAY,YAAc,KAE5B,MAAOD,EACP,aAAYK,EAAK,KAAO,OAAY,OAAYL,EAChD,KAAMK,EAAK,KAAO,OAAY,OAAYF,EAC1C,KAAMT,EAAO,OAAS,SAClBW,GAtBL,CAwBE,SAAAb,KAAY,OAAC,WAAQ,MAAM,UAAU,KAAK,OAACgB,EAAA,EAAW,GACzD,CAEJ,CACF,EAEAtB,EAAW,YAAc","names":["IconButton_exports","__export","IconButton","__toCommonJS","React","import_theme_ui","import_icons","import_theme","import_jsx_runtime","IconButton","_a","ref","_b","icon","id","isLoading","disabled","href","iconSize","onClick","onMouseOver","onMouseOut","size","title","isToggled","className","type","variant","rest","__objRest","sx","ActualIcon","IconButtonThemeUI","__spreadProps","__spreadValues","ev"]}