@tecsinapse/cortex-react 1.0.2 → 1.2.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 TecSinapse
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/components/Badge.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Badge = React.forwardRef((props, ref) => {
+  const { value, variants, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cortexCore.badge({
+        className: `relative ${variants?.className}`,
+        intent: variants?.intent
+      }),
+      ...rest
+    },
+    value
+  );
+});
+const BadgeAnchor = React.forwardRef((props, ref) => {
+  const { value, variants, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: cortexCore.containerBadge() }, children, /* @__PURE__ */ React.createElement("div", { ref, className: cortexCore.badge(variants), ...rest }, value));
+});
+
+exports.Badge = Badge;
+exports.BadgeAnchor = BadgeAnchor;

package/dist/cjs/components/Button.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+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);
+});
+
+exports.Button = Button;

package/dist/cjs/components/Card.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Card = React.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cortexCore.card({ className }),
+      ref,
+      ...rest
+    },
+    children
+  );
+});
+
+exports.Card = Card;

package/dist/cjs/components/Hint.js

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

package/dist/cjs/components/Input.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+
+const getValidChildren = (children) => {
+  return React.Children.toArray(children).filter(
+    (el) => React.isValidElement(el)
+  );
+};
+const Box = React.forwardRef(
+  ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        id: id ?? name,
+        name,
+        placeholder: placeholder ?? " ",
+        className: clsx.clsx(cortexCore.inputBox(placeholder, label, className)),
+        ...rest,
+        ref
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder })
+      },
+      label
+    ));
+  }
+);
+const Face = React.forwardRef(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = getValidChildren(children).map((el) => {
+      return React.cloneElement(el, { ...el.props, variants });
+    });
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...rest,
+        className: clsx.clsx(cortexCore.input(variants), className),
+        id: "input-face",
+        ref
+      },
+      clones
+    );
+  }
+);
+const Root = React.forwardRef(
+  ({ variants, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ...rest, ref }));
+  }
+);
+const Left = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "mr-2.5"), ...rest, ref }, children);
+  }
+);
+const Right = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "ml-2.5"), ...rest, ref }, children);
+  }
+);
+const Input = {
+  Root,
+  Face,
+  Box,
+  Left,
+  Right
+};
+
+exports.Box = Box;
+exports.Face = Face;
+exports.Input = Input;
+exports.Left = Left;
+exports.Right = Right;
+exports.Root = Root;

package/dist/cjs/components/Modal.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Modal = React.forwardRef((props, ref) => {
+  const { open, onClose, children, className } = props;
+  return /* @__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)
+  );
+});
+
+exports.Modal = Modal;

package/dist/cjs/components/SearchInput.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var React = require('react');
+require('./Badge.js');
+var Button = require('./Button.js');
+require('./Card.js');
+require('./Hint.js');
+var Input = require('./Input.js');
+require('./Modal.js');
+require('./Select.js');
+require('./Snackbar.js');
+require('./Tag.js');
+require('./Toggle.js');
+require('./TextArea.js');
+require('@tecsinapse/cortex-core');
+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";
+const SearchInput = ({
+  label,
+  placeholder,
+  isSubmitting = false,
+  onChange,
+  onClick,
+  BOUNCE_TIMEOUT = 1e3
+}) => {
+  const [bouncedText, setBouncedText] = React.useState("");
+  const [searchInput, setSearchInput] = useDebouncedState.useDebouncedState(
+    "",
+    setBouncedText,
+    BOUNCE_TIMEOUT
+  );
+  React.useEffect(() => {
+    if (onChange) {
+      onChange(bouncedText);
+    }
+  }, [bouncedText]);
+  const handleEnterKey = (e) => {
+    if (e.key === "Enter" && onClick && 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(
+    Input.Input.Box,
+    {
+      placeholder,
+      label,
+      onChange: (e) => setSearchInput(e.target.value),
+      onKeyDown: handleEnterKey,
+      disabled: isSubmitting
+    }
+  )), onClick && /* @__PURE__ */ React.createElement(
+    Button.Button,
+    {
+      variants: {
+        intent: "primary",
+        size: "square",
+        className: "h-11"
+      },
+      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)
+  ));
+};
+
+module.exports = SearchInput;

