goobs-frontend 0.9.27 → 0.9.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.27",
+  "version": "0.9.29",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "@mui/icons-material": "^7",
     "@mui/material": "^7",
     "@storybook/addon-links": "^9",
+    "@storybook/test": "^8.6.14",
     "@types/lodash": "^4",
     "formik": "^2",
     "highlight.js": "^11",
@@ -35,9 +36,8 @@
     "lodash": "^4",
     "next": "15",
     "otplib": "^12",
-    "react-datepicker": "^8",
     "react-qr-code": "^2",
-    "slate": "^0.114",
+    "slate": "^0.115",
     "slate-dom": "^0.114",
     "slate-history": "^0.113",
     "slate-react": "^0.114",
@@ -48,13 +48,9 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4",
     "@next/eslint-plugin-next": "^15",
-    "@storybook/addon-essentials": "^8",
-    "@storybook/addon-interactions": "^8",
     "@storybook/addon-onboarding": "^9",
-    "@storybook/blocks": "^8",
     "@storybook/nextjs": "^9",
     "@storybook/react": "^9",
-    "@storybook/test": "^8",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8",

package/src/components/Accordion/index.tsx

@@ -3,7 +3,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
-import { styled } from '@mui/material/styles'
+import { styled, keyframes, alpha } from '@mui/material/styles'
 import MuiAccordion, {
   AccordionProps as MuiAccordionProps,
 } from '@mui/material/Accordion'
@@ -12,6 +12,65 @@ import MuiAccordionDetails from '@mui/material/AccordionDetails'
 import { ExpandMore } from '@mui/icons-material'
 import { black } from '../../styles/palette'
 
+// --------------------------------------------------------------------------
+// SACRED THEMING CONSTANTS AND ANIMATIONS
+// --------------------------------------------------------------------------
+
+const SACRED_GLYPHS = [
+  '𓁟',
+  '𓂀',
+  '𓃀',
+  '𓄿',
+  '𓊖',
+  '𓊗',
+  '𓋴',
+  '𓏏',
+  '𓊨',
+  '𓁦',
+  '𓅓',
+  '𓆄',
+  '𓇳',
+  '𓈖',
+  '𓊹',
+  '𓊺',
+  '𓊻',
+  '𓋹',
+  '𓌻',
+  '𓍿',
+  '𓅨',
+  '𓂋',
+  '𓏭',
+  '𓊵',
+]
+
+const sacredGlowPulse = keyframes`
+  0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3); }
+  50% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5); }
+  100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3); }
+`
+
+const sacredFloat = keyframes`
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-3px); }
+  100% { transform: translateY(0px); }
+`
+
+const sacredShimmer = keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`
+
+const rotateGlyph = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`
+
+const expandGlyphGlow = keyframes`
+  0% { opacity: 0.3; filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4)); }
+  50% { opacity: 0.8; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)); }
+  100% { opacity: 0.3; filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4)); }
+`
+
 /**
  * Accordion component that works across all platforms
  *
@@ -23,6 +82,7 @@ import { black } from '../../styles/palette'
  * - Customizable styles
  * - Can be nested inside other accordions
  * - Handles large content gracefully
+ * - Optional Egyptian/Sacred theming
  *
  * Basic usage:
  * ```tsx
@@ -32,6 +92,15 @@ import { black } from '../../styles/palette'
  * />
  * ```
  *
+ * With sacred theme:
+ * ```tsx
+ * <Accordion
+ *   summary="Ancient Knowledge"
+ *   details="Sacred wisdom revealed..."
+ *   sacredTheme
+ * />
+ * ```
+ *
  * With default expanded state:
  * ```tsx
  * <Accordion
@@ -112,6 +181,8 @@ export interface AccordionProps {
   disabled?: boolean
   /** Custom styles applied to the accordion */
   style?: React.CSSProperties
+  /** Enable Egyptian/Sacred theming */
+  sacredTheme?: boolean
 }
 
 // Enhanced version of MuiAccordion with stricter content unmounting
