robobyte-front-builder 1.0.0

package/src/@core/svg/LayoutCollapsed.jsx

@@ -0,0 +1,59 @@
+const LayoutCollapsed = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <path
+        d='M0 4C0 1.79086 1.79086 0 4 0H13.7359V66H4C1.79086 66 0 64.2091 0 62V4Z'
+        fill='currentColor'
+        fillOpacity='0.04'
+      />
+      <rect
+        x='2.94336'
+        y='23.8839'
+        width='7.84906'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='3.43359' y='5.88135' width='6.86793' height='6.79412' rx='2' fill='currentColor' fillOpacity='0.3' />
+      <rect
+        x='2.94336'
+        y='34.4382'
+        width='7.84906'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='2.94336'
+        y='44.9923'
+        width='7.84906'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='2.94336'
+        y='55.5463'
+        width='7.84906'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='21.4717' y='4.67169' width='75.437' height='8.8' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='25.6172' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='78.248' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='84.1348' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='90.0215' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='50.4912' y='19.6134' width='46.8212' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='21.4717' y='19.6134' width='22.1679' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='21.4717' y='42.4545' width='75.8413' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+    </svg>
+  )
+}
+
+export default LayoutCollapsed

package/src/@core/svg/LayoutHorizontal.jsx

@@ -0,0 +1,42 @@
+const LayoutHorizontal = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <rect x='44.0068' y='19.6136' width='46.8212' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='14.9854' y='19.6136' width='22.1679' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='14.9854' y='42.4547' width='75.8413' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='14.9248' y='4.68896' width='74.1506' height='9.00999' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='20.0264' y='6.50403' width='6.00327' height='5.38019' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='33.877' y='7.96356' width='6.6372' height='2.46129' rx='1.23064' fill='currentColor' fillOpacity='0.3' />
+      <rect
+        x='48.3652'
+        y='7.96356'
+        width='6.6372'
+        height='2.46129'
+        rx='1.23064'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='62.8506'
+        y='7.96356'
+        width='6.6372'
+        height='2.46129'
+        rx='1.23064'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='77.3379'
+        y='7.96356'
+        width='6.6372'
+        height='2.46129'
+        rx='1.23064'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+    </svg>
+  )
+}
+
+export default LayoutHorizontal

package/src/@core/svg/LayoutVertical.jsx

@@ -0,0 +1,59 @@
+const LayoutVertical = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <path
+        d='M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z'
+        fill='currentColor'
+        fillOpacity='0.08'
+      />
+      <rect
+        x='4.90625'
+        y='23.8839'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='8.83008' y='5.88135' width='9.81132' height='9.70588' rx='2' fill='currentColor' fillOpacity='0.3' />
+      <rect
+        x='4.90625'
+        y='34.4382'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='4.90625'
+        y='44.9923'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='4.90625'
+        y='55.5463'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='32.1523' y='4.67169' width='64.7547' height='8.8' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='35.0781' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='78.248' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='84.1348' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='90.0215' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='57.0859' y='19.6134' width='40.2264' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='32.1523' y='19.6134' width='19.0455' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='32.1523' y='42.4545' width='65.1591' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+    </svg>
+  )
+}
+
+export default LayoutVertical

package/src/@core/svg/Logo.jsx

