@geoinsight/react-components 0.2.1 → 0.2.2

package/src/components/input/index.tsx

@@ -1,25 +0,0 @@
-import { Input as InputProps } from "./index.types";
-import "./index.css";
-
-export function Input({
-  className = "",
-  classNameGroup = "",
-  errorMessage = "" ,
-  inputRef,
-  styleGroup,
-  ...rest
-}: InputProps) {
-  return (
-    <div className={`input-group ${classNameGroup}`} 
-     style={styleGroup}>
-      <input
-        ref={inputRef}
-        className={`input ${errorMessage ? "input--error" : ""} ${className}`}
-        {...rest}
-      />
-      {errorMessage && <span className="error">{errorMessage}</span>}
-    </div>
-  );
-}
-
-export default Input;

package/src/components/input/index.types.ts

@@ -1,29 +0,0 @@
-import { dataTheme } from "data-theme";
-import { CSSProperties, Ref } from "react";
-
-export interface Input extends React.InputHTMLAttributes<HTMLInputElement> {
-  /**
-   * Custom css class name.
-   */
-  className?: 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.
-   */
-  errorMessage?: string;
-  /**
-   * Ref react elemnt to use
-   */
-  inputRef?: Ref<HTMLInputElement>;
-  /**
-   * Style input group wrapper
-   */
-  styleGroup?: CSSProperties;
-}

package/src/components/loading/index.css

@@ -1,8 +0,0 @@
-.loading {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;;
-  position: relative;
-}

