robobyte-front-builder 1.0.0

package/src/@core/components/customizer/index.jsx

@@ -0,0 +1,470 @@
+'use client'
+
+// React Imports
+import { useRef, useState } from 'react'
+
+// Next Imports
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+// MUI Imports
+import Chip from '@mui/material/Chip'
+import Fade from '@mui/material/Fade'
+import Paper from '@mui/material/Paper'
+import Popper from '@mui/material/Popper'
+import { useTheme } from '@mui/material/styles'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Switch from '@mui/material/Switch'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { useDebounce, useMedia } from 'react-use'
+import { HexColorPicker, HexColorInput } from 'react-colorful'
+import PerfectScrollbar from 'react-perfect-scrollbar'
+
+// Icon Imports
+import SkinDefault from 'src/@core/svg/SkinDefault'
+import SkinBordered from 'src/@core/svg/SkinBordered'
+import LayoutVertical from 'src/@core/svg/LayoutVertical'
+import LayoutCollapsed from 'src/@core/svg/LayoutCollapsed'
+import LayoutHorizontal from 'src/@core/svg/LayoutHorizontal'
+import ContentCompact from 'src/@core/svg/ContentCompact'
+import ContentWide from 'src/@core/svg/ContentWide'
+import DirectionLtr from 'src/@core/svg/DirectionLtr'
+import DirectionRtl from 'src/@core/svg/DirectionRtl'
+
+// Config Imports
+import primaryColorConfig from 'src/configs/primaryColorConfig'
+
+// Hook Imports
+import { useSettings } from 'src/@core/hooks/useSettings'
+
+// Style Imports
+import styles from './styles.module.css'
+
+const getLocalePath = (pathName, locale) => {
+  if (!pathName) return '/'
+  const segments = pathName.split('/')
+
+  segments[1] = locale
+
+  return segments.join('/')
+}
+
+const DebouncedColorPicker = props => {
+  // Props
+  const { settings, isColorFromPrimaryConfig, handleChange } = props
+
+  // States
+  const [debouncedColor, setDebouncedColor] = useState(settings.primaryColor ?? primaryColorConfig[0].main)
+
+  // Hooks
+  useDebounce(() => handleChange('primaryColor', debouncedColor), 200, [debouncedColor])
+
+  return (
+    <>
+      <HexColorPicker
+        color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? primaryColorConfig[0].main) : '#eee'}
+        onChange={setDebouncedColor}
+      />
+      <HexColorInput
+        className={styles.colorInput}
+        color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? primaryColorConfig[0].main) : '#eee'}
+        onChange={setDebouncedColor}
+        prefixed
+        placeholder='Type a color'
+      />
+    </>
+  )
+}
+
+const Customizer = ({ breakpoint = 'lg', dir = 'ltr', disableDirection = false }) => {
+  // States
+  const [isOpen, setIsOpen] = useState(false)
+  const [direction, setDirection] = useState(dir)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  // Refs
+  const anchorRef = useRef(null)
+
+  // Hooks
+  const theme = useTheme()
+  const pathName = usePathname()
+  const { settings, updateSettings, resetSettings, isSettingsChanged } = useSettings()
+  const isSystemDark = useMedia('(prefers-color-scheme: dark)', false)
+
+  // Vars
+  let breakpointValue
+
+  switch (breakpoint) {
+    case 'xxl':
+      breakpointValue = '1920px'
+      break
+    case 'xl':
+      breakpointValue = `${theme.breakpoints.values.xl}px`
+      break
+    case 'lg':
+      breakpointValue = `${theme.breakpoints.values.lg}px`
+      break
+    case 'md':
+      breakpointValue = `${theme.breakpoints.values.md}px`
+      break
+    case 'sm':
+      breakpointValue = `${theme.breakpoints.values.sm}px`
+      break
+    case 'xs':
+      breakpointValue = `${theme.breakpoints.values.xs}px`
+      break
+    default:
+      breakpointValue = breakpoint
+  }
+
+  const breakpointReached = useMedia(`(max-width: ${breakpointValue})`, false)
+  const isMobileScreen = useMedia('(max-width: 600px)', false)
+  const isBelowLgScreen = useMedia('(max-width: 1200px)', false)
+  const isColorFromPrimaryConfig = primaryColorConfig.find(item => item.main === settings.primaryColor)
+  const ScrollWrapper = isBelowLgScreen ? 'div' : PerfectScrollbar
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen)
+  }
+
+  // Update Settings
+  const handleChange = (field, value) => {
+    // Update direction state
+    if (field === 'direction') {
+      setDirection(value)
+    } else {
+      // Update settings in cookie
+      updateSettings({ [field]: value })
+    }
+  }
+
+  const handleMenuClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return
+    }
+
+    setIsMenuOpen(false)
+  }
+
+  return (
+    !breakpointReached && (
+      <div
+        className={classnames('customizer', styles.customizer, {
+          [styles.show]: isOpen,
+          [styles.smallScreen]: isMobileScreen
+        })}
+      >
+        <div
+          className={classnames('customizer-toggler flex items-center justify-center cursor-pointer', styles.toggler)}
+          onClick={handleToggle}
+        >
+          <i className='ri-settings-5-line text-[22px]' />
+        </div>
+        <div className={classnames('customizer-header flex items-center justify-between', styles.header)}>
+          <div className='flex flex-col gap-2'>
+            <h4 className={styles.customizerTitle}>Theme Customizer</h4>
+            <p className={styles.customizerSubtitle}>Customize & Preview in Real Time</p>
+          </div>
+          <div className='flex gap-4'>
+            <div onClick={resetSettings} className='relative flex cursor-pointer'>
+              <i className='ri-refresh-line text-actionActive' />
+              <div className={classnames(styles.dotStyles, { [styles.show]: isSettingsChanged })} />
+            </div>
+            <i className='ri-close-line text-actionActive cursor-pointer' onClick={handleToggle} />
+          </div>
+        </div>
+        <ScrollWrapper
+          {...(isBelowLgScreen
+            ? { className: 'bs-full overflow-y-auto overflow-x-hidden' }
+            : { options: { wheelPropagation: false, suppressScrollX: true } })}
+        >
+          <div className={classnames('customizer-body flex flex-col', styles.customizerBody)}>
+            <div className='theming-section flex flex-col gap-6'>
+              <Chip variant='tonal' label='Theming' size='small' color='primary' className='self-start rounded-sm' />
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium'>Primary Color</p>
+                <div className='flex items-center justify-between'>
+                  {primaryColorConfig.map(item => (
+                    <div
+                      key={item.main}
+                      className={classnames(styles.primaryColorWrapper, {
+                        [styles.active]: settings.primaryColor === item.main
+                      })}
+                      onClick={() => handleChange('primaryColor', item.main)}
+                    >
+                      <div className={styles.primaryColor} style={{ backgroundColor: item.main }} />
+                    </div>
+                  ))}
+                  <div
+                    ref={anchorRef}
+                    className={classnames(styles.primaryColorWrapper, {
+                      [styles.active]: !isColorFromPrimaryConfig
+                    })}
+                    onClick={() => setIsMenuOpen(prev => !prev)}
+                  >
+                    <div
+                      className={classnames(styles.primaryColor, 'flex items-center justify-center')}
+                      style={{
+                        backgroundColor: !isColorFromPrimaryConfig
+                          ? settings.primaryColor
+                          : 'var(--mui-palette-action-selected)',
+                        color: isColorFromPrimaryConfig
+                          ? 'var(--mui-palette-text-primary)'
+                          : 'var(--mui-palette-primary-contrastText)'
+                      }}
+                    >
+                      <i className='ri-palette-line text-xl'></i>
+                    </div>
+                  </div>
+                  <Popper
+                    transition
+                    open={isMenuOpen}
+                    disablePortal
+                    anchorEl={anchorRef.current}
+                    placement='bottom-end'
+                    className='z-[1]'
+                  >
+                    {({ TransitionProps }) => (
+                      <Fade {...TransitionProps} style={{ transformOrigin: 'right top' }}>
+                        <Paper elevation={6} className={styles.colorPopup}>
+                          <ClickAwayListener onClickAway={handleMenuClose}>
+                            <div>
+                              <DebouncedColorPicker
+                                settings={settings}
+                                isColorFromPrimaryConfig={isColorFromPrimaryConfig}
+                                handleChange={handleChange}
+                              />
+                            </div>
+                          </ClickAwayListener>
+                        </Paper>
+                      </Fade>
+                    )}
+                  </Popper>
+                </div>
+              </div>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium'>Mode</p>
+                <div className='flex items-center justify-between'>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, styles.modeWrapper, {
+                        [styles.active]: settings.mode === 'light'
+                      })}
+                      onClick={() => handleChange('mode', 'light')}
+                    >
+                      <i className='ri-sun-line text-[30px]' />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('mode', 'light')}>
+                      Light
+                    </p>
+                  </div>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, styles.modeWrapper, {
+                        [styles.active]: settings.mode === 'dark'
+                      })}
+                      onClick={() => handleChange('mode', 'dark')}
+                    >
+                      <i className='ri-moon-clear-line text-[30px]' />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('mode', 'dark')}>
+                      Dark
+                    </p>
+                  </div>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, styles.modeWrapper, {
+                        [styles.active]: settings.mode === 'system'
+                      })}
+                      onClick={() => handleChange('mode', 'system')}
+                    >
+                      <i className='ri-computer-line text-[30px]' />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('mode', 'system')}>
+                      System
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium'>Skin</p>
+                <div className='flex items-center gap-4'>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, { [styles.active]: settings.skin === 'default' })}
+                      onClick={() => handleChange('skin', 'default')}
+                    >
+                      <SkinDefault />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('skin', 'default')}>
+                      Default
+                    </p>
+                  </div>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, { [styles.active]: settings.skin === 'bordered' })}
+                      onClick={() => handleChange('skin', 'bordered')}
+                    >
+                      <SkinBordered />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('skin', 'bordered')}>
+                      Bordered
+                    </p>
+                  </div>
+                </div>
+              </div>
+              {settings.mode === 'dark' ||
+              (settings.mode === 'system' && isSystemDark) ||
+              settings.layout === 'horizontal' ? null : (
+                <div className='flex items-center justify-between'>
+                  <label className='font-medium cursor-pointer' htmlFor='customizer-semi-dark'>
+                    Semi Dark
+                  </label>
+                  <Switch
+                    id='customizer-semi-dark'
+                    checked={settings.semiDark === true}
+                    onChange={() => handleChange('semiDark', !settings.semiDark)}
+                  />
+                </div>
+              )}
+            </div>
+            <hr className={styles.hr} />
+            <div className='layout-section flex flex-col gap-6'>
+              <Chip variant='tonal' label='Layout' size='small' color='primary' className='self-start rounded-sm' />
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium'>Layouts</p>
+                <div className='flex items-center justify-between'>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, { [styles.active]: settings.layout === 'vertical' })}
+                      onClick={() => handleChange('layout', 'vertical')}
+                    >
+                      <LayoutVertical />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('layout', 'vertical')}>
+                      Vertical
+                    </p>
+                  </div>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, { [styles.active]: settings.layout === 'collapsed' })}
+                      onClick={() => handleChange('layout', 'collapsed')}
+                    >
+                      <LayoutCollapsed />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('layout', 'collapsed')}>
+                      Collapsed
+                    </p>
+                  </div>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, { [styles.active]: settings.layout === 'horizontal' })}
+                      onClick={() => handleChange('layout', 'horizontal')}
+                    >
+                      <LayoutHorizontal />
+                    </div>
+                    <p className={styles.itemLabel} onClick={() => handleChange('layout', 'horizontal')}>
+                      Horizontal
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium'>Content</p>
+                <div className='flex items-center gap-4'>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, {
+                        [styles.active]: settings.contentWidth === 'compact'
+                      })}
+                      onClick={() =>
+                        updateSettings({
+                          navbarContentWidth: 'compact',
+                          contentWidth: 'compact',
+                          footerContentWidth: 'compact'
+                        })
+                      }
+                    >
+                      <ContentCompact />
+                    </div>
+                    <p
+                      className={styles.itemLabel}
+                      onClick={() =>
+                        updateSettings({
+                          navbarContentWidth: 'compact',
+                          contentWidth: 'compact',
+                          footerContentWidth: 'compact'
+                        })
+                      }
+                    >
+                      Compact
+                    </p>
+                  </div>
+                  <div className='flex flex-col items-start gap-0.5'>
+                    <div
+                      className={classnames(styles.itemWrapper, { [styles.active]: settings.contentWidth === 'wide' })}
+                      onClick={() =>
+                        updateSettings({ navbarContentWidth: 'wide', contentWidth: 'wide', footerContentWidth: 'wide' })
+                      }
+                    >
+                      <ContentWide />
+                    </div>
+                    <p
+                      className={styles.itemLabel}
+                      onClick={() =>
+                        updateSettings({ navbarContentWidth: 'wide', contentWidth: 'wide', footerContentWidth: 'wide' })
+                      }
+                    >
+                      Wide
+                    </p>
+                  </div>
+                </div>
+              </div>
+              {!disableDirection && (
+                <div className='flex flex-col gap-2'>
+                  <p className='font-medium'>Direction</p>
+                  <div className='flex items-center gap-4'>
+                    <Link href={getLocalePath(pathName, 'en')}>
+                      <div className='flex flex-col items-start gap-0.5'>
+                        <div
+                          className={classnames(styles.itemWrapper, {
+                            [styles.active]: direction === 'ltr'
+                          })}
+                        >
+                          <DirectionLtr />
+                        </div>
+                        <p className={styles.itemLabel}>
+                          Left to Right <br />
+                          (English)
+                        </p>
+                      </div>
+                    </Link>
+                    <Link href={getLocalePath(pathName, 'ar')}>
+                      <div className='flex flex-col items-start gap-0.5'>
+                        <div
+                          className={classnames(styles.itemWrapper, {
+                            [styles.active]: direction === 'rtl'
+                          })}
+                        >
+                          <DirectionRtl />
+                        </div>
+                        <p className={styles.itemLabel}>
+                          Right to Left <br />
+                          (Arabic)
+                        </p>
+                      </div>
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </ScrollWrapper>
+      </div>
+    )
+  )
+}
+
+export default Customizer

