🎨 style: standardize code formatting with prettier

This commit applies consistent code formatting across multiple files using Prettier, ensuring uniform indentation, spacing, and line endings throughout the codebase.
w3bdesign · Dec 17, 2024 · 4db7a2f · 4db7a2f
1 parent 8fbcb07
commit 4db7a2f
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 170 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,33 +7,38 @@
     "plugin:react-hooks/recommended",
     "plugin:jsx-a11y/recommended"
   ],
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "jsx-a11y"
-  ],
+  "plugins": ["@typescript-eslint", "react", "jsx-a11y"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
     "@typescript-eslint/no-explicit-any": "error",
     "no-console": ["warn", { "allow": ["warn", "error"] }],
     "prefer-const": "error",
-    "jsx-a11y/anchor-is-valid": ["error", {
-      "components": ["Link"],
-      "specialLink": ["hrefLeft", "hrefRight"],
-      "aspects": ["invalidHref", "preferButton"]
-    }],
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
+      }
+    ],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "jsx-a11y/label-has-associated-control": ["error", {
-      "labelComponents": [],
-      "labelAttributes": [],
-      "controlComponents": [],
-      "assert": "either",
-      "depth": 25
-    }]
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "labelComponents": [],
+        "labelAttributes": [],
+        "controlComponents": [],
+        "assert": "either",
+        "depth": 25
+      }
+    ]
   },
   "settings": {
     "react": {

diff --git a/__tests__/UI/Tabs.test.tsx b/__tests__/UI/Tabs.test.tsx
@@ -68,7 +68,7 @@ describe("Tabs", () => {
       const tabElement = screen.getByRole("tab", { name: tab.label });
       expect(tabElement).toHaveAttribute(
         "aria-selected",
-        index === 0 ? "true" : "false"
+        index === 0 ? "true" : "false",
       );
       expect(tabElement).toHaveAttribute("aria-controls", `tabpanel-${tab.id}`);
     });

diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,7 +1,10 @@
 "use client";
 
 import React, { ReactNode, ErrorInfo } from "react";
-import { ErrorBoundary as ReactErrorBoundary, FallbackProps } from "react-error-boundary";
+import {
+  ErrorBoundary as ReactErrorBoundary,
+  FallbackProps,
+} from "react-error-boundary";
 import Fallback from "./Fallback.component";
 
 interface ErrorBoundaryProps {
@@ -18,7 +21,10 @@ interface ErrorBoundaryProps {
  * @param {boolean} props.compact - Whether to show a compact error fallback (used in stories)
  * @returns {JSX.Element} A React component that catches errors in its child components
  */
-const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children, compact = false }) => {
+const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({
+  children,
+  compact = false,
+}) => {
   const handleError = (error: Error, info: ErrorInfo) => {
     console.error("Uventet feil i Matrix:", error, info);
   };
@@ -28,10 +34,7 @@ const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children, compact = false
   };
 
   return (
-    <ReactErrorBoundary
-      FallbackComponent={ErrorFallback}
-      onError={handleError}
-    >
+    <ReactErrorBoundary FallbackComponent={ErrorFallback} onError={handleError}>
       {children}
     </ReactErrorBoundary>
   );

diff --git a/src/components/ErrorBoundary/ErrorFallback.component.tsx b/src/components/ErrorBoundary/ErrorFallback.component.tsx
@@ -16,7 +16,10 @@ interface ErrorFallbackProps {
  * @param {boolean} props.compact - Whether to show a compact version (used in stories)
  * @returns {JSX.Element} A React component displaying the error message and reload option
  */
-const ErrorFallback: React.FC<ErrorFallbackProps> = ({ error, compact = false }) => {
+const ErrorFallback: React.FC<ErrorFallbackProps> = ({
+  error,
+  compact = false,
+}) => {
   if (compact) {
     return (
       <div className="relative bg-gray-900 p-4 rounded-lg overflow-hidden">

diff --git a/src/components/ErrorBoundary/ErrorFallbackWrapper.component.tsx b/src/components/ErrorBoundary/ErrorFallbackWrapper.component.tsx
@@ -13,8 +13,9 @@ interface ErrorFallbackWrapperProps {
  * @param {boolean} props.compact - Whether to show a compact version
  * @returns {JSX.Element} The wrapped ErrorFallback component
  */
-const ErrorFallbackWrapper: React.FC<ErrorFallbackWrapperProps> = ({ error, compact }) => (
-  <ErrorFallback error={error} compact={compact} />
-);
+const ErrorFallbackWrapper: React.FC<ErrorFallbackWrapperProps> = ({
+  error,
+  compact,
+}) => <ErrorFallback error={error} compact={compact} />;
 
 export default ErrorFallbackWrapper;
diff --git a/src/components/Layout/MobileMenu.component.tsx b/src/components/Layout/MobileMenu.component.tsx
@@ -117,55 +117,53 @@ const MobileMenu = ({ links }: IMobileMenuProps) => {
                   },
                 }}
               >
-                {links.map(
-                  ({ title, name, href, externalLink }, index) => (
-                    <motion.li
-                      key={title}
-                      className="block p-4 text-xl text-white mx-auto text-center border-t border-b border-gray-600 border-solid shadow"
-                      data-cy="mobile-menu-item"
-                      custom={index}
-                      variants={itemVariants}
-                    >
-                      {externalLink ? (
-                        <a
-                          aria-label={name}
-                          href={href}
-                          target="_blank"
-                          rel="noreferrer"
-                          data-testid={`mobil-${name}`}
-                          className="flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg"
-                        >
+                {links.map(({ title, name, href, externalLink }, index) => (
+                  <motion.li
+                    key={title}
+                    className="block p-4 text-xl text-white mx-auto text-center border-t border-b border-gray-600 border-solid shadow"
+                    data-cy="mobile-menu-item"
+                    custom={index}
+                    variants={itemVariants}
+                  >
+                    {externalLink ? (
+                      <a
+                        aria-label={name}
+                        href={href}
+                        target="_blank"
+                        rel="noreferrer"
+                        data-testid={`mobil-${name}`}
+                        className="flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg"
+                      >
+                        {name}
+                      </a>
+                    ) : (
+                      <Link
+                        href={href}
+                        data-testid={`mobil-${name}`}
+                        prefetch={true}
+                        className={`flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg ${
+                          pathname === href ? "text-green-400" : ""
+                        }`}
+                      >
+                        <div className="glitch relative" data-text={name}>
                           {name}
-                        </a>
-                      ) : (
-                        <Link
-                          href={href}
-                          data-testid={`mobil-${name}`}
-                          prefetch={true}
-                          className={`flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg ${
-                            pathname === href ? "text-green-400" : ""
-                          }`}
-                        >
-                          <div className="glitch relative" data-text={name}>
-                            {name}
-                            <motion.span
-                              className={`absolute bottom-0 left-0 h-0.5 bg-current ${
-                                pathname === href ? "bg-green-400" : "bg-white"
-                              }`}
-                              initial={{
-                                width: pathname === href ? "100%" : "0%",
-                              }}
-                              animate={{
-                                width: pathname === href ? "100%" : "0%",
-                              }}
-                              transition={{ duration: 0.3 }}
-                            />
-                          </div>
-                        </Link>
-                      )}
-                    </motion.li>
-                  ),
-                )}
+                          <motion.span
+                            className={`absolute bottom-0 left-0 h-0.5 bg-current ${
+                              pathname === href ? "bg-green-400" : "bg-white"
+                            }`}
+                            initial={{
+                              width: pathname === href ? "100%" : "0%",
+                            }}
+                            animate={{
+                              width: pathname === href ? "100%" : "0%",
+                            }}
+                            transition={{ duration: 0.3 }}
+                          />
+                        </div>
+                      </Link>
+                    )}
+                  </motion.li>
+                ))}
               </motion.ul>
             </nav>
           </motion.div>

diff --git a/src/stories/components/Footer.stories.tsx b/src/stories/components/Footer.stories.tsx
@@ -23,7 +23,7 @@ export const WithContent = () => (
 
 // Narrow viewport
 export const NarrowViewport = () => (
-  <div style={{ width: '320px' }}>
+  <div style={{ width: "320px" }}>
     <Footer />
   </div>
 );

diff --git a/src/stories/components/GenericForm.stories.tsx b/src/stories/components/GenericForm.stories.tsx
@@ -26,10 +26,11 @@ const feedbackSchema = z.object({
   feedback: z.string().min(20, "Feedback must be at least 20 characters"),
 });
 
-type FormData = z.infer<typeof contactSchema> | 
-                z.infer<typeof subscribeSchema> | 
-                z.infer<typeof feedbackSchema> |
-                { email: string };
+type FormData =
+  | z.infer<typeof contactSchema>
+  | z.infer<typeof subscribeSchema>
+  | z.infer<typeof feedbackSchema>
+  | { email: string };
 
 // Example async submit handlers
 const mockSubmit = async (data: FormData) => {

diff --git a/src/stories/components/Hamburger.stories.tsx b/src/stories/components/Hamburger.stories.tsx
@@ -24,13 +24,10 @@ export const XState = () => (
 // Interactive state
 export const Interactive = () => {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div className="bg-gray-800 p-4">
-      <Hamburger 
-        onClick={() => setIsOpen(!isOpen)} 
-        animatetoX={isOpen}
-      />
+      <Hamburger onClick={() => setIsOpen(!isOpen)} animatetoX={isOpen} />
       <p className="text-white text-sm mt-4">
         Click the hamburger to toggle state
       </p>
@@ -41,28 +38,22 @@ export const Interactive = () => {
 // On dark background
 export const OnDarkBackground = () => {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div className="bg-gray-900 p-4">
-      <Hamburger 
-        onClick={() => setIsOpen(!isOpen)} 
-        animatetoX={isOpen}
-      />
+      <Hamburger onClick={() => setIsOpen(!isOpen)} animatetoX={isOpen} />
     </div>
   );
 };
 
 // On light background
 export const OnLightBackground = () => {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div className="bg-gray-100 p-4">
       <div className="bg-gray-800 inline-block rounded">
-        <Hamburger 
-          onClick={() => setIsOpen(!isOpen)} 
-          animatetoX={isOpen}
-        />
+        <Hamburger onClick={() => setIsOpen(!isOpen)} animatetoX={isOpen} />
       </div>
     </div>
   );

diff --git a/src/stories/components/InputField.stories.tsx b/src/stories/components/InputField.stories.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta, Story } from "@ladle/react";
-import InputField, { InputProps } from "../../components/UI/InputField.component";
+import InputField, {
+  InputProps,
+} from "../../components/UI/InputField.component";
 import { useForm, FieldValues } from "react-hook-form";
 
 export default {
@@ -18,14 +20,16 @@ interface StoryFormValues extends FieldValues {
 }
 
 // Wrapper component to provide form context
-const InputFieldWrapper = <T extends FieldValues>(props: Omit<InputProps<T>, "register">) => {
+const InputFieldWrapper = <T extends FieldValues>(
+  props: Omit<InputProps<T>, "register">,
+) => {
   const { register } = useForm<T>();
   return <InputField {...props} register={register} />;
 };
 
-const Template: Story<Omit<InputProps<StoryFormValues>, "register">> = (args) => (
-  <InputFieldWrapper {...args} />
-);
+const Template: Story<Omit<InputProps<StoryFormValues>, "register">> = (
+  args,
+) => <InputFieldWrapper {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

diff --git a/src/stories/components/Matrix.stories.tsx b/src/stories/components/Matrix.stories.tsx
@@ -16,7 +16,8 @@ export default {
 
 // Client-side only wrapper component
 const ClientOnlyMatrix = (props: ReactMatrixAnimationProps) => {
-  const [Matrix, setMatrix] = useState<React.ComponentType<ReactMatrixAnimationProps> | null>(null);
+  const [Matrix, setMatrix] =
+    useState<React.ComponentType<ReactMatrixAnimationProps> | null>(null);
 
   useEffect(() => {
     import("../../components/Animations/Matrix.component").then((mod) => {
@@ -32,9 +33,7 @@ const ClientOnlyMatrix = (props: ReactMatrixAnimationProps) => {
 };
 
 const Container = ({ children }: { children: React.ReactNode }) => (
-  <div className="relative w-full h-[400px] bg-gray-900">
-    {children}
-  </div>
+  <div className="relative w-full h-[400px] bg-gray-900">{children}</div>
 );
 
 // Basic story with default props