├── .npmrc ├── public ├── robots.txt ├── favicon.png ├── apple-icon.png ├── tools │ ├── SOLM.png │ ├── cesium.png │ ├── kstars.png │ ├── mmsstv.jpg │ ├── opent.png │ ├── satpy.png │ ├── virgo.png │ ├── ccsdspy.png │ ├── harmony.png │ ├── marsnow.png │ ├── nasaeyes.png │ ├── orbitron.jpg │ ├── orbitsim.png │ ├── satdump.png │ ├── satflare.png │ ├── satintel.png │ ├── skyfield.png │ ├── 100000Stars.png │ ├── astrocats.png │ ├── astrometry.png │ ├── poliastro.png │ ├── python-sgp4.png │ ├── satellite-js.png │ ├── iss-docking-sim.jpeg │ └── spacextelemetry.png ├── manifest.json └── index.html ├── src ├── assets │ ├── fonts │ │ ├── Roboto.ttf │ │ ├── Spacemono.ttf │ │ ├── Turnpike.ttf │ │ ├── nulshock.otf │ │ ├── spyagency.ttf │ │ ├── Transformers.ttf │ │ ├── aAtmospheric.ttf │ │ ├── ethnocentric.otf │ │ └── oceanicdrift.ttf │ ├── images │ │ ├── globe.png │ │ └── body-background.png │ └── theme │ │ ├── base │ │ ├── typography.css │ │ ├── breakpoints.js │ │ ├── borders.js │ │ ├── globals.js │ │ ├── boxShadows.js │ │ ├── typography.js │ │ └── colors.js │ │ ├── components │ │ ├── buttonBase.js │ │ ├── link.js │ │ ├── list │ │ │ ├── index.js │ │ │ ├── listItemText.js │ │ │ └── listItem.js │ │ ├── appBar.js │ │ ├── dialog │ │ │ ├── dialogActions.js │ │ │ ├── dialogTitle.js │ │ │ ├── dialogContentText.js │ │ │ ├── index.js │ │ │ └── dialogContent.js │ │ ├── stepper │ │ │ ├── step.js │ │ │ ├── index.js │ │ │ ├── stepConnector.js │ │ │ ├── stepLabel.js │ │ │ └── stepIcon.js │ │ ├── form │ │ │ ├── formLabel.js │ │ │ ├── select.js │ │ │ ├── formControlLabel.js │ │ │ ├── input.js │ │ │ ├── inputBase.js │ │ │ ├── switchButton.js │ │ │ ├── radio.js │ │ │ ├── autocomplete.js │ │ │ └── checkbox.js │ │ ├── iconButton.js │ │ ├── card │ │ │ ├── cardContent.js │ │ │ ├── cardMedia.js │ │ │ └── index.js │ │ ├── avatar.js │ │ ├── breadcrumbs.js │ │ ├── table │ │ │ ├── tableHead.js │ │ │ ├── tableCell.js │ │ │ └── tableContainer.js │ │ ├── svgIcon.js │ │ ├── icon.js │ │ ├── popover.js │ │ ├── sidenav.js │ │ ├── linearProgress.js │ │ ├── menu │ │ │ ├── menuItem.js │ │ │ └── index.js │ │ ├── tooltip.js │ │ ├── button │ │ │ ├── root.js │ │ │ ├── index.js │ │ │ ├── outlined.js │ │ │ ├── text.js │ │ │ └── contained.js │ │ ├── tabs │ │ │ ├── index.js │ │ │ └── tab.js │ │ ├── container.js │ │ ├── divider.js │ │ └── slider.js │ │ ├── functions │ │ ├── pxToRem.js │ │ ├── linearGradient.js │ │ ├── hexToRgb.js │ │ ├── radialGradient.js │ │ ├── rgba.js │ │ ├── tripleLinearGradient.js │ │ ├── boxShadow.js │ │ └── gradientChartLine.js │ │ ├── theme-rtl.js │ │ └── index.js ├── components │ ├── VuiInput │ │ ├── VuiInputIconRoot.js │ │ ├── VuiInputIconBoxRoot.js │ │ ├── VuiInputWithIconRoot.js │ │ ├── index.js │ │ └── VuiInputRoot.js │ ├── VuiBox │ │ ├── index.js │ │ └── VuiBoxRoot.js │ ├── VuiButton │ │ ├── index.js │ │ └── VuiButtonRoot.js │ └── VuiTypography │ │ ├── VuiTypographyRoot.js │ │ └── index.js ├── index.js ├── index.css ├── examples │ ├── Sidenav │ │ ├── styles │ │ │ ├── sidenav.js │ │ │ ├── sidenavCard.js │ │ │ └── sidenavCollapse.js │ │ ├── SidenavCollapse.js │ │ ├── SidenavRoot.js │ │ └── index.js │ ├── LayoutContainers │ │ └── DashboardLayout │ │ │ └── index.js │ ├── Footer │ │ └── index.js │ ├── Navbars │ │ └── DashboardNavbar │ │ │ ├── index.js │ │ │ └── styles.js │ └── Cards │ │ └── ProjectCards │ │ └── DefaultProjectCard │ │ └── index.js ├── data │ ├── categories.js │ └── projects.js ├── App.js ├── context │ └── index.js └── layouts │ └── dashboard │ └── index.js ├── jsconfig.json ├── .prettierrc.json ├── .eslintrc.json ├── .gitignore ├── README.md ├── CONTRIBUTING.md ├── LICENSE └── package.json /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependecies=true -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/favicon.png -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/apple-icon.png -------------------------------------------------------------------------------- /public/tools/SOLM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/SOLM.png -------------------------------------------------------------------------------- /public/tools/cesium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/cesium.png -------------------------------------------------------------------------------- /public/tools/kstars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/kstars.png -------------------------------------------------------------------------------- /public/tools/mmsstv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/mmsstv.jpg -------------------------------------------------------------------------------- /public/tools/opent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/opent.png -------------------------------------------------------------------------------- /public/tools/satpy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/satpy.png -------------------------------------------------------------------------------- /public/tools/virgo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/virgo.png -------------------------------------------------------------------------------- /public/tools/ccsdspy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/ccsdspy.png -------------------------------------------------------------------------------- /public/tools/harmony.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/harmony.png -------------------------------------------------------------------------------- /public/tools/marsnow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/marsnow.png -------------------------------------------------------------------------------- /public/tools/nasaeyes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/nasaeyes.png -------------------------------------------------------------------------------- /public/tools/orbitron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/orbitron.jpg -------------------------------------------------------------------------------- /public/tools/orbitsim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/orbitsim.png -------------------------------------------------------------------------------- /public/tools/satdump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/satdump.png -------------------------------------------------------------------------------- /public/tools/satflare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/satflare.png -------------------------------------------------------------------------------- /public/tools/satintel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/satintel.png -------------------------------------------------------------------------------- /public/tools/skyfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/skyfield.png -------------------------------------------------------------------------------- /public/tools/100000Stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/100000Stars.png -------------------------------------------------------------------------------- /public/tools/astrocats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/astrocats.png -------------------------------------------------------------------------------- /public/tools/astrometry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/astrometry.png -------------------------------------------------------------------------------- /public/tools/poliastro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/poliastro.png -------------------------------------------------------------------------------- /public/tools/python-sgp4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/python-sgp4.png -------------------------------------------------------------------------------- /src/assets/fonts/Roboto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/Roboto.ttf -------------------------------------------------------------------------------- /src/assets/images/globe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/images/globe.png -------------------------------------------------------------------------------- /public/tools/satellite-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/satellite-js.png -------------------------------------------------------------------------------- /src/assets/fonts/Spacemono.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/Spacemono.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Turnpike.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/Turnpike.ttf -------------------------------------------------------------------------------- /src/assets/fonts/nulshock.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/nulshock.otf -------------------------------------------------------------------------------- /src/assets/fonts/spyagency.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/spyagency.ttf -------------------------------------------------------------------------------- /public/tools/iss-docking-sim.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/iss-docking-sim.jpeg -------------------------------------------------------------------------------- /public/tools/spacextelemetry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/public/tools/spacextelemetry.png -------------------------------------------------------------------------------- /src/assets/fonts/Transformers.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/Transformers.ttf -------------------------------------------------------------------------------- /src/assets/fonts/aAtmospheric.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/aAtmospheric.ttf -------------------------------------------------------------------------------- /src/assets/fonts/ethnocentric.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/ethnocentric.otf -------------------------------------------------------------------------------- /src/assets/fonts/oceanicdrift.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/fonts/oceanicdrift.ttf -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/images/body-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lissy93/aerospace-hacking-tools/main/src/assets/images/body-background.png -------------------------------------------------------------------------------- /src/assets/theme/base/typography.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | @import url(https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-display.min.css); 4 | -------------------------------------------------------------------------------- /src/assets/theme/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default { 4 | defaultProps: { 5 | disableRipple: true, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /src/assets/theme/components/link.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default { 4 | defaultProps: { 5 | underline: "none", 6 | color: "inherit", 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true, 6 | "singleQuote": false, 7 | "endOfLine": "auto" 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/theme/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | export default { 2 | values: { 3 | xs: 375, 4 | sm: 425, 5 | md: 768, 6 | lg: 1024, 7 | xl: 1440, 8 | xxl: 1680, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default { 4 | styleOverrides: { 5 | padding: { 6 | paddingTop: 0, 7 | paddingBottom: 0, 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default { 4 | styleOverrides: { 5 | root: { 6 | marginTop: 0, 7 | marginBottom: 0, 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /src/assets/theme/components/appBar.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default { 4 | defaultProps: { 5 | color: "transparent", 6 | }, 7 | 8 | styleOverrides: { 9 | root: { 10 | boxShadow: "none", 11 | }, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogActions.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | export default { 7 | styleOverrides: { 8 | root: { 9 | padding: pxToRem(16), 10 | }, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | export default { 7 | styleOverrides: { 8 | root: { 9 | padding: `0 ${pxToRem(6)}`, 10 | }, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default { 4 | defaultProps: { 5 | disableGutters: true, 6 | }, 7 | 8 | styleOverrides: { 9 | root: { 10 | paddingTop: 0, 11 | paddingBottom: 0, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formLabel.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | 6 | const { dark } = colors; 7 | 8 | export default { 9 | styleOverrides: { 10 | root: { 11 | color: dark.main, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/assets/theme/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The pxToRem() function helps you to convert a px unit into a rem unit, 5 | */ 6 | 7 | function pxToRem(number, baseNumber = 16) { 8 | return `${number / baseNumber}rem`; 9 | } 10 | 11 | export default pxToRem; 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "parserOptions": { 7 | "ecmaFeatures": { 8 | "jsx": true 9 | }, 10 | "ecmaVersion": 12, 11 | "sourceType": "module" 12 | }, 13 | "plugins": ["react"] 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/iconButton.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import colors from "assets/theme/base/colors"; 4 | 5 | const { transparent } = colors; 6 | 7 | export default { 8 | styleOverrides: { 9 | root: { 10 | "&:hover": { 11 | backgroundColor: transparent.main, 12 | }, 13 | }, 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | export default { 7 | styleOverrides: { 8 | root: { 9 | marginTop: 0, 10 | marginBottom: 0, 11 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogTitle.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import typography from "assets/theme/base/typography"; 5 | 6 | 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { size } = typography; 10 | 11 | export default { 12 | styleOverrides: { 13 | root: { 14 | padding: pxToRem(16), 15 | fontSize: size.xl, 16 | }, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Aerospace Hacking Tools", 3 | "name": "Aerospace Hacking Tools", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#17c1e8", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/theme/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The linearGradient() function helps you to create a linear gradient color background 5 | */ 6 | 7 | function linearGradient(color, colorState, angle) { 8 | if (angle === undefined) { 9 | angle = 310; 10 | } 11 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 12 | } 13 | 14 | export default linearGradient; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/avatar.js: -------------------------------------------------------------------------------- 1 | import borders from "assets/theme/base/borders"; 2 | 3 | const { borderRadius } = borders; 4 | 5 | export default { 6 | styleOverrides: { 7 | root: { 8 | transition: "all 200ms ease-in-out", 9 | }, 10 | 11 | rounded: { 12 | borderRadius: borderRadius.lg, 13 | }, 14 | 15 | img: { 16 | height: "auto", 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /src/assets/theme/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The hexToRgb() function helps you to change the hex color code to rgb 5 | using chroma-js library. 6 | */ 7 | 8 | // chroma-js is a library for all kinds of color conversions and color scales. 9 | import chroma from "chroma-js"; 10 | 11 | function hexToRgb(color) { 12 | return chroma(color).rgb().join(", "); 13 | } 14 | 15 | export default hexToRgb; 16 | -------------------------------------------------------------------------------- /src/assets/theme/functions/radialGradient.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The radialGradient() function helps you to create a radial gradient color background 5 | */ 6 | 7 | function radialGradient(color, colorState, angle) { 8 | if (angle === undefined) { 9 | angle = "69.43% 69.43% at 50% 50%"; 10 | } 11 | return `radial-gradient(${angle}, ${color}, ${colorState})`; 12 | } 13 | 14 | export default radialGradient; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import colors from "assets/theme/base/colors"; 4 | import typography from "assets/theme/base/typography"; 5 | 6 | const { grey, text, info } = colors; 7 | const { size } = typography; 8 | 9 | export default { 10 | styleOverrides: { 11 | li: { 12 | lineHeight: 0, 13 | }, 14 | 15 | separator: { 16 | fontSize: size.sm, 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /src/assets/theme/functions/rgba.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function 5 | to convert the hex code into rgb for using it inside the rgba color format. 6 | */ 7 | 8 | 9 | import hexToRgb from "assets/theme/functions/hexToRgb"; 10 | 11 | function rgba(color, opacity) { 12 | return `rgba(${hexToRgb(color)}, ${opacity})`; 13 | } 14 | 15 | export default rgba; 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | package-lock.json 24 | yarn.lock 25 | 26 | commit.sh 27 | -------------------------------------------------------------------------------- /src/assets/theme/functions/tripleLinearGradient.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The linearGradient() function helps you to create a linear gradient color background 5 | */ 6 | 7 | function tripleLinearGradient(color, colorState, colorStateSecondary, angle) { 8 | if (angle === undefined) { 9 | angle = 310; 10 | } 11 | return `linear-gradient(${angle}deg, ${color}, ${colorState}, ${colorStateSecondary})`; 12 | } 13 | 14 | export default tripleLinearGradient; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import borders from "assets/theme/base/borders"; 5 | 6 | 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { borderRadius } = borders; 10 | 11 | export default { 12 | styleOverrides: { 13 | root: { 14 | borderRadius: borderRadius.xl, 15 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 16 | }, 17 | 18 | media: { 19 | width: "auto", 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContentText.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import typography from "assets/theme/base/typography"; 5 | import colors from "assets/theme/base/colors"; 6 | 7 | 8 | // import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { size } = typography; 11 | const { text } = colors; 12 | 13 | export default { 14 | styleOverrides: { 15 | root: { 16 | fontSize: size.md, 17 | color: text.main, 18 | }, 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import borders from "assets/theme/base/borders"; 5 | 6 | 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { borderRadius } = borders; 10 | 11 | export default { 12 | styleOverrides: { 13 | root: { 14 | display: "block", 15 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 0`, 16 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import borders from "assets/theme/base/borders"; 5 | import boxShadows from "assets/theme/base/boxShadows"; 6 | 7 | const { borderRadius } = borders; 8 | const { xxl } = boxShadows; 9 | 10 | export default { 11 | styleOverrides: { 12 | paper: { 13 | borderRadius: borderRadius.lg, 14 | boxShadow: xxl, 15 | }, 16 | 17 | paperFullScreen: { 18 | borderRadius: 0, 19 | }, 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | 6 | 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { transparent } = colors; 10 | 11 | export default { 12 | styleOverrides: { 13 | root: { 14 | margin: `${pxToRem(48)} 0`, 15 | padding: `0 ${pxToRem(12)}`, 16 | 17 | "&.MuiPaper-root": { 18 | backgroundColor: transparent.main, 19 | }, 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/VuiInput/VuiInputIconRoot.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Icon from "@mui/material/Icon"; 4 | import { styled } from "@mui/material/styles"; 5 | 6 | export default styled(Icon)(({ theme, ownerState }) => { 7 | const { typography } = theme; 8 | const { size } = ownerState; 9 | 10 | const { fontWeightBold, size: fontSize } = typography; 11 | 12 | return { 13 | fontWeight: fontWeightBold, 14 | fontSize: size === "small" && `${fontSize.md} !important`, 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /src/assets/theme/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | export default { 7 | defaultProps: { 8 | fontSize: "inherit", 9 | }, 10 | 11 | styleOverrides: { 12 | fontSizeInherit: { 13 | fontSize: "inherit !important", 14 | }, 15 | 16 | fontSizeSmall: { 17 | fontSize: `${pxToRem(20)} !important`, 18 | }, 19 | 20 | fontSizeLarge: { 21 | fontSize: `${pxToRem(36)} !important`, 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from "react"; 4 | import { createRoot} from "react-dom/client"; 5 | import { BrowserRouter } from "react-router-dom"; 6 | import App from "App"; 7 | import 'index.css'; 8 | 9 | import { VisionUIControllerProvider } from "context"; 10 | 11 | const rootElement = document.getElementById('root'); 12 | const root = createRoot(rootElement); 13 | 14 | 15 | root.render( 16 | 17 | 18 | 19 | ) 20 | 21 | -------------------------------------------------------------------------------- /src/assets/theme/components/icon.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import pxToRem from "assets/theme/functions/pxToRem"; 4 | 5 | export default { 6 | defaultProps: { 7 | baseClassName: "material-icons-round", 8 | fontSize: "inherit", 9 | }, 10 | 11 | styleOverrides: { 12 | fontSizeInherit: { 13 | fontSize: "inherit !important", 14 | }, 15 | 16 | fontSizeSmall: { 17 | fontSize: `${pxToRem(20)} !important`, 18 | }, 19 | 20 | fontSizeLarge: { 21 | fontSize: `${pxToRem(36)} !important`, 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/VuiInput/VuiInputIconBoxRoot.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { styled } from "@mui/material/styles"; 4 | 5 | export default styled("div")(({ theme, ownerState }) => { 6 | const { palette, functions } = theme; 7 | const { size } = ownerState; 8 | 9 | const { dark } = palette; 10 | const { pxToRem } = functions; 11 | 12 | return { 13 | lineHeight: 0, 14 | padding: size === "small" ? `${pxToRem(4)} ${pxToRem(10)}` : `${pxToRem(8)} ${pxToRem(10)}`, 15 | width: pxToRem(39), 16 | height: "100%", 17 | color: dark.main, 18 | }; 19 | }); 20 | -------------------------------------------------------------------------------- /src/assets/theme/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The boxShadow() function helps you to create a box shadow for an element 5 | */ 6 | 7 | 8 | import rgba from "assets/theme/functions/rgba"; 9 | import pxToRem from "assets/theme/functions/pxToRem"; 10 | 11 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 12 | const [x, y] = offset; 13 | const [blur, spread] = radius; 14 | 15 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 16 | color, 17 | opacity 18 | )}`; 19 | } 20 | 21 | export default boxShadow; 22 | -------------------------------------------------------------------------------- /src/assets/theme/components/popover.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import pxToRem from "assets/theme/functions/pxToRem"; 4 | 5 | import colors from "assets/theme/base/colors"; 6 | import boxShadows from "assets/theme/base/boxShadows"; 7 | import borders from "assets/theme/base/borders"; 8 | 9 | const { transparent } = colors; 10 | const { lg } = boxShadows; 11 | const { borderRadius } = borders; 12 | 13 | export default { 14 | styleOverrides: { 15 | paper: { 16 | backgroundColor: transparent.main, 17 | boxShadow: lg, 18 | padding: pxToRem(8), 19 | borderRadius: borderRadius.lg, 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import borders from "assets/theme/base/borders"; 5 | import colors from "assets/theme/base/colors"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { borderWidth } = borders; 11 | const { light } = colors; 12 | 13 | export default { 14 | styleOverrides: { 15 | root: { 16 | backgroundColor: `${light.main} !important`, 17 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 18 | "& .MuiBox-root": { 19 | pl: "0px !important", 20 | }, 21 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'atmospheric'; 3 | src: url(./assets/fonts/aAtmospheric.ttf) format("truetype") 4 | } 5 | 6 | @font-face { 7 | font-family: 'nulshock'; 8 | src: url(./assets/fonts/nulshock.otf) format("truetype") 9 | } 10 | 11 | @font-face { 12 | font-family: 'spyagency'; 13 | src: url(./assets/fonts/spyagency.ttf) format("truetype") 14 | } 15 | 16 | @font-face { 17 | font-family: 'Roboto'; 18 | src: url(./assets/fonts/Roboto.ttf) format("truetype") 19 | } 20 | 21 | @font-face { 22 | font-family: 'Spacemono'; 23 | src: url(./assets/fonts/Spacemono.ttf) format("truetype") 24 | } 25 | -------------------------------------------------------------------------------- /src/examples/Sidenav/styles/sidenav.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default function sidenavLogoLabel(theme, ownerState) { 4 | const { functions, transitions, typography, breakpoints } = theme; 5 | const { transparentSidenav } = ownerState; 6 | 7 | const { pxToRem } = functions; 8 | const { fontWeightMedium } = typography; 9 | 10 | return { 11 | ml: 0.5, 12 | fontWeight: fontWeightMedium, 13 | wordSpacing: pxToRem(-1), 14 | transition: transitions.create("opacity", { 15 | easing: transitions.easing.easeInOut, 16 | duration: transitions.duration.standard, 17 | }), 18 | 19 | [breakpoints.up("xl")]: { 20 | opacity: transparentSidenav ? 0 : 1, 21 | }, 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/select.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | 6 | 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { transparent } = colors; 10 | 11 | export default { 12 | styleOverrides: { 13 | select: { 14 | display: "grid", 15 | alignItems: "center", 16 | padding: `0 ${pxToRem(12)} !important`, 17 | 18 | "& .Mui-selected": { 19 | backgroundColor: transparent.main, 20 | }, 21 | }, 22 | 23 | selectMenu: { 24 | background: "none", 25 | height: "none", 26 | minHeight: "none", 27 | overflow: "unset", 28 | }, 29 | 30 | icon: { 31 | display: "none", 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/theme/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | The gradientChartLine() function helps you to create a gradient color for the chart line 5 | */ 6 | 7 | 8 | import rgba from "assets/theme/functions/rgba"; 9 | 10 | function gradientChartLine(chart, color, opacity = 0.2) { 11 | const ctx = chart.getContext("2d"); 12 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 13 | const primaryColor = rgba(color, opacity).toString(); 14 | 15 | gradientStroke.addColorStop(1, primaryColor); 16 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 17 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 18 | 19 | return gradientStroke; 20 | } 21 | 22 | export default gradientChartLine; 23 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContent.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import typography from "assets/theme/base/typography"; 5 | import borders from "assets/theme/base/borders"; 6 | import colors from "assets/theme/base/colors"; 7 | 8 | 9 | import pxToRem from "assets/theme/functions/pxToRem"; 10 | 11 | const { size } = typography; 12 | const { text } = colors; 13 | const { borderWidth, borderColor } = borders; 14 | 15 | export default { 16 | styleOverrides: { 17 | root: { 18 | padding: pxToRem(16), 19 | fontSize: size.md, 20 | color: text.main, 21 | }, 22 | 23 | dividers: { 24 | borderTop: `${borderWidth[1]} solid ${borderColor}`, 25 | borderBottom: `${borderWidth[1]} solid ${borderColor}`, 26 | }, 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/assets/theme/base/borders.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | const { borderCol } = colors; 7 | 8 | export default { 9 | borderColor: { 10 | grey: { borderCol }, 11 | white: "rgba(226, 232, 240, 0.3)", 12 | }, 13 | 14 | borderWidth: { 15 | 0: 0, 16 | 1: pxToRem(1), 17 | 2: pxToRem(2), 18 | 3: pxToRem(3), 19 | 4: pxToRem(4), 20 | 5: pxToRem(5), 21 | }, 22 | 23 | borderRadius: { 24 | xs: pxToRem(2), 25 | sm: pxToRem(4), 26 | md: pxToRem(8), 27 | button: pxToRem(12), 28 | lg: pxToRem(15), 29 | xl: pxToRem(20), 30 | xxl: pxToRem(24), 31 | form: pxToRem(24), 32 | section: pxToRem(160), 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import borders from "assets/theme/base/borders"; 5 | import colors from "assets/theme/base/colors"; 6 | 7 | const { dark } = colors; 8 | const { borderWidth, borderColor } = borders; 9 | 10 | export default { 11 | styleOverrides: { 12 | root: { 13 | color: borderColor, 14 | transition: "all 200ms linear", 15 | 16 | "&.Mui-active": { 17 | color: dark.main, 18 | }, 19 | 20 | "&.Mui-completed": { 21 | color: dark.main, 22 | }, 23 | }, 24 | 25 | alternativeLabel: { 26 | top: "14%", 27 | left: "-50%", 28 | right: "50%", 29 | }, 30 | 31 | line: { 32 | borderWidth: `${borderWidth[2]} !important`, 33 | borderColor: "currentColor", 34 | }, 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/assets/theme/base/globals.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import colors from "assets/theme/base/colors"; 4 | import bgAdmin from "assets/images/body-background.png"; 5 | 6 | const { info, dark } = colors; 7 | export default { 8 | html: { 9 | scrollBehavior: "smooth", 10 | background: dark.body, 11 | }, 12 | body: { 13 | background: `url(${bgAdmin})`, 14 | backgroundSize: "cover", 15 | }, 16 | "*, *::before, *::after": { 17 | margin: 0, 18 | padding: 0, 19 | }, 20 | "a, a:link, a:visited": { 21 | textDecoration: "none !important", 22 | }, 23 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 24 | color: `${dark.main} !important`, 25 | transition: "color 150ms ease-in !important", 26 | }, 27 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 28 | color: `${info.main} !important`, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formControlLabel.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import typography from "assets/theme/base/typography"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { dark } = colors; 11 | const { size, fontWeightBold } = typography; 12 | 13 | export default { 14 | styleOverrides: { 15 | root: { 16 | display: "block", 17 | minHeight: pxToRem(24), 18 | marginBottom: pxToRem(2), 19 | }, 20 | 21 | label: { 22 | display: "inline-block", 23 | fontSize: size.sm, 24 | fontWeight: fontWeightBold, 25 | color: dark.main, 26 | lineHeight: 1, 27 | transform: `translateY(${pxToRem(1)})`, 28 | marginLeft: pxToRem(4), 29 | 30 | "&.Mui-disabled": { 31 | color: dark.main, 32 | }, 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

designr logo

2 | 3 |

Aerospace Hacking Tools

4 |

A comprehensive collection of space-related cybersecurity tools

5 | 6 |

Chrome Web Store 7 | 8 | 9 | # Contributing 10 | 11 | Feel free to contribute if you would like to add a tool or implement any features or improvements to the site. 12 | Please make sure to reference the [contributing document](https://github.com/ANG13T/aerospace-hacking-tools/blob/main/CONTRIBUTING.md) before submitting a pull request. 13 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import typography from "assets/theme/base/typography"; 5 | import colors from "assets/theme/base/colors"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { size, fontWeightRegular } = typography; 11 | const { grey, dark, text } = colors; 12 | 13 | export default { 14 | styleOverrides: { 15 | label: { 16 | marginTop: `${pxToRem(8)} !important`, 17 | fontWeight: fontWeightRegular, 18 | fontSize: size.md, 19 | color: grey[300], 20 | 21 | "&.Mui-active": { 22 | fontWeight: `${fontWeightRegular} !important`, 23 | color: `${dark.main} !important`, 24 | }, 25 | 26 | "&.Mui-completed": { 27 | fontWeight: `${fontWeightRegular} !important`, 28 | color: `${text.main} !important`, 29 | }, 30 | }, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/assets/theme/components/sidenav.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | import borders from "assets/theme/base/borders"; 3 | import rgba from "assets/theme/functions/rgba"; 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | const { white } = colors; 7 | const { borderRadius } = borders; 8 | 9 | export default { 10 | styleOverrides: { 11 | root: { 12 | width: pxToRem(250), 13 | whiteSpace: "nowrap", 14 | border: "none", 15 | }, 16 | 17 | paper: { 18 | width: pxToRem(250), 19 | backgroundColor: rgba(white.main, 0.8), 20 | backdropFilter: `saturate(200%) blur(${pxToRem(30)})`, 21 | height: `calc(100vh - ${pxToRem(32)})`, 22 | margin: pxToRem(16), 23 | borderRadius: borderRadius.xl, 24 | border: "none", 25 | }, 26 | 27 | paperAnchorDockedLeft: { 28 | borderRight: "none", 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/input.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { inputColors } = colors; 10 | const { borderWidth, borderRadius } = borders; 11 | 12 | export default { 13 | styleOverrides: { 14 | root: { 15 | display: "flex !important", 16 | padding: `${pxToRem(8)} ${pxToRem(28)} ${pxToRem(8)} ${pxToRem(12)} !important`, 17 | border: `${borderWidth[1]} solid ${inputColors.borderColor.main}`, 18 | borderRadius: `${borderRadius.md} !important`, 19 | 20 | "& fieldset": { 21 | border: "none", 22 | }, 23 | }, 24 | 25 | input: { 26 | height: pxToRem(22), 27 | width: "max-content !important", 28 | }, 29 | 30 | inputSizeSmall: { 31 | height: pxToRem(14), 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/theme/components/linearProgress.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import borders from "assets/theme/base/borders"; 4 | import colors from "assets/theme/base/colors"; 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { borderRadius } = borders; 8 | const { light } = colors; 9 | 10 | export default { 11 | styleOverrides: { 12 | root: { 13 | height: pxToRem(3), 14 | borderRadius: borderRadius.md, 15 | overflow: "visible", 16 | position: "relative", 17 | }, 18 | 19 | colorPrimary: { 20 | backgroundColor: light.main, 21 | }, 22 | 23 | colorSecondary: { 24 | backgroundColor: light.main, 25 | }, 26 | 27 | bar: { 28 | height: pxToRem(6), 29 | borderRadius: borderRadius.sm, 30 | position: "absolute", 31 | transform: `translate(0, ${pxToRem(-1.5)}) !important`, 32 | transition: "width 0.6s ease !important", 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/data/categories.js: -------------------------------------------------------------------------------- 1 | const categories = [ 2 | {tag: "All Tools", emoji: "💫"}, 3 | {tag: "Astrodynamics", emoji: "☄️"}, 4 | {tag: "Astronomy", emoji: "🔭"}, 5 | {tag: "Avionics", emoji: "✈️"}, 6 | {tag: "Digital Forensics", emoji: "🔍"}, 7 | {tag: "Drones", emoji: "🚁"}, 8 | {tag: "Earth", emoji: "🌍"}, 9 | {tag: "Ground Control", emoji: "🎮"}, 10 | {tag: "Ground Stations", emoji: "📡"}, 11 | {tag: "Launches", emoji: "🎆"}, 12 | {tag: "Mission Control", emoji: "🎮"}, 13 | {tag: "Mission Design", emoji: "✏️"}, 14 | {tag: "OSINT", emoji: "🕵️‍♂️"}, 15 | {tag: "Planetary Defense", emoji: "🌍"}, 16 | {tag: "Planets", emoji: "🪐"}, 17 | {tag: "Radio", emoji: "📻"}, 18 | {tag: "Satellites", emoji: "🛰️"}, 19 | {tag: "Simulation", emoji: "🎮"}, 20 | {tag: "Spacecraft", emoji: "🚀"}, 21 | {tag: "Star Trackers", emoji: "✨"}, 22 | {tag: "UAV", emoji: "🛸"} 23 | ]; 24 | 25 | 26 | export default categories; 27 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | import typography from "assets/theme/base/typography"; 7 | 8 | 9 | import pxToRem from "assets/theme/functions/pxToRem"; 10 | 11 | const { light, text, dark } = colors; 12 | const { borderRadius } = borders; 13 | const { size } = typography; 14 | 15 | export default { 16 | styleOverrides: { 17 | root: { 18 | minWidth: pxToRem(160), 19 | minHeight: "unset", 20 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 21 | borderRadius: borderRadius.md, 22 | fontSize: size.sm, 23 | color: text.main, 24 | transition: "background-color 300ms ease, color 300ms ease", 25 | 26 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 27 | backgroundColor: light.main, 28 | color: dark.main, 29 | }, 30 | }, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Adding a Tool 2 | 1. Upload the project image or screenshot to [this directory](https://github.com/ANG13T/aerospace-hacking-tools/tree/main/public/tools) 3 | 2. Go to [this directory](https://github.com/ANG13T/aerospace-hacking-tools/blob/main/src/data/projects.js) and add a JSON entry for your project 4 | A JSON entry should adhere to the following format outlined below 5 | ``` 6 | { 7 | name: "CCSDSPy", 8 | dateAdded: "6/16/2023", 9 | tags: ["Satellites", "OSINT"], 10 | description: "A Python package for reading CCSDS packet data.", 11 | website: "https://docs.ccsdspy.org/en/latest/", 12 | image: "ccsdspy.png" 13 | } 14 | ``` 15 | 16 | # General Contributions 17 | We appreciate any contributions to improve the ecosystem of the aerospace hacking tools website. 18 | Please make sure you *fork the repository* and submit your changes via *pull request* for your changes to be reviewed by a project maintainer before it is integrated with the official code base. 19 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import linearGradient from "assets/theme/functions/linearGradient"; 6 | import borders from "assets/theme/base/borders"; 7 | import boxShadows from "assets/theme/base/boxShadows"; 8 | 9 | import rgba from "assets/theme/functions/rgba"; 10 | 11 | const { black, gradients } = colors; 12 | const { card } = gradients; 13 | const { borderWidth, borderRadius } = borders; 14 | const { xxl } = boxShadows; 15 | 16 | export default { 17 | styleOverrides: { 18 | root: { 19 | display: "flex", 20 | flexDirection: "column", 21 | background: linearGradient(card.main, card.state, card.deg), 22 | backdropFilter: "blur(120px)", 23 | position: "relative", 24 | minWidth: 0, 25 | padding: "22px", 26 | wordWrap: "break-word", 27 | backgroundClip: "border-box", 28 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 29 | borderRadius: borderRadius.xl, 30 | boxShadow: xxl, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/tooltip.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // @mui material components 4 | import Fade from "@mui/material/Fade"; 5 | 6 | 7 | import colors from "assets/theme/base/colors"; 8 | import typography from "assets/theme/base/typography"; 9 | import borders from "assets/theme/base/borders"; 10 | 11 | 12 | import pxToRem from "assets/theme/functions/pxToRem"; 13 | 14 | const { black, light } = colors; 15 | const { size, fontWeightRegular } = typography; 16 | const { borderRadius } = borders; 17 | 18 | export default { 19 | defaultProps: { 20 | arrow: true, 21 | TransitionComponent: Fade, 22 | }, 23 | 24 | styleOverrides: { 25 | tooltip: { 26 | maxWidth: pxToRem(200), 27 | backgroundColor: black.main, 28 | color: light.main, 29 | fontSize: size.sm, 30 | fontWeight: fontWeightRegular, 31 | textAlign: "center", 32 | borderRadius: borderRadius.md, 33 | opacity: 0.7, 34 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 35 | }, 36 | 37 | arrow: { 38 | color: black.main, 39 | }, 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/root.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import typography from "assets/theme/base/typography"; 5 | import borders from "assets/theme/base/borders"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { fontWeightBold, size } = typography; 11 | const { borderRadius } = borders; 12 | 13 | export default { 14 | display: "inline-flex", 15 | justifyContent: "center", 16 | alignItems: "center", 17 | fontSize: size.xs, 18 | fontWeight: fontWeightBold, 19 | borderRadius: borderRadius.button, 20 | padding: `${pxToRem(12)} ${pxToRem(24)}`, 21 | lineHeight: 1.4, 22 | textAlign: "center", 23 | textTransform: "unset", 24 | userSelect: "none", 25 | backgroundSize: "150% !important", 26 | backgroundPositionX: "25% !important", 27 | transition: `all 150ms ease-in`, 28 | 29 | "&:hover": { 30 | transform: "scale(1.02)", 31 | }, 32 | 33 | "&:disabled": { 34 | pointerEvent: "none", 35 | opacity: 0.65, 36 | }, 37 | 38 | "& .material-icons": { 39 | fontSize: pxToRem(15), 40 | marginTop: pxToRem(-2), 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import boxShadows from "assets/theme/base/boxShadows"; 6 | import borders from "assets/theme/base/borders"; 7 | 8 | const { transparent } = colors; 9 | const { xxl } = boxShadows; 10 | const { borderRadius } = borders; 11 | 12 | export default { 13 | styleOverrides: { 14 | root: { 15 | backgroundColor: transparent.main, 16 | boxShadow: xxl, 17 | borderRadius: borderRadius.xl, 18 | "& thead": { 19 | "& tr": { 20 | "& th": { 21 | "&:first-of-type": { 22 | paddingLeft: "0px !important", 23 | }, 24 | }, 25 | }, 26 | }, 27 | "& .MuiTableBody-root": { 28 | "& tr": { 29 | "& td": { 30 | "&:first-of-type": { 31 | paddingLeft: "0px !important", 32 | "& .MuiBox-root": { 33 | paddingLeft: "0px !important", 34 | }, 35 | }, 36 | }, 37 | }, 38 | }, 39 | }, 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { grey, info } = colors; 11 | const { borderRadius } = borders; 12 | 13 | export default { 14 | styleOverrides: { 15 | root: { 16 | position: "relative", 17 | backgroundColor: grey[100], 18 | borderRadius: borderRadius.md, 19 | minHeight: "unset", 20 | padding: pxToRem(4), 21 | }, 22 | 23 | flexContainer: { 24 | height: "100%", 25 | position: "relative", 26 | zIndex: 10, 27 | }, 28 | 29 | fixed: { 30 | overflow: "unset !important", 31 | overflowX: "unset !important", 32 | }, 33 | 34 | vertical: { 35 | "& .MuiTabs-indicator": { 36 | width: "100%", 37 | }, 38 | }, 39 | 40 | indicator: { 41 | height: "100%", 42 | borderRadius: borderRadius.lg, 43 | backgroundColor: info.main, 44 | transition: "all 500ms ease", 45 | }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Angelina Tsuboi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/VuiBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { forwardRef } from "react"; 4 | 5 | // prop-types is a library for typechecking of props 6 | import PropTypes from "prop-types"; 7 | 8 | // Custom styles for VuiBox 9 | import VuiBoxRoot from "components/VuiBox/VuiBoxRoot"; 10 | 11 | const VuiBox = forwardRef( 12 | ({ variant, bgColor, color, opacity, borderRadius, shadow, ...rest }, ref) => ( 13 | 18 | ) 19 | ); 20 | 21 | // Setting default values for the props of VuiBox 22 | VuiBox.defaultProps = { 23 | variant: "contained", 24 | bgColor: "transparent", 25 | color: "dark", 26 | opacity: 1, 27 | borderRadius: "none", 28 | shadow: "none", 29 | }; 30 | 31 | // Typechecking props for the VuiBox 32 | VuiBox.propTypes = { 33 | variant: PropTypes.oneOf(["contained", "gradient"]), 34 | bgColor: PropTypes.string, 35 | color: PropTypes.string, 36 | opacity: PropTypes.number, 37 | borderRadius: PropTypes.string, 38 | shadow: PropTypes.string, 39 | }; 40 | 41 | export default VuiBox; 42 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import root from "assets/theme/components/button/root"; 4 | import contained from "assets/theme/components/button/contained"; 5 | import outlined from "assets/theme/components/button/outlined"; 6 | import text from "assets/theme/components/button/text"; 7 | 8 | export default { 9 | defaultProps: { 10 | disableRipple: true, 11 | }, 12 | styleOverrides: { 13 | root: { ...root }, 14 | contained: { ...contained.base }, 15 | containedSizeSmall: { ...contained.small }, 16 | containedSizeLarge: { ...contained.large }, 17 | containedPrimary: { ...contained.primary }, 18 | containedSecondary: { ...contained.secondary }, 19 | outlined: { ...outlined.base }, 20 | outlinedSizeSmall: { ...outlined.small }, 21 | outlinedSizeLarge: { ...outlined.large }, 22 | outlinedPrimary: { ...outlined.primary }, 23 | outlinedSecondary: { ...outlined.secondary }, 24 | text: { ...text.base }, 25 | textSizeSmall: { ...text.small }, 26 | textSizeLarge: { ...text.large }, 27 | textPrimary: { ...text.primary }, 28 | textSecondary: { ...text.secondary }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | import boxShadow from "assets/theme/functions/boxShadow"; 10 | 11 | const { dark, white } = colors; 12 | const { borderWidth, borderColor } = borders; 13 | 14 | export default { 15 | styleOverrides: { 16 | root: { 17 | background: white.main, 18 | fill: white.main, 19 | stroke: white.main, 20 | strokeWidth: pxToRem(10), 21 | width: pxToRem(13), 22 | height: pxToRem(13), 23 | border: `${borderWidth[2]} solid ${borderColor}`, 24 | borderRadius: "50%", 25 | zIndex: 99, 26 | transition: "all 200ms linear", 27 | 28 | "&.Mui-active": { 29 | background: dark.main, 30 | fill: dark.main, 31 | stroke: dark.main, 32 | borderColor: dark.main, 33 | boxShadow: boxShadow([0, 0], [0, 2], dark.main, 1), 34 | }, 35 | 36 | "&.Mui-completed": { 37 | background: dark.main, 38 | fill: dark.main, 39 | stroke: dark.main, 40 | borderColor: dark.main, 41 | boxShadow: boxShadow([0, 0], [0, 2], dark.main, 1), 42 | }, 43 | }, 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/tab.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import typography from "assets/theme/base/typography"; 5 | import borders from "assets/theme/base/borders"; 6 | import colors from "assets/theme/base/colors"; 7 | 8 | 9 | import pxToRem from "assets/theme/functions/pxToRem"; 10 | 11 | const { size, fontWeightRegular } = typography; 12 | const { borderRadius } = borders; 13 | const { white } = colors; 14 | 15 | export default { 16 | styleOverrides: { 17 | root: { 18 | display: "flex", 19 | alignItems: "center", 20 | flexDirection: "row", 21 | textAlign: "center", 22 | maxWidth: "unset !important", 23 | minWidth: "150px", 24 | minHeight: "35px", 25 | fontSize: size.xs, 26 | fontWeight: fontWeightRegular, 27 | textTransform: "none", 28 | lineHeight: "inherit", 29 | padding: `${pxToRem(10)} !important`, 30 | borderRadius: borderRadius.md, 31 | color: `${white.main} !important`, 32 | opacity: "1 !important", 33 | 34 | "& .material-icons, .material-icons-round": { 35 | marginBottom: "0 !important", 36 | marginRight: pxToRem(4), 37 | }, 38 | 39 | "& svg": { 40 | marginBottom: "0 !important", 41 | color: `#fff !important`, 42 | marginRight: pxToRem(6), 43 | }, 44 | }, 45 | 46 | labelIcon: { 47 | paddingTop: pxToRem(4), 48 | }, 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/assets/theme/components/container.js: -------------------------------------------------------------------------------- 1 | 2 | import breakpoints from "assets/theme/base/breakpoints"; 3 | import pxToRem from "assets/theme/functions/pxToRem"; 4 | 5 | const { 6 | values: { sm, md, lg, xl, xxl }, 7 | } = breakpoints; 8 | 9 | const SM = `@media (min-width: ${sm}px)`; 10 | const MD = `@media (min-width: ${md}px)`; 11 | const LG = `@media (min-width: ${lg}px)`; 12 | const XL = `@media (min-width: ${xl}px)`; 13 | const XXL = `@media (min-width: ${xxl}px)`; 14 | 15 | const sharedClasses = { 16 | paddingRight: `${pxToRem(24)} !important`, 17 | paddingLeft: `${pxToRem(24)} !important`, 18 | marginRight: "auto !important", 19 | marginLeft: "auto !important", 20 | width: "100% !important", 21 | position: "relative", 22 | }; 23 | 24 | export default { 25 | [SM]: { 26 | ".MuiContainer-root": { 27 | ...sharedClasses, 28 | maxWidth: "540px !important", 29 | }, 30 | }, 31 | [MD]: { 32 | ".MuiContainer-root": { 33 | ...sharedClasses, 34 | maxWidth: "720px !important", 35 | }, 36 | }, 37 | [LG]: { 38 | ".MuiContainer-root": { 39 | ...sharedClasses, 40 | maxWidth: "960px !important", 41 | }, 42 | }, 43 | [XL]: { 44 | ".MuiContainer-root": { 45 | ...sharedClasses, 46 | maxWidth: "1140px !important", 47 | }, 48 | }, 49 | [XXL]: { 50 | ".MuiContainer-root": { 51 | ...sharedClasses, 52 | maxWidth: "1320px !important", 53 | }, 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /src/examples/LayoutContainers/DashboardLayout/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { useEffect } from "react"; 4 | 5 | // react-router-dom components 6 | import { useLocation } from "react-router-dom"; 7 | 8 | // prop-types is a library for typechecking of props. 9 | import PropTypes from "prop-types"; 10 | 11 | 12 | import VuiBox from "components/VuiBox"; 13 | 14 | import { useVisionUIController, setLayout } from "context"; 15 | 16 | function DashboardLayout({ children }) { 17 | const [controller, dispatch] = useVisionUIController(); 18 | const { miniSidenav } = controller; 19 | const { pathname } = useLocation(); 20 | 21 | useEffect(() => { 22 | setLayout(dispatch, "dashboard"); 23 | }, [pathname]); 24 | 25 | return ( 26 | ({ 28 | p: 3, 29 | position: "relative", 30 | 31 | [breakpoints.up("xl")]: { 32 | marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), 33 | transition: transitions.create(["margin-left", "margin-right"], { 34 | easing: transitions.easing.easeInOut, 35 | duration: transitions.duration.standard, 36 | }), 37 | }, 38 | })} 39 | > 40 | {children} 41 | 42 | ); 43 | } 44 | 45 | // Typechecking props for the DashboardLayout 46 | DashboardLayout.propTypes = { 47 | children: PropTypes.node.isRequired, 48 | }; 49 | 50 | export default DashboardLayout; 51 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import boxShadows from "assets/theme/base/boxShadows"; 5 | import typography from "assets/theme/base/typography"; 6 | import colors from "assets/theme/base/colors"; 7 | import borders from "assets/theme/base/borders"; 8 | import linearGradient from "assets/theme/functions/linearGradient"; 9 | 10 | 11 | import pxToRem from "assets/theme/functions/pxToRem"; 12 | 13 | const { borderWidth } = borders; 14 | const { lg } = boxShadows; 15 | const { size } = typography; 16 | const { white, borderCol, gradients, transparent } = colors; 17 | const { borderRadius } = borders; 18 | 19 | export default { 20 | defaultProps: { 21 | disableAutoFocusItem: true, 22 | }, 23 | 24 | styleOverrides: { 25 | "& .MuiIcon-root": { 26 | stroke: white.main, 27 | }, 28 | paper: { 29 | minWidth: pxToRem(160), 30 | boxShadow: lg, 31 | padding: `0 !important`, 32 | fontSize: size.sm, 33 | color: white.main, 34 | textAlign: "left", 35 | border: `${borderWidth[1]} solid ${borderCol.navbar}`, 36 | borderRadius: borderRadius.md, 37 | }, 38 | list: { 39 | background: linearGradient(gradients.menu.main, gradients.menu.state, gradients.menu.deg), 40 | "& .MuiMenuItem-root": { 41 | "& .MuiBox-root .MuiTypography-root": { 42 | color: white.main, 43 | }, 44 | "&:hover": { 45 | background: transparent.main, 46 | }, 47 | }, 48 | }, 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/components/VuiButton/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { forwardRef } from "react"; 4 | 5 | // prop-types is a library for typechecking of props 6 | import PropTypes from "prop-types"; 7 | 8 | // Custom styles for VuiButton 9 | import VuiButtonRoot from "components/VuiButton/VuiButtonRoot"; 10 | 11 | const VuiButton = forwardRef( 12 | ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => ( 13 | 21 | {children} 22 | 23 | ) 24 | ); 25 | 26 | // Setting default values for the props of VuiButton 27 | VuiButton.defaultProps = { 28 | size: "medium", 29 | variant: "contained", 30 | color: "white", 31 | circular: false, 32 | iconOnly: false, 33 | }; 34 | 35 | // Typechecking props for the VuiButton 36 | VuiButton.propTypes = { 37 | size: PropTypes.oneOf(["small", "medium", "large"]), 38 | variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]), 39 | color: PropTypes.oneOf([ 40 | "white", 41 | "primary", 42 | "secondary", 43 | "info", 44 | "success", 45 | "warning", 46 | "error", 47 | "light", 48 | "dark", 49 | "text", 50 | ]), 51 | circular: PropTypes.bool, 52 | iconOnly: PropTypes.bool, 53 | children: PropTypes.node.isRequired, 54 | }; 55 | 56 | export default VuiButton; 57 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Aerospace Hacking Tools 14 | 18 | 24 | 28 | 29 | 30 | 31 | 32 |

33 | 34 | 35 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputBase.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import typography from "assets/theme/base/typography"; 6 | import borders from "assets/theme/base/borders"; 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { dark, white, grey, inputColors } = colors; 11 | const { size, fontWeightRegular } = typography; 12 | const { borderWidth, borderRadius } = borders; 13 | 14 | export default { 15 | styleOverrides: { 16 | root: { 17 | display: "grid !important", 18 | placeItems: "center !important", 19 | width: "100% !important", 20 | height: "auto !important", 21 | padding: `${pxToRem(8)} ${pxToRem(12)}`, 22 | fontSize: `${size.sm} !important`, 23 | fontWeight: `${fontWeightRegular} !important`, 24 | lineHeight: "1.4 !important", 25 | color: `${grey[700]} !important`, 26 | backgroundColor: `${white.main} !important`, 27 | backgroundClip: "padding-box !important", 28 | border: `${borderWidth[1]} solid ${inputColors.borderColor.main}`, 29 | appearance: "none !important", 30 | borderRadius: borderRadius.md, 31 | transition: "box-shadow 150ms ease, border-color 150ms ease, padding 150ms ease !important", 32 | }, 33 | 34 | input: { 35 | width: "100% !important", 36 | height: `${pxToRem(22)}`, 37 | padding: "0 !important", 38 | 39 | "&::-webkit-input-placeholder": { 40 | color: `${dark.main} !important`, 41 | }, 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/divider.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | 4 | import rgba from "assets/theme/functions/rgba"; 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { dark, transparent, white, info } = colors; 8 | 9 | export default { 10 | styleOverrides: { 11 | root: { 12 | backgroundColor: transparent.main, 13 | backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${rgba( 14 | dark.main, 15 | 0.5 16 | )}, ${rgba(dark.main, 0)}) !important`, 17 | height: pxToRem(1), 18 | margin: `${pxToRem(16)} 0`, 19 | borderBottom: "none", 20 | opacity: 0.25, 21 | }, 22 | 23 | vertical: { 24 | backgroundColor: transparent.main, 25 | backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${rgba( 26 | dark.main, 27 | 0.5 28 | )}, ${rgba(dark.main, 0)}) !important`, 29 | width: pxToRem(1), 30 | height: "100%", 31 | margin: `0 ${pxToRem(16)}`, 32 | borderRight: "none", 33 | }, 34 | 35 | light: { 36 | backgroundColor: transparent.main, 37 | backgroundImage: `linear-gradient(to right, ${rgba(info.main, 0)}, ${rgba( 38 | white.main, 39 | 1 40 | )}, ${rgba(white.main, 0)}) !important`, 41 | 42 | "&.MuiDivider-vertical": { 43 | backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${rgba( 44 | white.main, 45 | 0.5 46 | )}, ${rgba(white.main, 0)}) !important`, 47 | }, 48 | }, 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/assets/theme/components/slider.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | import boxShadows from "assets/theme/base/boxShadows"; 7 | 8 | 9 | import linearGradient from "assets/theme/functions/linearGradient"; 10 | import pxToRem from "assets/theme/functions/pxToRem"; 11 | 12 | const { light, white, sliderColors, black, gradients } = colors; 13 | const { borderRadius, borderWidth } = borders; 14 | const { sliderBoxShadow } = boxShadows; 15 | 16 | export default { 17 | styleOverrides: { 18 | root: { 19 | width: "100%", 20 | 21 | "& .MuiSlider-active, & .Mui-focusVisible": { 22 | boxShadow: "none !important", 23 | }, 24 | 25 | "& .MuiSlider-valueLabel": { 26 | color: black.main, 27 | }, 28 | }, 29 | 30 | rail: { 31 | height: pxToRem(3), 32 | backgroundColor: light.main, 33 | borderRadius: borderRadius.sm, 34 | }, 35 | 36 | track: { 37 | backgroundImage: linearGradient(gradients.info.main, gradients.info.state), 38 | height: pxToRem(6), 39 | position: "relative", 40 | top: pxToRem(2), 41 | border: "none", 42 | borderRadius: borderRadius.lg, 43 | zIndex: 1, 44 | }, 45 | 46 | thumb: { 47 | width: pxToRem(15), 48 | height: pxToRem(15), 49 | backgroundColor: white.main, 50 | zIndex: 10, 51 | boxShadow: sliderBoxShadow.thumb, 52 | border: `${borderWidth[1]} solid ${sliderColors.thumb.borderColor}`, 53 | 54 | "&:hover": { 55 | boxShadow: "none", 56 | }, 57 | }, 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /src/components/VuiInput/VuiInputWithIconRoot.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { styled } from "@mui/material/styles"; 4 | 5 | export default styled("div")(({ theme, ownerState }) => { 6 | const { palette, functions, borders } = theme; 7 | const { error, success, disabled } = ownerState; 8 | 9 | const { inputColors, grey, white } = palette; 10 | const { pxToRem } = functions; 11 | const { borderRadius, borderWidth } = borders; 12 | 13 | // border color value 14 | let borderColorValue = inputColors.borderColor.main; 15 | 16 | if (error) { 17 | borderColorValue = inputColors.error; 18 | } else if (success) { 19 | borderColorValue = inputColors.success; 20 | } 21 | 22 | return { 23 | display: "flex", 24 | alignItems: "center", 25 | outline: 0, 26 | fontFamily: "Roboto", 27 | backgroundColor: disabled ? grey[600] : inputColors.backgroundColor, 28 | border: `${borderWidth[1]} solid`, 29 | borderRadius: borderRadius.lg, 30 | borderColor: borderColorValue, 31 | "& .MuiIcon-root": { 32 | color: grey[500], 33 | }, 34 | 35 | "& .MuiInputBase-input": { 36 | color: white.main, 37 | height: "100%", 38 | paddingX: pxToRem(20), 39 | backgroundColor: disabled ? grey[600] : inputColors.backgroundColor, 40 | }, 41 | "& .MuiInputBase-root": { 42 | border: `unset`, 43 | borderRadius: borderRadius.lg, 44 | borderTopLeftRadius: "0px", 45 | borderBottomLeftRadius: "0px", 46 | backgroundColor: `${disabled ? grey[600] : inputColors.backgroundColor} !important`, 47 | "& ::placeholder": { 48 | color: `${white.main} !important`, 49 | }, 50 | }, 51 | }; 52 | }); 53 | -------------------------------------------------------------------------------- /src/components/VuiTypography/VuiTypographyRoot.js: -------------------------------------------------------------------------------- 1 | // @mui material components 2 | import Typography from "@mui/material/Typography"; 3 | import { styled } from "@mui/material/styles"; 4 | 5 | export default styled(Typography)(({ theme, ownerState, fontFamily }) => { 6 | 7 | if (!fontFamily) { 8 | fontFamily = "atmospheric"; 9 | } 10 | 11 | const { palette, typography, functions } = theme; 12 | const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient } = ownerState; 13 | 14 | const { gradients, transparent } = palette; 15 | const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; 16 | const { linearGradient } = functions; 17 | 18 | // fontWeight styles 19 | const fontWeights = { 20 | light: fontWeightLight, 21 | regular: fontWeightRegular, 22 | medium: fontWeightMedium, 23 | bold: fontWeightBold, 24 | }; 25 | 26 | // styles for the typography with textGradient={true} 27 | const gradientStyles = () => ({ 28 | backgroundImage: 29 | color !== "inherit" && color !== "text" && color !== "white" && gradients[color] 30 | ? linearGradient(gradients[color].main, gradients[color].state, gradients[color].deg) 31 | : linearGradient(gradients.primary.main, gradients.primary.state), 32 | display: "inline-block", 33 | WebkitBackgroundClip: "text", 34 | WebkitTextFillColor: transparent.main, 35 | position: "relative", 36 | zIndex: 1, 37 | }); 38 | 39 | return { 40 | opacity, 41 | textTransform, 42 | verticalAlign, 43 | textDecoration: "none", 44 | color: color === "inherit" || !palette[color] ? "inherit" : palette[color].main, 45 | fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], 46 | ...(textGradient && gradientStyles()), 47 | fontFamily: fontFamily 48 | }; 49 | }); 50 | -------------------------------------------------------------------------------- /src/assets/theme/base/boxShadows.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import colors from "assets/theme/base/colors"; 4 | import boxShadow from "assets/theme/functions/boxShadow"; 5 | 6 | const { black, white, info, inputColors, tabs } = colors; 7 | 8 | export default { 9 | xs: boxShadow([0, 2], [9, -5], black.main, 0.15), 10 | sm: boxShadow([0, 5], [10, 0], black.main, 0.12), 11 | md: `${boxShadow([0, 4], [6, -1], black.light, 0.12)}, ${boxShadow( 12 | [0, 2], 13 | [4, -1], 14 | black.light, 15 | 0.07 16 | )}`, 17 | lg: `${boxShadow([0, 8], [26, -4], black.light, 0.15)}, ${boxShadow( 18 | [0, 8], 19 | [9, -5], 20 | black.light, 21 | 0.06 22 | )}`, 23 | xl: boxShadow([0, 23], [45, -11], black.light, 0.25), 24 | xxl: boxShadow([0, 20], [27, 0], black.main, 0.05), 25 | inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"), 26 | navbarBoxShadow: `${boxShadow([0, 0], [1, 1], white.main, 0.9, "inset")}, ${boxShadow( 27 | [0, 20], 28 | [27, 0], 29 | black.main, 30 | 0.05 31 | )}`, 32 | buttonBoxShadow: { 33 | main: `${boxShadow([0, 4], [7, -1], black.main, 0.11)}, ${boxShadow( 34 | [0, 2], 35 | [4, -1], 36 | black.main, 37 | 0.07 38 | )}`, 39 | stateOf: `${boxShadow([0, 3], [5, -1], black.main, 0.09)}, ${boxShadow( 40 | [0, 2], 41 | [5, -1], 42 | black.main, 43 | 0.07 44 | )}`, 45 | stateOfNotHover: boxShadow([0, 0], [0, 3.2], info.main, 0.5), 46 | }, 47 | inputBoxShadow: { 48 | focus: boxShadow([0, 0], [0, 2], inputColors.boxShadow, 1), 49 | error: boxShadow([0, 0], [0, 2], inputColors.error, 0.6), 50 | success: boxShadow([0, 0], [0, 2], inputColors.success, 0.6), 51 | }, 52 | sliderBoxShadow: { 53 | thumb: boxShadow([0, 1], [13, 0], black.main, 0.2), 54 | }, 55 | tabsBoxShadow: { 56 | indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1), 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aerospace-hacking-tools", 3 | "version": "0.0.1", 4 | "private": true, 5 | "author": "Angelina Tsuboi", 6 | "license": "https://github.com/ANG13T/aerospace-cybersecurity-tools/blob/main/LICENSE", 7 | "description": "A comprehensive collection of space-related cybersecurity tools", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/ANG13T/aerospace-cybersecurity-tools.git" 11 | }, 12 | "dependencies": { 13 | "@emotion/cache": "11.4.0", 14 | "@emotion/react": "^11.9.3", 15 | "@emotion/styled": "^11.9.3", 16 | "@mui/icons-material": "5.1.1", 17 | "@mui/material": "^5.9.2", 18 | "@mui/styled-engine": "5.1.1", 19 | "@mui/styles": "^5.2.0", 20 | "@testing-library/jest-dom": "5.11.4", 21 | "@testing-library/react": "11.1.0", 22 | "@testing-library/user-event": "12.1.10", 23 | "apexcharts": "^3.30.0", 24 | "chroma-js": "2.1.2", 25 | "eslint": "^7.11.0", 26 | "install": "^0.13.0", 27 | "npm": "^9.6.5", 28 | "prop-types": "15.7.2", 29 | "react": "^18.2.0", 30 | "react-apexcharts": "^1.3.9", 31 | "react-countup": "5.2.0", 32 | "react-dom": "^18.2.0", 33 | "react-flatpickr": "3.10.7", 34 | "react-github-btn": "1.2.1", 35 | "react-icons": "^4.3.1", 36 | "react-router-dom": "5.2.0", 37 | "react-scripts": "^5.0.1", 38 | "stylis": "4.0.10", 39 | "stylis-plugin-rtl": "2.1.0", 40 | "uuid": "8.3.2", 41 | "web-vitals": "1.0.1" 42 | }, 43 | "scripts": { 44 | "start": "react-scripts start", 45 | "build": "react-scripts build", 46 | "test": "react-scripts test", 47 | "eject": "react-scripts eject", 48 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" 49 | }, 50 | "eslintConfig": { 51 | "extends": [ 52 | "react-app", 53 | "react-app/jest" 54 | ] 55 | }, 56 | "browserslist": { 57 | "production": [ 58 | ">0.2%", 59 | "not dead", 60 | "not op_mini all" 61 | ], 62 | "development": [ 63 | "last 1 chrome version", 64 | "last 1 firefox version", 65 | "last 1 safari version" 66 | ] 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/outlined.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import typography from "assets/theme/base/typography"; 6 | import boxShadows from "assets/theme/base/boxShadows"; 7 | 8 | 9 | import pxToRem from "assets/theme/functions/pxToRem"; 10 | 11 | const { transparent, light, info, secondary } = colors; 12 | const { size } = typography; 13 | const { buttonBoxShadow } = boxShadows; 14 | 15 | export default { 16 | base: { 17 | minHeight: pxToRem(42), 18 | color: light.main, 19 | borderColor: light.main, 20 | padding: `${pxToRem(12)} ${pxToRem(24)}`, 21 | 22 | "&:hover": { 23 | opacity: 0.75, 24 | backgroundColor: transparent.main, 25 | }, 26 | 27 | "&:focus:not(:hover)": { 28 | boxShadow: buttonBoxShadow.stateOfNotHover, 29 | }, 30 | 31 | "& .material-icon, .material-icons-round, svg": { 32 | fontSize: `${pxToRem(16)} !important`, 33 | }, 34 | }, 35 | 36 | small: { 37 | minHeight: pxToRem(34), 38 | padding: `${pxToRem(8)} ${pxToRem(32)}`, 39 | fontSize: size.xs, 40 | 41 | "& .material-icon, .material-icons-round, svg": { 42 | fontSize: `${pxToRem(12)} !important`, 43 | }, 44 | }, 45 | 46 | large: { 47 | minHeight: pxToRem(49), 48 | padding: `${pxToRem(14)} ${pxToRem(64)}`, 49 | fontSize: size.sm, 50 | 51 | "& .material-icon, .material-icons-round, svg": { 52 | fontSize: `${pxToRem(22)} !important`, 53 | }, 54 | }, 55 | 56 | primary: { 57 | backgroundColor: transparent.main, 58 | borderColor: info.main, 59 | 60 | "&:hover": { 61 | backgroundColor: transparent.main, 62 | }, 63 | 64 | "&:focus:not(:hover)": { 65 | boxShadow: buttonBoxShadow.stateOfNotHover, 66 | }, 67 | }, 68 | 69 | secondary: { 70 | backgroundColor: transparent.main, 71 | borderColor: secondary.main, 72 | 73 | "&:hover": { 74 | backgroundColor: transparent.main, 75 | }, 76 | 77 | "&:focus:not(:hover)": { 78 | boxShadow: buttonBoxShadow.stateOfNotHover, 79 | }, 80 | }, 81 | }; 82 | -------------------------------------------------------------------------------- /src/components/VuiTypography/index.js: -------------------------------------------------------------------------------- 1 | import { forwardRef } from "react"; 2 | 3 | // prop-types is a library for typechecking of props 4 | import PropTypes from "prop-types"; 5 | 6 | // Custom styles for VuiTypography 7 | import VuiTypographyRoot from "components/VuiTypography/VuiTypographyRoot"; 8 | 9 | const VuiTypography = forwardRef( 10 | ( 11 | { 12 | color, 13 | fontWeight, 14 | textTransform, 15 | verticalAlign, 16 | fontSize, 17 | textGradient, 18 | opacity, 19 | children, 20 | ...rest 21 | }, 22 | ref 23 | ) => ( 24 | 37 | {children} 38 | 39 | ) 40 | ); 41 | 42 | // Setting default values for the props of VuiTypography 43 | VuiTypography.defaultProps = { 44 | color: "dark", 45 | fontWeight: false, 46 | fontSize: "16px", 47 | textTransform: "none", 48 | verticalAlign: "unset", 49 | textGradient: false, 50 | opacity: 1, 51 | }; 52 | 53 | // Typechecking props for the VuiTypography 54 | VuiTypography.propTypes = { 55 | color: PropTypes.oneOf([ 56 | "inherit", 57 | "primary", 58 | "secondary", 59 | "info", 60 | "success", 61 | "warning", 62 | "error", 63 | "light", 64 | "dark", 65 | "text", 66 | "white", 67 | "logo", 68 | ]), 69 | fontWeight: PropTypes.oneOf([false, "light", "regular", "medium", "bold"]), 70 | textTransform: PropTypes.oneOf(["none", "capitalize", "uppercase", "lowercase"]), 71 | verticalAlign: PropTypes.oneOf([ 72 | "unset", 73 | "baseline", 74 | "sub", 75 | "super", 76 | "text-top", 77 | "text-bottom", 78 | "middle", 79 | "top", 80 | "bottom", 81 | ]), 82 | textGradient: PropTypes.bool, 83 | children: PropTypes.node.isRequired, 84 | opacity: PropTypes.number, 85 | }; 86 | 87 | export default VuiTypography; 88 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/switchButton.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | import boxShadows from "assets/theme/base/boxShadows"; 7 | 8 | 9 | import rgba from "assets/theme/functions/rgba"; 10 | import pxToRem from "assets/theme/functions/pxToRem"; 11 | import linearGradient from "assets/theme/functions/linearGradient"; 12 | 13 | const { white, light, gradients } = colors; 14 | const { borderWidth } = borders; 15 | const { md } = boxShadows; 16 | 17 | export default { 18 | defaultProps: { 19 | disableRipple: true, 20 | }, 21 | 22 | styleOverrides: { 23 | root: { 24 | width: pxToRem(40), 25 | height: pxToRem(20), 26 | margin: `${pxToRem(4)} 0`, 27 | padding: 0, 28 | borderRadius: pxToRem(160), 29 | transition: "transform 250ms ease-in", 30 | }, 31 | 32 | switchBase: { 33 | padding: 0, 34 | top: "50%", 35 | transform: `translate(${pxToRem(2)}, -50%)`, 36 | transition: `transform 250ms ease-in-out`, 37 | 38 | "&.Mui-checked": { 39 | transform: `translate(${pxToRem(22)}, -50%)`, 40 | 41 | "& + .MuiSwitch-track": { 42 | backgroundColor: `${rgba(gradients.dark.state, 0.95)} !important`, 43 | borderColor: `${rgba(gradients.dark.state, 0.95)} !important`, 44 | opacity: 1, 45 | }, 46 | }, 47 | 48 | "&.Mui-disabled + .MuiSwitch-track": { 49 | opacity: "0.3 !important", 50 | }, 51 | 52 | "&.Mui-focusVisible .MuiSwitch-thumb": { 53 | backgroundImage: linearGradient(gradients.info.main, gradients.info.state), 54 | }, 55 | }, 56 | 57 | thumb: { 58 | width: pxToRem(16), 59 | height: pxToRem(16), 60 | backgroundColor: white.main, 61 | boxShadow: md, 62 | top: "50%", 63 | }, 64 | 65 | track: { 66 | backgroundColor: rgba(gradients.dark.state, 0.1), 67 | border: `${borderWidth[1]} solid ${light.main}`, 68 | borderRadius: pxToRem(160), 69 | opacity: 1, 70 | transition: `background-color 250ms ease, border-color 200ms ease`, 71 | }, 72 | 73 | checked: {}, 74 | }, 75 | }; 76 | -------------------------------------------------------------------------------- /src/examples/Sidenav/styles/sidenavCard.js: -------------------------------------------------------------------------------- 1 | // Images 2 | import backgroundImage from "assets/images/sidenav/sidenav-card-background.png"; 3 | 4 | function card(theme, ownerState) { 5 | const { borders, functions, transitions, breakpoints } = theme; 6 | const { miniSidenav } = ownerState; 7 | 8 | const { borderRadius } = borders; 9 | const { pxToRem } = functions; 10 | 11 | return { 12 | minWidth: "auto", 13 | backgroundImage: `url(${backgroundImage})`, 14 | backgroundPosition: "50%", 15 | backgroundSize: "cover", 16 | borderRadius: borderRadius.xl, 17 | boxShadow: "none", 18 | 19 | [breakpoints.up("xl")]: { 20 | maxHeight: miniSidenav ? pxToRem(64) : pxToRem(192), 21 | transition: transitions.create("max-height", { 22 | easing: transitions.easing.easeInOut, 23 | duration: transitions.duration.standard, 24 | }), 25 | }, 26 | padding: "0px", 27 | }; 28 | } 29 | 30 | function cardContent(theme) { 31 | const { palette, borders } = theme; 32 | 33 | const { white, dark } = palette; 34 | const { borderRadius } = borders; 35 | 36 | return { 37 | color: white, 38 | position: "relative", 39 | zIndex: 2, 40 | width: "100%", 41 | height: "100%", 42 | p: 2, 43 | 44 | "&::after": { 45 | content: '""', 46 | display: "block", 47 | height: "100%", 48 | width: "100%", 49 | borderRadius: borderRadius.xl, 50 | position: "absolute", 51 | top: 0, 52 | left: 0, 53 | opacity: 0.65, 54 | zIndex: -1, 55 | }, 56 | 57 | "& .MuiButton-root": { 58 | color: dark.main, 59 | }, 60 | 61 | "&:last-child": { 62 | pb: 2, 63 | }, 64 | }; 65 | } 66 | 67 | const cardIconBox = { 68 | display: "grid", 69 | placeItems: "center", 70 | transition: ({ transitions }) => 71 | transitions.create("margin", { 72 | easing: transitions.easing.easeInOut, 73 | duration: transitions.duration.standard, 74 | }), 75 | }; 76 | 77 | function cardIcon(theme, ownerState) { 78 | const { palette } = theme; 79 | const { color } = ownerState; 80 | 81 | return { 82 | WebkitTextFillColor: palette[color].main, 83 | }; 84 | } 85 | 86 | export { card, cardContent, cardIconBox, cardIcon }; 87 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/text.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import typography from "assets/theme/base/typography"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { transparent, primary, grey, text } = colors; 11 | const { size } = typography; 12 | 13 | export default { 14 | base: { 15 | backgroundColor: transparent.main, 16 | height: "max-content", 17 | color: text.main, 18 | boxShadow: "none", 19 | padding: `${pxToRem(6)} ${pxToRem(12)}`, 20 | 21 | "&:hover": { 22 | backgroundColor: transparent.main, 23 | boxShadow: "none", 24 | color: text.focus, 25 | }, 26 | 27 | "&:focus": { 28 | boxShadow: "none", 29 | color: text.focus, 30 | }, 31 | 32 | "&:active, &:active:focus, &:active:hover": { 33 | opacity: 0.85, 34 | boxShadow: "none", 35 | }, 36 | 37 | "&:disabled": { 38 | color: grey[600], 39 | boxShadow: "none", 40 | }, 41 | 42 | "& .material-icons, .material-icons-round, svg, span": { 43 | fontSize: `${pxToRem(16)} !important`, 44 | }, 45 | }, 46 | 47 | small: { 48 | fontSize: size.xs, 49 | 50 | "& .material-icons, .material-icons-round, svg, span": { 51 | fontSize: `${pxToRem(12)} !important`, 52 | }, 53 | }, 54 | 55 | large: { 56 | fontSize: size.sm, 57 | 58 | "& .material-icons, .material-icons-round, svg, span": { 59 | fontSize: `${pxToRem(22)} !important`, 60 | }, 61 | }, 62 | 63 | primary: { 64 | color: primary.main, 65 | backgroundColor: transparent.main, 66 | 67 | "&:hover": { 68 | color: primary.focus, 69 | backgroundColor: transparent.main, 70 | }, 71 | 72 | "&:focus:not(:hover)": { 73 | color: primary.focus, 74 | backgroundColor: transparent.focus, 75 | boxShadow: "none", 76 | }, 77 | }, 78 | 79 | secondary: { 80 | color: text.secondary, 81 | backgroundColor: transparent.main, 82 | 83 | "&:hover": { 84 | color: text.secondary, 85 | backgroundColor: transparent.main, 86 | }, 87 | 88 | "&:focus:not(:hover)": { 89 | color: text.secondary, 90 | backgroundColor: transparent.focus, 91 | boxShadow: "none", 92 | }, 93 | }, 94 | }; 95 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/radio.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import borders from "assets/theme/base/borders"; 5 | import colors from "assets/theme/base/colors"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | import linearGradient from "assets/theme/functions/linearGradient"; 10 | 11 | const { borderWidth, borderColor } = borders; 12 | const { transparent, gradients, info } = colors; 13 | 14 | export default { 15 | styleOverrides: { 16 | root: { 17 | backgroundPosition: "center", 18 | backgroundSize: "contain", 19 | backgroundRepeat: "no-repeat", 20 | width: pxToRem(20), 21 | height: pxToRem(20), 22 | marginRight: pxToRem(6), 23 | padding: 0, 24 | color: transparent.main, 25 | border: `${borderWidth[1]} solid ${borderColor}`, 26 | borderRadius: "50%", 27 | transition: "all 250ms ease", 28 | 29 | "&:hover": { 30 | backgroundColor: transparent.main, 31 | }, 32 | 33 | "& .MuiSvgIcon-root": { 34 | fill: transparent.main, 35 | }, 36 | 37 | "&.Mui-focusVisible": { 38 | border: `${borderWidth[2]} solid ${info.main} !important`, 39 | }, 40 | }, 41 | 42 | colorPrimary: { 43 | backgroundColor: transparent.main, 44 | 45 | "&.Mui-checked": { 46 | backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='15px' width='15px'%3E%3Ccircle cx='50%' cy='50%' r='3' fill='%23fff' /%3E%3C/svg%3E"), ${linearGradient( 47 | gradients.dark.main, 48 | gradients.dark.state 49 | )}`, 50 | borderColor: gradients.dark.main, 51 | }, 52 | 53 | "&:hover": { 54 | backgroundColor: transparent.main, 55 | }, 56 | }, 57 | 58 | colorSecondary: { 59 | backgroundColor: transparent.main, 60 | 61 | "&.Mui-checked": { 62 | backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='15px' width='15px'%3E%3Ccircle cx='50%' cy='50%' r='3' fill='%23fff' /%3E%3C/svg%3E"), ${linearGradient( 63 | gradients.dark.main, 64 | gradients.dark.state 65 | )}`, 66 | borderColor: gradients.dark.main, 67 | }, 68 | 69 | "&:hover": { 70 | backgroundColor: transparent.main, 71 | }, 72 | }, 73 | }, 74 | }; 75 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/contained.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import typography from "assets/theme/base/typography"; 6 | import boxShadows from "assets/theme/base/boxShadows"; 7 | 8 | 9 | import pxToRem from "assets/theme/functions/pxToRem"; 10 | 11 | const { white, text, info, secondary } = colors; 12 | const { size } = typography; 13 | const { buttonBoxShadow } = boxShadows; 14 | 15 | export default { 16 | base: { 17 | backgroundColor: white.main, 18 | minHeight: pxToRem(40), 19 | color: text.main, 20 | boxShadow: buttonBoxShadow.main, 21 | padding: `${pxToRem(12)} ${pxToRem(24)}`, 22 | 23 | "&:hover": { 24 | backgroundColor: white.main, 25 | boxShadow: buttonBoxShadow.stateOf, 26 | }, 27 | 28 | "&:focus": { 29 | boxShadow: buttonBoxShadow.stateOf, 30 | }, 31 | 32 | "&:active, &:active:focus, &:active:hover": { 33 | opacity: 0.85, 34 | boxShadow: buttonBoxShadow.stateOf, 35 | }, 36 | 37 | "&:disabled": { 38 | boxShadow: buttonBoxShadow.main, 39 | }, 40 | 41 | "& .material-icon, .material-icons-round, svg": { 42 | fontSize: `${pxToRem(16)} !important`, 43 | }, 44 | }, 45 | 46 | small: { 47 | minHeight: pxToRem(32), 48 | padding: `${pxToRem(8)} ${pxToRem(32)}`, 49 | fontSize: size.xs, 50 | 51 | "& .material-icon, .material-icons-round, svg": { 52 | fontSize: `${pxToRem(12)} !important`, 53 | }, 54 | }, 55 | 56 | large: { 57 | minHeight: pxToRem(47), 58 | padding: `${pxToRem(14)} ${pxToRem(64)}`, 59 | fontSize: size.sm, 60 | 61 | "& .material-icon, .material-icons-round, svg": { 62 | fontSize: `${pxToRem(22)} !important`, 63 | }, 64 | }, 65 | 66 | primary: { 67 | backgroundColor: info.main, 68 | 69 | "&:hover": { 70 | backgroundColor: info.main, 71 | }, 72 | 73 | "&:focus:not(:hover)": { 74 | backgroundColor: info.focus, 75 | boxShadow: buttonBoxShadow.stateOfNotHover, 76 | }, 77 | }, 78 | 79 | secondary: { 80 | backgroundColor: secondary.main, 81 | 82 | "&:hover": { 83 | backgroundColor: secondary.main, 84 | }, 85 | 86 | "&:focus:not(:hover)": { 87 | backgroundColor: secondary.focus, 88 | boxShadow: buttonBoxShadow.stateOfNotHover, 89 | }, 90 | }, 91 | }; 92 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/autocomplete.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import boxShadows from "assets/theme/base/boxShadows"; 5 | import typography from "assets/theme/base/typography"; 6 | import colors from "assets/theme/base/colors"; 7 | import borders from "assets/theme/base/borders"; 8 | 9 | 10 | import pxToRem from "assets/theme/functions/pxToRem"; 11 | 12 | const { lg } = boxShadows; 13 | const { size } = typography; 14 | const { text, white, transparent, light, dark, gradients } = colors; 15 | const { borderRadius } = borders; 16 | 17 | export default { 18 | styleOverrides: { 19 | popper: { 20 | boxShadow: lg, 21 | padding: pxToRem(8), 22 | fontSize: size.sm, 23 | color: text.main, 24 | textAlign: "left", 25 | backgroundColor: `${white.main} !important`, 26 | borderRadius: borderRadius.md, 27 | }, 28 | 29 | paper: { 30 | boxShadow: "none", 31 | backgroundColor: transparent.main, 32 | }, 33 | 34 | option: { 35 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 36 | borderRadius: borderRadius.md, 37 | fontSize: size.sm, 38 | color: text.main, 39 | transition: "background-color 300ms ease, color 300ms ease", 40 | 41 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 42 | backgroundColor: light.main, 43 | color: dark.main, 44 | }, 45 | 46 | '&[aria-selected="true"]': { 47 | backgroundColor: `${light.main} !important`, 48 | color: `${dark.main} !important`, 49 | }, 50 | }, 51 | 52 | noOptions: { 53 | fontSize: size.sm, 54 | color: text.main, 55 | }, 56 | 57 | groupLabel: { 58 | color: dark.main, 59 | }, 60 | 61 | loading: { 62 | fontSize: size.sm, 63 | color: text.main, 64 | }, 65 | 66 | tag: { 67 | display: "flex", 68 | alignItems: "center", 69 | height: "auto", 70 | padding: pxToRem(4), 71 | backgroundColor: gradients.dark.state, 72 | color: white.main, 73 | 74 | "& .MuiChip-label": { 75 | lineHeight: 1.2, 76 | padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, 77 | }, 78 | 79 | "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { 80 | color: white.main, 81 | marginRight: 0, 82 | }, 83 | }, 84 | }, 85 | }; 86 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/checkbox.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import borders from "assets/theme/base/borders"; 5 | import colors from "assets/theme/base/colors"; 6 | 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | import linearGradient from "assets/theme/functions/linearGradient"; 10 | 11 | const { borderWidth, borderColor } = borders; 12 | const { transparent, gradients, info } = colors; 13 | 14 | export default { 15 | styleOverrides: { 16 | root: { 17 | backgroundPosition: "center", 18 | backgroundSize: "contain", 19 | backgroundRepeat: "no-repeat", 20 | width: pxToRem(20), 21 | height: pxToRem(20), 22 | marginRight: pxToRem(6), 23 | padding: 0, 24 | color: transparent.main, 25 | border: `${borderWidth[1]} solid ${borderColor}`, 26 | borderRadius: pxToRem(5.6), 27 | transition: "all 250ms ease", 28 | 29 | "&:hover": { 30 | backgroundColor: transparent.main, 31 | }, 32 | 33 | "& .MuiSvgIcon-root": { 34 | fill: transparent.main, 35 | }, 36 | 37 | "&.Mui-focusVisible": { 38 | border: `${borderWidth[2]} solid ${info.main} !important`, 39 | }, 40 | }, 41 | 42 | colorPrimary: { 43 | backgroundColor: transparent.main, 44 | 45 | "&.Mui-checked": { 46 | backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( 47 | gradients.dark.main, 48 | gradients.dark.state 49 | )}`, 50 | borderColor: gradients.dark.main, 51 | }, 52 | 53 | "&:hover": { 54 | backgroundColor: transparent.main, 55 | }, 56 | }, 57 | 58 | colorSecondary: { 59 | backgroundColor: transparent.main, 60 | 61 | "&.Mui-checked": { 62 | backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( 63 | gradients.dark.main, 64 | gradients.dark.state 65 | )}`, 66 | borderColor: gradients.dark.main, 67 | }, 68 | 69 | "&:hover": { 70 | backgroundColor: transparent.main, 71 | }, 72 | }, 73 | }, 74 | }; 75 | -------------------------------------------------------------------------------- /src/examples/Sidenav/SidenavCollapse.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // prop-types is a library for typechecking of props. 4 | import PropTypes from "prop-types"; 5 | 6 | // @mui material components 7 | import Collapse from "@mui/material/Collapse"; 8 | import ListItem from "@mui/material/ListItem"; 9 | import ListItemIcon from "@mui/material/ListItemIcon"; 10 | import ListItemText from "@mui/material/ListItemText"; 11 | import Icon from "@mui/material/Icon"; 12 | import VuiBox from "components/VuiBox"; 13 | 14 | // Custom styles for the SidenavCollapse 15 | import { 16 | collapseItem, 17 | collapseIconBox, 18 | collapseIcon, 19 | collapseText, 20 | } from "examples/Sidenav/styles/sidenavCollapse"; 21 | 22 | import { 23 | useVisionUIController, 24 | setSelectedCategory 25 | } from "context"; 26 | 27 | 28 | function SidenavCollapse({ color, icon, name, children, active, noCollapse, open, ...rest }) { 29 | const [controller, dispatch] = useVisionUIController(); 30 | const { miniSidenav, transparentSidenav } = controller; 31 | 32 | const selectItem = () => { 33 | setSelectedCategory(dispatch, name); 34 | } 35 | 36 | return ( 37 | <> 38 | selectItem()}> 39 | collapseItem(theme, { active, transparentSidenav })}> 40 | collapseIconBox(theme, { active, transparentSidenav, color })} 42 | > 43 | {icon} 44 | 45 | 46 | collapseText(theme, { miniSidenav, transparentSidenav, active })} 49 | /> 50 | 51 | 52 | {children && ( 53 | 54 | {children} 55 | 56 | )} 57 | 58 | ); 59 | } 60 | 61 | // Setting default values for the props of SidenavCollapse 62 | SidenavCollapse.defaultProps = { 63 | color: "info", 64 | active: false, 65 | noCollapse: false, 66 | children: false, 67 | open: false, 68 | }; 69 | 70 | // Typechecking props for the SidenavCollapse 71 | SidenavCollapse.propTypes = { 72 | color: PropTypes.oneOf(["info", "success", "warning", "error", "dark"]), 73 | icon: PropTypes.node.isRequired, 74 | name: PropTypes.string.isRequired, 75 | children: PropTypes.node, 76 | active: PropTypes.bool, 77 | noCollapse: PropTypes.bool, 78 | open: PropTypes.bool, 79 | }; 80 | 81 | export default SidenavCollapse; 82 | -------------------------------------------------------------------------------- /src/examples/Sidenav/SidenavRoot.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // @mui material components 4 | import Drawer from "@mui/material/Drawer"; 5 | import { styled } from "@mui/material/styles"; 6 | import linearGradient from "assets/theme/functions/linearGradient"; 7 | 8 | export default styled(Drawer)(({ theme, ownerState }) => { 9 | const { palette, boxShadows, transitions, breakpoints, functions } = theme; 10 | const { transparentSidenav, miniSidenav } = ownerState; 11 | 12 | const sidebarWidth = 250; 13 | const { transparent, gradients } = palette; 14 | const { xxl } = boxShadows; 15 | const { pxToRem } = functions; 16 | 17 | // styles for the sidenav when miniSidenav={false} 18 | const drawerOpenStyles = () => ({ 19 | transform: "translateX(0)", 20 | transition: transitions.create("transform", { 21 | easing: transitions.easing.sharp, 22 | duration: transitions.duration.shorter, 23 | }), 24 | 25 | [breakpoints.up("xl")]: { 26 | boxShadow: transparentSidenav ? "none" : xxl, 27 | marginBottom: transparentSidenav ? 0 : "inherit", 28 | left: "0", 29 | width: sidebarWidth, 30 | transform: "translateX(0)", 31 | transition: transitions.create(["width", "background-color"], { 32 | easing: transitions.easing.sharp, 33 | duration: transitions.duration.enteringScreen, 34 | }), 35 | }, 36 | }); 37 | 38 | // styles for the sidenav when miniSidenav={true} 39 | const drawerCloseStyles = () => ({ 40 | transform: `translateX(${pxToRem(-320)})`, 41 | transition: transitions.create("transform", { 42 | easing: transitions.easing.sharp, 43 | duration: transitions.duration.shorter, 44 | }), 45 | 46 | [breakpoints.up("xl")]: { 47 | boxShadow: transparentSidenav ? "none" : xxl, 48 | marginBottom: transparentSidenav ? 0 : "inherit", 49 | left: "0", 50 | width: pxToRem(96), 51 | overflowX: "hidden", 52 | transform: "translateX(0)", 53 | transition: transitions.create(["width", "background-color"], { 54 | easing: transitions.easing.sharp, 55 | duration: transitions.duration.shorter, 56 | }), 57 | }, 58 | }); 59 | 60 | return { 61 | "& .MuiDrawer-paper": { 62 | boxShadow: xxl, 63 | border: "none", 64 | height: "100vh", 65 | background: linearGradient( 66 | gradients.sidenav.main, 67 | gradients.sidenav.state, 68 | gradients.sidenav.deg 69 | ), 70 | backdropFilter: transparentSidenav ? "unset" : "blur(120px)", 71 | ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()), 72 | }, 73 | }; 74 | }); 75 | -------------------------------------------------------------------------------- /src/examples/Footer/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import VuiBox from "components/VuiBox"; 5 | import VuiTypography from "components/VuiTypography"; 6 | 7 | function Footer() { 8 | return ( 9 | 18 | 19 | 25 | @ 2023, Made with ✨ by {" "} 26 | 37 | Angelina Tsuboi 38 | 39 | 40 | 41 | 42 | 43 | 44 | 52 | Submit a Tool 53 | 54 | 55 | 56 | 64 | GitHub 65 | 66 | 67 | 68 | 76 | License 77 | 78 | 79 | 80 | 81 | 82 | ); 83 | } 84 | 85 | export default Footer; 86 | -------------------------------------------------------------------------------- /src/examples/Navbars/DashboardNavbar/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { useState, useEffect } from "react"; 4 | 5 | // react-router components 6 | import { useLocation, Link } from "react-router-dom"; 7 | 8 | // prop-types is a library for typechecking of props. 9 | import PropTypes from "prop-types"; 10 | 11 | // @material-ui core components 12 | import AppBar from "@mui/material/AppBar"; 13 | import Toolbar from "@mui/material/Toolbar"; 14 | import VuiBox from "components/VuiBox"; 15 | 16 | // Custom styles for DashboardNavbar 17 | import { 18 | navbar 19 | } from "examples/Navbars/DashboardNavbar/styles"; 20 | 21 | import { 22 | useVisionUIController, 23 | setTransparentNavbar 24 | } from "context"; 25 | 26 | 27 | function DashboardNavbar({ absolute, light, isMini }) { 28 | const [navbarType, setNavbarType] = useState(); 29 | const [controller, dispatch] = useVisionUIController(); 30 | const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator } = controller; 31 | 32 | useEffect(() => { 33 | // Setting the navbar type 34 | if (fixedNavbar) { 35 | setNavbarType("sticky"); 36 | } else { 37 | setNavbarType("static"); 38 | } 39 | 40 | // A function that sets the transparent state of the navbar. 41 | function handleTransparentNavbar() { 42 | setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); 43 | } 44 | 45 | /** 46 | The event listener that's calling the handleTransparentNavbar function when 47 | scrolling the window. 48 | */ 49 | window.addEventListener("scroll", handleTransparentNavbar); 50 | 51 | // Call the handleTransparentNavbar function to set the state with the initial value. 52 | handleTransparentNavbar(); 53 | 54 | // Remove event listener on cleanup 55 | return () => window.removeEventListener("scroll", handleTransparentNavbar); 56 | }, [dispatch, fixedNavbar]); 57 | 58 | 59 | return ( 60 | navbar(theme, { transparentNavbar, absolute, light })} 64 | > 65 | 66 | 67 | 71 | 72 | 73 | 74 | 75 | 76 | ); 77 | } 78 | 79 | // Setting default values for the props of DashboardNavbar 80 | DashboardNavbar.defaultProps = { 81 | absolute: false, 82 | light: false, 83 | isMini: false, 84 | }; 85 | 86 | // Typechecking props for the DashboardNavbar 87 | DashboardNavbar.propTypes = { 88 | absolute: PropTypes.bool, 89 | light: PropTypes.bool, 90 | isMini: PropTypes.bool, 91 | }; 92 | 93 | export default DashboardNavbar; 94 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { useState, useEffect, useMemo } from "react"; 4 | 5 | // react-router components 6 | import { Route, Switch, Redirect, useLocation } from "react-router-dom"; 7 | 8 | // @mui material components 9 | import { ThemeProvider } from "@mui/material/styles"; 10 | import CssBaseline from "@mui/material/CssBaseline"; 11 | import Icon from "@mui/material/Icon"; 12 | 13 | import VuiBox from "components/VuiBox"; 14 | 15 | import Sidenav from "examples/Sidenav"; 16 | 17 | import theme from "assets/theme"; 18 | 19 | // RTL plugins 20 | import rtlPlugin from "stylis-plugin-rtl"; 21 | import { CacheProvider } from "@emotion/react"; 22 | import createCache from "@emotion/cache"; 23 | 24 | import categories from "data/categories"; 25 | 26 | import { useVisionUIController, setMiniSidenav, setOpenConfigurator } from "context"; 27 | import Dashboard from "layouts/dashboard"; 28 | 29 | export default function App() { 30 | const [controller, dispatch] = useVisionUIController(); 31 | const { miniSidenav, direction, layout, openConfigurator, sidenavColor } = controller; 32 | const [onMouseEnter, setOnMouseEnter] = useState(false); 33 | const [rtlCache, setRtlCache] = useState(null); 34 | const { pathname } = useLocation(); 35 | 36 | // Cache for the rtl 37 | useMemo(() => { 38 | const cacheRtl = createCache({ 39 | key: "rtl", 40 | stylisPlugins: [rtlPlugin], 41 | }); 42 | 43 | setRtlCache(cacheRtl); 44 | }, []); 45 | 46 | // Open sidenav when mouse enter on mini sidenav 47 | const handleOnMouseEnter = () => { 48 | if (miniSidenav && !onMouseEnter) { 49 | setMiniSidenav(dispatch, false); 50 | setOnMouseEnter(true); 51 | } 52 | }; 53 | 54 | // Close sidenav when mouse leave mini sidenav 55 | const handleOnMouseLeave = () => { 56 | if (onMouseEnter) { 57 | setMiniSidenav(dispatch, true); 58 | setOnMouseEnter(false); 59 | } 60 | }; 61 | 62 | 63 | // Setting the dir attribute for the body element 64 | useEffect(() => { 65 | document.body.setAttribute("dir", direction); 66 | }, [direction]); 67 | 68 | // Setting page scroll to 0 when changing the route 69 | useEffect(() => { 70 | document.documentElement.scrollTop = 0; 71 | document.scrollingElement.scrollTop = 0; 72 | }, [pathname]); 73 | 74 | return ( 75 | 76 | 77 | {layout === "dashboard" && ( 78 | <> 79 | 85 | 86 | 87 | )} 88 | 89 | 90 | 91 | 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /src/components/VuiInput/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { forwardRef } from "react"; 4 | 5 | // prop-types is a library for typechecking of props 6 | import PropTypes from "prop-types"; 7 | 8 | // Custom styles for VuiInput 9 | import VuiInputRoot from "components/VuiInput/VuiInputRoot"; 10 | import VuiInputWithIconRoot from "components/VuiInput/VuiInputWithIconRoot"; 11 | import VuiInputIconBoxRoot from "components/VuiInput/VuiInputIconBoxRoot"; 12 | import VuiInputIconRoot from "components/VuiInput/VuiInputIconRoot"; 13 | 14 | import { useVisionUIController } from "context"; 15 | 16 | const VuiInput = forwardRef(({ size, icon, error, success, disabled, ...rest }, ref) => { 17 | let template; 18 | const [controller] = useVisionUIController(); 19 | const { direction } = controller; 20 | const iconDirection = icon.direction; 21 | 22 | if (icon.component && icon.direction === "left") { 23 | template = ( 24 | 25 | 26 | 27 | {icon.component} 28 | 29 | 30 | 34 | 35 | ); 36 | } else if (icon.component && icon.direction === "right") { 37 | template = ( 38 | 39 | 43 | 44 | 45 | {icon.component} 46 | 47 | 48 | 49 | ); 50 | } else { 51 | template = ; 52 | } 53 | 54 | return template; 55 | }); 56 | 57 | // Setting default values for the props of VuiInput 58 | VuiInput.defaultProps = { 59 | size: "medium", 60 | icon: { 61 | component: false, 62 | direction: "none", 63 | }, 64 | error: false, 65 | success: false, 66 | disabled: false, 67 | }; 68 | 69 | // Typechecking props for the VuiInput 70 | VuiInput.propTypes = { 71 | size: PropTypes.oneOf(["small", "medium", "large"]), 72 | icon: PropTypes.shape({ 73 | component: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]), 74 | direction: PropTypes.oneOf(["none", "left", "right"]), 75 | }), 76 | error: PropTypes.bool, 77 | success: PropTypes.bool, 78 | disabled: PropTypes.bool, 79 | }; 80 | 81 | export default VuiInput; 82 | -------------------------------------------------------------------------------- /src/components/VuiBox/VuiBoxRoot.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // @mui material components 4 | import Box from "@mui/material/Box"; 5 | import { styled } from "@mui/material/styles"; 6 | 7 | export default styled(Box)(({ theme, ownerState }) => { 8 | const { palette, functions, borders, boxShadows } = theme; 9 | const { variant, bgColor, color, opacity, borderRadius, shadow } = ownerState; 10 | 11 | const { gradients, grey, white } = palette; 12 | const { linearGradient } = functions; 13 | const { borderRadius: radius } = borders; 14 | 15 | const greyColors = { 16 | "grey-100": grey[100], 17 | "grey-200": grey[200], 18 | "grey-300": grey[300], 19 | "grey-400": grey[400], 20 | "grey-500": grey[500], 21 | "grey-600": grey[600], 22 | "grey-700": grey[700], 23 | "grey-800": grey[800], 24 | "grey-900": grey[900], 25 | }; 26 | 27 | const validGradients = [ 28 | "primary", 29 | "secondary", 30 | "info", 31 | "success", 32 | "warning", 33 | "error", 34 | "dark", 35 | "light", 36 | ]; 37 | 38 | const validColors = [ 39 | "transparent", 40 | "white", 41 | "black", 42 | "primary", 43 | "secondary", 44 | "info", 45 | "success", 46 | "warning", 47 | "error", 48 | "light", 49 | "dark", 50 | "text", 51 | "grey-100", 52 | "grey-200", 53 | "grey-300", 54 | "grey-400", 55 | "grey-500", 56 | "grey-600", 57 | "grey-700", 58 | "grey-800", 59 | "grey-900", 60 | ]; 61 | 62 | const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"]; 63 | const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"]; 64 | 65 | // background value 66 | let backgroundValue = bgColor; 67 | 68 | if (variant === "gradient") { 69 | backgroundValue = validGradients.find((el) => el === bgColor) 70 | ? linearGradient(gradients[bgColor].main, gradients[bgColor].state) 71 | : white.main; 72 | } else if (validColors.find((el) => el === bgColor)) { 73 | backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor]; 74 | } else { 75 | backgroundValue = bgColor; 76 | } 77 | 78 | // color value 79 | let colorValue = color; 80 | 81 | if (validColors.find((el) => el === color)) { 82 | colorValue = palette[color] ? palette[color].main : greyColors[color]; 83 | } 84 | 85 | // borderRadius value 86 | let borderRadiusValue = borderRadius; 87 | 88 | if (validBorderRadius.find((el) => el === borderRadius)) { 89 | borderRadiusValue = radius[borderRadius]; 90 | } 91 | 92 | // boxShadow value 93 | let boxShadowValue = boxShadows; 94 | 95 | if (validBoxShadows.find((el) => el === shadow)) { 96 | boxShadowValue = boxShadows[shadow]; 97 | } 98 | 99 | return { 100 | opacity, 101 | background: backgroundValue, 102 | color: colorValue, 103 | borderRadius: borderRadiusValue, 104 | boxShadow: boxShadowValue, 105 | }; 106 | }); 107 | -------------------------------------------------------------------------------- /src/examples/Cards/ProjectCards/DefaultProjectCard/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // react-router-dom components 4 | import { Link } from "react-router-dom"; 5 | 6 | // prop-types is a library for typechecking of props 7 | import PropTypes from "prop-types"; 8 | 9 | 10 | import VuiBox from "components/VuiBox"; 11 | import VuiTypography from "components/VuiTypography"; 12 | import VuiButton from "components/VuiButton"; 13 | 14 | function DefaultProjectCard({ image, label, title, description, action, authors }) { 15 | 16 | return ( 17 | 28 | ({ 34 | [breakpoints.up("xl")]: { 35 | height: "200px", 36 | }, 37 | })} 38 | /> 39 | 40 | ({ 42 | [breakpoints.only("xl")]: { 43 | minHeight: "200px", 44 | }, 45 | })} 46 | > 47 | 48 | 58 | {title} 59 | 60 | 61 | 62 | 63 | {description} 64 | 65 | 66 | 67 | 68 | {label} 69 | 70 | 71 | 72 | 82 | VIEW TOOL 83 | 84 | 85 | 86 | 87 | ); 88 | } 89 | 90 | // Setting default values for the props of DefaultProjectCard 91 | DefaultProjectCard.defaultProps = { 92 | authors: [], 93 | }; 94 | 95 | // Typechecking props for the DefaultProjectCard 96 | DefaultProjectCard.propTypes = { 97 | image: PropTypes.string.isRequired, 98 | label: PropTypes.string.isRequired, 99 | title: PropTypes.string.isRequired, 100 | description: PropTypes.string.isRequired, 101 | action: PropTypes.shape({ 102 | type: PropTypes.oneOf(["external", "internal"]), 103 | route: PropTypes.string.isRequired, 104 | color: PropTypes.oneOf([ 105 | "white", 106 | "text", 107 | "info", 108 | "success", 109 | "warning", 110 | "error", 111 | "light", 112 | "dark", 113 | "white", 114 | ]).isRequired, 115 | label: PropTypes.string.isRequired, 116 | }).isRequired, 117 | authors: PropTypes.arrayOf(PropTypes.object), 118 | }; 119 | 120 | export default DefaultProjectCard; 121 | -------------------------------------------------------------------------------- /src/context/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | This file is used for controlling the global states of the components, 4 | you can customize the states for the different components here. 5 | */ 6 | 7 | import { createContext, useContext, useReducer } from "react"; 8 | 9 | // prop-types is a library for typechecking of props 10 | import PropTypes from "prop-types"; 11 | 12 | const VisionUI = createContext(); 13 | 14 | // Setting custom name for the context which is visible on react dev tools 15 | VisionUI.displayName = "VisionUIContext"; 16 | 17 | function reducer(state, action) { 18 | switch (action.type) { 19 | case "MINI_SIDENAV": { 20 | return { ...state, miniSidenav: action.value }; 21 | } 22 | case "TRANSPARENT_SIDENAV": { 23 | return { ...state, transparentSidenav: action.value }; 24 | } 25 | case "SIDENAV_COLOR": { 26 | return { ...state, sidenavColor: action.value }; 27 | } 28 | case "TRANSPARENT_NAVBAR": { 29 | return { ...state, transparentNavbar: action.value }; 30 | } 31 | case "FIXED_NAVBAR": { 32 | return { ...state, fixedNavbar: action.value }; 33 | } 34 | case "OPEN_CONFIGURATOR": { 35 | return { ...state, openConfigurator: action.value }; 36 | } 37 | case "DIRECTION": { 38 | return { ...state, direction: action.value }; 39 | } 40 | case "LAYOUT": { 41 | return { ...state, layout: action.value }; 42 | } 43 | case "SELECTED_CATEGORY": { 44 | return {...state, category: action.value }; 45 | } 46 | case "SEARCH": { 47 | return {...state, search: action.value }; 48 | } 49 | default: { 50 | throw new Error(`Unhandled action type: ${action.type}`); 51 | } 52 | } 53 | } 54 | 55 | function VisionUIControllerProvider({ children }) { 56 | const initialState = { 57 | miniSidenav: false, 58 | transparentSidenav: true, 59 | sidenavColor: "info", 60 | transparentNavbar: true, 61 | fixedNavbar: true, 62 | openConfigurator: false, 63 | direction: "ltr", 64 | layout: "dashboard", 65 | category: "All Tools", 66 | search: "" 67 | }; 68 | 69 | const [controller, dispatch] = useReducer(reducer, initialState); 70 | 71 | return {children}; 72 | } 73 | 74 | function useVisionUIController() { 75 | const context = useContext(VisionUI); 76 | 77 | if (!context) { 78 | throw new Error("useVisionUIController should be used inside the VisionUIControllerProvider."); 79 | } 80 | 81 | return context; 82 | } 83 | 84 | // Typechecking props for the VisionUIControllerProvider 85 | VisionUIControllerProvider.propTypes = { 86 | children: PropTypes.node.isRequired, 87 | }; 88 | 89 | // Context module functions 90 | const setMiniSidenav = (dispatch, value) => dispatch({ type: "MINI_SIDENAV", value }); 91 | const setTransparentSidenav = (dispatch, value) => dispatch({ type: "TRANSPARENT_SIDENAV", value }); 92 | const setSidenavColor = (dispatch, value) => dispatch({ type: "SIDENAV_COLOR", value }); 93 | const setTransparentNavbar = (dispatch, value) => dispatch({ type: "TRANSPARENT_NAVBAR", value }); 94 | const setFixedNavbar = (dispatch, value) => dispatch({ type: "FIXED_NAVBAR", value }); 95 | const setOpenConfigurator = (dispatch, value) => dispatch({ type: "OPEN_CONFIGURATOR", value }); 96 | const setDirection = (dispatch, value) => dispatch({ type: "DIRECTION", value }); 97 | const setLayout = (dispatch, value) => dispatch({ type: "LAYOUT", value }); 98 | const setSelectedCategory = (dispatch, value) => dispatch({ type: "SELECTED_CATEGORY", value }); 99 | const setSearch = (dispatch, value) => dispatch({ type: "SEARCH", value }); 100 | 101 | export { 102 | VisionUIControllerProvider, 103 | useVisionUIController, 104 | setMiniSidenav, 105 | setTransparentSidenav, 106 | setSidenavColor, 107 | setTransparentNavbar, 108 | setFixedNavbar, 109 | setOpenConfigurator, 110 | setDirection, 111 | setLayout, 112 | setSelectedCategory, 113 | setSearch 114 | }; 115 | -------------------------------------------------------------------------------- /src/layouts/dashboard/index.js: -------------------------------------------------------------------------------- 1 | import Grid from "@mui/material/Grid"; 2 | import DefaultProjectCard from "examples/Cards/ProjectCards/DefaultProjectCard"; 3 | import VuiBox from "components/VuiBox"; 4 | import VuiTypography from "components/VuiTypography"; 5 | import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; 6 | import Footer from "examples/Footer"; 7 | import colors from "assets/theme/base/colors"; 8 | 9 | // Dashboard layout components 10 | import VuiInput from "components/VuiInput"; 11 | import projects from "data/projects"; 12 | import categories from "data/categories"; 13 | 14 | // Data 15 | import globe from "assets/images/globe.png"; 16 | 17 | import { 18 | useVisionUIController, 19 | setSearch 20 | } from "context"; 21 | 22 | 23 | const tagsToString = (tags) => { 24 | let output = ""; 25 | tags.forEach((tag, i) => { 26 | if (i != tags.length - 1 && tags.length != 0) { 27 | output += tag + ", "; 28 | } else { 29 | output += tag; 30 | } 31 | }) 32 | console.log("o", output, tags) 33 | return output 34 | } 35 | 36 | const sortCardsByDate = (card) => { 37 | return card.sort((a, b) => { 38 | a = a.dateAdded.split('/'); 39 | b = b.dateAdded.split('/'); 40 | return a[2] - b[2] || a[0] - b[0] || a[1] - b[1]; 41 | }) 42 | } 43 | 44 | const generateCards = (selectedTag, query) => { 45 | return sortCardsByDate(projects).reverse().filter(project => (query.length == 0 && (project.tags.includes(selectedTag) || selectedTag == "All Tools")) || (query.length > 0 && project.name.toLowerCase().includes(query.toLowerCase()))).map((proj, i) => ( 46 | 47 | 58 | 59 | )) 60 | } 61 | 62 | 63 | 64 | 65 | function Dashboard() { 66 | const { gradients } = colors; 67 | const [controller, dispatch] = useVisionUIController(); 68 | const { direction, category, search } = controller; 69 | 70 | const handleSearchChange = (event) => { 71 | const { value } = event.target; 72 | setSearch(dispatch,value) 73 | } 74 | 75 | return ( 76 | 77 | 81 | 89 | 90 | Aerospace Hacking Tools 91 | 92 | 93 | A comprehensive collection of space-related cybersecurity tools 94 | 95 | ({ 101 | [breakpoints.down("sm")]: { 102 | maxWidth: "80px", 103 | }, 104 | [breakpoints.only("sm")]: { 105 | maxWidth: "80px", 106 | }, 107 | backgroundColor: "info.main !important", 108 | })} 109 | /> 110 | 111 | 112 | 113 | 114 | {generateCards(category, search)} 115 | 116 | 117 | 118 |