From 368d8464d07c0c6090ad46f2f809884da324c113 Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Sun, 3 Nov 2024 10:57:07 -0700
Subject: [PATCH 1/9] Initial Push of Wizard Branch

---
 src/components/wizard/WizardCompnent.tsx      | 21 ++++++++
 src/components/wizard/WizardStepComponent.tsx |  8 +++
 src/routes/Home/Home.tsx                      | 53 +++----------------
 3 files changed, 36 insertions(+), 46 deletions(-)
 create mode 100644 src/components/wizard/WizardCompnent.tsx
 create mode 100644 src/components/wizard/WizardStepComponent.tsx

diff --git a/src/components/wizard/WizardCompnent.tsx b/src/components/wizard/WizardCompnent.tsx
new file mode 100644
index 0000000..27bb167
--- /dev/null
+++ b/src/components/wizard/WizardCompnent.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from "react"
+
+
+const test = (
+  <WizardComponent>
+    <WizardStep>{() => {
+      
+    }}</WizardStep>
+    <WizardStep></WizardStep>
+  </WizardComponent>
+)
+
+export type WizardComponentProps = {
+  children : React.ReactElement<>
+}
+
+export default function WizardComponent() {
+  const [isComplete, setIsComplete] = useState(false);
+  
+  
+}
\ No newline at end of file
diff --git a/src/components/wizard/WizardStepComponent.tsx b/src/components/wizard/WizardStepComponent.tsx
new file mode 100644
index 0000000..c4e2246
--- /dev/null
+++ b/src/components/wizard/WizardStepComponent.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from "react"
+
+
+export type WizardStepCompoentParams = {
+  
+}
+
+export type WizardStepComponentFunction = () => ReactNode
\ No newline at end of file
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index a2c53c8..ee40a8b 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -1,54 +1,15 @@
-import { Entity } from "../../types/gen/Entity"
-import CharacterPortrait from "../../components/ChracterPortrait"
-
-const exampleEntities : Entity[] = [
-  {
-    Name: "John Doe",
-    Damage: "D12"
-  },
-  {
-    Name: "Dilf Laungrin",
-    Damage: "D100"
-  },
-  {
-    Name: "Jane Doe",
-    Damage: "D6"
-  },
-  {
-    Name: "Jane Doe",
-    Damage: "D6"
-  },
-  {
-    Name: "Jane Doe",
-    Damage: "D6"
-  },
-  {
-    Name: "Jane Doe",
-    Damage: "D6"
-  },
-  {
-    Name: "Jane Doe",
-    Damage: "D6"
-  },
-  {
-    Name: "Jane Doe",
-    Damage: "D6"
-  },
-  {
-    Name: "Jane Doe",
-    Damage: "D6"
-  }
-]
+import { Entity } from "../../types/gen/Entity";
+import CharacterPortrait from "../../components/ChracterPortrait";
 
 const Home = () => {
   return (
     <div className="py-10">
       <div className="flex flex-col gap-6 justify-center items-center px-56">
-        <CharacterPortrait image={{image : "test_character.png", x_offset: -90}} icon="moon"/>
-        <CharacterPortrait/>
+        {/* <CharacterPortrait image={{image : "test_character.png", x_offset: -90}} icon="moon"/>
+        <CharacterPortrait/> */}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Home
\ No newline at end of file
+export default Home;

From 1905ad65f8a152c5de792ace32da92ace2172fb3 Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Mon, 4 Nov 2024 21:36:50 -0700
Subject: [PATCH 2/9] first version of input elements added

---
 src/components/input/Input.tsx                | 33 +++++++++++++
 src/components/input/input.css                | 38 +++++++++++++++
 src/components/wizard/WizardCompnent.tsx      | 46 +++++++++++++------
 src/components/wizard/WizardStepComponent.tsx |  8 ----
 src/routes/Home/Home.tsx                      | 21 ++++++++-
 tailwind.config.js                            |  1 +
 6 files changed, 123 insertions(+), 24 deletions(-)
 create mode 100644 src/components/input/Input.tsx
 create mode 100644 src/components/input/input.css
 delete mode 100644 src/components/wizard/WizardStepComponent.tsx

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
new file mode 100644
index 0000000..b68ab7a
--- /dev/null
+++ b/src/components/input/Input.tsx
@@ -0,0 +1,33 @@
+import { forwardRef } from "react";
+import "./input.css"
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label: string;
+};
+
+const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref) => {
+  const { placeholder } = props;
+  
+  const onBlur = (event : React.FocusEvent<HTMLInputElement>) => {
+    props.onBlur && props.onBlur(event);
+    const value = event.target ? (event.target as HTMLInputElement).value : "";
+    if(value !== "") {
+      event.target.classList.add("filled");
+    } else {
+      event.target.classList.remove("filled");
+    }
+  }
+  
+  return (
+      <label className="field">
+        <input className="p-1 text-theme-font-primary bg-theme-background-secondary border border-white rounded-md" 
+          ref={ref} 
+          type="text" 
+          {...{...props, onBlur, placeholder: undefined}} 
+        />
+      <span className="placeholder">{placeholder}</span>
+      </label>
+    );
+})
+
+export default Input;
\ No newline at end of file
diff --git a/src/components/input/input.css b/src/components/input/input.css
new file mode 100644
index 0000000..29a9615
--- /dev/null
+++ b/src/components/input/input.css
@@ -0,0 +1,38 @@
+input:focus::placeholder {
+    color: white;
+    background-color: var(--color-background);
+    transform : translateY(-1rem);
+    transition: all 0.2s ease-in-out;
+}
+
+.field {
+    position: relative;
+    border: none;
+    appearance: none;
+    outline: none;
+    padding: 0.5rem;
+}
+
+.field input {
+    padding: 0.5rem;
+    font-size: 16pt;
+    background-color: var(--background-color);
+}
+
+.field .placeholder {
+    position: absolute;
+    left: 1.0rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--font-color-secondary);
+    font-size: 16pt;
+    background-color: var(--background-color);
+    padding: 0 5px;
+    transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
+}
+
+.field input.filled + .placeholder,
+.field input:focus + .placeholder {
+    top: 0.5rem;
+    font-size: 12pt;
+}
\ No newline at end of file
diff --git a/src/components/wizard/WizardCompnent.tsx b/src/components/wizard/WizardCompnent.tsx
index 27bb167..7e44897 100644
--- a/src/components/wizard/WizardCompnent.tsx
+++ b/src/components/wizard/WizardCompnent.tsx
@@ -1,21 +1,39 @@
 import React, { useState } from "react"
 
+export type WizardComponentProps<T extends object> = {
+  children? : Children<T>
+  startingData : T
+}
 
-const test = (
-  <WizardComponent>
-    <WizardStep>{() => {
-      
-    }}</WizardStep>
-    <WizardStep></WizardStep>
-  </WizardComponent>
-)
-
-export type WizardComponentProps = {
-  children : React.ReactElement<>
+// type Children<T> = React.ReactElement<WizardStep<T>>[] | React.ReactElement<WizardStep<T>>
+type Children<T> = Child<T>[] | Child<T>
+type Child<T> = (handler : WizardStepHandler<T>) => React.ReactNode
+export type WizardStepHandler<T> = {
+  data : T,
+  submitStep : (data : T) => void
 }
 
-export default function WizardComponent() {
-  const [isComplete, setIsComplete] = useState(false);
+const WizardComponent = <T extends object>({ children, startingData} : WizardComponentProps<T>) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [stepData, setStepData] = useState<T>(startingData);
+  
+  let childrenArray = Array.isArray(children) ?  children : [children];
   
+  const child = childrenArray[currentStep];
+  if (!child) {
+    return null;
+  }
   
-}
\ No newline at end of file
+  const onSubmitStep = (data : T) => {
+    setStepData({...stepData, ...data});
+    setCurrentStep(currentStep + 1);
+  }
+  
+  return (
+    <div>
+      {child({data : stepData, submitStep : onSubmitStep})}
+    </div>
+  )
+}
+
+export default WizardComponent;
diff --git a/src/components/wizard/WizardStepComponent.tsx b/src/components/wizard/WizardStepComponent.tsx
deleted file mode 100644
index c4e2246..0000000
--- a/src/components/wizard/WizardStepComponent.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ReactNode } from "react"
-
-
-export type WizardStepCompoentParams = {
-  
-}
-
-export type WizardStepComponentFunction = () => ReactNode
\ No newline at end of file
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index ee40a8b..597ab38 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -1,5 +1,5 @@
-import { Entity } from "../../types/gen/Entity";
-import CharacterPortrait from "../../components/ChracterPortrait";
+import Input from "../../components/input/Input";
+import WizardComponent, { WizardStepHandler } from "../../components/wizard/WizardCompnent";
 
 const Home = () => {
   return (
@@ -7,9 +7,26 @@ const Home = () => {
       <div className="flex flex-col gap-6 justify-center items-center px-56">
         {/* <CharacterPortrait image={{image : "test_character.png", x_offset: -90}} icon="moon"/>
         <CharacterPortrait/> */}
+        <WizardComponent startingData={{name : "Test"}}>
+          {Step1}
+        </WizardComponent>
       </div>
     </div>
   );
 };
 
 export default Home;
+
+type TestType = {
+  name?: string;
+  age?: number;
+};
+
+function Step1({ data, submitStep } : WizardStepHandler<TestType>) {
+  return (
+    <div className="flex flex-col gap-2">
+      <Input label="Test" placeholder="test"/>
+      <Input label="Test" placeholder="test"/>
+    </div>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d3e4013..0fff9b9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,6 +54,7 @@ export default {
         'theme-secondary' : 'var(--secondary-color)',
         'theme-accent' : 'var(--accent-color)',
         'theme-background' : 'var(--background-color)',
+        'theme-background-secondary' : 'var(--background-alt-color)',
         'theme-font-primary' : 'var(--font-color-primary)',
         'theme-font-secondary' : 'var(--font-color-secondary)',
         'alt-background' : 'var(--secondary-background-color)',

From 498826c2b34f3cc4de3ca6ee9c0c8a7a5c0dab6b Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Tue, 5 Nov 2024 17:56:15 -0700
Subject: [PATCH 3/9] input component completed

---
 src-tauri/src/commands/themes.rs |  3 +++
 src-types/src/theme.rs           |  1 +
 src/common/theme.ts              |  1 +
 src/components/input/Input.tsx   | 11 +++++++++--
 src/components/input/input.css   | 24 ++++++++++++++++++++++++
 src/routes/Home/Home.tsx         |  4 ++--
 src/types/gen/VitruvianTheme.ts  |  2 +-
 tailwind.config.js               |  2 +-
 8 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src-tauri/src/commands/themes.rs b/src-tauri/src/commands/themes.rs
index fff9d20..ebb6a09 100644
--- a/src-tauri/src/commands/themes.rs
+++ b/src-tauri/src/commands/themes.rs
@@ -13,6 +13,7 @@ pub fn get_current_theme() -> VitruvianTheme {
         font_color_primary: "#ffffff".to_string(),
         font_color_secondary: "#909090".to_string(),
         font_primary: "CrimsonPro".to_string(),
+        error: "#ff0000".to_string(),
     }
 }
 
@@ -31,6 +32,7 @@ pub fn get_theme(theme_id: String) -> VitruvianTheme {
             font_color_primary: "#ffffff".to_string(),
             font_color_secondary: "#909090".to_string(),
             font_primary: "CrimsonPro".to_string(),
+            error: "#ff0000".to_string(),
         }
     } else if &theme_id == "red" {
         VitruvianTheme {
@@ -42,6 +44,7 @@ pub fn get_theme(theme_id: String) -> VitruvianTheme {
             font_color_primary: "#ffffff".to_string(),
             font_color_secondary: "#909090".to_string(),
             font_primary: "CrimsonPro".to_string(),
+            error: "#ff0000".to_string(),
         }
     } else {
         get_current_theme()
diff --git a/src-types/src/theme.rs b/src-types/src/theme.rs
index 17ccaff..70336ca 100644
--- a/src-types/src/theme.rs
+++ b/src-types/src/theme.rs
@@ -12,4 +12,5 @@ pub struct VitruvianTheme {
     pub font_color_primary: String,
     pub font_color_secondary: String,
     pub font_primary: String,
+    pub error: String
 }
diff --git a/src/common/theme.ts b/src/common/theme.ts
index 999a9f1..bddee41 100644
--- a/src/common/theme.ts
+++ b/src/common/theme.ts
@@ -12,6 +12,7 @@ export function applyTheme(theme: VitruvianTheme) {
   document.documentElement.style.setProperty("--background-alt-color", theme.background_alt);
   document.documentElement.style.setProperty("--font-color-primary", theme.font_color_primary);
   document.documentElement.style.setProperty("--font-color-secondary", theme.font_color_secondary);
+  document.documentElement.style.setProperty("--error-color", theme.error);
   document.documentElement.style.setProperty("background-color", theme.background);
   document.documentElement.style.setProperty("color", theme.font_color_primary);
   document.documentElement.style.setProperty("font-family", theme.font_primary);
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index b68ab7a..015114f 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -1,8 +1,9 @@
 import { forwardRef } from "react";
 import "./input.css"
+import Icon from "../Icon";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  label: string;
+  
 };
 
 const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref) => {
@@ -23,9 +24,15 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref)
         <input className="p-1 text-theme-font-primary bg-theme-background-secondary border border-white rounded-md" 
           ref={ref} 
           type="text" 
-          {...{...props, onBlur, placeholder: undefined}} 
+          {...{...props, 
+            autoCapitalize : props.autoCapitalize ? props.autoCapitalize : false, 
+            autoComplete : props.autoComplete ? props.autoComplete : false,
+            onBlur, 
+            placeholder: undefined}
+          } 
         />
       <span className="placeholder">{placeholder}</span>
+      <span className="error"><Icon variant="warning"/></span>
       </label>
     );
 })
