@geoinsight/react-components 1.0.7 → 1.1.0

package/dist/cjs/components/button/index.d.ts

@@ -0,0 +1,9 @@
+import { ButtonAsButton, ButtonAsLink } from "./index.types";
+import "./index.css";
+import { ReactNode } from "react";
+export declare const Anchor: ({ Custom, children, ...rest }: {
+    Custom?: import("react").ComponentClass<any, any> | undefined;
+    children?: ReactNode[] | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function Button({ children, className, icon, isNewWindow, mode, size, as, CustomAnchor, ...rest }: ButtonAsButton | ButtonAsLink): JSX.Element;
+export default Button;

package/dist/cjs/components/button/index.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { Button } from "./index";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const ButtonPrimaryMedium: Story;
+export declare const ButtonPrimaryLarge: Story;
+export declare const ButtonPrimarySmall: Story;
+export declare const ButtonPrimaryDisabled: Story;
+export declare const ButtonPrimaryWithIcon: Story;
+export declare const ButtonSecondary: Story;
+export declare const ButtonSecondaryWithIcon: Story;
+export declare const ButtonSecondaryDisabled: Story;
+export declare const ButtonIcon: Story;
+export declare const LinkPrimary: Story;
+export declare const LinkSecondary: Story;
+export declare const LinkIcon: Story;
+export declare const LinkOutsideButton: Story;
+export declare const LinkOutsideButtonAsPureLink: Story;

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+type Mode = "primary" | "secondary" | "icon";
+type Size = "small" | "medium" | "large";
+export type ButtonAsButton = Base & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Base> & {
+    as?: "button";
+};
+export type ButtonAsLink = Base & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof Base> & {
+    as?: "link";
+};
+export interface Base {
+    /**
+     * What to put inside the button (string or html elements)
+     */
+    children?: JSX.Element | string;
+    /**
+     * Custom css class name
+     */
+    className?: string;
+    /**
+     * If you want to add an icon image next to the children. Needs to be an react html element.
+     */
+    icon?: JSX.Element;
+    /**
+     * If you want to open a new window on the browser when you click the button. Only applies to html anchor elements.
+     */
+    isNewWindow?: boolean;
+    /**
+     * Css mode used to style the button.
+     */
+    mode?: Mode;
+    /**
+     * Button size.
+     */
+    size?: Size;
+    /**
+     * Button type.
+     */
+    as?: "button" | "link";
+    /**
+     * Anchor for the button to follow.
+     */
+    CustomAnchor?: React.ComponentClass<any>;
+    /**
+     * Custom background color for storybook.
+     */
+    backgroundColor?: string;
+    /** Link to url */
+    link?: string;
+}
+export {};

package/dist/cjs/components/form/form-input.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+import { FormInputs } from "./index.types";
+export declare function FormInput({ name, isRequired, error, defaultValue, ...rest }: FormInputs): import("react/jsx-runtime").JSX.Element;
+export default FormInput;

package/dist/cjs/components/form/form-select.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+import { FormSelect as FormSelectProps } from "./index.types";
+export declare function FormSelect({ name, isRequired, error, fieldsToReset, label, ...rest }: FormSelectProps): import("react/jsx-runtime").JSX.Element;
+export default FormSelect;

package/dist/cjs/components/form/form-text-area.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+import { FormInputs } from "./index.types";
+export declare function FormTextArea({ name, isRequired, error, ...rest }: FormInputs): import("react/jsx-runtime").JSX.Element;
+export default FormTextArea;

package/dist/cjs/components/form/index.d.ts

@@ -0,0 +1,4 @@
+import { Form as FormProps } from "./index.types";
+import "./index.css";
+export declare function Form({ children, onSubmit, submitButton, initialState, backgroundColor, ...rest }: FormProps): import("react/jsx-runtime").JSX.Element;
+export default Form;

package/dist/cjs/components/form/index.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Form } from "./index";
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const InsertForm: Story;
+export declare const UpdateFormWithFullInitialState: Story;
+export declare const OnlyInput: Story;
+export declare const OnlyTextArea: Story;
+export declare const OnlySelectDifferentButton: Story;

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

@@ -0,0 +1,72 @@
+import { Dispatch, JSXElementConstructor, ReactElement, ReactNode, SetStateAction } from "react";
+import { FieldError, FieldErrorsImpl, FieldValues, Merge, UseFormReturn } from "react-hook-form";
+import { Input } from "../input/index.types";
+import { TextArea } from "../text-area/index.types";
+export interface Form {
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+    /**
+     * In case the form has children to pass.
+     */
+    children?: ReactNode | ReactNode[];
+    /**
+     * Function that submits the form
+     */
+    onSubmit: (data: FieldValues, methods: UseFormReturn, setResult: SetResult) => void;
+    /**
+     * Text that goes on the submit form button.
+     */
+    submitButton?: {
+        label: string;
+    };
+    /**
+     * Initial state of the form, values that are defaults. Ex: name: "Test", type: "Test Type", subject: "Test Subject", [type]: "Test Type II",
+     */
+    initialState?: {
+        defaultValues?: {
+            name?: string;
+            type?: string;
+            subject?: string;
+            customValues?: {
+                [key: string]: string;
+            };
+        };
+    };
+    /**
+     * Custom background color if needed.
+     */
+    backgroundColor?: string;
+}
+export interface ReactNodeControlled extends ReactElement<any, string | JSXElementConstructor<any>> {
+    props: ControlledInput;
+}
+export type ControlledInput = Input & TextArea & {
+    name: string;
+    error: string;
+};
+export type SetResult = Dispatch<SetStateAction<{
+    message?: string;
+    isSuccess: boolean;
+}>>;
+export interface FormInputs extends Input {
+    name: string;
+    isRequired?: boolean;
+    error?: {
+        message?: string | false | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
+        is?: boolean;
+    };
+}
+export interface FormSelect {
+    name: string;
+    isRequired?: boolean;
+    label: string;
+    options: string[];
+    error?: {
+        message?: string | false | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
+        is?: boolean;
+    };
+    fieldsToReset?: string[];
+    handleSelect: Function;
+}

package/dist/cjs/components/input/index.d.ts

@@ -0,0 +1,4 @@
+import { Input as InputProps } from "./index.types";
+import "./index.css";
+export declare function Input({ inputClassName, classNameGroup, error, inputRef, styleGroup, placeholder, label, labelClassName, icon, isRequired, backgroundColor, ...rest }: InputProps): import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/cjs/components/input/index.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./index";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Primary: Story;
+export declare const Error: Story;
+export declare const Search: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelSpecialClass: Story;
+export declare const WithCustomClassName: Story;
+export declare const CustomBackgroundColor: Story;

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

@@ -0,0 +1,56 @@
+import { dataTheme } from "data-theme";
+import { CSSProperties, ReactNode, Ref } from "react";
+import { FieldError, FieldErrorsImpl, Merge } from "react-hook-form";
+export interface Input extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**Placeholder text for the input */
+    placeholder: string;
+    /**
+     * Custom css class name.
+     */
+    inputClassName?: string;
+    /**
+     * Custom css class name for group wrapper.
+     */
+    classNameGroup?: string;
+    /**
+     * Data theme for the html. `${themes}`
+     */
+    paletteTheme?: dataTheme;
+    /**
+     * Error message to show when input has an error.
+     */
+    error?: {
+        message?: string | false | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
+        is?: boolean;
+    };
+    /**
+     * Ref react element to use
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Style input group wrapper
+     */
+    styleGroup?: CSSProperties;
+    /**
+     * Sets if input is required or not
+     */
+    isRequired?: boolean;
+    /**
+     * Add a label to the input
+     */
+    label?: string;
+    /**
+     * Styles the label of the input
+     */
+    labelClassName?: string;
+    /**
+     * Add an icon to the right or the left of the input
+     */
+    icon?: {
+        className?: string;
+        element?: ReactNode;
+        position?: "right" | "left";
+    };
+    /** Add custom background color for the input */
+    backgroundColor?: string;
+}

