refactor: running prettier

.github/dependabot.yml

@@ -16,4 +16,4 @@ updates:
     ignore:
       # We currently need to ignore eslint@v9
       - dependency-name: "eslint"
-        update-types: [ "version-update:semver-major" ]
+        update-types: ["version-update:semver-major"]

scripts/cleanup-gh-pages.js

@@ -1,59 +1,56 @@
 /*
  * Fetches all branches and deletes all review-branches in github pages
  */
-import FS from 'node:fs';
+import FS from "node:fs";
 
-const TAG = 'cleanup-gh-pages:';
+const TAG = "cleanup-gh-pages:";
 
 const removeOldFromPath = (isTag, data) => {
-	const path = `public/${isTag ? 'version' : 'review'}`;
-	if (
-		FS.existsSync(path) &&
-		data?.filter((branch) => branch.name).length > 0
-	) {
-		const dirsToDelete = FS.readdirSync(path)
-			.filter((file) => !data.find((branch) => branch.name === file))
-			// Let's not clean up specific folders
-			.filter((file) => !['main', 'latest'].includes(file));
-		if (dirsToDelete?.length > 0) {
-			console.log(
-				TAG,
-				`Start removing ${isTag ? 'tags' : 'branches'} from gh-pages`
-			);
-			console.log(TAG, dirsToDelete);
-			for (const dir of dirsToDelete) {
-				FS.rmSync(`${path}/${dir}`, {
-					recursive: true,
-					force: true
-				});
-				console.log(TAG, `deleted  ${isTag ? 'tag' : 'branch'} ${dir}`);
-			}
-
-			return true;
-		}
-
-		console.log(TAG, `All ${isTag ? 'tags' : 'branches'} are up to date`);
-	}
-
-	return false;
+  const path = `public/${isTag ? "version" : "review"}`;
+  if (FS.existsSync(path) && data?.filter((branch) => branch.name).length > 0) {
+    const dirsToDelete = FS.readdirSync(path)
+      .filter((file) => !data.find((branch) => branch.name === file))
+      // Let's not clean up specific folders
+      .filter((file) => !["main", "latest"].includes(file));
+    if (dirsToDelete?.length > 0) {
+      console.log(
+        TAG,
+        `Start removing ${isTag ? "tags" : "branches"} from gh-pages`,
+      );
+      console.log(TAG, dirsToDelete);
+      for (const dir of dirsToDelete) {
+        FS.rmSync(`${path}/${dir}`, {
+          recursive: true,
+          force: true,
+        });
+        console.log(TAG, `deleted  ${isTag ? "tag" : "branch"} ${dir}`);
+      }
+
+      return true;
+    }
+
+    console.log(TAG, `All ${isTag ? "tags" : "branches"} are up to date`);
+  }
+
+  return false;
 };
 
 const cleanUpPages = async ({ github, context }) => {
-	const { repo, owner } = context.repo;
-	const branches = await github.rest.repos.listBranches({
-		owner,
-		repo
-	});
-	const tags = await github.rest.repos.listTags({
-		owner,
-		repo
-	});
-
-	return {
-		deploy:
-			removeOldFromPath(false, branches.data) ||
-			removeOldFromPath(true, tags.data)
-	};
+  const { repo, owner } = context.repo;
+  const branches = await github.rest.repos.listBranches({
+    owner,
+    repo,
+  });
+  const tags = await github.rest.repos.listTags({
+    owner,
+    repo,
+  });
+
+  return {
+    deploy:
+      removeOldFromPath(false, branches.data) ||
+      removeOldFromPath(true, tags.data),
+  };
 };
 
 export default cleanUpPages;

src/components/Customization/LogoUpload/logo-upload.tsx