diff --git a/src/components/input/input.css b/src/components/input/input.css
index 29a9615..54dc3ca 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -15,8 +15,10 @@ input:focus::placeholder {
 
 .field input {
     padding: 0.5rem;
+    padding-right: calc(0.5rem + 28px);
     font-size: 16pt;
     background-color: var(--background-color);
+    outline: none;;
 }
 
 .field .placeholder {
@@ -35,4 +37,26 @@ input:focus::placeholder {
 .field input:focus + .placeholder {
     top: 0.5rem;
     font-size: 12pt;
+}
+
+.field input:invalid ~ .error {
+    visibility: visible;;
+    
+}
+
+.field input:invalid {
+    border-color: var(--error-color);
+}
+
+.field input:invalid + .placeholder {
+    color: var(--error-color);
+}
+
+.field .error {
+    position: absolute;
+    top: calc(50% + 2px);
+    transform: translateY(-50%);
+    fill: var(--error-color);
+    right:1.0rem;
+    visibility: hidden;
 }
\ No newline at end of file
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index 597ab38..b5e255e 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -25,8 +25,8 @@ type TestType = {
 function Step1({ data, submitStep } : WizardStepHandler<TestType>) {
   return (
     <div className="flex flex-col gap-2">
-      <Input label="Test" placeholder="test"/>
-      <Input label="Test" placeholder="test"/>
+      <Input type="email" placeholder="Email"/>
+      <Input placeholder="Name"/>
     </div>
   )
 }
diff --git a/src/types/gen/VitruvianTheme.ts b/src/types/gen/VitruvianTheme.ts
index 6ffe73b..6243150 100644
--- a/src/types/gen/VitruvianTheme.ts
+++ b/src/types/gen/VitruvianTheme.ts
@@ -3,4 +3,4 @@
 /**
  * This defines a theme in the program.
  */
-export type VitruvianTheme = { primary: string, secondary: string, accent: string, background: string, background_alt: string, font_color_primary: string, font_color_secondary: string, font_primary: string, };
+export type VitruvianTheme = { primary: string, secondary: string, accent: string, background: string, background_alt: string, font_color_primary: string, font_color_secondary: string, font_primary: string, error: string, };
diff --git a/tailwind.config.js b/tailwind.config.js
index 0fff9b9..5137ea3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -57,7 +57,7 @@ export default {
         'theme-background-secondary' : 'var(--background-alt-color)',
         'theme-font-primary' : 'var(--font-color-primary)',
         'theme-font-secondary' : 'var(--font-color-secondary)',
-        'alt-background' : 'var(--secondary-background-color)',
+        'theme-error' : 'var(--error-color)',
       },
     },
   },

From 19f9f81616bdfab8bb90367bb214a33769a0e1cc Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Tue, 5 Nov 2024 22:30:55 -0700
Subject: [PATCH 4/9] Got some progress on the wizard

---
 src/components/input/Input.tsx                | 38 ++++++++-----
 src/components/input/input.css                | 10 ++--
 src/components/wizard/WizardCompnent.tsx      | 31 ++++++-----
 .../wizard/WizardComponentContext.ts          | 10 ++++
 src/routes/Home/Home.tsx                      | 54 +++++++++++++++----
 5 files changed, 103 insertions(+), 40 deletions(-)
 create mode 100644 src/components/wizard/WizardComponentContext.ts

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 015114f..32fb8bc 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -1,13 +1,14 @@
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import "./input.css"
 import Icon from "../Icon";
+import { UnitSize, parseUnitSize } from "../../common/types";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className"> & {
+  width?: UnitSize;
 };
 
 const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref) => {
-  const { placeholder } = props;
+  const { placeholder, width = "full", value} = props;
   
   const onBlur = (event : React.FocusEvent<HTMLInputElement>) => {
     props.onBlur && props.onBlur(event);
@@ -19,22 +20,35 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref)
     }
   }
   
