@tecsinapse/cortex-react 1.2.2 → 1.3.0-beta.0

package/dist/cjs/components/Avatar.js

@@ -24,9 +24,10 @@ const Avatar = ({ src, name, className, ...rest }) => {
         src,
         alt: name,
         className: "rounded-pill",
-        onError: () => setHasError(true)
+        onError: () => setHasError(true),
+        "data-testid": "avatar-img"
       }
-    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base" }, utils.getInitialsName(name))
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base", "data-testid": "avatar-p" }, utils.getNameInitials(name))
   );
 };
 

package/dist/cjs/components/BaseSnackbar.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const BaseSnackbar = React.forwardRef(
+  (props, ref) => {
+    const { children, show, variants } = props;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: cortexCore.snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+exports.BaseSnackbar = BaseSnackbar;

package/dist/cjs/components/BreadcrumbItem.js

@@ -18,7 +18,8 @@ const BreadcrumbItem = ({
   ), !isLast ? /* @__PURE__ */ React.createElement(
     md.MdOutlineKeyboardDoubleArrowRight,
     {
-      className: "mt-[0.125rem] text-primary-medium"
+      className: "mt-[0.125rem] text-primary-medium",
+      "data-testid": "breadcrumb-item-icon"
     }
   ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
 };

package/dist/cjs/components/Breadcrumbs.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var Card = require('./Card.js');
 var BreadcrumbItem = require('./BreadcrumbItem.js');
+var Card = require('./Card.js');
 
 const Breadcrumbs = (props) => {
   const { breadcrumbs, ...rest } = props;

package/dist/cjs/components/Button.js

@@ -5,7 +5,16 @@ var cortexCore = require('@tecsinapse/cortex-core');
 
 const Button = React.forwardRef((props, ref) => {
   const { variants, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("button", { className: cortexCore.button(variants), ref, ...rest }, children);
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: cortexCore.button(variants),
+      ref,
+      "data-testid": "button",
+      ...rest
+    },
+    children
+  );
 });
 
 exports.Button = Button;

package/dist/cjs/components/Calendar.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var useCalendar = require('../hooks/useCalendar.js');
+require('@internationalized/date');
+require('react-aria');
+var CalendarGrid = require('./CalendarGrid.js');
+var CalendarHeader = require('./CalendarHeader.js');
+
+const Calendar = ({ value, onChange }) => {
+  const { calendarProps, title, state } = useCalendar.useCalendar({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", "data-testid": "calendar-div" }, /* @__PURE__ */ React.createElement(
+    CalendarHeader.CalendarHeader,
+    {
+      onClickPrevButton: () => state.focusPreviousPage(),
+      onClickNextButton: () => state.focusNextPage(),
+      title
+    }
+  ), /* @__PURE__ */ React.createElement(CalendarGrid.CalendarGrid, { state }));
+};
+
+exports.Calendar = Calendar;

package/dist/cjs/components/CalendarCell.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useCalendarCell = require('../hooks/useCalendarCell.js');
+var calendarCell = require('../styles/calendar-cell.js');
+require('../styles/groupButton.js');
+require('../styles/progressBar.js');
+var Table = require('./Table.js');
+
+const { cell, button } = calendarCell.calendarCell();
+const CalendarCell = ({ state, date }) => {
+  const {
+    ref,
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate,
+    isSelectionStart,
+    isSelectionEnd,
+    inRange
+  } = useCalendarCell.useCalendarCell({ state, date });
+  return /* @__PURE__ */ React.createElement(
+    Table.Td,
+    {
+      ...cellProps,
+      "data-testid": "calendar-cell-td",
+      className: cell({
+        isOutsideVisibleRange,
+        isSelected,
+        isSelectionStart,
+        isSelectionEnd,
+        inRange
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...buttonProps,
+        ref,
+        className: button({ isOutsideVisibleRange })
+      },
+      formattedDate
+    )
+  );
+};
+
+exports.CalendarCell = CalendarCell;

package/dist/cjs/components/CalendarGrid.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useCalendarGrid = require('../hooks/useCalendarGrid.js');
+var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
+var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');
+
+const CalendarGrid = ({ state }) => {
+  const { gridProps, headerProps, weekDays } = useCalendarGrid.useCalendarGrid({ state });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "bg-white rounded-micro px-deca py-mili",
+      "data-testid": "calendar-grid"
+    },
+    /* @__PURE__ */ React.createElement("table", { ...gridProps, className: "border-separate border-spacing-y-nano" }, /* @__PURE__ */ React.createElement("thead", { ...headerProps }, /* @__PURE__ */ React.createElement(CalendarGridHeaderRow.CalendarGridHeaderRow, { weekDays })), /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(CalendarGridBodyRows.CalendarGridBodyRows, { state })))
+  );
+};
+
+exports.CalendarGrid = CalendarGrid;

package/dist/cjs/components/CalendarGridBodyRows.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var CalendarCell = require('./CalendarCell.js');
+
+const CalendarGridBodyRows = ({ state }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, [...new Array(6).keys()].map((weekIndex) => /* @__PURE__ */ React.createElement("tr", { key: weekIndex, className: "shadow-0 px-deca" }, state.getDatesInWeek(weekIndex).map((date, i) => {
+    return date ? /* @__PURE__ */ React.createElement(CalendarCell.CalendarCell, { key: i, state, date }) : /* @__PURE__ */ React.createElement("td", { key: i });
+  }))));
+};
+
+exports.CalendarGridBodyRows = CalendarGridBodyRows;

