docs: adding changelogs (#402)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
	- Updated the version display logic in the UI Components documentation.
- Added a "Getting Started - Changelogs" section for easier access to
component and system changelogs.
- Improved navigation within the Getting Started guide, including better
alignment and additional navigation buttons.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/documentation/.ladle/components.tsx

@@ -99,8 +99,8 @@ export const Provider: GlobalProvider = ({
 				}
 				row2={
 					<div>
-						UI Components v{import.meta.env.BUILDVERSION} - &copy;{" "}
-						{new Date().getFullYear()} {import.meta.env.OWNER}
+						UI Components - &copy; {new Date().getFullYear()}{" "}
+						{import.meta.env.OWNER}
 					</div>
 				}
 			/>

packages/documentation/.ladle/config.mjs

@@ -8,6 +8,7 @@ export default {
 		"getting-started--configuration",
 		"getting-started--usage",
 		"getting-started--release-tags",
+		"getting-started--changelogs",
 		"Components*",
 		"Form-components*",
 		"System*",

packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx

@@ -2,7 +2,7 @@
 
 import { linkTo, Story } from "@ladle/react";
 import { ButtonIcon, Pill } from "@versini/ui-components";
-import { IconPrevious } from "@versini/ui-icons";
+import { IconNext, IconPrevious } from "@versini/ui-icons";
 import { Flexgrid, FlexgridItem } from "@versini/ui-system";
 
 export default {
@@ -97,7 +97,7 @@ export const ReleaseTags: Story<any> = () => (
 		</ul>
 
 		<div className="mt-8">
-			<Flexgrid alignHorizontal="flex-start">
+			<Flexgrid alignHorizontal="space-between">
 				<FlexgridItem>
 					<ButtonIcon
 						labelRight="Usage"
@@ -106,6 +106,14 @@ export const ReleaseTags: Story<any> = () => (
 						<IconPrevious monotone />
 					</ButtonIcon>
 				</FlexgridItem>
+				<FlexgridItem>
+					<ButtonIcon
+						labelLeft="Changelogs"
+						onClick={linkTo("getting-started--changelogs")}
+					>
+						<IconNext monotone />
+					</ButtonIcon>
+				</FlexgridItem>
 			</Flexgrid>
 		</div>
 	</>

packages/documentation/src/GettingStarted/6-changelogs.stories.mdx

@@ -0,0 +1,61 @@
+import { linkTo, Meta } from "@ladle/react";
+import { Button, ButtonIcon, Card } from "@versini/ui-components";
+import { Flexgrid, FlexgridItem } from "@versini/ui-system";
+import { IconNext, IconPrevious } from "@versini/ui-icons";
+import ComponentsChangelog from "../../../ui-components/CHANGELOG.md";
+import StylesChangelog from "../../../ui-styles/CHANGELOG.md";
+import FormComponentsChangelog from "../../../ui-form/CHANGELOG.md";
+import IconsChangelog from "../../../ui-icons/CHANGELOG.md";
+import SystemChangelog from "../../../ui-system/CHANGELOG.md";
+
+<Meta title="Getting started/Changelogs" />
+
+<h1>Changelogs</h1>
+
+<details>
+	<summary>Components</summary>
+	<Card>
+		<ComponentsChangelog />
+	</Card>
+</details>
+
+<details>
+	<summary>Styles</summary>
+	<Card>
+		<StylesChangelog />
+	</Card>
+</details>
+
+<details>
+	<summary>Form Components</summary>
+	<Card>
+		<FormComponentsChangelog />
+	</Card>
+</details>
+
+<details>
+	<summary>Icons</summary>
+	<Card>
+		<IconsChangelog />
+	</Card>
+</details>
+
+<details>
+	<summary>System</summary>
+	<Card>
+		<SystemChangelog />
+	</Card>
+</details>
+
+<div className="mt-8">
+	<Flexgrid alignHorizontal="space-between">
+		<FlexgridItem>
+			<ButtonIcon
+				labelRight="Release Tags"
+				onClick={linkTo("getting-started--release-tags")}
+			>
+				<IconPrevious monotone />
+			</ButtonIcon>
+		</FlexgridItem>
+	</Flexgrid>
+</div>