cheton commented 1 month ago

User description

https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-890/

PR Type

Documentation, Enhancement

Description

Updated sidebar routes for contributing and migration guides.
Added detailed contributing guidelines, including setup, submitting changes, and adding changesets.
Added publishing guide for NPM and GitHub releases.
Added part 1 and part 2 of contributing to React components guide.
Added contributing guidelines for React documentation site and React icons.
Added migration guides from v0 to v1 and from v1 to v2.
Fixed string formatting in router push method.

Changes walkthrough 📝

Relevant files

Enhancement

3 files

Sidebar.js `Improve sidebar accordion behavior and re-rendering` packages/react-docs/components/Sidebar.js Updated `defaultIsExpanded` logic to handle routes without paths. Added a key to `AccordionItem` to ensure re-rendering.	+8/-1
sidebar-routes.js `Update sidebar routes for contributing and migration guides` packages/react-docs/config/sidebar-routes.js Updated titles and paths for contributing and migration guides. Changed 'Contribution Guide' to 'Contributing'. Changed 'Migration Guide' to 'Migrations'.	+11/-10
index.page.js Refactor initial routing using `useOnce` hook packages/react-docs/pages/getting-started/index.page.js - Replaced `useEffect` with `useOnce` for initial routing.	+4/-5

Documentation

12 files

react-components-part-1-example.js Add example code for `Code` component packages/react-docs/pages/contributing/react-components-part-1-example.js - Added example code for the `Code` component.	+9/-1
index.page.js `Add migrations page with initial routing` packages/react-docs/pages/migrations/index.page.js - Added new page for migrations with initial routing.	+14/-0
CONTRIBUTING.md `Update contributing guidelines with detailed instructions` CONTRIBUTING.md Updated contributing guidelines. Added detailed instructions for creating pull requests and adding changesets.	+130/-16
index.page.mdx `Add detailed contributing guidelines` packages/react-docs/pages/contributing/index.page.mdx Added detailed contributing guidelines. Included setup, submitting changes, and adding changesets.	+205/-0
publishing.page.mdx `Add publishing guide for NPM and GitHub releases` packages/react-docs/pages/contributing/publishing.page.mdx - Added publishing guide for NPM and GitHub releases.	+66/-1
pull-request-review.page.mdx `Add guide for using CodiumAI PR-Agent` packages/react-docs/pages/contributing/pull-request-review.page.mdx - Added guide for using CodiumAI PR-Agent for pull request reviews.	+57/-0
react-components-part-1.page.mdx `Add part 1 of contributing to React components guide` packages/react-docs/pages/contributing/react-components-part-1.page.mdx - Added part 1 of contributing to React components guide.	+192/-1
react-components-part-2.page.mdx `Add part 2 of contributing to React components guide` packages/react-docs/pages/contributing/react-components-part-2.page.mdx - Added part 2 of contributing to React components guide.	+213/-1
react-documentation-site.page.mdx `Add contributing guidelines for React documentation site` packages/react-docs/pages/contributing/react-documentation-site.page.mdx - Added contributing guidelines for React documentation site.	+4/-2
react-icons.page.mdx `Add contributing guidelines for React icons` packages/react-docs/pages/contributing/react-icons.page.mdx - Added contributing guidelines for React icons.	+62/-1
migrating-from-v0-to-v1.page.mdx `Add migration guide from v0 to v1` packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx - Added migration guide from v0 to v1.	+436/-1
migrating-from-v1-to-v2.page.mdx `Add migration guide from v1 to v2` packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx - Added migration guide from v1 to v2.	+414/-1

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

codesandbox[bot] commented 1 month ago

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

changeset-bot[bot] commented 1 month ago

⚠️ No Changeset found

Latest commit: 8ee09abca69d392f98056c790cf0183ea895404f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codiumai-pr-agent-free[bot] commented 1 month ago

PR Reviewer Guide 🔍

