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

package/dist/cjs/service/SnackbarSonner.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var sonner = require('sonner');
+var React = require('react');
+require('clsx');
+require('@internationalized/date');
+require('../components/Badge.js');
+require('../components/BaseSnackbar.js');
+require('react-icons/md');
+require('../components/Card.js');
+require('../components/Button.js');
+require('react-aria');
+require('react-stately');
+require('../components/CalendarCell.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/fa');
+require('react-icons/lia');
+require('../components/Input.js');
+var DefaultSnack = require('../components/DefaultSnack.js');
+require('../components/GroupButton.js');
+require('../components/Hint.js');
+require('../components/Modal.js');
+require('../styles/calendar-cell.js');
+require('../styles/groupButton.js');
+require('../styles/progressBar.js');
+require('../components/Select.js');
+require('../components/Tag.js');
+require('../components/TextArea.js');
+require('../components/Toggle.js');
+
+class SnackbarSonner {
+  custom(Component, options) {
+    return sonner.toast.custom(() => Component, {
+      ...options,
+      duration: options?.duration ?? 5e3
+    });
+  }
+  show(type, message, options) {
+    return sonner.toast.custom(
+      (t) => {
+        return /* @__PURE__ */ React.createElement(
+          DefaultSnack.DefaultSnack,
+          {
+            text: message,
+            variants: { intent: type },
+            onDismiss: () => sonner.toast.dismiss(t)
+          }
+        );
+      },
+      { ...options, duration: options?.duration ?? 5e3 }
+    );
+  }
+}
+
+exports.SnackbarSonner = SnackbarSonner;

package/dist/cjs/styles/calendar-cell.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const calendarCell = tailwindVariants.tv({
+  slots: {
+    cell: "text-center rounded-mili text-black hover:bg-primary-light",
+    button: "flex aspect-square items-center justify-center"
+  },
+  variants: {
+    isSelected: {
+      true: {
+        cell: "bg-primary-medium text-white hover:bg-primary-medium"
+      }
+    },
+    isSelectionStart: {
+      true: {
+        cell: "bg-primary-medium rounded-r-none text-white"
+      }
+    },
+    isSelectionEnd: {
+      true: {
+        cell: "bg-primary-medium rounded-l-none text-white"
+      }
+    },
+    inRange: {
+      true: {
+        cell: "bg-primary-light rounded-none text-black"
+      }
+    },
+    isOutsideVisibleRange: {
+      true: {
+        cell: "text-secondary-light cursor-default  hover:bg-white-500",
+        button: "cursor-default"
+      }
+    }
+  }
+});
+
+exports.calendarCell = calendarCell;

package/dist/cjs/styles/groupButton.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const groupButton = tailwindVariants.tv({
+  slots: {
+    button: "border-[1px] border-secondary-medium px-centi py-mili items-center flex text-sub font-bold",
+    inactive: "bg-white text-secondary-medium disabled:bg-secondary-light",
+    firstButton: "first:rounded-l-mili first:border-r-0",
+    lastButton: "last:rounded-r-mili last:border-l-0",
+    container: "flex flex-row flex-1 h-[2rem] w-[500px]",
+    active: "text-white bg-secondary-medium"
+  }
+});
+
+exports.groupButton = groupButton;

package/dist/cjs/styles/progressBar.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const progressBarFilled = tailwindVariants.tv({
+  base: "h-full first:rounded-l-pill last:rounded-r-pill",
+  variants: {
+    intentProgress: {
+      default: "bg-primary-medium",
+      error: "bg-error-medium",
+      info: "bg-info-medium",
+      warning: "bg-warning-medium",
+      success: "bg-success-medium"
+    },
+    showAnimation: {
+      true: "transition-[width] duration-1000 ease-linear"
+    }
+  }
+});
+
+exports.progressBarFilled = progressBarFilled;

package/dist/esm/components/Avatar.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import { getInitialsName } from './utils.js';
+import { getNameInitials } from './utils.js';
 
 const Avatar = ({ src, name, className, ...rest }) => {
   const [hasError, setHasError] = React.useState(false);
@@ -22,9 +22,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" }, getInitialsName(name))
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base", "data-testid": "avatar-p" }, getNameInitials(name))
   );
 };
 

package/dist/esm/components/BaseSnackbar.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { snackbar } from '@tecsinapse/cortex-core';
+
+const BaseSnackbar = forwardRef(
+  (props, ref) => {
+    const { children, show, variants } = props;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+export { BaseSnackbar };

package/dist/esm/components/BreadcrumbItem.js

@@ -16,7 +16,8 @@ const BreadcrumbItem = ({
   ), !isLast ? /* @__PURE__ */ React.createElement(
     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/esm/components/Breadcrumbs.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Card } from './Card.js';
 import { BreadcrumbItem } from './BreadcrumbItem.js';
+import { Card } from './Card.js';
 
 const Breadcrumbs = (props) => {
   const { breadcrumbs, ...rest } = props;

package/dist/esm/components/Button.js

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

package/dist/esm/components/Calendar.js

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

package/dist/esm/components/CalendarCell.js

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

package/dist/esm/components/CalendarGrid.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useCalendarGrid } from '../hooks/useCalendarGrid.js';
+import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
+import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.js';
+
+const CalendarGrid = ({ state }) => {
+  const { gridProps, headerProps, weekDays } = 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, { weekDays })), /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(CalendarGridBodyRows, { state })))
+  );
+};
+
+export { CalendarGrid };

