Run pre-commit hooks over existing codebase

Co-Authored-By: Ben Phelps <ben@phelps.io>

src/components/widgets/widget/container.jsx

@@ -5,20 +5,20 @@ import PrimaryText from "./primary_text";
 import SecondaryText from "./secondary_text";
 import Raw from "./raw";
 
-export function getAllClasses(options, additionalClassNames = '') {
+export function getAllClasses(options, additionalClassNames = "") {
   if (options?.style?.header === "boxedWidgets") {
     if (options?.style?.cardBlur !== undefined) {
       // eslint-disable-next-line no-param-reassign
       additionalClassNames = [
         additionalClassNames,
-        `backdrop-blur${options.style.cardBlur.length ? '-' : ""}${options.style.cardBlur}`
-      ].join(' ')
+        `backdrop-blur${options.style.cardBlur.length ? "-" : ""}${options.style.cardBlur}`,
+      ].join(" ");
     }
 
     return classNames(
       "flex flex-col justify-center ml-2 mr-2",
       "mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3 pr-3",
-      additionalClassNames
+      additionalClassNames,
     );
   }
 
@@ -27,34 +27,37 @@ export function getAllClasses(options, additionalClassNames = '') {
     widgetAlignedClasses = "flex flex-col justify-center first:ml-auto ml-2 mr-2 ";
   }
 
-  return classNames(
-    widgetAlignedClasses,
-    additionalClassNames
-  );
+  return classNames(widgetAlignedClasses, additionalClassNames);
 }
 
 export function getInnerBlock(children) {
   // children won't be an array if it's Raw component
-  return Array.isArray(children) && <div className="flex flex-row items-center justify-end widget-inner">
-    <div className="flex flex-col items-center widget-inner-icon">{children.find(child => child.type === WidgetIcon)}</div>
-    <div className="flex flex-col ml-3 text-left widget-inner-text">
-      {children.find(child => child.type === PrimaryText)}
-      {children.find(child => child.type === SecondaryText)}
-    </div>
-  </div>;
+  return (
+    Array.isArray(children) && (
+      <div className="flex flex-row items-center justify-end widget-inner">
+        <div className="flex flex-col items-center widget-inner-icon">
+          {children.find((child) => child.type === WidgetIcon)}
+        </div>
+        <div className="flex flex-col ml-3 text-left widget-inner-text">
+          {children.find((child) => child.type === PrimaryText)}
+          {children.find((child) => child.type === SecondaryText)}
+        </div>
+      </div>
+    )
+  );
 }
 
 export function getBottomBlock(children) {
   if (children.type !== Raw) {
-    return children.find(child => child.type === Raw) || [];
+    return children.find((child) => child.type === Raw) || [];
   }
 
   return [children];
 }
 