package/dist/cjs/components/Select.js

@@ -0,0 +1,101 @@
+'use strict';
+
+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 SearchInput = require('./SearchInput.js');
+
+const { button, dropdown, groupedTitle, containerGrouped, hintBody } = cortexCore.selectVariants();
+const Select = (props) => {
+  const {
+    label,
+    keyExtractor,
+    labelExtractor,
+    options,
+    value,
+    onSelect,
+    onSearch,
+    disabled,
+    grouped,
+    groupedLabelExtractor,
+    hint,
+    placeholderSearchInput,
+    variant = "default"
+  } = props;
+  const [open, setOpen] = React.useState(false);
+  const placeholder = React.useMemo(
+    () => value ? labelExtractor(value) : label,
+    [label, labelExtractor, value]
+  );
+  const ref = React.useRef(null);
+  const handleClickOutside = React.useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOpen(false);
+    }
+  }, []);
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen(false);
+    },
+    [onSelect]
+  );
+  React.useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+  const Option = ({ option }) => /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => handleSelect(option),
+      className: cortexCore.option(),
+      role: "option"
+    },
+    labelExtractor(option)
+  );
+  const GroupedOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, [...options2 ?? []].map(([key, value2]) => /* @__PURE__ */ React.createElement("div", { key, className: containerGrouped() }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value2.map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })))));
+  const DefaultOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, (options2 ?? []).map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })));
+  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button({ disabled, intent: variant }),
+      onClick: () => setOpen((prevState) => !prevState),
+      disabled
+    },
+    /* @__PURE__ */ React.createElement("span", null, placeholder),
+    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
+  ), /* @__PURE__ */ React.createElement(
+    "ul",
+    {
+      role: "select",
+      className: dropdown({
+        open
+      })
+    },
+    onSearch ? /* @__PURE__ */ React.createElement("div", { className: "m-mili" }, /* @__PURE__ */ React.createElement(
+      SearchInput,
+      {
+        placeholder: placeholderSearchInput,
+        onChange: onSearch
+      }
+    )) : /* @__PURE__ */ React.createElement(React.Fragment, null),
+    grouped ? /* @__PURE__ */ React.createElement(GroupedOptions, { options }) : /* @__PURE__ */ React.createElement(DefaultOptions, { options })
+  ), hint && /* @__PURE__ */ React.createElement(
+    Hint.Hint,
+    {
+      variants: {
+        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))
+  ));
+};
+
+exports.Select = Select;
+exports.default = Select;

package/dist/cjs/components/Snackbar.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Snackbar = 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
+    },
+    children
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+});
+
+exports.Snackbar = Snackbar;

package/dist/cjs/components/Table.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const THead = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("thead", { className: cortexCore.tHead({ className }), ...rest }, children);
+const TRow = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow({ className }), ...rest }, children);
+const THeadCell = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), ...rest }, children);
+const TCell = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("td", { className: cortexCore.tCell({ className }), ...rest }, children);
+const TFoot = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("tfoot", { className: cortexCore.tFoot({ className }), ...rest }, children);
+const Table = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("table", { className: cortexCore.tRoot({ className }), ...rest }, children);
+const Hr = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr({ className }), ...rest }, children);
+const Td = ({
+  children,
+  ...rest
+}) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
+
+exports.Hr = Hr;
+exports.TCell = TCell;
+exports.TFoot = TFoot;
+exports.THead = THead;
+exports.THeadCell = THeadCell;
+exports.TRow = TRow;
+exports.Table = Table;
+exports.Td = Td;

package/dist/cjs/components/Tag.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Tag = React.forwardRef((props, ref) => {
+  const { label, variants } = props;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cortexCore.tag(variants),
+      ref
+    },
+    /* @__PURE__ */ React.createElement("p", null, label)
+  );
+});
+
+exports.Tag = Tag;

