refactor: running prettier for code formatting

.github/dependabot.yml

@@ -1,15 +1,15 @@
 ---
 version: 2
 updates:
-  - package-ecosystem: 'github-actions'
-    directory: '/'
+  - package-ecosystem: "github-actions"
+    directory: "/"
     schedule:
-      interval: 'daily'
+      interval: "daily"
     pull-request-branch-name:
-      separator: '-'
-  - package-ecosystem: 'npm'
-    directory: '/'
+      separator: "-"
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
-      interval: 'daily'
+      interval: "daily"
     pull-request-branch-name:
-      separator: '-'
+      separator: "-"

.github/workflows/99-auto-merge.yml

@@ -12,7 +12,7 @@ jobs:
         id: metadata
         uses: dependabot/[email protected]
         with:
-          github-token: '${{ secrets.GITHUB_TOKEN }}'
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
 
       - name: 🤖 Enable auto-merge for Dependabot PRs
         run: gh pr merge --auto --squash "$PR_URL"

.github/workflows/99-codeql-analysis.yml

@@ -1,5 +1,5 @@
 ---
-name: 'CodeQL'
+name: "CodeQL"
 on:
   workflow_call:
 
@@ -10,7 +10,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript']
+        language: ["javascript"]
 
     steps:
       - name: ⬇ Checkout repo

.github/workflows/99-dependency-review.yml

@@ -1,5 +1,5 @@
 ---
-name: 'Dependency Review'
+name: "Dependency Review"
 on:
   workflow_call:
 

.github/workflows/default.yml

@@ -41,4 +41,4 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./dist
-          destination_dir: ${{steps.get-branch-name.outputs.result}}
+          destination_dir: ${{steps.get-branch-name.outputs.result}}

.github/workflows/pull-request.yml

@@ -16,4 +16,4 @@ jobs:
     uses: ./.github/workflows/99-codeql-analysis.yml
 
   dependency-review:
-    uses: ./.github/workflows/99-dependency-review.yml
+    uses: ./.github/workflows/99-dependency-review.yml

CODE-OF-CONDUCT.md

@@ -17,24 +17,24 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
--   Demonstrating empathy and kindness toward other people
--   Being respectful of differing opinions, viewpoints, and experiences
--   Giving and gracefully accepting constructive feedback
--   Accepting responsibility and apologizing to those affected by our mistakes,
-    and learning from the experience
--   Focusing on what is best not just for us as individuals, but for the
-    overall community
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
 
 Examples of unacceptable behavior include:
 
--   The use of sexualized language or imagery, and sexual attention or
-    advances of any kind
--   Trolling, insulting or derogatory comments, and personal or political attacks
--   Public or private harassment
--   Publishing others' private information, such as a physical or email
-    address, without their explicit permission
--   Other conduct which could reasonably be considered inappropriate in a
-    professional setting
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Enforcement Responsibilities
 

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

public/site.webmanifest