package/src/@core/components/customizer/styles.module.css

@@ -0,0 +1,169 @@
+.customizer {
+  block-size: 100%;
+  inline-size: 400px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--mui-palette-background-paper);
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-end: -400px;
+  box-shadow: none;
+  z-index: var(--customizer-z-index);
+  transition-property: inset-inline-end, box-shadow;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in-out;
+
+  &.show {
+    inset-inline-end: 0 !important;
+    box-shadow: var(--mui-customShadows-xl);
+  }
+
+  &.smallScreen {
+    inline-size: 375px;
+    inset-inline-end: -375px;
+
+    &.show .toggler {
+      display: none;
+    }
+
+    .header,
+    .customizerBody {
+      padding-inline: 10px;
+    }
+  }
+}
+
+.toggler {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: absolute;
+  inset-block-start: 20%;
+  inset-inline-end: 100%;
+  transform: translateY(-20%);
+  padding: 8px;
+  background-color: var(--primary-color);
+  color: var(--mui-palette-primary-contrastText);
+  border-start-start-radius: 50px;
+  border-end-start-radius: 50px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 16px;
+  padding-inline: 24px;
+  border-block-end: 1px solid var(--border-color);
+}
+
+.customizerTitle {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.actionActiveColor {
+  color: var(--mui-palette-action-active);
+}
+
+.dotStyles {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: -6px;
+  block-size: 6px;
+  inline-size: 6px;
+  border-radius: 50%;
+  background-color: var(--mui-palette-error-main);
+  transform: scale(0);
+  transition-property: transform;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in-out;
+
+  &.show {
+    transform: scale(1);
+  }
+}
+
+.customizerBody {
+  padding: 20px;
+  gap: 24px;
+}
+
+.itemWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mui-shape-customBorderRadius-lg);
+  outline: 1px solid transparent;
+  min-inline-size: 106px;
+  min-block-size: 68px;
+  cursor: pointer;
+
+  &.active {
+    border-color: var(--primary-color);
+    outline: 1px solid var(--primary-color);
+  }
+}
+
+.itemLabel {
+  font-size: 13px;
+  line-height: 1.538462;
+  cursor: pointer;
+  color: var(--mui-palette-text-secondary);
+}
+
+.primaryColorWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mui-shape-customBorderRadius-lg);
+  outline: 1px solid transparent;
+  block-size: 50px;
+  inline-size: 50px;
+  padding: 8px;
+  cursor: pointer;
+  &.active {
+    border-color: var(--primary-color);
+    outline: 1px solid var(--primary-color);
+  }
+}
+
+.primaryColor {
+  block-size: 100%;
+  inline-size: 100%;
+  border-radius: var(--mui-shape-customBorderRadius-lg);
+}
+
+.modeWrapper {
+  min-block-size: 54px;
+
+  &.active {
+    color: var(--primary-color);
+  }
+}
+
+.hr {
+  border: 0;
+  border-block-start: 1px solid var(--border-color);
+}
+
+.colorPopup {
+  padding: 16px;
+  margin-block-start: 1px;
+
+  & .colorInput {
+    inline-size: 100%;
+    margin-block-start: 16px;
+    border-radius: var(--mui-shape-customBorderRadius-lg);
+    padding-block: 8px;
+    padding-inline: 10px;
+    border: 1px solid var(--mui-palette-divider);
+    font-size: 14px;
+  }
+}

