feat: direct component access for rendering without container

lib/components/Base/ChangelogListBase.tsx

@@ -0,0 +1,111 @@
+import { Box, Card, CardContent, Chip, Divider, Typography } from '@mui/joy';
+import * as React from 'react';
+import { ChangeType } from '../../changelog.types.ts';
+import {
+  ChangelogWithComponents,
+  ChangeTypeMap,
+  getTypeColor,
+} from '../changelog.util.ts';
+
+interface Props {
+  changelogs?: ChangelogWithComponents[];
+  changeTypeMapper?: Record<ChangeType, string>;
+  typeColorResolver?: (type: ChangeType) => string;
+  hideEntryType?: boolean;
+}
+
+export const ChangelogListBase: React.FC<Props> = ({
+  changelogs = [],
+  changeTypeMapper = ChangeTypeMap,
+  typeColorResolver = getTypeColor,
+  hideEntryType = false,
+}) => (
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 3,
+    }}
+  >
+    {changelogs.map((changelog, index) => (
+      <Card key={`changelogs-${index}`} variant={'soft'}>
+        <Box sx={() => ({ mb: 1 })}>
+          <Typography level="h1">Version {changelog.version}</Typography>
+          <Typography level="h4" color={'neutral'}>
+            {new Intl.DateTimeFormat('de-DE', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+            }).format(new Date(changelog.releaseDate))}
+          </Typography>
+          <Divider
+            sx={{
+              mt: 1,
+              mb: 2,
+              mx: -2,
+            }}
+          />
+          {changelog.description && (
+            <Typography color={'neutral'}>{changelog.description}</Typography>
+          )}
+        </Box>
+        <CardContent
+          sx={{
+            gap: 2,
+          }}
+        >
+          {changelog.entries.map((entry) => (
+            <Card
+              key={`changelogs-${index}-components-${entry.component}`}
+              variant={'outlined'}
+            >
+              {entry.component && (
+                <>
+                  <Typography level="title-lg">{entry.component}</Typography>
+                  <Divider
+                    sx={{
+                      mx: -2,
+                    }}
+                  />
+                </>
+              )}
+              <CardContent
+                sx={{
+                  gap: 2,
+                }}
+              >
+                {entry.changelogs.map((entry, entryIndex) => (
+                  <Box
+                    key={`changelogs-${changelog.version}-entry-${entryIndex}`}
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      gap: 0.5,
+                      alignItems: 'baseline',
+                    }}
+                  >
+                    <Typography level="body-sm" sx={{ flexGrow: 1 }}>
+                      {entry.description}
+                    </Typography>
+                    {!hideEntryType && (
+                      <Chip
+                        sx={{
+                          color: typeColorResolver(entry.changeType),
+                          flexShrink: 0,
+                          width: 'auto',
+                        }}
+                        variant={'outlined'}
+                      >
+                        {changeTypeMapper[entry.changeType]}
+                      </Chip>
+                    )}
+                  </Box>
+                ))}
+              </CardContent>
+            </Card>
+          ))}
+        </CardContent>
+      </Card>
+    ))}
+  </Box>
+);

lib/components/Base/index.ts

@@ -0,0 +1 @@
+export * from './ChangelogListBase.tsx';

lib/components/ChangelogList/ChangelogList.tsx

