@geoinsight/react-components 1.0.7 → 1.1.0

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

package/dist/cjs/index.css

@@ -842,167 +842,3 @@ h6 {
 .modal__footer {
   padding-bottom: var(--spacing-16);
 }
-
-@import url("mapbox-gl/dist/mapbox-gl.css");
-
-.map {
-  position: relative;
-  height: 100%;
-}
-
-.map__attribution {
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-4);
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-
-.map__attribution a {
-  font-size: var(--font-size-12);
-  padding: 0 var(--spacing-8) 0 0;
-}
-
-.map__attribution a:hover {
-  text-underline-offset: var(--spacing-4);
-}
-
-.map__button.button {
-  padding: var(--spacing-8) !important;
-}
-.map__mapbox-error {
-  color: var(--color-danger);
-}
-
-.map__popup {
-  background-color: var(--color-main-color);
-  border-radius: var(--spacing-8);
-  color: var(--color-main-background);
-  padding: var(--spacing-4);
-  position: absolute;
-}
-
-.map__popup-content {
-  border: 1px solid var(--color-main-background);
-  border-radius: var(--spacing-8);
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-8);
-  padding: var(--spacing-8);
-}
-
-.map__popup-list {
-  border-radius: var(--spacing-8);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
-
-.map__popup-list > h5 {
-  margin: unset;
-}
-
-/* .map__tip {
-  display: flex;
-  align-self: center;
-  border: 10px solid transparent;
-  border-bottom-color: var(--color-main-color) !important;
-  border-top: none;
-  flex-direction: column;
-  height: 0;
-  width: 0;
-  z-index: 1;
-} */
-
-.mapboxgl-popup-tip {
-  border-bottom-color: var(--color-main-color) !important;
-}
-
-.mapboxgl-popup-content {
-  background-color: var(--color-main-color) !important;
-  border: 1px solid var(--color-main-background) !important;
-  border-radius: var(--spacing-8) !important;
-  color: var(--color-main-background) !important;
-  display: flex !important;
-  flex-direction: row !important;
-  gap: var(--spacing-8) !important;
-  padding: var(--spacing-8) !important;
-}
-
-.mapboxgl-popup-close-button {
-  border-radius: var(--spacing-32) !important;
-  background-color: var(--color-primary-dark) !important;
-  top: -16px !important;
-  right: -16px !important;
-}
-
-.mapboxgl-popup-close-button:hover {
-  background-color: var(--color-primary-dark);
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
-}
-
-.control {
-  color: var(--color-main-background);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  position: absolute;
-  /* margin: var(--spacing-4); */
-}
-
-.control--top-left {
-  padding: var(--spacing-8) 0 0 var(--spacing-8);
-  top: 0;
-}
-
-.control--top-right {
-  align-items: end;
-  padding: var(--spacing-8) var(--spacing-8) 0 0;
-  right: 0;
-  top: 0;
-}
-
-.control--bottom-left {
-  bottom: 0;
-  padding: 0 0 var(--spacing-32) var(--spacing-8);
-}
-
-.control--bottom-right {
-  align-items: end;
-  bottom: 0;
-  padding: 0 var(--spacing-8) var(--spacing-32) 0;
-  right: 0;
-}
-
-.control--top-center {
-  left: 40%;
-  padding-top: var(--spacing-8);
-  top: 0;
-}
-
-.control--center-left {
-  left: 0;
-  padding-left: var(--spacing-8);
-  top: 40%;
-}
-
-.control--center {
-  left: 50%;
-  top: 50%;
-}
-
-.control--center-right {
-  padding-right: var(--spacing-8);
-  right: 0;
-  top: 40%;
-}
-
-.control--bottom-center {
-  bottom: 0;
-  left: 40%;
-  padding-bottom: var(--spacing-8);
-  top: auto;
-}

package/dist/cjs/index.d.ts

@@ -0,0 +1,15 @@
+import "../src/styles/variables.css";
+export { Menu } from "./components/menu";
+export { Button } from "./components/button";
+export { Form } from "./components/form";
+export { FormInput } from "./components/form/form-input";
+export { FormTextArea } from "./components/form/form-text-area";
+export { FormSelect } from "./components/form/form-select";
+export { Input } from "./components/input";
+export { Loading } from "./components/loading";
+export { Modal } from "./components/modal";
+export { Select } from "./components/select";
+export { TextArea } from "./components/text-area";
+export { LoadingContext, LoadingProvider, useLoading } from "./context/loading";
+export { ModalContext, ModalProvider, useModal } from "./context/modal";
+export { ThemeContext, ThemeProvider, useTheme } from "./context/theme";