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

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
     ));

package/dist/esm/components/Modal.js

@@ -3,21 +3,14 @@ import { overlay, modal } from '@tecsinapse/cortex-core';
 
 const Modal = 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: overlay({ show: open }),
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ React.createElement("dialog", { className: modal({ open, className }) }, children)
-  );
+      "data-testid": "overlay",
+      className: overlay({ show: open }),
+      onClick: onClose
+    }
+  ), /* @__PURE__ */ React.createElement("dialog", { "data-testid": "modal", className: modal({ open, className }) }, children));
 });
 
 export { Modal };

package/dist/esm/components/ProgressBar.js

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import React, { useState, useEffect, useCallback } from 'react';
+import { progressBarFilled } from '../styles/progressBar.js';
+import '../styles/groupButton.js';
+
+const ProgressBar = ({
+  segments: _segments = 1,
+  valueMin = 0,
+  valueMax = 100,
+  valueCurrent = 50,
+  intentProgress = "default",
+  animated = true
+}) => {
+  const [displayedValue, setDisplayedValue] = useState(0);
+  const [showAnimation, setShowAnimation] = useState(true);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (valueCurrent < displayedValue) {
+        setShowAnimation(false);
+      }
+      if (animated && valueCurrent > displayedValue) setShowAnimation(true);
+      setDisplayedValue(valueCurrent);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [valueCurrent]);
+  const progressStyle = 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: progressBarFilled({
+            intentProgress,
+            showAnimation
+          })
+        }
+      )
+    );
+  }));
+};
+
+export { ProgressBar };

package/dist/esm/components/SearchInput.js

@@ -11,6 +11,11 @@ import './Tag.js';
 import './Toggle.js';
 import './TextArea.js';
 import '@tecsinapse/cortex-core';
+import 'react-icons/md';
+import 'clsx';
+import '../styles/progressBar.js';
+import '../styles/groupButton.js';
+import './GroupButton.js';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { IoSearchOutline } from 'react-icons/io5';
 import { useDebouncedState } from '../hooks/useDebouncedState.js';

package/dist/esm/components/Skeleton.js

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const Skeleton = ({
+  className,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx("animate-pulse bg-secondary-light", className)
+    },
+    children
+  );
+};
+
+export { Skeleton };

package/dist/esm/components/Table.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { tHead, tRow, tHeadCell, tCell, tFoot, tRoot, hr } from '@tecsinapse/cortex-core';
+import { tHead, tRow, tHeadCell, hr, tCell, tFoot, tRoot } from '@tecsinapse/cortex-core';
 
 const THead = ({
   children,
@@ -16,6 +16,9 @@ const THeadCell = ({
   className,
   ...rest
 }) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), ...rest }, children);
+const TRowHeader = ({
+  children
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
 const TCell = ({
   children,
   className,
@@ -39,6 +42,6 @@ const Hr = ({
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
 
-export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td };
+export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };

package/dist/esm/components/Toggle.js

@@ -1,16 +1,24 @@
-import React, { forwardRef } from 'react';
 import { styleLabelElement, styleInputElement, toggle } from '@tecsinapse/cortex-core';
+import React, { forwardRef } from 'react';
 
 const Toggle = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-x-centi" }, /* @__PURE__ */ React.createElement("label", { className: styleLabelElement() }, /* @__PURE__ */ React.createElement(
-    "input",
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      type: "checkbox",
-      className: styleInputElement(),
-      ref,
-      ...props
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: toggle() })));
+      className: "flex flex-row items-center gap-x-centi",
+      "data-testid": "toggle-div"
+    },
+    /* @__PURE__ */ React.createElement("label", { className: styleLabelElement() }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "checkbox",
+        className: styleInputElement(),
+        ref,
+        "data-testid": "toggle-input",
+        ...props
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: toggle() }))
+  );
 });
 
 export { Toggle };

package/dist/esm/components/utils.js

@@ -0,0 +1,10 @@
+const getNameInitials = (name) => {
+  const nameSplit = name.split(" ");
+  const length = nameSplit.length;
+  if (length > 1) {
+    return `${nameSplit[0][0]}${nameSplit[length - 1][0]}`;
+  }
+  return name[0];
+};
+
+export { getNameInitials };