package/dist/esm/components/CalendarGridBodyRows.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CalendarCell } from './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, { key: i, state, date }) : /* @__PURE__ */ React.createElement("td", { key: i });
+  }))));
+};
+
+export { CalendarGridBodyRows };

package/dist/esm/components/CalendarGridHeaderRow.js

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

package/dist/esm/components/CalendarHeader.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { Button } from './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,
+      {
+        onClick: onClickPrevButton,
+        variants: { variant: "text", intent: "secondary", size: "small" },
+        "data-testid": "calendar-header-prev-button"
+      },
+      /* @__PURE__ */ React.createElement(FaChevronLeft, null)
+    ),
+    /* @__PURE__ */ React.createElement("span", { className: "font-bold capitalize" }, title),
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: onClickNextButton,
+        variants: { variant: "text", intent: "secondary", size: "small" },
+        "data-testid": "calendar-header-next-button"
+      },
+      /* @__PURE__ */ React.createElement(FaChevronRight, null)
+    )
+  );
+};
+
+export { CalendarHeader };

package/dist/esm/components/Card.js

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
 import { card } from '@tecsinapse/cortex-core';
+import React, { forwardRef } from 'react';
 
 const Card = forwardRef((props, ref) => {
   const { children, className, ...rest } = props;

package/dist/esm/components/DateField.js

@@ -0,0 +1,23 @@
+import { createCalendar } from '@internationalized/date';
+import React from 'react';
+import { useLocale, useDateField } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
+import { DateSegment } from './DateSegment.js';
+
+const DateField = (props) => {
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    createCalendar,
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = useDateField(
+    { "aria-label": "date-field" },
+    state,
+    ref
+  );
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment, { key: i, segment, state })));
+};
+
+export { DateField };

package/dist/esm/components/DatePickerInput.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { dateToCalendarDate } from './utils.js';
+import { useDatePickerInput } from '../hooks/useDatePickerInput.js';
+import { Calendar } from './Calendar.js';
+import { DateField } from './DateField.js';
+import { DatePickerInputBase } from './DatePickerInputBase.js';
+
+const DatePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+      DateField,
+      {
+        ...fieldProps,
+        onChange: (value2) => {
+          state.setDateValue(value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    Calendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateValue(dateToCalendarDate(value2));
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+export { DatePickerInput };

package/dist/esm/components/DatePickerInputBase.js

@@ -0,0 +1,22 @@
+import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
+import React from 'react';
+import { LiaCalendar } from 'react-icons/lia';
+import { Input } from './Input.js';
+
+const DatePickerInputBase = ({
+  children,
+  variants,
+  label,
+  onClickCalendar
+}) => {
+  return /* @__PURE__ */ React.createElement(Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: inputBox("", label) }, children), /* @__PURE__ */ React.createElement(Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
+    LiaCalendar,
+    {
+      className: "cursor-pointer mt-centi",
+      onClick: onClickCalendar,
+      "data-testid": "date-picker-input-base-calendar"
+    }
+  )));
+};
+
+export { DatePickerInputBase };

package/dist/esm/components/DateRangePickerInput.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { dateToCalendarDate } from './utils.js';
+import { useDateRangePickerInput } from '../hooks/useDateRangePickerInput.js';
+import { DateField } from './DateField.js';
+import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { RangeCalendar } from './RangeCalendar.js';
+
+const DateRangePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
+      DateField,
+      {
+        ...startFieldProps,
+        value: dateToCalendarDate(value?.start),
+        onChange: (value2) => {
+          state.setDate("start", value2);
+          state.close();
+        }
+      }
+    ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
+      DateField,
+      {
+        ...endFieldProps,
+        value: dateToCalendarDate(value?.end),
+        onChange: (value2) => {
+          state.setDate("end", value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    RangeCalendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateRange({
+          start: dateToCalendarDate(value2.start),
+          end: dateToCalendarDate(value2.end)
+        });
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+export { DateRangePickerInput };

package/dist/esm/components/DateSegment.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useDateSegment } from 'react-aria';
+
+const DateSegment = ({ segment, state }) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...segmentProps,
+      ref,
+      className: "focus:outline-none focus:bg-secondary-light"
+    },
+    segment.text
+  );
+};
+
+export { DateSegment };

package/dist/esm/components/DefaultSnack.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BaseSnackbar } from './BaseSnackbar.js';
+import { IoMdInformationCircleOutline, IoMdClose } from 'react-icons/io';
+
+const DefaultSnack = ({
+  text,
+  onDismiss,
+  variants
+}) => /* @__PURE__ */ React.createElement(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(
+  IoMdInformationCircleOutline,
+  {
+    className: "w-[20px] h-[20px] shrink-0",
+    "data-testid": "icon-info"
+  }
+), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
+  IoMdClose,
+  {
+    "data-testid": "icon-close",
+    onClick: onDismiss,
+    size: 24,
+    className: "cursor-pointer w-[20px] h-[20px] shrink-0"
+  }
+)));
+
+export { DefaultSnack };

package/dist/esm/components/Drawer.js

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

package/dist/esm/components/GroupButton.js

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import React from 'react';
+import '../styles/calendar-cell.js';
+import { groupButton } from '../styles/groupButton.js';
+import '../styles/progressBar.js';
+
+const { button, container, active, inactive, firstButton, lastButton } = 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)
+    );
+  }));
+};
+
+export { GroupButton };

package/dist/esm/components/Input.js

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