(Review updated until commit https://github.com/trendmicro-frontend/tonic-ui/commit/1949c0451e5678ded507d2ffc3b1d36c4d8e9646)

⏱️ Estimated effort to review: 5 🔵🔵🔵🔵🔵

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review

**Possible Bug:** The use of `key={defaultIsExpanded}` in `packages/react-docs/components/Sidebar.js` might cause unnecessary re-renders or erratic behavior. It's generally not recommended to use a dynamic boolean as a React key because it can lead to unexpected behavior. Consider using a stable and unique key. **Code Duplication:** The new file `packages/react-docs/pages/contributing/react-components-part-1.page.mdx` and `packages/react-docs/pages/contributing/react-components-part-2.page.mdx` seem to contain a lot of duplicated or very similar content regarding contributing guidelines. It might be beneficial to abstract common instructions into reusable components or documentation sections to maintain consistency and reduce duplication. **Inconsistent API Usage:** The migration from `useEffect` to `useOnce` in `packages/react-docs/pages/getting-started/index.page.js` and `packages/react-docs/pages/migrations/index.page.js` for redirecting routes might not cover all previous functionalities or lifecycle nuances that `useEffect` provided. Ensure that `useOnce` adequately meets all operational requirements.

codiumai-pr-agent-free[bot] commented 1 month ago

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	Ensure the key is unique by combining `sectionTitle` and `defaultIsExpanded` ___ Instead of using `key={defaultIsExpanded}`, which might not be unique and could cause issues with React's reconciliation process, consider using a combination of `sectionTitle` and `defaultIsExpanded` to ensure the key is unique. [packages/react-docs/components/Sidebar.js [158]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-c10c9d154baca8ae33de9b4a356351fc771f9bb73452bbf8450bbf8b13944608R158-R158) ```diff -key={defaultIsExpanded} // Update the key when `defaultIsExpanded` changes to ensure the component re-renders +key={`${sectionTitle}-${defaultIsExpanded}`} // Update the key when `defaultIsExpanded` changes to ensure the component re-renders ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 8 Why: Using a unique key is crucial for React's reconciliation process to function correctly, especially in a list. The suggested improvement addresses a potential bug in the rendering process.	8
	Convert the `icons` array to an object to match the expected format for `theme.icons` ___ In the backward-compatible approach for icon migration, the `icons` array should be converted to an object to match the expected format for `theme.icons`. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [297-312]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR297-R312) ```diff const icons = tmicon.icons.reduce((acc, { name, paths, viewBox }) => { - return [ - ...acc, - [ - name, - - ], - ]; -}, []); + acc[name] = ( + + ); + return acc; +}, {}); ``` Suggestion importance[1-10]: 8 Why: This suggestion addresses a potential issue where the format of the `icons` variable does not match the expected format for `theme.icons`, which could lead to runtime errors. Correcting this is crucial for the functionality of the code.	8
	Add a cleanup function in the `useEffect` hook to avoid potential memory leaks ___ In the `Component` example for controlled and uncontrolled components, consider adding a cleanup function in the `useEffect` hook to avoid potential memory leaks. [packages/react-docs/pages/contributing/react-components-part-2.page.mdx [142-147]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-d17db142a291636b1afbcae14794d9b98c8549f4653376300257c2df721c3806R142-R147) ```diff useEffect(() => { const isControlled = (valueProp !== undefined); if (isControlled) { setState({ value: valueProp }); } + return () => { + // Cleanup if necessary + }; }, [valueProp]); ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 3 Why: The suggestion to add a cleanup function is generally good practice, but it's not applicable here as there are no side effects in the `useEffect` that require cleanup.	3
Best practice	Use consistent variant names when replacing deprecated components ___ To ensure consistency and avoid confusion, it is recommended to use the same variant names when replacing `FlatButton` with `Button`. For example, instead of changing `variant="solid"` to `variant="default"`, use `variant="solid"` for both. [packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx [70-71]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-31800e79b84cfd9e581467940a247c9cf75a502d93634cf59c53c35c581255e0R70-R71) ```diff - + ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: The suggestion to maintain consistent variant names when replacing components enhances readability and reduces confusion, which is a good practice.	7
	Clarify that the `useCSSBaseline` prop in `TonicProvider` is optional and defaults to `true` ___ To avoid confusion, clarify that the `useCSSBaseline` prop in `TonicProvider` is optional and defaults to `true`. [packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx [42]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-31800e79b84cfd9e581467940a247c9cf75a502d93634cf59c53c35c581255e0R42-R42) ```diff -* useCSSBaseline: To omit the recommended `CSSBaseline`, pass `useCSSBaseline={false}`. +* useCSSBaseline (optional, defaults to `true`): To omit the recommended `CSSBaseline`, pass `useCSSBaseline={false}`. ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: Adding clarity about default values and optionality of props in documentation is a good practice as it enhances the understanding for developers using the library.	7
	Use `useMemo` instead of `micro-memoize` for consistency and to avoid additional dependencies ___ In the `Component` example for context providers, consider using `useMemo` instead of `micro-memoize` for consistency and to avoid adding an additional dependency. [packages/react-docs/pages/contributing/react-components-part-2.page.mdx [73-89]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-d17db142a291636b1afbcae14794d9b98c8549f4653376300257c2df721c3806R73-R89) ```diff -import memoize from 'micro-memoize'; +import { useMemo } from 'react'; ... -const getMemoizedState = memoize(state => ({ ...state })); +const getMemoizedState = (state) => useMemo(() => ({ ...state }), [state]); ... -const context = getMemoizedState({ variant }); // or `useMemo` +const context = getMemoizedState({ variant }); ``` Suggestion importance[1-10]: 6 Why: Using `useMemo` instead of `micro-memoize` can indeed help maintain consistency and reduce dependencies. This is a valid suggestion for improving code maintainability.	6
	Rename the `colorStyle` import to `baseColorStyle` to avoid confusion with the `customColorStyle` variable ___ In the example code for using deprecated `severity` and `chart` colors, the `colorStyle` import should be renamed to avoid confusion with the `customColorStyle` variable. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [42]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR42-R42) ```diff -import { Box, TonicProvider, colorStyle } from '@tonic-ui/react'; +import { Box, TonicProvider, colorStyle as baseColorStyle } from '@tonic-ui/react'; ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 6 Why: Renaming the import to avoid confusion is a valid suggestion that improves code readability and reduces potential errors in understanding which variable is being referred to.	6
	Destructure `props` in the `Code` component to avoid passing unnecessary props to the `Box` component ___ In the `Code` component, consider destructuring `props` to avoid passing unnecessary props to the `Box` component. [packages/react-docs/pages/contributing/react-components-part-1.page.mdx [26-36]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-970b80b5a315d7ddca2649e538415396dd929a1040c98d9a44c445062d0f5618R26-R36) ```diff -const Code = forwardRef((props, ref) => { +const Code = forwardRef(({ ...props }, ref) => { const styleProps = useCodeStyle(); return ( ); }); ``` Suggestion importance[1-10]: 5 Why: While the suggestion to destructure props can help in avoiding passing unnecessary props, the provided 'improved_code' does not actually implement destructuring and is essentially the same as the existing code.	5
	Import the `Badge` component before the `AlertIcon` component for consistency and readability ___ In the example for updating icon imports, the `Badge` component should be imported from `@tonic-ui/react` before the `AlertIcon` component to maintain consistency and readability. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [220-221]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR220-R221) ```diff +import { Badge } from '@tonic-ui/react'; +import { AlertIcon } from '@tonic-ui/react-icons'; - ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 5 Why: While the suggestion improves consistency and readability, it is a minor stylistic change and does not impact the functionality or performance of the code significantly.	5
	Use parentheses around the JSX returned by the arrow function for better readability ___ For better readability and consistency, consider using parentheses around the JSX returned by the arrow function. [packages/react-docs/pages/contributing/react-components-part-1-example.js [4-6]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-6e3c073d09e9535ebf64870eba85fd1b182f039b0b8c88e28933b4a02c6eba0dR4-R6) ```diff +const App = () => ( + `This is Code component` +); - ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 4 Why: Adding parentheses enhances readability and consistency in JSX syntax, but it's a stylistic preference and not a functional requirement.	4
Performance	Memoize the style object returned by the `useCodeStyle` hook to avoid unnecessary re-renders ___ To ensure that the `useCodeStyle` hook returns a consistent object, consider memoizing the style object using `useMemo`. This can help avoid unnecessary re-renders caused by new object references. [packages/react-docs/pages/contributing/react-components-part-1.page.mdx [54-71]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-970b80b5a315d7ddca2649e538415396dd929a1040c98d9a44c445062d0f5618R54-R71) ```diff const useCodeStyle = () => { const [colorMode] = useColorMode(); const backgroundColor = { dark: 'rgba(255, 255, 255, 0.08)', light: 'rgba(0, 0, 0, 0.08)', }[colorMode]; const color = { dark: 'white:primary', light: 'black:primary', }[colorMode]; - return { + return useMemo(() => ({ backgroundColor, borderRadius: 'sm', color, fontFamily: 'mono', px: '1x', - }; + }), [backgroundColor, color]); }; ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: Memoizing the style object can indeed prevent unnecessary re-renders by ensuring the object's reference doesn't change on every render. This is a good performance optimization.	7
Maintainability	Simplify the `customColorStyle` object by defining common properties once and spreading them into both `dark` and `light` themes ___ The `customColorStyle` object can be simplified by defining the common properties once and then spreading them into both `dark` and `light` themes. This reduces redundancy and makes the code more maintainable. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [133-167]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR133-R167) ```diff +const commonStyles = { + risk: { + high: 'red:50', + medium: 'yellow:50', + low: 'green:40', + none: 'gray:50', + }, + severity: { + critical: 'magenta:60', + high: 'red:50', + medium: 'orange:50', + low: 'yellow:50', + info: 'gray:50', + }, +}; + const customColorStyle = { ...colorStyle, dark: { ...colorStyle.dark, - risk: { - high: 'red:50', - medium: 'yellow:50', - low: 'green:40', - none: 'gray:50', - }, - severity: { - critical: 'magenta:60', - high: 'red:50', - medium: 'orange:50', - low: 'yellow:50', - info: 'gray:50', - }, + ...commonStyles, }, light: { ...colorStyle.light, - risk: { - high: 'red:60', - medium: 'yellow:50', - low: 'green:50', - none: 'gray:50', - }, - severity: { - critical: 'magenta:60', - high: 'red:60', - medium: 'orange:50', - low: 'yellow:50', - info: 'gray:50', - }, + ...commonStyles, }, }; ``` Suggestion importance[1-10]: 7 Why: The suggestion correctly identifies an opportunity to reduce redundancy and improve maintainability by using a common style object. This is a good practice for cleaner and more maintainable code.	7
Enhancement	Simplify the `ActionButton` component by removing the `forwardRef` function ___ The `ActionButton` component can be simplified by using the `css` prop directly on the `Button` component without the need for the `forwardRef` function. [packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx [82-105]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-31800e79b84cfd9e581467940a247c9cf75a502d93634cf59c53c35c581255e0R82-R105) ```diff -const ActionButton = forwardRef((props, ref) => ( +const ActionButton = (props) => ( -)); +); ``` Suggestion importance[1-10]: 6 Why: Simplifying the component by removing unnecessary use of `forwardRef` improves code maintainability and readability, though the original use of `forwardRef` might be justified if refs are needed externally.	6
Enhancement	Simplify the `useOnce` callback by using an arrow function directly ___ To improve readability and maintainability, consider using an arrow function directly within `useOnce` instead of defining it inline. [packages/react-docs/pages/getting-started/index.page.js [7-9]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-523a83db887b5ce64e63b82610dc3ffa73e43b7f62a0da3ab0f6650a747bb58bR7-R9) ```diff -useOnce(() => { - router.push('/getting-started/usage'); -}); +useOnce(() => router.push('/getting-started/usage')); ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 5 Why: The suggestion improves readability and succinctness of the code, though it's a minor enhancement and not critical.	5

codesandbox-ci[bot] commented 1 month ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

trendmicro-frontend-bot commented 1 month ago

Tonic UI Demo

2024-07-09 16:06:58 +0000 The PR #890 (8ee09abca69d392f98056c790cf0183ea895404f) has been deployed to https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-890/

codecov[bot] commented 1 month ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 74.78%. Comparing base (9ad2cc9) to head (8ee09ab).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## v2 #890 +/- ## ========================================== + Coverage 74.76% 74.78% +0.01% ========================================== Files 377 377 Lines 6155 6155 ========================================== + Hits 4602 4603 +1 + Misses 1553 1552 -1 ``` | [Flag](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | Coverage Δ | | |---|---|---| | [-base](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [-github](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [-hooks](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [-icons](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [-system](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [codemod](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [react](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [theme](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | | [utils](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/890/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.78% <ø> (+0.01%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

cheton commented 1 month ago

/review

codiumai-pr-agent-free[bot] commented 1 month ago

Persistent review updated to latest commit https://github.com/trendmicro-frontend/tonic-ui/commit/1949c0451e5678ded507d2ffc3b1d36c4d8e9646

cheton commented 1 month ago

/improve

cheton commented 1 month ago

/ask I added a Adding a changeset section under Submitting Changes. Are there any paragraphs that could be improved to help maintainers become more familiar with Changesets?

codiumai-pr-agent-free[bot] commented 1 month ago

Ask❓

I added a Adding a changeset section under Submitting Changes. Are there any paragraphs that could be improved to help maintainers become more familiar with Changesets?

Answer:

The Adding a changeset section is quite comprehensive and well-structured. However, there are a few improvements that could make it even clearer and more helpful for maintainers:

Clarify the Purpose of Changesets: Explain briefly why changesets are important and how they help in versioning and changelog management.
Step-by-Step Instructions: Ensure that each step is clearly delineated and easy to follow.
Example Changeset: Provide a more detailed example of a changeset file, including a description of what each part does.
Common Mistakes: Mention any common mistakes to avoid when creating changesets.

Here is a revised version of the section with these improvements:

Adding a Changeset

This monorepo uses Changesets for versioning and changelog management. Changesets help in documenting updates, ensuring consistent versioning, and generating changelogs automatically. If you make changes to versioned packages, be sure to add a new changeset to document these updates.

When to Add a Changeset

After making changes, a changeset bot will comment on your pull request (PR) indicating whether you need to add a changeset or confirming that one has already been added. If your changes should result in a version bump, follow the steps below to add a changeset.

How to Add a Changeset

If you are new to changesets, visit the Changesets documentation to learn about changesets.

Create a Changeset File:
- The filename for the changeset can be tonic-ui-#.md, where # is the pull request number:
```
.changeset/
tonic-ui-<pull_request_number>.md
```

Write the Changeset:

The changeset file should include the packages being released in the YAML front matter with associated semver bump types, followed by a summary of the changes in markdown.

Example:

---
'@tonic-ui/react': minor
'@tonic-ui/react-icons': patch
---

### Summary

- Added new `Button` component with enhanced styling options.
- Fixed a bug in the `Modal` component that caused it to close unexpectedly.

Common Mistakes to Avoid:
- Ensure that the package names in the YAML front matter are correct.
- Use the correct semver bump types (major, minor, patch).
- Provide a clear and concise summary of the changes.

By following these steps, you can ensure that your changes are properly documented and versioned, making it easier for maintainers and users to understand the updates.

cheton commented 1 month ago

/ask Help review the contributing guidelines for the recent modifications

codiumai-pr-agent-free[bot] commented 1 month ago

Ask❓

Help review the contributing guidelines for the recent modifications

Answer:

The recent modifications to the contributing guidelines in the PR introduce several enhancements and additional instructions. Here is a detailed review of the changes:

General Improvements:

Title and Structure:
- The title has been changed from "Contributing" to "Contributing Guidelines," which is more descriptive.
- The structure is more organized, with clear sections and subsections, making it easier to follow.

Detailed Additions:

Submitting Changes:
- Creating a Pull Request:
  - The steps for creating a pull request are clearly outlined, including branch naming conventions and the importance of following the Conventional Commits specification.
  - The instructions for pushing changes and creating a pull request on GitHub are detailed and include helpful links.
- Adding a Changeset:
  - This section is new and provides comprehensive instructions on when and how to add a changeset.
  - It explains the purpose of changesets, how to create a changeset file, and what information to include.
  - The use of images and links to external documentation (e.g., Changesets documentation) is helpful for new contributors.
Conventional Commits:
- The guidelines for Conventional Commits are expanded with more examples and detailed explanations of commit types and their impact on versioning.
- The table summarizing commit types and their descriptions is a useful reference.
Publishing Guide:
- A new section on publishing packages to NPM and creating GitHub release notes is added.
- The steps for building the code, running the publish command, and verifying the published package are clearly outlined.
- Instructions for generating GitHub release notes are detailed and include visual aids.

Specific Feedback:

Clarity and Detail:
- The added details and examples make the guidelines more comprehensive and easier to understand.
- The use of visual aids (e.g., images) and links to external resources enhances the clarity of the instructions.
Consistency:
- The guidelines consistently follow a structured format, which improves readability.
- The use of consistent terminology (e.g., "Conventional Commits," "changeset") throughout the document is commendable.
Practicality:
- The practical steps for setting up the documentation site, creating a pull request, and adding a changeset are well-explained.
- The inclusion of real-world examples (e.g., commit messages, changeset files) makes the guidelines more practical and actionable.

Suggestions for Further Improvement:

Linking to Examples:
- Consider linking to example pull requests or changesets in the repository to provide real-world references for contributors.
Highlighting Key Points:
- Use callouts or highlights for key points, such as the importance of following the Conventional Commits specification or the need to add a changeset for versioned packages.
Interactive Elements:
- If possible, include interactive elements or code snippets that contributors can copy and paste directly into their projects.

Overall, the modifications to the contributing guidelines significantly enhance the documentation, making it more detailed, organized, and user-friendly. These changes will likely improve the contributor experience and ensure a more consistent and efficient contribution process.

cheton commented 1 month ago

/ask I want to add a "Pull Request Review" section under the "Contributing" category. This section will detail a pull request review process that integrates the CodiumAI PR Agent (https://github.com/apps/codiumai-pr-agent) app, an AI-powered tool for automated analysis, feedback, and suggestions to automate the review flow by commenting on pull requests. The CodiumAI PR-Agent app has been installed on Tonic UI repository.

Here are the supported commands:

Auto Description (/describe): Automatically generating PR description - title, type, summary, code walkthrough and labels.
Auto Review (/review): Adjustable feedback about the PR, possible issues, security concerns, review effort and more.
Code Suggestions (/improve): Code suggestions for improving the PR.
Question Answering (/ask ...): Answering free-text questions about the PR.
Update Changelog (/update_changelog): Automatically updating the CHANGELOG.md file with the PR changes.
Find Similar Issue (/similar_issue): Automatically retrieves and presents similar issues.

Please help implement the "Pull Request Review" in MDX according to the above context and CodiumAI PR-Agent documentation at https://pr-agent-docs.codium.ai/.

codiumai-pr-agent-free[bot] commented 1 month ago

Ask❓

I want to add a Pull Request Review section under the Contributing category. This section will detail a pull request review process that integrates the CodiumAI PR Agent (https://github.com/apps/codiumai-pr-agent) app, an AI-powered tool for automated analysis, feedback, and suggestions to automate the review flow by commenting on pull requests. The CodiumAI PR-Agent app has been installed on Tonic UI repository. Here are the supported commands: Auto Description (/describe): Automatically generating PR description - title, type, summary, code walkthrough and labels. Auto Review (/review): Adjustable feedback about the PR, possible issues, security concerns, review effort and more. Code Suggestions (/improve): Code suggestions for improving the PR. Question Answering (/ask ...): Answering free-text questions about the PR. Update Changelog (/update_changelog): Automatically updating the CHANGELOG.md file with the PR changes. Find Similar Issue (/similar_issue): Automatically retrieves and presents similar issues. Please help implement the Pull Request Review in MDX according to the above context and CodiumAI PR-Agent documentation at https://pr-agent-docs.codium.ai/.

Answer:

Sure, I can help you with that. Below is the implementation of the "Pull Request Review" section in MDX format, integrated with the CodiumAI PR-Agent app:

## Pull Request Review

To streamline the pull request (PR) review process, we have integrated the CodiumAI PR-Agent app into the Tonic UI repository. This AI-powered tool provides automated analysis, feedback, and suggestions to enhance the review flow by commenting on pull requests. Below are the steps and commands you can use to leverage this tool effectively.

### Using CodiumAI PR-Agent

The CodiumAI PR-Agent app supports several commands to assist with various aspects of the PR review process. Here are the supported commands and their usage:

#### Auto Description

Automatically generate a PR description, including the title, type, summary, code walkthrough, and labels.

**Command:**

/describe


**Usage:**
Add a comment with the command `/describe` on the PR to trigger the auto description generation.

#### Auto Review

Get adjustable feedback about the PR, including possible issues, security concerns, review effort, and more.

**Command:**

/review


**Usage:**
Add a comment with the command `/review` on the PR to trigger the auto review process.

#### Code Suggestions

Receive code suggestions for improving the PR.

**Command:**

/improve


**Usage:**
Add a comment with the command `/improve` on the PR to get code improvement suggestions.

#### Question Answering

Ask free-text questions about the PR and get answers.

**Command:**

/ask [your question]


**Usage:**
Add a comment with the command `/ask [your question]` on the PR to get answers to specific questions about the PR.

#### Update Changelog

Automatically update the `CHANGELOG.md` file with the PR changes.

**Command:**

/update_changelog


**Usage:**
Add a comment with the command `/update_changelog` on the PR to update the changelog with the changes introduced in the PR.

#### Find Similar Issue

Automatically retrieve and present similar issues related to the PR.

**Command:**

/similar_issue


**Usage:**
Add a comment with the command `/similar_issue` on the PR to find and present similar issues.

### Example Workflow

1. **Create a Pull Request:**
   - Follow the [Contributing Guidelines](../contributing) to create and submit a pull request.

2. **Generate PR Description:**
   - Add a comment `/describe` on the PR to generate a detailed description.

3. **Automated Review:**
   - Add a comment `/review` on the PR to get an automated review with feedback and suggestions.

4. **Improve Code:**
   - If needed, add a comment `/improve` on the PR to receive code improvement suggestions.

5. **Ask Questions:**
   - If you have any specific questions about the PR, add a comment `/ask [your question]` to get answers.

6. **Update Changelog:**
   - Add a comment `/update_changelog` on the PR to update the `CHANGELOG.md` file with the changes.

7. **Find Similar Issues:**
   - Add a comment `/similar_issue` on the PR to find similar issues that might be related.

By following these steps and utilizing the CodiumAI PR-Agent commands, you can ensure a more efficient and thorough review process for your pull requests.

For more details on the CodiumAI PR-Agent commands, refer to the [CodiumAI PR-Agent documentation](https://pr-agent-docs.codium.ai/).

This section provides a comprehensive guide on how to use the CodiumAI PR-Agent app for pull request reviews, including the commands and their usage.

Category	Suggestion	Score
Possible issue	Ensure the key is unique by combining `sectionTitle` and `defaultIsExpanded` ___ Instead of using `key={defaultIsExpanded}`, which might not be unique and could cause issues with React's reconciliation process, consider using a combination of `sectionTitle` and `defaultIsExpanded` to ensure the key is unique. [packages/react-docs/components/Sidebar.js [158]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-c10c9d154baca8ae33de9b4a356351fc771f9bb73452bbf8450bbf8b13944608R158-R158) ```diff -key={defaultIsExpanded} // Update the key when `defaultIsExpanded` changes to ensure the component re-renders +key={`${sectionTitle}-${defaultIsExpanded}`} // Update the key when `defaultIsExpanded` changes to ensure the component re-renders ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 8 Why: Using a unique key is crucial for React's reconciliation process to function correctly, especially in a list. The suggested improvement addresses a potential bug in the rendering process.	8
	Convert the `icons` array to an object to match the expected format for `theme.icons` ___ In the backward-compatible approach for icon migration, the `icons` array should be converted to an object to match the expected format for `theme.icons`. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [297-312]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR297-R312) ```diff const icons = tmicon.icons.reduce((acc, { name, paths, viewBox }) => { - return [ - ...acc, - [ - name, - - ], - ]; -}, []); + acc[name] = ( + + ); + return acc; +}, {}); ``` Suggestion importance[1-10]: 8 Why: This suggestion addresses a potential issue where the format of the `icons` variable does not match the expected format for `theme.icons`, which could lead to runtime errors. Correcting this is crucial for the functionality of the code.	8
	Add a cleanup function in the `useEffect` hook to avoid potential memory leaks ___ In the `Component` example for controlled and uncontrolled components, consider adding a cleanup function in the `useEffect` hook to avoid potential memory leaks. [packages/react-docs/pages/contributing/react-components-part-2.page.mdx [142-147]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-d17db142a291636b1afbcae14794d9b98c8549f4653376300257c2df721c3806R142-R147) ```diff useEffect(() => { const isControlled = (valueProp !== undefined); if (isControlled) { setState({ value: valueProp }); } + return () => { + // Cleanup if necessary + }; }, [valueProp]); ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 3 Why: The suggestion to add a cleanup function is generally good practice, but it's not applicable here as there are no side effects in the `useEffect` that require cleanup.	3
Best practice	Use consistent variant names when replacing deprecated components ___ To ensure consistency and avoid confusion, it is recommended to use the same variant names when replacing `FlatButton` with `Button`. For example, instead of changing `variant="solid"` to `variant="default"`, use `variant="solid"` for both. [packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx [70-71]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-31800e79b84cfd9e581467940a247c9cf75a502d93634cf59c53c35c581255e0R70-R71) ```diff - + ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: The suggestion to maintain consistent variant names when replacing components enhances readability and reduces confusion, which is a good practice.	7
	Clarify that the `useCSSBaseline` prop in `TonicProvider` is optional and defaults to `true` ___ To avoid confusion, clarify that the `useCSSBaseline` prop in `TonicProvider` is optional and defaults to `true`. [packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx [42]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-31800e79b84cfd9e581467940a247c9cf75a502d93634cf59c53c35c581255e0R42-R42) ```diff -* useCSSBaseline: To omit the recommended `CSSBaseline`, pass `useCSSBaseline={false}`. +* useCSSBaseline (optional, defaults to `true`): To omit the recommended `CSSBaseline`, pass `useCSSBaseline={false}`. ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: Adding clarity about default values and optionality of props in documentation is a good practice as it enhances the understanding for developers using the library.	7
	Use `useMemo` instead of `micro-memoize` for consistency and to avoid additional dependencies ___ In the `Component` example for context providers, consider using `useMemo` instead of `micro-memoize` for consistency and to avoid adding an additional dependency. [packages/react-docs/pages/contributing/react-components-part-2.page.mdx [73-89]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-d17db142a291636b1afbcae14794d9b98c8549f4653376300257c2df721c3806R73-R89) ```diff -import memoize from 'micro-memoize'; +import { useMemo } from 'react'; ... -const getMemoizedState = memoize(state => ({ ...state })); +const getMemoizedState = (state) => useMemo(() => ({ ...state }), [state]); ... -const context = getMemoizedState({ variant }); // or `useMemo` +const context = getMemoizedState({ variant }); ``` Suggestion importance[1-10]: 6 Why: Using `useMemo` instead of `micro-memoize` can indeed help maintain consistency and reduce dependencies. This is a valid suggestion for improving code maintainability.	6
	Rename the `colorStyle` import to `baseColorStyle` to avoid confusion with the `customColorStyle` variable ___ In the example code for using deprecated `severity` and `chart` colors, the `colorStyle` import should be renamed to avoid confusion with the `customColorStyle` variable. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [42]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR42-R42) ```diff -import { Box, TonicProvider, colorStyle } from '@tonic-ui/react'; +import { Box, TonicProvider, colorStyle as baseColorStyle } from '@tonic-ui/react'; ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 6 Why: Renaming the import to avoid confusion is a valid suggestion that improves code readability and reduces potential errors in understanding which variable is being referred to.	6
	Destructure `props` in the `Code` component to avoid passing unnecessary props to the `Box` component ___ In the `Code` component, consider destructuring `props` to avoid passing unnecessary props to the `Box` component. [packages/react-docs/pages/contributing/react-components-part-1.page.mdx [26-36]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-970b80b5a315d7ddca2649e538415396dd929a1040c98d9a44c445062d0f5618R26-R36) ```diff -const Code = forwardRef((props, ref) => { +const Code = forwardRef(({ ...props }, ref) => { const styleProps = useCodeStyle(); return ( ); }); ``` Suggestion importance[1-10]: 5 Why: While the suggestion to destructure props can help in avoiding passing unnecessary props, the provided 'improved_code' does not actually implement destructuring and is essentially the same as the existing code.	5
	Import the `Badge` component before the `AlertIcon` component for consistency and readability ___ In the example for updating icon imports, the `Badge` component should be imported from `@tonic-ui/react` before the `AlertIcon` component to maintain consistency and readability. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [220-221]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR220-R221) ```diff +import { Badge } from '@tonic-ui/react'; +import { AlertIcon } from '@tonic-ui/react-icons'; - ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 5 Why: While the suggestion improves consistency and readability, it is a minor stylistic change and does not impact the functionality or performance of the code significantly.	5
	Use parentheses around the JSX returned by the arrow function for better readability ___ For better readability and consistency, consider using parentheses around the JSX returned by the arrow function. [packages/react-docs/pages/contributing/react-components-part-1-example.js [4-6]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-6e3c073d09e9535ebf64870eba85fd1b182f039b0b8c88e28933b4a02c6eba0dR4-R6) ```diff +const App = () => ( + `This is Code component` +); - ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 4 Why: Adding parentheses enhances readability and consistency in JSX syntax, but it's a stylistic preference and not a functional requirement.	4
Performance	Memoize the style object returned by the `useCodeStyle` hook to avoid unnecessary re-renders ___ To ensure that the `useCodeStyle` hook returns a consistent object, consider memoizing the style object using `useMemo`. This can help avoid unnecessary re-renders caused by new object references. [packages/react-docs/pages/contributing/react-components-part-1.page.mdx [54-71]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-970b80b5a315d7ddca2649e538415396dd929a1040c98d9a44c445062d0f5618R54-R71) ```diff const useCodeStyle = () => { const [colorMode] = useColorMode(); const backgroundColor = { dark: 'rgba(255, 255, 255, 0.08)', light: 'rgba(0, 0, 0, 0.08)', }[colorMode]; const color = { dark: 'white:primary', light: 'black:primary', }[colorMode]; - return { + return useMemo(() => ({ backgroundColor, borderRadius: 'sm', color, fontFamily: 'mono', px: '1x', - }; + }), [backgroundColor, color]); }; ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: Memoizing the style object can indeed prevent unnecessary re-renders by ensuring the object's reference doesn't change on every render. This is a good performance optimization.	7
Maintainability	Simplify the `customColorStyle` object by defining common properties once and spreading them into both `dark` and `light` themes ___ The `customColorStyle` object can be simplified by defining the common properties once and then spreading them into both `dark` and `light` themes. This reduces redundancy and makes the code more maintainable. [packages/react-docs/pages/migrations/migrating-from-v1-to-v2.page.mdx [133-167]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-5450ed5f21e92a5eff8904705f141fdfdaf088c805b2347282ae044d0ea90c3fR133-R167) ```diff +const commonStyles = { + risk: { + high: 'red:50', + medium: 'yellow:50', + low: 'green:40', + none: 'gray:50', + }, + severity: { + critical: 'magenta:60', + high: 'red:50', + medium: 'orange:50', + low: 'yellow:50', + info: 'gray:50', + }, +}; + const customColorStyle = { ...colorStyle, dark: { ...colorStyle.dark, - risk: { - high: 'red:50', - medium: 'yellow:50', - low: 'green:40', - none: 'gray:50', - }, - severity: { - critical: 'magenta:60', - high: 'red:50', - medium: 'orange:50', - low: 'yellow:50', - info: 'gray:50', - }, + ...commonStyles, }, light: { ...colorStyle.light, - risk: { - high: 'red:60', - medium: 'yellow:50', - low: 'green:50', - none: 'gray:50', - }, - severity: { - critical: 'magenta:60', - high: 'red:60', - medium: 'orange:50', - low: 'yellow:50', - info: 'gray:50', - }, + ...commonStyles, }, }; ``` Suggestion importance[1-10]: 7 Why: The suggestion correctly identifies an opportunity to reduce redundancy and improve maintainability by using a common style object. This is a good practice for cleaner and more maintainable code.	7
Enhancement	Simplify the `ActionButton` component by removing the `forwardRef` function ___ The `ActionButton` component can be simplified by using the `css` prop directly on the `Button` component without the need for the `forwardRef` function. [packages/react-docs/pages/migrations/migrating-from-v0-to-v1.page.mdx [82-105]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-31800e79b84cfd9e581467940a247c9cf75a502d93634cf59c53c35c581255e0R82-R105) ```diff -const ActionButton = forwardRef((props, ref) => ( +const ActionButton = (props) => ( -)); +); ``` Suggestion importance[1-10]: 6 Why: Simplifying the component by removing unnecessary use of `forwardRef` improves code maintainability and readability, though the original use of `forwardRef` might be justified if refs are needed externally.	6
Enhancement	Simplify the `useOnce` callback by using an arrow function directly ___ To improve readability and maintainability, consider using an arrow function directly within `useOnce` instead of defining it inline. [packages/react-docs/pages/getting-started/index.page.js [7-9]](https://github.com/trendmicro-frontend/tonic-ui/pull/890/files#diff-523a83db887b5ce64e63b82610dc3ffa73e43b7f62a0da3ab0f6650a747bb58bR7-R9) ```diff -useOnce(() => { - router.push('/getting-started/usage'); -}); +useOnce(() => router.push('/getting-started/usage')); ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 5 Why: The suggestion improves readability and succinctness of the code, though it's a minor enhancement and not critical.	5

trendmicro-frontend / tonic-ui

docs: enhance the `Contributing Guidelines` by adding `Changesets` instructions #890

User description

PR Type

Description

Changes walkthrough 📝

Review or Edit in CodeSandbox

⚠️ No Changeset found

PR Reviewer Guide 🔍

(Review updated until commit https://github.com/trendmicro-frontend/tonic-ui/commit/1949c0451e5678ded507d2ffc3b1d36c4d8e9646)

PR Code Suggestions ✨

Tonic UI Demo

Codecov Report

Ask❓

Answer:

Adding a Changeset

When to Add a Changeset

How to Add a Changeset

Ask❓

Answer:

General Improvements:

Detailed Additions:

Specific Feedback:

Suggestions for Further Improvement:

Ask❓

Answer: