#72 Storybook docs (#78)

* build core code for storybook integregated documentation landing and installation page

* rm 53-storybook-shadcn-setup

* categorize and organize docs and stories for streamline, easy-to-navigate documentation for application

* figure out how to properly categorize and organize docs and stories for streamline, easy-to-navigate documentation for the application

* finish the categorization and organization of docs and stories by breaking down into smaller sections for streamline, easy-to-navigate documentation for application.  Add content to Developer Guide as a visualization for future documentation

* add Home component to pass Docker test

* download @types/jest to clear error messages for local devices

* update pnpm-lock.yaml

* fix README.md line 98, remove Home.tsx from components page, revert changes to __tests__/Home.test.tsx

* tentatively remove arrows in documentation navigation links

* added test

* storybook documentation section

* storybook documentation sections

* update package.json jest scripts

* remove extra content

* add internal documenation navigation

---------

Co-authored-by: Shashi Lo <[email protected]>
Co-authored-by: Mai Vang <[email protected]>

README.md

@@ -95,7 +95,7 @@ docker rm container_name_or_ID
 Install dependencies
 
 ```
-pmpm i
+pnpm i
 ```
 
 Run Storybook in the project root

components/Test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Button } from "./ui/button";
+import { LucideProps } from "lucide-react";
+import { cn } from "../lib/utils";
+
+type ButtonProps = {
+  variant:
+    | "default"
+    | "secondary"
+    | "outline"
+    | "ghost"
+    | "link"
+    | "destructive";
+  size: "default" | "sm" | "lg" | "icon";
+  className?: string;
+  onClick?: () => void;
+  label?: string;
+  icon?: React.ComponentType<LucideProps & { className?: string }>;
+};
+
+export const CustomButton = ({
+  variant,
+  size,
+  label,
+  icon: IconComponent,
+  className,
+  onClick,
+}: ButtonProps) => {
+  const iconClassName = cn(
+    { "mr-2 h-4 w-4": label && IconComponent },
+    { "h-4 w-4": IconComponent && !label }
+  );
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={onClick}
+      className={className}
+    >
+      {IconComponent && <IconComponent className={iconClassName} />}
+      {label}
+    </Button>
+  );
+};