docs: first pass at updating the documentation #399
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughThe overarching change focuses on refining the documentation and component configuration for a UI library. This includes updating story prefixes from "system" to "styles," enhancing the installation guide with split packages for better management, revising TailwindCSS integration instructions, and adjusting UI elements for consistency. These modifications aim to improve user experience, streamline styling logic, and facilitate easier adoption of the library components. Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Bundle Size (components)
Overall bundle size: 79.24 KB Bundle Size (form components)
Overall bundle size: 49.15 KB (+1 B 0.00%) Bundle Size (system)
Overall bundle size: 52.93 KB |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 3
Configuration used: .coderabbit.yaml
Files selected for processing (9)
- packages/documentation/.ladle/components.tsx (1 hunks)
- packages/documentation/.ladle/config.mjs (1 hunks)
- packages/documentation/src/GettingStarted/1-overview.stories.tsx (1 hunks)
- packages/documentation/src/GettingStarted/2-Installation.stories.tsx (3 hunks)
- packages/documentation/src/GettingStarted/3-configuration.stories.tsx (3 hunks)
- packages/documentation/src/GettingStarted/4-usage.stories.mdx (2 hunks)
- packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx (1 hunks)
- packages/documentation/src/Styles/DarkMode.stories.tsx (2 hunks)
- packages/documentation/src/Styles/Typography.stories.tsx (3 hunks)
Files skipped from review due to trivial changes (1)
- packages/documentation/src/Styles/DarkMode.stories.tsx
Additional comments: 11
packages/documentation/.ladle/config.mjs (2)
- 14-14: Adding the "Styles*" entry to the list of sections is a good step towards reorganizing the documentation content to better categorize styling-related documentation. This aligns with the PR's objective of improving content organization.
- 14-14: The addition of preconnect links for Google Fonts is a performance optimization that can improve the loading times of fonts in the documentation. This is a good practice for enhancing user experience.
packages/documentation/src/GettingStarted/3-configuration.stories.tsx (2)
- 42-44: The updated CSS usage instructions clearly emphasize the requirement of TailwindCSS for styling the components within the
UI-Componentslibrary. This clarification is beneficial for users integrating the library into their projects.- 52-52: Introducing the TailwindCSS plugin from
@versini/ui-stylesto optimize unused styles is a significant improvement. It aligns with the goal of enhancing performance and user experience by reducing the final bundle size.packages/documentation/.ladle/components.tsx (1)
- 67-67: Updating the condition check from "system--typography" to "styles--typography" within the
Providercomponent is a necessary change to reflect the shift in naming conventions from "System" to "Styles". This ensures that the correct styling logic is applied based on the story prefix.packages/documentation/src/GettingStarted/2-Installation.stories.tsx (2)
- 17-44: The introduction of a table format to display information about multiple npm packages is a clear and organized way to present the division of the UI-Components library into separate packages. This approach makes it easier for users to understand the structure and dependencies of the library.
- 88-88: Updating the installation command to include
@versini/ui-stylesalong with@versini/ui-componentsreflects the need for both core components and styling capabilities provided by these packages. This change ensures users are aware of the necessary dependencies for optimal library usage.packages/documentation/src/Styles/Typography.stories.tsx (4)
- 5-5: Updating the title from "System/Typography" to "Styles/Typography" accurately reflects the shift in naming conventions and reclassification within the project's design system. This change ensures consistency and clarity in the documentation.
- 217-217: Renaming the story from "Basic" to "QuickStart" provides a clearer indication of the purpose of the story, guiding users more effectively through the initial setup and usage of typography styles.
- 226-229: Modifying the installation instructions to specify installing the
@versini/ui-stylespackage aligns with the emphasis on TailwindCSS for styling. This change clarifies the necessary dependencies for users.- 234-242: Updating the configuration to import from
@versini/ui-stylesinstead of@versini/ui-componentsis a crucial change that reflects the division of the UI-Components library into separate packages. This ensures users correctly integrate TailwindCSS and the provided plugin for styling.
Comment on lines
23
to
28
| <ButtonIcon | ||
| spacing={{ t: 8 }} | ||
| labelLeft="Installation" | ||
| noBorder | ||
| onClick={linkTo("getting-started--installation")} | ||
| > | ||
| <IconNext monotone /> |
There was a problem hiding this comment.
📝 NOTE
This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [17-17]
The removal of the noBorder property from the ButtonIcon component in the "Installation" button aligns with the broader effort to standardize component properties and appearances. Ensure this change is consistently applied across all relevant components for visual consistency.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Getting Startedsection to reflect changes in button properties, installation instructions, and configuration steps for integrating TailwindCSS.Stylesdocumentation to better align with the new structure, including changes in story titles and instructions for installing and configuring style packages.