From 6dee95ca4c95546f4e8f4577230aaff3b876a7ee Mon Sep 17 00:00:00 2001
From: Sascha Becker <s.becker@wertarbyte.com>
Date: Wed, 2 Oct 2024 14:51:24 +0200
Subject: [PATCH 1/6] feat: expose internal ComponentList component for direct
 rendering of changelog data

---
 .../ChangelogList/ChangelogList.tsx           |   6 +-
 .../ChangelogList/ComponentList.tsx           | 111 ++++++++++++++++++
 .../ChangelogList/MinimalChangelogList.tsx    |   9 +-
 .../ChangelogList/_internal/ComponentList.tsx | 111 ------------------
 lib/components/ChangelogList/index.ts         |   1 +
 5 files changed, 117 insertions(+), 121 deletions(-)
 create mode 100644 lib/components/ChangelogList/ComponentList.tsx
 delete mode 100644 lib/components/ChangelogList/_internal/ComponentList.tsx

diff --git a/lib/components/ChangelogList/ChangelogList.tsx b/lib/components/ChangelogList/ChangelogList.tsx
index 132c42c..9db122b 100644
--- a/lib/components/ChangelogList/ChangelogList.tsx
+++ b/lib/components/ChangelogList/ChangelogList.tsx
@@ -8,7 +8,7 @@ import {
   groupChangelogsByComponents,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
-import ComponentList from './_internal/ComponentList.tsx';
+import { ComponentList } from './ComponentList.tsx';
 import { GroupBy } from './ChangelogList.types.ts';
 import { useMemo } from 'react';
 
@@ -27,8 +27,8 @@ interface Props {
  * @constructor
  */
 export const ChangelogList: React.FC<Props> = ({
-  changeTypeMapper = ChangeTypeMap,
-  typeColorResolver = getTypeColor,
+  changeTypeMapper,
+  typeColorResolver,
   groupBy = GroupBy.COMPONENT,
 }) => {
   const { data } = useUpdateHiveContext();
diff --git a/lib/components/ChangelogList/ComponentList.tsx b/lib/components/ChangelogList/ComponentList.tsx
new file mode 100644
index 0000000..7acbf0d
--- /dev/null
+++ b/lib/components/ChangelogList/ComponentList.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 ComponentList: 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>
+);
diff --git a/lib/components/ChangelogList/MinimalChangelogList.tsx b/lib/components/ChangelogList/MinimalChangelogList.tsx
index 57d1886..13987f0 100644
--- a/lib/components/ChangelogList/MinimalChangelogList.tsx
+++ b/lib/components/ChangelogList/MinimalChangelogList.tsx
@@ -2,13 +2,11 @@ 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 { ComponentList } from './ComponentList.tsx';
 
 interface Props {
   changeTypeMapper?: Record<ChangeType, string>;
@@ -21,9 +19,7 @@ interface Props {
  *
  * @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 =
@@ -41,7 +37,6 @@ export const MinimalChangelogList: React.FC<Props> = ({
         <ComponentList
           changelogs={componentChangelogs}
           changeTypeMapper={changeTypeMapper}
-          typeColorResolver={getTypeColor}
           hideEntryType
         />
       )}
diff --git a/lib/components/ChangelogList/_internal/ComponentList.tsx b/lib/components/ChangelogList/_internal/ComponentList.tsx
deleted file mode 100644
index 27b775a..0000000
--- a/lib/components/ChangelogList/_internal/ComponentList.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Box, Card, CardContent, Chip, Divider, Typography } from '@mui/joy';
-import * as React from 'react';
-import { ChangeType } from '../../../changelog.types.ts';
-import { ChangelogWithComponents } from '../../changelog.util.ts';
-
-interface Props {
-  changelogs: ChangelogWithComponents[];
-  changeTypeMapper: Record<ChangeType, string>;
-  typeColorResolver: (type: ChangeType) => string;
-  hideEntryType?: boolean;
-}
-
-const ComponentList: React.FC<Props> = ({
-  changelogs,
-  changeTypeMapper,
-  typeColorResolver,
-  hideEntryType = false,
-}) => {
-  return (
-    <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>
-  );
-};
-
-export default ComponentList;
diff --git a/lib/components/ChangelogList/index.ts b/lib/components/ChangelogList/index.ts
index f92306f..60840e8 100644
--- a/lib/components/ChangelogList/index.ts
+++ b/lib/components/ChangelogList/index.ts
@@ -2,3 +2,4 @@ export { GroupBy } from './ChangelogList.types';
 
 export { MinimalChangelogList } from './MinimalChangelogList';
 export { ChangelogList } from './ChangelogList';
+export { ComponentList } from './ComponentList';

From 0f7a6a965d2e3718b1834e2d4310312ec2beb7a2 Mon Sep 17 00:00:00 2001
From: Sascha Becker <s.becker@wertarbyte.com>
Date: Wed, 2 Oct 2024 15:06:46 +0200
Subject: [PATCH 2/6] fix: grouped changelog not being sorted by component

---
 lib/components/changelog.util.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/lib/components/changelog.util.ts b/lib/components/changelog.util.ts
index d805cb2..880f2ad 100644
--- a/lib/components/changelog.util.ts
+++ b/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;
 };

From b93bf37f9bab21015941582915137d8647a1d6d9 Mon Sep 17 00:00:00 2001
From: Sascha Becker <s.becker@wertarbyte.com>
Date: Wed, 2 Oct 2024 15:57:07 +0200
Subject: [PATCH 3/6] refactor: deprecate MinimalChangelogList in favor of
 additional props in ChangelogList

---
 .../ChangelogList/ChangelogList.tsx           | 20 +++++++++----------
 .../ChangelogList/ComponentList.tsx           |  4 ++--
 .../ChangelogList/MinimalChangelogList.tsx    | 15 ++++++--------
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/lib/components/ChangelogList/ChangelogList.tsx b/lib/components/ChangelogList/ChangelogList.tsx
index 9db122b..4f70e59 100644
--- a/lib/components/ChangelogList/ChangelogList.tsx
+++ b/lib/components/ChangelogList/ChangelogList.tsx
@@ -3,8 +3,6 @@ import { useUpdateHiveContext } from '../ChangelogContext';
 import { ChangeType } from '../../changelog.types.ts';
 import {
   ChangelogWithComponents,
-  ChangeTypeMap,
-  getTypeColor,
   groupChangelogsByComponents,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
@@ -16,6 +14,7 @@ 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,
   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}
-        />
-      )}
-    </>
+    <ComponentList
+      changelogs={componentChangelogs}
+      changeTypeMapper={changeTypeMapper}
+      typeColorResolver={typeColorResolver}
+      hideEntryType={hideEntryType}
+    />
   );
 };