-export default function Container({ children = [], options, additionalClassNames = '' }) {
+export default function Container({ children = [], options, additionalClassNames = "" }) {
   return (
-    <div className={getAllClasses(options, `${ additionalClassNames } widget-container`)}>
+    <div className={getAllClasses(options, `${additionalClassNames} widget-container`)}>
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </div>

src/components/widgets/widget/container_button.jsx

@@ -1,8 +1,12 @@
 import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
 
-export default function ContainerButton ({ children = [], options, additionalClassNames = '', callback }) {
+export default function ContainerButton({ children = [], options, additionalClassNames = "", callback }) {
   return (
-    <button type="button" onClick={callback} className={`${ getAllClasses(options, additionalClassNames) } information-widget-container-button`}>
+    <button
+      type="button"
+      onClick={callback}
+      className={`${getAllClasses(options, additionalClassNames)} information-widget-container-button`}
+    >
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </button>

src/components/widgets/widget/container_form.jsx

@@ -1,8 +1,12 @@
 import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
 
-export default function ContainerForm ({ children = [], options, additionalClassNames = '', callback }) {
+export default function ContainerForm({ children = [], options, additionalClassNames = "", callback }) {
   return (
-    <form type="button" onSubmit={callback} className={`${ getAllClasses(options, additionalClassNames) } information-widget-form`}>
+    <form
+      type="button"
+      onSubmit={callback}
+      className={`${getAllClasses(options, additionalClassNames)} information-widget-form`}
+    >
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </form>

src/components/widgets/widget/container_link.jsx

@@ -1,8 +1,12 @@
 import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
 
-export default function ContainerLink ({ children = [], options, additionalClassNames = '', target }) {
+export default function ContainerLink({ children = [], options, additionalClassNames = "", target }) {
   return (
-    <a href={options.url} target={target} className={`${ getAllClasses(options, additionalClassNames) } information-widget-link`}>
+    <a
+      href={options.url}
+      target={target}
+      className={`${getAllClasses(options, additionalClassNames)} information-widget-link`}
+    >
       {getInnerBlock(children)}
       {getBottomBlock(children)}
     </a>

src/components/widgets/widget/error.jsx

@@ -8,8 +8,10 @@ import WidgetIcon from "./widget_icon";
 export default function Error({ options }) {
   const { t } = useTranslation();
 
-  return <Container options={options} additionalClassNames="information-widget-error">
-    <PrimaryText>{t("widget.api_error")}</PrimaryText>
-    <WidgetIcon icon={BiError} size="l" />
-  </Container>;
+  return (
+    <Container options={options} additionalClassNames="information-widget-error">
+      <PrimaryText>{t("widget.api_error")}</PrimaryText>
+      <WidgetIcon icon={BiError} size="l" />
+    </Container>
+  );
 }

src/components/widgets/widget/primary_text.jsx

@@ -1,5 +1,3 @@
 export default function PrimaryText({ children }) {
-  return (
-    <span className="primary-text text-theme-800 dark:text-theme-200 text-sm">{children}</span>
-  );
+  return <span className="primary-text text-theme-800 dark:text-theme-200 text-sm">{children}</span>;
 }

src/components/widgets/widget/raw.jsx

@@ -1,6 +1,6 @@
 export default function Raw({ children }) {
   if (children.type === Raw) {
-      return [children];
+    return [children];
   }
 
   return children;

src/components/widgets/widget/resource.jsx

@@ -1,22 +1,37 @@
 import UsageBar from "../resources/usage-bar";
 
-export default function Resource({ children, icon, value, label, expandedValue = "", expandedLabel = "", percentage, expanded = false, additionalClassNames='' }) {
+export default function Resource({
+  children,
+  icon,
+  value,
+  label,
+  expandedValue = "",
+  expandedLabel = "",
+  percentage,
+  expanded = false,
+  additionalClassNames = "",
+}) {
   const Icon = icon;
 
-  return <div className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${ additionalClassNames }`}>
-    <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon"/>
-    <div className={ `flex flex-col ml-3 text-left min-w-[85px] ${ expanded ? ' expanded' : ''}`}>
-      <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-        <div className="pl-0.5">{value}</div>
-        <div className="pr-1">{label}</div>
-      </div>
-      { expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5">{expandedValue}</div>
-          <div className="pr-1">{expandedLabel}</div>
+  return (
+    <div
+      className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${additionalClassNames}`}
+    >
+      <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
+      <div className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""}`}>
+        <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5">{value}</div>
+          <div className="pr-1">{label}</div>
         </div>
-      }
-      { percentage >= 0 && <UsageBar percent={percentage} additionalClassNames="resource-usage" /> }
-      { children }
+        {expanded && (
+          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">{expandedValue}</div>
+            <div className="pr-1">{expandedLabel}</div>
+          </div>
+        )}
+        {percentage >= 0 && <UsageBar percent={percentage} additionalClassNames="resource-usage" />}
+        {children}
+      </div>
     </div>
-  </div>;
+  );
 }

src/components/widgets/widget/resources.jsx

@@ -7,14 +7,16 @@ import WidgetLabel from "./widget_label";
 
 export default function Resources({ options, children, target, additionalClassNames }) {
   const widgetParts = [].concat(...children);
-  const addedClassNames = classNames('information-widget-resources', additionalClassNames);
+  const addedClassNames = classNames("information-widget-resources", additionalClassNames);
 
-  return <ContainerLink options={options} target={target} additionalClassNames={ addedClassNames }>
-    <Raw>
-      <div className="flex flex-row self-center flex-wrap justify-between">
-        { widgetParts.filter(child => child && child.type === Resource) }
-      </div>
-      { widgetParts.filter(child => child && child.type === WidgetLabel) }
-    </Raw>
-  </ContainerLink>;
+  return (
+    <ContainerLink options={options} target={target} additionalClassNames={addedClassNames}>
+      <Raw>
+        <div className="flex flex-row self-center flex-wrap justify-between">
+          {widgetParts.filter((child) => child && child.type === Resource)}
+        </div>
+        {widgetParts.filter((child) => child && child.type === WidgetLabel)}
+      </Raw>
+    </ContainerLink>
+  );
 }

src/components/widgets/widget/secondary_text.jsx

@@ -1,5 +1,3 @@
 export default function SecondaryText({ children }) {
-  return (
-    <span className="secondary-text text-theme-800 dark:text-theme-200 text-xs">{children}</span>
-  );
+  return <span className="secondary-text text-theme-800 dark:text-theme-200 text-xs">{children}</span>;
 }

src/components/widgets/widget/widget_icon.jsx

@@ -3,10 +3,17 @@ export default function WidgetIcon({ icon, size = "s", pulse = false }) {
   let additionalClasses = "information-widget-icon text-theme-800 dark:text-theme-200 ";
 
   switch (size) {
-    case "m": additionalClasses += "w-6 h-6 "; break;
-    case "l": additionalClasses += "w-8 h-8 "; break;
-    case "xl": additionalClasses += "w-10 h-10 "; break;
-    default: additionalClasses += "w-5 h-5 ";
+    case "m":
+      additionalClasses += "w-6 h-6 ";
+      break;
+    case "l":
+      additionalClasses += "w-8 h-8 ";
+      break;
+    case "xl":
+      additionalClasses += "w-10 h-10 ";
+      break;
+    default:
+      additionalClasses += "w-5 h-5 ";
   }
 
   if (pulse) {

src/components/widgets/widget/widget_label.jsx

@@ -1,3 +1,5 @@
 export default function WidgetLabel({ label = "" }) {
-  return <div className="information-widget-label pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
+  return (
+    <div className="information-widget-label pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
+  );
 }