Merge pull request #25 from storytold/feature/loading-bar

Feature/loading bar

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>
   )

app/components/LoadingBar.tsx

@@ -0,0 +1,54 @@
+import { twMerge } from 'tailwind-merge';
+import { H4 } from '.';
+
+interface LoadingBarProps{
+  label?: string;
+  progress?: number;
+  variant?: string;
+  message?: string;
+  wrapperClassName?: string;
+  useFakeTimer?: number; 
+}
+export const LoadingBar = ({
+  label,
+  progress = 0,
+  variant = 'primary',
+  message,
+  wrapperClassName : propsWrapperClassName,
+  useFakeTimer = (1000 * 60) //defaults to 1min
+}: 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 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 transition-all duration-1000",
+    getVariantClassNames(variant),
+  );
+
+  return (
+    <div className={wrapperClassName}>
+      {label && <label>{label}</label>}
+      <div className="w-full bg-gray-500 rounded-full h-2.5">
+        <div 
+          className={progressClassName} 
+          style={{width: progress + '%'}}
+        />
+      </div>
+      {message && <H4>{message}</H4>}
+    </div>
+  );
+}

app/components/LoadingDots.tsx

@@ -26,7 +26,7 @@ export const LoadingDotsTyping = (props: LoadingDotsProps)=>{
 }
 export const LoadingDotsBricks = (props: LoadingDotsProps)=>{
   return (
-    <LoadingDots {...props} />
+    <LoadingDots {...props} type="bricks"/>
   )
 }
 

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 { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
 export {
@@ -17,6 +18,7 @@ export {
   ItemPicker,
   Textarea,
   Input,
+  LoadingBar,
   LoadingDots,
   LoadingDotsBricks,
   LoadingDotsTyping,

app/routes/ComponentLibrary.tsx

@@ -1,11 +1,72 @@
-import { Button } from "~/components/Button";
-import { ButtonLink } from "~/components/ButtonLink";
+import { useState, useEffect } from "react";
+import { 
+  Button,
+  ButtonLink,
+  H4, 
+  LoadingBar,
+  LoadingDotsTyping,
+  LoadingDotsBricks,
+} from "~/components";
+
 
 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(
-  <>
-    <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 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">
+          <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>
   );
 };