added documentation comments to the storybook elements of the app

.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: [

.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;

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.
+];

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<{file_name: string, signed_url: string}>} mcap_files - A list of MCAP files related to the event. Each file is represented by its name and a signed URL to access the file.
+ * @property {Array<{file_name: string, signed_url: string}>} mat_files - A list of MAT files associated with the event. Similar to `mcap_files`, each MAT file has a file name and signed URL.
+ * @property {Array<{content: string, signed_url: string}>} content_files - A list 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",