package/dist/esm/index.js

@@ -9,4 +9,10 @@ export { Snackbar } from './components/Snackbar.js';
 export { Tag } from './components/Tag.js';
 export { Toggle } from './components/Toggle.js';
 export { TextArea } from './components/TextArea.js';
-export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td } from './components/Table.js';
+export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
+export { Drawer } from './components/Drawer.js';
+export { Breadcrumbs } from './components/Breadcrumbs.js';
+export { Avatar } from './components/Avatar.js';
+export { Skeleton } from './components/Skeleton.js';
+export { ProgressBar } from './components/ProgressBar.js';
+export { GroupButton } from './components/GroupButton.js';

package/dist/esm/styles/groupButton.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+const groupButton = 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"
+  }
+});
+
+export { groupButton };

package/dist/esm/styles/progressBar.js

@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+
+const progressBarFilled = 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"
+    }
+  }
+});
+
+export { progressBarFilled };

package/dist/types/components/Avatar.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    name: string;
+}
+export declare const Avatar: ({ src, name, className, ...rest }: AvatarProps) => JSX.Element;
+export {};

package/dist/types/components/BreadcrumbItem.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbType } from '../components';
+export interface BreadcrumbItemProps extends BreadcrumbType {
+    isLast: boolean;
+}
+export declare const BreadcrumbItem: ({ isLast, Component, componentProps, title, }: BreadcrumbItemProps) => JSX.Element;

package/dist/types/components/Breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import React, { ElementType } from 'react';
+export interface BreadcrumbType {
+    title: string;
+    Component: ElementType;
+    componentProps?: any;
+}
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
+    breadcrumbs: BreadcrumbType[];
+}
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;

package/dist/types/components/Card.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface CardProps {
-    children: JSX.Element;
+    children?: React.ReactNode;
 }
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/components/Drawer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    position?: 'left' | 'right';
+    children?: React.ReactNode;
+}
+export declare const Drawer: ({ children, onClose, open, position, }: DrawerProps) => JSX.Element;
+export {};

package/dist/types/components/GroupButton.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface GroupButtonValue<T> {
+    value: T;
+}
+export interface GroupButtonProps<T> {
+    value: T;
+    options: GroupButtonValue<T>[];
+    renderKey: (option?: T) => string | number;
+    renderOption: (option: T) => ReactNode;
+    onChange: (option: T) => void;
+    customStyles?: {
+        active?: string;
+        firstButton?: string;
+        lastButton?: string;
+        inactive?: string;
+    };
+    disableAllOptions?: boolean;
+}
+export declare const GroupButton: <T>(props: GroupButtonProps<T>) => JSX.Element;