package/src/components/loading/index.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import { Loading } from "./index";
-import { withColorScheme } from "../../decorators/withColorScheme";
-
-const meta: Meta<typeof Loading> = {
-  title: "Example/Loading",
-  component: Loading,
-  decorators: [withColorScheme]
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Loading>;
-
-export const Primary: Story = {
-  args: {
-    img: ""
-  },
-};

package/src/components/loading/index.tsx

@@ -1,14 +0,0 @@
-import { Loading as LoadingProps } from "./index.types";
-import "./index.css";
-import loading from "../../stories/assets/loading.gif";
-
-export function Loading({ img, children }: LoadingProps) {
-  return (
-    <div className="loading">
-      <img src={img ? img : loading} />
-      {children}
-    </div>
-  );
-}
-
-export default Loading;

package/src/components/loading/index.types.ts

@@ -1,12 +0,0 @@
-import React, { CSSProperties, Ref } from "react";
-
-export interface Loading {
-  /**
-   * Image or gif used
-   */
-  img?: string;
-  /**
-   * Message that its sent
-   */
-  children?: React.ReactNode;
-}

package/src/components/text-area/index.css

@@ -1,54 +0,0 @@
-.textarea {
-  margin-bottom: var(--spacing-8);
-  position: relative;
-}
-
-.textarea__input {
-  background-color: var(--color-white);
-  box-sizing: border-box;
-  border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary);
-  cursor: text;
-  color: var(--color-black);
-  outline: none;
-  padding: var(--spacing-8) var(--spacing-16);
-  resize: vertical;
-  width: 100%;
-}
-
-.textarea__input:hover {
-  border: 3px solid var(--color-primary-700);
-}
-
-.textarea__button {
-  background: var(--color-primary);
-  border: 2px solid var(--color-secondary);
-  box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
-  border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
-  bottom: 0;
-  cursor: pointer;
-  left: 0;
-  padding-bottom: -20px;
-  position: absolute;
-  width: 100%;
-}
-
-.textarea__button > svg {
-  color: var(--color-neutral-100);
-}
-
-.textarea__button:disabled {
-  cursor: unset;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.textarea__button:hover {
-  background: var(--color-secondary);
-  color: var(--color-neutral-100);
-}
-
-.textarea__button--show {
-  background: var(--color-primary-700);
-  color: var(--color-neutral-100);
-}

package/src/components/text-area/index.stories.tsx

@@ -1,30 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import { TextArea } from "./index";
-import { withColorScheme } from "../../decorators/withColorScheme";
-
-const meta: Meta<typeof TextArea> = {
-  title: "Example/TextArea",
-  component: TextArea,
-  argTypes: {
-    backgroundColor: { control: "color" },
-  },
-  decorators: [withColorScheme]
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextArea>;
-
-export const Active: Story = {
-  args: {
-    placeholder: "Insert a value",
-    disabled: false
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    placeholder: "Insert a value",
-  },
-};

package/src/components/text-area/index.tsx

@@ -1,62 +0,0 @@
-import React, { MutableRefObject, useRef, useState } from "react";
-import clsx from "clsx";
-import { TbArrowsDiagonal2 } from "react-icons/tb";
-import { TextArea as TextAreaProps } from "./index.types";
-import "./index.css";
-
-export function TextArea({
-  className = "",
-  disabled = true,
-  hasToggleButton = true,
-  hideHeight = "5rem",
-  placeholder = "",
-  showHeight = "10rem",
-  style = {},
-  textareaClassName = "",
-  ...rest
-}: TextAreaProps): JSX.Element {
-  const ref = useRef() as MutableRefObject<HTMLTextAreaElement>;
-  const [isShow, setIsShow] = useState<boolean>(false);
-
-  const handleClickToggle = () => {
-    if (ref && ref.current) {
-      if (isShow) {
-        ref.current.style.height = hideHeight;
-      } else {
-        ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
-      }
-      setIsShow((prev) => !prev);
-    }
-  };
-
-  return (
-    <div className={clsx("textarea", className)} style={style}>
-      <textarea
-        ref={ref}
-        className={clsx("textarea__input", textareaClassName)}
-        style={
-          {
-            height: hasToggleButton ? hideHeight : showHeight,
-          } as React.CSSProperties
-        }
-        placeholder={placeholder}
-        disabled={disabled}
-        {...rest}
-      />
-      {hasToggleButton && (
-        <button
-          className={clsx(
-            "textarea__button",
-            isShow && "textarea__button--show"
-          )}
-          onClick={handleClickToggle}
-          disabled={disabled}
-        >
-          <TbArrowsDiagonal2 size="1.5rem" />
-        </button>
-      )}
-    </div>
-  );
-}
-
-export default TextArea;

package/src/components/text-area/index.types.ts

@@ -1,37 +0,0 @@
-import { dataTheme } from "data-theme";
-import { CSSProperties, Ref } from "react";
-
-export interface TextArea extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /**
-   * Custom css class name textarea wrapper.
-   */
-  className?: string;
-  /**
-   * Disable prop
-   */
-  disabled?: boolean;
-  /**
-   * Check if there is a toggle button
-   */
-  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;
-}

package/src/context/loading/index.stories.tsx

@@ -1,37 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import { LoadingProvider } from ".";
-import { withColorScheme } from "../../decorators/withColorScheme";
-import { withLoading } from "../../decorators/withLoading";
-import spinner from "../../stories/assets/spinner_2.png";
-
-const meta: Meta<typeof LoadingProvider> = {
-  title: "Context/Loading",
-  component: () => <div></div>,
-  decorators: [withColorScheme, withLoading],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof LoadingProvider>;
-
-export const Basic: Story = {};
-
-export const CustomMessage: Story = {
-  parameters: {
-    loadingOptions: {
-      message: "Updating form",
-    },
-  },
-};
-
-export const CustomImage: Story = {
-  parameters: {
-    loadingOptions: {
-      isRef: true,
-    },
-  },
-  args: {
-    img: spinner,
-  },
-};

package/src/context/loading/index.tsx

@@ -1,111 +0,0 @@
-import React, {
-  ReactNode,
-  RefObject,
-  createContext,
-  useContext,
-  useEffect,
-  useReducer,
-} from "react";
-import Loading from "../../components/loading";
-
-type Action = {
-  type: "set_ref" | "start_loading" | "stop_loading" | "set_message";
-  ref?: RefObject<ReactNode>;
-  message?: string;
-};
-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;
-};
-
-const LoadingContext = createContext<Context | undefined>(undefined);
-
-function loadingReducer(state: State, action: Action) {
-  switch (action.type) {
-    case "set_ref": {
-      return { ...state, ref: action.ref };
-    }
-    case "start_loading": {
-      return { ...state, isLoading: true };
-    }
-    case "stop_loading": {
-      return { ...state, isLoading: false };
-    }
-    case "set_message": {
-      return { ...state, message: action.message };
-    }
-    default: {
-      throw new Error(`Unhandled action type: ${action.type}`);
-    }
-  }
-}
-
-function LoadingProvider({ children }: LoadingProviderProps) {
-  const [{ isLoading, message, ref }, dispatch] = useReducer(loadingReducer, {
-    isLoading: false,
-    message: "Loading",
-    ref: undefined,
-  });
-
-  const setRef = (ref: RefObject<ReactNode>) => {
-    dispatch({ type: "set_ref", ref });
-  };
-
-  const setMessage = (message: string) => {
-    dispatch({ type: "set_message", message });
-  };
-
-  const startLoading = () => {
-    dispatch({ type: "start_loading" });
-  };
-
-  const stopLoading = () => {
-    dispatch({ type: "stop_loading" });
-  };
-
-  return (
-    <LoadingContext.Provider
-      value={{
-        state: { ref, message, isLoading },
-        setMessage,
-        setRef,
-        startLoading,
-        stopLoading,
-      }}
-    >
-      {!ref && <Loading>{message}</Loading>}
-      {children}
-    </LoadingContext.Provider>
-  );
-}
-
-function useLoading({ ref, message }: UseLoadingProps = {}) {
-  const context = useContext(LoadingContext);
-
-  // only happens if there is an initial mode value.
-  useEffect(() => {
-    ref && context?.setRef(ref);
-    message && context?.setMessage(message);
-  }, []);
-
-  if (context === undefined) {
-    throw new Error("useLoading must be used within a LoadingProvider");
-  }
-
-  return context;
-}
-
-export { LoadingContext, LoadingProvider, useLoading };

package/src/context/themeContext.tsx

@@ -1,93 +0,0 @@
-import { PaletteTheme } from "palette-theme";
-import React, {
-  Dispatch,
-  SetStateAction,
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-
-type DataTheme = "light" | "dark";
-
-type State = {
-  dataTheme?: DataTheme;
-  switchDataTheme: (mode: DataTheme) => void;
-  paletteTheme?: PaletteTheme;
-  switchPaletteTheme: (mode: PaletteTheme) => void;
-};
-type ThemeProviderProps = { children: React.ReactNode };
-type UseThemeProps = {
-  dataTheme?: DataTheme;
-  paletteTheme?: PaletteTheme;
-};
-
-const ThemeContext = createContext<State | undefined>(undefined);
-
-function ThemeProvider({ children }: ThemeProviderProps) {
-  const [dataTheme, setDataTheme] = useState<DataTheme>();
-  const [paletteTheme, setPaletteTheme] = useState<PaletteTheme>();
-
-  useEffect(() => {
-    if (window.matchMedia) {
-      if (localStorage.getItem("data-theme")) {
-        document.documentElement.setAttribute(
-          "data-theme",
-          localStorage.getItem("data-theme") as string
-        );
-        setDataTheme(localStorage.getItem("data-theme") as DataTheme);
-      } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        document.documentElement.setAttribute("data-theme", "dark");
-        setDataTheme("dark");
-      }
-    }
-  }, []);
-
-  const switchDataTheme = (mode: DataTheme) => {
-    document.documentElement.setAttribute("data-theme", mode);
-    setDataTheme(mode);
-    localStorage.setItem("data-theme", mode);
-  };
-
-  const switchPaletteTheme = (mode: PaletteTheme) => {
-    document.documentElement.setAttribute("palette-theme", mode);
-    setPaletteTheme(mode);
-    localStorage.setItem("palette-theme", mode);
-  };
-
-  return (
-    <ThemeContext.Provider
-      value={{ dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }}
-    >
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-function useTheme({
-  dataTheme = undefined,
-  paletteTheme = "water",
-}: UseThemeProps = {}) {
-  const context = useContext(ThemeContext);
-
-  // only happens if there is an initial mode value.
-  useEffect(() => {
-    if (dataTheme && !localStorage.getItem("data-theme")) {
-      context?.switchDataTheme(dataTheme);
-    } else if (!dataTheme && localStorage.getItem("data-theme")) {
-      localStorage.removeItem("data-theme");
-    }
-  }, []);
-
-  useEffect(() => {
-    context?.switchPaletteTheme(paletteTheme);
-  }, []);
-
-  if (context === undefined) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-
-  return context;
-}
-
-export { ThemeContext, ThemeProvider, useTheme };

package/src/decorators/withColorScheme.tsx

@@ -1,29 +0,0 @@
-import { StoryContext, StoryFn } from "@storybook/react";
-import { ThemeProvider, useTheme } from "../context/themeContext";
-import "../styles/variables.css";
-import { useEffect } from "react";
-
-export const withColorScheme = (Story: StoryFn, context: StoryContext) => {
-  return (
-    <ThemeProvider>
-      <Wrapped Story={Story} context={context} />
-    </ThemeProvider>
-  );
-};
-
-export const Wrapped = ({ Story, context } : { Story: StoryFn, context: StoryContext}) => {
-  const { theme, palette } = context.globals;
-  const switchTheme = useTheme();
-  
-  useEffect (()=> {
-    switchTheme.switchDataTheme(theme)
-  }, [theme]);
-
-  useEffect (()=> {
-    switchTheme.switchPaletteTheme(palette)
-  }, [palette]);
-
-  return (
-      <Story />
-  );
-};

package/src/decorators/withLoading.tsx

@@ -1,31 +0,0 @@
-import { useRef } from "react";
-import { StoryContext, StoryFn } from "@storybook/react";
-import { LoadingProvider, useLoading } from "../context/loading";
-
-const LoadingProviderMock = ({ Story, loadingOptions, loadingArgs }) => {
-  const ref = useRef();
-  const loading = useLoading({
-    ...(loadingOptions?.isRef && { ref: ref }),
-    ...(loadingOptions?.message && { message: loadingOptions.message }),
-  });
-
-  // initialize stuff here
-  return (
-    <>
-      {loading.state.ref && <img ref={ref} src={loadingArgs.img} />}
-      <Story />
-    </>
-  );
-};
-
-export const withLoading = (Story: StoryFn, context: StoryContext) => {
-  return (
-    <LoadingProvider>
-      <LoadingProviderMock
-        Story={Story}
-        loadingOptions={context.parameters.loadingOptions}
-        loadingArgs={context.args}
-      />
-    </LoadingProvider>
-  );
-};

package/src/decorators/withWrapper.tsx

@@ -1,9 +0,0 @@
-import { StoryContext, StoryFn } from "@storybook/react";
-
-export const withWrapper = (Story: StoryFn, context: StoryContext) => {
-  return (
-    <div style={{height: "300px"}}>
-      <Story />
-    </div>
-  );
-};

package/src/index.ts

@@ -1,7 +0,0 @@
-import "../src/styles/variables.css";
-
-export { Button } from "./components/button";
-export { Input } from "./components/input";
-export { TextArea } from "./components/text-area";
-
-export { ThemeContext, ThemeProvider, useTheme } from "./context/themeContext";