@@ -0,0 +1,76 @@
+const Logo = props => {
+  return (
+    <svg width='40' height='22' viewBox='0 0 40 22' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect
+        width='7.37565'
+        height='21.1131'
+        rx='3.68783'
+        transform='matrix(-0.865206 0.501417 0.498585 0.866841 28.4115 0)'
+        fill='var(--mui-palette-primary-main)'
+      />
+      <rect
+        width='7.37565'
+        height='21.1131'
+        rx='3.68783'
+        transform='matrix(-0.865206 0.501417 0.498585 0.866841 28.4869 0)'
+        fill='url(#paint0_linear_448_114254)'
+        fillOpacity='0.4'
+      />
+      <rect
+        width='7.37565'
+        height='21.1131'
+        rx='3.68783'
+        transform='matrix(0.865206 0.501417 -0.498585 0.866841 25.6563 0)'
+        fill='var(--mui-palette-primary-main)'
+      />
+      <rect
+        width='7.37565'
+        height='21.1131'
+        rx='3.68783'
+        transform='matrix(-0.865206 0.501417 0.498585 0.866841 14.3293 0)'
+        fill='var(--mui-palette-primary-main)'
+      />
+      <rect
+        width='7.37565'
+        height='21.1131'
+        rx='3.68783'
+        transform='matrix(-0.865206 0.501417 0.498585 0.866841 14.3293 0)'
+        fill='url(#paint1_linear_448_114254)'
+        fillOpacity='0.4'
+      />
+      <rect
+        width='7.37565'
+        height='21.1131'
+        rx='3.68783'
+        transform='matrix(0.865206 0.501417 -0.498585 0.866841 11.5132 0)'
+        fill='var(--mui-palette-primary-main)'
+      />
+      <defs>
+        <linearGradient
+          id='paint0_linear_448_114254'
+          x1='3.68783'
+          y1='0'
+          x2='3.68783'
+          y2='21.1131'
+          gradientUnits='userSpaceOnUse'
+        >
+          <stop />
+          <stop offset='1' stopOpacity='0' />
+        </linearGradient>
+        <linearGradient
+          id='paint1_linear_448_114254'
+          x1='3.68783'
+          y1='0'
+          x2='3.68783'
+          y2='21.1131'
+          gradientUnits='userSpaceOnUse'
+        >
+          <stop />
+          <stop offset='1' stopOpacity='0' />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default Logo

package/src/@core/svg/SkinBordered.jsx

@@ -0,0 +1,54 @@
+const SkinDefault = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <rect
+        x='4.90625'
+        y='23.8839'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='8.83008' y='5.88135' width='9.81132' height='9.70588' rx='2' fill='currentColor' fillOpacity='0.3' />
+      <rect
+        x='4.90625'
+        y='34.4381'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='4.90625'
+        y='44.9923'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='4.90625'
+        y='55.5462'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='34.6152' y='5.17166' width='63.7547' height='7.8' rx='1.5' stroke='currentColor' strokeOpacity='0.12' />
+      <rect x='37.0391' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='80.21' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='86.0957' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='91.002' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='58.9844' y='20.1134' width='39.2264' height='16.6' rx='1.5' stroke='currentColor' strokeOpacity='0.12' />
+      <rect x='34.6152' y='20.1134' width='18.0455' height='16.6' rx='1.5' stroke='currentColor' strokeOpacity='0.12' />
+      <rect x='34.6152' y='42.9545' width='63.7547' height='16.6' rx='1.5' stroke='currentColor' strokeOpacity='0.12' />
+    </svg>
+  )
+}
+
+export default SkinDefault

package/src/@core/svg/SkinDefault.jsx

@@ -0,0 +1,59 @@
+const SkinDefault = props => {
+  return (
+    <svg width='104' height='66' viewBox='0 0 104 66' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect width='104' height='66' rx='4' fill='currentColor' fillOpacity='0.02' />
+      <path
+        d='M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z'
+        fill='currentColor'
+        fillOpacity='0.08'
+      />
+      <rect
+        x='4.90625'
+        y='23.8839'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='8.83008' y='5.88135' width='9.81132' height='9.70588' rx='2' fill='currentColor' fillOpacity='0.3' />
+      <rect
+        x='4.90625'
+        y='34.4381'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='4.90625'
+        y='44.9923'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect
+        x='4.90625'
+        y='55.5462'
+        width='17.6604'
+        height='2.78946'
+        rx='1.39473'
+        fill='currentColor'
+        fillOpacity='0.3'
+      />
+      <rect x='34.1152' y='4.67166' width='64.7547' height='8.8' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='37.0391' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='80.21' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='86.0957' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='91.9824' y='6.87158' width='3.92453' height='4.4' rx='1' fill='currentColor' fillOpacity='0.3' />
+      <rect x='58.4844' y='19.6134' width='40.2264' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='34.1152' y='19.6134' width='19.0455' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+      <rect x='34.1152' y='42.4545' width='64.7547' height='17.6' rx='2' fill='currentColor' fillOpacity='0.08' />
+    </svg>
+  )
+}
+
+export default SkinDefault