package/dist/cjs/components/loading/index.d.ts

@@ -0,0 +1,4 @@
+import { Loading as LoadingProps } from "./index.types";
+import "./index.css";
+export declare function Loading({ img, children }: LoadingProps): import("react/jsx-runtime").JSX.Element;
+export default Loading;

package/dist/cjs/components/loading/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Loading } from "./index";
+declare const meta: Meta<typeof Loading>;
+export default meta;
+type Story = StoryObj<typeof Loading>;
+export declare const Primary: Story;

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface Loading {
+    /**
+     * Either pass an image or gif or nothing at all. Passing an empty string will break the component.
+     */
+    img?: string;
+    /**
+     * Message that its sent: string or number
+     */
+    children?: React.ReactNode;
+}

package/dist/cjs/components/menu/index.d.ts

@@ -0,0 +1,11 @@
+import { MenuButton } from "./menu-button";
+import { MenuContent } from "./menu-content";
+import { MenuItem } from "./menu-item";
+import { MenuRoot } from "./menu-root";
+export declare const Menu: {
+    Root: typeof MenuRoot;
+    Item: typeof MenuItem;
+    Button: typeof MenuButton;
+    Content: typeof MenuContent;
+};
+export default Menu;

package/dist/cjs/components/menu/index.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Menu from ".";
+declare const meta: Meta<typeof Menu>;
+type Story = StoryObj<typeof Menu>;
+export declare const PrimaryOpenByDefault: Story;
+export declare const SecondaryClosedByDefault: Story;
+export default meta;