package/dist/cjs/components/TextArea.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+
+const getValidChildren = (children) => {
+  return React.Children.toArray(children).filter(
+    (el) => React.isValidElement(el)
+  );
+};
+const Box = React.forwardRef(
+  ({ id, name, variants, label, placeholder, rows, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
+      "textarea",
+      {
+        ref,
+        id: id ?? name,
+        name,
+        placeholder: placeholder ?? " ",
+        className: clsx.clsx(
+          cortexCore.inputBox(placeholder, label, className),
+          "resize-none mt-mili"
+        ),
+        rows,
+        ...rest
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: cortexCore.labelStyle({
+          intent: variants?.intent,
+          placeholder
+        })
+      },
+      label
+    ));
+  }
+);
+const Face = React.forwardRef(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = getValidChildren(children).map((el) => {
+      return React.cloneElement(el, { ...el.props, variants });
+    });
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: clsx.clsx(cortexCore.input(variants), className),
+        id: "textarea-face",
+        ...rest
+      },
+      clones
+    );
+  }
+);
+const Root = React.forwardRef(
+  ({ variants, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ref, ...rest }));
+  }
+);
+const Left = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "mr-2.5"), ...rest, ref }, children);
+  }
+);
+const Right = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "ml-2.5"), ...rest, ref }, children);
+  }
+);
+const TextArea = {
+  Root,
+  Face,
+  Box,
+  Left,
+  Right
+};
+
+exports.TextArea = TextArea;

package/dist/cjs/components/Toggle.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Toggle = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-x-centi" }, /* @__PURE__ */ React.createElement("label", { className: cortexCore.styleLabelElement() }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      className: cortexCore.styleInputElement(),
+      ref,
+      ...props
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: cortexCore.toggle() })));
+});
+
+exports.Toggle = Toggle;

package/dist/cjs/hooks/useDebouncedState.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
+  const timeoutId = React.useRef();
+  const [state, setState] = React.useState(initialState);
+  React.useEffect(() => {
+    if (timeoutId.current) clearTimeout(timeoutId.current);
+    if (timeoutCallback)
+      timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
+  }, [state]);
+  return [state, setState];
+}
+
+exports.useDebouncedState = useDebouncedState;

package/dist/cjs/index.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var Badge = require('./components/Badge.js');
+var Button = require('./components/Button.js');
+var Card = require('./components/Card.js');
+var Hint = require('./components/Hint.js');
+var Input = require('./components/Input.js');
+var Modal = require('./components/Modal.js');
+var Select = require('./components/Select.js');
+var Snackbar = require('./components/Snackbar.js');
+var Tag = require('./components/Tag.js');
+var Toggle = require('./components/Toggle.js');
+var TextArea = require('./components/TextArea.js');
+var Table = require('./components/Table.js');
+
+
+
+exports.Badge = Badge.Badge;
+exports.BadgeAnchor = Badge.BadgeAnchor;
+exports.Button = Button.Button;
+exports.Card = Card.Card;
+exports.Hint = Hint.Hint;
+exports.Box = Input.Box;
+exports.Face = Input.Face;
+exports.Input = Input.Input;
+exports.Left = Input.Left;
+exports.Right = Input.Right;
+exports.Root = Input.Root;
+exports.Modal = Modal.Modal;
+exports.Select = Select.Select;
+exports.Snackbar = Snackbar.Snackbar;
+exports.Tag = Tag.Tag;
+exports.Toggle = Toggle.Toggle;
+exports.TextArea = TextArea.TextArea;
+exports.Hr = Table.Hr;
+exports.TCell = Table.TCell;
+exports.TFoot = Table.TFoot;
+exports.THead = Table.THead;
+exports.THeadCell = Table.THeadCell;
+exports.TRow = Table.TRow;
+exports.Table = Table.Table;
+exports.Td = Table.Td;

package/dist/esm/components/Badge.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import { badge, containerBadge } from '@tecsinapse/cortex-core';
+
+const Badge = forwardRef((props, ref) => {
+  const { value, variants, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: badge({
+        className: `relative ${variants?.className}`,
+        intent: variants?.intent
+      }),
+      ...rest
+    },
+    value
+  );
+});
+const BadgeAnchor = forwardRef((props, ref) => {
+  const { value, variants, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: containerBadge() }, children, /* @__PURE__ */ React.createElement("div", { ref, className: badge(variants), ...rest }, value));
+});
+
+export { Badge, BadgeAnchor };

package/dist/esm/components/Button.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+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);
+});
+
+export { Button };