package/src/@core/tailwind/plugin.js

@@ -0,0 +1,78 @@
+import plugin from 'tailwindcss/plugin'
+
+export default plugin(function () {}, {
+  theme: {
+    borderColor: ({ theme }) => ({
+      ...theme('colors'),
+      DEFAULT: 'var(--border-color, currentColor)'
+    }),
+    borderRadius: {
+      none: '0px',
+      xs: 'var(--mui-shape-customBorderRadius-xs)',
+      sm: 'var(--mui-shape-customBorderRadius-sm)',
+      DEFAULT: '0.625rem',
+      md: 'var(--mui-shape-customBorderRadius-md)',
+      lg: 'var(--mui-shape-customBorderRadius-lg)',
+      xl: 'var(--mui-shape-customBorderRadius-xl)',
+      '2xl': '0.75rem',
+      '3xl': '1rem',
+      '4xl': '1.5rem',
+      full: '9999px'
+    },
+    screens: {
+      sm: '600px',
+      md: '900px',
+      lg: '1200px',
+      xl: '1536px',
+      '2xl': '1920px'
+    },
+    extend: {
+      boxShadow: {
+        xs: 'var(--mui-customShadows-xs)',
+        sm: 'var(--mui-customShadows-sm)',
+        DEFAULT: 'var(--mui-customShadows-md)',
+        md: 'var(--mui-customShadows-md)',
+        lg: 'var(--mui-customShadows-lg)',
+        xl: 'var(--mui-customShadows-xl)'
+      },
+      colors: {
+        primary: 'var(--primary-color)',
+        primaryLight: 'var(--mui-palette-primary-lightOpacity)',
+        primaryLighter: 'var(--mui-palette-primary-lighterOpacity)',
+        primaryDark: 'var(--mui-palette-primary-dark)',
+        secondary: 'var(--mui-palette-secondary-main)',
+        error: 'var(--mui-palette-error-main)',
+        errorLight: 'var(--mui-palette-error-lightOpacity)',
+        errorLighter: 'var(--mui-palette-error-lighterOpacity)',
+        warning: 'var(--mui-palette-warning-main)',
+        info: 'var(--mui-palette-info-main)',
+        infoLight: 'var(--mui-palette-info-lightOpacity)',
+        infoLighter: 'var(--mui-palette-info-lighterOpacity)',
+        success: 'var(--mui-palette-success-main)',
+        successLight: 'var(--mui-palette-success-lightOpacity)',
+        textPrimary: 'var(--mui-palette-text-primary)',
+        textSecondary: 'var(--mui-palette-text-secondary)',
+        textDisabled: 'var(--mui-palette-text-disabled)',
+        actionActive: 'var(--mui-palette-action-active)',
+        actionHover: 'var(--mui-palette-action-hover)',
+        actionSelected: 'var(--mui-palette-action-selected)',
+        actionFocus: 'var(--mui-palette-action-focus)',
+        backgroundPaper: 'var(--mui-palette-background-paper)',
+        backgroundDefault: 'var(--mui-palette-background-default)',
+        track: 'var(--mui-palette-customColors-trackBg)',
+        backdrop: 'var(--backdrop-color)',
+        facebook: '#4267B2',
+        twitter: '#1DA1F2',
+        linkedin: '#007BB6',
+        googlePlus: '#DB4437'
+      },
+      zIndex: {
+        header: 'var(--header-z-index)',
+        footer: 'var(--footer-z-index)',
+        customizer: 'var(--customizer-z-index)',
+        search: 'var(--search-z-index)',
+        drawer: 'var(--drawer-z-index)'
+      }
+    }
+  }
+})

package/src/@core/theme/ThemeComponent.js

