fix: add 'use client' directives for Next.js SSR compatibility

ClaraTschamon · ClaraTschamon · commit 72bf28710837 · 2026-01-07T15:18:25.000+01:00
diff --git a/src/components/BoemlyAccordion/BoemlyAccordion.tsx b/src/components/BoemlyAccordion/BoemlyAccordion.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { Accordion, Box, Heading } from '@chakra-ui/react';
 import { RichText } from '../RichText';
@@ -18,7 +20,7 @@ export const BoemlyAccordion: React.FC<BoemlyAccordionProps> = ({
   defaultIndex,
 }: BoemlyAccordionProps) => {
   const textColor = variant === 'black' ? 'gray.500' : 'white';
-  const initialExpandedValues = defaultIndex.map((index) => rows[index].id.toString());
+  const initialExpandedValues = defaultIndex?.map((index) => rows[index].id.toString());
 
   return (
     <Accordion.Root defaultValue={initialExpandedValues} collapsible visual={variant}>
diff --git a/src/components/BoemlyAlert/BoemlyAlert.tsx b/src/components/BoemlyAlert/BoemlyAlert.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 import { Alert, CloseButton, Spinner, useToken } from '@chakra-ui/react';
 import {
diff --git a/src/components/BoemlyFormControl/BoemlyFormControl.tsx b/src/components/BoemlyFormControl/BoemlyFormControl.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 import {
   Checkbox,
diff --git a/src/components/BoemlyModal/BoemlyModal.tsx b/src/components/BoemlyModal/BoemlyModal.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Button, CloseButton, Dialog, Portal } from '@chakra-ui/react';
 import React, { ReactNode } from 'react';
 
diff --git a/src/components/BoemlySteps/BoemlySteps.tsx b/src/components/BoemlySteps/BoemlySteps.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { Flex, Text, useToken, Stack } from '@chakra-ui/react';
 import type { ConditionalValue } from '@chakra-ui/react';
diff --git a/src/components/BoemlyTabs/BoemlyTabs.tsx b/src/components/BoemlyTabs/BoemlyTabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useMemo, useState } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import LineTabButton from './LineTabButton';
diff --git a/src/components/BoemlyTag/BoemlyTag.tsx b/src/components/BoemlyTag/BoemlyTag.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import { Tag, TagRootProps } from '@chakra-ui/react';
 
diff --git a/src/components/BoemlyThemeProvider/BoemlyThemeProvider.tsx b/src/components/BoemlyThemeProvider/BoemlyThemeProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 import { SystemContext } from '@chakra-ui/react';
 import { IconContext } from '@phosphor-icons/react';
diff --git a/src/components/ConfirmAction/ConfirmAction.tsx b/src/components/ConfirmAction/ConfirmAction.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 import { BoemlyModal } from '../BoemlyModal';
 import { Button, Flex, Text } from '@chakra-ui/react';
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   CloseButton,
   Flex,
diff --git a/src/components/DeleteConfirm/DeleteConfirm.tsx b/src/components/DeleteConfirm/DeleteConfirm.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { SubmissionConfirm } from '../SubmissionConfirm';
 
diff --git a/src/components/Expandable/Expandable.tsx b/src/components/Expandable/Expandable.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Heading, IconButton, Flex, Text, Spinner } from '@chakra-ui/react';
 import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react';
 import React, { useEffect } from 'react';
diff --git a/src/components/ForceClientSideRender/ForceClientSideRender.tsx b/src/components/ForceClientSideRender/ForceClientSideRender.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 interface ForceClientSideRenderProps {
diff --git a/src/components/Gradient/Gradient.tsx b/src/components/Gradient/Gradient.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { Box, useToken } from '@chakra-ui/react';
 
diff --git a/src/components/ImageRadioGroup/ImageRadioGroup.tsx b/src/components/ImageRadioGroup/ImageRadioGroup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { FC, createContext } from 'react';
 
 export interface ImageRadioGroupProps {
diff --git a/src/components/ImageRadioItem/ImageRadioItem.tsx b/src/components/ImageRadioItem/ImageRadioItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { chakra, useToken } from '@chakra-ui/react';
 import { motion, MotionConfig, useAnimation } from 'framer-motion';
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box } from '@chakra-ui/react';
 import { useWindowScroll } from '@reactuses/core';
 import React, { ReactNode, useEffect, useState } from 'react';
diff --git a/src/components/MobileMenuBurger/MobileMenuBurger.tsx b/src/components/MobileMenuBurger/MobileMenuBurger.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Flex, IconButton } from '@chakra-ui/react';
 import { useAnimation } from 'framer-motion';
 import React, { useEffect } from 'react';
diff --git a/src/components/OverflownText/OverflownText.tsx b/src/components/OverflownText/OverflownText.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef, useState, useEffect } from 'react';
 import type { TextProps } from '@chakra-ui/react';
 import { Text } from '@chakra-ui/react';
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Separator, Flex, Heading, SimpleGrid, Text, useToken } from '@chakra-ui/react';
 import { ArrowsOutSimpleIcon, MapPinIcon } from '@phosphor-icons/react';
 import React, { ReactNode } from 'react';
