docs: migrating from Ladle to StoryBook for API documentation #748
Conversation
WalkthroughThis pull request introduces a comprehensive setup for the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (30)
packages/api/src/getting-started/ReleaseTags.mdx (3)
13-19: Fix indentation in lead paragraphThe indentation appears to be using tabs instead of spaces, which is inconsistent with typical MDX formatting.
- UI components are being made available for consumption as soon as they - meet our minimum viable requirements. However, during that phase, we - reserve the right to modify their API or to change their look and feel. To - help consuming partners, we are applying tags per components: alpha, then - beta and finally stable. + UI components are being made available for consumption as soon as they + meet our minimum viable requirements. However, during that phase, we + reserve the right to modify their API or to change their look and feel. To + help consuming partners, we are applying tags per components: alpha, then + beta and finally stable.
40-42: Enhance production warning messageConsider adding more context about why alpha components shouldn't be used in production to help developers make informed decisions.
- <strong>Alpha</strong> components <strong>cannot</strong> be deployed to - production. + <strong>Alpha</strong> components <strong>cannot</strong> be deployed to + production due to potential breaking changes and incomplete testing.
67-69: Clarify testing coverage expectationsConsider specifying the minimum test coverage required for beta components to provide clearer guidance.
- <strong>Beta</strong> components are not 100% covered by unit tests and - may have minor visual or accessibility related issues. + <strong>Beta</strong> components have at least 80% unit test coverage but + may have minor visual or accessibility related issues that don't affect core functionality.packages/api/src/getting-started/helpers/tableData.ts (1)
1-23: Consider adding TypeScript interfaces for better type safety.While the data structure is clean, it could benefit from explicit typing:
+interface Package { + id: number; + name: string; + description: string; +} + +interface InstallationData { + installation: { + data: Package[]; + }; +} + -export default { +export default <InstallationData>{ installation: { data: [Also consider using non-sequential identifiers (like package names as IDs) to make the data structure more maintainable.
packages/api/src/stories/ButtonIcon.stories.tsx (2)
7-14: Enhance story metadata with documentation and controls.Consider adding more metadata to improve the documentation:
const meta: Meta<typeof ButtonIcon> = { parameters: { layout: "centered", + docs: { + description: { + component: "An icon button component that...", + }, + }, }, title: "Components/ButtonIcon", component: ButtonIcon, - args: { onClick: fn() }, + args: { + onClick: fn(), + "aria-label": "Settings", + }, + argTypes: { + onClick: { description: "Click handler callback" }, + children: { description: "Icon component to render" }, + }, };
1-6: Consider adding more story variants.The component would benefit from additional stories showcasing different states and use cases:
export const Disabled = (args: React.ComponentProps<typeof ButtonIcon>) => ( <ButtonIcon {...args} disabled> <IconSettings /> </ButtonIcon> ); export const Loading = (args: React.ComponentProps<typeof ButtonIcon>) => ( <ButtonIcon {...args} loading> <IconSettings /> </ButtonIcon> );packages/with-vite/src/stories/ButtonIcon.stories.tsx (1)
17-21: Consider adding TypeScript types for story argsThe
args: anytype could be more specific to match the ButtonIcon component props.-export const Basic = (args: any) => ( +export const Basic = (args: React.ComponentProps<typeof ButtonIcon>) => (packages/api/.storybook/preview.js (1)
1-4: Consider organizing CSS imports by specificityThe order of CSS imports can affect styling precedence. Consider organizing from base styles to more specific component styles:
/** @type { import('@storybook/react').Preview } */ import "./styles.css"; -import "@versini/ui-button/dist/style.css"; -import "@versini/ui-pill/dist/style.css"; +import "@versini/ui-pill/dist/style.css"; +import "@versini/ui-button/dist/style.css";packages/api/src/getting-started/helpers/Highlight.tsx (1)
8-11: Improve TypeScript type definitionsThe language prop is marked as required but has a default value.
-}: { codeBlock: string; language: string }) => ( +}: { codeBlock: string; language?: string }) => (packages/api/src/getting-started/helpers/Table.tsx (1)
9-13: Consider enhancing type safety with required propertiesThe interface looks good but could benefit from explicit readonly properties since the data shouldn't be modified within the component.
interface TableProps { - column1: string; - column2: string; - data: { id: string; name: string; description: string }[]; + readonly column1: string; + readonly column2: string; + readonly data: readonly { readonly id: string; readonly name: string; readonly description: string }[]; }packages/api/src/getting-started/Usage.mdx (2)
1-8: Consider organizing imports for better maintainabilityThe imports are functional but could be better organized for maintainability.
import { Meta } from "@storybook/blocks"; + import { Button, ButtonIcon } from "@versini/ui-button"; import { Card } from "@versini/ui-card"; - import Navigators from "./helpers/Navigators"; import Highlight from "./helpers/Highlight"; import codeBlocks from "./helpers/codeBlocks";Note: ButtonIcon is imported but not used in this file.
21-31: Consider enhancing the example with more contextThe example card is simple but could be more informative for documentation purposes.
<Card mode="light" header="Welcome to UI Components" footer={ <Button mode="light" focusMode="dark" noBorder> Hooray </Button> } > - <p>Hello World</p> + <p>This is an example of a Card component with a header, content, and a footer button.</p> + <p className="mt-2">Try interacting with the button below!</p> </Card>packages/api/.storybook/main.js (2)
23-25: Consider enabling autodocs for better documentation coverageThe
autodocsfeature is currently commented out. This feature automatically generates documentation pages for your components, which could be beneficial for API documentation.docs: { - // autodocs: true, + autodocs: true, },
30-35: Simplify the prop filter logicThe current prop filtering logic could be simplified while maintaining the same functionality.
propFilter: (prop) => { - const res = - /@versini/.test(prop.parent?.fileName) || - !/node_modules/.test(prop.parent?.fileName); - return prop.parent ? res : true; + if (!prop.parent) return true; + return /@versini/.test(prop.parent.fileName) || + !/node_modules/.test(prop.parent.fileName); },packages/api/src/stories/Button.stories.tsx (1)
24-39: Improve story implementation and documentation
- The story mutates the input args directly, which is not recommended.
- The documentation text could be moved to MDX for better maintainability.
-export const Truncate = (args: any) => { - args.className = "w-44 sm:w-52"; +export const Truncate = (args: React.ComponentProps<typeof Button>) => { + const truncateArgs = { + ...args, + className: "w-44 sm:w-52" + }; return ( <> - <p>For text to truncate, you need to limit the width of the buttons.</p> - <p>This can be done by using Tailwind width classes, for example</p> - <code>className={args.className}</code> + {/* Move documentation to Button.mdx */} <div className="flex flex-wrap gap-2"> - <Button {...args}>Button lorem ipsum</Button> - <Button {...args}>Button lorem ipsum dolor</Button> - <Button {...args}>Button lorem ipsum dolor sit amet</Button> + <Button {...truncateArgs}>Button lorem ipsum</Button> + <Button {...truncateArgs}>Button lorem ipsum dolor</Button> + <Button {...truncateArgs}>Button lorem ipsum dolor sit amet</Button> </div> </> ); };packages/api/src/getting-started/helpers/codeBlocks.ts (3)
3-7: Consider version pinning in installation commandsFor better reproducibility and to prevent unexpected breaking changes, consider pinning package versions in the installation commands.
- code: `$ npm install --save @versini/ui-button -$ npm install --save @versini/ui-card + code: `$ npm install --save @versini/ui-button@latest +$ npm install --save @versini/ui-card@latest -$ npm install --save-dev @versini/ui-styles`, +$ npm install --save-dev @versini/ui-styles@latest`,
15-25: Add TypeScript type annotations to config exampleSince this is a TypeScript project, consider adding type annotations to the configuration example to help users with type safety.
code: `// tailwind.config.js import { twPlugin } from "@versini/ui-styles"; -export default twPlugin.merge({ +export default twPlugin.merge<{ content: string[] }>({ // this is an example, you can change the path to your files content: ["./src/**/*.{js,ts,jsx,tsx}"], });`,
39-53: Add prop type documentation in usage exampleThe usage example would benefit from additional comments explaining the available prop types for Button and Card components.
function App() { return ( <Card + // mode: "light" | "dark" mode="light" + // header: string | ReactNode header="Welcome to UI Components" footer={ <Button mode="light" focusMode="dark" noBorder> Hooray </Button> } >packages/api/src/getting-started/Configuration.mdx (1)
9-24: Enhance accessibility and add specific bundler examplesThe documentation would benefit from improved accessibility and more detailed examples:
- Add ARIA labels to the list for better screen reader support
- Include specific configuration examples for each mentioned bundler
- <div className="prose"> + <div className="prose" role="main" aria-labelledby="configuration-title"> - <h1>Configuration</h1> + <h1 id="configuration-title">Configuration</h1> <h2>JavaScript</h2> - <ul> + <ul aria-label="Configuration requirements"> <li> <p>UI Components come un-bundled, which means you need to use a bundler such as Webpack, Vite or Rollup to bundle components into your application. </p> + <details> + <summary>Bundler Examples</summary> + <p>Vite example:</p> + <pre><code>// vite.config.ts +import { defineConfig } from 'vite' + +export default defineConfig({ + // your config here +})</code></pre> + </details> </li>packages/api/src/getting-started/helpers/Navigators.tsx (3)
21-29: Improve type safety for alignment valuesConsider using a const assertion or enum for the alignment values to improve type safety and maintainability.
+const FLEX_ALIGNMENTS = { + END: 'flex-end', + START: 'flex-start', + BETWEEN: 'space-between', + CENTER: 'center', + AROUND: 'space-around', + EVENLY: 'space-evenly', + NORMAL: 'normal', +} as const; + +type FlexAlignment = typeof FLEX_ALIGNMENTS[keyof typeof FLEX_ALIGNMENTS]; + - let mainAlign: - | "flex-end" - | "space-between" - | "flex-start" - | "normal" - | "center" - | "space-around" - | "space-evenly" - | undefined = "flex-end"; + let mainAlign: FlexAlignment = FLEX_ALIGNMENTS.END;
14-65: Consider memoizing the component for performanceSince this is a presentational component, consider wrapping it with React.memo to prevent unnecessary re-renders.
-export default ({ +const Navigators = ({ leftLink, leftLabel, rightLink, rightLabel, paddingTop = false, -}: NavigatorsProps) => { +}: NavigatorsProps) => { // ... component implementation ... }; + +export default React.memo(Navigators);
1-65: Add unit tests for the componentThe component lacks unit tests. Consider adding tests to verify the conditional rendering logic and click handlers.
Would you like me to help generate unit tests for this component?
packages/api/src/getting-started/Changelogs.mdx (2)
20-25: Consider enhancing accessibility of collapsible sectionsWhile the
details/summaryelements provide good semantic structure, consider adding ARIA labels and keyboard navigation improvements.-<details> +<details className="group"> - <summary>Components</summary> + <summary + className="cursor-pointer focus:outline-none focus-visible:ring-2" + aria-label="Toggle Components changelog" + > + Components + </summary>Also applies to: 27-32, 34-39, 41-46, 48-53
16-18: Consider using consistent spacing utilityThe file uses two identical
Unstyledcomponents withmt-4spacing. Consider extracting this into a reusable component or consistent utility class.+const Spacer = () => ( + <Unstyled> + <div className="mt-4" /> + </Unstyled> +); -<Unstyled> - <div className="mt-4" /> -</Unstyled> +<Spacer />Also applies to: 55-57
packages/api/src/getting-started/Installation.mdx (3)
15-35: Consider enhancing the package description table with version informationThe package description table provides good information about available packages, but it could be more helpful to include the minimum required versions or version compatibility information for each package.
46-52: Add peer dependencies version rangesWhile the React requirement is mentioned, consider specifying a version range (e.g.,
"^18.0.0") instead of just the minimum version. This helps users understand both minimum and maximum supported versions.
55-61: Consider making the footnote more prominentThe CSS styles information seems important enough to be part of the main content rather than a footnote, especially since it affects the installation process.
packages/api/src/getting-started/Overview.mdx (2)
18-23: Enhance image accessibility attributesWhile the image includes an alt text, consider adding
loading="lazy"for better performance andwidthandheightattributes to prevent layout shifts during loading.<img className="my-0 ml-auto mr-auto h-52 w-52 object-cover sm:h-52 sm:w-52 md:h-full md:w-60" src={Hero} alt="An illustration of web page rendered on both desktop and mobile devices" + loading="lazy" + width="240" + height="208" />
40-51: Consider adding links to detailed documentationThe features section mentions TypeScript support and accessibility, but doesn't link to more detailed documentation. Consider adding links to specific sections that elaborate on these features.
.github/workflows/pull-requests.yml (1)
82-85: Consider consolidating ignore patternsThe ignore patterns are repeated across multiple commands. Consider defining these as environment variables or using a configuration file to maintain consistency and reduce duplication.
+ env: + IGNORE_PACKAGES: --ignore="@versini/documentation" --ignore="@versini/api" - name: Run Lint and Coverage run: | - npx lerna run lint --ignore="@versini/documentation" --ignore="@versini/api" + npx lerna run lint $IGNORE_PACKAGES npx lerna run build --scope="@versini/ui-styles" - npx lerna run build --ignore="@versini/documentation" --ignore="@versini/api" --ignore="@versini/ui-styles" + npx lerna run build $IGNORE_PACKAGES --ignore="@versini/ui-styles" - npx lerna run test:coverage --ignore="@versini/documentation" --ignore="@versini/api" + npx lerna run test:coverage $IGNORE_PACKAGES
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (17)
packages/api/src/stories/assets/accessibility.pngis excluded by!**/*.pngpackages/api/src/stories/assets/accessibility.svgis excluded by!**/*.svgpackages/api/src/stories/assets/addon-library.pngis excluded by!**/*.pngpackages/api/src/stories/assets/assets.pngis excluded by!**/*.pngpackages/api/src/stories/assets/context.pngis excluded by!**/*.pngpackages/api/src/stories/assets/discord.svgis excluded by!**/*.svgpackages/api/src/stories/assets/docs.pngis excluded by!**/*.pngpackages/api/src/stories/assets/figma-plugin.pngis excluded by!**/*.pngpackages/api/src/stories/assets/github.svgis excluded by!**/*.svgpackages/api/src/stories/assets/hero-14.jpgis excluded by!**/*.jpgpackages/api/src/stories/assets/share.pngis excluded by!**/*.pngpackages/api/src/stories/assets/styling.pngis excluded by!**/*.pngpackages/api/src/stories/assets/testing.pngis excluded by!**/*.pngpackages/api/src/stories/assets/theming.pngis excluded by!**/*.pngpackages/api/src/stories/assets/tutorials.svgis excluded by!**/*.svgpackages/api/src/stories/assets/youtube.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (31)
.github/workflows/deploy-pages.yml(2 hunks).github/workflows/pull-requests.yml(3 hunks).github/workflows/release-please.yml(1 hunks).gitignore(1 hunks)examples/with-vite/package.json(1 hunks)packages/api/.storybook/main.js(1 hunks)packages/api/.storybook/preview.js(1 hunks)packages/api/.storybook/styles.css(1 hunks)packages/api/nodemon.json(1 hunks)packages/api/package.json(1 hunks)packages/api/postcss.config.js(1 hunks)packages/api/src/getting-started/Changelogs.mdx(1 hunks)packages/api/src/getting-started/Configuration.mdx(1 hunks)packages/api/src/getting-started/Installation.mdx(1 hunks)packages/api/src/getting-started/Overview.mdx(1 hunks)packages/api/src/getting-started/ReleaseTags.mdx(1 hunks)packages/api/src/getting-started/Usage.mdx(1 hunks)packages/api/src/getting-started/helpers/Highlight.tsx(1 hunks)packages/api/src/getting-started/helpers/Navigators.tsx(1 hunks)packages/api/src/getting-started/helpers/Table.tsx(1 hunks)packages/api/src/getting-started/helpers/codeBlocks.ts(1 hunks)packages/api/src/getting-started/helpers/tableData.ts(1 hunks)packages/api/src/stories/Button.stories.tsx(1 hunks)packages/api/src/stories/ButtonIcon.stories.tsx(1 hunks)packages/api/src/vite-env.d.ts(1 hunks)packages/api/tailwind.config.js(1 hunks)packages/api/tsconfig.json(1 hunks)packages/api/tsconfig.node.json(1 hunks)packages/api/vite.config.ts(1 hunks)packages/with-vite/src/stories/Button.stories.tsx(1 hunks)packages/with-vite/src/stories/ButtonIcon.stories.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (9)
- packages/api/postcss.config.js
- packages/api/src/vite-env.d.ts
- packages/api/nodemon.json
- examples/with-vite/package.json
- packages/api/tsconfig.node.json
- packages/api/vite.config.ts
- packages/api/.storybook/styles.css
- packages/api/package.json
- packages/api/tsconfig.json
🔇 Additional comments (11)
packages/api/src/getting-started/ReleaseTags.mdx (2)
72-95: LGTM! Clear and comprehensive stable component criteria
The stable section effectively communicates the high quality bar required for stable components.
97-99: Verify navigation links
Let's ensure the referenced documentation pages exist.
✅ Verification successful
Navigation links verified successfully
Both referenced documentation pages "Usage.mdx" and "Changelogs.mdx" exist in the same directory, confirming valid navigation links.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the linked documentation files exist
fd -e mdx -e md "Usage|Changelogs" packages/api/src/getting-started/
Length of output: 161
packages/api/tailwind.config.js (1)
1-7: LGTM! Clean and minimal Tailwind configuration.
The configuration correctly:
- Provides proper TypeScript type annotation
- Extends base configuration using twPlugin.merge
- Scopes content scanning to relevant file types in src directory
packages/with-vite/src/stories/ButtonIcon.stories.tsx (1)
7-14: LGTM! Well-structured story configuration
The meta configuration follows Storybook best practices with:
- Centered layout for better visualization
- Clear component title
- Mock function for onClick handler
packages/api/.storybook/preview.js (1)
6-29: LGTM! Well-organized Storybook configuration
The preview configuration follows best practices:
- Logical story ordering for documentation flow
- Expanded controls for better documentation
- Appropriate matchers for color and date controls
.gitignore (1)
79-79: LGTM! Appropriate addition for Storybook logs
The addition of *storybook.log is consistent with existing log ignore patterns and appropriate for the Storybook migration.
packages/api/.storybook/main.js (1)
4-22: LGTM: Core Storybook configuration is well structured
The framework setup with Vite and essential addons is properly configured. The story patterns will correctly pick up MDX and component story files.
packages/api/src/getting-started/Changelogs.mdx (1)
5-9: Verify the relative paths to changelog files
The imports use relative paths that go up three levels (../../../). Let's verify these paths exist and are correct.
✅ Verification successful
All changelog files exist at the expected locations
All the referenced CHANGELOG.md files exist in their respective package directories, confirming that the relative path imports (../../../) in Changelogs.mdx are correct.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the referenced CHANGELOG.md files exist
for pkg in ui-components ui-styles ui-form ui-icons ui-system; do
echo "Checking CHANGELOG.md for $pkg..."
if [ -f "packages/$pkg/CHANGELOG.md" ]; then
echo "✓ Found CHANGELOG.md for $pkg"
else
echo "✗ Missing CHANGELOG.md for $pkg"
fi
done
Length of output: 1379
.github/workflows/release-please.yml (1)
44-44: Verify build exclusions impact
The addition of @versini/api to ignored packages aligns with the documentation migration. However, let's verify this doesn't affect other packages that might depend on it.
✅ Verification successful
Let me gather more information about the package dependencies and build process.
Let me check the content of the api package and any potential dependents.
Build exclusion of @versini/api package is safe
The @versini/api package can be safely ignored during the build process because:
- No other packages in the monorepo depend on it
- It's a private package (
"private": true) - It's a consumer of other UI packages rather than a dependency for other packages
- The package itself has been migrated to use Storybook for documentation, aligning with the PR's objectives
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for dependencies on @versini/api
echo "Checking for dependencies on @versini/api..."
fd -t f "package.json" -x jq -r '.dependencies."@versini/api" // .devDependencies."@versini/api" // empty'
Length of output: 205
Script:
#!/bin/bash
# Check package.json files for any references to @versini/api
echo "Checking for any references to @versini/api in package.json files..."
fd -t f "package.json" -x grep -l "@versini/api" {} \;
# Check the content of @versini/api's package.json if it exists
echo -e "\nChecking @versini/api package.json if it exists..."
fd -t f "package.json" -p "*api/package.json" -x cat {} \;
# Look for build dependencies in lerna.json
echo -e "\nChecking lerna.json for build configuration..."
fd "lerna.json" -x cat {} \;
Length of output: 767
Script:
#!/bin/bash
# Check the content of api package.json
echo "Checking content of api package.json..."
cat packages/api/package.json
# Check if any other packages have api as a dependency
echo -e "\nChecking for packages that depend on @versini/api..."
fd -t f "package.json" -E "api/package.json" -x jq -r 'select(.dependencies."@versini/api" or .devDependencies."@versini/api") | .name' {} \;
# Check if api package is used in any source files
echo -e "\nChecking for imports/requires of @versini/api..."
rg "@versini/api" -g "!package.json" -g "!package-lock.json" -g "!yarn.lock" -g "!pnpm-lock.yaml"
Length of output: 2116
.github/workflows/deploy-pages.yml (1)
59-59: Verify the new artifact path exists after build
The artifact upload path has changed to ./packages/api/dist. Let's ensure this directory is created during the build process.
✅ Verification successful
Let me check the build configuration to understand where the output directory is configured.
Based on the package.json inspection, I can now generate the final response:
Build configuration outputs to correct path but requires build step
The artifact path ./packages/api/dist is correctly configured. The package.json shows that:
- The build script uses
storybook build --output-dir dist - A
cleanscript exists to remove the dist directory
The directory wasn't found because the sandbox environment doesn't run the build step. This path will exist after the workflow's build step completes.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the dist directory is created in the expected location
echo "Checking for api package build output directory..."
if [ -d "packages/api/dist" ]; then
echo "✓ Found dist directory"
else
echo "✗ Missing dist directory - verify build output location"
fi
Length of output: 262
Script:
#!/bin/bash
# Check package.json in the api package for build configuration
echo "Checking build configuration in packages/api/package.json..."
fd "package.json" packages/api --exec cat {}
# Check for any build scripts that might set the output directory
echo -e "\nChecking for build scripts..."
fd "build|webpack|vite" packages/api --extension js,ts,cjs,mjs --exec cat {}
Length of output: 1854
.github/workflows/pull-requests.yml (1)
37-38: Verify the build order dependency
The build command for @versini/ui-styles is executed before other packages. Please verify that other packages don't depend on @versini/ui-styles during their build process.
✅ Verification successful
Build order is correct
The current build order is appropriate. While @versini/ui-styles is a dependency for some packages, all the packages that depend on it (@versini/example-with-webpack, @versini/example-with-vite, @versini/api) are explicitly excluded from the second build command using the --ignore flags. The remaining UI packages that are built in the second command don't show a dependency on @versini/ui-styles.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for dependencies on @versini/ui-styles in package.json files
fd package.json --exec jq -r 'select(.dependencies."@versini/ui-styles" or .devDependencies."@versini/ui-styles") | "\(.name) depends on @versini/ui-styles"'
Length of output: 354
Script:
#!/bin/bash
# Check if any of the packages that depend on @versini/ui-styles are included in the second build command
# by examining their package.json files to get their names
fd package.json --exec jq -r '.name' | grep -v "example-" | grep -v "documentation" | grep -v "api" | grep -v "ui-styles"
Length of output: 603
Bundle Size (components)
Overall bundle size: 84.71 KB (-19 B -0.02%) Bundle Size (fingerprint)
Overall bundle size: 48.28 KB (-1 B 0.00%) Bundle Size (form components)
Overall bundle size: 54 KB (-10 B -0.02%) Bundle Size (system)
Overall bundle size: 49.13 KB (+2 B 0.00%) |
Summary by CodeRabbit
Release Notes
New Features
ButtonandButtonIconcomponents to facilitate visual testing.Bug Fixes
@versini/apipackage from various workflows, streamlining operations.Chores
.gitignoreentry for log files generated by Storybook.