organize and clean up the libs

.github/workflows/deploy.yml

@@ -32,6 +32,14 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+
+      - name: Run Biome
+        run: biome ci .
+
       - name: Build
         run: npm run build
 
@@ -52,4 +60,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4 
+        uses: actions/deploy-pages@v4

.vscode/extensions.json

@@ -1,5 +1,3 @@
 {
-    "recommendations": [
-        "biomejs.biome"
-    ]
+  "recommendations": ["biomejs.biome"]
 }

biome.json

@@ -19,7 +19,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "correctness": {
+        "noUndeclaredVariables": "error"
+      }
     },
     "ignore": ["public/**/*"]
   },

package.json

@@ -9,9 +9,7 @@
     "build": "vite build",
     "preview": "vite preview"
   },
-  "keywords": [
-    "lando"
-  ],
+  "keywords": ["lando"],
   "author": "Aaron Feledy",
   "license": "GPL-3.0-or-later",
   "dependencies": {

postcss.config.cjs

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-} 
+};

src/App.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Editor } from './components/ui/editor';
-import { ShareDialog } from './components/ui/share-dialog';
-import { useDialogStore } from './lib/dialog';
-import { Toaster } from './components/ui/toaster';
+import React from "react";
+import { Editor } from "./components/ui/editor";
+import { ShareDialog } from "./components/ui/share-dialog";
+import { useDialogStore } from "./lib/dialog";
+import { Toaster } from "./components/ui/toaster";
 
 export default function App() {
   const { isShareDialogOpen, shareUrl, closeShareDialog } = useDialogStore();

src/components/ui/alert-dialog.jsx

@@ -1,86 +1,200 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+/**
+ * AlertDialog component.
+ *
+ * This component wraps the AlertDialogPrimitive.Root component from @radix-ui/react-alert-dialog.
+ * It is used to create a dialog that can be triggered to open or close.
+ */
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+/**
+ * AlertDialogTrigger component.
+ *
+ * This component wraps the AlertDialogPrimitive.Trigger component from @radix-ui/react-alert-dialog.
+ * It is used to trigger the opening of the AlertDialog.
+ */
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+/**
+ * AlertDialogPortal component.
+ *
+ * This component wraps the AlertDialogPrimitive.Portal component from @radix-ui/react-alert-dialog.
+ * It is used to portal the AlertDialogContent to the end of the document.
+ */
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
+/**
+ * AlertDialogOverlay component.
+ *
+ * This component wraps the AlertDialogPrimitive.Overlay component from @radix-ui/react-alert-dialog.
+ * It is used to create the overlay that covers the background when the AlertDialog is open.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {React.RefObject} ref - The ref object passed to the component.
+ * @returns The AlertDialogOverlay component.
+ */
 const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
-    ref={ref} />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
+/**
+ * AlertDialogContent component.
+ *
+ * This component wraps the AlertDialogPrimitive.Content component from @radix-ui/react-alert-dialog.
+ * It is used to create the content of the AlertDialog.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {React.RefObject} ref - The ref object passed to the component.
+ * @returns The AlertDialogContent component.
+ */
 const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
       )}
-      {...props} />
+      {...props}
+    />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({
-  className,
-  ...props
-}) => (
+/**
+ * AlertDialogHeader component.
+ *
+ * This component is used to create the header of the AlertDialog.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @returns The AlertDialogHeader component.
+ */
+const AlertDialogHeader = ({ className, ...props }) => (
   <div
-    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
-    {...props} />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
-const AlertDialogFooter = ({
-  className,
-  ...props
-}) => (
+/**
+ * AlertDialogFooter component.
+ *
+ * This component is used to create the footer of the AlertDialog.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @returns The AlertDialogFooter component.
+ */
+const AlertDialogFooter = ({ className, ...props }) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props} />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
+/**
+ * AlertDialogTitle component.
+ *
+ * This component wraps the AlertDialogPrimitive.Title component from @radix-ui/react-alert-dialog.
+ * It is used to create the title of the AlertDialog.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {React.RefObject} ref - The ref object passed to the component.
+ * @returns The AlertDialogTitle component.
+ */
 const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
+  <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props} />
-))
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+/**
+ * AlertDialogDescription component.
+ *
+ * This component wraps the AlertDialogPrimitive.Description component from @radix-ui/react-alert-dialog.
+ * It is used to create the description of the AlertDialog.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {React.RefObject} ref - The ref object passed to the component.
+ * @returns The AlertDialogDescription component.
+ */
+const AlertDialogDescription = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Description
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
+/**
+ * AlertDialogAction component.
+ *
+ * This component wraps the AlertDialogPrimitive.Action component from @radix-ui/react-alert-dialog.
+ * It is used to create an action button within the AlertDialog.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {React.RefObject} ref - The ref object passed to the component.
+ * @returns The AlertDialogAction component.
+ */
 const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
+/**
+ * AlertDialogCancel component.
+ *
+ * This component wraps the AlertDialogPrimitive.Cancel component from @radix-ui/react-alert-dialog.
+ * It is used to create a cancel button within the AlertDialog.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {React.RefObject} ref - The ref object passed to the component.
+ * @returns The AlertDialogCancel component.
+ */
 const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props} />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -94,4 +208,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};

src/components/ui/badge.jsx

@@ -1,8 +1,16 @@
-import * as React from "react"
+import * as React from "react";
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
+/**
+ * badgeVariants function.
+ *
+ * This function generates a set of class names for the Badge component based on the variant.
+ * It uses the class-variance-authority library to define the base and variant classes.
+ *
+ * @returns {Object} - An object containing the class names for the Badge component.
+ */
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -20,15 +28,24 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
-function Badge({
-  className,
-  variant,
-  ...props
-}) {
-  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
+/**
+ * Badge component.
+ *
+ * This component renders a badge with a variant based on the props passed.
+ * It uses the cn utility function from @/lib/utils to concatenate the base and variant class names.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {String} props.className - Additional class names to be applied to the component.
+ * @param {String} props.variant - The variant of the badge to be rendered.
+ * @returns {React.ReactElement} - The Badge component.
+ */
+function Badge({ className, variant, ...props }) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };