goobs-frontend 0.9.5 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "@storybook/nextjs": "^8",
     "@storybook/react": "^8",
     "@storybook/test": "^8",
-    "@types/node": "^22.13.8",
+    "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8",

package/src/components/Form/Dialog/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import React, { useMemo } from 'react'
-import { Dialog, Box } from '@mui/material'
+import { Box } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
-import { formContainerStyle } from '../../../styles/Form'
 import { TypographyProps } from '../../Typography'
+import CustomButton, { CustomButtonProps } from '../../Button'
 
 export interface CustomDialogProps {
   title?: string
@@ -12,6 +12,8 @@ export interface CustomDialogProps {
   grids?: ContentSectionProps['grids']
   content?: React.ReactNode
   width?: number
+  /** Optional array of button props for footer buttons */
+  buttons?: CustomButtonProps[]
 }
 
 function CustomDialog({
@@ -20,20 +22,19 @@ function CustomDialog({
   grids,
   content,
   width = 450,
+  buttons,
 }: CustomDialogProps) {
-  // We render this dialog as always open (embedded in pages).
-
   const headerGrid = useMemo(
     (): ContentSectionProps['grids'][0] => ({
       typography: [
         {
           text: title,
-          fontvariant: 'merrih5',
+          fontvariant: 'merrih4',
           fontcolor: 'black',
         },
         {
           text: description,
-          fontvariant: 'merriparagraph',
+          fontvariant: 'merrih5',
           fontcolor: 'black',
         },
       ] as TypographyProps[],
@@ -46,31 +47,42 @@ function CustomDialog({
     [headerGrid]
   )
 
-  const renderContent = useMemo(
-    () => (
-      <Box sx={formContainerStyle}>
-        <Box mb={0}>{renderHeader}</Box>
-        {content || (grids && <ContentSection grids={grids} />)}
+  const renderButtons = useMemo(() => {
+    if (!buttons || buttons.length === 0) return null
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          gap: 2,
+          marginTop: '15px',
+        }}
+      >
+        {buttons.map((buttonProps, index) => (
+          <CustomButton key={index} {...buttonProps} />
+        ))}
       </Box>
-    ),
-    [renderHeader, content, grids]
-  )
+    )
+  }, [buttons])
 
   return (
-    <Dialog
-      open={true}
-      fullWidth
-      maxWidth={false}
-      slotProps={{
-        paper: {
-          style: {
-            width: `${width}px`,
-          },
-        },
+    <Box
+      sx={{
+        width: `${width}px`,
+        maxWidth: '100%',
+        borderRadius: '16px',
+        boxShadow: 3,
+        margin: '0 auto',
+        padding: 3,
+        bgcolor: 'white',
       }}
     >
-      {renderContent}
-    </Dialog>
+      {renderHeader}
+      {content || (grids && <ContentSection grids={grids} />)}
+      {renderButtons}
+    </Box>
   )
 }
 

package/src/components/Form/Popup/index.tsx

@@ -4,7 +4,7 @@ import React, { useMemo, useState, useEffect } from 'react'
 import { Close } from '@mui/icons-material'
 import { Dialog, IconButton, Box } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
-import { formContainerStyle } from '../../../styles/Form'
+import CustomButton, { CustomButtonProps } from '../../Button'
 
 export interface PopupProps {
   open: boolean
@@ -21,6 +21,8 @@ export interface PopupProps {
   grids?: ContentSectionProps['grids']
   content?: React.ReactNode
   width?: number
+  /** Optional array of button props for footer buttons */
+  buttons?: CustomButtonProps[]
 }
 
 function Popup({
@@ -32,6 +34,7 @@ function Popup({
   grids,
   content,
   width = 450,
+  buttons,
 }: PopupProps) {
   // Local state syncing with props
   const [isOpen, setIsOpen] = useState(open)
@@ -57,12 +60,12 @@ function Popup({
         {
           text: title,
           // Cast to literal type as expected by goobs-frontend.
-          fontvariant: 'merrih5' as const,
+          fontvariant: 'merrih4' as const,
           fontcolor: 'black',
         },
         {
           text: description,
-          fontvariant: 'merriparagraph' as const,
+          fontvariant: 'merrih5' as const,
           fontcolor: 'black',
         },
       ],
@@ -75,15 +78,25 @@ function Popup({
     [headerGrid]
   )
 
-  const renderContent = useMemo(
-    () => (
-      <Box sx={formContainerStyle}>
-        <Box mb={0}>{renderHeader}</Box>
-        {content || (grids && <ContentSection grids={grids} />)}
+  const renderButtons = useMemo(() => {
+    if (!buttons || buttons.length === 0) return null
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          gap: 2,
+          marginTop: '15px',
+        }}
+      >
+        {buttons.map((buttonProps, index) => (
+          <CustomButton key={index} {...buttonProps} />
+        ))}
       </Box>
-    ),
-    [renderHeader, content, grids]
-  )
+    )
+  }, [buttons])
 
   const handleClose = () => {
     setIsOpen(false)
@@ -101,6 +114,10 @@ function Popup({
         paper: {
           style: {
             width: `${width}px`,
+            borderRadius: '16px',
+            backgroundColor: 'white',
+            boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)',
+            padding: '24px',
             // Ensure pointer events are enabled inside the Dialog
             pointerEvents: 'auto',
           },
@@ -125,7 +142,9 @@ function Popup({
       >
         <Close />
       </IconButton>
-      {renderContent}
+      {renderHeader}
+      {content || (grids && <ContentSection grids={grids} />)}
+      {renderButtons}
     </Dialog>
   )
 }

package/src/components/ProjectBoard/forms/AddTask/noUser/index.tsx

@@ -53,7 +53,7 @@ const NoUserAddTask: React.FC<NoUserAddTaskProps> = ({
 
   // ------------------ RENDER ------------------
   return (
-    <Box sx={{ p: 3 }}>
+    <Box sx={{ p: 0 }}>
       <Typography variant="h5" sx={{ mb: 3 }}>
         Create Task
       </Typography>

package/src/components/Typography/index.tsx

@@ -3,6 +3,7 @@
 import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
+  useTheme,
 } from '@mui/material'
 import React, { JSX } from 'react'
 
@@ -19,7 +20,7 @@ export type TypographyVariant =
   | 'helperheader'
   | 'helperfooter'
 
-type CustomTypographyVariant = `${FontFamily}${TypographyVariant}`
+export type CustomTypographyVariant = `${FontFamily}${TypographyVariant}`
 
 export interface TypographyProps extends Omit<MuiTypographyProps, 'variant'> {
   text?: string
@@ -29,6 +30,18 @@ export interface TypographyProps extends Omit<MuiTypographyProps, 'variant'> {
   children?: React.ReactNode
 }
 
+// MUI's TextTransform type
+type TextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase'
+
+// Define the structure expected for theme typography variants
+interface TypographyVariantStyle {
+  fontFamily?: string
+  fontSize?: string
+  fontWeight?: number
+  textTransform?: TextTransform
+  lineHeight?: string | number
+}
+
 const arapeyStyles: Record<TypographyVariant, React.CSSProperties> = {
   h1: {
     fontFamily: 'Arapey, serif',
@@ -206,48 +219,92 @@ const Typography = ({
   fontvariant,
   variant,
   children,
+  style,
   ...rest
 }: TypographyProps): JSX.Element => {
-  let variantStyle: React.CSSProperties = {}
+  const theme = useTheme()
+  let variantStyle: Record<string, unknown> = {}
   const actualVariant = fontvariant || variant
 
-  if (typeof actualVariant === 'string') {
-    const fontFamily = actualVariant.startsWith('arapey')
-      ? 'arapey'
-      : actualVariant.startsWith('inter')
-        ? 'inter'
-        : actualVariant.startsWith('merri')
-          ? 'merri'
-          : null
+  if (typeof actualVariant === 'string' && actualVariant.length > 0) {
+    // First, try to get the variant from the theme
+    try {
+      // Log the actual variant being used
+      console.log('Using variant:', actualVariant)
+
+      // Check if we're using a custom font variant (e.g., 'merrih2')
+      if (/^(arapey|inter|merri)/.test(actualVariant)) {
+        // For custom variants, we need to check if they exist in the theme
+        // Use Record to avoid TypeScript errors
+        const themeTypography = theme.typography as unknown as Record<
+          string,
+          unknown
+        >
+
+        if (themeTypography && actualVariant in themeTypography) {
+          // Custom variant exists in theme, use its properties
+          const themeVariant = themeTypography[
+            actualVariant
+          ] as TypographyVariantStyle
+          console.log('Found theme variant:', themeVariant)
 
-    if (fontFamily) {
-      const variantPart = actualVariant.slice(
-        fontFamily.length
-      ) as TypographyVariant
-      switch (fontFamily) {
-        case 'arapey':
-          variantStyle = arapeyStyles[variantPart] || {}
-          break
-        case 'inter':
-          variantStyle = interStyles[variantPart] || {}
-          break
-        case 'merri':
-          variantStyle = merriStyles[variantPart] || {}
-          break
+          if (themeVariant) {
+            variantStyle = {
+              fontFamily: themeVariant.fontFamily,
+              fontSize: themeVariant.fontSize,
+              fontWeight: themeVariant.fontWeight,
+              textTransform: themeVariant.textTransform,
+              lineHeight: themeVariant.lineHeight,
+            }
+          }
+        } else {
+          // Custom variant not in theme, fallback to hardcoded styles
+          console.log('Custom variant not found in theme, using fallback')
+
+          const fontFamily = actualVariant.startsWith('arapey')
+            ? 'arapey'
+            : actualVariant.startsWith('inter')
+              ? 'inter'
+              : actualVariant.startsWith('merri')
+                ? 'merri'
+                : null
+
+          if (fontFamily) {
+            const variantPart = actualVariant.slice(
+              fontFamily.length
+            ) as TypographyVariant
+
+            switch (fontFamily) {
+              case 'arapey':
+                variantStyle = { ...arapeyStyles[variantPart] }
+                break
+              case 'inter':
+                variantStyle = { ...interStyles[variantPart] }
+                break
+              case 'merri':
+                variantStyle = { ...merriStyles[variantPart] }
+                break
+            }
+          }
+        }
+      } else {
+        // Standard MUI variant (h1, h2, etc.)
+        // Let MUI handle these by setting the variant prop
       }
+    } catch (error) {
+      console.error('Error applying typography variant:', error)
     }
   }
 
+  // Combine custom styles with variant-derived styles
+  const combinedStyle = {
+    ...variantStyle,
+    ...(fontcolor ? { color: fontcolor } : {}),
+    ...(style || {}),
+  }
+
   return (
-    <MuiTypography
-      component="span"
-      style={{
-        color: fontcolor,
-        ...variantStyle,
-      }}
-      variant={actualVariant as MuiTypographyProps['variant']}
-      {...rest}
-    >
+    <MuiTypography component="div" style={combinedStyle} {...rest}>
       {text || children}
     </MuiTypography>
   )

package/src/styles/typography.ts

@@ -1,7 +1,8 @@
-type TypographyConfig = {
+export type TypographyConfig = {
   fontSize: string
   fontWeight: number
   textTransform: string
+  fontFamily?: string
 }
 
 // Define base configurations for each heading level