package/src/@core/components/mui/Avatar.jsx

@@ -0,0 +1,41 @@
+'use client'
+
+// React Imports
+import { forwardRef } from 'react'
+
+// MUI Imports
+import MuiAvatar from '@mui/material/Avatar'
+import { lighten, styled } from '@mui/material/styles'
+
+const Avatar = styled(MuiAvatar)(({ skin, color, size, theme }) => {
+  return {
+    ...(color &&
+      skin === 'light' && {
+        backgroundColor: `var(--mui-palette-${color}-lightOpacity)`,
+        color: `var(--mui-palette-${color}-main)`
+      }),
+    ...(color &&
+      skin === 'light-static' && {
+        backgroundColor: lighten(theme.palette[color].main, 0.84),
+        color: `var(--mui-palette-${color}-main)`
+      }),
+    ...(color &&
+      skin === 'filled' && {
+        backgroundColor: `var(--mui-palette-${color}-main)`,
+        color: `var(--mui-palette-${color}-contrastText)`
+      }),
+    ...(size && {
+      height: size,
+      width: size
+    })
+  }
+})
+
+const CustomAvatar = forwardRef((props, ref) => {
+  // Props
+  const { color, skin = 'filled', ...rest } = props
+
+  return <Avatar color={color} skin={skin} ref={ref} {...rest} />
+})
+
+export default CustomAvatar

package/src/@core/components/mui/Badge.jsx

@@ -0,0 +1,20 @@
+'use client'
+
+// MUI Imports
+import MuiBadge from '@mui/material/Badge'
+import { styled } from '@mui/material/styles'
+
+const Badge = styled(MuiBadge)(({ tonal, color }) => {
+  return {
+    ...(tonal === 'true' && {
+      '& .MuiBadge-badge.MuiBadge-standard': {
+        color: `var(--mui-palette-${color}-main)`,
+        backgroundColor: `var(--mui-palette-${color}-lightOpacity)`
+      }
+    })
+  }
+})
+
+const CustomBadge = props => <Badge {...props} />
+
+export default CustomBadge