chore: add prettier plugin to sort imports (#238)

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-organize-imports"]
 }

package.json

@@ -63,6 +63,7 @@
     "lerna": "8.1.2",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "standard-version": "^9.5.0",

packages/wallet-management/package.json

@@ -15,7 +15,8 @@
     "clean": "yarn build:clean && rm -rf dist",
     "check:types": "tsc --noEmit",
     "lint": "eslint --ext .tsx --ext .ts ./src",
-    "pre-commit:validate": "yarn lint --fix --max-warnings=0",
+    "format": "prettier --write ./src/",
+    "pre-commit:validate": "yarn format &&  yarn lint --fix --max-warnings=0",
     "pre-push:validate": "yarn check:types"
   },
   "publishConfig": {

packages/widget-embedded/package.json

@@ -10,7 +10,8 @@
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
     "preview": "vite preview",
     "lint": "eslint --ext .tsx --ext .ts ./src",
-    "pre-commit:validate": "yarn lint --fix --max-warnings=0",
+    "format": "prettier --write ./src/",
+    "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0",
     "pre-push:validate": "yarn check:types"
   },
   "publishConfig": {

packages/widget-playground-next/package.json

@@ -6,7 +6,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "pre-commit:validate": "next lint --fix --max-warnings=0"
+    "format": "prettier --write ./src/",
+    "pre-commit:validate": "yarn format && next lint --fix --max-warnings=0"
   },
   "publishConfig": {
     "access": "public"

packages/widget-playground-next/src/app/layout.tsx

@@ -1,5 +1,5 @@
-import type { Metadata } from 'next';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'LI.FI Widget',

packages/widget-playground-next/src/app/page.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-// This polyfill is only needed for the Next.js implementation
+import { Box } from '@mui/material';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+// The core-js/actual/structured-clone polyfill is only needed for the Next.js implementation
 // the lack of structureClone support for Next.js is currently a requested feature
 //   https://github.com/vercel/next.js/discussions/33189
 import 'core-js/actual/structured-clone';
 import { type PropsWithChildren } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Box } from '@mui/material';
 
 import {
-  EnvVariablesProvider,
-  EditToolsProvider,
-  WidgetConfigProvider,
-  PlaygroundThemeProvider,
   DrawerControls,
+  EditToolsProvider,
+  EnvVariablesProvider,
   FontLoaderProvider,
+  PlaygroundThemeProvider,
+  WidgetConfigProvider,
 } from '@lifi/widget-playground';
 
 import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config';
 
-import '@lifi/widget-playground/fonts';
 import { WidgetNextView } from '@/app/WidgetNextView';
+import '@lifi/widget-playground/fonts';
 
 const queryClient = new QueryClient();
 

packages/widget-playground-vite/package.json

@@ -10,7 +10,8 @@
     "preview": "vite preview",
     "check:types": "tsc --noEmit",
     "lint": "eslint --ext .tsx --ext .ts ./src",