package/dist/cjs/components/CalendarGridHeaderRow.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var Table = require('./Table.js');
+
+const CalendarGridHeaderRow = ({
+  weekDays
+}) => {
+  return /* @__PURE__ */ React.createElement("tr", { "data-testid": "calendar-grid-header-row" }, weekDays.map((day, index) => /* @__PURE__ */ React.createElement(Table.THeadCell, { key: index }, day)));
+};
+
+exports.CalendarGridHeaderRow = CalendarGridHeaderRow;

package/dist/cjs/components/CalendarHeader.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var fa = require('react-icons/fa');
+var Button = require('./Button.js');
+
+const CalendarHeader = ({
+  onClickPrevButton,
+  onClickNextButton,
+  title
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex flex-row justify-between items-center gap-x-deca bg-miscellaneous-body p-mili",
+      "data-testid": "calendar-header"
+    },
+    /* @__PURE__ */ React.createElement(
+      Button.Button,
+      {
+        onClick: onClickPrevButton,
+        variants: { variant: "text", intent: "secondary", size: "small" },
+        "data-testid": "calendar-header-prev-button"
+      },
+      /* @__PURE__ */ React.createElement(fa.FaChevronLeft, null)
+    ),
+    /* @__PURE__ */ React.createElement("span", { className: "font-bold capitalize" }, title),
+    /* @__PURE__ */ React.createElement(
+      Button.Button,
+      {
+        onClick: onClickNextButton,
+        variants: { variant: "text", intent: "secondary", size: "small" },
+        "data-testid": "calendar-header-next-button"
+      },
+      /* @__PURE__ */ React.createElement(fa.FaChevronRight, null)
+    )
+  );
+};
+
+exports.CalendarHeader = CalendarHeader;

package/dist/cjs/components/Card.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const Card = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;

package/dist/cjs/components/DateSegment.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+
+const DateSegment = ({ segment, state }) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React.createElement("div", { ...segmentProps, ref, className: "text-sub accent-transparent" }, segment.text);
+};
+
+exports.DateSegment = DateSegment;

package/dist/cjs/components/DefaultSnack.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var BaseSnackbar = require('./BaseSnackbar.js');
+var io = require('react-icons/io');
+
+const DefaultSnack = ({
+  text,
+  onDismiss,
+  variants
+}) => /* @__PURE__ */ React.createElement(BaseSnackbar.BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React.createElement(
+  io.IoMdInformationCircleOutline,
+  {
+    className: "w-[20px] h-[20px] shrink-0",
+    "data-testid": "icon-info"
+  }
+), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
+  io.IoMdClose,
+  {
+    "data-testid": "icon-close",
+    onClick: onDismiss,
+    size: 24,
+    className: "cursor-pointer w-[20px] h-[20px] shrink-0"
+  }
+)));
+
+exports.DefaultSnack = DefaultSnack;

package/dist/cjs/components/Drawer.js

