Merge pull request #86 from helpwave/version-0.1.27

version-0.1.27

Author: DasProffi

.storybook/preview.tsx

@@ -1,8 +1,7 @@
 import type { Preview } from '@storybook/nextjs'
 import '../src/style/globals.css'
 import './storybookStyleOverrides.css'
-import { useEffect } from 'react'
-import { ThemeProvider, useTheme } from '../src/theming/useTheme'
+import { ThemeProvider } from '../src/theming/useTheme'
 import { LanguageProvider } from '../src/localization/LanguageProvider'
 
 const preview: Preview = {
@@ -33,15 +32,6 @@ const preview: Preview = {
     (Story, context) => {
       const App = Story
       const theme = context.globals.backgrounds?.value
-      const { setTheme } = useTheme()
-
-      useEffect(() => {
-        if(!theme) {
-          return
-        }
-        setTheme(theme)
-      }, [theme]) // eslint-disable-line react-hooks/exhaustive-deps
-
       const language = context.globals.language
 
       return (

CHANGELOG.md

@@ -5,7 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.1.26] - 2025-07-23
+## [0.1.27] - 2025-09-29
+
+### Added
+- Add a theme preference listener to `useTheme` hook
+- Add icons to the Theme dialog
+- Add a config attribute to the `SelectRoot` component
+- Add `Navigation` and `NavigationList` components for reusable Navigation menus
+- Add accessibility for carousel
+
+### Changed
+- move `isMultiSelect` attribute of `SelectRoot` into the config `SelectConfiguration`
+- split `layout-and-navigation` into `layout` and `navigation` (same for stories)
+
+## [0.1.26] - 2025-09-24
 
 ### Added
 - Add `FloatingContainer` and `useFloatingElement` for aligning a floating element

package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "files": [
     "dist"
   ],

src/components/date/YearMonthPicker.tsx

@@ -3,7 +3,7 @@ import { Scrollbars } from 'react-custom-scrollbars-2'
 import { noop } from '@/src/utils/noop'
 import { equalSizeGroups, range } from '@/src/utils/array'
 import clsx from 'clsx'
-import { ExpandableUncontrolled } from '../layout-and-navigation/Expandable'
+import { ExpandableUncontrolled } from '@/src/components/layout/Expandable'
 import { addDuration, monthsList, subtractDuration } from '@/src/utils/date'
 import { useLocale } from '../../localization/LanguageProvider'
 import { SolidButton } from '../user-action/Button'

src/components/dialog/Dialog.tsx

@@ -5,8 +5,8 @@ import { X } from 'lucide-react'
 import { useTranslation } from '@/src/localization/useTranslation'
 import { formTranslation } from '@/src/localization/defaults/form'
 import { IconButton } from '@/src/components/user-action/Button'
-import type { FloatingContainerProps } from '@/src/components/layout-and-navigation/FloatingContainer'
-import { FloatingContainer } from '@/src/components/layout-and-navigation/FloatingContainer'
+import type { FloatingContainerProps } from '@/src/components/layout/FloatingContainer'
+import { FloatingContainer } from '@/src/components/layout/FloatingContainer'
 import { useFocusTrap } from '@/src/hooks/focus/useFocusTrap'
 import { useLogOnce } from '@/src/hooks/useLogOnce'
 

src/components/dialog/ThemeDialog.tsx

@@ -9,6 +9,28 @@ import type { FormTranslationType } from '../../localization/defaults/form'
 import { formTranslation } from '../../localization/defaults/form'
 import type { DialogProps } from '@/src/components/dialog/Dialog'
 import { Dialog } from '@/src/components/dialog/Dialog'
+import { MonitorCog, MoonIcon, SunIcon } from 'lucide-react'
+import clsx from 'clsx'
+
+type ThemeIconProps = {
+  theme: ThemeType,
+  className?: string,
+}
+const ThemeIcon = ({ theme, className }: ThemeIconProps) => {
+  if (theme === 'dark') {
+    return (
+      <MoonIcon className={clsx('w-4 h-4', className)}/>
+    )
+  } else if (theme === 'light') {
+    return (
+      <SunIcon className={clsx('w-4 h-4', className)}/>
+    )
+  } else {
+    return (
+      <MonitorCog className={clsx('w-4 h-4', className)}/>
+    )
+  }
+}
 
 type ThemeDialogTranslationAddon = {
   chooseTheme: string,
@@ -18,10 +40,10 @@ type ThemeDialogTranslation = ThemeDialogTranslationAddon & ThemeTypeTranslation
 
 const defaultConfirmDialogTranslation: Translation<ThemeDialogTranslationAddon> = {
   en: {
-    chooseTheme: 'Choose your preferred theme',
+    chooseTheme: 'Choose your preferred color theme.',
   },
   de: {
-    chooseTheme: 'Wähle dein bevorzugtes Farbschema',
+    chooseTheme: 'Wähle dein bevorzugtes Farbschema.',
   }
 }
 
@@ -56,15 +78,28 @@ export const ThemeDialog = ({
         <Select
           value={theme}
           onValueChanged={(theme) => setTheme(theme as ThemeType)}
+          iconAppearance="right"
           contentPanelProps={{
             className: 'z-100'
           }}
           buttonProps={{
-            selectedDisplay: (value) => translation(value as ThemeType)
+            selectedDisplay: (value) => (
+              <div className="flex-row-2 items-center">
+                <ThemeIcon theme={theme}/>
+                {translation(value as ThemeType)}
+              </div>
+            ),
+            className: 'min-w-32',
           }}
         >
-          {ThemeUtil.themes.map((theme) =>
-            <SelectOption key={theme} value={theme}>{translation(theme)}</SelectOption>)}
+          {ThemeUtil.themes.map((theme) => (
+            <SelectOption key={theme} value={theme} className="gap-x-6 justify-between">
+              <div className="flex-row-2 items-center">
+                <ThemeIcon theme={theme}/>
+                {translation(theme as ThemeType)}
+              </div>
+            </SelectOption>
+          ))}
         </Select>
         <div className="flex-row-4 mt-3 justify-end">
           <SolidButton autoFocus color="positive" onClick={onClose}>