Docs Improvements for various components #1029
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis pull request performs comprehensive documentation and formatting enhancements across numerous UI components. It introduces new API files, SEO modules, and usage examples while restructuring the documentation layouts for components such as AspectRatio, BlockQuote, Button, Callout, Card, Code, Em, Heading, Kbd, Progress, Separator, Strong, Text, and Tooltip. Additionally, minor formatting adjustments are made in test files and core component fragments. Changes
Sequence Diagram(s)(No diagram provided as the changes primarily focus on documentation restructuring and formatting improvements without altering component control flow.) Possibly related PRs
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
docs/app/docs/components/blockquote/docs/api/blockquote.tsxOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docs/components/accordion/docs/seo/index.jsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docs/components/blockquote/docs/seo.jsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (30)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Copilot reviewed 53 out of 59 changed files in this pull request and generated 1 comment.
Files not reviewed (6)
- docs/app/docs/components/aspect-ratio/page.mdx: Language not supported
- docs/app/docs/components/avatar/page.mdx: Language not supported
- docs/app/docs/components/blockquote/page.mdx: Language not supported
- docs/app/docs/components/button/page.mdx: Language not supported
- docs/app/docs/components/callout/page.mdx: Language not supported
- docs/app/docs/components/card/page.mdx: Language not supported
| @@ -0,0 +1 @@ | |||
|
No newline at end of file |
|||
There was a problem hiding this comment.
The API documentation for BlockQuote is incomplete. Consider providing detailed documentation similar to the other components or removing the placeholder if not needed.
| /** | |
| * BlockQuote Component | |
| * | |
| * The BlockQuote component is used to display a block quotation. | |
| * It is typically used to highlight a section of text as a quotation. | |
| * | |
| * Props: | |
| * - `children` (React.ReactNode): The content to be displayed inside the blockquote. | |
| * - `cite` (string): The source of the quotation. | |
| * | |
| * Usage: | |
| * ``` | |
| * <BlockQuote cite="Author Name"> | |
| * This is a block quotation. | |
| * </BlockQuote> | |
| * ``` | |
| * | |
| * Example: | |
| * ``` | |
| * <BlockQuote cite="Albert Einstein"> | |
| * Imagination is more important than knowledge. | |
| * </BlockQuote> | |
| * ``` | |
| */ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (31)
docs/app/docs/components/tooltip/docs/anatomy.tsx (1)
1-14: Add actual content to Tooltip anatomy exampleThe anatomy component correctly shows the structure of the Tooltip component with its nested elements, but the placeholder comments don't provide a complete working example.
Consider replacing the placeholder comments with actual content to demonstrate a working Tooltip component:
import Tooltip from "@radui/ui/Tooltip"; export default () => { return ( <Tooltip.Root> <Tooltip.Trigger> - {/* Your trigger element */} + <button>Hover me</button> </Tooltip.Trigger> <Tooltip.Content> - {/* Your tooltip content */} + This is a tooltip </Tooltip.Content> </Tooltip.Root> ); }docs/app/docs/components/separator/docs/seo.js (1)
1-18: LGTM with a minor suggestion on the keywords list.The SEO metadata is well-structured with a clear title and concise description that accurately explains the Separator component's purpose. The keywords list is comprehensive and relevant.
There appears to be a typo in line 16 - "radui" should likely be "radix-ui" based on common UI library naming conventions:
'visual hierarchy', 'ui component', 'layout', 'organization', 'react', - 'radui' + 'radix-ui' ],docs/app/docs/components/strong/docs/seo.js (1)
1-17: LGTM with a minor suggestion on the keywords list.The SEO metadata is well-structured with a clear title and concise description that accurately explains the Strong component's purpose. The keywords list is comprehensive and relevant.
There appears to be a typo in line 15 - "radui" should likely be "radix-ui" based on common UI library naming conventions:
'ui component', 'accessibility', 'react', - 'radui' + 'radix-ui' ],docs/app/docs/components/progress/docs/seo.js (1)
1-19: LGTM with a minor suggestion on the keywords list.The SEO metadata is well-structured with a clear title and concise description that accurately explains the Progress component's purpose. The keywords list is comprehensive and relevant.
There appears to be a typo in line 17 - "radui" should likely be "radix-ui" based on common UI library naming conventions:
'accessibility', 'react', - 'radui' + 'radix-ui' ],docs/app/docs/components/strong/docs/api/strong.tsx (1)
50-50: Minor nitpick: Remove trailing spaceThere's a trailing space at the end of line 50 after the semicolon.
-export default data; +export default data;docs/app/docs/components/code/docs/seo.js (1)
15-15: Minor nitpick: Remove trailing spaceThere's a trailing space at the end of line 15 after the closing curly brace.
-} +}docs/app/docs/components/heading/docs/seo.js (1)
18-18: Minor nitpick: Remove trailing spaceThere's a trailing space at the end of line 18 after the closing curly brace.
-} +}docs/app/docs/components/card/docs/api/card.tsx (2)
45-46: Consider consistency in default value notationThe default value for
customRootClassis specified as "--" whileclassNameuses "''". For consistency with other props likeclassName, consider using the same notation for similar prop types.type: "string", - default: "--", + default: "''",
58-58: Minor nitpick: Remove trailing spaceThere's a trailing space at the end of line 58 after the semicolon.
-export default data; +export default data;docs/app/docs/components/button/docs/seo.js (1)
1-20: SEO metadata looks great, but check the "radui" keywordThe SEO metadata for the Button component is well-structured with a clear title, concise description, and comprehensive keywords that cover various aspects of button functionality.
However, there seems to be a potential typo in line 18: "radui" - did you mean "radix-ui"?
- 'radui' + 'radix-ui'docs/app/docs/components/callout/docs/seo.js (1)
1-17: Well-structured SEO metadata with possible typoThe metadata structure is consistent with other components, providing good SEO value with relevant keywords for the Callout component.
Similar to the Button component, there appears to be a typo in line 15: "radui" - should this be "radix-ui"?
- 'radui' + 'radix-ui'docs/app/docs/components/tooltip/docs/seo.js (1)
1-14: Good SEO metadata with consistent keyword patternThe SEO metadata for the Tooltip component follows the same structure as other components, which is good for consistency.
Note that line 12 contains "radui" which appears in other component SEO files as well. If this is intentional, please disregard; otherwise, consider changing to "radix-ui".
- 'radui' + 'radix-ui'docs/app/docs/components/em/docs/seo.js (1)
15-15: Remove trailing space at end of file.There's a trailing space after the closing curly brace. Consider removing it for cleaner code.
-} +}docs/app/docs/components/code/docs/api/code.tsx (2)
39-54: Consider adding enum values for variant and size propsThe documentation would be more helpful for developers if it included the allowed values for the
variantandsizeprops.{ prop: { name: "variant", info_tooltips: "Style variant of the code element." }, type: "string", + enum_values: ["primary", "secondary"], // Add actual available values default: "''", }, { prop: { name: "size", info_tooltips: "Size variant of the code element." }, type: "string", + enum_values: ["sm", "md", "lg"], // Add actual available values default: "''", },
55-62: Add color options for claritySimilar to variant and size, providing the available color options would make the documentation more complete and developer-friendly.
{ prop: { name: "color", info_tooltips: "Accent color for the code element." }, type: "string", + enum_values: ["primary", "secondary", "info", "success", "warning", "danger"], // Add actual available values default: "''", }docs/app/docs/components/callout/docs/api/callout.tsx (3)
39-54: Inconsistent default value notationThe default value for
customRootClassis represented as "--" which is inconsistent with the formatting pattern in other files like code.tsx where empty string defaults are shown as "''".{ prop: { name: "customRootClass", info_tooltips: "Custom root class name to override default styling." }, type: "string", - default: "--", + default: "''", },
47-54: Standardize default value representation for color propFor consistency with other components, update the default value representation.
{ prop: { name: "color", info_tooltips: "Accent color to apply to the callout." }, type: "string", - default: "--", + default: "''", },
47-70: Add enum values for better clarityConsider adding enum values for the
color,variant, andsizeproperties to make the documentation more helpful.{ prop: { name: "color", info_tooltips: "Accent color to apply to the callout." }, type: "string", + enum_values: ["primary", "secondary", "info", "success", "warning", "danger"], // Add actual supported values default: "''", }, { prop: { name: "variant", info_tooltips: "Style variant of the callout." }, type: "string", + enum_values: ["outline", "solid", "soft"], // Add actual supported values default: "''", }, { prop: { name: "size", info_tooltips: "Size variant of the callout." }, type: "string", + enum_values: ["sm", "md", "lg"], // Add actual supported values default: "''", }docs/app/docs/components/blockquote/docs/seo.js (1)
15-15: Fix typo in keywordThere appears to be a typo in one of the keywords.
'react', - 'radui' + 'radix-ui'docs/app/docs/components/button/docs/api/button.tsx (4)
56-63: Consider specifying the allowed values for thevariantpropertyThe
variantproperty is defined as a string type, but it would be more informative to specify the exact allowed values (similar to how you've done for thetypeproperty). This helps developers understand what options are available without having to look at implementation details.type: "string", + enum_values: ["solid", "soft", "outline", "ghost"], default: "''",
64-71: Consider specifying the allowed values for thesizepropertySimilar to the
variantproperty, it would be helpful to specify the exact allowed values for thesizeproperty.type: "string", + enum_values: ["small", "medium", "large"], default: "''",
72-79: Provide more specific information about available color optionsThe
colorproperty could benefit from more specific information about what color values are supported. Consider adding enum values or at least a more descriptive info tooltip.prop: { name: "color", - info_tooltips: "Color theme of the button." + info_tooltips: "Color theme of the button (e.g., 'primary', 'secondary', 'danger')." }, type: "string", + enum_values: ["primary", "secondary", "success", "danger", "warning", "info"], default: "''",
56-79: Clarify default values for variant, size, and color propertiesThe default values for
variant,size, andcolorare currently represented as empty strings, which could be confusing. If there are actual default values used by the component, consider specifying them explicitly.prop: { name: "variant", info_tooltips: "Style variant of the button (solid, soft, outline, ghost)." }, type: "string", - default: "''", + default: "'solid'", // replace with actual defaultAnd similarly for the other properties.
docs/app/docs/components/code/docs/codeUsage.js (1)
52-52: Remove trailing whitespaceThere's unnecessary whitespace at the end of line 52.
-export default code; +export default code;docs/app/docs/components/text/docs/codeUsage.js (2)
1-1: Remove unused importThe
getSourceCodeFromPathimport doesn't appear to be used in this file. Consider removing it unless it's needed for future changes.-import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
38-38: Remove trailing whitespaceThere's unnecessary whitespace at the end of line 38.
-export default code; +export default code;docs/app/docs/components/tooltip/docs/api/content.tsx (1)
76-76: Minor formatting inconsistency.There's an extra space before the semicolon in the export statement.
-export default data; +export default data;docs/app/docs/components/card/docs/seo.js (1)
16-16: Minor formatting inconsistency.There's an extra space at the end of the export statement.
-} +}docs/app/docs/components/blockquote/docs/codeUsage.js (1)
39-51: Consider marking BlockQuoteTable as deprecatedWhile keeping BlockQuoteTable for backward compatibility is good practice, consider adding a deprecation notice using JSDoc comments if it's being replaced by the new api_documentation approach.
// Kept for backwards compatibility +/** + * @deprecated Use api_documentation.blockquote instead + */ export const BlockQuoteTable = {docs/app/docs/components/code/page.mdx (1)
35-37: Remove unnecessary whitespace.There appears to be unnecessary whitespace at the end of the file that should be removed.
- - -docs/app/docs/components/strong/page.mdx (1)
16-16: Consider strengthening the example text.The static analysis tool suggests replacing the over-used intensifier "very". Consider a more impactful alternative.
- <p>This is a <Strong>very important</Strong> message.</p> + <p>This is a <Strong>critical</Strong> message.</p>🧰 Tools
🪛 LanguageTool
[style] ~16-~16: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...-gray-1000'>This is a very important message.
</Do...(EN_WEAK_ADJECTIVE)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (59)
docs/app/docs/components/aspect-ratio/page.mdx(1 hunks)docs/app/docs/components/avatar/page.mdx(1 hunks)docs/app/docs/components/blockquote/docs/api/blockquote.tsx(1 hunks)docs/app/docs/components/blockquote/docs/codeUsage.js(2 hunks)docs/app/docs/components/blockquote/docs/seo.js(1 hunks)docs/app/docs/components/blockquote/page.mdx(1 hunks)docs/app/docs/components/button/docs/api/button.tsx(1 hunks)docs/app/docs/components/button/docs/codeUsage.js(2 hunks)docs/app/docs/components/button/docs/seo.js(1 hunks)docs/app/docs/components/button/page.mdx(1 hunks)docs/app/docs/components/callout/docs/api/callout.tsx(1 hunks)docs/app/docs/components/callout/docs/codeUsage.js(2 hunks)docs/app/docs/components/callout/docs/seo.js(1 hunks)docs/app/docs/components/callout/page.mdx(1 hunks)docs/app/docs/components/card/docs/api/card.tsx(1 hunks)docs/app/docs/components/card/docs/codeUsage.js(2 hunks)docs/app/docs/components/card/docs/seo.js(1 hunks)docs/app/docs/components/card/page.mdx(1 hunks)docs/app/docs/components/code/docs/api/code.tsx(1 hunks)docs/app/docs/components/code/docs/codeUsage.js(3 hunks)docs/app/docs/components/code/docs/seo.js(1 hunks)docs/app/docs/components/code/page.mdx(1 hunks)docs/app/docs/components/em/docs/api/em.tsx(1 hunks)docs/app/docs/components/em/docs/codeUsage.js(1 hunks)docs/app/docs/components/em/docs/seo.js(1 hunks)docs/app/docs/components/em/page.mdx(1 hunks)docs/app/docs/components/heading/docs/api/heading.tsx(1 hunks)docs/app/docs/components/heading/docs/codeUsage.js(3 hunks)docs/app/docs/components/heading/docs/seo.js(1 hunks)docs/app/docs/components/heading/page.mdx(1 hunks)docs/app/docs/components/kbd/docs/api/kbd.tsx(1 hunks)docs/app/docs/components/kbd/docs/codeUsage.js(2 hunks)docs/app/docs/components/kbd/docs/seo.js(1 hunks)docs/app/docs/components/kbd/page.mdx(1 hunks)docs/app/docs/components/progress/docs/api/progress.tsx(1 hunks)docs/app/docs/components/progress/docs/codeUsage.js(3 hunks)docs/app/docs/components/progress/docs/seo.js(1 hunks)docs/app/docs/components/progress/page.mdx(1 hunks)docs/app/docs/components/separator/docs/api/separator.tsx(1 hunks)docs/app/docs/components/separator/docs/codeUsage.js(2 hunks)docs/app/docs/components/separator/docs/seo.js(1 hunks)docs/app/docs/components/separator/page.mdx(1 hunks)docs/app/docs/components/strong/docs/api/strong.tsx(1 hunks)docs/app/docs/components/strong/docs/codeUsage.js(2 hunks)docs/app/docs/components/strong/docs/seo.js(1 hunks)docs/app/docs/components/strong/page.mdx(1 hunks)docs/app/docs/components/text/docs/api/text.tsx(1 hunks)docs/app/docs/components/text/docs/codeUsage.js(2 hunks)docs/app/docs/components/text/docs/seo.js(1 hunks)docs/app/docs/components/text/page.mdx(1 hunks)docs/app/docs/components/tooltip/docs/anatomy.tsx(1 hunks)docs/app/docs/components/tooltip/docs/api/content.tsx(1 hunks)docs/app/docs/components/tooltip/docs/api/root.tsx(1 hunks)docs/app/docs/components/tooltip/docs/api/trigger.tsx(1 hunks)docs/app/docs/components/tooltip/docs/codeUsage.js(2 hunks)docs/app/docs/components/tooltip/docs/seo.js(1 hunks)docs/app/docs/components/tooltip/page.mdx(1 hunks)src/components/ui/Avatar/tests/Avatar.test.tsx(1 hunks)src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx(1 hunks)
🧰 Additional context used
🧬 Code Definitions (6)
docs/app/docs/components/callout/docs/codeUsage.js (7)
docs/app/docs/components/accordion/docs/codeUsage.js (2)
api_documentation(29-33)api_documentation(29-33)docs/app/docs/components/progress/docs/codeUsage.js (2)
api_documentation(35-37)api_documentation(35-37)docs/app/docs/components/kbd/docs/codeUsage.js (2)
api_documentation(33-35)api_documentation(33-35)docs/app/docs/components/separator/docs/codeUsage.js (2)
api_documentation(45-47)api_documentation(45-47)docs/app/docs/components/blockquote/docs/codeUsage.js (2)
api_documentation(26-28)api_documentation(26-28)docs/app/docs/components/button/docs/codeUsage.js (2)
api_documentation(68-70)api_documentation(68-70)docs/app/docs/components/code/docs/codeUsage.js (2)
api_documentation(27-29)api_documentation(27-29)
docs/app/docs/components/progress/docs/codeUsage.js (7)
docs/app/docs/components/callout/docs/codeUsage.js (4)
api_documentation(39-41)api_documentation(39-41)features(44-50)features(44-50)docs/app/docs/components/kbd/docs/codeUsage.js (4)
api_documentation(33-35)api_documentation(33-35)features(38-44)features(38-44)docs/app/docs/components/accordion/docs/codeUsage.js (2)
api_documentation(29-33)api_documentation(29-33)docs/app/docs/components/separator/docs/codeUsage.js (4)
api_documentation(45-47)api_documentation(45-47)features(50-56)features(50-56)docs/app/docs/components/blockquote/docs/codeUsage.js (4)
api_documentation(26-28)api_documentation(26-28)features(31-37)features(31-37)docs/app/docs/components/button/docs/codeUsage.js (4)
api_documentation(68-70)api_documentation(68-70)features(73-80)features(73-80)docs/app/docs/components/code/docs/codeUsage.js (4)
api_documentation(27-29)api_documentation(27-29)features(32-37)features(32-37)
docs/app/docs/components/em/docs/codeUsage.js (2)
docs/app/docs/components/strong/docs/codeUsage.js (5)
code(4-19)api_documentation(22-24)api_documentation(22-24)features(27-33)features(27-33)docs/app/docs/components/text/docs/codeUsage.js (5)
code(6-23)api_documentation(26-28)api_documentation(26-28)features(31-36)features(31-36)
docs/app/docs/components/kbd/docs/codeUsage.js (3)
docs/app/docs/components/progress/docs/codeUsage.js (4)
api_documentation(35-37)api_documentation(35-37)features(40-47)features(40-47)docs/app/docs/components/callout/docs/codeUsage.js (4)
api_documentation(39-41)api_documentation(39-41)features(44-50)features(44-50)docs/app/docs/components/accordion/docs/codeUsage.js (2)
api_documentation(29-33)api_documentation(29-33)
docs/app/docs/components/strong/docs/codeUsage.js (2)
docs/app/docs/components/em/docs/codeUsage.js (4)
api_documentation(21-23)api_documentation(21-23)features(26-31)features(26-31)docs/app/docs/components/text/docs/codeUsage.js (4)
api_documentation(26-28)api_documentation(26-28)features(31-36)features(31-36)
docs/app/docs/components/button/docs/codeUsage.js (5)
docs/app/docs/components/separator/docs/codeUsage.js (4)
api_documentation(45-47)api_documentation(45-47)features(50-56)features(50-56)docs/app/docs/components/progress/docs/codeUsage.js (4)
api_documentation(35-37)api_documentation(35-37)features(40-47)features(40-47)docs/app/docs/components/blockquote/docs/codeUsage.js (4)
api_documentation(26-28)api_documentation(26-28)features(31-37)features(31-37)docs/app/docs/components/callout/docs/codeUsage.js (4)
api_documentation(39-41)api_documentation(39-41)features(44-50)features(44-50)docs/app/docs/components/code/docs/codeUsage.js (4)
api_documentation(27-29)api_documentation(27-29)features(32-37)features(32-37)
🪛 LanguageTool
docs/app/docs/components/strong/page.mdx
[style] ~16-~16: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...-gray-1000'>
This is a very important message.
</Do...(EN_WEAK_ADJECTIVE)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (158)
docs/app/docs/components/tooltip/docs/api/trigger.tsx (1)
1-34: API documentation structure looks goodThe API documentation for the Tooltip.Trigger component is well-structured and provides clear information about the available props.
One suggestion: Consider adding a TypeScript type definition for the data object to improve type safety and documentation.
docs/app/docs/components/text/docs/seo.js (1)
1-15: SEO metadata structure looks goodThe SEO metadata for the Text component is well-structured with appropriate title, description, and keywords.
Consider converting this file to TypeScript (
.tsextension) to maintain consistency with the project's TypeScript usage and to provide type safety for the exported object.src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx (1)
14-14: LGTM - Minor formatting improvement.The formatting change (adding a space before the
asChildparameter) improves code readability and maintains consistency with the formatting style of the codebase.docs/app/docs/components/em/docs/api/em.tsx (1)
1-50: LGTM - Well-structured API documentation.The API documentation for the Em component is thoroughly defined and well-organized. All props are clearly documented with appropriate types, default values, and helpful tooltips that explain their purpose.
The table structure with columns for prop, type, default, and tooltips follows a consistent pattern that will make the documentation easy to navigate.
docs/app/docs/components/strong/docs/api/strong.tsx (1)
1-50: API documentation structure looks good!The documentation structure for the Strong component is well-organized with clear descriptions of props and their purposes. The component appropriately documents its semantic role for marking text as important with proper types and default values.
docs/app/docs/components/code/docs/seo.js (1)
1-15: SEO metadata structure looks good!The SEO metadata for the Code component is well-structured with an appropriate title, concise description, and relevant keywords that will improve discoverability.
docs/app/docs/components/heading/docs/seo.js (1)
1-18: SEO metadata structure looks good!The SEO metadata for the Heading component is comprehensive with an appropriate title, clear description, and relevant keywords that cover all heading levels (h1-h6) and related typography terms.
docs/app/docs/components/card/docs/api/card.tsx (1)
1-58: API documentation structure looks good!The Card component's API documentation is well-structured with a clear description and comprehensive prop definitions. The tooltips provide helpful context for each prop's purpose, and the types and defaults are appropriately defined.
docs/app/docs/components/tooltip/docs/api/root.tsx (1)
1-58: Well-structured API documentation for TooltipThe API documentation for the Tooltip component is comprehensive and well-organized. The properties are clearly defined with appropriate types, default values, and helpful tooltips explaining their purpose.
The table structure with columns for Prop, Type, Default, and tooltips provides a clean way to display this information to users.
docs/app/docs/components/kbd/docs/api/kbd.tsx (1)
1-58: Excellent API documentation for Kbd componentThe API documentation for the Kbd component is thorough and well-structured. Each property is clearly documented with appropriate types, default values, and helpful descriptions in the tooltips.
The consistent approach to API documentation across components enhances maintainability and provides a uniform experience for developers.
docs/app/docs/components/avatar/page.mdx (4)
6-7: LGTM! Formatting improvements enhance readability.The change from single quotes to double quotes for string props makes the JSX more consistent with common React styling conventions.
9-11: Improved component structure with proper indentation.The JSX formatting changes make the component hierarchy clearer and easier to read.
13-19: Better structured ComponentFeatures component.The formatting improvements align opening and closing tags vertically, improving code readability.
21-24: Clean Table component formatting.The parameters are now properly aligned and spaced, enhancing readability.
src/components/ui/Avatar/tests/Avatar.test.tsx (2)
44-44: LGTM! Consistent string quote style.Changed double quotes to single quotes in assertion to match the project's string style convention.
48-48: LGTM! Consistent string quote style.Changed double quotes to single quotes in assertion to match the project's string style convention.
docs/app/docs/components/kbd/docs/seo.js (1)
1-18: LGTM! Well-structured SEO metadata for Kbd component.The SEO metadata provides comprehensive information about the Kbd component with a clear title, concise description, and relevant keywords that will improve discoverability.
docs/app/docs/components/progress/docs/api/progress.tsx (1)
1-74: LGTM! Well-structured API documentation.The API documentation provides complete and detailed information about the Progress component's props, including types, defaults, and helpful tooltips. The structure is clean and consistent.
docs/app/docs/components/code/docs/api/code.tsx (1)
1-64: Well-structured API documentation dataThe API documentation for the Code component is well-structured and provides clear information about its properties. I particularly like the semantic-focused description that emphasizes the HTML
<code>element usage.docs/app/docs/components/callout/docs/api/callout.tsx (1)
1-72: Clear Callout component API documentationThe API documentation for the Callout component provides a comprehensive overview of its properties and is well-structured.
docs/app/docs/components/blockquote/docs/seo.js (1)
1-17: SEO metadata looks goodThe SEO metadata for the BlockQuote component contains a clear title, concise description, and relevant keywords which will help with discoverability.
docs/app/docs/components/text/docs/api/text.tsx (2)
1-57: Text component API documentation is well structuredThe API documentation for the Text component clearly explains its properties and includes the appropriate enum values for the
asprop, which is excellent.
28-31: Great inclusion of enum valuesIncluding the specific enum values for the
asprop is very helpful and makes the documentation more complete. This approach should be considered for the variant, size, and color props in the other component documentation.docs/app/docs/components/code/docs/codeUsage.js (4)
1-2: LGTM - Clear import for API documentationThe import statement is well-structured and follows the pattern used across component documentation.
26-29: LGTM - Consistent API documentation exportThe
api_documentationexport follows the established pattern across components, providing a consistent documentation structure.
31-37: LGTM - Informative features listThe features list provides a clear and concise summary of the Code component's capabilities, which enhances the documentation.
39-40: LGTM - Helpful comment for backward compatibilityThe comment clearly explains why the legacy table export is being maintained, which is valuable for future maintainers.
docs/app/docs/components/callout/docs/codeUsage.js (4)
1-2: LGTM - Clear import for API documentationThe import statement is well-structured and follows the pattern used across component documentation.
38-41: LGTM - Consistent API documentation exportThe
api_documentationexport follows the established pattern across components, providing a consistent documentation structure.
43-50: LGTM - Comprehensive features listThe features list provides a clear and concise summary of the Callout component's capabilities, which enhances the documentation.
52-53: LGTM - Helpful comment for backward compatibilityThe comment clearly explains why the legacy table export is being maintained, which is valuable for future maintainers.
docs/app/docs/components/text/docs/codeUsage.js (3)
3-4: LGTM - Clear import for API documentationThe import statement is well-structured and follows the pattern used across component documentation.
25-28: LGTM - Consistent API documentation exportThe
api_documentationexport follows the established pattern across components, providing a consistent documentation structure.
30-36: LGTM - Concise features listThe features list provides a clear and concise summary of the Text component's capabilities, which enhances the documentation.
docs/app/docs/components/aspect-ratio/page.mdx (4)
4-4: Good addition of the Card component.Adding the Card component improves the visual presentation by providing a proper container for the AspectRatio example.
6-9: Well-structured component declaration.The formatting change from template literals to standard string syntax improves consistency in the documentation structure.
10-21: Good enhancement to the component demo.Wrapping the AspectRatio in a Card provides better visual context for how the component might be used in a real application. The change from "16/9" to "4/3" ratio also demonstrates a different aspect ratio option.
23-26: Good formatting for the documentation table.The spacing and indentation are consistent, making the code more readable.
docs/app/docs/components/tooltip/docs/api/content.tsx (1)
1-74: Well-structured API documentation for tooltip content.The data structure provides comprehensive documentation for the tooltip's Content component with clear property descriptions, types, and default values. This will be valuable for developers using the component.
docs/app/docs/components/card/docs/seo.js (1)
1-15: Good SEO metadata structure.The metadata provides a clear title, concise description, and comprehensive keywords that will improve searchability and discoverability of the Card component documentation.
docs/app/docs/components/button/docs/codeUsage.js (3)
1-2: Good addition of API documentation import.The import follows the same pattern used in other component files and is properly documented with a comment.
67-70: Well-structured API documentation export.The api_documentation export follows the consistent pattern established in other component files, enhancing the documentation system.
72-80: Comprehensive features list.The features array provides a clear overview of the Button component's capabilities, covering style variants, sizes, customization options, accessibility, and usage contexts. This will be helpful for developers evaluating the component.
docs/app/docs/components/kbd/docs/codeUsage.js (3)
1-2: Good use of commented import.The import statement for API documentation is clearly marked with a comment, making the purpose of the import obvious.
32-35: Well-structured API documentation export.The
api_documentationobject follows the established pattern seen in other component files, maintaining consistency across the documentation system.
37-44: Comprehensive features list.The features array provides a clear and concise list of the Kbd component's capabilities, following the same pattern as other components like Callout and Progress. The descriptions effectively communicate the component's purpose and use cases.
docs/app/docs/components/heading/docs/codeUsage.js (4)
1-2: Good use of commented import.The import statement is clear and follows the same pattern as other documentation files.
63-66: Well-structured API documentation export.The
api_documentationobject correctly maps the heading component to its API source code.
68-74: Clear and informative features list.The features array effectively communicates the capabilities of the Heading component, highlighting its semantic meaning and customization options.
76-87: Good practice maintaining backward compatibility.The explicit comment about keeping the legacy table export for backward compatibility is helpful for future developers who might question why both the new and old documentation formats exist.
docs/app/docs/components/heading/docs/api/heading.tsx (5)
1-3: Clear component definition with descriptive name and purpose.The component description effectively communicates what the Heading component does and its customization capabilities.
4-21: Well-structured table columns configuration.The columns array properly defines the structure for displaying component properties in a table format, including proper identification for tooltips.
22-31: Complete documentation for the 'as' prop.The documentation clearly explains the purpose of the 'as' prop, its available values, and default setting.
32-55: Thorough documentation of remaining properties.Each prop is well documented with clear names, tooltips, types, and default values. The information is comprehensive enough for developers to understand how to use each property.
57-59: Clean export syntax.The default export is simple and follows standard practices.
docs/app/docs/components/separator/docs/api/separator.tsx (5)
1-3: Informative component definition.The description effectively explains both what the Separator component does and why you would use it (visual hierarchy and content organization).
4-21: Well-structured table columns configuration.The columns array properly defines the structure for displaying component properties in a table format, consistent with other component documentation.
22-31: Complete documentation for the 'orientation' prop.The documentation clearly explains the orientation prop's purpose, available values, and default setting.
32-55: Comprehensive documentation of styling properties.The documentation for className, customRootClass, and color props provides clear information about customization options with appropriate types and defaults.
57-59: Clean export syntax.The default export follows standard practices.
docs/app/docs/components/progress/docs/codeUsage.js (4)
1-2: Appropriate import for API documentationThe import of
progress_api_SourceCodeis properly structured and follows the documentation pattern seen in other components.
34-37: Good API documentation export structureThe
api_documentationexport follows the established pattern across other components, making the documentation consistent throughout the library.
39-47: Well-documented component featuresThe features array provides a comprehensive list of the Progress component's capabilities, including important accessibility information. This will be valuable for users of the component.
49-49: Helpful backward compatibility noteGood addition of the explanatory comment clarifying that the ProgressTable is kept for backward compatibility reasons.
docs/app/docs/components/em/docs/codeUsage.js (4)
6-7: Appropriate import for API documentationThe import of
em_api_SourceCodeis properly structured and follows the documentation pattern seen in other components.
14-16: CSS implementation matches semantic meaningThe CSS properly implements italic styling for the Em component, which matches the semantic meaning of the HTML
<em>element.
20-23: Good API documentation export structureThe
api_documentationexport follows the established pattern across other components, maintaining consistency in the documentation structure.
25-31: Comprehensive feature list with accessibility mentionThe features array effectively describes the Em component's capabilities, with good emphasis on both styling and accessibility semantics.
docs/app/docs/components/card/docs/codeUsage.js (4)
1-2: Appropriate import for API documentationThe import of
card_api_SourceCodeis properly structured and follows the documentation pattern seen in other components.
8-8: Fixed component example nameGood correction changing from
ButtonExampletoCardExampleto accurately reflect the component being demonstrated.
24-27: Good API documentation export structureThe
api_documentationexport follows the established pattern across other components, maintaining consistency in the documentation structure.
29-35: Informative feature listThe features array effectively describes the Card component's capabilities and integration possibilities.
docs/app/docs/components/strong/docs/codeUsage.js (4)
1-2: Appropriate import for API documentationThe import of
strong_api_SourceCodeis properly structured and follows the documentation pattern seen in other components.
13-17: CSS implementation aligns with semantic meaningThe CSS properly implements bold styling for the Strong component, which matches the semantic meaning of the HTML
<strong>element.
21-24: Good API documentation export structureThe
api_documentationexport follows the established pattern across other components, maintaining consistency in the documentation structure.
26-33: Well-documented features with accessibility contextThe features array effectively describes the Strong component's capabilities, with good emphasis on both styling and semantic importance for accessibility.
docs/app/docs/components/text/page.mdx (2)
1-7: Great addition of SEO metadata!The addition of PageDetails component and centralized SEO configuration through the dedicated seo module improves the page's search engine discoverability. The explicit metadata export ensures proper SEO configuration.
9-33: Well-structured documentation with improved component organizationThe enhanced Documentation component structure with dedicated sections for component showcase, features, and API documentation creates a more comprehensive and user-friendly experience. The clear description accurately conveys the Text component's purpose and functionality.
docs/app/docs/components/blockquote/docs/codeUsage.js (3)
1-3: Good API documentation import structureThe clean import of API documentation from a dedicated file follows good modular organization practices.
10-12: Improved code example with color property demonstrationThe updated example now demonstrates the color property and uses a more engaging quote, providing better context for users.
25-37: Well-defined component features and API documentationThe new exports for API documentation and features list provide structured information that enhances the component documentation. The features list clearly communicates the component's capabilities.
docs/app/docs/components/callout/page.mdx (3)
1-14: Good SEO implementation and imports organizationThe addition of PageDetails and seo imports with the metadata export ensures proper SEO configuration. The import structure clearly organizes the various documentation elements.
16-28: Clear component description and showcaseThe improved description clearly explains the Callout component's purpose, and the component hero section provides a meaningful example with proper color and text formatting.
29-56: Comprehensive component documentation structureThe documentation is now well-organized with dedicated sections for features, variants, sizes, colors, and API details. This systematic approach makes it easier for developers to find specific information about the component.
docs/app/docs/components/em/page.mdx (2)
1-9: Good SEO configurationThe addition of PageDetails and seo modules with the metadata export ensures proper SEO configuration for the Em component documentation.
11-33: Semantically clear documentation with improved structureThe description now explicitly mentions the semantic meaning of the
<em>element, which is valuable for developers. The structured documentation with dedicated sections for features and API details provides a comprehensive overview of the component.docs/app/docs/components/separator/docs/codeUsage.js (6)
1-2: Good addition of API documentation import.The import of
separator_api_SourceCodesupports the new API documentation section, aligning with the documentation improvements across components.
7-7: Appropriate import addition.Adding the Text import explicitly improves clarity in the example code.
15-15: Good improvement to vertical alignment.The style change to use
alignItems: "center"improves the visual presentation of the example by properly aligning the text and vertical separators.
44-47: Well-structured API documentation export.Adding a dedicated export for API documentation improves the organization and maintainability of the component documentation.
49-56: Comprehensive features list.The features list effectively communicates the key capabilities and benefits of the Separator component.
58-58: Helpful backward compatibility note.The comment clearly explains why the SeparatorTable is being maintained, which helps future maintainers understand the code organization.
docs/app/docs/components/code/page.mdx (4)
1-7: Good SEO enhancement.Adding PageDetails import and metadata export improves the page's SEO capabilities. The imports for api_documentation and features support the enhanced documentation structure.
9-18: Improved component description and example.The updated description accurately explains the semantic purpose of the Code component, and the Component Hero section provides a clear visual example.
20-23: Good addition of features section.The ComponentFeatures section effectively showcases the component's capabilities in a standardized format.
25-32: Well-structured API documentation.The API Documentation section provides valuable technical details in a clear, structured format.
docs/app/docs/components/strong/page.mdx (4)
1-8: Good SEO and import enhancements.Adding PageDetails import and metadata export improves the page's SEO capabilities. The imports for api_documentation and features support the enhanced documentation structure.
9-18: Improved component description and example.The updated description accurately explains the semantic purpose of the Strong component, highlighting that it renders using the HTML strong element.
🧰 Tools
🪛 LanguageTool
[style] ~16-~16: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...-gray-1000'>This is a very important message.
</Do...(EN_WEAK_ADJECTIVE)
20-23: Good addition of features section.The ComponentFeatures section effectively showcases the component's capabilities in a standardized format.
25-32: Well-structured API documentation.The API Documentation section provides valuable technical details in a clear, structured format.
docs/app/docs/components/heading/page.mdx (4)
1-7: Good SEO and import enhancements.Adding PageDetails import and metadata export improves the page's SEO capabilities. The imports for api_documentation and features support the enhanced documentation structure.
9-23: Excellent component demonstration.The updated description clearly explains the purpose of headings, and the Component Hero section effectively demonstrates all heading levels (h1-h6), providing a comprehensive visual reference.
25-28: Good addition of features section.The ComponentFeatures section effectively showcases the component's capabilities in a standardized format.
30-37: Well-structured API documentation.The API Documentation section provides valuable technical details in a clear, structured format.
docs/app/docs/components/button/page.mdx (9)
1-4: Import Enhancements and Modular Data Integration:
The new import ofPageDetailsand the expanded import statement that brings inArrow,api_documentation, andfeaturesfrom./docs/codeUsagestreamline access to documentation assets. This modular approach supports a more maintainable documentation structure.
11-13: SEO Metadata Export:
Exportingmetadatafrom the importedseomodule is a smart way to couple SEO configuration with the page's content.
15-18: Enhanced Documentation Header:
The updated title "Button" and the detailed description clearly convey the component’s purpose. This improves the reader’s understanding right at the outset.
19-22: Component Hero with Button Example:
The usage of<Documentation.ComponentHero>to showcase the Button—with its color property and accompanyingArrowicon—is clear and demonstrative of the component's usage.
24-28: Component Features Section:
Incorporating<Documentation.ComponentFeatures>with thefeaturesprop effectively highlights the component's capabilities within the documentation.
29-32: Variant Examples Section:
The dedicated section for variant examples using<Documentation.ComponentHero>andvariantCodeUsageis well-structured and consistent with the overall documentation strategy.
34-37: Size Examples Section:
The section showcasing size variants is concise and follows the same clear pattern for demonstration purposes.
39-42: Color Examples Section:
The documentation for color variants is similarly well-implemented, maintaining consistency with the other example sections.
44-52: API Documentation Section:
The introduction of an API Documentation section with<Documentation.Section>and<Documentation.Table>—leveraging data fromapi_documentation.button—adds depth to the documentation by offering users a reference for the component’s API.docs/app/docs/components/card/page.mdx (6)
1-6: Import and SEO Integration:
The addition of imports forPageDetails,api_documentation, andfeaturesenhances modularity and prepares the document for richer content. Coupled with the inclusion ofseo, these changes align the file with broader SEO standards.
8-9: SEO Metadata Export:
The statementexport const metadata = seo;cleanly links SEO settings to the component documentation, ensuring consistency across pages.
10-13: Card Documentation Header Update:
The title "Card" and its description offer a clear and concise overview of the component’s purpose and usage, which improves overall clarity.
14-23: Component Hero with Card Example:
The example provided via<Documentation.ComponentHero>is well-crafted. The integration of theCardandAvatarcomponents—showing a use case with a profile card layout—is both practical and visually appealing.
25-28: Component Features Section:
The inclusion of<Documentation.ComponentFeatures>leveragingfeaturesreinforces component functionality and aligns with the documented structure across components.
30-38: API Documentation for Card:
The API Documentation section clearly employs<Documentation.Section>and<Documentation.Table>, usingapi_documentation.cardto succinctly describe the Card component’s properties.docs/app/docs/components/separator/page.mdx (6)
1-6: Enhanced Imports and Modular API Access:
The updated import block brings inPageDetails,Text, and the additional API data (api_documentationandfeatures). This structure promotes a scalable documentation approach for the Separator component.
8-9: Consistent SEO Metadata Usage:
Exportingmetadatafrom theseomodule is a best practice that fosters consistency and reusability for SEO settings across documentation pages.
10-13: Separator Documentation Header:
The updated title and enriched description provide a more comprehensive explanation of the Separator component’s functionality and benefits.
14-29: Component Hero Demonstration:
The hero section demonstratively combines text content with both horizontal and vertical separators, effectively illustrating the visual utility of the Separator component in organizing content.
31-34: Component Features Inclusion:
Embedding<Documentation.ComponentFeatures>with thefeaturesprop standardizes the presentation of component capabilities within the documentation.
36-44: API Documentation for Separator:
The final section employing<Documentation.Section>and<Documentation.Table>, alongside data fromapi_documentation.separator, provides a structured and comprehensive API reference for the Separator component.docs/app/docs/components/kbd/page.mdx (6)
1-6: Modular Import Updates and SEO Integration:
The file benefits from the updated import statements—bringing inPageDetails, and enriched API and feature data from./docs/codeUsage. These adjustments aid in centralizing documentation assets and SEO configurations.
8-9: SEO Metadata Consistency:
Exportingmetadatafrom theseomodule maintains consistency with SEO configurations used across other documentation pages.
10-13: Kbd Documentation Header:
The title "Kbd" and accompanying description clearly articulate the component's purpose, setting clear expectations for readers.
14-19: Component Hero with Kbd Example:
The demonstration, where a<Card>wraps a<Kbd>component showing "Ctrl + C", effectively showcases the intended usage of the component in a real-world scenario.
21-24: Component Features Highlight:
The integration of the<Documentation.ComponentFeatures>section using thefeaturesprop extends the documentation with valuable insights into the component’s capabilities.
26-34: API Documentation for Kbd:
The API Documentation section is well-structured, employing<Documentation.Section>and<Documentation.Table>with data fromapi_documentation.kbdto clearly outline expected properties.docs/app/docs/components/progress/page.mdx (6)
1-6: Updated Imports and SEO Configuration:
The updated import block—includingPageDetailsand enhanced API/feature data from./docs/codeUsage—improves the overall modularity and clarity of the documentation. This change sets a consistent pattern used across other components.
8-9: SEO Metadata Export:
Usingexport const metadata = seo;is effective for consolidating SEO settings, ensuring uniformity across documentation pages.
10-13: Progress Documentation Header:
The title and description for the Progress component provide a straightforward and informative overview that quickly communicates the component's functionality.
14-21: Component Hero with Progress Example:
The hero section embeds the Progress component within a<Card>and includes inline styling for width control, effectively demonstrating a practical example of the Progress component’s usage.
23-26: Component Features Section:
The<Documentation.ComponentFeatures>section is appropriately included to highlight additional component capabilities, maintaining consistency with other documentation files.
28-36: API Documentation for Progress:
Incorporating a dedicated API Documentation section using<Documentation.Section>and<Documentation.Table>, along with data fromapi_documentation.progress, reinforces the detailed reference documentation and improves usability.docs/app/docs/components/tooltip/page.mdx (7)
1-1: SEO and metadata setup looks goodThe addition of PageDetails import and SEO metadata exports is a great improvement for search engine visibility. The expanded imports from codeUsage will enable more comprehensive documentation.
Also applies to: 6-6, 8-10
13-14: Clear and informative component descriptionThe updated tooltip description effectively communicates the component's purpose and benefits to users. It clearly explains when tooltips should be used and how they improve the user experience.
16-19: Well-structured component hero sectionThe ComponentHero section with the code usage example provides a clear demonstration of the tooltip in action, which helps users quickly understand how to implement it.
21-30: Great addition of component features sectionThe ComponentFeatures section effectively highlights the key capabilities of the tooltip component. This helps users understand the benefits and accessibility features right away.
32-34: Clear component anatomy sectionThe addition of the API Documentation section with component anatomy provides valuable visual structure information for developers implementing the component.
36-56: Comprehensive API documentation tablesThe detailed API documentation tables for Root, Trigger, and Content provide well-organized information about each part of the tooltip component, making it easier for developers to understand the available props and options.
58-63: Helpful keyboard interactions tableThe addition of keyboard interactions documentation is excellent for accessibility purposes, helping developers understand how users can interact with tooltips using a keyboard.
docs/app/docs/components/blockquote/page.mdx (6)
1-1: Good SEO and metadata implementationThe addition of PageDetails import and metadata export will improve search engine visibility. The expanded imports from codeUsage help organize the documentation content effectively.
Also applies to: 4-4, 9-11
13-16: Clear component descriptionThe updated BlockQuote description effectively explains the component's purpose and use cases, making it easier for developers to understand when to use this component.
17-22: Well-structured component hero sectionThe ComponentHero section with a practical example provides clear visual context for how the BlockQuote looks and functions.
24-27: Good addition of component featuresThe ComponentFeatures section using imported features helps users quickly understand the capabilities of the BlockQuote component.
29-37: Clear size and color examplesThe size and color examples with dedicated sections make it easy for developers to understand the various customization options available for the BlockQuote component.
39-46: Comprehensive API documentationThe API documentation table provides well-structured information about the BlockQuote props, making it easier for developers to implement and customize the component.
docs/app/docs/components/tooltip/docs/codeUsage.js (8)
2-3: Appropriate component importsAdding Kbd and Text component imports enables better formatting of the keyboard shortcut documentation.
5-6: Good addition of anatomy source codeThe addition of anatomy source code import will provide better documentation of the component structure.
8-11: Well-organized API documentation importsBreaking down the API documentation into separate files for root, trigger, and content makes the code more maintainable and easier to update.
22-25: Clear anatomy export structureThe anatomy export is well-structured and will make it easier to use this data in the documentation page.
27-33: Consistent column definitionThe column definitions for the API tables are clear and consistent, providing a good structure for the documentation.
35-40: Well-organized API documentation exportThe api_documentation export consolidates all API source files into a single object, making it easier to access from the documentation page.
42-84: Comprehensive keyboard shortcuts documentationThe keyboard shortcuts section is well-structured with clear descriptions for each interaction. The use of the Kbd component for formatting improves readability.
86-97: Good backward compatibility approachMaintaining the legacy TooltipTable export while adding a comment about backward compatibility is a good practice to prevent breaking changes.
…ix to component SEO titles
Summary by CodeRabbit