goobs-frontend 0.9.11 → 0.9.13

package/src/components/Field/Dropdown/Searchable/searchabledropdown.stories.tsx

@@ -580,3 +580,167 @@ export const AllAttributesDisplay: Story = {
     expect(hasAllLevels).toBe(true)
   },
 }
+
+/**
+ * 15) With Search History
+ *    Uses userEvent => keep `async`.
+ */
+export const WithSearchHistory: Story = {
+  args: {
+    label: 'Search with History',
+    options: complexSampleOptions,
+    placeholder: 'Search with history...',
+    variant: 'complex',
+    // Provide pre-populated search history
+    searchHistory: [
+      { text: 'apple', timestamp: new Date(Date.now() - 5 * 60000) }, // 5 minutes ago
+      { text: 'broccoli', timestamp: new Date(Date.now() - 60 * 60000) }, // 1 hour ago
+      {
+        text: 'custom search',
+        timestamp: new Date(Date.now() - 24 * 60 * 60000),
+      }, // 1 day ago
+    ],
+    maxHistoryItems: 5,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Open the dropdown
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+
+    // Switch to history tab
+    const historyTab = canvas.getByRole('tab', { name: /HISTORY/i })
+    await userEvent.click(historyTab)
+
+    // Get dropdown options after switching to history tab
+    const listboxItems = getDropdownOptions()
+
+    // Check if history items are displayed
+    const hasAppleHistory = listboxItems.some(
+      item => item.textContent && item.textContent.includes('apple')
+    )
+
+    const hasTimestamp = listboxItems.some(
+      item =>
+        item.textContent &&
+        (item.textContent.includes('minutes ago') ||
+          item.textContent.includes('hour ago') ||
+          item.textContent.includes('day ago'))
+    )
+
+    expect(hasAppleHistory).toBe(true)
+    expect(hasTimestamp).toBe(true)
+
+    // Try entering a new search term
+    await userEvent.clear(input)
+    await userEvent.type(input, 'new search')
+    await userEvent.tab() // Blur to trigger adding to history
+
+    // Reopen and check history tab again
+    await userEvent.click(input)
+    await userEvent.click(historyTab)
+
+    // Should now include our new search
+    const updatedListboxItems = getDropdownOptions()
+    const hasNewSearch = updatedListboxItems.some(
+      item => item.textContent && item.textContent.includes('new search')
+    )
+
+    expect(hasNewSearch).toBe(true)
+  },
+}
+
+/**
+ * 16) With Search Callback
+ *    Uses userEvent => keep `async`.
+ */
+export const WithSearchCallback: Story = {
+  args: {
+    label: 'Search with Callback',
+    options: sampleOptions,
+    placeholder: 'Search with callback...',
+    variant: 'simple',
+    // This callback will be triggered when searches are performed
+    onSearch: (searchTerm: string, timestamp?: Date) => {
+      console.log(
+        `Search term: ${searchTerm}, Time: ${timestamp?.toISOString() || 'No timestamp'}`
+      )
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Perform a search
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+    await userEvent.type(input, 'test search')
+    await userEvent.tab() // Blur to trigger search
+
+    // Since we can't easily verify the callback in Storybook tests,
+    // we'll just ensure the component functions correctly
+    expect(input).toHaveValue('test search')
+  },
+}
+
+/**
+ * 17) Tab Navigation
+ *    Uses userEvent => keep `async`.
+ */
+export const TabNavigation: Story = {
+  args: {
+    label: 'Tab Navigation Demo',
+    options: sampleOptions,
+    placeholder: 'Explore tabs...',
+    variant: 'simple',
+    // Provide some search history
+    searchHistory: [
+      'previous search one',
+      'previous search two',
+      'previous search three',
+    ],
+    maxHistoryItems: 10,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Open the dropdown
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+
+    // First check that we're on the default "ALL OPTIONS" tab
+    // and can see the regular options
+    const allOptionsTab = canvas.getByRole('tab', { name: /ALL OPTIONS/i })
+    expect(allOptionsTab).toHaveAttribute('aria-selected', 'true')
+
+    // We should see the original options
+    const initialListboxItems = getDropdownOptions()
+    const hasAppleOption = initialListboxItems.some(
+      item => item.textContent && item.textContent.includes('apple')
+    )
+    expect(hasAppleOption).toBe(true)
+
+    // Now switch to the HISTORY tab
+    const historyTab = canvas.getByRole('tab', { name: /HISTORY/i })
+    await userEvent.click(historyTab)
+    expect(historyTab).toHaveAttribute('aria-selected', 'true')
+
+    // Now we should see the history items
+    const historyListboxItems = getDropdownOptions()
+    const hasHistoryItems = historyListboxItems.some(
+      item => item.textContent && item.textContent.includes('previous search')
+    )
+    expect(hasHistoryItems).toBe(true)
+
+    // Now switch back to ALL OPTIONS tab
+    await userEvent.click(allOptionsTab)
+    expect(allOptionsTab).toHaveAttribute('aria-selected', 'true')
+
+    // We should see the original options again
+    const finalListboxItems = getDropdownOptions()
+    const hasAppleOptionAgain = finalListboxItems.some(
+      item => item.textContent && item.textContent.includes('apple')
+    )
+    expect(hasAppleOptionAgain).toBe(true)
+  },
+}

package/src/components/ProjectBoard/index.tsx

@@ -4,6 +4,7 @@ import React, { useMemo, useEffect, useState, useCallback } from 'react'
 import { Box, Stack } from '@mui/material'
 import { useAtom } from 'jotai'
 import { columnsAtom } from './jotai/atom'
+import { JotaiProvider } from './jotai/provider'
 
 import Toolbar from '../Toolbar'
 // Removed old generic AddTask import
@@ -57,7 +58,7 @@ function mergeColumnsAndTasks(
   })
 }
 
