@bigbinary/neetoui 6.5.10 → 6.5.11-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "6.5.10",
+  "version": "6.5.11-beta.1",
   "author": "BigBinary",
   "license": "MIT",
   "description": "neetoUI drives the experience at all neeto products",
@@ -15,6 +15,7 @@
   },
   "files": [
     "dist",
+    "types",
     "*.d.ts"
   ],
   "lint-staged": {
@@ -40,14 +41,24 @@
       "types": "./layouts.d.ts"
     },
     "./formik": {
-      "import": "./dist/formik.js",
-      "require": "./dist/cjs/formik.js",
+      "import": "./dist/formik/index.js",
+      "require": "./dist/cjs/formik/index.js",
       "types": "./formik.d.ts"
     },
     "./managers": {
       "import": "./dist/managers.js",
       "require": "./dist/cjs/managers.js",
       "types": "./managers.d.ts"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "require": "./dist/cjs/*.js",
+      "types": "./types/*.d.ts"
+    },
+    "./formik/*": {
+      "import": "./dist/formik/*.js",
+      "require": "./dist/cjs/formik/*.js",
+      "types": "./types/formik/*.d.ts"
     }
   },
   "devDependencies": {
@@ -176,7 +187,18 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "5.3.3",
-    "react-toastify": "8.0.2"
+    "react-toastify": "8.0.2",
+    "framer-motion": "10.16.4",
+    "tippy.js": "6.3.7",
+    "boring-avatars": "^1.7.0",
+    "react-colorful": "^5.6.1",
+    "react-drag-listview": "^2.0.0",
+    "react-resizable": "^3.0.4",
+    "react-select": "5.6.0",
+    "react-time-picker": "^6.5.2",
+    "yup": "0.32.11",
+    "linkifyjs": "^4.1.2",
+    "@wojtekmaj/react-timerange-picker": "^5.5.0"
   },
   "resolutions": {
     "@storybook/addon-essentials/**/glob-parent": "5.1.2",

package/types/Accordion.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface AccordionProps {
+  className?: string;
+  defaultActiveKey?: number;
+  padded?: boolean;
+  style?: "primary" | "secondary";
+}
+
+export interface AccordionItemProps {
+  id?: string;
+  title?: string;
+  isOpen?: boolean;
+  onClick?: () => void;
+  className?: string;
+  titleProps?: React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > & { [key: string]: any };
+  iconProps?: React.SVGProps<SVGSVGElement>;
+}
+
+const Accordion: React.FC<AccordionProps> & {
+  Item: React.FC<AccordionItemProps>;
+};
+export default Accordion;

package/types/ActionDropdown.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { DropdownProps } from "./Dropdown";
+import { ButtonProps } from "./Button";
+
+export interface ActionDropdownProps {
+  label?: string;
+  buttonStyle?: "primary" | "secondary";
+  buttonSize?: "small" | "medium" | "large";
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  buttonProps?: ButtonProps;
+  dropdownProps?: DropdownProps;
+  /** @deprecated Prop deprecated. Use `buttonStyle` prop instead*/
+  style?: "primary" | "secondary";
+  /** @deprecated Prop deprecated. Use `buttonStyle` prop instead*/
+  size?: "small" | "medium" | "large";
+}
+
+const ActionDropdown: React.FC<ActionDropdownProps>;
+export default ActionDropdown;

package/types/Alert.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+export interface AlertProps {
+  size?: "small" | "medium" | "large";
+  isOpen?: boolean;
+  isSubmitting?: boolean;
+  className?: string;
+  closeOnEsc?: boolean;
+  closeButton?: boolean;
+  backdropClassName?: string;
+  closeOnOutsideClick?: boolean;
+  onClose?: () => void;
+  onSubmit?: () => void;
+  title?: string;
+  message?: React.ReactNode;
+  submitButtonLabel?: string;
+  cancelButtonLabel?: string;
+  initialFocusElement?: "cancel" | "submit";
+  hideCancelButton?: boolean;
+}
+
+const Alert: React.FC<AlertProps>;
+export default Alert;

package/types/Avatar.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+
+export type AvatarProps = {
+  size?: "small" | "medium" | "large" | "extraLarge";
+  user?: { name: string; imageUrl: string };
+  status?: "online" | "idle" | "offline";
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+  showTooltip?: boolean;
+  tooltipProps?: TooltipProps;
+  className?: string;
+} & React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLSpanElement>,
+  HTMLSpanElement
+> & { [key: string]: any };
+
+const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/types/Button.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { TooltipProps } from "./Tooltip";
+
+export interface ButtonProps {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  icon?: string | any;
+  iconPosition?: "left" | "right";
+  iconSize?: number;
+  label?: string;
+  loading?: boolean;
+  to?: string;
+  type?: "button" | "reset" | "submit";
+  style?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "danger"
+    | "danger-text"
+    | "text"
+    | "link";
+  fullWidth?: boolean;
+  className?: string;
+  disabled?: boolean;
+  size?: "small" | "medium" | "large";
+  href?: string;
+  tooltipProps?: TooltipProps;
+  children?: string;
+  [key: string]: any;
+}
+
+const Button: React.FC<ButtonProps>;
+export default Button;

package/types/Callout.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+export type CalloutProps = {
+  icon?: React.SVGProps<SVGSVGElement>;
+  style?: "info" | "warning" | "danger" | "success";
+  className?: string;
+} & React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+> & { [key: string]: any };
+
+const Callout: React.FC<CalloutProps>;
+export default Callout;

package/types/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { LabelProps } from "./Label";
+
+export type CheckboxProps = {
+  label?: string;
+  error?: string;
+  className?: string;
+  required?: false;
+  id?: string;
+  labelProps?: LabelProps;
+  children?: string;
+} & React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & { [key: string]: any };
+
+const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/types/ColorPicker.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { DropdownProps } from "./Dropdown";
+
+export interface ColorPickerProps {
+  color: string;
+  size: "small" | "medium" | "large";
+  onChange: (color: string) => void;
+  colorPaletteProps?: {
+    color: { from: string; to: string };
+    colorList: { from: string; to: string }[];
+    onChange: (from: string, to: string) => void;
+  };
+  showEyeDropper?: boolean;
+  showHexValue?: boolean;
+  showTransparencyControl?: boolean;
+  showPicker?: boolean;
+  dropdownProps?: DropdownProps;
+}
+
+const ColorPicker: React.FC<ColorPickerProps>;
+export default ColorPicker;

package/types/DatePicker.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { LabelProps } from "./Label";
+
+export type DatePickerProps = {
+  value: any;
+  defaultValue?: any;
+  className?: string;
+  label?: string;
+  size?: "small" | "medium" | "large";
+  dropdownClassName?: string;
+  dateFormat?: string;
+  timeFormat?: string;
+  onChange?: (date: any, dateString: string) => void;
+  onOk?: () => void;
+  picker?: "date" | "week" | "month" | "quarter" | "year";
+  showTime?: boolean;
+  type?: "range" | "date";
+  nakedInput?: boolean;
+  error?: string;
+  id?: string;
+  disabled?: boolean;
+  labelProps?: LabelProps;
+  allowClear?: boolean;
+  minDate?: Dayjs;
+  maxDate?: Dayjs;
+  [key: string]: any;
+};
+
+const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;

package/types/DateTimePicker.d.ts

@@ -0,0 +1,26 @@
+import { Dayjs } from "dayjs";
+import { LabelProps } from "./Label";
+
+export type DateTimePickerProps = {
+  value?: string | Dayjs;
+  defaultValue?: string | Dayjs;
+  className?: string;
+  label?: string;
+  size?: "small" | "medium" | "large";
+  dropdownClassName?: string;
+  dateFormat?: string;
+  onChange?: (dateTime: Dayjs, changeType: "date" | "time") => void;
+  nakedInput?: boolean;
+  error?: string;
+  id?: string;
+  labelProps?: LabelProps;
+  datePickerProps?: { [key: string]: any };
+  timePickerProps?: { [key: string]: any };
+  onBlur?: (dateTime: Dayjs) => void;
+  [key: string]: any;
+  minDateTime?: Dayjs;
+  maxDateTime?: Dayjs;
+};
+
+const DateTimePicker: React.FC<DateTimePickerProps>;
+export default DateTimePicker;

package/types/Dropdown.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+import { ButtonProps } from "./Button";
+
+export interface MenuItemProps
+  extends React.DetailedHTMLProps<
+    React.LiHTMLAttributes<HTMLLIElement>,
+    HTMLLIElement
+  > {
+  tooltipProps?: TooltipProps;
+}
+
+export interface DropdownProps {
+  icon?: string | any;
+  label?: React.ReactNode;
+  isOpen?: boolean;
+  onClose?: () => void;
+  position?:
+    | "auto"
+    | "auto-start"
+    | "auto-end"
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "left"
+    | "left-start"
+    | "left-end";
+  className?: string;
+  buttonSize?: "small" | "medium" | "large";
+  buttonStyle?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "text"
+    | "danger"
+    | "danger-text"
+    | "link";
+  buttonProps?: ButtonProps;
+  customTarget?: React.ReactNode | (() => React.ReactNode);
+  disabled?: boolean;
+  dropdownProps?: any;
+  closeOnEsc?: boolean;
+  closeOnSelect?: boolean;
+  closeOnOutsideClick?: boolean;
+  dropdownModifiers?: any[];
+  trigger?: "click" | "hover" | "all" | "manual";
+  strategy?: "absolute" | "fixed";
+  onClick?: () => void;
+  /** @deprecated Prop deprecated. Use `dropdownProps` prop instead*/
+  ulProps?: React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLUListElement>,
+    HTMLUListElement
+  > & { [key: string]: any };
+  [key: string]: any;
+}
+
+const Dropdown: React.FC<DropdownProps> & {
+  Menu: React.FC<
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLUListElement>,
+      HTMLUListElement
+    >
+  >;
+  MenuItem: React.FC<MenuItemProps> & { Button: ButtonProps };
+  Divider: React.FC<
+    React.DetailedHTMLProps<
+      React.LiHTMLAttributes<HTMLLIElement>,
+      HTMLLIElement
+    >
+  >;
+};
+export default Dropdown;

package/types/Input.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+
+export interface InputProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  [key: string]: any;
+  size?: "small" | "medium" | "large";
+  label?: string;
+  error?: string;
+  suffix?: React.ReactNode;
+  prefix?: React.ReactNode;
+  disabled?: boolean;
+  helpText?: string;
+  className?: string;
+  nakedInput?: boolean;
+  contentSize?: number;
+  required?: boolean;
+  labelProps?: LabelProps;
+  maxLength?: number;
+  unlimitedChars: boolean;
+  rejectCharsRegex?: RegExp;
+}
+
+const Input: React.ForwardRefExoticComponent<InputProps>;
+export default Input;