@@ -3,19 +3,18 @@ import { useUpdateHiveContext } from '../ChangelogContext';
 import { ChangeType } from '../../changelog.types.ts';
 import {
   ChangelogWithComponents,
-  ChangeTypeMap,
-  getTypeColor,
   groupChangelogsByComponents,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
-import ComponentList from './_internal/ComponentList.tsx';
+import { ChangelogListBase } from '../Base';
 import { GroupBy } from './ChangelogList.types.ts';
 import { useMemo } from 'react';
 
 interface Props {
   groupBy?: GroupBy;
   changeTypeMapper?: Record<ChangeType, string>;
   typeColorResolver?: (type: ChangeType) => string;
+  hideEntryType?: boolean;
 }
 
 /**
@@ -24,12 +23,14 @@ interface Props {
  * @param changeTypeMapper Overridable mapping of change types to displayable representations.
  * @param typeColorResolver Overridable function to resolve the color of a change type.
  * @param groupBy Group changelogs by component or show a simple list.
+ * @param hideEntryType Hide the type of the changelog entry.
  * @constructor
  */
 export const ChangelogList: React.FC<Props> = ({
-  changeTypeMapper = ChangeTypeMap,
-  typeColorResolver = getTypeColor,
+  changeTypeMapper,
+  typeColorResolver,
   groupBy = GroupBy.COMPONENT,
+  hideEntryType = false,
 }) => {
   const { data } = useUpdateHiveContext();
 
@@ -47,14 +48,11 @@ export const ChangelogList: React.FC<Props> = ({
     }, [data, groupBy]);
 
   return (
-    <>
-      {componentChangelogs && (
-        <ComponentList
-          changelogs={componentChangelogs}
-          changeTypeMapper={changeTypeMapper}
-          typeColorResolver={typeColorResolver}
-        />
-      )}
-    </>
+    <ChangelogListBase
+      changelogs={componentChangelogs}
+      changeTypeMapper={changeTypeMapper}
+      typeColorResolver={typeColorResolver}
+      hideEntryType={hideEntryType}
+    />
   );
 };

lib/components/ChangelogList/MinimalChangelogList.tsx

@@ -2,28 +2,25 @@ import * as React from 'react';
 import { useUpdateHiveContext } from '../ChangelogContext';
 import {
   ChangelogWithComponents,
-  ChangeTypeMap,
-  getTypeColor,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
 import { ChangeType } from '../../changelog.types.ts';
 import { useMemo } from 'react';
-import ComponentList from './_internal/ComponentList.tsx';
+import { ChangelogListBase } from '../Base';
 
 interface Props {
   changeTypeMapper?: Record<ChangeType, string>;
 }
 
 /**
+ * @deprecated Use `ChangelogList` with groupBy=GroupBy.NONE instead and hideEntryType=true.
  * Component which renders a minimal changelog list.
  *
  * The list is only ordered by creation.
  *
  * @param changeTypeMapper Overridable mapping of change types to displayable representations.
  */
-export const MinimalChangelogList: React.FC<Props> = ({
-  changeTypeMapper = ChangeTypeMap,
-}) => {
+export const MinimalChangelogList: React.FC<Props> = ({ changeTypeMapper }) => {
   const { data } = useUpdateHiveContext();
 
   const componentChangelogs: ChangelogWithComponents[] | undefined =
@@ -36,15 +33,10 @@ export const MinimalChangelogList: React.FC<Props> = ({
     }, [data]);
 
   return (
-    <>
-      {componentChangelogs && (
-        <ComponentList
-          changelogs={componentChangelogs}
-          changeTypeMapper={changeTypeMapper}
-          typeColorResolver={getTypeColor}
-          hideEntryType
-        />
-      )}
-    </>
+    <ChangelogListBase
+      changelogs={componentChangelogs}
+      changeTypeMapper={changeTypeMapper}
+      hideEntryType
+    />
   );
 };

lib/components/changelog.util.ts

@@ -65,7 +65,7 @@ export const groupChangelogsByComponents = (
 };
 
 export interface ComponentEntries {
-  component?: string;
+  component: string;
   changelogs: ChangelogEntryInterface[];
 }
 
@@ -89,5 +89,15 @@ export const groupChangelogByComponents = (
     componentsArray.push({ component, changelogs });
   });
 
+  componentsArray.sort((a, b) => {
+    if (a.component === 'Weitere Neuerungen') {
+      return 1;
+    }
+    if (b.component === 'Weitere Neuerungen') {
+      return -1;
+    }
+    return a.component.localeCompare(b.component);
+  });
+
   return componentsArray;
 };

lib/updatehive-react.ts

@@ -8,6 +8,8 @@ export type {
 
 export { useChangelogs } from './changelog.hook';
 
+export * from './components/changelog.util';
+export * from './components/Base';
 export { ChangelogContainer } from './components/ChangelogContainer';
 export { useUpdateHiveContext } from './components/ChangelogContext';
 export {