-    "pre-commit:validate": "yarn lint --fix --max-warnings=0"
+    "format": "prettier --write ./src/",
+    "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0"
   },
   "publishConfig": {
     "access": "public"

packages/widget-playground-vite/src/App.tsx

@@ -1,15 +1,15 @@
-import { type PropsWithChildren } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@mui/material';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { type PropsWithChildren } from 'react';
 
 import {
-  EnvVariablesProvider,
+  DrawerControls,
   EditToolsProvider,
-  WidgetConfigProvider,
+  EnvVariablesProvider,
+  FontLoaderProvider,
   PlaygroundThemeProvider,
-  DrawerControls,
+  WidgetConfigProvider,
   WidgetView,
-  FontLoaderProvider,
 } from '@lifi/widget-playground';
 
 import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config';

packages/widget-playground-vite/src/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
-import { reportWebVitals } from './reportWebVitals';
 import './index.css';
+import { reportWebVitals } from './reportWebVitals';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {

packages/widget-playground/package.json

@@ -15,7 +15,8 @@
     "check:types": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "pre-commit:validate": "yarn lint --fix --max-warnings=0",
+    "format": "prettier --write ./src/",
+    "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0",
     "pre-push:validate": "yarn check:types & yarn test"
   },
   "publishConfig": {

packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx

@@ -1,11 +1,11 @@
+import { Collapse } from '@mui/material';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useId } from 'react';
-import { Collapse } from '@mui/material';
 import {
   Card,
   CardRowButton,
-  CardValue,
   CardTitleContainer,
+  CardValue,
 } from '../Card.style';
 import { useExpandableCard } from './useExpandableCard';
 

packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx

@@ -1,5 +1,4 @@
-import type { PropsWithChildren } from 'react';
-import type { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, PropsWithChildren, SetStateAction } from 'react';
 import { createContext, useState } from 'react';
 
 export const ExpandableCardAccordionContext = createContext<{

packages/widget-playground/src/components/Card/index.ts

@@ -1,2 +1,2 @@
-export * from './ExpandableCard';
 export * from './Card.style';
+export * from './ExpandableCard';

packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx

@@ -1,6 +1,5 @@
-import { Box, Typography } from '@mui/material';
 import TabContext from '@mui/lab/TabContext';
-import { useEditToolsActions, useCodeToolValues } from '../../../store';
+import { Box, Typography } from '@mui/material';
 import {
   CRALogo,
   GatsbyLogo,
@@ -12,12 +11,13 @@ import {
   ViteLogo,
   VueLogo,
 } from '../../../logo';
+import { useCodeToolValues, useEditToolsActions } from '../../../store';
 import { Card } from '../../Card';
 import { Tab, Tabs } from '../../Tabs';
 import { TabContentContainer } from '../DrawerControls.style';
 import { CodeEditor } from './CodeEditor';
-import { ProjectButton } from './ProjectButton';
 import { FontEmbedInfo } from './FontEmbedInfo';
+import { ProjectButton } from './ProjectButton';
 
 export const CodeControl = () => {
   const { codeControlTab } = useCodeToolValues();

packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useRef, useState } from 'react';
-import { Tooltip, useTheme } from '@mui/material';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import type { BeforeMount, OnMount } from '@monaco-editor/react';
 import Editor from '@monaco-editor/react';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { Tooltip, useTheme } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
 import { useThemeMode } from '../../../hooks';
+import { getConfigOutput, useConfig } from '../../../store';
 import { tooltipPopperZIndex } from '../DrawerControls.style';
 import {
   CodeContainer,
-  EditorContainer,
   CodeCopyButton,
+  EditorContainer,
   EditorSkeleton,
 } from './CodeControl.style';
-import { useConfig, getConfigOutput } from '../../../store';
 import { stringifyConfig } from './utils/stringifyConfig';
 
 interface MonacoEditor {

packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx

@@ -1,23 +1,23 @@
-import type { MouseEventHandler } from 'react';
-import { useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import InfoIcon from '@mui/icons-material/Info';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import {
+  Box,
+  ClickAwayListener,
   IconButton,
   Popper,
   Tooltip,
   Typography,
-  ClickAwayListener,
-  Box,
 } from '@mui/material';
-import InfoIcon from '@mui/icons-material/Info';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import CloseIcon from '@mui/icons-material/Close';
+import type { MouseEventHandler } from 'react';
+import { useState } from 'react';
+import { useFontToolValues } from '../../../store';
 import { popperZIndex, tooltipPopperZIndex } from '../DrawerControls.style';
 import {
   FontEmbedPopperContainer,
   FontMessageCloseButton,
   GoogleFontLink,
 } from './CodeControl.style';
-import { useFontToolValues } from '../../../store';
 
 interface FontMessageProps {
   fontFamily: string;

packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactNode } from 'react';
-import { ProjectButtonBase, ProjectAvatar } from './CodeControl.style';
+import { ProjectAvatar, ProjectButtonBase } from './CodeControl.style';
 
 interface ProjectButtonProps extends PropsWithChildren {
   href: string;

packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx

@@ -1,30 +1,30 @@
+import type { Appearance, WidgetTheme } from '@lifi/widget';
+import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import NightlightIcon from '@mui/icons-material/Nightlight';
+import type { TabProps } from '@mui/material';
+import { Box, Tooltip } from '@mui/material';
+import diff from 'microdiff';
 import type {
   FC,
   PropsWithChildren,
   ReactElement,
   SyntheticEvent,
 } from 'react';
 import { useEffect } from 'react';
-import type { TabProps } from '@mui/material';
-import { Box, Tooltip } from '@mui/material';
-import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import NightlightIcon from '@mui/icons-material/Nightlight';
-import diff from 'microdiff';
-import type { Appearance, WidgetTheme } from '@lifi/widget';
+import type { ThemeMode } from '../../../hooks';
+import { useThemeMode } from '../../../hooks';
+import type { ThemeItem } from '../../../store';
 import {
   useConfigActions,
   useConfigAppearance,
   useEditToolsActions,
   useThemeValues,
 } from '../../../store';
-import { ExpandableCard, CardValue } from '../../Card';
+import { cloneStructuredConfig, patch } from '../../../utils';
+import { CardValue, ExpandableCard } from '../../Card';
 import { Tab, Tabs } from '../../Tabs';
 import { Badge, CapitalizeFirstLetter } from './DesignControls.style';
-import type { ThemeItem } from '../../../store';
-import type { ThemeMode } from '../../../hooks';
-import { useThemeMode } from '../../../hooks';
-import { cloneStructuredConfig, patch } from '../../../utils';
 
 const appearanceIcons = {
   light: LightModeIcon,

packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx

@@ -1,13 +1,13 @@
 import type { BoxProps } from '@mui/material';
-import { safe6DigitHexColor } from '../../../utils';
 import { useConfigActions, useConfigColorsFromPath } from '../../../store';
+import { safe6DigitHexColor } from '../../../utils';
 import { ExpandableCard } from '../../Card';
 import {
+  CapitalizeFirstLetter,
+  ColorInput,
   ColorSelectorContainer,
   ColorSwatch,
   ColorSwatches,
-  ColorInput,
-  CapitalizeFirstLetter,
 } from './DesignControls.style';
 
 const editableColors = {

packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx

@@ -1,25 +1,25 @@
-import { alpha, styled } from '@mui/material/styles';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
-import { alertClasses } from '@mui/material/Alert';
 import type {
+  AutocompleteProps,
   BoxProps,
   InputBaseProps,
   Theme,
-  AutocompleteProps,
 } from '@mui/material';
 import {
   Box,
   ButtonBase,
   InputBase,
-  Autocomplete as MuiAutocomplete,
-  Popper,
   Alert as MuiAlert,
+  Autocomplete as MuiAutocomplete,
+  Badge as MuiBadge,
   Select as MuiSelect,
+  Popper,
   Typography,
-  Badge as MuiBadge,
   badgeClasses,
 } from '@mui/material';
+import { alertClasses } from '@mui/material/Alert';
+import { autocompleteClasses } from '@mui/material/Autocomplete';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { alpha, styled } from '@mui/material/styles';
 import { getCardFieldsetBackgroundColor } from '../../../utils';
 import { autocompletePopperZIndex } from '../DrawerControls.style';
 

packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx

@@ -1,17 +1,17 @@
+import InfoIcon from '@mui/icons-material/Info';
+import { CircularProgress, TextField } from '@mui/material';
 import type { FocusEventHandler, SyntheticEvent } from 'react';
 import { useCallback } from 'react';
-import { CircularProgress, TextField } from '@mui/material';
-import InfoIcon from '@mui/icons-material/Info';
+import type { Font } from '../../../../providers';
+import { useFontLoader } from '../../../../providers';
 import {
   useConfigActions,
   useEditToolsActions,
   useFontToolValues,
 } from '../../../../store';
-import type { Font } from '../../../../providers';
-import { useFontLoader } from '../../../../providers';
 import { ExpandableCard } from '../../../Card';
-import { Autocomplete, StyledPopper, Alert } from '../DesignControls.style';
-import { defaultFont, allFonts } from './fontDefinitions';
+import { Alert, Autocomplete, StyledPopper } from '../DesignControls.style';
+import { allFonts, defaultFont } from './fontDefinitions';
 
 const getCompleteFontFamily = (font: Font) =>
   font.fallbackFonts

packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts

@@ -1,6 +1,6 @@
 import type { Font } from '../../../../../providers';
-import { systemFonts } from './systemFonts';
 import { googleFonts } from './googleFonts';
+import { systemFonts } from './systemFonts';
 
 // NOTE: although this is a google font, as the widget playground itself is using Inter we don't
 //  need to download the font files as they should already be downloaded - thus no fontFiles are defined

packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx

@@ -1,11 +1,11 @@
+import SettingsIcon from '@mui/icons-material/Settings';
 import type { BoxProps } from '@mui/material';
 import { useTheme } from '@mui/material';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { safe6DigitHexColor } from '../../../utils';
 import {
   useEditToolsActions,
   usePlaygroundSettingValues,
 } from '../../../store';
+import { safe6DigitHexColor } from '../../../utils';
 import { ExpandableCard } from '../../Card';
 import {
   CapitalizeFirstLetter,

packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx

@@ -1,8 +1,8 @@
-import type { SyntheticEvent } from 'react';
 import type { WidgetSubvariant } from '@lifi/widget';
+import type { SyntheticEvent } from 'react';
 import { useConfigActions, useConfigSubvariant } from '../../../store';
-import { Tab, Tabs } from '../../Tabs';
 import { CardValue, ExpandableCard } from '../../Card';
+import { Tab, Tabs } from '../../Tabs';
 
 export const SubvariantControl = () => {
   const { subvariant } = useConfigSubvariant();