package/types/Kbd.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { TooltipProps } from "./Tooltip";
+
+export type KbdProps = {
+  keyName?: string;
+  className?: string;
+  tooltipProps?: TooltipProps;
+};
+
+const Kbd: React.FC<KbdProps>;
+export default Kbd;

package/types/Label.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { TooltipProps } from "./Tooltip";
+
+export type LabelProps = {
+  className?: string;
+  required?: boolean;
+  helpIconProps?: {
+    onClick?: () => void;
+    icon?: any;
+    tooltipProps?: TooltipProps;
+    className?: string;
+  } & React.SVGProps<SVGSVGElement>;
+} & React.DetailedHTMLProps<
+  React.LabelHTMLAttributes<HTMLLabelElement>,
+  HTMLLabelElement
+> & { [key: string]: any };
+
+const Label: React.FC<LabelProps>;
+export default Label;

package/types/Modal.d.ts

@@ -0,0 +1,10 @@
+import { PopupProps, PopupContentProps } from "./Popup";
+
+export type ModalProps = PopupProps & { size?: "small" | "medium" | "large" };
+
+const Modal: React.FC<ModalProps> & {
+  Header: React.FC<PopupContentProps>;
+  Body: React.FC<PopupContentProps>;
+  Footer: React.FC<PopupContentProps>;
+};
+export default Modal;