@@ -12,12 +12,14 @@ const Drawer = ({
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "div",
     {
+      "data-testid": "overlay",
       className: cortexCore.overlay({ show: open }),
-      onClick: () => onClose(false)
+      onClick: onClose
     }
   ), /* @__PURE__ */ React.createElement(
     "div",
     {
+      "data-testid": "drawer",
       className: cortexCore.drawer({
         position,
         open

package/dist/cjs/components/GroupButton.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+require('../styles/calendar-cell.js');
+var groupButton = require('../styles/groupButton.js');
+require('../styles/progressBar.js');
+
+const { button, container, active, inactive, firstButton, lastButton } = groupButton.groupButton();
+const GroupButton = (props) => {
+  const {
+    options,
+    value,
+    renderKey,
+    renderOption,
+    onChange,
+    customStyles,
+    disableAllOptions
+  } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "group-button-container" }, options.map((option) => {
+    const key = renderKey?.(option.value);
+    const isActive = key === renderKey?.(value);
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        disabled: disableAllOptions,
+        value: String(value),
+        onClick: () => onChange(option.value),
+        className: clsx(
+          button(),
+          firstButton({ className: customStyles?.firstButton }),
+          lastButton({ className: customStyles?.lastButton }),
+          !isActive && inactive({ className: customStyles?.inactive }),
+          isActive && active({ className: customStyles?.active })
+        ),
+        key
+      },
+      renderOption(option.value)
+    );
+  }));
+};
+
+exports.GroupButton = GroupButton;

package/dist/cjs/components/Input.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
 var clsx = require('clsx');
+var React = require('react');
 
 const getValidChildren = (children) => {
   return React.Children.toArray(children).filter(
@@ -19,13 +19,15 @@ const Box = React.forwardRef(
         placeholder: placeholder ?? " ",
         className: clsx.clsx(cortexCore.inputBox(placeholder, label, className)),
         ...rest,
-        ref
+        ref,
+        "data-testid": "input-input"
       }
     ), /* @__PURE__ */ React.createElement(
       "label",
       {
         htmlFor: id ?? name,
-        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder })
+        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder }),
+        "data-testid": "input-label"
       },
       label
     ));

package/dist/cjs/components/Modal.js

@@ -5,21 +5,14 @@ var cortexCore = require('@tecsinapse/cortex-core');
 
 const Modal = React.forwardRef((props, ref) => {
   const { open, onClose, children, className } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, ...props }, /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref,
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cortexCore.overlay({ show: open }),
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ React.createElement("dialog", { className: cortexCore.modal({ open, className }) }, children)
-  );
+      "data-testid": "overlay",
+      className: cortexCore.overlay({ show: open }),
+      onClick: onClose
+    }
+  ), /* @__PURE__ */ React.createElement("dialog", { "data-testid": "modal", className: cortexCore.modal({ open, className }) }, children));
 });
 
 exports.Modal = Modal;

package/dist/cjs/components/ProgressBar.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+require('../styles/calendar-cell.js');
+require('../styles/groupButton.js');
+var progressBar = require('../styles/progressBar.js');
+
+const ProgressBar = ({
+  segments: _segments = 1,
+  valueMin = 0,
+  valueMax = 100,
+  valueCurrent = 50,
+  intentProgress = "default",
+  animated = true
+}) => {
+  const [displayedValue, setDisplayedValue] = React.useState(0);
+  const [showAnimation, setShowAnimation] = React.useState(true);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (valueCurrent < displayedValue) {
+        setShowAnimation(false);
+      }
+      if (animated && valueCurrent > displayedValue) setShowAnimation(true);
+      setDisplayedValue(valueCurrent);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [valueCurrent]);
+  const progressStyle = React.useCallback(
+    (width, index) => {
+      return {
+        width: `${width}%`,
+        transitionDelay: `${showAnimation ? `${index * 1e3}ms` : `0ms`}`
+      };
+    },
+    [showAnimation]
+  );
+  const totalProgress = (displayedValue - valueMin) / (valueMax - valueMin) * 100;
+  const segments = Math.max(1, _segments);
+  const lengthSeg = 100 / Math.max(segments);
+  const items = [...Array(segments).keys()];
+  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row" }, items.map((_, index) => {
+    const max = lengthSeg * (index + 1);
+    const min = lengthSeg * index;
+    const minmax = (totalProgress - min) / (max - min);
+    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "progress-bar",
+        key: index,
+        className: clsx(
+          "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-testid": "div-segment-filled",
+          style: progressStyle(width, index),
+          className: progressBar.progressBarFilled({
+            intentProgress,
+            showAnimation
+          })
+        }
+      )
+    );
+  }));
+};
+
+exports.ProgressBar = ProgressBar;

