Skip to content

Commit cf9c475

Browse files
geoffhousegeoffhouse
committed
fix file overflow by specifying icon names
1 parent d3edfa6 commit cf9c475

47 files changed

Lines changed: 26722 additions & 54973 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docker-compose.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
# DATE: 04/03/2021
44
# DESC: Defines Docker services for Bug
55

6-
version: "3.8"
7-
86
networks:
97
bug:
108
name: bug

‎src/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps=true

‎src/client/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps=true

‎src/client/config-overrides.js‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// This file (along with customize-cra) allows us to compile the JSX files in the modules folder
21
const path = require("path");
32
const {
43
override,
@@ -10,28 +9,32 @@ const {
109
} = require("customize-cra");
1110

1211
module.exports = function (config, env) {
13-
return Object.assign(
14-
config,
15-
override(
16-
removeModuleScopePlugin(),
17-
disableEsLint(),
18-
babelInclude([
19-
// include the normal folder
20-
path.resolve("src"),
21-
// include the modules folder (all the custom UI components for each module)
22-
path.resolve("../modules"),
23-
]),
24-
addWebpackAlias({
25-
"@modules": path.resolve("../modules"),
26-
"@components": path.resolve("src/components"),
27-
"@core": path.resolve("src/core"),
28-
"@data": path.resolve("src/data"),
29-
"@pages": path.resolve("src/pages"),
30-
"@redux": path.resolve("src/redux"),
31-
"@utils": path.resolve("src/utils"),
32-
"@hooks": path.resolve("src/hooks"),
33-
}),
34-
addBabelPlugin("babel-plugin-bulk-import")
35-
)(config, env)
36-
);
37-
};
12+
// Apply all your overrides
13+
const overriddenConfig = override(
14+
removeModuleScopePlugin(),
15+
disableEsLint(),
16+
babelInclude([
17+
path.resolve("src"),
18+
path.resolve("../modules"),
19+
]),
20+
addWebpackAlias({
21+
"@modules": path.resolve("../modules"),
22+
"@components": path.resolve("src/components"),
23+
"@core": path.resolve("src/core"),
24+
"@data": path.resolve("src/data"),
25+
"@pages": path.resolve("src/pages"),
26+
"@redux": path.resolve("src/redux"),
27+
"@utils": path.resolve("src/utils"),
28+
"@hooks": path.resolve("src/hooks"),
29+
}),
30+
addBabelPlugin("babel-plugin-bulk-import")
31+
)(config, env);
32+
33+
// Add watchOptions to ignore node_modules
34+
overriddenConfig.watchOptions = {
35+
...(overriddenConfig.watchOptions || {}),
36+
ignored: /node_modules/,
37+
};
38+
39+
return overriddenConfig;
40+
};

‎src/client/package-lock.json‎

