Fix Prettier and linting errors

.storybook/ThemeSwapper.tsx

@@ -1,27 +1,38 @@
-import {useColorScheme} from "@mui/material";
+import { useColorScheme } from "@mui/material";
 import * as React from "react";
-import {useEffect} from "react";
+import { useEffect } from "react";
+
+interface Globals {
+  theme: string;
+  themeMode: string;
+}
+
+interface Context {
+  globals: Globals;
+}
 
 export interface ThemeSwapperProps {
-  context: any,
+  context: Context;
   children: React.ReactNode;
 }
 
-export const TextLight = 'Mode: Light'
-export const TextDark = 'Mode: Dark'
+export const TextLight = "Mode: Light";
+export const TextDark = "Mode: Dark";
 
-const ThemeSwapper = ( {context, children}: ThemeSwapperProps ) => {
+const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
   const { mode, setMode } = useColorScheme();
   //if( !mode ) return
-  
+
   useEffect(() => {
     const selectedThemeMode = context.globals.themeMode || TextLight;
-    setMode((selectedThemeMode == TextLight) ? "light" : "dark")
-  },[context.globals.themeMode]);
-
-  return <div style={{backgroundColor: mode === "light" ? "#fafafa" : "#050505"}}>
-    {children}
-  </div>
+    setMode(selectedThemeMode == TextLight ? "light" : "dark");
+  }, [context.globals.themeMode]);
+
+  return (
+    <div style={{ backgroundColor: mode === "light" ? "#fafafa" : "#050505" }}>
+      {children}
+    </div>
+  );
 };
 
-export { ThemeSwapper };
+export { ThemeSwapper, Context };

.storybook/main.ts

@@ -7,9 +7,9 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
-    '@storybook/addon-links',
-    '@storybook/addon-toolbars',
-    'storybook-dark-mode'
+    "@storybook/addon-links",
+    "@storybook/addon-toolbars",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/react-webpack5",

.storybook/preview.tsx

@@ -1,64 +1,70 @@
-import React from 'react';
-import {CssBaseline} from "@mui/material";
+import React from "react";
+import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 
-import {ThemeProvider} from '../src'
-import {BaseTheme, DiamondTheme} from '../src'
+import { ThemeProvider } from "../src";
+import { BaseTheme, DiamondTheme } from "../src";
 
-import {ThemeSwapper, TextLight, TextDark} from "./ThemeSwapper";
+import { Context, ThemeSwapper, TextLight, TextDark } from "./ThemeSwapper";
 
-const TextThemeBase = 'Theme: Base'
-const TextThemeDiamond = 'Theme: Diamond'
+const TextThemeBase = "Theme: Base";
+const TextThemeDiamond = "Theme: Diamond";
 
 export const decorators = [
-  (StoriesWithPadding:any) => {
-    return <div style={{padding: '2em'}}>
-      <StoriesWithPadding />
-    </div>
+  (StoriesWithPadding: React.FC) => {
+    return (
+      <div style={{ padding: "2em" }}>
+        <StoriesWithPadding />
+      </div>
+    );
   },
-  (StoriesWithThemeSwapping:any, context: any) => {
-    return <ThemeSwapper context={context}>
-      <StoriesWithThemeSwapping/>
-    </ThemeSwapper>
+  (StoriesWithThemeSwapping: React.FC, context: Context) => {
+    return (
+      <ThemeSwapper context={context}>
+        <StoriesWithThemeSwapping />
+      </ThemeSwapper>
+    );
   },
-  (StoriesWithThemeProvider:any, context:any) => {
+  (StoriesWithThemeProvider: React.FC, context: Context) => {
     const selectedTheme = context.globals.theme || TextThemeBase;
     const selectedThemeMode = context.globals.themeMode || TextLight;
 
-    return <ThemeProvider
-        theme={(selectedTheme == TextThemeBase) ? BaseTheme : DiamondTheme}
-        defaultMode={(selectedThemeMode == TextLight) ? "light" : "dark"}
-    >
-      <CssBaseline/>
-      <StoriesWithThemeProvider/>
-    </ThemeProvider>
+    return (
+      <ThemeProvider
+        theme={selectedTheme == TextThemeBase ? BaseTheme : DiamondTheme}
+        defaultMode={selectedThemeMode == TextLight ? "light" : "dark"}
+      >
+        <CssBaseline />
+        <StoriesWithThemeProvider />
+      </ThemeProvider>
+    );
   },
 ];
 
 const preview: Preview = {
   globalTypes: {
     theme: {
-      description: 'Global theme for components',
+      description: "Global theme for components",
       toolbar: {
-        title: 'Theme',
-        icon: 'cog',
+        title: "Theme",
+        icon: "cog",
         items: [TextThemeBase, TextThemeDiamond],
         dynamicTitle: true,
       },
     },
     themeMode: {
-      description: 'Global theme mode for components',
+      description: "Global theme mode for components",
       toolbar: {
-        title: 'Theme Mode',
-        icon: 'mirror',
+        title: "Theme Mode",
+        icon: "mirror",
         items: [TextLight, TextDark],
         dynamicTitle: true,
       },
     },
   },
   initialGlobals: {
-    theme: 'Theme: Diamond',
-    themeMode: 'Mode: Light',
+    theme: "Theme: Diamond",
+    themeMode: "Mode: Light",
   },
   parameters: {
     controls: {
@@ -68,7 +74,7 @@ const preview: Preview = {
       },
     },
     backgrounds: { disable: true },
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 };
 

rollup.config.mjs

@@ -9,51 +9,51 @@ import image from "@rollup/plugin-image";
 import packageJson from "./package.json" with { type: "json" };
 
 export default [
-    {
-        input: "src/index.ts",
-        output: {
-            format: "cjs",
-            file: packageJson.main
-        },
-        plugins: [
-            peerDepsExternal({
-                includeDependencies: true,
-            }),
-            image(),
-            resolve(),
-            commonjs(),
-            terser(),
-            typescript({
-                tsconfig: "./tsconfig.json",
-                exclude: ["**/*.stories.*", "**/*.test.*"],
-            }),
-            postcss({
-                extensions: [".css"],
-            }),
-        ],
+  {
+    input: "src/index.ts",
+    output: {
+      format: "cjs",
+      file: packageJson.main,
     },
-    {
-        input: "src/index.ts",
-        output: {
-            format: "esm",
-            sourcemap: true,
-            file: packageJson.module
-        },
-        plugins: [
-            peerDepsExternal({
-                includeDependencies: true,
-            }),
-            image(),
-            resolve(),
-            commonjs(),
-            terser(),
-            typescript({
-                tsconfig: "./tsconfig.json",
-                exclude: ["**/*.stories.*", "**/*.test.*"],
-            }),
-            postcss({
-                extensions: [".css"],
-            }),
-        ],
-    }
+    plugins: [
+      peerDepsExternal({
+        includeDependencies: true,
+      }),
+      image(),
+      resolve(),
+      commonjs(),
+      terser(),
+      typescript({
+        tsconfig: "./tsconfig.json",
+        exclude: ["**/*.stories.*", "**/*.test.*"],
+      }),
+      postcss({
+        extensions: [".css"],
+      }),
+    ],
+  },
+  {
+    input: "src/index.ts",
+    output: {
+      format: "esm",
+      sourcemap: true,
+      file: packageJson.module,
+    },
+    plugins: [
+      peerDepsExternal({
+        includeDependencies: true,
+      }),
+      image(),
+      resolve(),
+      commonjs(),
+      terser(),
+      typescript({
+        tsconfig: "./tsconfig.json",
+        exclude: ["**/*.stories.*", "**/*.test.*"],
+      }),
+      postcss({
+        extensions: [".css"],
+      }),
+    ],
+  },
 ];

src/components/Breadcrumbs.stories.tsx

@@ -1,47 +1,47 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Breadcrumbs} from "./Breadcrumbs";
+import { Breadcrumbs } from "./Breadcrumbs";
 
 const meta: Meta<typeof Breadcrumbs> = {
-	title: "SciReactUI/Navigation/Breadcrumbs",
-	component: Breadcrumbs,
-	tags: ["autodocs"],
+  title: "SciReactUI/Navigation/Breadcrumbs",
+  component: Breadcrumbs,
+  tags: ["autodocs"],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-	args: {
-		path: "/first/second/third/last/"
-	},
-}
+  args: {
+    path: "/first/second/third/last/",
+  },
+};
 
 export const ShortPath: Story = {
-	args: {
-		path: "just one"
-	},
+  args: {
+    path: "just one",
+  },
 };
 
 export const LongPath: Story = {
-	args: {
-		path: "/first/the second/third/fourth/almost last/last one/"
-	},
+  args: {
+    path: "/first/the second/third/fourth/almost last/last one/",
+  },
 };
 
 export const Empty: Story = {
-	args: {
-		path: ""
-	},
+  args: {
+    path: "",
+  },
 };
 
 export const ColorChange: Story = {
-	args: {
-		path: ["first","second","third","last"],
-		rootProps: {
-			sx: { backgroundColor: "blue" }
-		},
-		muiBreadcrumbsProps: {
-			sx: { color: "yellow" }
-		}
-	},
+  args: {
+    path: ["first", "second", "third", "last"],
+    rootProps: {
+      sx: { backgroundColor: "blue" },
+    },
+    muiBreadcrumbsProps: {
+      sx: { color: "yellow" },
+    },
+  },
 };