dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix release version 1.11.0

Browse Source
This commit is contained in:
Wildan Nursahidan
2025-05-25 03:20:17 +07:00
parent 209a80d5e8
commit 73a9843d4e
53 changed files with 1985 additions and 3334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
contents/docs/getting-started/components/release-note/index.mdx
View File

@@ -4,43 +4,127 @@ description: The Release Note component makes it easy for you to write updates f
date: 31-12-2024
---
## Usage
The Release Note component makes it easy for you to write and display changelogs in a structured and organized way. This component consists of two main parts: `Release` and `Changes` which can be used to display version, date, release title, and a list of changes categorized by type.
To fill in the Release Note content that will be displayed on the Changelog page, open the `CHANGELOG.md` file, write it with the markdown tag.
## Basic Usage
<Accordion title="Example" defaultOpen={true}>
```plaintext:CHANGELOG.md
## [1.3.0] - 2024-12-31
Here is a basic example of using the Release Note component:
> Release Note Feature to Make it Easier to Write Changelogs
```jsx
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
<Changes type="added">
- New feature to improve accessibility
- Keyboard navigation support for dialog components
</Changes>
<Changes type="fixed">
- Bug fix for mobile menu
- Fixed loading issues on documentation pages
</Changes>
</Release>
```
![Your Image Alt Text](https://docubook.pro/images/example-img.png)
### Added
- New Release Note Feature
- New Layout for Changelog page
- New Changelog page
- add Release Note Component
- Easily write release notes directly from the CHANGELOG.md file
- Toc for versioning
- Write with the markdown tag
- add lib / changelog.ts
```
<Accordion title="Render As" defaultOpen={true}>
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
<Changes type="added">
- New feature to improve accessibility
- Keyboard navigation support for dialog components
</Changes>
<Changes type="fixed">
- Bug fix for mobile menu
- Fixed loading issues on documentation pages
</Changes>
</Release>
</Accordion>
## Preview : Render Output
## Release Component
<Accordion title="Show Render">
![show demo changelog](/images/view-changelog.png)
</Accordion>
The `Release` component is used to display key information about a release version, such as version number, release date, and title.
## Changes Category
### Release Props
| **Category** | **Description** |
| -------------- | ---------------------------------------------------------------------------------------------------- |
| **Added** | Features or functionalities that are newly introduced. |
| **Improved** | Enhancements or optimizations made to existing features or performance. |
| **Fixed** | Bugs, issues, or errors that have been resolved in this version. |
| **Deprecated** | Features or functionalities that are no longer recommended for use and may be removed in the future. |
| **Removed** | Features or functionalities that have been completely taken out of the product. |
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `version` | string | ✅ | Version number to display (without "v" prefix) |
| `title` | string | ✅ | Title or name of the release |
| `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
| `children` | ReactNode | ✅ | Child content, typically `Changes` components |
```jsx
<Release
version="1.10.1"
date="2025-05-24"
title="Accessibility Improvements and Bug Fixes"
>
{/* Changes content here */}
</Release>
```
## Changes Component
The `Changes` component is used to group changes by category with appropriate icons and colors.
### Changes Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `type` | string | ✅ | Type of change: 'added', 'fixed', 'improved', 'deprecated', or 'removed' |
| `children` | ReactNode | ✅ | List of changes, can be text with Markdown formatting |
### Changes Note
| Category | Description |
|----------|-------------|
| `added` | New features or functionality added |
| `fixed` | Bugs or issues that have been fixed |
| `improved` | Enhancements or optimizations to existing features |
| `deprecated` | Features that are not recommended and may be removed in future |
| `removed` | Features that have been completely removed |
### Changes Example
```jsx
<Changes type="added">
- New feature to improve accessibility
- Keyboard navigation support for dialog components
</Changes>
<Changes type="fixed">
- Bug fix for mobile menu
- Fixed loading issues on documentation pages
</Changes>
```
## Complete Implementation
Here is a complete example of using the Release Note component in an MDX file:
````plaintext
<!-- hidden heading for TOC -->
<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
<Changes type="added">
- Keyboard navigation for all interactive components
- Screen reader support for table components
- Dark mode feature with system preference detection
</Changes>
<Changes type="fixed">
- Fixed mobile menu bug that wouldn't close when navigating to another page
- Fixed loading issues on documentation pages
- Fixed display issues in Safari browser
</Changes>
<Changes type="improved">
- Improved page loading performance
- Optimized JavaScript bundle size
- Enhanced responsive design across all viewports
</Changes>
</Release>
````
## Usage Tips
1. **Date Format**: Use a consistent date format for all releases.
2. **Version Ordering**: Arrange versions in reverse chronological order (newest version at the top).
3. **List Items**: You can use standard Markdown list format (`-` or `*`) or write text directly, the component will handle the formatting.
4. **TOC**: Use hidden headings to ensure each version is detected in the Table of Contents. Use `<div className="sr-only">### v 1.10.1</div>`