@@ -1,14 +1,14 @@
 {
-	"short_name": "",
-	"name": "",
-	"icons": [
-		{
-			"src": "/images/db_logo.svg",
-			"type": "image/svg",
-			"sizes": "192x192"
-		}
-	],
-	"start_url": "/",
-	"background_color": "#fdfdfd",
-	"theme_color": "#fdfdfd"
+  "short_name": "",
+  "name": "",
+  "icons": [
+    {
+      "src": "/images/db_logo.svg",
+      "type": "image/svg",
+      "sizes": "192x192"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#fdfdfd",
+  "theme_color": "#fdfdfd"
 }

src/components/Customization/ActionBar/action-bar.tsx

@@ -3,25 +3,17 @@ import { useThemeBuilderStore } from "../../../store";
 import { useTranslation } from "react-i18next";
 import Upload from "../Upload";
 import { ThemeType } from "../../../utils/data.ts";
-import {downloadTheme} from "../../../utils/outputs/download.ts";
+import { downloadTheme } from "../../../utils/outputs/download.ts";
 
 const ActionBar = () => {
   const { t } = useTranslation();
-  const {
-    resetDefaults,
-    luminanceSteps,
-    theme,
-    speakingNames,
-    developerMode,
-  } = useThemeBuilderStore((state) => state);
+  const { resetDefaults, luminanceSteps, theme, speakingNames, developerMode } =
+    useThemeBuilderStore((state) => state);
 
   return (
     <>
       {developerMode && (
-        <DBButton
-          icon="undo"
-          onClick={() => resetDefaults()}
-        >
+        <DBButton icon="undo" onClick={() => resetDefaults()}>
           {t("reset")}
         </DBButton>
       )}
@@ -46,9 +38,7 @@ const ActionBar = () => {
       <DBButton
         variant="brand"
         icon="download"
-        onClick={() =>
-          downloadTheme(speakingNames, luminanceSteps, theme)
-        }
+        onClick={() => downloadTheme(speakingNames, luminanceSteps, theme)}
       >
         {t("export")}
       </DBButton>

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

@@ -52,8 +52,7 @@ const LogoUpload = memo(() => {
           <img
             className="h-siz-md mx-auto"
             src={getThemeImage(
-              theme.branding.image.dark ||
-                theme.branding.image.light,
+              theme.branding.image.dark || theme.branding.image.light,
             )}
             alt="logo"
           />

src/components/Customization/Preview/ColorPalettes/color-palettes.tsx

@@ -7,15 +7,17 @@ import { useTranslation } from "react-i18next";
 import chroma from "chroma-js";
 import PaletteBox from "./PaletteBox";
 import { isValidColor } from "../../../../utils";
-import {DefaultColorType} from "../../../../utils/data.ts";
+import { DefaultColorType } from "../../../../utils/data.ts";
 
 const ColorPalettes = () => {
   const { luminanceSteps, developerMode, theme } = useThemeBuilderStore(
     (state) => state,
   );
   const { t } = useTranslation();
 
-  const [allColors, setAllColors] = useState<Record<string, DefaultColorType>>({});
+  const [allColors, setAllColors] = useState<Record<string, DefaultColorType>>(
+    {},
+  );
 
   useEffect(() => {
     setAllColors({

src/components/Customization/Preview/ComponentContainer/data.tsx

@@ -195,7 +195,6 @@ export const components: ComponentList[] = [
           message="Required Message"
           required
         />
-
       </Fragment>
     ),
   },
@@ -289,7 +288,6 @@ export const components: ComponentList[] = [
           message="Required Message"
           required
         />
-
       </Fragment>
     ),
   },

src/components/Customization/Preview/ScreenContainer/LoginScreen/login-screen.tsx

@@ -38,11 +38,7 @@ const LoginScreen = () => {
       <div className="flex flex-col p-fix-2xl justify-between h-full">
         <div className="flex flex-col gap-fix-md">
           <DBInput variant="floating" label={t("username")} />
-          <DBInput
-            variant="floating"
-            label={t("password")}
-            type="password"
-          />
+          <DBInput variant="floating" label={t("password")} type="password" />
           <DBLink href="">{t("forgotPassword")}</DBLink>
         </div>
         <div className="flex flex-col gap-fix-md">

src/components/Customization/Preview/ScreenContainer/NavigationScreen/navigation-screen.tsx

@@ -43,7 +43,11 @@ const NavigationScreen = () => {
           <div className="flex gap-fix-md items-center">
             <span data-icon="schedule">{t("today")}, 00:00</span>
             <span data-icon="person">1 Pers.</span>
-            <DBButton variant="ghost" icon="sliders_horizontal" className="ml-auto">
+            <DBButton
+              variant="ghost"
+              icon="sliders_horizontal"
+              className="ml-auto"
+            >
               {t("options")}
             </DBButton>
           </div>
@@ -59,7 +63,9 @@ const NavigationScreen = () => {
           <DBButton>{t("now")}</DBButton>
           <DBButton>{t("later")}</DBButton>
         </div>
-        <DBNotification semantic="informational">{t("iceInformation")}</DBNotification>
+        <DBNotification semantic="informational">
+          {t("iceInformation")}
+        </DBNotification>
 
         <div className="grid grid-cols-12 gap-fix-xs py-fix-sm px-fix-lg h-full items-center">
           <strong className="col-span-2 ml-auto">12:00</strong>

src/components/Customization/Preview/ScreenContainer/index.tsx

@@ -1,3 +1,3 @@
 import ScreenContainer from "./screen-container";
 
-export default ScreenContainer;
+export default ScreenContainer;

src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx

@@ -82,7 +82,10 @@ const ColorPicker = ({
           >
             {t(label)}
             {!isAddColor && (
-              <DBTooltip placement="bottom" className="db-neutral-bg-basic-level-1">
+              <DBTooltip
+                placement="bottom"
+                className="db-neutral-bg-basic-level-1"
+              >
                 {t("adaptColor")}
               </DBTooltip>
             )}

src/components/Customization/Tabs/data.ts

@@ -1,5 +1,5 @@
-import {TabItemType} from "../../../pages/Customization/data.ts";
+import { TabItemType } from "../../../pages/Customization/data.ts";
 
 export type TabsPropsType = {
-    tabs: TabItemType[]
-}
+  tabs: TabItemType[];
+};

src/components/DefaultPage/default-page.tsx

@@ -17,7 +17,7 @@ const DefaultPage = ({
 }: PropsWithChildren<DefaultPagePropsType>) => {
   const { t } = useTranslation();
   const { theme, darkMode, developerMode } = useThemeBuilderStore(
-    (state) => state
+    (state) => state,
   );
   const [drawerOpen, setDrawerOpen] = useState<boolean>();
 
@@ -43,7 +43,7 @@ const DefaultPage = ({
                     src={getThemeImage(
                       darkMode && theme.branding.image.dark
                         ? theme.branding.image.dark
-                        : theme.branding.image.light
+                        : theme.branding.image.light,
                     )}
                     alt="brand"
                   />

src/components/Demo/Sidenav/index.tsx

@@ -1,3 +1,3 @@
 import Sidenav from "./sidenav.tsx";
 
-export default Sidenav;
+export default Sidenav;

src/components/Landing/Header/index.tsx

@@ -1,3 +1,3 @@
 import Header from "./header.tsx";
 
-export default Header;
+export default Header;

src/components/Landing/ThemeSelect/index.tsx

@@ -1,3 +1,3 @@
 import ThemeSelect from "./theme-select.tsx";
 
-export default ThemeSelect;
+export default ThemeSelect;

src/components/Playground/Sidebar/Customize/Setting/SelectColorDialog/select-color-dialog.tsx

@@ -62,7 +62,7 @@ const SelectColorDialog = ({
               >
                 <DBCard
                   data-interactive="elevation"
-                  style={{backgroundColor: "var(--db-adaptive-bg-default)"}}
+                  style={{ backgroundColor: "var(--db-adaptive-bg-default)" }}
                   className={`flex-row min-h-siz-lg gap-fix-md justify-between items-center db-${color}`}
                   spacing="small"
                 >

src/components/Playground/Toolbar/toolbar.tsx

@@ -4,7 +4,7 @@ import { DBButton, DBTooltip } from "@db-ui/react-components";
 import { useDragAndDropStore } from "../../../store";
 import { useTranslation } from "react-i18next";
 import Upload from "../../Customization/Upload";
-import {downloadPlayground} from "../../../utils/outputs/download.ts";
+import { downloadPlayground } from "../../../utils/outputs/download.ts";
 
 const Toolbar = ({ className }: ToolbarType) => {
   const { t } = useTranslation();

src/index.scss

@@ -137,7 +137,7 @@ h6 {
   font-size: 0;
 }
 
-.db-tab-panel{
+.db-tab-panel {
   position: absolute;
-  inset-block-start:  variables.$db-spacing-fixed-3xl;
-}
+  inset-block-start: variables.$db-spacing-fixed-3xl;
+}