package/dist/cjs/components/menu/menu-button.d.ts

@@ -0,0 +1,21 @@
+/** React */
+import React, { HtmlHTMLAttributes, ReactNode } from "react";
+/** CSS */
+import "./index.css";
+/** Props */
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+    anchor?: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        Custom?: React.ComponentClass<any>;
+    };
+    children: ReactNode;
+    buttonClassName?: string;
+    nested?: boolean;
+    subnested?: boolean;
+    dropdown?: boolean;
+    isLink?: boolean;
+    isSelected?: boolean;
+    handleCallbackClick?: () => void;
+    "data-menu-id"?: string;
+};
+export declare function MenuButton({ anchor, children, buttonClassName, nested, subnested, dropdown, isLink, isSelected, handleCallbackClick, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/menu/menu-content.d.ts

@@ -0,0 +1,8 @@
+/** React */
+import { HTMLAttributes } from "react";
+/** Props */
+type Props = HTMLAttributes<HTMLDivElement> & {
+    "data-menu-id"?: string | undefined;
+};
+export declare function MenuContent({ children, ...props }: Props): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/cjs/components/menu/menu-item.d.ts

@@ -0,0 +1,10 @@
+/** React */
+import { HtmlHTMLAttributes, ReactNode } from "react";
+/** CSS */
+import "./index.css";
+/** Props */
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+};
+export declare function MenuItem({ children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/menu/menu-root.d.ts

@@ -0,0 +1,21 @@
+/** React */
+import React, { ReactNode } from "react";
+/** Types */
+type Item = {
+    id: string;
+    isExpanded: boolean;
+};
+/** Context type */
+type MenuContextType = {
+    items: Record<string, Item>;
+    addItem: (item: Item) => void;
+    toggle: (id: string) => void;
+};
+/** Props */
+type MenuRootProps = {
+    children: ReactNode;
+    isOpenByDefault?: true;
+};
+export declare function MenuRoot({ children, isOpenByDefault }: MenuRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function useMenu(): React.Context<MenuContextType>;
+export {};

package/dist/cjs/components/menu/menu-utils.d.ts

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

package/dist/cjs/components/menu/menu-wrapper.d.ts

@@ -0,0 +1,10 @@
+/** React */
+import { ReactNode } from "react";
+/** CSS */
+import "./index.css";
+/** Props */
+type MenuWrapperProps = {
+    children: ReactNode;
+};
+export declare function MenuWrapper({ children }: MenuWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/modal/index.d.ts

@@ -0,0 +1,4 @@
+import { Modal as ModalProps } from "./index.types";
+import "./index.css";
+export declare function Modal({ className, modalref, children, title, subtitle, footer, hasOverlay, hasCloseButton, handleClose, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/cjs/components/modal/index.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Modal } from "./index";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const PrimaryWithOverlay: Story;
+export declare const TitleAndSubtitle: Story;
+export declare const WithoutOverlay: Story;
+export declare const WithFooter: Story;
+export declare const WithFooterAndSubtitle: Story;
+export declare const WithoutCloseButton: Story;

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

@@ -0,0 +1,39 @@
+import React from "react";
+export interface Modal {
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
+    /**
+     * Modal footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * Close click function
+     */
+    handleClose?: any;
+    /**
+     * Modal close button
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Overlay div
+     */
+    hasOverlay?: boolean;
+    /**
+     * Modal body ref
+     */
+    modalref?: React.LegacyRef<HTMLDivElement>;
+    /**
+     * Subtitle of the modal
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Title of the modal
+     */
+    title?: React.ReactNode;
+}

package/dist/cjs/components/range/hooks.d.ts

@@ -0,0 +1,34 @@
+import { MutableRefObject } from "react";
+/** Props */
+type Props = {
+    allPositions?: number[];
+    handlePosition: (pixelPosition: number, thumbPosition: number, index: number, isHandleSelected: boolean) => void;
+    handleOverContent: (value: string | number | undefined) => void;
+    values: string[] | number[];
+};
+type TimerProps = Props & {
+    indexPosition: number;
+};
+type ThumbProps = Props & {
+    panelRef: MutableRefObject<null>;
+};
+export declare function usePositions(panelRef: MutableRefObject<null>): {
+    panelRef: MutableRefObject<null>;
+    allPositions: number[] | undefined;
+    setAllPositions: import("react").Dispatch<import("react").SetStateAction<number[] | undefined>>;
+    pixelPosition: string | undefined;
+    setPixelPosition: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    thumbPosition: string | undefined;
+    setThumbPosition: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+};
+export declare function getThumbBounds(): DOMRect;
+export declare function useTimer({ allPositions, indexPosition, handlePosition, handleOverContent, values, }: TimerProps): {
+    isPlay: boolean;
+    setIsPlay: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handlePlay: () => void;
+    handleStop: () => void;
+};
+export declare function useThumb({ allPositions, panelRef, handlePosition, handleOverContent, values, }: ThumbProps): {
+    handleDownThumb: () => void;
+};
+export {};

package/dist/cjs/components/range/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+import { Range as RangeProps } from "./index.types";
+export declare function Range({ period, values, handleSelected }: RangeProps): import("react/jsx-runtime").JSX.Element;
+export default Range;

package/dist/cjs/components/range/index.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { Range } from "./index";
+declare const meta: Meta<typeof Range>;
+export default meta;
+type Story = StoryObj<typeof Range>;
+export declare const RangeMonths: Story;
+export declare const RangeTimestamps: Story;
+export declare const RangeTimestampsPeriod: Story;
+export declare const RangeUseCase: Story;

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

@@ -0,0 +1,18 @@
+export interface Range {
+    /**
+     * Function that handles any external logic
+     */
+    handleSelected?: (obj: {
+        value?: string | number;
+        index: number;
+        position: number;
+    }) => void;
+    /**
+     * Period that seperates the ticks
+     */
+    period?: number;
+    /**
+     * Values that populate the range
+     */
+    values: string[] | number[];
+}

package/dist/cjs/components/range/range-content.d.ts

@@ -0,0 +1,16 @@
+/** React */
+import { HtmlHTMLAttributes } from "react";
+/** CSS */
+import "./index.css";
+/** Props */
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+    period?: number;
+    values: string[] | number[];
+    allPositions?: number[];
+    handlePosition: (pixelPosition: number, thumbPosition: number, index: number, isHandleSelected?: boolean) => void;
+    handleOverContent: (value: string | number | undefined) => void;
+    handleOutContent: () => void;
+    over: string | number | undefined;
+};
+export declare function RangeContent({ period, values, allPositions, handlePosition, handleOverContent, handleOutContent, over, }: Props): import("react/jsx-runtime").JSX.Element[];
+export {};

package/dist/cjs/components/range/range-controls.d.ts

@@ -0,0 +1,13 @@
+/** React */
+import { HtmlHTMLAttributes } from "react";
+/** CSS */
+import "./index.css";
+/** Props */
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+    indexPosition: number;
+    isPlay: boolean;
+    handlePlay: () => void;
+    handleStop: () => void;
+};
+export declare function RangeControls({ indexPosition, isPlay, handlePlay, handleStop, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/range/range-thumb.d.ts

@@ -0,0 +1,12 @@
+/** React */
+import { HtmlHTMLAttributes } from "react";
+/** CSS */
+import "./index.css";
+/** Props */
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+    thumbPosition?: string;
+    handleOverContent: (value: string | number | undefined) => void;
+    handleDownThumb: () => void;
+};
+export declare function RangeThumb({ thumbPosition, handleOverContent, handleDownThumb }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/range/values.d.ts

@@ -0,0 +1 @@
+export declare const DATES: string[];

package/dist/cjs/components/select/index.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectProps } from "./index.types";
+import "./index.css";
+export declare function Select({ inputClassName, classNameGroup, options, styleGroup, defaultValue, setFormSelected, clearError, resetForm, onFormBlur, handleSelect, label, labelClassName, error, backgroundColor, isRequired, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/cjs/components/select/index.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Select } from "./index";
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Primary: Story;
+export declare const PrimaryLabelAndLabelClass: Story;
+export declare const Error: Story;
+export declare const DifferentDefaultSelectedValue: Story;
+export declare const DifferentClassNameGroup: Story;

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

@@ -0,0 +1,53 @@
+import { CSSProperties } from "react";
+import { dataTheme } from "data-theme";
+export interface Select extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Custom css class name.
+     */
+    inputClassName?: string;
+    /**
+     * Custom css class name for group wrapper.
+     */
+    classNameGroup?: string;
+    /**
+     * Data theme for the html. `${themes}`
+     */
+    paletteTheme?: dataTheme;
+    /**
+     * Options of the select component.
+     */
+    options?: string[];
+    /**
+     * Error message to show when input has an error.
+     */
+    error: {
+        is: boolean;
+        message: string;
+    };
+    /**
+     * Style input group wrapper
+     */
+    styleGroup?: CSSProperties;
+    /**Default selected value */
+    defaultValue?: string;
+    /**
+     * Style of the backgroundColor
+     */
+    backgroundColor?: string;
+    /**Pass a custom function to the select */
+    handleSelect?: Function;
+    /**Pass a custom function to the select */
+    setFormSelected?: Function;
+    /**Pass a custom function to the select on clear error*/
+    clearError?: Function;
+    /**Pass a custom function to the select on reset form*/
+    resetForm?: Function;
+    /**Pass a custom function to the select on form blur, when closing the select*/
+    onFormBlur?: Function;
+    /**Pass a custom label to the select*/
+    label?: string;
+    /**Pass a custom class to the label of the select*/
+    labelClassName?: string;
+    /**Sets if select is required or not*/
+    isRequired: boolean;
+}

package/dist/cjs/components/text-area/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TextArea as TextAreaProps } from "./index.types";
+import "./index.css";
+export declare function TextArea({ buttonDisabled, className, disabled, error, hasToggleButton, hideHeight, label, labelClassName, isRequired, placeholder, showHeight, backgroundColor, style, textareaClassName, ...rest }: TextAreaProps): JSX.Element;
+export default TextArea;