diff --git a/src/components/RichText/RichText.tsx b/src/components/RichText/RichText.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useRef } from 'react';
 import { Box, Heading, HeadingProps, Link, Text, TextProps } from '@chakra-ui/react';
 import { ImageContainer } from './styles';
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -102,3 +102,25 @@ SearchableMultiSelect.args = {
     { label: 'Option 4', value: 'option_4' },
   ],
 };
+
+export const NotFullWidth = Template.bind({});
+NotFullWidth.args = {
+  placeholder: 'Select',
+  isFullWidth: false,
+  options: [
+    { label: 'Short', value: 'short' },
+    {
+      label: 'This is a much longer option label that extends beyond the trigger',
+      value: 'long_1',
+    },
+    {
+      label: 'Another very long option with even more text to demonstrate auto width',
+      value: 'long_2',
+    },
+    { label: 'Medium length option', value: 'medium' },
+    {
+      label: 'Extra long option label with a lot of descriptive text for demonstration purposes',
+      value: 'extra_long',
+    },
+  ],
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import {
   Box,
@@ -81,7 +83,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
 
   // Use controlled value if provided, otherwise use internal state
   const isControlled = value !== undefined;
-  const selectedOptions = isControlled ? value : internalSelectedOptions;
+  const selectedOptions = (isControlled ? value : internalSelectedOptions) ?? [];
 
   const filteredOptions = useMemo(() => {
     if (isSearchable && searchTerm) {
@@ -209,7 +211,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             onClose();
           }
         }}
-        positioning={{ placement: 'bottom-start', flip: false, sameWidth: true }}
+        positioning={{ placement: 'bottom-start', flip: false, sameWidth: false }}
       >
         {/* Trigger */}
         <Popover.Trigger asChild>
@@ -284,7 +286,8 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             maxHeight={dynamicMaxHeight}
             overflowY="auto"
             zIndex="popover"
-            width={dropdownWidth || menuWidth}
+            width={dropdownWidth || 'auto'}
+            minWidth={menuWidth}
           >
             {isSearchable && (
               <InputGroup mb="4" startElement={<MagnifyingGlassIcon color="gray.500" />}>
@@ -356,7 +359,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
                         bg: disabled ? undefined : isSelected ? 'primary.200' : 'gray.100',
                       }}
                     >
-                      <Flex justify="space-between" align="center" width="100%">
+                      <Flex justify="space-between" align="center" width="100%" gap="3">
                         <Text
                           fontSize={selectRecipe.variants?.size[size]?.fontSize}
                           fontWeight={isSelected ? 'bold' : 'normal'}
diff --git a/src/components/Shape/Shape.tsx b/src/components/Shape/Shape.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useToken } from '@chakra-ui/react';
 import React, { ReactNode } from 'react';
 import { ShapeContainer } from './styles';
diff --git a/src/components/ShapesCard/ShapesCard.tsx b/src/components/ShapesCard/ShapesCard.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Button, Heading, Text, useToken } from '@chakra-ui/react';
 import React, { ReactNode } from 'react';
 import { RichText } from '../RichText';
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Flex, FlexProps, Slider, Text, useMediaQuery } from '@chakra-ui/react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { BoemlyFormControl } from '../BoemlyFormControl';
diff --git a/src/components/SplitScreen/SplitScreen.tsx b/src/components/SplitScreen/SplitScreen.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, useMediaQuery } from '@chakra-ui/react';
 import React, { ReactNode, useEffect, useRef } from 'react';
 import { useAnimation } from 'framer-motion';
diff --git a/src/components/SubmissionConfirm/SubmissionConfirm.tsx b/src/components/SubmissionConfirm/SubmissionConfirm.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Flex, Heading, Popover } from '@chakra-ui/react';
 import React from 'react';
 import { Button } from '../ui/button';
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactNode } from 'react';
 import {
   Toaster as ChakraToaster,
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react';
 import * as React from 'react';
 
diff --git a/src/constants/colorPalettes.ts b/src/constants/colorPalettes.ts
@@ -1,4 +1,4 @@
-import type { ButtonColorPalettes } from '../types/ButtonColorScheme';
+import type { ButtonColorPalettes } from '../types/ButtonColorPalette';
 
 export const COLOR_PALETTES: ButtonColorPalettes[] = [
   'primary',
diff --git a/src/types/ButtonColorPalette.ts b/src/types/ButtonColorPalette.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import React, { ReactNode } from 'react';`
`2`	`4`	`import { Alert, CloseButton, Spinner, useToken } from '@chakra-ui/react';`
`3`	`5`	`import {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import { Button, CloseButton, Dialog, Portal } from '@chakra-ui/react';`
`2`	`4`	`import React, { ReactNode } from 'react';`
`3`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import React from 'react';`
`2`	`4`	`import { Flex, Text, useToken, Stack } from '@chakra-ui/react';`
`3`	`5`	`import type { ConditionalValue } from '@chakra-ui/react';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import React, { useMemo, useState } from 'react';`
`2`	`4`	`import { Box, Flex } from '@chakra-ui/react';`
`3`	`5`	`import LineTabButton from './LineTabButton';`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`import React, { useState } from 'react';`
`2`	`4`	`import { Tag, TagRootProps } from '@chakra-ui/react';`
`3`	`5`