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

package/dist/cjs/components/SearchInput.js

@@ -1,83 +0,0 @@
-'use strict';
-
-var React = require('react');
-require('clsx');
-require('@internationalized/date');
-require('./Badge.js');
-require('./BaseSnackbar.js');
-require('react-icons/md');
-require('./Card.js');
-var Button = require('./Button.js');
-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/lia');
-var Input = require('./Input.js');
-require('react-icons/io');
-require('./GroupButton.js');
-require('./Hint.js');
-require('./Modal.js');
-require('../styles/calendar-cell.js');
-require('../styles/groupButton.js');
-require('../styles/progressBar.js');
-require('./Select.js');
-require('./Tag.js');
-require('./TextArea.js');
-require('./Toggle.js');
-var ai = require('react-icons/ai');
-var io5 = require('react-icons/io5');
-
-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, { "data-testid": "icon-search-left" })), /* @__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, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-button" })
-  ));
-};
-
-module.exports = SearchInput;

package/dist/cjs/components/Select.js

@@ -1,101 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
-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();
-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", { "data-testid": "select-placeholder" }, 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, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
-  ));
-};
-
-exports.Select = Select;
-exports.default = Select;

package/dist/esm/components/Input.js

@@ -1,74 +0,0 @@
-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(
-    (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(inputBox(placeholder, label, className)),
-        ...rest,
-        ref,
-        "data-testid": "input-input"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "label",
-      {
-        htmlFor: id ?? name,
-        className: labelStyle({ intent: variants?.intent, placeholder }),
-        "data-testid": "input-label"
-      },
-      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(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(className, "mr-2.5"), ...rest, ref }, children);
-  }
-);
-const Right = React.forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
-  }
-);
-const Input = {
-  Root,
-  Face,
-  Box,
-  Left,
-  Right
-};
-
-export { Box, Face, Input, Left, Right, Root };

package/dist/esm/components/SearchInput.js

@@ -1,81 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import 'clsx';
-import '@internationalized/date';
-import './Badge.js';
-import './BaseSnackbar.js';
-import 'react-icons/md';
-import './Card.js';
-import { Button } from './Button.js';
-import 'react-aria';
-import 'react-stately';
-import { useDebouncedState } from '../hooks/useDebouncedState.js';
-import './CalendarCell.js';
-import '@tecsinapse/cortex-core';
-import 'react-icons/fa';
-import 'react-icons/lia';
-import { Input } from './Input.js';
-import 'react-icons/io';
-import './GroupButton.js';
-import './Hint.js';
-import './Modal.js';
-import '../styles/calendar-cell.js';
-import '../styles/groupButton.js';
-import '../styles/progressBar.js';
-import './Select.js';
-import './Tag.js';
-import './TextArea.js';
-import './Toggle.js';
-import { AiOutlineLoading } from 'react-icons/ai';
-import { IoSearchOutline } from 'react-icons/io5';
-
-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] = useState("");
-  const [searchInput, setSearchInput] = useDebouncedState(
-    "",
-    setBouncedText,
-    BOUNCE_TIMEOUT
-  );
-  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.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
-    Input.Box,
-    {
-      placeholder,
-      label,
-      onChange: (e) => setSearchInput(e.target.value),
-      onKeyDown: handleEnterKey,
-      disabled: isSubmitting
-    }
-  )), onClick && /* @__PURE__ */ React.createElement(
-    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(AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-button" })
-  ));
-};
-
-export { SearchInput as default };

package/dist/esm/components/Select.js

@@ -1,96 +0,0 @@
-import { selectVariants, option } from '@tecsinapse/cortex-core';
-import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
-import { IoIosCloseCircleOutline } from 'react-icons/io';
-import { IoChevronDownOutline } from 'react-icons/io5';
-import { Hint } from './Hint.js';
-import SearchInput from './SearchInput.js';
-
-const { button, dropdown, groupedTitle, containerGrouped, hintBody } = selectVariants();
-const Select = (props) => {
-  const {
-    label,
-    keyExtractor,
-    labelExtractor,
-    options,
-    value,
-    onSelect,
-    onSearch,
-    disabled,
-    grouped,
-    groupedLabelExtractor,
-    hint,
-    placeholderSearchInput,
-    variant = "default"
-  } = props;
-  const [open, setOpen] = useState(false);
-  const placeholder = useMemo(
-    () => value ? labelExtractor(value) : label,
-    [label, labelExtractor, value]
-  );
-  const ref = useRef(null);
-  const handleClickOutside = useCallback((event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setOpen(false);
-    }
-  }, []);
-  const handleSelect = useCallback(
-    (option) => {
-      onSelect(option);
-      setOpen(false);
-    },
-    [onSelect]
-  );
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [handleClickOutside]);
-  const Option = ({ option: option$1 }) => /* @__PURE__ */ React.createElement(
-    "li",
-    {
-      onClick: () => handleSelect(option$1),
-      className: option(),
-      role: "option"
-    },
-    labelExtractor(option$1)
-  );
-  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", { "data-testid": "select-placeholder" }, placeholder),
-    /* @__PURE__ */ React.createElement(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,
-    {
-      variants: {
-        intent: variant
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
-  ));
-};
-
-export { Select, Select as default };

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

@@ -1,34 +0,0 @@
-import { InputBaseVariants } from '@tecsinapse/cortex-core';
-import React from 'react';
-export interface InputPropsBase {
-    variants?: InputBaseVariants;
-    label?: string;
-}
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, InputPropsBase {
-}
-export declare const Box: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-type DivBaseProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Face: React.ForwardRefExoticComponent<DivBaseProps & Pick<InputPropsBase, "variants"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Root: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export declare const Left: React.ForwardRefExoticComponent<DivBaseProps & {
-    children: React.ReactNode;
-    className?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const Right: React.ForwardRefExoticComponent<DivBaseProps & {
-    children: React.ReactNode;
-    className?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const Input: {
-    Root: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-    Face: React.ForwardRefExoticComponent<DivBaseProps & Pick<InputPropsBase, "variants"> & React.RefAttributes<HTMLDivElement>>;
-    Box: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-    Left: React.ForwardRefExoticComponent<DivBaseProps & {
-        children: React.ReactNode;
-        className?: string | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Right: React.ForwardRefExoticComponent<DivBaseProps & {
-        children: React.ReactNode;
-        className?: string | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
-export {};

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

@@ -1,27 +0,0 @@
-interface CommonProps<T> {
-    label: string;
-    value: T | undefined;
-    onSelect: (value: T) => void;
-    keyExtractor: (value: T) => string;
-    labelExtractor: (value: T) => string;
-    onSearch?: (search: string) => void;
-    disabled?: boolean;
-    grouped?: boolean;
-    variant?: 'error' | 'default';
-    hint?: string;
-    placeholderSearchInput?: string;
-}
-interface GroupedProps<T> {
-    options?: Map<string, T[]>;
-    groupedLabelExtractor: (value: string) => string;
-    grouped: true;
-}
-interface DefaultProps<T> {
-    options?: T[];
-    groupedLabelExtractor?: never;
-    grouped?: never;
-}
-type ConditionalProps<T> = GroupedProps<T> | DefaultProps<T>;
-type SelectProps<T> = CommonProps<T> & ConditionalProps<T>;
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
-export default Select;