Lines changed: 26223 additions & 54582 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/client/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@fortawesome/free-solid-svg-icons": "^5.15.2",
1515
"@fortawesome/react-fontawesome": "^0.1.14",
1616
"@material-ui/core": "^4.12.4",
17+
"@mdi/js": "^7.4.47",
1718
"@mui/core": "^5.0.0-alpha.54",
1819
"@mui/icons-material": "^5.0.1",
1920
"@mui/lab": "^5.0.0-alpha.49",
@@ -33,7 +34,6 @@
3334
"javascript-time-ago": "^2.3.10",
3435
"leaflet": "^1.9.3",
3536
"md5": "^2.3.0",
36-
"mdi-material-ui": "^6.22.1",
3737
"moment": "^2.29.2",
3838
"mui-rte": "^2.0.1",
3939
"notistack": "^1.0.6-next.3",
@@ -125,6 +125,7 @@
125125
},
126126
"devDependencies": {
127127
"@babel/core": "^7.14.3",
128+
"@babel/plugin-proposal-numeric-separator": "^7.18.6",
128129
"@react-theming/storybook-addon": "^1.1.3",
129130
"@storybook/addon-actions": "^6.5",
130131
"@storybook/addon-essentials": "^6.5",

‎src/client/src/core/BugDynamicIcon.jsx‎

Lines changed: 12 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,17 @@
1-
import * as Icons from "@mui/icons-material/";
2-
import { useTheme } from "@mui/material/styles";
3-
import * as MDIIcons from "mdi-material-ui";
4-
import * as React from "react";
1+
import { Suspense } from "react";
2+
import { iconMap } from "../utils/iconMappings";
53

6-
function upperFirst(string) {
7-
return string.slice(0, 1).toUpperCase() + string.slice(1, string.length);
8-
}
9-
10-
function fixIconNames(string) {
11-
const name = string.split("-").map(upperFirst).join("");
12-
if (name === "3dRotation") {
13-
return "ThreeDRotation";
14-
} else if (name === "4k") {
15-
return "FourK";
16-
} else if (name === "360") {
17-
return "ThreeSixty";
18-
} else if (name === "AxisXyArrowLock") {
19-
return "AxisXYArrowLock";
20-
}
21-
return name;
22-
}
23-
24-
export default function BugDynamicIcon({ sx = {}, iconName, color }) {
25-
const theme = useTheme();
4+
export default function DynamicIcon({ iconName, sx = {}, color }) {
5+
const IconComponent = iconMap[iconName];
266

27-
if (!color) {
28-
color = theme.palette.text.primary;
7+
if (!IconComponent) {
8+
console.error(`Icon "${iconName}" not found in iconMap`);
9+
return null;
2910
}
3011

31-
const isMDI = (name) => {
32-
if (name.split("-")[0] === "mdi") {
33-
return true;
34-
}
35-
return false;
36-
};
37-
38-
return React.useMemo(() => {
39-
let Icon;
40-
if (isMDI(iconName)) {
41-
const fixedIconName = fixIconNames(iconName.replace("mdi-", ""));
42-
Icon = MDIIcons[fixedIconName];
43-
if (!Icon) {
44-
console.error(`MDI Icon ${fixedIconName} not found`);
45-
return null;
46-
}
47-
} else {
48-
const fixedIconName = fixIconNames(iconName);
49-
Icon = Icons[fixedIconName];
50-
if (!Icon) {
51-
console.error(`Icon ${fixedIconName} not found`);
52-
return null;
53-
}
54-
}
55-
return <Icon sx={sx} style={color ? { color: color } : {}} />;
56-
}, [color, iconName, sx]);
12+
return (
13+
<Suspense fallback={null}>
14+
<IconComponent sx={sx} style={color ? { color } : {}} />
15+
</Suspense>
16+
);
5717
}

‎src/client/src/core/BugNetworkIcon.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import BugDynamicIcon from "@core/BugDynamicIcon";
12
import { Box } from "@mui/material";
2-
import { Lan } from "mdi-material-ui";
33

44
export default function BugNetworkIcon({ disabled = false, sx = {}, activeColor = "primary.main" }) {
55
return (
@@ -12,7 +12,7 @@ export default function BugNetworkIcon({ disabled = false, sx = {}, activeColor
1212
...sx,
1313
}}
1414
>
15-
<Lan />
15+
<BugDynamicIcon iconName="mdiLan" />
1616
</Box>
1717
);
1818
}

‎src/client/src/utils/MdiSvgIcon.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function MdiSvgIcon({ path, size = 24, color = 'currentColor', ...props }) {
2+
return (
3+
<svg
4+
width={size}
5+
height={size}
6+
viewBox="0 0 24 24"
7+
fill={color}
8+
{...props}
9+
>
10+
<path d={path} />
11+
</svg>
12+
);
13+
}

‎src/client/src/utils/iconMappings.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
3+
// List of MDI icon names
4+
const mdiIconNames = [
5+
"mdiAccount",
6+
"mdiHome",
7+
"mdiSpeaker",
8+
"mdiViewQuilt",
9+
"mdiMatrix",
10+
"mdiCloudBraces",
11+
"mdiPhoneSettings",
12+
"mdiPowerPlugOutline",
13+
"mdiSatelliteUplink",
14+
"mdiRadioTower",
15+
"mdiSetTopBox",
16+
"mdiMonitorEye",
17+
"mdiLink",
18+
"mdiVideoWireless",
19+
"mdiClipboardList",
20+
"mdiRouter",
21+
"mdiMapMarkerPath",
22+
"mdiOrderAlphabeticalAscending",
23+
"mdiNoteEditOutline",
24+
"mdiLan",
25+
"mdiRssBox",
26+
"mdiSpeedometer",
27+
"mdiTransitConnectionVariant",
28+
"mdiTurtle",
29+
"mdiWifi",
30+
"mdiPlayBoxOutline",
31+
];
32+
33+
const lazyMdiIcon = (iconName) => {
34+
return React.lazy(async () => {
35+
const icons = await import("@mdi/js");
36+
const { default: MdiSvgIcon } = await import("./MdiSvgIcon");
37+
return {
38+
default: (props) => <MdiSvgIcon path={icons[iconName]} {...props} />,
39+
};
40+
});
41+
}
42+
43+
export const iconMap = {
44+
45+
// MUI icons
46+
Home: React.lazy(() => import("@mui/icons-material/Home")),
47+
AccountCircle: React.lazy(() => import("@mui/icons-material/AccountCircle")),
48+
ChevronRight: React.lazy(() => import("@mui/icons-material/ChevronRight")),
49+
Dvr: React.lazy(() => import("@mui/icons-material/Dvr")),
50+
Settings: React.lazy(() => import("@mui/icons-material/Settings")),
51+
Dashboard: React.lazy(() => import("@mui/icons-material/Dashboard")),
52+
People: React.lazy(() => import("@mui/icons-material/People")),
53+
Security: React.lazy(() => import("@mui/icons-material/Security")),
54+
SettingsBackupRestore: React.lazy(() => import("@mui/icons-material/SettingsBackupRestore")),
55+
SystemUpdateAlt: React.lazy(() => import("@mui/icons-material/SystemUpdateAlt")),
56+
ResetTv: React.lazy(() => import("@mui/icons-material/ResetTv")),
57+
Info: React.lazy(() => import("@mui/icons-material/Info")),
58+
Receipt: React.lazy(() => import("@mui/icons-material/Receipt")),
59+
SettingsEthernet: React.lazy(() => import("@mui/icons-material/SettingsEthernet")),
60+
SmartButton: React.lazy(() => import("@mui/icons-material/SmartButton")),
61+
Schedule: React.lazy(() => import("@mui/icons-material/Schedule")),
62+
63+
// MDI icons
64+
...Object.fromEntries(mdiIconNames.map(name => [name, lazyMdiIcon(name)])),
65+
66+
};

0 commit comments

Comments
 (0)