fix: hmr linting issue (#746)

Signed-off-by: hxtree <[email protected]>

services/admin-client/components/DiceAnalyzer.tsx

@@ -94,7 +94,7 @@ export const DiceAnalyzer = (props: DiceAnalyzerProps) => {
 
         <Grid item>
           <Stack>
-            <Box component="form" noValidate autoComplete="off">
+            <Box component="form">
               <TextField
                 label="Dice Notation"
                 value={notation}

services/design-system/src/SelectChangeEvent.ts

@@ -0,0 +1,8 @@
+export type SelectChangeEvent<T = string> =
+  | (Event & {
+      target: {
+        value: T;
+        name: string;
+      };
+    })
+  | React.ChangeEvent<HTMLInputElement>;

services/design-system/src/components/Mui/Alert.tsx → services/design-system/src/components/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import MUIAlert, { AlertProps as MUIAlertProps } from '@mui/material/Alert';
 
-export type AlertProps = {} & MUIAlertProps;
+export type AlertProps = MUIAlertProps;
 
 export const Alert = (props: AlertProps) => {
   const { ...muiProps } = props;

services/design-system/src/components/Mui/LoadingButton.tsx → services/design-system/src/components/Button/LoadingButton.tsx

@@ -2,16 +2,21 @@ import MuiLoadingButton, {
   LoadingButtonProps as MuiLoadingButtonProps,
 } from '@mui/lab/LoadingButton';
 
-export type LoadingButtonProps = {} & MuiLoadingButtonProps;
+export type LoadingButtonProps = {
+  selected?: boolean;
+} & MuiLoadingButtonProps;
 
 export const LoadingButton = (props: LoadingButtonProps) => {
   const { children, ...muiProps } = props;
   return (
     <MuiLoadingButton
       {...muiProps}
       style={{
+        ...(props.selected && { backgroundColor: '#616366', color: '#FFF' }),
         fontFamily: 'Helvetica, arial, sans-serif',
         fontWeight: 'bold',
+        borderRadius: '36px',
+        padding: '15px 30px 10px 30px',
       }}
     >
       {children}

services/design-system/src/components/Mui/Checkbox.tsx → services/design-system/src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import MUICheckbox, {
   CheckboxProps as MUICheckboxProps,
 } from '@mui/material/Checkbox';
 
-export type CheckboxProps = {} & MUICheckboxProps;
+export type CheckboxProps = MUICheckboxProps;
 
 export const Checkbox = (props: CheckboxProps) => {
   const { ...muiProps } = props;

services/design-system/src/components/CodeSnippet/CodeSnippet.tsx

@@ -1,26 +1,15 @@
 // import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { codeTheme } from './hljs-custom';
-
-export enum CodeSnippetLanguages {
-  JSON = 'json',
-  HTML = 'html',
-  CSS = 'css',
-  JAVASCRIPT = 'javascript',
-}
-
-export type CodeSnippetProps = {
-  data: string;
-  language: CodeSnippetLanguages;
-};
+import { CodeSnippetProps } from './CodeSnippetProps';
 
 export const CodeSnippet = (props: CodeSnippetProps) => {
   const { data, language } = props;
 
   return (
     <div>
       {data ? (
-        <SyntaxHighlighter language={language} style={codeTheme as any}>
+        <SyntaxHighlighter language={language} style={codeTheme}>
           {data}
         </SyntaxHighlighter>
       ) : (
@@ -29,3 +18,5 @@ export const CodeSnippet = (props: CodeSnippetProps) => {
     </div>
   );
 };
+
+export default CodeSnippet;

services/design-system/src/components/CodeSnippet/CodeSnippetProps.ts

@@ -0,0 +1,11 @@
+export enum CodeSnippetLanguages {
+  JSON = 'json',
+  HTML = 'html',
+  CSS = 'css',
+  JAVASCRIPT = 'javascript',
+}
+
+export type CodeSnippetProps = {
+  data: string;
+  language: CodeSnippetLanguages;
+};

services/design-system/src/components/CodeSnippet/hljs-custom.ts

@@ -1,4 +1,6 @@
-export const codeTheme = {
+import { CSSProperties } from 'react';
+
+export const codeTheme: { [key: string]: CSSProperties } = {
   hljs: {
     display: 'block',
     overflowX: 'auto',

services/design-system/src/components/Gauge/Gauge.tsx

@@ -1,18 +1,4 @@
-export enum OrientationType {
-  RIGHT = 'RIGHT',
-  LEFT = 'LEFT',
-}
-
-export type GaugeProps = {
-  width: number;
-  height: number;
-  color?: string;
-  strokeWidth?: number;
-  orientation?: OrientationType;
-  current?: number;
-  max?: number;
-  boundingBox: boolean;
-};
+import { GaugeProps, OrientationType } from "./GaugeProps";
 
 export const Gauge = (props: GaugeProps) => {
   const width = props.width ?? 150;

services/design-system/src/components/Gauge/GaugeProps.ts

@@ -0,0 +1,15 @@
+export enum OrientationType {
+  RIGHT = 'RIGHT',
+  LEFT = 'LEFT',
+}
+
+export type GaugeProps = {
+  width: number;
+  height: number;
+  color?: string;
+  strokeWidth?: number;
+  orientation?: OrientationType;
+  current?: number;
+  max?: number;
+  boundingBox: boolean;
+};

services/design-system/src/components/Icons/Icons.tsx → services/design-system/src/components/Icons/Icons.ts

@@ -12,4 +12,4 @@ export {
   faBars,
 } from '@fortawesome/free-solid-svg-icons';
 
-export { faGithub } from '@fortawesome/free-brands-svg-icons';
+export { faGithub } from '@fortawesome/free-brands-svg-icons';

services/design-system/src/components/Mui/Layout.tsx → services/design-system/src/components/Layout/Layout.tsx

@@ -3,32 +3,32 @@ import MUIStack, { StackProps as MUIStackProps } from '@mui/material/Stack';
 import MUIGrid, { GridProps as MUIGridProps } from '@mui/material/Grid';
 import MUIPaper, { PaperProps as MUIPaperProps } from '@mui/material/Paper';
 
-export type PaperProps = {} & MUIPaperProps;
+export type PaperProps = MUIPaperProps;
 
 export const Paper = (props: PaperProps) => {
   const { children, ...muiProps } = props;
   return <MUIPaper {...muiProps}>{children}</MUIPaper>;
 };
 
-export type StackProps = {} & MUIStackProps;
+export type StackProps = MUIStackProps;
 export const Stack = (props: StackProps) => {
   const { children, ...muiProps } = props;
   return <MUIStack {...muiProps}>{children}</MUIStack>;
 };
 
-export type BoxProps = {} & MUIBoxProps;
+export type BoxProps = MUIBoxProps;
 export const Box = (props: BoxProps) => {
   const { children, ...muiProps } = props;
   return <MUIBox {...muiProps}>{children}</MUIBox>;
 };
 
-export type GridProps = {} & MUIGridProps;
+export type GridProps = MUIGridProps;
 export const Grid = (props: GridProps) => {
   const { children, ...muiProps } = props;
   return <MUIGrid {...muiProps}>{children}</MUIGrid>;
 };
 
-export type ItemProps = {} & PaperProps;
+export type ItemProps = PaperProps;
 // style={"padding: 0.5rem; font-family: 'Eczar', serif;"}
 export const Item = (props: ItemProps) => {
   const { children, ...muiProps } = props;

services/design-system/src/components/Mui/Link.tsx → services/design-system/src/components/Link/Link.tsx

@@ -1,6 +1,6 @@
 import MUILink, { LinkProps as MUILinkProps } from '@mui/material/Link';
 
-export type LinkProps = {} & MUILinkProps;
+export type LinkProps = MUILinkProps;
 
 export const Link = (props: LinkProps) => {
   const { children, ...muiProps } = props;

services/design-system/src/components/NonInteractiveLink/NonInteractiveLink.tsx → services/design-system/src/components/Link/NonInteractiveLink.tsx

@@ -1,6 +1,6 @@
 import MUILink, { LinkProps as MUILinkProps } from '@mui/material/Link';
 
-export type NonInteractiveLinkProps = {} & MUILinkProps;
+export type NonInteractiveLinkProps = MUILinkProps;
 
 export const NonInteractiveLink = (props: NonInteractiveLinkProps) => {
   const { children, ...muiProps } = props;

services/design-system/src/components/Mui/index.ts

@@ -0,0 +1,22 @@
+export {
+  Drawer,
+  CssBaseline,
+  Toolbar,
+  List,
+  Divider,
+  IconButton,
+  ListItem,
+  ListItemButton,
+  FormControl,
+  InputLabel,
+  Select,
+  CardContent,
+  Card,
+  Container,
+  OutlinedInput,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  styled,
+  useTheme,
+} from '@mui/material';

services/design-system/src/components/Mui/TextField.tsx → services/design-system/src/components/TextField/TextField.tsx

@@ -2,7 +2,7 @@ import MUITextField, {
   TextFieldProps as MUITextFieldProps,
 } from '@mui/material/TextField';
 
-export type TextFieldProps = {} & MUITextFieldProps;
+export type TextFieldProps = MUITextFieldProps;
 
 export const TextField = (props: TextFieldProps) => {
   const { ...muiProps } = props;