-function ProjectBoard({
+function ProjectBoardContent({
   variant,
   boardType,
   columns,
@@ -158,7 +159,7 @@ function ProjectBoard({
       setColumnState(newCols)
       setAddTaskOpen(false)
 
-      // 5.b) Also call the parent’s onAdd, passing the same newTask data
+      // 5.b) Also call the parent's onAdd, passing the same newTask data
       onAdd(newTask)
     },
     [columnState, boardType, setColumnState, onAdd]
@@ -460,4 +461,13 @@ function ProjectBoard({
   )
 }
 
+// Wrap the component with our custom JotaiProvider to avoid the "multiple instances" error
+function ProjectBoard(props: ProjectBoardProps) {
+  return (
+    <JotaiProvider>
+      <ProjectBoardContent {...props} />
+    </JotaiProvider>
+  )
+}
+
 export default React.memo(ProjectBoard)

package/src/components/ProjectBoard/jotai/provider.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+import { Provider, createStore } from 'jotai'
+import { columnsAtom } from './atom'
+
+// Create a custom store
+export const store = createStore()
+
+// Initialize the store with our atoms to ensure they're properly registered
+store.set(columnsAtom, [])
+
+/**
+ * A Jotai Provider component that uses a custom store to prevent
+ * "multiple instances" error in Next.js applications.
+ */
+export function JotaiProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.ReactElement {
+  return <Provider store={store}>{children}</Provider>
+}

package/src/components/QRCode/index.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useEffect } from 'react'
 import QRCode from 'react-qr-code'
-import { Box, Typography, Paper, Theme, CircularProgress } from '@mui/material'
+import { Box, Paper } from '@mui/material'
 import { SxProps } from '@mui/system'
 import { authenticator } from 'otplib'
+import Typography from '../Typography'
 
 /**
  * Props for the QRCodeComponent
@@ -11,7 +12,7 @@ import { authenticator } from 'otplib'
  * @property {string} appName - The name of the application for MFA
  * @property {number} [size] - The size of the QR code in pixels
  * @property {string} [title] - An optional title to display above the QR code
- * @property {SxProps<Theme>} [sx] - Custom styles to apply to the component
+ * @property {SxProps} [sx] - Custom styles to apply to the component
  * @property {(secret: string) => void} [onSecretGenerated] - Callback function to receive the generated secret
  */
 export interface QRCodeProps {
@@ -19,7 +20,7 @@ export interface QRCodeProps {
   appName: string
   size?: number
   title?: string
-  sx?: SxProps<Theme>
+  sx?: SxProps
   onSecretGenerated?: (secret: string) => void
 }
 
@@ -38,11 +39,15 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
         encodeURIComponent(appName),
         generatedSecret
       )
-      if (onSecretGenerated) {
-        onSecretGenerated(generatedSecret)
-      }
       return { secret: generatedSecret, otpAuth: otpAuthUrl }
-    }, [username, appName, onSecretGenerated])
+    }, [username, appName])
+
+    // Move the callback to useEffect to avoid state updates during render
+    useEffect(() => {
+      if (onSecretGenerated && secret) {
+        onSecretGenerated(secret)
+      }
+    }, [secret, onSecretGenerated])
 
     // Calculate responsive size
     const responsiveSize = useMemo(() => {
@@ -52,9 +57,11 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
     if (!otpAuth) {
       return (
         <Box sx={{ ...sx, p: 2 }} role="alert">
-          <Typography color="error">
-            Error: Failed to generate QR code
-          </Typography>
+          <Typography
+            text="Error: Failed to generate QR code"
+            fontcolor="error"
+            fontvariant="merriparagraph"
+          />
         </Box>
       )
     }
@@ -63,17 +70,20 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
       <Paper
         elevation={3}
         sx={{
-          ...sx,
           p: 3,
           display: 'inline-block',
           maxWidth: '100%',
           boxSizing: 'border-box',
+          ...sx,
         }}
       >
         {title && (
-          <Typography variant="h6" gutterBottom align="center">
-            {title}
-          </Typography>
+          <Typography
+            text={title}
+            fontvariant="merrih5"
+            align="center"
+            gutterBottom
+          />
         )}
         <Box
           sx={{
@@ -85,25 +95,13 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
             margin: 'auto',
           }}
         >
-          <React.Suspense
-            fallback={
-              <CircularProgress
-                size={responsiveSize / 4}
-                aria-label="Loading QR Code"
-              />
-            }
-          >
-            <QRCode
-              value={otpAuth}
-              size={responsiveSize}
-              style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
-              aria-label={`QR Code for ${title || 'MFA Setup'}`}
-            />
-          </React.Suspense>
+          <QRCode
+            value={otpAuth}
+            size={responsiveSize}
+            style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+            aria-label={`QR Code for ${title || 'MFA Setup'}`}
+          />
         </Box>
-        <Typography variant="body2" align="center" sx={{ mt: 2 }}>
-          Secret: {secret}
-        </Typography>
       </Paper>
     )
   }