package/dist/types/components/Input.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { InputBaseVariants } from '@tecsinapse/cortex-core';
+import React from 'react';
 interface InputPropsBase {
     variants?: InputBaseVariants;
     label?: string;

package/dist/types/components/Modal.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 interface ModalProps {
     open: boolean;
     onClose: () => void;
-    children: JSX.Element;
+    children?: ReactNode;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/components/ProgressBar.d.ts

@@ -0,0 +1,9 @@
+export interface ProgressBarProps {
+    segments?: number;
+    valueMin?: number;
+    valueMax?: number;
+    valueCurrent: number;
+    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error';
+    animated?: boolean;
+}
+export declare const ProgressBar: ({ segments: _segments, valueMin, valueMax, valueCurrent, intentProgress, animated, }: ProgressBarProps) => JSX.Element;

package/dist/types/components/SearchInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SearchInputProps {
     label?: string;
     placeholder?: string;

package/dist/types/components/Select.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CommonProps<T> {
     label: string;
     value: T | undefined;

package/dist/types/components/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import React, { ReactNode } from 'react';
+export declare const Skeleton: ({ className, children, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+}) => JSX.Element;

package/dist/types/components/Table.d.ts

@@ -5,6 +5,7 @@ interface TableCommon {
 export declare const THead: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
 export declare const TRow: ({ children, className, ...rest }: TableCommon & React.HTMLAttributes<HTMLTableRowElement>) => JSX.Element;
 export declare const THeadCell: ({ children, className, ...rest }: TableCommon & ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export declare const TRowHeader: ({ children, }: TableCommon & ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export declare const TCell: ({ children, className, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export declare const TFoot: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
 export declare const Table: ({ children, className, ...rest }: TableCommon & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;

package/dist/types/components/index.d.ts

@@ -10,3 +10,9 @@ export * from './Tag';
 export * from './Toggle';
 export * from './TextArea';
 export * from './Table';
+export * from './Drawer';
+export * from './Breadcrumbs';
+export * from './Avatar';
+export * from './Skeleton';
+export * from './ProgressBar';
+export * from './GroupButton';

package/dist/types/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const getNameInitials: (name: string) => string;

package/dist/types/styles/groupButton.d.ts

@@ -0,0 +1,77 @@
+export declare const groupButton: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            inactive?: import("tailwind-merge").ClassNameValue;
+            firstButton?: import("tailwind-merge").ClassNameValue;
+            lastButton?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            inactive?: import("tailwind-merge").ClassNameValue;
+            firstButton?: import("tailwind-merge").ClassNameValue;
+            lastButton?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string;
+    inactive: string;
+    firstButton: string;
+    lastButton: string;
+    container: string;
+    active: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            inactive?: import("tailwind-merge").ClassNameValue;
+            firstButton?: import("tailwind-merge").ClassNameValue;
+            lastButton?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            inactive?: import("tailwind-merge").ClassNameValue;
+            firstButton?: import("tailwind-merge").ClassNameValue;
+            lastButton?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string;
+    inactive: string;
+    firstButton: string;
+    lastButton: string;
+    container: string;
+    active: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    button: string;
+    inactive: string;
+    firstButton: string;
+    lastButton: string;
+    container: string;
+    active: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            inactive?: import("tailwind-merge").ClassNameValue;
+            firstButton?: import("tailwind-merge").ClassNameValue;
+            lastButton?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;

package/dist/types/styles/index.d.ts

@@ -0,0 +1,2 @@
+export * from './progressBar';
+export * from './groupButton';

package/dist/types/styles/progressBar.d.ts

@@ -0,0 +1,78 @@
+export declare const progressBarFilled: import("tailwind-variants").TVReturnType<{
+    intentProgress: {
+        default: string;
+        error: string;
+        info: string;
+        warning: string;
+        success: string;
+    };
+    showAnimation: {
+        true: string;
+    };
+}, undefined, "h-full first:rounded-l-pill last:rounded-r-pill", import("tailwind-variants/dist/config").TVConfig<{
+    intentProgress: {
+        default: string;
+        error: string;
+        info: string;
+        warning: string;
+        success: string;
+    };
+    showAnimation: {
+        true: string;
+    };
+}, {
+    intentProgress: {
+        default: string;
+        error: string;
+        info: string;
+        warning: string;
+        success: string;
+    };
+    showAnimation: {
+        true: string;
+    };
+}>, {
+    intentProgress: {
+        default: string;
+        error: string;
+        info: string;
+        warning: string;
+        success: string;
+    };
+    showAnimation: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    intentProgress: {
+        default: string;
+        error: string;
+        info: string;
+        warning: string;
+        success: string;
+    };
+    showAnimation: {
+        true: string;
+    };
+}, undefined, "h-full first:rounded-l-pill last:rounded-r-pill", import("tailwind-variants/dist/config").TVConfig<{
+    intentProgress: {
+        default: string;
+        error: string;
+        info: string;
+        warning: string;
+        success: string;
+    };
+    showAnimation: {
+        true: string;
+    };
+}, {
+    intentProgress: {
+        default: string;
+        error: string;
+        info: string;
+        warning: string;
+        success: string;
+    };
+    showAnimation: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/types/tests/Avatar.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Badge.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/BreadcrumbItem.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Breadcrumbs.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Card.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Drawer.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/GroupButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Hint.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Input.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Modal.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/ProgressBar.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Tag.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Toggle.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/utils.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';