Merge branch 'main' into scroll-ui

hytech-racing · Jan 29, 2025 · 2294103 · 2294103
2 parents 11ca78e + ec9834f
commit 2294103
Show file tree

Hide file tree

Showing 12 changed files with 277 additions and 215 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,5 +1,32 @@
+/**
+ *
+ * This configuration object defines how Storybook should discover stories, 
+ * which addons to include, and some core framework options.
+ *
+ * @module StorybookConfig
+ */
+
 import type { StorybookConfig } from "@storybook/react-vite";
 
+/**
+ * Configuration object for Storybook.
+ *
+ * @type {StorybookConfig}
+ * @property {string[]} stories - Patterns to locate story files within the project.
+ *                                Includes `.mdx` files and various script extensions such as
+ *                                `.js`, `.jsx`, `.mjs`, `.ts`, and `.tsx` within the `src` directory.
+ * @property {string[]} addons - List of Storybook addons for functionality.
+ *                               - `@storybook/addon-onboarding`: Assists with onboarding users to Storybook.
+ *                               - `@storybook/addon-links`: Enables linking between stories.
+ *                               - `@storybook/addon-essentials`: Includes essential Storybook addons.
+ *                               - `@chromatic-com/storybook`: Chromatic integration for visual testing.
+ *                               - `@storybook/addon-interactions`: Enables testing interactions in components.
+ * @property {Object} framework - Framework-specific configuration for Storybook.
+ *                                - `name`: Specifies the React-Vite framework for Storybook.
+ *                                - `options`: Reserved for future framework-specific options (currently empty).
+ * @property {Object} core - Core settings for Storybook.
+ *                           - `disableTelemetry`: Disables telemetry to avoid sending usage data.
+ */
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,3 +1,11 @@
+/**
+ *
+ * This file configures global settings for Storybook, including controls, decorators, 
+ * and custom parameters. It also integrates the Mantine library for consistent theming.
+ *
+ * @module StorybookPreview
+ */
+
 import React from "react";
 
 import type { Preview } from "@storybook/react";
@@ -6,6 +14,18 @@ import "@mantine/core/styles.css";
 
 import { theme } from "../src/theme";
 