package/dist/cjs/components/RangeCalendar.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var date = require('@internationalized/date');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var CalendarGrid = require('./CalendarGrid.js');
+var CalendarHeader = require('./CalendarHeader.js');
+
+const RangeCalendar = ({ value, onChange }) => {
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useRangeCalendarState({
+    locale,
+    createCalendar: date.createCalendar,
+    defaultValue: {
+      start: new date.CalendarDate(
+        value.start.getFullYear(),
+        value.start.getMonth(),
+        value.start.getDate()
+      ),
+      end: new date.CalendarDate(
+        value.end.getFullYear(),
+        value.end.getMonth(),
+        value.end.getDate()
+      )
+    },
+    onChange: (value2) => onChange({
+      start: value2.start.toDate(date.getLocalTimeZone()),
+      end: value2.end.toDate(date.getLocalTimeZone())
+    })
+  });
+  const ref = React.useRef(null);
+  const { calendarProps, title } = reactAria.useRangeCalendar({}, state, ref);
+  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
+    CalendarHeader.CalendarHeader,
+    {
+      onClickPrevButton: () => state.focusPreviousPage(),
+      onClickNextButton: () => state.focusNextPage(),
+      title
+    }
+  ), /* @__PURE__ */ React.createElement(CalendarGrid.CalendarGrid, { state }));
+};
+
+exports.RangeCalendar = RangeCalendar;

package/dist/cjs/components/SearchInput.js

@@ -1,23 +1,33 @@
 'use strict';
 
 var React = require('react');
+require('clsx');
 require('./Badge.js');
-var Button = require('./Button.js');
+require('./BaseSnackbar.js');
+require('react-icons/md');
 require('./Card.js');
+var Button = require('./Button.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useDebouncedState = require('../hooks/useDebouncedState.js');
+require('./CalendarCell.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/fa');
+require('react-icons/io');
+require('./GroupButton.js');
 require('./Hint.js');
 var Input = require('./Input.js');
 require('./Modal.js');
+require('../styles/calendar-cell.js');
+require('../styles/groupButton.js');
+require('../styles/progressBar.js');
 require('./Select.js');
-require('./Snackbar.js');
 require('./Tag.js');
-require('./Toggle.js');
 require('./TextArea.js');
-require('@tecsinapse/cortex-core');
-require('react-icons/md');
-require('clsx');
+require('./Toggle.js');
 var ai = require('react-icons/ai');
 var io5 = require('react-icons/io5');
-var useDebouncedState = require('../hooks/useDebouncedState.js');
 
 const inputFace = "bg-white w-full";
 const inputLeft = "flex items-center";
@@ -45,7 +55,7 @@ const SearchInput = ({
       onClick(searchInput);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, null)), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
     Input.Input.Box,
     {
       placeholder,
@@ -65,7 +75,7 @@ const SearchInput = ({
       onClick: () => onClick(searchInput),
       disabled: !searchInput || isSubmitting
     },
-    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(ai.AiOutlineLoading, null)) : /* @__PURE__ */ React.createElement(io5.IoSearchOutline, null)
+    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(ai.AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-button" })
   ));
 };
 

package/dist/cjs/components/Select.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var Hint = require('./Hint.js');
-var io5 = require('react-icons/io5');
 var io = require('react-icons/io');
+var io5 = require('react-icons/io5');
+var Hint = require('./Hint.js');
 var SearchInput = require('./SearchInput.js');
 
 const { button, dropdown, groupedTitle, containerGrouped, hintBody } = cortexCore.selectVariants();
@@ -68,7 +68,7 @@ const Select = (props) => {
       onClick: () => setOpen((prevState) => !prevState),
       disabled
     },
-    /* @__PURE__ */ React.createElement("span", null, placeholder),
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
     /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
   ), /* @__PURE__ */ React.createElement(
     "ul",
@@ -93,7 +93,7 @@ const Select = (props) => {
         intent: variant
       }
     },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(io.IoIosCloseCircleOutline, null) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
+    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(io.IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
   ));
 };
 

package/dist/cjs/components/Skeleton.js

@@ -5,14 +5,17 @@ var React = require('react');
 
 const Skeleton = ({
   className,
+  children,
   ...rest
 }) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...rest,
+      "data-testid": "skeleton",
       className: clsx("animate-pulse bg-secondary-light", className)
-    }
+    },
+    children
   );
 };