@geoinsight/react-components 1.0.7 → 1.1.0

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/menu/menu-utils.d.ts

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/range/values.d.ts

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

package/dist/esm/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/esm/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/esm/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/esm/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;

package/dist/esm/components/text-area/index.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "./index";
+declare const meta: Meta<typeof TextArea>;
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Active: Story;
+export declare const Disabled: Story;
+export declare const ActiveWithLabel: Story;
+export declare const ActiveWithConfigurableLabel: Story;
+export declare const NoToggleButton: Story;

package/dist/esm/components/text-area/index.types.d.ts

@@ -0,0 +1,50 @@
+import { CSSProperties } from "react";
+import { FieldError, FieldErrorsImpl, Merge } from "react-hook-form";
+export interface TextArea {
+    /**
+     * Custom css class name textarea wrapper.
+     */
+    className?: string;
+    /**
+     * Disable prop
+     */
+    disabled?: boolean;
+    /**
+     * Error message to show when input has an error.
+     */
+    error?: {
+        message?: string | false | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
+        is?: boolean;
+    };
+    hasToggleButton?: boolean;
+    /**
+     * Minimum height if toggle button is true
+     */
+    hideHeight?: string;
+    /**
+     * Placeholder for textarea html tag
+     */
+    placeholder?: string;
+    /**
+     * Maximum height if toggle button is false
+     */
+    showHeight?: string;
+    /**
+     * Style textarea group wrapper
+     */
+    style?: CSSProperties;
+    /**
+     * Classname of the textarea
+     */
+    textareaClassName?: string;
+    /**Places a text on top of the text-area */
+    label?: string;
+    /**className of the text on top of the text-area */
+    labelClassName?: string;
+    /**Shows the full component as disabled */
+    buttonDisabled?: boolean;
+    /**Changes the background color of the input*/
+    backgroundColor?: string;
+    /**Makes input text required or not*/
+    isRequired: boolean;
+}

package/dist/esm/context/loading/index.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode, RefObject } from "react";
+type State = {
+    isLoading: boolean;
+    message?: string | React.ReactNode;
+    ref?: RefObject<ReactNode>;
+};
+type Context = {
+    state: State;
+    setRef: (ref: RefObject<ReactNode>) => void;
+    setMessage: (message: string) => void;
+    startLoading: () => void;
+    stopLoading: () => void;
+};
+type LoadingProviderProps = {
+    children: React.ReactNode;
+};
+type UseLoadingProps = {
+    ref?: RefObject<ReactNode>;
+    message?: string;
+};
+declare const LoadingContext: React.Context<Context | undefined>;
+declare function LoadingProvider({ children }: LoadingProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useLoading({ ref, message }?: UseLoadingProps): Context;
+export { LoadingContext, LoadingProvider, useLoading };

package/dist/esm/context/loading/index.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LoadingProvider } from ".";
+declare const meta: Meta<typeof LoadingProvider>;
+export default meta;
+type Story = StoryObj<typeof LoadingProvider>;
+export declare const Basic: Story;
+export declare const CustomMessage: Story;
+export declare const CustomImage: Story;

package/dist/esm/context/map/index.d.ts

@@ -0,0 +1,20 @@
+/** React */
+import { Dispatch, ReactNode, SetStateAction } from "react";
+import { Toc } from "../../components/map/index.types";
+/** Context type */
+type MapContextType = {
+    state?: {
+        currentLayer?: Toc;
+    };
+    setCurrentLayer: Dispatch<SetStateAction<Toc | undefined>>;
+};
+/** Props */
+type MapProviderProps = {
+    children: ReactNode;
+};
+type UseMapProps = {
+    defaultLayer?: Toc;
+};
+export declare function MapProvider({ children }: MapProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useMap({ defaultLayer }: UseMapProps): MapContextType;
+export {};

package/dist/esm/context/modal/index.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import Modal from "../../components/modal";
+type Modal = {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    content?: React.ReactNode;
+    hasCloseButton?: boolean;
+    hasOverlay?: boolean;
+    hasWindowClose?: boolean;
+    footer?: React.ReactNode;
+    isCustom?: boolean;
+    customRef?: any;
+};
+interface State extends Modal {
+    isModal: boolean;
+}
+type Context = {
+    state: State;
+    openModal: (modal?: Modal) => void;
+    closeModal: () => void;
+};
+type ModalProviderProps = {
+    children: React.ReactNode;
+};
+type UseModalProps = {};
+declare const ModalContext: React.Context<Context | undefined>;
+declare function ModalProvider({ children }: ModalProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useModal({}?: UseModalProps): Context;
+export { ModalContext, ModalProvider, useModal };

package/dist/esm/context/modal/index.stories.d.ts

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

package/dist/esm/context/theme/index.d.ts

@@ -0,0 +1,18 @@
+import { DataPalette } from "data-palette";
+import React from "react";
+type DataTheme = "light" | "dark";
+type State = {
+    dataTheme?: DataTheme;
+    switchDataTheme: (mode: DataTheme) => void;
+    dataPalette?: DataPalette;
+    switchDataPalette: (mode: DataPalette) => void;
+};
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    dataTheme?: DataTheme;
+    dataPalette?: DataPalette;
+};
+declare const ThemeContext: React.Context<State | undefined>;
+declare function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useTheme(): State;
+export { ThemeContext, ThemeProvider, useTheme };

package/dist/esm/decorators/withColorScheme.d.ts

@@ -0,0 +1,7 @@
+import { StoryContext, StoryFn } from "@storybook/react";
+import "../styles/variables.css";
+export declare const withColorScheme: (Story: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;
+export declare const Wrapped: ({ Story, context, }: {
+    Story: StoryFn;
+    context: StoryContext;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/decorators/withLoading.d.ts

@@ -0,0 +1,2 @@
+import { StoryContext, StoryFn } from "@storybook/react";
+export declare const withLoading: (Story: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/decorators/withMap.d.ts

@@ -0,0 +1,2 @@
+import { StoryContext, StoryFn } from "@storybook/react";
+export declare const withMap: (Story: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/decorators/withModal.d.ts

@@ -0,0 +1,2 @@
+import { StoryContext, StoryFn } from "@storybook/react";
+export declare const withModal: (Story: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/decorators/withWrapper.d.ts

@@ -0,0 +1,2 @@
+import { StoryContext, StoryFn } from "@storybook/react";
+export declare const withWrapper: (Story: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;