@@ -0,0 +1,63 @@
+// ** MUI Imports
+import { deepmerge } from '@mui/utils'
+import CssBaseline from '@mui/material/CssBaseline'
+import GlobalStyles from '@mui/material/GlobalStyles'
+import { ThemeProvider, createTheme, responsiveFontSizes } from '@mui/material/styles'
+
+// ** Theme Config
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Direction component for LTR or RTL
+import Direction from 'src/layouts/components/Direction'
+
+// ** Theme Override Imports
+import overrides from './overrides'
+import typography from './typography'
+
+// ** Theme
+import themeOptions from './ThemeOptions'
+import UserThemeOptions from 'src/layouts/UserThemeOptions'
+
+// ** Global Styles
+import GlobalStyling from './globalStyles'
+
+const ThemeComponent = props => {
+  // ** Props
+  const { settings, children } = props
+
+  // ** Merged ThemeOptions of Core and User
+  const coreThemeConfig = themeOptions(settings)
+
+  // ** Pass ThemeOptions to CreateTheme Function to create partial theme without component overrides
+  let theme = createTheme(coreThemeConfig)
+
+  // ** Deep Merge Component overrides of core and user
+  const mergeComponentOverrides = (theme, settings) =>
+    deepmerge({ ...overrides(theme, settings) }, UserThemeOptions()?.components)
+
+  // ** Deep Merge Typography of core and user
+  const mergeTypography = theme => deepmerge(typography(theme), UserThemeOptions()?.typography)
+
+  // ** Continue theme creation and pass merged component overrides to CreateTheme function
+  theme = createTheme(theme, {
+    components: { ...mergeComponentOverrides(theme, settings) },
+    typography: { ...mergeTypography(theme) }
+  })
+
+  // ** Set responsive font sizes to true
+  if (themeConfig.responsiveFontSizes) {
+    theme = responsiveFontSizes(theme)
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Direction direction={settings.direction}>
+        <CssBaseline />
+        <GlobalStyles styles={() => GlobalStyling(theme, settings)} />
+        {children}
+      </Direction>
+    </ThemeProvider>
+  )
+}
+
+export default ThemeComponent

package/src/@core/theme/ThemeOptions.js

@@ -0,0 +1,71 @@
+// ** MUI Theme Provider
+import { deepmerge } from '@mui/utils'
+// ** User Theme Options
+import UserThemeOptions from 'src/layouts/UserThemeOptions'
+
+// ** Theme Override Imports
+import palette from './palette'
+import spacing from './spacing'
+import shadows from './shadows'
+import breakpoints from './breakpoints'
+
+const themeOptions = settings => {
+  // ** Vars
+  const { skin, mode, direction, themeColor } = settings
+
+  // ** Create New object before removing user component overrides and typography objects from userThemeOptions
+  const userThemeConfig = Object.assign({}, UserThemeOptions())
+  const userFontFamily = userThemeConfig.typography?.fontFamily
+
+  // ** Remove component overrides and typography objects from userThemeOptions
+  delete userThemeConfig.components
+  delete userThemeConfig.typography
+
+  const mergedThemeConfig = deepmerge(
+    {
+      direction,
+      palette: palette(mode, skin),
+      typography: {
+        fontFamily:
+          userFontFamily ||
+          [
+            'Inter',
+            'sans-serif',
+            '-apple-system',
+            'BlinkMacSystemFont',
+            '"Segoe UI"',
+            'Roboto',
+            '"Helvetica Neue"',
+            'Arial',
+            'sans-serif',
+            '"Apple Color Emoji"',
+            '"Segoe UI Emoji"',
+            '"Segoe UI Symbol"'
+          ].join(',')
+      },
+      shadows: shadows(mode),
+      ...spacing,
+      breakpoints: breakpoints(),
+      shape: {
+        borderRadius: 10
+      },
+
+      mixins: {
+        toolbar: {
+          minHeight: 64
+        }
+      }
+    },
+    userThemeConfig
+  )
+
+  return deepmerge(mergedThemeConfig, {
+    palette: {
+      primary: {
+        ...mergedThemeConfig.palette[themeColor]
+      }
+    }
+  })
+}
+
+export default themeOptions

package/src/@core/theme/breakpoints/index.js

@@ -0,0 +1,11 @@
+const breakpoints = () => ({
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+  }
+})
+
+export default breakpoints