@@ -133,43 +204,92 @@ const StrictAccordion = React.forwardRef<HTMLDivElement, MuiAccordionProps>(
 StrictAccordion.displayName = 'StrictAccordion'
 
 // Styled components with direct media queries
-const StyledAccordion = styled(StrictAccordion)({
-  '&.MuiAccordion-root': {
-    '&:before': {
-      display: 'none',
-    },
-    // Improved styling for stacked accordions
-    marginBottom: '8px',
-    borderRadius: '8px',
-    boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.1)',
-    transition: 'box-shadow 0.3s ease, transform 0.2s ease',
-    overflow: 'hidden',
-
-    // Add subtle hover effect
-    '&:hover': {
-      boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.15)',
-      transform: 'translateY(-1px)',
-    },
+const StyledAccordion = styled(StrictAccordion)<{ sacredtheme?: boolean }>(
+  ({ sacredtheme }) => ({
+    '&.MuiAccordion-root': {
+      '&:before': {
+        display: 'none',
+      },
+      // Improved styling for stacked accordions
+      marginBottom: '8px',
+      borderRadius: '8px',
+      boxShadow: sacredtheme
+        ? '0 0 15px rgba(255, 215, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3)'
+        : '0px 1px 3px rgba(0, 0, 0, 0.1)',
+      transition: 'all 0.3s ease',
+      overflow: 'hidden',
+      position: 'relative',
+      backgroundColor: sacredtheme ? '#0a0a0a' : 'white',
+      border: sacredtheme ? `1px solid ${alpha('#FFD700', 0.3)}` : 'none',
 
-    // Mobile styles
-    '@media (max-width: 600px)': {
-      borderRadius: '6px',
-      boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.1)',
-    },
+      ...(sacredtheme && {
+        backgroundImage: `
+          linear-gradient(rgba(255, 215, 0, 0.02), rgba(255, 215, 0, 0.02)),
+          radial-gradient(circle at top left, rgba(255, 215, 0, 0.05) 0%, transparent 50%)
+        `,
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          opacity: 0,
+          background:
+            'linear-gradient(135deg, transparent, rgba(255, 215, 0, 0.1), transparent)',
+          transition: 'opacity 0.3s ease',
+          pointerEvents: 'none',
+        },
+      }),
 
-    // Apply different styling to expanded accordion
-    '&.accordion-expanded': {
-      boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.12)',
-      backgroundColor: '#fafafa',
+      // Add subtle hover effect
+      '&:hover': {
+        boxShadow: sacredtheme
+          ? '0 0 25px rgba(255, 215, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.4)'
+          : '0px 3px 6px rgba(0, 0, 0, 0.15)',
+        transform: 'translateY(-1px)',
+        ...(sacredtheme && {
+          borderColor: alpha('#FFD700', 0.5),
+          '&::before': {
+            opacity: 1,
+          },
+        }),
+      },
+
+      // Mobile styles
+      '@media (max-width: 600px)': {
+        borderRadius: '6px',
+        boxShadow: sacredtheme
+          ? '0 0 10px rgba(255, 215, 0, 0.2)'
+          : '0px 1px 3px rgba(0, 0, 0, 0.1)',
+      },
+
+      // Apply different styling to expanded accordion
+      '&.accordion-expanded': {
+        boxShadow: sacredtheme
+          ? '0 0 30px rgba(255, 215, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.5)'
+          : '0px 3px 8px rgba(0, 0, 0, 0.12)',
+        backgroundColor: sacredtheme ? '#0a0a0a' : '#fafafa',
+        ...(sacredtheme && {
+          borderColor: '#FFD700',
+          '&::before': {
+            opacity: 1,
+            animation: `${sacredShimmer} 3s ease-in-out infinite`,
+          },
+        }),
+      },
     },
-  },
-  '&.Mui-disabled': {
-    backgroundColor: '#f8f8f8', // Light gray background
-    opacity: 0.8,
-    // Override Material UI's disabled styles
-    pointerEvents: 'auto !important',
-  },
-})
+    '&.Mui-disabled': {
+      backgroundColor: sacredtheme ? alpha('#000000', 0.8) : '#f8f8f8',
+      opacity: sacredtheme ? 0.6 : 0.8,
+      // Override Material UI's disabled styles
+      pointerEvents: 'auto !important',
+      ...(sacredtheme && {
+        borderColor: alpha('#FFD700', 0.1),
+      }),
+    },
+  })
+)
 
 // Wrapper for disabled summary to ensure it's testable
 const DisabledSummaryWrapper = styled('div')({
@@ -182,15 +302,58 @@ const DisabledSummaryWrapper = styled('div')({
   },
 })
 
-const StyledAccordionSummary = styled(MuiAccordionSummary)({
+const StyledAccordionSummary = styled(MuiAccordionSummary)<{
+  sacredtheme?: boolean
+}>(({ sacredtheme }) => ({
   fontSize: '20px',
-  fontFamily: 'merriweather',
-  fontWeight: 500,
+  fontFamily: sacredtheme ? '"Cinzel", serif' : 'merriweather',
+  fontWeight: sacredtheme ? 600 : 500,
   borderRadius: '8px 8px 0 0',
-  backgroundColor: '#f5f7fa', // Subtle background color for the header
-  transition: 'background-color 0.2s ease',
+  backgroundColor: sacredtheme ? 'transparent' : '#f5f7fa',
+  transition: 'all 0.2s ease',
+  position: 'relative',
+  color: sacredtheme ? alpha('#FFD700', 0.9) : 'inherit',
+  minHeight: '56px',
+
+  ...(sacredtheme && {
+    '&::before': {
+      content: `"${SACRED_GLYPHS[3]}"`,
+      position: 'absolute',
+      left: '16px',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      color: alpha('#FFD700', 0.4),
+      fontSize: '16px',
+      opacity: 0,
+      transition: 'all 0.3s ease',
+    },
+    '&::after': {
+      content: `"${SACRED_GLYPHS[7]}"`,
+      position: 'absolute',
+      right: '48px',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      color: alpha('#FFD700', 0.4),
+      fontSize: '16px',
+      opacity: 0,
+      transition: 'all 0.3s ease',
+    },
+    '& .MuiAccordionSummary-content': {
+      paddingLeft: '20px',
+      paddingRight: '20px',
+    },
+  }),
+
   '&:hover': {
-    backgroundColor: '#e8f0fe', // Slightly darker on hover
+    backgroundColor: sacredtheme ? alpha('#FFD700', 0.1) : '#e8f0fe',
+    ...(sacredtheme && {
+      color: '#FFD700',
+      textShadow: '0 0 8px rgba(255, 215, 0, 0.6)',
+      '&::before, &::after': {
+        opacity: 1,
+        animation: `${sacredFloat} 2s ease-in-out infinite`,
+      },
+    }),
   },
 
   // Mobile styles
@@ -201,30 +364,70 @@ const StyledAccordionSummary = styled(MuiAccordionSummary)({
       margin: '8px 0',
     },
   },
+
   // Fix for disabled state
   '&.Mui-disabled': {
     opacity: 1, // Override MUI's opacity
-    color: '#666',
+    color: sacredtheme ? alpha('#FFD700', 0.3) : '#666',
     // Ensure pointer events work for testing
     pointerEvents: 'auto !important',
     cursor: 'not-allowed',
     '& .MuiIconButton-root': {
-      color: '#999',
+      color: sacredtheme ? alpha('#FFD700', 0.3) : '#999',
       // Allow pointer events for the icon too
       pointerEvents: 'auto !important',
     },
   },
+
   // Style when expanded
   '&.Mui-expanded': {
-    backgroundColor: '#e3f2fd', // Highlight color when expanded
-    borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+    backgroundColor: sacredtheme ? alpha('#FFD700', 0.05) : '#e3f2fd',
+    borderBottom: sacredtheme
+      ? `1px solid ${alpha('#FFD700', 0.3)}`
+      : '1px solid rgba(0, 0, 0, 0.12)',
+    ...(sacredtheme && {
+      color: '#FFD700',
+      animation: `${sacredGlowPulse} 2s ease-in-out infinite`,
+      '&::before': {
+        opacity: 1,
+        transform: 'translateY(-50%) translateX(4px)',
+        animation: `${rotateGlyph} 20s linear infinite`,
+      },
+      '&::after': {
+        opacity: 1,
+        transform: 'translateY(-50%) translateX(-4px)',
+        animation: `${rotateGlyph} 15s linear infinite reverse`,
+      },
+    }),
   },
-})
+}))
 
-const StyledAccordionDetails = styled(MuiAccordionDetails)({
+const StyledAccordionDetails = styled(MuiAccordionDetails)<{
+  sacredtheme?: boolean
+}>(({ sacredtheme }) => ({
   padding: '16px',
-  backgroundColor: 'white',
-  borderTop: '1px solid rgba(0, 0, 0, 0.08)',
+  backgroundColor: sacredtheme ? 'transparent' : 'white',
+  borderTop: sacredtheme
+    ? `1px solid ${alpha('#FFD700', 0.2)}`
+    : '1px solid rgba(0, 0, 0, 0.08)',
+  color: sacredtheme ? alpha('#FFD700', 0.8) : 'inherit',
+  position: 'relative',
+
+  ...(sacredtheme && {
+    backgroundImage: `
+      radial-gradient(circle at bottom right, rgba(255, 215, 0, 0.03) 0%, transparent 50%)
+    `,
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '8px',
+      left: '16px',
+      right: '16px',
+      height: '1px',
+      background: `linear-gradient(to right, transparent, ${alpha('#FFD700', 0.2)}, transparent)`,
+    },
+  }),
+
   // Mobile styles
   '@media (max-width: 600px)': {
     padding: '12px 16px',
@@ -235,10 +438,55 @@ const StyledAccordionDetails = styled(MuiAccordionDetails)({
   },
   // Desktop styles
   '@media (min-width: 961px)': {
-    padding: '16px 24px',
+    padding: sacredtheme ? '24px 32px' : '16px 24px',
+  },
+}))
+
+// Sacred decorative element for expanded content
+const SacredContentWrapper = styled('div')({
+  position: 'relative',
+  '& > *:first-of-type': {
+    position: 'relative',
+    zIndex: 1,
   },
 })
 
+const SacredGlyphDecoration = styled('div')({
+  position: 'absolute',
+  bottom: '8px',
+  right: '16px',
+  display: 'flex',
+  gap: '4px',
+  opacity: 0.3,
+  '& .glyph': {
+    color: '#FFD700',
+    fontSize: '12px',
+    animation: `${expandGlyphGlow} 3s ease-in-out infinite`,
+    '&:nth-of-type(2)': {
+      animationDelay: '1s',
+    },
+    '&:nth-of-type(3)': {
+      animationDelay: '2s',
+    },
+  },
+})
+
+// Sacred expand icon component
+const SacredExpandIcon = ({ sacredTheme }: { sacredTheme?: boolean }) => (
+  <ExpandMore
+    sx={{
+      color: sacredTheme ? '#FFD700' : black.main,
+      transition: 'all 0.3s ease',
+      ...(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))',
+        },
+      }),
+    }}
+  />
+)
+
 /**
  * Accordion component with multiple variants
  *
@@ -248,6 +496,7 @@ const StyledAccordionDetails = styled(MuiAccordionDetails)({
  * - Accessibility support
  * - Custom styling
  * - Nesting support
+ * - Sacred Egyptian theming
  */
 function Accordion({
   summary,
@@ -257,6 +506,7 @@ function Accordion({
   defaultExpanded = false,
   onChange,
   disabled = false,
+  sacredTheme = false,
 }: AccordionProps) {
   // Check if component is in controlled mode (expanded prop is provided)
   const isControlled = controlledExpanded !== undefined
@@ -313,12 +563,14 @@ function Accordion({
         expanded={false}
         onChange={handleToggle}
         className="controlled-accordion-collapsed"
+        sacredtheme={sacredTheme}
       >
         <StyledAccordionSummary
-          expandIcon={<ExpandMore sx={{ color: black.main }} />}
+          expandIcon={<SacredExpandIcon sacredTheme={sacredTheme} />}
           aria-controls="accordion-content"
           id="accordion-header"
           data-testid="accordion-summary-controlled"
+          sacredtheme={sacredTheme}
         >
           {summary}
         </StyledAccordionSummary>
@@ -335,14 +587,22 @@ function Accordion({
         style={style}
         expanded={false} // Always collapsed when disabled
         className="disabled-accordion"
+        sacredtheme={sacredTheme}
       >
         <DisabledSummaryWrapper
           onClick={handleDisabledClick}
           data-testid="disabled-accordion-summary"
         >
           <StyledAccordionSummary
-            expandIcon={<ExpandMore sx={{ color: '#999' }} />}
+            expandIcon={
+              <ExpandMore
+                sx={{
+                  color: sacredTheme ? alpha('#FFD700', 0.3) : '#999',
+                }}
+              />
+            }
             aria-disabled="true"
+            sacredtheme={sacredTheme}
           >
             {summary}
           </StyledAccordionSummary>
@@ -360,16 +620,33 @@ function Accordion({
       expanded={expanded}
       onChange={handleToggle}
       className={`accordion-${expanded ? 'expanded' : 'collapsed'}`}
+      sacredtheme={sacredTheme}
     >
       <StyledAccordionSummary
-        expandIcon={<ExpandMore sx={{ color: black.main }} />}
+        expandIcon={<SacredExpandIcon sacredTheme={sacredTheme} />}
         aria-controls="accordion-content"
         id="accordion-header"
         data-testid="accordion-summary"
+        sacredtheme={sacredTheme}
       >
         {summary}
       </StyledAccordionSummary>
-      {expanded && <StyledAccordionDetails>{details}</StyledAccordionDetails>}
+      {expanded && (
+        <StyledAccordionDetails sacredtheme={sacredTheme}>
+          {sacredTheme ? (
+            <SacredContentWrapper>
+              {details}
+              <SacredGlyphDecoration>
+                <span className="glyph">𓅨</span>
+                <span className="glyph">𓂋</span>
+                <span className="glyph">𓏭</span>
+              </SacredGlyphDecoration>
+            </SacredContentWrapper>
+          ) : (
+            details
+          )}
+        </StyledAccordionDetails>
+      )}
     </StyledAccordion>
   )
 }