@geoinsight/react-components 0.1.0 → 0.2.0

package/dist/cjs/index.css

@@ -1,3 +1,118 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+
+:root {
+  box-sizing: border-box;
+  font-family: Poppins;
+  font-size: var(--font-size-16);
+
+  --font-size-10: 10px;
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-24: 24px;
+  --font-size-32: 32px;
+  --font-size-40: 40px;
+
+  --spacing-4: 0.25rem;
+  --spacing-8: 0.5rem;
+  --spacing-16: 1rem;
+  --spacing-20: 1.25rem;
+  --spacing-24: 1.5rem;
+  --spacing-32: 2rem;
+  --spacing-40: 2.5rem;
+  --spacing-48: 3rem;
+  --spacing-64: 4rem;
+  --spacing-128: 8rem;
+
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  --color-neutral-200: #f2f2f2;
+  --color-neutral-300: #e0e0e0;
+  --color-neutral-400: #afafaf;
+  --color-neutral-500: #818181;
+  --color-neutral-600: #6c6c6c;
+  --color-neutral-700: #403b3a;
+  --color-neutral-800: #201e1d;
+
+  --color-success: #20e52f;
+  --color-danger: #e52f20;
+
+  --transition-bg-cubic-bezier: background-color 500ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-decoration-cubic-bezier: text-decoration 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-box-shadow-cubic-bezier: box-shadow 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+
+
+}
+
+[data-theme="dark"] {
+  --color-neutral-900: var(--color-black);
+  --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"] {
+  --color-neutral-900: var(--color-white);
+  --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"] {
+  --color-primary-100: #d6efff;
+  --color-primary-200: #ade0ff;
+  --color-primary-300: #85d0ff;
+  --color-primary-400: #5cc0ff;
+  --color-primary-500: #33b1ff;
+  --color-primary-600: #009eff;
+  --color-primary-700: #008ae0;
+  --color-primary-800: #0071b8;
+  --color-primary-900: #00588f;
+}
+
+[palette-theme="earth"]{
+  --color-primary-100: #f6e3cb;
+  --color-primary-200: #edc897;
+  --color-primary-300: #eabe86;
+  --color-primary-400: #e3ac63;
+  --color-primary-500: #dd9940;
+  --color-primary-600: #ca8323;
+  --color-primary-700: #ad701f;
+  --color-primary-800: #8b5918;
+  --color-primary-900: #684312;
+}
+
+[palette-theme="forest"] {
+  --color-primary-100: #bee8b0;
+  --color-primary-200: #a4df90;
+  --color-primary-300: #8ad671;
+  --color-primary-400: #70cd51;
+  --color-primary-500: #54b435;
+  --color-primary-600: #4a9e2e;
+  --color-primary-700: #3b7e25;
+  --color-primary-800: #2c5f1c;
+  --color-primary-900: #1e3f12;
+}
 .button {
   align-items: center;
   border-radius: var(--spacing-32);
@@ -86,6 +201,7 @@
 }
 
 .input {
+  background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   color: var(--color-black);
@@ -109,3 +225,58 @@
   font-size: 12px;
   color: var(--color-danger);
 }
+
+.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/dist/cjs/index.js

