From d73e2d14445b7d152f6e451cdaa7ae05d922f0a9 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 27 Mar 2024 15:59:43 -0400
Subject: [PATCH 1/3] preliminarily, some div scaffolding

---
 app/components/LoadingBar.tsx   | 47 +++++++++++++++++++++++++++++++++
 app/components/index.tsx        |  2 ++
 app/routes/ComponentLibrary.tsx | 34 +++++++++++++++++++-----
 3 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 app/components/LoadingBar.tsx

diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx
new file mode 100644
index 0000000000..cf2969c641
--- /dev/null
+++ b/app/components/LoadingBar.tsx
@@ -0,0 +1,47 @@
+import { twMerge } from 'tailwind-merge';
+import { H4 } from '.';
+
+interface LoadingBarProps{
+  label?: string;
+  progress?: number;
+  variant?: string;
+  pulsing?: boolean;
+  message?: string;
+}
+export const LoadingBar = ({
+  label,
+  progress = 50,
+  variant = 'primary',
+  pulsing = false,
+  message,
+}: LoadingBarProps) => {
+
+  function getVariantClassNames(variant: string) {
+    switch (variant) {
+      case "secondary": {
+        return " bg-brand-secondary text-white ";
+      }
+      case "primary":
+      default: {
+        return " bg-brand-primary text-white ";
+      }
+    }
+  }
+  const progressClassName = twMerge(
+    "h-2.5 rounded-full",
+    getVariantClassNames(variant),
+  );
+
+  return (
+    <div className="w-full h-full flex flex-row justify-center items-center bg-ui-background ">
+      {label && <label>{label}</label>}
+      <div className="w-full bg-gray-200 rounded-full h-2.5">
+        <div 
+          className={progressClassName} 
+          style={{width: progress + '%'}}
+        />
+      </div>
+      {message && <H4>{message}</H4>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 28c7eb3efc..2065c8c20c 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -6,6 +6,7 @@ import { Input } from "./Input";
 import { H4 } from "./H4";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
+import { LoadingBar } from "./LoadingBar";
 import { LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
 export {
@@ -17,6 +18,7 @@ export {
   ItemPicker,
   Textarea,
   Input,
+  LoadingBar,
   LoadingDotsBricks,
   LoadingDotsTyping,
 };
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
index 41bbfb7f8d..54814f8451 100644
--- a/app/routes/ComponentLibrary.tsx
+++ b/app/routes/ComponentLibrary.tsx
@@ -1,11 +1,33 @@
-import { Button } from "~/components/Button";
-import { ButtonLink } from "~/components/ButtonLink";
+import { 
+  Button,
+  ButtonLink,
+  H4, 
+  LoadingBar
+} from "~/components";
+
 
 export default function ComponentLibrary () {
   return(
-  <>
-    <Button>Button</Button>
-    <ButtonLink to="/">Button with Link</ButtonLink>
-  </>
+    <div className='bg-ui-panel w-10/12 max-w-7xl h-full min-h-96 mx-auto my-6 rounded-lg p-6'>
+
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>Buttons</H4>
+        <div className="flex gap-2">
+          <Button>Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button disabled>Disabled</Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>ButtonLink</H4>
+        <ButtonLink to="/">Back to /</ButtonLink>
+      </div>
+
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>Loading Bar</H4>
+        <LoadingBar />
+      </div>
+    </div>
   );
 };
\ No newline at end of file

From 31784353a59c6625552b81ec2e0f0c369add2a40 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 27 Mar 2024 16:43:24 -0400
Subject: [PATCH 2/3] this works better

---
 app/components/ItemPicker.tsx   |  2 +-
 app/components/LoadingBar.tsx   | 13 ++++++++++---
 app/routes/ComponentLibrary.tsx | 27 ++++++++++++++++++++++++++-
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/components/ItemPicker.tsx b/app/components/ItemPicker.tsx
index a0949916ec..8e80dd2742 100644
--- a/app/components/ItemPicker.tsx
+++ b/app/components/ItemPicker.tsx
@@ -25,7 +25,7 @@ export const ItemPicker = ({
       onClick={handleSelected}
     >
       <img className="aspect-square min-w-20" {...imgProps} />
-      <div className="bg-gradient-to-t from-gray-700 to-transparent absolute top-0 left-0 w-full h-full"/>
+      <div className="bg-gradient-to-t from-gray-700 absolute top-0 left-0 w-full h-full"/>
       <H4 className="absolute bottom-0 left-2 drop-shadow-md">{label}</H4>
     </div>
   )
diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx
index cf2969c641..09993ce0eb 100644
--- a/app/components/LoadingBar.tsx
+++ b/app/components/LoadingBar.tsx
@@ -7,6 +7,7 @@ interface LoadingBarProps{
   variant?: string;
   pulsing?: boolean;
   message?: string;
+  wrapperClassName?: string;
 }
 export const LoadingBar = ({
   label,
@@ -14,6 +15,7 @@ export const LoadingBar = ({
   variant = 'primary',
   pulsing = false,
   message,
+  wrapperClassName : propsWrapperClassName,
 }: LoadingBarProps) => {
 
   function getVariantClassNames(variant: string) {
@@ -27,15 +29,20 @@ export const LoadingBar = ({
       }
     }
   }
+
+  const wrapperClassName = twMerge(
+    "w-full h-full flex flex-col justify-center items-center bg-ui-background p-4 gap-4",
+    propsWrapperClassName,
+  )
   const progressClassName = twMerge(
-    "h-2.5 rounded-full",
+    "h-2.5 rounded-full transition-all duration-1000",
     getVariantClassNames(variant),
   );
 
   return (
-    <div className="w-full h-full flex flex-row justify-center items-center bg-ui-background ">
+    <div className={wrapperClassName}>
       {label && <label>{label}</label>}
-      <div className="w-full bg-gray-200 rounded-full h-2.5">
+      <div className="w-full bg-gray-500 rounded-full h-2.5">
         <div 
           className={progressClassName} 
           style={{width: progress + '%'}}
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
index 54814f8451..9414bc40ee 100644
--- a/app/routes/ComponentLibrary.tsx
+++ b/app/routes/ComponentLibrary.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import { 
   Button,
   ButtonLink,
@@ -7,6 +8,22 @@ import {
 
 
 export default function ComponentLibrary () {
+  const [progress, setProgress] = useState(0);
+  useEffect(()=>{
+    if(progress === 0){
+      const loop = setInterval(function timer(){
+        setProgress((curr)=>{
+          if (curr < 100){
+            return curr+10;
+          }else{
+            clearTimeout(loop);
+            return curr;
+          }
+        })}
+      , 3000);
+    }
+  }, [progress]);
+
   return(
     <div className='bg-ui-panel w-10/12 max-w-7xl h-full min-h-96 mx-auto my-6 rounded-lg p-6'>
 
@@ -26,7 +43,15 @@ export default function ComponentLibrary () {
 
       <div className="flex flex-col gap-2 mb-4">
         <H4>Loading Bar</H4>
-        <LoadingBar />
+        <div className="flex gap-2">
+          <LoadingBar progress={progress} wrapperClassName="rounded-lg"/>
+          <Button onClick={()=>setProgress(0)}>Reset</Button>
+        </div>
+        <LoadingBar
+          label="labeling the bar"
+          message="displaying a message"
+          pulsing
+        />
       </div>
     </div>
   );

From 905dc454f23b41e3dde01a0ade4d5ea2a60eb7ce Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 27 Mar 2024 17:02:52 -0400
Subject: [PATCH 3/3] stable build

---
 app/components/LoadingBar.tsx   |  6 +++---
 app/routes/ComponentLibrary.tsx | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx
index 09993ce0eb..90a112df5c 100644
--- a/app/components/LoadingBar.tsx
+++ b/app/components/LoadingBar.tsx
@@ -5,17 +5,17 @@ interface LoadingBarProps{
   label?: string;
   progress?: number;
   variant?: string;
-  pulsing?: boolean;
   message?: string;
   wrapperClassName?: string;
+  useFakeTimer?: number; 
 }
 export const LoadingBar = ({
   label,
-  progress = 50,
+  progress = 0,
   variant = 'primary',
-  pulsing = false,
   message,
   wrapperClassName : propsWrapperClassName,
+  useFakeTimer = (1000 * 60) //defaults to 1min
 }: LoadingBarProps) => {
 
   function getVariantClassNames(variant: string) {
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
index 9414bc40ee..acc2188c52 100644
--- a/app/routes/ComponentLibrary.tsx
+++ b/app/routes/ComponentLibrary.tsx
@@ -3,7 +3,9 @@ import {
   Button,
   ButtonLink,
   H4, 
-  LoadingBar
+  LoadingBar,
+  LoadingDotsTyping,
+  LoadingDotsBricks,
 } from "~/components";
 
 
@@ -41,6 +43,18 @@ export default function ComponentLibrary () {
         <ButtonLink to="/">Back to /</ButtonLink>
       </div>
 
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>Loading Dots</H4>
+        <div className="flex gap-2">
+          <div className="w-60 h-40 rounded-lg overflow-hidden">
+            <LoadingDotsTyping />
+          </div>
+          <div className="w-60 h-40 rounded-lg overflow-hidden">
+            <LoadingDotsBricks />
+          </div>
+        </div>
+      </div>
+
       <div className="flex flex-col gap-2 mb-4">
         <H4>Loading Bar</H4>
         <div className="flex gap-2">