@geoinsight/react-components 0.1.1 → 0.2.1

package/dist/cjs/index.css

@@ -54,6 +54,9 @@
   --color-neutral-100: var(--color-white);
   --color-primary: var(--color-primary-500);
   --color-secondary: var(--color-primary-600);
+
+  color: var(--color-neutral-100) !important;
+  background-color: var(--color-neutral-900) !important;
 }
 
 [data-theme="light"] {
@@ -61,6 +64,18 @@
   --color-neutral-100: var(--color-black);
   --color-primary: var(--color-primary-600);
   --color-secondary: var(--color-primary-500);
+  color: var(--color-neutral-900) !important;
+  background-color: var(--color-neutral-100) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: var(--color-neutral-100);
+    background-color: var(--color-neutral-900);
+  }
 }
 
 [palette-theme="water"] {
@@ -186,6 +201,7 @@
 }
 
 .input {
+  background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   color: var(--color-black);
@@ -216,6 +232,7 @@
 }
 
 .textarea__input {
+  background-color: var(--color-white);
   box-sizing: border-box;
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);

package/dist/cjs/index.js

@@ -32,6 +32,57 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
                 }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }
 
+const ThemeContext = react.createContext(undefined);
+function ThemeProvider({ children }) {
+    const [dataTheme, setDataTheme] = react.useState();
+    const [paletteTheme, setPaletteTheme] = react.useState();
+    react.useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchPaletteTheme = (mode) => {
+        document.documentElement.setAttribute("palette-theme", mode);
+        setPaletteTheme(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
+}
+function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
+    const context = react.useContext(ThemeContext);
+    // only happens if there is an initial mode value.
+    react.useEffect(() => {
+        if (dataTheme && !localStorage.getItem("data-theme")) {
+            context?.switchDataTheme(dataTheme);
+        }
+        else if (!dataTheme && localStorage.getItem("data-theme")) {
+            localStorage.removeItem("data-theme");
+        }
+    }, []);
+    react.useEffect(() => {
+        context?.switchPaletteTheme(paletteTheme);
+    }, []);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
 exports.Button = Button;
 exports.Input = Input;
 exports.TextArea = TextArea;
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;

package/dist/esm/index.css

@@ -54,6 +54,9 @@
   --color-neutral-100: var(--color-white);
   --color-primary: var(--color-primary-500);
   --color-secondary: var(--color-primary-600);
+
+  color: var(--color-neutral-100) !important;
+  background-color: var(--color-neutral-900) !important;
 }
 
 [data-theme="light"] {
@@ -61,6 +64,18 @@
   --color-neutral-100: var(--color-black);
   --color-primary: var(--color-primary-600);
   --color-secondary: var(--color-primary-500);
+  color: var(--color-neutral-900) !important;
+  background-color: var(--color-neutral-100) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: var(--color-neutral-100);
+    background-color: var(--color-neutral-900);
+  }
 }
 
 [palette-theme="water"] {
@@ -186,6 +201,7 @@
 }
 
 .input {
+  background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   color: var(--color-black);
@@ -216,6 +232,7 @@
 }
 
 .textarea__input {
+  background-color: var(--color-white);
   box-sizing: border-box;
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useRef, useState } from 'react';
+import { useRef, useState, createContext, useEffect, useContext } from 'react';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 
 function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", ...rest }) {
@@ -30,4 +30,52 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
                 }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
 }
 
-export { Button, Input, TextArea };
+const ThemeContext = createContext(undefined);
+function ThemeProvider({ children }) {
+    const [dataTheme, setDataTheme] = useState();
+    const [paletteTheme, setPaletteTheme] = useState();
+    useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchPaletteTheme = (mode) => {
+        document.documentElement.setAttribute("palette-theme", mode);
+        setPaletteTheme(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
+}
+function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
+    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 { Button, Input, TextArea, ThemeContext, ThemeProvider, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/button/index.tsx

@@ -1,6 +1,17 @@
 import clsx from "clsx";
 import { ButtonAsButton, ButtonAsLink } from "./index.types";
 import "./index.css";
+import { ReactNode } from "react";
+
+const Anchor = ({
+  Custom,
+  children,
+  ...rest
+}: {
+  Custom?: React.ComponentClass<any>;
+  children?: ReactNode;
+}) =>
+  Custom ? <Custom {...rest}>{children}</Custom> : <a {...rest}>{children}</a>;
 
 export function Button({
   children = "Click me",
@@ -10,10 +21,12 @@ export function Button({
   mode = "primary",
   size = "medium",
   as = "button",
+  CustomAnchor,
   ...rest
 }: ButtonAsButton | ButtonAsLink): JSX.Element {
   return as === "link" ? (
-    <a
+    <Anchor
+      Custom={CustomAnchor}
       {...(isNewWindow && { target: "_blank" })}
       className={clsx(
         className,
@@ -25,7 +38,7 @@ export function Button({
     >
       {children}
       {icon}
-    </a>
+    </Anchor>
   ) : (
     <button
       className={clsx(

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

@@ -38,4 +38,6 @@ export interface Base {
    * Button type.
    */
   as?: "button" | "link";
+
+  CustomAnchor?: React.ComponentClass<any>;
 }

package/src/components/input/index.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   color: var(--color-black);

package/src/components/loading/index.css

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

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -4,6 +4,7 @@
 }
 
 .textarea__input {
+  background-color: var(--color-white);
   box-sizing: border-box;
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,93 @@
+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,34 +1,29 @@
 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;
-  if (theme === "light") {
-    return (
-      <div
-        data-theme="light"
-        palette-theme={palette}
-        style={{
-          background: "var(--color-white)",
-          height: "150px",
-          padding: "16px",
-        }}
-      >
-        <Story />
-      </div>
-    );
-  }
+  const switchTheme = useTheme();
+  
+  useEffect (()=> {
+    switchTheme.switchDataTheme(theme)
+  }, [theme]);
+
+  useEffect (()=> {
+    switchTheme.switchPaletteTheme(palette)
+  }, [palette]);
 
   return (
-    <div
-      data-theme="dark"
-      palette-theme={palette}
-      style={{
-        background: "var(--color-black)",
-        height: "150px",
-        padding: "16px",
-      }}
-    >
       <Story />
-    </div>
   );
 };

package/src/decorators/withLoading.tsx

@@ -0,0 +1,31 @@
+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

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

package/src/index.ts

@@ -3,3 +3,5 @@ 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";

package/src/styles/variables.css

@@ -54,6 +54,9 @@
   --color-neutral-100: var(--color-white);
   --color-primary: var(--color-primary-500);
   --color-secondary: var(--color-primary-600);
+
+  color: var(--color-neutral-100) !important;
+  background-color: var(--color-neutral-900) !important;
 }
 
 [data-theme="light"] {
@@ -61,6 +64,18 @@
   --color-neutral-100: var(--color-black);
   --color-primary: var(--color-primary-600);
   --color-secondary: var(--color-primary-500);
+  color: var(--color-neutral-900) !important;
+  background-color: var(--color-neutral-100) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: var(--color-neutral-100);
+    background-color: var(--color-neutral-900);
+  }
 }
 
 [palette-theme="water"] {

package/src/types/palette-theme.d.ts

@@ -0,0 +1,5 @@
+declare module "palette-theme" {
+    import { themes } from "../utils/themes";
+
+    export type PaletteTheme = typeof themes[number];
+}

package/src/types/data-theme.d.ts

@@ -1,5 +0,0 @@
-declare module "data-theme" {
-    import { themes } from "../utils/themes";
-
-    export type dataTheme = typeof themes[number];
-}