@@ -2,6 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var react = require('react');
+var tb = require('react-icons/tb');
 
 function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", ...rest }) {
     return as === "link" ? (jsxRuntime.jsxs("a", { ...(isNewWindow && { target: "_blank" }), className: clsx(className, "button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx(className, "button", `button__${mode}`, `button__${size}`), ...rest, children: [children, icon] }));
@@ -11,5 +13,76 @@ function Input({ className = "", classNameGroup = "", errorMessage = "", inputRe
     return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
 }
 
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+    const ref = react.useRef();
+    const [isShow, setIsShow] = react.useState(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 (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+                    height: hasToggleButton ? hideHeight : showHeight,
+                }, 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

@@ -1,3 +1,118 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+
+:root {
+  box-sizing: border-box;
+  font-family: Poppins;
+  font-size: var(--font-size-16);
+
+  --font-size-10: 10px;
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-24: 24px;
+  --font-size-32: 32px;
+  --font-size-40: 40px;
+
+  --spacing-4: 0.25rem;
+  --spacing-8: 0.5rem;
+  --spacing-16: 1rem;
+  --spacing-20: 1.25rem;
+  --spacing-24: 1.5rem;
+  --spacing-32: 2rem;
+  --spacing-40: 2.5rem;
+  --spacing-48: 3rem;
+  --spacing-64: 4rem;
+  --spacing-128: 8rem;
+
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  --color-neutral-200: #f2f2f2;
+  --color-neutral-300: #e0e0e0;
+  --color-neutral-400: #afafaf;
+  --color-neutral-500: #818181;
+  --color-neutral-600: #6c6c6c;
+  --color-neutral-700: #403b3a;
+  --color-neutral-800: #201e1d;
+
+  --color-success: #20e52f;
+  --color-danger: #e52f20;
+
+  --transition-bg-cubic-bezier: background-color 500ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-decoration-cubic-bezier: text-decoration 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-box-shadow-cubic-bezier: box-shadow 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+
+
+}
+
+[data-theme="dark"] {
+  --color-neutral-900: var(--color-black);
+  --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"] {
+  --color-neutral-900: var(--color-white);
+  --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"] {
+  --color-primary-100: #d6efff;
+  --color-primary-200: #ade0ff;
+  --color-primary-300: #85d0ff;
+  --color-primary-400: #5cc0ff;
+  --color-primary-500: #33b1ff;
+  --color-primary-600: #009eff;
+  --color-primary-700: #008ae0;
+  --color-primary-800: #0071b8;
+  --color-primary-900: #00588f;
+}
+
+[palette-theme="earth"]{
+  --color-primary-100: #f6e3cb;
+  --color-primary-200: #edc897;
+  --color-primary-300: #eabe86;
+  --color-primary-400: #e3ac63;
+  --color-primary-500: #dd9940;
+  --color-primary-600: #ca8323;
+  --color-primary-700: #ad701f;
+  --color-primary-800: #8b5918;
+  --color-primary-900: #684312;
+}
+
+[palette-theme="forest"] {
+  --color-primary-100: #bee8b0;
+  --color-primary-200: #a4df90;
+  --color-primary-300: #8ad671;
+  --color-primary-400: #70cd51;
+  --color-primary-500: #54b435;
+  --color-primary-600: #4a9e2e;
+  --color-primary-700: #3b7e25;
+  --color-primary-800: #2c5f1c;
+  --color-primary-900: #1e3f12;
+}
 .button {
   align-items: center;
   border-radius: var(--spacing-32);
@@ -86,6 +201,7 @@
 }
 
 .input {
+  background-color: var(--color-white);
   border-radius: var(--spacing-8);
   border: 2px solid var(--color-primary);
   color: var(--color-black);
@@ -109,3 +225,58 @@
   font-size: 12px;
   color: var(--color-danger);
 }
+
+.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/dist/esm/index.js

@@ -1,5 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+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 }) {
     return as === "link" ? (jsxs("a", { ...(isNewWindow && { target: "_blank" }), className: clsx(className, "button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx(className, "button", `button__${mode}`, `button__${size}`), ...rest, children: [children, icon] }));
@@ -9,4 +11,71 @@ function Input({ className = "", classNameGroup = "", errorMessage = "", inputRe
     return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
 }
 
-export { Button, Input };
+function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
+    const ref = useRef();
+    const [isShow, setIsShow] = useState(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 (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
+                    height: hasToggleButton ? hideHeight : showHeight,
+                }, 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" }) }))] }));
+}
+
+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,9 +1,10 @@
 {
   "name": "@geoinsight/react-components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "This library is the main UI component library for geoinsight",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "author": "Geoinsight",
   "license": "MIT",
   "scripts": {

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

@@ -1,2 +1,7 @@
+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];
-}