@@ -13,10 +13,7 @@ const LogoUpload = memo(() => {
     <div className="flex flex-col gap-fix-md">
       <h5>{t("logo")}</h5>
       <div className="flex gap-fix-md">
-        <div
-          className="flex flex-col gap-fix-md p-fix-sm"
-          data-mode="light"
-        >
+        <div className="flex flex-col gap-fix-md p-fix-sm" data-mode="light">
           <DBInfotext icon="sun">Light</DBInfotext>
           <img
             className="h-siz-md mx-auto"
@@ -44,10 +41,7 @@ const LogoUpload = memo(() => {
           />
         </div>
         <DBDivider margin="none" variant="vertical" />
-        <div
-          className="flex flex-col gap-fix-md p-fix-sm"
-          data-mode="dark"
-        >
+        <div className="flex flex-col gap-fix-md p-fix-sm" data-mode="dark">
           <DBInfotext icon="moon">Dark</DBInfotext>
           <img
             className="h-siz-md mx-auto"

src/components/Customization/Preview/ColorPalettes/index.scss

@@ -14,8 +14,12 @@
 
 .db-popover-content {
   top: calc(
-    -1 * (#{variables.$db-spacing-fixed-sm} + #{variables.$db-sizing-lg} *
-          var(--color-index, 1) + var(--color-index, 1) * #{variables.$db-spacing-fixed-2xs})
+    -1 *
+      (
+        #{variables.$db-spacing-fixed-sm} + #{variables.$db-sizing-lg} *
+          var(--color-index, 1) + var(--color-index, 1) *
+          #{variables.$db-spacing-fixed-2xs}
+      )
   ) !important;
 }
 

src/components/DefaultPage/default-page.tsx

@@ -1,4 +1,9 @@
-import { DBButton, DBHeader, DBPage, DBTooltip } from "@db-ux/react-core-components";
+import {
+  DBButton,
+  DBHeader,
+  DBPage,
+  DBTooltip,
+} from "@db-ux/react-core-components";
 import { useThemeBuilderStore } from "../../store";
 import { DefaultPagePropsType } from "./data.ts";
 import { PropsWithChildren, useState } from "react";

src/components/Landing/ThemeSelect/theme-select.tsx

@@ -1,4 +1,9 @@
-import { DBCard, DBIcon, DBSection, DBTooltip } from "@db-ux/react-core-components";
+import {
+  DBCard,
+  DBIcon,
+  DBSection,
+  DBTooltip,
+} from "@db-ux/react-core-components";
 import { useThemeBuilderStore } from "../../../store";
 import { Link } from "react-router-dom";
 import Demo from "../../../pages/Demo";

src/index.scss

@@ -3,7 +3,6 @@
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "@db-ux/core-components/build/styles/internal/db-puls" as puls;
 
-
 [data-focus="true"] {
   @extend %db-puls;
   @include puls.set-db-puls-vertical();

src/pages/Demo/demo.tsx

@@ -26,8 +26,10 @@ const Demo = ({ linkToDemo, density }: DemoPropsType) => {
     >
       <div className="flex flex-col md:flex-row h-full">
         <Sidenav />
-        <div className="flex flex-col gap-fix-md py-fix-md px-res-sm
-        db-bg-color-basic-level-2 w-full h-full overflow-y-auto">
+        <div
+          className="flex flex-col gap-fix-md py-fix-md px-res-sm
+        db-bg-color-basic-level-2 w-full h-full overflow-y-auto"
+        >
           <h1>{t("Dashboard")}</h1>
           <div className="demo-dashboard grid gap-fix-md h-full">
             <DBCard

src/pages/Playground/index.scss

@@ -22,7 +22,8 @@ $selected-outline-height: 3px;
   .drop-container,
   .drag-container {
     --db-current-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
-    background-image: linear-gradient(
+    background-image:
+      linear-gradient(
         #{colors.$db-adaptive-bg-basic-level-1-default},
         #{colors.$db-adaptive-bg-basic-level-1-default}
       ),

src/utils/generate-colors.ts

@@ -1,7 +1,7 @@
 import { defaultLuminances, HeisslufType } from "./data.ts";
 import { Hsluv } from "hsluv";
 import chroma from "chroma-js";
-import {FALLBACK_COLOR} from "../constants.ts";
+import { FALLBACK_COLOR } from "../constants.ts";
 
 export const getValidPaletteColorAsHex = (
   brandColors: HeisslufType[],

src/utils/outputs/index.ts

@@ -173,12 +173,14 @@ export const getPaletteOutput = (
     });
 
     result[`--${prefix}-${name}-origin`] = color.origin;
-    result[`--${prefix}-${name}-origin-light-default`] = color.originLightDefault;
+    result[`--${prefix}-${name}-origin-light-default`] =
+      color.originLightDefault;
     result[`--${prefix}-${name}-origin-light-hovered`] =
       color.originLightHovered;
     result[`--${prefix}-${name}-origin-light-pressed`] =
       color.originLightPressed;
-    result[`--${prefix}-${name}-on-origin-light-default`] = color.onOriginLightDefault;
+    result[`--${prefix}-${name}-on-origin-light-default`] =
+      color.onOriginLightDefault;
     result[`--${prefix}-${name}-on-origin-light-hovered`] =
       color.onOriginLightHovered;
     result[`--${prefix}-${name}-on-origin-light-pressed`] =
@@ -187,7 +189,8 @@ export const getPaletteOutput = (
     result[`--${prefix}-${name}-origin-dark-default`] = color.originDarkDefault;
     result[`--${prefix}-${name}-origin-dark-hovered`] = color.originDarkHovered;
     result[`--${prefix}-${name}-origin-dark-pressed`] = color.originDarkPressed;
-    result[`--${prefix}-${name}-on-origin-dark-default`] = color.onOriginDarkDefault;
+    result[`--${prefix}-${name}-on-origin-dark-default`] =
+      color.onOriginDarkDefault;
     result[`--${prefix}-${name}-on-origin-dark-hovered`] =
       color.onOriginDarkHovered;
     result[`--${prefix}-${name}-on-origin-dark-pressed`] =

src/utils/outputs/web/auto-complete/data.ts

@@ -24,11 +24,13 @@ export const generateColorProperties = (color: string): string => {
   colorStates.forEach((state) => {
     backgroundColors.forEach((bgColor) => {
       result +=
-        ["-", prefix, color, "bg", bgColor, state].join("-") + `: "Change the background color level of the current element. Can be used on containers and components.";\n`;
+        ["-", prefix, color, "bg", bgColor, state].join("-") +
+        `: "Change the background color level of the current element. Can be used on containers and components.";\n`;
     });
     onBackgroundColors.forEach((onBgColor) => {
       result +=
-        ["-", prefix, color, "on-bg", onBgColor, state].join("-") + `: "Change the foreground color with another emphasis of the current element.";\n`;
+        ["-", prefix, color, "on-bg", onBgColor, state].join("-") +
+        `: "Change the foreground color with another emphasis of the current element.";\n`;
     });
     invertedColors.forEach((invertedColor) => {
       result +=
@@ -37,9 +39,14 @@ export const generateColorProperties = (color: string): string => {
     });
 
     result +=
-      ["-", prefix, color, "on-bg", "inverted", state].join("-") + `: "Change the foreground color of the current element. Only used with inverted background colors.";\n`;
-    result += ["-", prefix, color, "origin", state].join("-") + `: "Origin color can be used for background and foreground. Use this if you know what you are doing, it might not be accessible.";\n`;
-    result += ["-", prefix, color, "on-origin", state].join("-") + `: "Change the foreground color of the current element. Only used with origin as background color.";\n`;
+      ["-", prefix, color, "on-bg", "inverted", state].join("-") +
+      `: "Change the foreground color of the current element. Only used with inverted background colors.";\n`;
+    result +=
+      ["-", prefix, color, "origin", state].join("-") +
+      `: "Origin color can be used for background and foreground. Use this if you know what you are doing, it might not be accessible.";\n`;
+    result +=
+      ["-", prefix, color, "on-origin", state].join("-") +
+      `: "Change the foreground color of the current element. Only used with origin as background color.";\n`;
   });
   return result;
 };

src/utils/outputs/web/auto-complete/index.ts

@@ -38,7 +38,12 @@ export const getColorVariables = (
 const getClasses = (allColors: Record<string, DefaultColorType>) => {
   const combinedClasses = [
     ...allClasses,
-    { name: `container-color`, description: "These classes define the monochromatic adaptive color scheme for a container. Texts, icons and backgrounds in it than automatically adapt to the color set.", sizes: Object.keys(allColors) },
+    {
+      name: `container-color`,
+      description:
+        "These classes define the monochromatic adaptive color scheme for a container. Texts, icons and backgrounds in it than automatically adapt to the color set.",
+      sizes: Object.keys(allColors),
+    },
   ];
   let result = "";
   combinedClasses.forEach((classSet) => {

tailwind.config.js

@@ -7,10 +7,10 @@ export default {
   theme: {
     ...tokens,
     gap: ({ theme }) => ({
-      ...theme("spacing")
+      ...theme("spacing"),
     }),
     space: ({ theme }) => ({
-      ...theme("spacing")
-    })
-  }
-};
+      ...theme("spacing"),
+    }),
+  },
+};

vite.config.ts

@@ -7,5 +7,5 @@ export default defineConfig({
   plugins: [react()],
   define: {
     global: {},
-  }
+  },
 });