diff --git a/lib/components/ChangelogList/ComponentList.tsx b/lib/components/ChangelogList/ComponentList.tsx
index 7acbf0d..17705aa 100644
--- a/lib/components/ChangelogList/ComponentList.tsx
+++ b/lib/components/ChangelogList/ComponentList.tsx
@@ -8,14 +8,14 @@ import {
 } from '../changelog.util.ts';
 
 interface Props {
-  changelogs: ChangelogWithComponents[];
+  changelogs?: ChangelogWithComponents[];
   changeTypeMapper?: Record<ChangeType, string>;
   typeColorResolver?: (type: ChangeType) => string;
   hideEntryType?: boolean;
 }
 
 export const ComponentList: React.FC<Props> = ({
-  changelogs,
+  changelogs = [],
   changeTypeMapper = ChangeTypeMap,
   typeColorResolver = getTypeColor,
   hideEntryType = false,
diff --git a/lib/components/ChangelogList/MinimalChangelogList.tsx b/lib/components/ChangelogList/MinimalChangelogList.tsx
index 13987f0..43bcecf 100644
--- a/lib/components/ChangelogList/MinimalChangelogList.tsx
+++ b/lib/components/ChangelogList/MinimalChangelogList.tsx
@@ -13,6 +13,7 @@ interface Props {
 }
 
 /**
+ * @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.
@@ -32,14 +33,10 @@ export const MinimalChangelogList: React.FC<Props> = ({ changeTypeMapper }) => {
     }, [data]);
 
   return (
-    <>
-      {componentChangelogs && (
-        <ComponentList
-          changelogs={componentChangelogs}
-          changeTypeMapper={changeTypeMapper}
-          hideEntryType
-        />
-      )}
-    </>
+    <ComponentList
+      changelogs={componentChangelogs}
+      changeTypeMapper={changeTypeMapper}
+      hideEntryType
+    />
   );
 };

From c795c1d75519bae2f951c03d406386d5f2edf07e Mon Sep 17 00:00:00 2001
From: Sascha Becker <s.becker@wertarbyte.com>
Date: Fri, 4 Oct 2024 10:56:09 +0200
Subject: [PATCH 4/6] chore: move ComponentList into Base folder and rename to
 ChangelogListBase

---
 .../ComponentList.tsx => Base/ChangelogListBase.tsx}          | 2 +-
 lib/components/Base/index.ts                                  | 1 +
 lib/components/ChangelogList/ChangelogList.tsx                | 4 ++--
 lib/components/ChangelogList/MinimalChangelogList.tsx         | 4 ++--
 lib/components/ChangelogList/index.ts                         | 1 -
 lib/updatehive-react.ts                                       | 1 +
 6 files changed, 7 insertions(+), 6 deletions(-)
 rename lib/components/{ChangelogList/ComponentList.tsx => Base/ChangelogListBase.tsx} (98%)
 create mode 100644 lib/components/Base/index.ts

diff --git a/lib/components/ChangelogList/ComponentList.tsx b/lib/components/Base/ChangelogListBase.tsx
similarity index 98%
rename from lib/components/ChangelogList/ComponentList.tsx
rename to lib/components/Base/ChangelogListBase.tsx
index 17705aa..c19b5c9 100644
--- a/lib/components/ChangelogList/ComponentList.tsx
+++ b/lib/components/Base/ChangelogListBase.tsx
@@ -14,7 +14,7 @@ interface Props {
   hideEntryType?: boolean;
 }
 
-export const ComponentList: React.FC<Props> = ({
+export const ChangelogListBase: React.FC<Props> = ({
   changelogs = [],
   changeTypeMapper = ChangeTypeMap,
   typeColorResolver = getTypeColor,
diff --git a/lib/components/Base/index.ts b/lib/components/Base/index.ts
new file mode 100644
index 0000000..35600c9
--- /dev/null
+++ b/lib/components/Base/index.ts
@@ -0,0 +1 @@
+export * from './ChangelogListBase.tsx';
diff --git a/lib/components/ChangelogList/ChangelogList.tsx b/lib/components/ChangelogList/ChangelogList.tsx
index 4f70e59..e2b385a 100644
--- a/lib/components/ChangelogList/ChangelogList.tsx
+++ b/lib/components/ChangelogList/ChangelogList.tsx
@@ -6,7 +6,7 @@ import {
   groupChangelogsByComponents,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
-import { ComponentList } from './ComponentList.tsx';
+import { ChangelogListBase } from '../Base';
 import { GroupBy } from './ChangelogList.types.ts';
 import { useMemo } from 'react';
 
@@ -48,7 +48,7 @@ export const ChangelogList: React.FC<Props> = ({
     }, [data, groupBy]);
 
   return (
-    <ComponentList
+    <ChangelogListBase
       changelogs={componentChangelogs}
       changeTypeMapper={changeTypeMapper}
       typeColorResolver={typeColorResolver}
diff --git a/lib/components/ChangelogList/MinimalChangelogList.tsx b/lib/components/ChangelogList/MinimalChangelogList.tsx
index 43bcecf..d0c2736 100644
--- a/lib/components/ChangelogList/MinimalChangelogList.tsx
+++ b/lib/components/ChangelogList/MinimalChangelogList.tsx
@@ -6,7 +6,7 @@ import {
 } from '../changelog.util.ts';
 import { ChangeType } from '../../changelog.types.ts';
 import { useMemo } from 'react';
-import { ComponentList } from './ComponentList.tsx';
+import { ChangelogListBase } from '../Base';
 
 interface Props {
   changeTypeMapper?: Record<ChangeType, string>;
@@ -33,7 +33,7 @@ export const MinimalChangelogList: React.FC<Props> = ({ changeTypeMapper }) => {
     }, [data]);
 
   return (
-    <ComponentList
+    <ChangelogListBase
       changelogs={componentChangelogs}
       changeTypeMapper={changeTypeMapper}
       hideEntryType
diff --git a/lib/components/ChangelogList/index.ts b/lib/components/ChangelogList/index.ts
index 60840e8..f92306f 100644
--- a/lib/components/ChangelogList/index.ts
+++ b/lib/components/ChangelogList/index.ts
@@ -2,4 +2,3 @@ export { GroupBy } from './ChangelogList.types';
 
 export { MinimalChangelogList } from './MinimalChangelogList';
 export { ChangelogList } from './ChangelogList';
-export { ComponentList } from './ComponentList';
diff --git a/lib/updatehive-react.ts b/lib/updatehive-react.ts
index fd69700..9244718 100644
--- a/lib/updatehive-react.ts
+++ b/lib/updatehive-react.ts
@@ -8,6 +8,7 @@ export type {
 
 export { useChangelogs } from './changelog.hook';
 
+export * from './components/Base';
 export { ChangelogContainer } from './components/ChangelogContainer';
 export { useUpdateHiveContext } from './components/ChangelogContext';
 export {

From 980377f85513cdbdceb7ef42b7135bb47589a50a Mon Sep 17 00:00:00 2001
From: Sascha Becker <s.becker@wertarbyte.com>
Date: Fri, 4 Oct 2024 10:56:37 +0200
Subject: [PATCH 5/6] feat: export util functions globally

---
 lib/updatehive-react.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/updatehive-react.ts b/lib/updatehive-react.ts
index 9244718..e0f9b55 100644
--- a/lib/updatehive-react.ts
+++ b/lib/updatehive-react.ts
@@ -8,6 +8,7 @@ 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';

From cfdac4f466b8a7b51be232c1285d6020ba7c35ac Mon Sep 17 00:00:00 2001
From: Sascha Becker <s.becker@wertarbyte.com>
Date: Fri, 4 Oct 2024 11:27:40 +0200
Subject: [PATCH 6/6] chore: extend demo to include all variants via tabs

---
 src/App.tsx | 82 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 52a41fa..49db0cc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,12 @@
 import * as React from 'react';
+import { Box, Tab, TabList, TabPanel, Tabs } from '@mui/joy';
 import {
   ChangelogContainer,
   ChangelogList,
   useChangelogs,
+  ChangelogListBase,
+  groupChangelogsByComponents,
+  GroupBy,
 } from '../dist/updatehive-react';
 
 export const App: React.FC = () => {
@@ -25,35 +29,61 @@ export const App: React.FC = () => {
   }
 
   return (
-    <div>
+    <Box>
       <h1>UpdateHive - React Client Component</h1>
-      <h3>Example using UpdateHive react hook</h3>
-      <div>
-        {loading || error || data === undefined ? (
-          <div>Loading changelogs ...</div>
-        ) : (
+      <h3>Examples using UpdateHive react components</h3>
+      <Tabs>
+        <TabList>
+          <Tab>Hook</Tab>
+          <Tab>Minimal</Tab>
+          <Tab>ChangelogList</Tab>
+          <Tab>Base</Tab>
+        </TabList>
+        <TabPanel value={0}>
+          <h3>Example using UpdateHive react hook</h3>
           <div>
-            <div className="hook table" key={'header'}>
-              <div className="hook div">Version</div>
-              <div className="hook div">Description</div>
-            </div>
-            {data.map((changelog, index) => (
-              <div className="hook table" key={`changelog-${index}`}>
-                <div className="hook div">{changelog.version}</div>
-                <div className="hook div">{changelog.description}</div>
+            {loading || error || data === undefined ? (
+              <div>Loading changelogs ...</div>
+            ) : (
+              <div>
+                <div className="hook table" key={'header'}>
+                  <div className="hook div">Version</div>
+                  <div className="hook div">Description</div>
+                </div>
+                {data.map((changelog, index) => (
+                  <div className="hook table" key={`changelog-${index}`}>
+                    <div className="hook div">{changelog.version}</div>
+                    <div className="hook div">{changelog.description}</div>
+                  </div>
+                ))}
               </div>
-            ))}
+            )}
           </div>
-        )}
-      </div>
-      <h3>Example using UpdateHive react components</h3>
-      <ChangelogContainer
-        API_KEY={API_KEY}
-        product={PRODUCT}
-        config={{ url: serviceURL }}
-      >
-        <ChangelogList />
-      </ChangelogContainer>
-    </div>
+        </TabPanel>
+        <TabPanel value={1}>
+          <ChangelogContainer
+            API_KEY={API_KEY}
+            product={PRODUCT}
+            config={{ url: serviceURL }}
+          >
+            <ChangelogList groupBy={GroupBy.NONE} hideEntryType />
+          </ChangelogContainer>
+        </TabPanel>
+        <TabPanel value={2}>
+          <ChangelogContainer
+            API_KEY={API_KEY}
+            product={PRODUCT}
+            config={{ url: serviceURL }}
+          >
+            <ChangelogList />
+          </ChangelogContainer>
+        </TabPanel>
+        <TabPanel value={3}>
+          <ChangelogListBase
+            changelogs={data && groupChangelogsByComponents(data)}
+          />
+        </TabPanel>
+      </Tabs>
+    </Box>
   );
 };