goobs-frontend 0.9.30 → 0.9.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.30",
+  "version": "0.9.31",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",

package/src/components/Accordion/index.tsx

@@ -97,7 +97,7 @@ const expandGlyphGlow = keyframes`
  * <Accordion
  *   summary="Ancient Knowledge"
  *   details="Sacred wisdom revealed..."
- *   sacredTheme
+ *   sacredtheme
  * />
  * ```
  *
@@ -182,7 +182,7 @@ export interface AccordionProps {
   /** Custom styles applied to the accordion */
   style?: React.CSSProperties
   /** Enable Egyptian/Sacred theming */
-  sacredTheme?: boolean
+  sacredtheme?: boolean
 }
 
 // Enhanced version of MuiAccordion with stricter content unmounting
@@ -472,12 +472,12 @@ const SacredGlyphDecoration = styled('div')({
 })
 
 // Sacred expand icon component
-const SacredExpandIcon = ({ sacredTheme }: { sacredTheme?: boolean }) => (
+const SacredExpandIcon = ({ sacredtheme }: { sacredtheme?: boolean }) => (
   <ExpandMore
     sx={{
-      color: sacredTheme ? '#FFD700' : black.main,
+      color: sacredtheme ? '#FFD700' : black.main,
       transition: 'all 0.3s ease',
-      ...(sacredTheme && {
+      ...(sacredtheme && {
         filter: 'drop-shadow(0 0 4px rgba(255, 215, 0, 0.5))',
         '&:hover': {
           filter: 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.8))',
@@ -506,7 +506,7 @@ function Accordion({
   defaultExpanded = false,
   onChange,
   disabled = false,
-  sacredTheme = false,
+  sacredtheme = false,
 }: AccordionProps) {
   // Check if component is in controlled mode (expanded prop is provided)
   const isControlled = controlledExpanded !== undefined
@@ -563,14 +563,14 @@ function Accordion({
         expanded={false}
         onChange={handleToggle}
         className="controlled-accordion-collapsed"
-        sacredtheme={sacredTheme}
+        sacredtheme={sacredtheme}
       >
         <StyledAccordionSummary
-          expandIcon={<SacredExpandIcon sacredTheme={sacredTheme} />}
+          expandIcon={<SacredExpandIcon sacredtheme={sacredtheme} />}
           aria-controls="accordion-content"
           id="accordion-header"
           data-testid="accordion-summary-controlled"
-          sacredtheme={sacredTheme}
+          sacredtheme={sacredtheme}
         >
           {summary}
         </StyledAccordionSummary>
@@ -587,7 +587,7 @@ function Accordion({
         style={style}
         expanded={false} // Always collapsed when disabled
         className="disabled-accordion"
-        sacredtheme={sacredTheme}
+        sacredtheme={sacredtheme}
       >
         <DisabledSummaryWrapper
           onClick={handleDisabledClick}
@@ -597,12 +597,12 @@ function Accordion({
             expandIcon={
               <ExpandMore
                 sx={{
-                  color: sacredTheme ? alpha('#FFD700', 0.3) : '#999',
+                  color: sacredtheme ? alpha('#FFD700', 0.3) : '#999',
                 }}
               />
             }
             aria-disabled="true"
-            sacredtheme={sacredTheme}
+            sacredtheme={sacredtheme}
           >
             {summary}
           </StyledAccordionSummary>
@@ -620,20 +620,20 @@ function Accordion({
       expanded={expanded}
       onChange={handleToggle}
       className={`accordion-${expanded ? 'expanded' : 'collapsed'}`}
-      sacredtheme={sacredTheme}
+      sacredtheme={sacredtheme}
     >
       <StyledAccordionSummary
-        expandIcon={<SacredExpandIcon sacredTheme={sacredTheme} />}
+        expandIcon={<SacredExpandIcon sacredtheme={sacredtheme} />}
         aria-controls="accordion-content"
         id="accordion-header"
         data-testid="accordion-summary"
-        sacredtheme={sacredTheme}
+        sacredtheme={sacredtheme}
       >
         {summary}
       </StyledAccordionSummary>
       {expanded && (
-        <StyledAccordionDetails sacredtheme={sacredTheme}>
-          {sacredTheme ? (
+        <StyledAccordionDetails sacredtheme={sacredtheme}>
+          {sacredtheme ? (
             <SacredContentWrapper>
               {details}
               <SacredGlyphDecoration>

package/src/components/Button/index.tsx

@@ -100,7 +100,7 @@ export interface CustomButtonProps extends ButtonProps {
   fontlocation?: 'left' | 'center' | 'right'
 
   /** Enable Egyptian/Sacred theming */
-  sacredTheme?: boolean
+  sacredtheme?: boolean
 }
 
 function CustomButton({
@@ -120,7 +120,7 @@ function CustomButton({
   fontlocation = 'center',
   disabled,
   style = {},
-  sacredTheme = false,
+  sacredtheme = false,
   ...restProps
 }: CustomButtonProps) {
   // Merge MUI's "disabled" with our "disableButton"
@@ -135,7 +135,7 @@ function CustomButton({
   const IconComponent = icon
     ? React.cloneElement(icon, {
         sx: {
-          color: sacredTheme
+          color: sacredtheme
             ? isReallyDisabled
               ? alpha('#FFD700', 0.3)
               : iconcolor || '#FFD700'
@@ -144,7 +144,7 @@ function CustomButton({
           minWidth: iconsize || '20px',
           minHeight: iconsize || '20px',
           margin: 0,
-          ...(sacredTheme &&
+          ...(sacredtheme &&
             !isReallyDisabled && {
               animation: `${sacredIconGlow} 2s ease-in-out infinite`,
             }),
@@ -193,7 +193,7 @@ function CustomButton({
   }
 
   // Sacred theme styles
-  if (sacredTheme && !isReallyDisabled) {
+  if (sacredtheme && !isReallyDisabled) {
     buttonStyle.backgroundColor =
       backgroundcolor === 'none'
         ? 'transparent'
@@ -219,7 +219,7 @@ function CustomButton({
 
   // If disabled, force styling
   if (isReallyDisabled) {
-    if (sacredTheme) {
+    if (sacredtheme) {
       buttonStyle.backgroundColor = alpha('#000000', 0.6)
       buttonStyle.border = `2px solid ${alpha('#FFD700', 0.2)}`
       buttonStyle.color = alpha('#FFD700', 0.3)
@@ -231,9 +231,9 @@ function CustomButton({
     buttonStyle.opacity = 1
     buttonStyle.cursor = 'not-allowed'
     buttonStyle.pointerEvents = 'auto'
-  } else if (!sacredTheme && backgroundcolor && backgroundcolor !== 'none') {
+  } else if (!sacredtheme && backgroundcolor && backgroundcolor !== 'none') {
     buttonStyle.backgroundColor = backgroundcolor
-  } else if (!sacredTheme && backgroundcolor === 'none') {
+  } else if (!sacredtheme && backgroundcolor === 'none') {
     buttonStyle.backgroundColor = 'transparent'
   }
 
@@ -280,7 +280,7 @@ function CustomButton({
         style={buttonStyle}
         data-testid={isReallyDisabled ? 'disabled-button' : 'button'}
         sx={{
-          ...(sacredTheme &&
+          ...(sacredtheme &&
             !isReallyDisabled && {
               '&::before': {
                 content: '""',
@@ -326,7 +326,7 @@ function CustomButton({
         }}
       >
         {/* Sacred floating glyph on the right */}
-        {sacredTheme && !isReallyDisabled && (
+        {sacredtheme && !isReallyDisabled && (
           <Box
             className="sacred-glyph-right"
             sx={{
@@ -354,19 +354,19 @@ function CustomButton({
 
           {text && (
             <Typography
-              fontvariant={sacredTheme ? undefined : fontvariant}
+              fontvariant={sacredtheme ? undefined : fontvariant}
               fontcolor={
                 isReallyDisabled
-                  ? sacredTheme
+                  ? sacredtheme
                     ? alpha('#FFD700', 0.3)
                     : 'grey'
-                  : sacredTheme
+                  : sacredtheme
                     ? '#FFD700'
                     : fontcolor || 'white'
               }
               text={text}
               sx={
-                sacredTheme
+                sacredtheme
                   ? {
                       fontFamily: '"Cinzel", serif',
                       fontWeight: 600,

package/src/components/Card/index.tsx

@@ -40,7 +40,7 @@ export interface CardProps {
   /** Width of the card */
   width?: string | number
   /** Enable Egyptian/Sacred theming */
-  sacredTheme?: boolean
+  sacredtheme?: boolean
 
   // Default card specific props
   /** Whether to show an underline for the title */
@@ -188,7 +188,7 @@ const Card: React.FC<CardProps> = ({ variant = 'default', ...props }) => {
               ? `${props.height}px`
               : props.height
           }
-          sacredTheme={props.sacredTheme}
+          sacredtheme={props.sacredtheme}
           draggable={props.draggable}
           onDragStart={props.onDragStart}
           onDragOver={props.onDragOver}
@@ -212,7 +212,7 @@ const Card: React.FC<CardProps> = ({ variant = 'default', ...props }) => {
           releaseDate={props.releaseDate}
           onContact={props.onContact}
           createdBy={props.createdBy}
-          sacredTheme={props.sacredTheme}
+          sacredtheme={props.sacredtheme}
           height={
             typeof props.height === 'number'
               ? `${props.height}px`
@@ -238,7 +238,7 @@ const Card: React.FC<CardProps> = ({ variant = 'default', ...props }) => {
           support={props.support}
           price={props.price}
           quantity={props.quantity}
-          sacredTheme={props.sacredTheme}
+          sacredtheme={props.sacredtheme}
           onRemove={props.onRemove}
         />
       )
@@ -257,7 +257,7 @@ const Card: React.FC<CardProps> = ({ variant = 'default', ...props }) => {
               ? `${props.height}px`
               : props.height
           }
-          sacredTheme={props.sacredTheme}
+          sacredtheme={props.sacredtheme}
         />
       )
 
@@ -275,7 +275,7 @@ const Card: React.FC<CardProps> = ({ variant = 'default', ...props }) => {
           taxText={props.taxText}
           discountText={props.discountText}
           onProceed={props.onProceed}
-          sacredTheme={props.sacredTheme}
+          sacredtheme={props.sacredtheme}
         />
       )
 
@@ -298,7 +298,7 @@ const Card: React.FC<CardProps> = ({ variant = 'default', ...props }) => {
           total={props.totalPrice}
           proceedText={props.proceedText}
           onProceed={props.onProceed}
-          sacredTheme={props.sacredTheme}
+          sacredtheme={props.sacredtheme}
         />
       )
 

package/src/components/Card/variants/detailedpricingsummary/index.tsx

@@ -48,7 +48,7 @@ interface DetailedPricingSummaryProps {
   /** Function to call when the proceed button is clicked */
   onProceed?: () => void
   /** Enable Egyptian/Sacred theming */
-  sacredTheme?: boolean
+  sacredtheme?: boolean
 }
 
 /**
@@ -65,7 +65,7 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
   total = '$180.00',
   proceedText = 'Proceed to checkout',
   onProceed,
-  sacredTheme = false,
+  sacredtheme = false,
 }) => {
   return (
     <Paper
@@ -76,14 +76,14 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         flexDirection: 'column',
         justifyContent: 'flex-start',
         alignItems: 'stretch',
-        border: sacredTheme
+        border: sacredtheme
           ? `1px solid ${alpha('#FFD700', 0.3)}`
           : '1px solid #e8e8e8',
         minHeight: height,
         padding: '16px',
-        backgroundColor: sacredTheme ? '#0a0a0a' : 'white',
+        backgroundColor: sacredtheme ? '#0a0a0a' : 'white',
         overflow: 'hidden',
-        ...(sacredTheme && {
+        ...(sacredtheme && {
           backgroundImage: `
             linear-gradient(rgba(255, 215, 0, 0.02), rgba(255, 215, 0, 0.02)),
             radial-gradient(circle at bottom left, rgba(255, 215, 0, 0.05) 0%, transparent 50%)
@@ -105,10 +105,10 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         {/* Product section */}
         <Typography
           text="Product"
-          fontcolor={sacredTheme ? '#FFD700' : 'black'}
+          fontcolor={sacredtheme ? '#FFD700' : 'black'}
           fontvariant="merriparagraph"
           sx={
-            sacredTheme
+            sacredtheme
               ? {
                   fontFamily: '"Cinzel", serif',
                   fontWeight: 600,
@@ -120,7 +120,7 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         />
         <Typography
           text={product}
-          fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+          fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
           fontvariant="merriparagraph"
           sx={{ marginTop: '8px' }}
         />
@@ -136,12 +136,12 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
           >
             <Typography
               text="Vendor:"
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.9) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.9) : 'black'}
               fontvariant="merriparagraph"
             />
             <Typography
               text={vendor}
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
               fontvariant="merriparagraph"
             />
           </Box>
@@ -154,10 +154,10 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
           >
             <Typography
               text={vendorPrice}
-              fontcolor={sacredTheme ? '#FFD700' : 'black'}
+              fontcolor={sacredtheme ? '#FFD700' : 'black'}
               fontvariant="merriparagraph"
               sx={
-                sacredTheme
+                sacredtheme
                   ? {
                       fontWeight: 600,
                       textShadow: '0 0 6px rgba(255, 215, 0, 0.4)',
@@ -172,12 +172,12 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         <Box sx={{ marginTop: '16px' }}>
           <Typography
             text="Subtotal"
-            fontcolor={sacredTheme ? alpha('#FFD700', 0.9) : 'black'}
+            fontcolor={sacredtheme ? alpha('#FFD700', 0.9) : 'black'}
             fontvariant="merriparagraph"
           />
           <Typography
             text={subtotal}
-            fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+            fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
             fontvariant="merriparagraph"
             align="right"
           />
@@ -187,12 +187,12 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         <Box sx={{ marginTop: '8px' }}>
           <Typography
             text="VAT"
-            fontcolor={sacredTheme ? alpha('#FFD700', 0.9) : 'black'}
+            fontcolor={sacredtheme ? alpha('#FFD700', 0.9) : 'black'}
             fontvariant="merriparagraph"
           />
           <Typography
             text={vat}
-            fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+            fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
             fontvariant="merriparagraph"
             align="right"
           />
@@ -201,12 +201,12 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         {/* Total section */}
         <Box
           sx={{
-            borderTop: sacredTheme
+            borderTop: sacredtheme
               ? `1px solid ${alpha('#FFD700', 0.3)}`
               : '1px solid #e8e8e8',
             marginTop: '8px',
             paddingTop: '8px',
-            ...(sacredTheme && {
+            ...(sacredtheme && {
               background: `linear-gradient(to right, ${alpha('#FFD700', 0.05)}, transparent)`,
             }),
           }}
@@ -220,10 +220,10 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
           >
             <Typography
               text="Total"
-              fontcolor={sacredTheme ? '#FFD700' : 'black'}
+              fontcolor={sacredtheme ? '#FFD700' : 'black'}
               fontvariant="merrih5"
               sx={
-                sacredTheme
+                sacredtheme
                   ? {
                       fontFamily: '"Cinzel", serif',
                       fontWeight: 700,
@@ -234,10 +234,10 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
             />
             <Typography
               text={total}
-              fontcolor={sacredTheme ? '#FFD700' : 'black'}
+              fontcolor={sacredtheme ? '#FFD700' : 'black'}
               fontvariant="merrih5"
               sx={
-                sacredTheme
+                sacredtheme
                   ? {
                       fontFamily: '"Cinzel", serif',
                       fontWeight: 700,
@@ -255,12 +255,12 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         <CustomButton
           text={proceedText}
           variant="contained"
-          backgroundcolor={sacredTheme ? alpha('#000000', 0.9) : 'black'}
-          fontcolor={sacredTheme ? '#FFD700' : 'white'}
+          backgroundcolor={sacredtheme ? alpha('#000000', 0.9) : 'black'}
+          fontcolor={sacredtheme ? '#FFD700' : 'white'}
           fontvariant="merriparagraph"
           onClick={onProceed}
           width="100%"
-          sacredTheme={sacredTheme}
+          sacredtheme={sacredtheme}
         />
       </Box>
     </Paper>

package/src/components/Card/variants/inventory/index.tsx

@@ -52,7 +52,7 @@ interface InventoryCardProps {
   /** Quantity of the item */
   quantity?: number
   /** Enable Egyptian/Sacred theming */
-  sacredTheme?: boolean
+  sacredtheme?: boolean
   /** Callback for remove action */
   onRemove?: () => void
 }
@@ -72,7 +72,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
   support,
   price,
   quantity,
-  sacredTheme = false,
+  sacredtheme = false,
   onRemove,
 }) => {
   return (
@@ -84,13 +84,13 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
         flexDirection: 'row',
         justifyContent: 'flex-start',
         alignItems: 'stretch',
-        border: sacredTheme
+        border: sacredtheme
           ? `1px solid ${alpha('#FFD700', 0.3)}`
           : '1px solid #e8e8e8',
         minHeight: height,
-        backgroundColor: sacredTheme ? '#0a0a0a' : 'white',
+        backgroundColor: sacredtheme ? '#0a0a0a' : 'white',
         overflow: 'hidden',
-        ...(sacredTheme && {
+        ...(sacredtheme && {
           animation: `${sacredBorderGlow} 4s ease-in-out infinite`,
           '&::before': {
             content: '""',
@@ -120,7 +120,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           flexShrink: 0,
           position: 'relative',
           zIndex: 2,
-          ...(sacredTheme && {
+          ...(sacredtheme && {
             '&::after': {
               content: '""',
               position: 'absolute',
@@ -146,7 +146,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
         }}
       >
         {/* Sacred decorative glyph */}
-        {sacredTheme && (
+        {sacredtheme && (
           <Box
             sx={{
               position: 'absolute',
@@ -172,10 +172,10 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           {title && (
             <Typography
               text={title}
-              fontcolor={sacredTheme ? '#FFD700' : 'black'}
+              fontcolor={sacredtheme ? '#FFD700' : 'black'}
               fontvariant="merrih5"
               sx={
-                sacredTheme
+                sacredtheme
                   ? {
                       fontFamily: '"Cinzel", serif',
                       fontWeight: 600,
@@ -195,10 +195,10 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           >
             <Typography
               text={`${quantity} x ${price}`}
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.9) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.9) : 'black'}
               fontvariant="merriparagraph"
               sx={
-                sacredTheme
+                sacredtheme
                   ? {
                       fontWeight: 600,
                       textShadow: '0 0 6px rgba(255, 215, 0, 0.4)',
@@ -215,7 +215,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           <Box sx={{ marginTop: '8px' }}>
             <Typography
               text={`License: ${license || ''}`}
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
               fontvariant="merriparagraph"
             />
           </Box>
@@ -223,7 +223,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           <Box sx={{ marginTop: '4px' }}>
             <Typography
               text={`Development use: ${developmentUse || ''}`}
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
               fontvariant="merriparagraph"
             />
           </Box>
@@ -231,7 +231,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           <Box sx={{ marginTop: '4px' }}>
             <Typography
               text={`Production use: ${productionUse || ''}`}
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
               fontvariant="merriparagraph"
             />
           </Box>
@@ -239,7 +239,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           <Box sx={{ marginTop: '4px' }}>
             <Typography
               text={`Updates: ${updates || ''}`}
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
               fontvariant="merriparagraph"
             />
           </Box>
@@ -247,7 +247,7 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           <Box sx={{ marginTop: '4px' }}>
             <Typography
               text={`Support: ${support || ''}`}
-              fontcolor={sacredTheme ? alpha('#FFD700', 0.8) : 'black'}
+              fontcolor={sacredtheme ? alpha('#FFD700', 0.8) : 'black'}
               fontvariant="merriparagraph"
             />
           </Box>
@@ -265,10 +265,10 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
           >
             <Typography
               text="Remove"
-              fontcolor={sacredTheme ? '#FFD700' : 'black'}
+              fontcolor={sacredtheme ? '#FFD700' : 'black'}
               fontvariant="merriparagraph"
               sx={
-                sacredTheme
+                sacredtheme
                   ? {
                       textDecoration: 'underline',
                       '&:hover': {