+/**
+ * Storybook preview configuration object.
+ *
+ * @type {Preview}
+ * @property {Object} parameters - Defines global configuration for Storybook controls.
+ *                                 - `controls.matchers.color`: Regex to match color-related properties.
+ *                                 - `controls.matchers.date`: Regex to match date-related properties.
+ * @property {Function[]} decorators - Array of decorators to wrap all rendered stories.
+ *                                     - Wraps all stories with MantineProvider to apply theming.
+ * @property {string[]} tags - Tags to identify metadata or features.
+ *                             - Includes `autodocs` for automatic documentation generation.
+ */
 const preview: Preview = {
   parameters: {
     controls: {
@@ -23,4 +43,4 @@ const preview: Preview = {
   tags: ["autodocs"],
 };
 
-export default preview;
+export default preview;
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-mantine-color-scheme="light">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
@@ -9,6 +9,7 @@ import {
   ScrollArea,
   TextInput,
   Notification,
+  CopyButton,
 } from "@mantine/core";
 import {
   IconDownload,
@@ -23,6 +24,8 @@ interface PreviewCardProps {
   selectedData: MCAPFileInformation | undefined;
 }
 
+const origin = window.location.origin;
+
 function PreviewCard({ selectedData }: PreviewCardProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -33,26 +36,31 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
     setError(null);
     setSuccess(null);
     try {
-        const response = await fetch(`${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`, {
-          method: 'DELETE',
-        });
+      const response = await fetch(
+        `${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`,
+        {
+          method: "DELETE",
+        },
+      );
 
-        if (!response.ok) {
-          if (response.status === 503) {
-            const errorMsg = await response.text();
-            setError(`Failed to delete: ${errorMsg} \nTry again in a few minutes!`);
-            console.log(errorMsg);
-          } else {
-            const errorMsg = await response.text();
-            setError(`Failed to delete: ${errorMsg}`);
-            console.log(errorMsg);  
-          }
+      if (!response.ok) {
+        if (response.status === 503) {
+          const errorMsg = await response.text();
+          setError(
+            `Failed to delete: ${errorMsg} \nTry again in a few minutes!`,
+          );
+          console.log(errorMsg);
         } else {
-          setSuccess('File deleted successfully!');
+          const errorMsg = await response.text();
+          setError(`Failed to delete: ${errorMsg}`);
+          console.log(errorMsg);
         }
+      } else {
+        setSuccess("File deleted successfully!");
+      }
     } catch (error) {
-      console.error('Error sending Delete request:', error);
-      setError('An error occurred during file deletion.');
+      console.error("Error sending Delete request:", error);
+      setError("An error occurred during file deletion.");
     }
     setLoading(false);
   };
@@ -209,6 +217,19 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
                 }}
               >
                 <div>
+                  <CopyButton
+                    value={`${origin}${import.meta.env.BASE_URL}?id=${selectedData.id}`}
+                  >
+                    {({ copied, copy }) => (
+                      <Button
+                        color={copied ? "green" : "#B3A369"}
+                        onClick={copy}
+                        size="compact-md"
+                      >
+                        {copied ? "Copied" : "Copy URL"}
+                      </Button>
+                    )}
+                  </CopyButton>
                   {selectedData.mcap_files.map((item) => (
                     <DownloadButton
                       buttonText="MCAP"

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -150,4 +150,4 @@ function SearchBarWithFilter({ setSearch }: SearchBarWithFilterProps) {
   );
 }
 
-export default SearchBarWithFilter;
+export default SearchBarWithFilter;
diff --git a/src/data/dataFilters.ts b/src/data/dataFilters.ts
@@ -1,8 +1,25 @@
+/**
+ * Represents the list of event types.
+ *
+ * These are predefined categories used to describe different types of automotive events.
+ * This constant can be used in forms, filters, or data validation in Storybook components.
+ */
 export const eventType: string[] = [
-  "Acceleration",
-  "Endurance",
-  "Skidpad",
-  "Autocross",
+  "Acceleration", // Event type for acceleration tests.
+  "Endurance",    // Event type for endurance tests.
+  "Skidpad",      // Event type for skidpad tests.
+  "Autocross",    // Event type for autocross tests.
 ];
 
-export const location: string[] = ["MRDC", "Michigan", "Rome", "SCC"];
+/**
+ * Represents the list of possible locations.
+ *
+ * These are predefined locations where events have occurred.
+ * This constant can be used for filtering data or displaying location options in Storybook components.
+ */
+export const location: string[] = [
+  "MRDC",     // Location for the MRDC event.
+  "Michigan", // Location for the Michigan event.
+  "Rome",     // Location for the Rome event.
+  "SCC",      // Location for the SCC event.
+];
diff --git a/src/data/sampledata.ts b/src/data/sampledata.ts
@@ -1,3 +1,18 @@
+/**
+ * Represents information about an MCAP (Model, Configuration, and Analysis Protocol) file and its associated data.
+ * Each entry in the array corresponds to a specific event, containing metadata about files, content, and event details.
+ *
+ * @typedef {Object} MCAPFileInformationNew
+ * @property {string} id - A unique identifier for the event.
+ * @property {Array<>} mcap_files - An array of MCAP files related to the event. Each file is represented by its name and a signed URL to access the file.
+ * @property {Array<>} mat_files - An array of MAT files associated with the event. Similar to `mcap_files`, each MAT file has a file name and signed URL.
+ * @property {Array<>} content_files - An array of content files, each having a name (`content`) and a signed URL for access.
+ * @property {string} date - The date when the event occurred, formatted as MM-DD-YYYY.
+ * @property {string} location - The location where the event took place.
+ * @property {string} notes - Additional notes or comments about the event.
+ * @property {string} event_type - The type of event (e.g., "acceleration", "endurance").
+ * @property {Object} schema - An object containing versioning information for the event's schema. Each schema property represents a version string.
+ */
 export const data: MCAPFileInformationNew[] = [
   {
     id: "505deb4b-44a8-48dd-9da6-a671c1d3eccd",

diff --git a/src/routes/root.tsx b/src/routes/root.tsx
@@ -11,6 +11,7 @@ export default function Root() {
   const [selectedData, setSelectedData] = useState<MCAPFileInformation>();
 
   const [searchTerm] = useQueryState("notes", parseAsString.withDefault(""));
+  const [selectedId] = useQueryState("id", parseAsString.withDefault(""));
   const [selectedLocation] = useQueryState(
     "location",
     parseAsString.withDefault(""),
@@ -49,6 +50,15 @@ export default function Root() {
   };
 
   const fetchData = async (filters: SearchFilter) => {
+    if (selectedId != "") {
+      const res = await fetch(
+        `${import.meta.env.VITE_API_URL}/api/v2/mcaps/${selectedId}`,
+      );
+
+      const data = await res.json();
+      return data.data;
+    }
+
     const { location, date, eventType, searchText } = filters;
     let { afterDate, beforeDate } = filters;
-Original file line number
+Diff line change
@@ Expand Up @@
       );
     }
-    export default SearchBarWithFilter;
+    export default SearchBarWithFilter;