package/types/MultiEmailInput.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { LabelProps } from "./Label";
+
+export interface MultiEmailInputProps {
+  label?: string;
+  placeholder?: string;
+  helpText?: string;
+  value?: { label: string; value: string; valid: boolean }[];
+  onChange?: (
+    emails: { label: string; value: string; valid: boolean }[]
+  ) => void;
+  error?: string;
+  onBlur?: () => void;
+  filterInvalidEmails?: { label: string };
+  counter?: boolean | { label: string; startFrom: number };
+  disabled?: boolean;
+  required?: boolean;
+  maxHeight?: number;
+  labelProps?: LabelProps;
+  isCreateable?: boolean;
+  [key: string]: any;
+}
+
+const MultiEmailInput: React.FC<MultiEmailInputProps>;
+export default MultiEmailInput;

package/types/NoData.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ButtonProps } from "./Button";
+
+export type NoDataProps = {
+  title?: string;
+  description?: React.ReactNode;
+  helpText?: React.ReactNode;
+  primaryButtonProps?: ButtonProps;
+  secondaryButtonProps?: ButtonProps;
+  className?: string;
+};
+
+const NoData: React.FC<NoDataProps>;
+export default NoData;

package/types/Pagination.d.ts

@@ -0,0 +1,11 @@
+export interface PaginationProps {
+  pageSize: number;
+  count: number;
+  navigate?: (toPage: number) => void;
+  pageNo?: number;
+  siblingCount?: number;
+  className?: string;
+}
+
+const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/types/Pane.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { PopupProps, PopupContentProps } from "./Popup";
+
+export type PaneProps = PopupProps & { size?: "small" | "large" };
+
+const Pane: React.FC<PaneProps> & {
+  Header: React.FC<PopupContentProps>;
+  Body: React.FC<PopupContentProps & { hasFooter?: boolean }>;
+  Footer: React.FC<PopupContentProps>;
+};
+export default Pane;

package/types/Popover.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+
+export interface PopoverProps {
+  content: React.ReactNode;
+  theme?: "dark" | "light";
+  disabled?: boolean;
+  position?:
+    | "auto"
+    | "auto-start"
+    | "auto-end"
+    | "top"
+    | "bottom"
+    | "right"
+    | "left"
+    | "auto"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "right-start"
+    | "right-end"
+    | "left-start"
+    | "left-end";
+  interactive?: boolean;
+  hideAfter?: number;
+  hideOnTargetExit?: boolean;
+  className?: string;
+  [key: string]: any;
+}
+
+const Popover: React.ForwardRefExoticComponent<PopoverProps>;
+export default Popover;

package/types/Popup.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+
+export interface PopupProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  className?: string;
+  closeOnEsc?: boolean;
+  closeButton?: boolean;
+  backdropClassName?: string;
+  closeOnOutsideClick?: boolean;
+  [key: string]: any;
+}
+
+export interface PopupContentProps {
+  className?: string;
+  children?: React.ReactNode;
+}

package/types/Radio.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { LabelProps } from "./Label";
+
+export interface RadioProps {
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  stacked?: boolean;
+  className?: string;
+  containerClassName?: string;
+  error?: string;
+  id?: any;
+  value?: any;
+  labelProps?: LabelProps;
+}
+
+export type RadioItemProps = { label: string } & React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & { [key: string]: any };
+
+const Radio: React.FC<RadioProps> & {
+  Item: React.FC<RadioItemProps>;
+};
+export default Radio;

package/types/Select.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { LabelProps } from "./Label";
+
+export type SelectProps = {
+  size?: "small" | "medium" | "large";
+  label?: string;
+  required?: boolean;
+  error?: string;
+  helpText?: string;
+  className?: string;
+  innerRef?: React.Ref<HTMLSelectElement>;
+  isCreateable?: boolean;
+  strategy?: "default" | "fixed";
+  id?: string;
+  loadOptions?: boolean;
+  labelProps?: LabelProps;
+  optionRemapping?: { label?: string; value?: string };
+  [key: string]: any;
+  fetchMore?: () => void;
+  totalOptionsCount?: number;
+  isAsyncLoadOptionEnabled?: boolean;
+  isMulti?: boolean;
+  addButtonLabel?: string;
+};
+
+const Select: React.ForwardRefExoticComponent<SelectProps>;
+export default Select;

package/types/Slider.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+export type SliderProps = {
+  min?: number;
+  max?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  value?: number | number[];
+};
+
+const Slider: React.ForwardRefExoticComponent<SliderProps>;
+export default Slider;

package/types/Spinner.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export type SpinnerProps = {
+  theme?: "dark" | "light";
+  className?: string;
+};
+
+const Spinner: React.FC<SpinnerProps>;
+export default Spinner;

package/types/Stepper.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+export type StepperProps = {
+  steps: { id: string | number; label: string }[];
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+};
+
+const Stepper: React.FC<StepperProps>;
+export default Stepper;

package/types/Switch.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { LabelProps } from "./Label";
+
+export type SwitchProps = {
+  label?: string;
+  required?: boolean;
+  className?: string;
+  error?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  checked?: boolean;
+  disabled?: boolean;
+  labelProps?: LabelProps;
+  children?: string;
+} & React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & { [key: string]: any };
+
+const Switch: React.ForwardRefExoticComponent<SwitchProps>;
+export default Switch;