+  const widthStyle = width ? {width : parseUnitSize(width)} : {};
+  
   return (
-      <label className="field">
-        <input className="p-1 text-theme-font-primary bg-theme-background-secondary border border-white rounded-md" 
+      <label className="field mt-2" style={widthStyle}>
+        <input 
+          className={`${(value !== undefined && value !== "") ? "filled " : ""}text-theme-font-primary bg-theme-background-secondary border border-white rounded-md`} 
+          style={widthStyle}
           ref={ref} 
           type="text" 
           {...{...props, 
-            autoCapitalize : props.autoCapitalize ? props.autoCapitalize : false, 
-            autoComplete : props.autoComplete ? props.autoComplete : false,
-            onBlur, 
+            autoCapitalize : props.autoCapitalize ? props.autoCapitalize : "false", 
+            autoComplete : props.autoComplete ? props.autoComplete : "false", 
+            onBlur,
             placeholder: undefined}
           } 
         />
-      <span className="placeholder">{placeholder}</span>
-      <span className="error"><Icon variant="warning"/></span>
+        <span className="placeholder">{placeholder}</span>
+        <span className="error"><Icon variant="warning"/></span>
       </label>
     );
 })
 
-export default Input;
\ No newline at end of file
+export default Input;
+
+export function useInput(props : InputProps) : [string, React.Dispatch<React.SetStateAction<string>>, React.ReactNode] {
+  
+  const value : string = props.value ? Array.isArray(props.value) ? props.value[0] : props.value : "";
+  const [input, setInput] = useState<string>(value);
+  const component = <Input {...props} value={input} onChange={(event) => setInput(event.target.value)}/>;
+  
+  return [input, setInput, component]
+}
\ No newline at end of file
diff --git a/src/components/input/input.css b/src/components/input/input.css
index 54dc3ca..b9c9f39 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -10,15 +10,17 @@ input:focus::placeholder {
     border: none;
     appearance: none;
     outline: none;
-    padding: 0.5rem;
+    margin: 0.5rem;
 }
 
 .field input {
     padding: 0.5rem;
     padding-right: calc(0.5rem + 28px);
+    padding-left: 1.0rem;
     font-size: 16pt;
     background-color: var(--background-color);
-    outline: none;;
+    outline: none;
+    user-select: none;
 }
 
 .field .placeholder {
@@ -31,11 +33,13 @@ input:focus::placeholder {
     background-color: var(--background-color);
     padding: 0 5px;
     transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
+    user-select: none;
+    border-radius: 5px;
 }
 
 .field input.filled + .placeholder,
 .field input:focus + .placeholder {
-    top: 0.5rem;
+    top: 0rem;
     font-size: 12pt;
 }
 
diff --git a/src/components/wizard/WizardCompnent.tsx b/src/components/wizard/WizardCompnent.tsx
index 7e44897..dec9182 100644
--- a/src/components/wizard/WizardCompnent.tsx
+++ b/src/components/wizard/WizardCompnent.tsx
@@ -1,38 +1,41 @@
-import React, { useState } from "react"
+import { useState } from "react"
+import {WizardComponentContext} from "./WizardComponentContext"
 
 export type WizardComponentProps<T extends object> = {
-  children? : Children<T>
-  startingData : T
+  startingData: T;
+  onWizardComplete? : (data: T) => void;
+  children: React.ReactNode | React.ReactNode[];
 }
 
-// type Children<T> = React.ReactElement<WizardStep<T>>[] | React.ReactElement<WizardStep<T>>
-type Children<T> = Child<T>[] | Child<T>
-type Child<T> = (handler : WizardStepHandler<T>) => React.ReactNode
 export type WizardStepHandler<T> = {
   data : T,
   submitStep : (data : T) => void
 }
 
-const WizardComponent = <T extends object>({ children, startingData} : WizardComponentProps<T>) => {
+const WizardComponent = <T extends object>({ children, startingData, onWizardComplete = () => {} } : WizardComponentProps<T>) => {
   const [currentStep, setCurrentStep] = useState(0);
-  const [stepData, setStepData] = useState<T>(startingData);
+  const [data, setData] = useState<T>(startingData);
   
   let childrenArray = Array.isArray(children) ?  children : [children];
   
-  const child = childrenArray[currentStep];
-  if (!child) {
+  if(currentStep >= childrenArray.length) {
+    onWizardComplete(data);
+  }
+  
+  const Child = childrenArray[currentStep];
+  if (!Child) {
     return null;
   }
   
   const onSubmitStep = (data : T) => {
-    setStepData({...stepData, ...data});
+    setData({...data, ...data});
     setCurrentStep(currentStep + 1);
   }
   
   return (
-    <div>
-      {child({data : stepData, submitStep : onSubmitStep})}
-    </div>
+    <WizardComponentContext.Provider value={{ data: data, submitStep : onSubmitStep}}>
+      {Child}
+    </WizardComponentContext.Provider>
   )
 }
 
diff --git a/src/components/wizard/WizardComponentContext.ts b/src/components/wizard/WizardComponentContext.ts
new file mode 100644
index 0000000..5cd97f2
--- /dev/null
+++ b/src/components/wizard/WizardComponentContext.ts
@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import { WizardStepHandler } from "./WizardCompnent";
+
+export type WizardComponentContextData = WizardStepHandler<any>
+
+export const WizardComponentContext = createContext<WizardComponentContextData | null>(null);
+
+export default function useWizardComponentContext<T>() : WizardStepHandler<T> {
+  return useContext(WizardComponentContext) as WizardStepHandler<T>;
+};
\ No newline at end of file
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index b5e255e..9e5e0b8 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -1,15 +1,26 @@
-import Input from "../../components/input/Input";
+import { useState } from "react";
+import Input, { useInput } from "../../components/input/Input";
 import WizardComponent, { WizardStepHandler } from "../../components/wizard/WizardCompnent";
+import Modal from "../../components/Modal";
+import useWizardComponentContext from "../../components/wizard/WizardComponentContext";
+import CharacterPortrait from "../../components/ChracterPortrait";
 
 const Home = () => {
+  
+  const [open, setOpen] = useState(false);
+  
   return (
     <div className="py-10">
       <div className="flex flex-col gap-6 justify-center items-center px-56">
-        {/* <CharacterPortrait image={{image : "test_character.png", x_offset: -90}} icon="moon"/>
-        <CharacterPortrait/> */}
-        <WizardComponent startingData={{name : "Test"}}>
-          {Step1}
-        </WizardComponent>
+        <button className="border p-2 rounded-md w-16" onClick={() => setOpen(true)}>Test</button>
+        <CharacterPortrait image={{image : "test_character.png", x_offset: 90, scale:200}} icon="moon"/>
+        <CharacterPortrait/>
+        <Modal active={open} setActive={setOpen}>
+            <WizardComponent startingData={{name : "Test Testington", email: "test@test.com"}} onWizardComplete={() => setOpen(false)}>
+              <Step1/>
+              <Step2/>
+            </WizardComponent>
+        </Modal>
       </div>
     </div>
   );
@@ -18,15 +29,36 @@ const Home = () => {
 export default Home;
 
 type TestType = {
+  email?: string;
   name?: string;
-  age?: number;
 };
 
-function Step1({ data, submitStep } : WizardStepHandler<TestType>) {
+function Step1() {
+  
+  const { data, submitStep} = useWizardComponentContext<TestType>()
+  
+  const [email, _setEmail, EmailInput] = useInput({
+    width: "25rem",
+    placeholder: "Email",
+    value: data.email,
+    type: "email"
+  });
+  
   return (
-    <div className="flex flex-col gap-2">
-      <Input type="email" placeholder="Email"/>
-      <Input placeholder="Name"/>
+    <div className="flex flex-col justify-center items-center py-10 gap-2 w-[80vw] bg-theme-background border rounded-lg">
+      {EmailInput}
+      <button className="border p-2 rounded-md w-16" onClick={() => submitStep({email})}>Next</button>
+    </div>
+  )
+}
+
+function Step2() {
+  const { data, submitStep} = useWizardComponentContext<TestType>()
+  
+  return (
+    <div className="flex flex-col justify-center items-center py-10 gap-2 w-[80vw] bg-theme-background border rounded-lg">
+      <div>Your Email: {data.email}</div>
+      <button className="border p-2 rounded-md w-16" onClick={() => submitStep({})}>Done</button>
     </div>
   )
 }

From d66efa7611103e4b304aa84d36294dbe38abb09d Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Thu, 7 Nov 2024 09:59:11 -0700
Subject: [PATCH 5/9] Wizard component coming along well, need to make a story

---
 src/components/Modal.tsx                 | 22 +++++++++---
 src/components/wizard/WizardCompnent.tsx | 44 ++++++++++++++++++------
 src/routes/Home/Home.tsx                 | 17 ++++++---
 3 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 57ee657..f4826cb 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,5 +1,6 @@
 import { CSSProperties, useState } from "react"
 import { createPortal } from "react-dom"
+import { UnitSize, parseUnitSize } from "../common/types"
 
 /** The Props for the modal component */
 export type ModalProps = {
@@ -17,6 +18,8 @@ export type ModalProps = {
   noTransition?: boolean,
   /** Whether the modal should allow background scrolling or not */
   allowBackgroundScroll?: boolean,
+  width? : UnitSize,
+  height? : UnitSize
 }
 
 /** This is the modal component for Vitruvian VTT. Unlike other Modals, the parrent of the modal is responsible for controlling the active state */
@@ -27,7 +30,9 @@ export default function Modal({
   onOpen = () => {},
   onClose = () => {},
   noTransition = false,
-  allowBackgroundScroll = false
+  allowBackgroundScroll = false,
+  width = "full",
+  height = "full"
 } : ModalProps) {
   
   const [style, setStyle] = useState<CSSProperties>({
@@ -52,9 +57,16 @@ export default function Modal({
     }
   }
   
-  return active ? createPortal(<div className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-black bg-opacity-45" style={noTransition ? undefined : style} onClick={closeFunction}>
-    <div className="z-20" onClick={event => event.stopPropagation()}>
-      {typeof children === "function" ? children(closeFunction) : children}
+  const pos = {
+    width : parseUnitSize(width),
+    height : parseUnitSize(height)
+  }
+  
+  return active ? createPortal((
+    <div className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-black bg-opacity-45" style={noTransition ? undefined : style} onClick={closeFunction}>
+      <div className="z-20" style={pos} onClick={event => event.stopPropagation()}>
+        {typeof children === "function" ? children(closeFunction) : children}
+      </div>
     </div>
-  </div>, document.body) : null;
+  ), document.body) : null;
 }
\ No newline at end of file
diff --git a/src/components/wizard/WizardCompnent.tsx b/src/components/wizard/WizardCompnent.tsx
index dec9182..69df6ca 100644
--- a/src/components/wizard/WizardCompnent.tsx
+++ b/src/components/wizard/WizardCompnent.tsx
@@ -3,16 +3,24 @@ import {WizardComponentContext} from "./WizardComponentContext"
 
 export type WizardComponentProps<T extends object> = {
   startingData: T;
+  onWizardAbort : () => void;
   onWizardComplete? : (data: T) => void;
   children: React.ReactNode | React.ReactNode[];
 }
 
 export type WizardStepHandler<T> = {
   data : T,
-  submitStep : (data : T) => void
+  abort: () => void,
+  submitStep : (data : T) => void,
+  backStep : () => void
 }
 
-const WizardComponent = <T extends object>({ children, startingData, onWizardComplete = () => {} } : WizardComponentProps<T>) => {
+const WizardComponent = <T extends object>({ 
+  children, 
+  startingData, 
+  onWizardComplete = () => {}, 
+  onWizardAbort 
+} : WizardComponentProps<T>) => {
   const [currentStep, setCurrentStep] = useState(0);
   const [data, setData] = useState<T>(startingData);
   
@@ -22,19 +30,35 @@ const WizardComponent = <T extends object>({ children, startingData, onWizardCom
     onWizardComplete(data);
   }
   
-  const Child = childrenArray[currentStep];
-  if (!Child) {
-    return null;
+  const onSubmitStep = (d : T) => {
+    setData({...data, ...d});
+    setCurrentStep(currentStep + 1);
   }
   
-  const onSubmitStep = (data : T) => {
-    setData({...data, ...data});
-    setCurrentStep(currentStep + 1);
+  const onBackStep = () => {
+    setCurrentStep(currentStep - 1);
+  }
+  
+  const onAbortProcess = () => {
+    setCurrentStep(0)
+    onWizardAbort();
   }
   
   return (
-    <WizardComponentContext.Provider value={{ data: data, submitStep : onSubmitStep}}>
-      {Child}
+    <WizardComponentContext.Provider value={{ data: data, submitStep : onSubmitStep, backStep : onBackStep, abort: onAbortProcess}}>
+      <div className="relative w-full h-full">
+        {childrenArray.map((child, index) => {
+          const currentPos = (index - currentStep) * 100;
+          const style = {
+            transform : `translateX(calc(${currentPos}vw - 50%)) translateY(-50%)`, 
+            left : `50%`, 
+            top : '50%'
+          }
+          return <div style={style} className={`absolute transition-all duration-300 ${currentStep === index ? "opacity-100" : "opacity-0"}`}>      
+            {child}
+          </div>
+        })}
+      </div>
     </WizardComponentContext.Provider>
   )
 }
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index 9e5e0b8..fa35714 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -16,7 +16,7 @@ const Home = () => {
         <CharacterPortrait image={{image : "test_character.png", x_offset: 90, scale:200}} icon="moon"/>
         <CharacterPortrait/>
         <Modal active={open} setActive={setOpen}>
-            <WizardComponent startingData={{name : "Test Testington", email: "test@test.com"}} onWizardComplete={() => setOpen(false)}>
+            <WizardComponent onWizardAbort={() => setOpen(false)} startingData={{name : "Test Testington", email: "test@test.com"}} onWizardComplete={() => setOpen(false)}>
               <Step1/>
               <Step2/>
             </WizardComponent>
@@ -35,7 +35,7 @@ type TestType = {
 
 function Step1() {
   
-  const { data, submitStep} = useWizardComponentContext<TestType>()
+  const { data, submitStep, abort} = useWizardComponentContext<TestType>()
   
   const [email, _setEmail, EmailInput] = useInput({
     width: "25rem",
@@ -47,18 +47,25 @@ function Step1() {
   return (
     <div className="flex flex-col justify-center items-center py-10 gap-2 w-[80vw] bg-theme-background border rounded-lg">
       {EmailInput}
-      <button className="border p-2 rounded-md w-16" onClick={() => submitStep({email})}>Next</button>
+      <div className="w-full flex justify-center gap-4">
+        <button className="border p-2 rounded-md w-16" onClick={abort}>Cancel</button>
+        <button className="border p-2 rounded-md w-16" onClick={() => submitStep({email})}>Next</button>
+      </div>
     </div>
   )
 }
 
 function Step2() {
-  const { data, submitStep} = useWizardComponentContext<TestType>()
+  const { data, submitStep, backStep, abort} = useWizardComponentContext<TestType>()
   
   return (
     <div className="flex flex-col justify-center items-center py-10 gap-2 w-[80vw] bg-theme-background border rounded-lg">
       <div>Your Email: {data.email}</div>
-      <button className="border p-2 rounded-md w-16" onClick={() => submitStep({})}>Done</button>
+      <div className="w-full flex justify-center gap-4">
+        <button className="border p-2 rounded-md w-16" onClick={backStep}>Back</button>
+        <button className="border p-2 rounded-md w-16" onClick={abort}>Cancel</button>
+        <button className="border p-2 rounded-md w-16" onClick={() => submitStep({})}>Done</button>
+      </div>
     </div>
   )
 }

From e8f91fa4d85d2fbf729331faa1e332be7ab0f53b Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Thu, 7 Nov 2024 20:10:36 -0700
Subject: [PATCH 6/9] about to work on storied for both componenets

---
 src/components/input/Input.tsx | 31 +++++++++++++++++++------------
 src/routes/Home/Home.tsx       |  2 +-
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 32fb8bc..455d846 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -5,10 +5,11 @@ import { UnitSize, parseUnitSize } from "../../common/types";
 
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className"> & {
   width?: UnitSize;
+  onValueChange? : (value : string) => void;
 };
 
 const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref) => {
-  const { placeholder, width = "full", value} = props;
+  const { placeholder, width = "full", value, onValueChange = () => {} } = props;
   
   const onBlur = (event : React.FocusEvent<HTMLInputElement>) => {
     props.onBlur && props.onBlur(event);
@@ -20,23 +21,29 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref)
     }
   }
   
+  const onChange = (event : React.ChangeEvent<HTMLInputElement>) => {
+    onValueChange(event.target.value);
+    props.onChange && props.onChange(event);
+  }
+  
   const widthStyle = width ? {width : parseUnitSize(width)} : {};
   
   return (
       <label className="field mt-2" style={widthStyle}>
-        <input 
+        <input
+          autoCapitalize="false"
+          autoComplete="false"
+          type="text"
+          ref={ref} 
+          {...props}
+          value={value}
           className={`${(value !== undefined && value !== "") ? "filled " : ""}text-theme-font-primary bg-theme-background-secondary border border-white rounded-md`} 
           style={widthStyle}
-          ref={ref} 
-          type="text" 
-          {...{...props, 
-            autoCapitalize : props.autoCapitalize ? props.autoCapitalize : "false", 
-            autoComplete : props.autoComplete ? props.autoComplete : "false", 
-            onBlur,
-            placeholder: undefined}
-          } 
+          onBlur={onBlur}
+          onChange={onChange}
+          placeholder={undefined}
         />
-        <span className="placeholder">{placeholder}</span>
+        <span className="placeholder hover:cursor-text">{placeholder}</span>
         <span className="error"><Icon variant="warning"/></span>
       </label>
     );
@@ -48,7 +55,7 @@ export function useInput(props : InputProps) : [string, React.Dispatch<React.Set
   
   const value : string = props.value ? Array.isArray(props.value) ? props.value[0] : props.value : "";
   const [input, setInput] = useState<string>(value);
-  const component = <Input {...props} value={input} onChange={(event) => setInput(event.target.value)}/>;
+  const component = <Input {...props} value={input} onValueChange={(value) => setInput(value)}/>;
   
   return [input, setInput, component]
 }
\ No newline at end of file
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index fa35714..35ba3ab 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -41,7 +41,7 @@ function Step1() {
     width: "25rem",
     placeholder: "Email",
     value: data.email,
-    type: "email"
+    type: "email",
   });
   
   return (

From 99518c7b0c237c076d198f3eed0ba803c816a09d Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Sun, 10 Nov 2024 14:05:56 -0700
Subject: [PATCH 7/9] Made a fix for inputs so that they work in the storybook

---
 .storybook/preview.ts          |  3 ++-
 package.json                   |  2 +-
 src-tauri/src/lib.rs           | 19 ++++++++++++++++++-
 src-tauri/src/main.rs          |  2 +-
 src-tauri/storybook.conf.json  | 34 ++++++++++++++++++++++++++++++++++
 src/components/input/Input.tsx |  5 ++++-
 src/components/input/input.css | 14 +++++---------
 src/stories/Input.stories.tsx  | 34 ++++++++++++++++++++++++++++++++++
 8 files changed, 99 insertions(+), 14 deletions(-)
 create mode 100644 src-tauri/storybook.conf.json
 create mode 100644 src/stories/Input.stories.tsx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index aba96b6..3fd6f4a 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -17,7 +17,8 @@ const theme : VitruvianTheme = {
     background_alt: "#2e2e2e",
     font_color_primary: "#ffffff",
     font_color_secondary: "#909090",
-    font_primary : "CrimsonPro"
+    font_primary : "CrimsonPro",
+    error: "#ff0000"
 }
 
 applyTheme(theme);
diff --git a/package.json b/package.json
index b6967a4..0e154b0 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "tauri": "tauri",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "tauri dev --config src-tauri/storybook.conf.json",
     "build-storybook": "storybook build"
   },
   "dependencies": {
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index c9ed9cd..77a0d07 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -30,7 +30,7 @@ fn set_test_data(data: Value) {
 }
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
-pub fn run() {
+pub fn run_main_app() {
     tauri::Builder::default()
         .plugin(tauri_plugin_shell::init())
         .invoke_handler(tauri::generate_handler![
@@ -45,3 +45,20 @@ pub fn run() {
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
+
+// #[cfg_attr(mobile, tauri::mobile_entry_point)]
+// pub fn run_storybook() {
+//     tauri::Builder::default()
+//         .plugin(tauri_plugin_shell::init())
+//         .invoke_handler(tauri::generate_handler![
+//             greet,
+//             get_test_data,
+//             set_test_data,
+//             themes::get_current_theme,
+//             themes::get_theme,
+//             themes::get_available_themes,
+//             themes::set_current_theme,
+//         ])
+//         .run(tauri::generate_context!())
+//         .expect("error while running tauri application");
+// }
\ No newline at end of file
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index d2ca89c..cb5c5ba 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -2,5 +2,5 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 fn main() {
-    vitruvian_vtt_lib::run()
+    vitruvian_vtt_lib::run_main_app()
 }
diff --git a/src-tauri/storybook.conf.json b/src-tauri/storybook.conf.json
new file mode 100644
index 0000000..1b756d9
--- /dev/null
+++ b/src-tauri/storybook.conf.json
@@ -0,0 +1,34 @@
+{
+  "productName": "vitruvian_vtt_storybook",
+  "version": "0.1.0",
+  "identifier": "com.vitruvian_vtt.storybook.app",
+  "build": {
+    "beforeDevCommand": "storybook dev -p 1421 --ci",
+    "devUrl": "http://localhost:1421",
+    "beforeBuildCommand": "storybook build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "Vitruvian VTT Storybook",
+        "width": 800,
+        "height": 600
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 455d846..4ee1ade 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -4,7 +4,9 @@ import Icon from "../Icon";
 import { UnitSize, parseUnitSize } from "../../common/types";
 
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className"> & {
+  /* The width of the input. Defaults to full */
   width?: UnitSize;
+  /* This is a callback that is called when the value of the input changes. This mirrors the `onChange` callback. */ 
   onValueChange? : (value : string) => void;
 };
 
@@ -29,7 +31,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref)
   const widthStyle = width ? {width : parseUnitSize(width)} : {};
   
   return (
-      <label className="field mt-2" style={widthStyle}>
+      <label className="field mt-2 h-full" style={widthStyle}>
         <input
           autoCapitalize="false"
           autoComplete="false"
@@ -51,6 +53,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref)
 
 export default Input;
 
+/* This hook is used to manage the state of an input that you use so you don't have to do them yourselves.*/
 export function useInput(props : InputProps) : [string, React.Dispatch<React.SetStateAction<string>>, React.ReactNode] {
   
   const value : string = props.value ? Array.isArray(props.value) ? props.value[0] : props.value : "";
diff --git a/src/components/input/input.css b/src/components/input/input.css
index b9c9f39..ea10141 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -1,16 +1,11 @@
-input:focus::placeholder {
-    color: white;
-    background-color: var(--color-background);
-    transform : translateY(-1rem);
-    transition: all 0.2s ease-in-out;
-}
-
 .field {
+    --animation-duration : 0.2s;
     position: relative;
     border: none;
     appearance: none;
     outline: none;
     margin: 0.5rem;
+    display: inline-block;
 }
 
 .field input {
@@ -32,14 +27,15 @@ input:focus::placeholder {
     font-size: 16pt;
     background-color: var(--background-color);
     padding: 0 5px;
-    transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
+    transition: top var(--animation-duration) ease-in-out, font-size var(--animation-duration) ease-in-out, transform var(--animation-duration) ease-in-out;
     user-select: none;
     border-radius: 5px;
 }
 
 .field input.filled + .placeholder,
 .field input:focus + .placeholder {
-    top: 0rem;
+    top: 0;
+    /* transform: translateY(calc(-16pt - 0.5rem)); */
     font-size: 12pt;
 }
 
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
new file mode 100644
index 0000000..97cc7ec
--- /dev/null
+++ b/src/stories/Input.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Input from "../components/input/Input";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Input Field',
+  // decorators : [
+  //   (story) => (
+  //     <div>
+  //       {story()}
+  //     </div>
+  //   )
+  // ],
+  component: Input,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The input component is used for taking in text input from the user. It will have all 
+    of the same props as a normal input field., plus some extra.
+*/
+export const DefaultInput: Story = {
+  args: {width: "12rem", placeholder: "test", type: "email"},
+};
\ No newline at end of file

From 4c935ecb3b3abaf5eb4ae9b9117d214c4d160c31 Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Mon, 11 Nov 2024 22:04:53 -0700
Subject: [PATCH 8/9] storybook done for now!

---
 src-tauri/src/commands/themes.rs          |  1 -
 src/components/Modal.tsx                  | 12 +++---
 src/stories/CharacterPortrait.stories.tsx | 12 +++---
 src/stories/Modal.stories.tsx             | 50 +++++++++++++++++++++++
 4 files changed, 62 insertions(+), 13 deletions(-)
 create mode 100644 src/stories/Modal.stories.tsx

diff --git a/src-tauri/src/commands/themes.rs b/src-tauri/src/commands/themes.rs
index ebb6a09..448f5bf 100644
--- a/src-tauri/src/commands/themes.rs
+++ b/src-tauri/src/commands/themes.rs
@@ -21,7 +21,6 @@ pub fn get_current_theme() -> VitruvianTheme {
 #[tauri::command]
 pub fn get_theme(theme_id: String) -> VitruvianTheme {
     // This is a dummy functions for now, will be properly implemented in #30
-
     if &theme_id == "green" {
         VitruvianTheme {
             primary: "#a5d6a7".to_string(),
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index f4826cb..7b4c011 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -5,7 +5,7 @@ import { UnitSize, parseUnitSize } from "../common/types"
 /** The Props for the modal component */
 export type ModalProps = {
   /** The content of the modal. This can be any react component or a function that takes in one function and returns any component. The input to that function is a function that closes the model */
-  children: ((close : () => void) => React.ReactNode) | React.ReactNode,
+  children?: ((close : () => void) => React.ReactNode) | React.ReactNode,
   /** Whether the modal is active or not. */
   active: boolean,
   /** A function that sets the active state of the value passed into the modal */
@@ -31,8 +31,8 @@ export default function Modal({
   onClose = () => {},
   noTransition = false,
   allowBackgroundScroll = false,
-  width = "full",
-  height = "full"
+  width = "hug",
+  height = "hug"
 } : ModalProps) {
   
   const [style, setStyle] = useState<CSSProperties>({
@@ -59,12 +59,12 @@ export default function Modal({
   
   const pos = {
     width : parseUnitSize(width),
-    height : parseUnitSize(height)
+    height : parseUnitSize(height),
   }
   
   return active ? createPortal((
-    <div className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-black bg-opacity-45" style={noTransition ? undefined : style} onClick={closeFunction}>
-      <div className="z-20" style={pos} onClick={event => event.stopPropagation()}>
+    <div className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-black bg-opacity-45 z-40" style={noTransition ? undefined : style} onClick={closeFunction}>
+      <div style={pos} onClick={event => event.stopPropagation()}>
         {typeof children === "function" ? children(closeFunction) : children}
       </div>
     </div>
diff --git a/src/stories/CharacterPortrait.stories.tsx b/src/stories/CharacterPortrait.stories.tsx
index 6cfd089..703f5f4 100644
--- a/src/stories/CharacterPortrait.stories.tsx
+++ b/src/stories/CharacterPortrait.stories.tsx
@@ -6,11 +6,11 @@ import CharacterPortrait from '../components/ChracterPortrait';
 const meta = {
   title: 'Character Portrait',
   component: CharacterPortrait,
-  decorators:[
-    (story) => {
-      return <div className='w-[80vw]'>{story()}</div>
-    }
-  ],
+  // decorators:[
+  //   (story) => {
+  //     return <div className='w-[80vw]'>{story()}</div>
+  //   }
+  // ],
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof meta>;
 /** The Character Portrait when an image is defined */
 export const ProfileImage: Story = {
   args: {
-    image : {image : "test_character.png", x_offset: 7, y_offset: -2, scale: 300}
+    image : {image : "test_character.png", x_offset: 7, y_offset: -2, scale: 300},
   },
 };
 
diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx
new file mode 100644
index 0000000..94d816a
--- /dev/null
+++ b/src/stories/Modal.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api"
+import Modal from "../components/Modal";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Modal',
+  component: Modal,
+  
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The input component is used for taking in text input from the user. It will have all 
+    of the same props as a normal input field., plus some extra.
+*/
+export const DefaultModal: Story = {
+  args: {
+    active: false,
+  },
+  render: (args) => {
+    const [{ active }, updateArgs] = useArgs();
+    
+    const setActive = (value: boolean) => {
+      updateArgs({active : value});
+    }
+    
+    return (
+      <>
+        <button className="border p-2 rounded-md w-16 text-nowrap" onClick={() => setActive(true)}>Open Modal</button>
+        <Modal active={active} setActive={setActive}>
+          <div className="w-[80vw] bg-theme-background border border-white p-4 rounded-lg">
+            <h1>Modal</h1>
+            <p>Modal content</p>
+          </div>
+        </Modal>
+      </>
+    )
+  },
+};
\ No newline at end of file

From 7dc790597fb10e562186a16a69fb3babb13eabea Mon Sep 17 00:00:00 2001
From: Brooks Palin <brookspalin710@gmail.com>
Date: Mon, 11 Nov 2024 22:26:03 -0700
Subject: [PATCH 9/9] running rust format

---
 package.json           | 1 +
 src-tauri/src/lib.rs   | 2 +-
 src-types/src/theme.rs | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0e154b0..d6f2c56 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview",
     "tauri": "tauri",
     "storybook": "tauri dev --config src-tauri/storybook.conf.json",
+    "fmt" : "cargo fmt --manifest-path src-tauri/Cargo.toml & cargo fmt --manifest-path src-types/Cargo.toml & cargo fmt --manifest-path src-dbs/Cargo.toml",
     "build-storybook": "storybook build"
   },
   "dependencies": {
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 77a0d07..2a79f8f 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -61,4 +61,4 @@ pub fn run_main_app() {
 //         ])
 //         .run(tauri::generate_context!())
 //         .expect("error while running tauri application");
-// }
\ No newline at end of file
+// }
diff --git a/src-types/src/theme.rs b/src-types/src/theme.rs
index 70336ca..bfdbad3 100644
--- a/src-types/src/theme.rs
+++ b/src-types/src/theme.rs
@@ -12,5 +12,5 @@ pub struct VitruvianTheme {
     pub font_color_primary: String,
     pub font_color_secondary: String,
     pub font_primary: String,
-    pub error: String
+    pub error: String,
 }