"feat(Grid): Implement GRID component with container option, enhanced layout features, and Storybook integration" #3945
Conversation
…ybook configuration
|
|
@vardhman-shaha is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces a new Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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: 30
🧹 Outside diff range and nitpick comments (12)
packages/components/Grid/src/GridItem.tsx (1)
1-13: Add JSDoc documentation for the component.The component lacks proper documentation explaining its purpose, props, and usage examples.
Add comprehensive JSDoc documentation:
+/** + * GridItem component that represents a cell within a Grid layout. + * This component should be used as a child of the Grid component. + * + * @example + * ```jsx + * <Grid> + * <GridItem>Content</GridItem> + * </Grid> + * ``` + */ const GridItem: React.FC<GridItemProps> = ({children, ...props}) => {packages/components/Grid/Grid.tsx (3)
21-21: Consider adding named exports for better tree-shakingWhile default exports work, named exports can provide better tree-shaking capabilities and explicit imports.
-export default Grid; +export {Grid};
1-21: Add unit tests for the Grid componentThe implementation lacks test coverage for the grid functionality.
Would you like me to help generate comprehensive test cases covering:
- Container layout behavior
- Responsive breakpoints
- Theme integration
- Accessibility attributes
- Grid layout calculations
1-21: Document the Grid component APIThe component lacks JSDoc documentation for its props and usage examples.
Add comprehensive documentation:
/** * Grid Component * * A flexible grid layout system that supports responsive design and container layouts. * * @example * ```tsx * <Grid columns={3} gap="1rem" container> * <GridItem>Content 1</GridItem> * <GridItem>Content 2</GridItem> * </Grid> * ``` * * @property {ReactNode} children - Grid items to be rendered * @property {number} [columns=3] - Number of columns in the grid * @property {string} [gap="10px"] - Gap between grid items * @property {boolean} [container] - Enable container layout with max-width * @property {Object} [responsive] - Responsive column counts for different breakpoints */packages/components/Grid/src/Grid.tsx (1)
21-21: Enhance exports for better TypeScript supportAdd named exports and component display name for better developer experience.
+Grid.displayName = "NextUI.Grid"; + +export type {GridProps}; export default Grid;packages/components/Grid/stories/Grid.stories.tsx (2)
17-24: Enhance template to showcase more Grid features.The current template could better demonstrate the Grid component's capabilities. Consider adding examples of:
- Different item sizes using span
- Responsive layouts
- Rich content within items
const Template: ComponentStory<typeof Grid> = (args) => ( <Grid {...args}> - <GridItem>Item 1</GridItem> - <GridItem>Item 2</GridItem> - <GridItem>Item 3</GridItem> - <GridItem>Item 4</GridItem> + <GridItem span={2}>Wide Item</GridItem> + <GridItem> + <div style={{ padding: "1rem", background: "var(--nextui-colors-primary)" }}> + Rich Content + </div> + </GridItem> + <GridItem>Regular Item</GridItem> + <GridItem span={{ sm: 1, md: 2 }}>Responsive Item</GridItem> </Grid> );
26-42: Add more story variations to demonstrate full component capabilities.The current stories only vary the column count. Based on the PR objectives, consider adding stories that showcase:
- Container layout option
- Different gap values
- Responsive breakpoints
- Alignment options
Add these additional story variations:
export const WithContainer = Template.bind({}); WithContainer.args = { columns: 3, gap: "1rem", container: true, justify: "center" }; export const Responsive = Template.bind({}); Responsive.args = { columns: { sm: 2, md: 3, lg: 4 }, gap: { sm: "0.5rem", md: "1rem" } };packages/storybook/.storybook/preview.tsx (2)
7-7: Remove commented import.Instead of keeping commented code, it should be removed if it's no longer needed.
-// import { withStrictModeSwitcher } from "./addons/react-strict-mode";
82-82: Specify default locale for Intl.DisplayNames.Using
undefinedas the locale parameter for Intl.DisplayNames falls back to the system locale, which might cause inconsistent display names. Consider using 'en-US' as the default.-title: new Intl.DisplayNames(undefined, { type: "language" }).of(locale), +title: new Intl.DisplayNames('en-US', { type: "language" }).of(locale),packages/components/Grid/__tests__/range-calendar.test.tsx (1)
27-751: Consider adding missing test scenarios.While the test coverage is comprehensive for basic interactions, there are some scenarios that should be tested:
- Accessibility interactions (screen reader announcements)
- Error scenarios (invalid date ranges)
- Edge cases (min/max date constraints)
- Mobile touch interactions
Would you like me to help generate additional test cases for these scenarios?
packages/components/Grid/__tests__/calendar.test.tsx (2)
272-280: Use testing-library queries instead ofcontainer.querySelectorIn the test verifying that the month and year picker does not open when
isDisabledis true, consider usinggetByRoleorgetByLabelTextfrom React Testing Library for selecting elements. This enhances readability and aligns with best practices for accessibility testing.Apply this suggestion:
-const headerButtonPicker = container.querySelector("[data-slot='header']")!; +const headerButtonPicker = getByRole("button", {name: /header/i});
415-445: Define test components outside of test cases for reuseThe
Examplecomponent within theit("should automatically marks selection as invalid using isDateUnavailable")test is defined inside the test function. Consider moving it outside to the top level of the test file to improve readability and potential reuse in other tests.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (17)
- packages/components/Grid/Grid.stories.tsx (1 hunks)
- packages/components/Grid/Grid.tsx (1 hunks)
- packages/components/Grid/GridItem.tsx (1 hunks)
- packages/components/Grid/README.md (1 hunks)
- packages/components/Grid/tests/calendar.test.tsx (1 hunks)
- packages/components/Grid/tests/range-calendar.test.tsx (1 hunks)
- packages/components/Grid/package.json (1 hunks)
- packages/components/Grid/src/Grid.stories.tsx (1 hunks)
- packages/components/Grid/src/Grid.tsx (1 hunks)
- packages/components/Grid/src/GridItem.tsx (1 hunks)
- packages/components/Grid/src/index.tsx (1 hunks)
- packages/components/Grid/stories/Grid.stories.tsx (1 hunks)
- packages/components/Grid/tsconfig.json (1 hunks)
- packages/components/Grid/tsup.config.ts (1 hunks)
- packages/storybook/.storybook/main.js (2 hunks)
- packages/storybook/.storybook/preview.tsx (6 hunks)
- packages/storybook/package.json (2 hunks)
✅ Files skipped from review due to trivial changes (3)
- packages/components/Grid/src/Grid.stories.tsx
- packages/components/Grid/tsconfig.json
- packages/components/Grid/tsup.config.ts
🧰 Additional context used
🪛 LanguageTool
packages/components/Grid/README.md
[duplication] ~33-~33: Possible typo: you repeated a word
Context: ...ents/Grid # Install dependencies using pnpm pnpm install Running the Project 1. Developm...(ENGLISH_WORD_REPEAT_RULE)
🪛 Markdownlint
packages/components/Grid/README.md
30-30: null
Bare URL used(MD034, no-bare-urls)
59-59: null
Bare URL used(MD034, no-bare-urls)
🔇 Additional comments (16)
packages/components/Grid/GridItem.tsx (1)
1-13: Consider enhancing GridItem for better Grid system integration.Based on the PR objectives for implementing a comprehensive Grid system with container options and responsive features, consider the following architectural improvements:
- Add support for responsive sizing and positioning
- Integrate with the container layout system
- Add style system integration for consistent theming
Let's verify the styling system integration requirements:
packages/components/Grid/src/GridItem.tsx (1)
1-13: Verify Grid component integration.Let's verify how this component is being used within the Grid component to ensure proper integration.
✅ Verification successful
Let me verify if there's a Grid component implementation in the codebase.
Grid component integration is properly implemented
The GridItem component is correctly integrated within the ecosystem:
- It's properly imported and used in Grid.stories.tsx for demonstration
- The Grid component is designed to accept children elements (including GridItem) and arranges them in a grid layout using CSS Grid
- The implementation allows for flexible usage with configurable columns and gap properties
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for GridItem usage in Grid component and stories echo "Checking GridItem usage in Grid component:" rg -A 5 "GridItem" packages/components/Grid/src/Grid.tsx || echo "Grid.tsx not found" echo -e "\nChecking GridItem usage in stories:" rg -A 5 "GridItem" packages/components/Grid/stories/Grid.stories.tsx || echo "Grid.stories.tsx not found"Length of output: 677
Script:
#!/bin/bash # Search for Grid component implementation echo "Searching for Grid component implementation:" fd "Grid.tsx" packages/components/Grid/src echo -e "\nChecking Grid component content if found:" cat packages/components/Grid/src/Grid.tsx 2>/dev/null || echo "Grid.tsx not found" # Search for any other potential Grid component files echo -e "\nSearching for other Grid component files:" fd "Grid" packages/components/Grid/srcLength of output: 1134
packages/components/Grid/src/index.tsx (1)
3-4: Verify the Grid component importsThe imports suggest that the Grid components are in separate files, but we need to verify their existence and implementation.
✅ Verification successful
Let me gather more information about the Grid components' implementation to verify their existence and structure.
Grid component imports are correctly structured and implemented
Both Grid and GridItem components exist in their respective files with proper implementations:
- Grid.tsx contains a React functional component with props for columns and gap
- GridItem.tsx contains a React functional component that forwards props to its div element
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence and implementation of Grid components # Check for Grid component files echo "Checking for Grid component files..." fd "Grid.tsx|GridItem.tsx" packages/components/Grid/src # Verify Grid component implementation echo "Checking Grid component implementation..." ast-grep --pattern 'export default function Grid' packages/components/Grid/src/Grid.tsx # Verify GridItem component implementation echo "Checking GridItem component implementation..." ast-grep --pattern 'export default function GridItem' packages/components/Grid/src/GridItem.tsxLength of output: 602
Script:
#!/bin/bash # Check the actual content of Grid components echo "Content of Grid.tsx:" cat packages/components/Grid/src/Grid.tsx echo -e "\nContent of GridItem.tsx:" cat packages/components/Grid/src/GridItem.tsxLength of output: 1084
packages/components/Grid/src/Grid.tsx (1)
1-21: Verify NextUI theme system integrationLet's ensure the component properly integrates with NextUI's theme system.
packages/storybook/.storybook/main.js (1)
4-4: Verify relocation of welcome content.The welcome story typically provides valuable getting started information for new developers. If this content has been removed, please ensure it's been relocated to appropriate documentation.
✅ Verification successful
Welcome story can be safely removed
Based on the repository structure, there is sufficient getting started documentation in multiple README files across the repository, including the main packages (core/react, components/Grid, apps/docs). The removal of the Storybook welcome story won't impact the developer onboarding experience as the essential information is well-documented elsewhere.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if welcome content exists elsewhere in docs or README rg -i "getting started|welcome" --type mdLength of output: 572
Script:
#!/bin/bash # Check if there's any other storybook documentation or introduction content fd -e mdx -e md -e tsx -e jsx -p "intro|introduction|getting.?started|welcome" packages/storybook/ # Also check if there's any storybook introduction component rg -l "Introduction|Welcome" packages/storybook/ -g "*.{tsx,jsx,ts,js,mdx,md}"Length of output: 181
packages/components/Grid/stories/Grid.stories.tsx (1)
1-7: LGTM! Clean and well-organized imports.The imports are properly structured with clear separation between external and internal dependencies.
packages/storybook/package.json (2)
66-66: LGTM!The added newline at the end of the file follows standard JSON formatting practices.
40-51: Verify Storybook 8.x compatibility with existing stories.The major version upgrade of Storybook addons from 7.x to 8.x might introduce breaking changes. While this upgrade is beneficial for the new Grid component stories, we should ensure compatibility with existing stories.
✅ Verification successful
Storybook 8.x upgrade is compatible with existing stories
Based on the analysis of story files:
- Stories are using modern CSF (Component Story Format) with
Metafrom@storybook/react- No usage of deprecated APIs (
storiesOf,addDecorator,addParameters)- Stories follow the recommended structure with proper metadata exports
- Grid component stories already use the newer
ComponentMetaformatThe upgrade from Storybook 7.x to 8.x appears safe as the codebase already follows modern practices and doesn't use deprecated patterns.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for potential breaking changes in existing stories # Test 1: Look for deprecated Storybook APIs that might need updates echo "Checking for potentially affected story files..." rg -l "storiesOf|addDecorator|addParameters" "packages/components/**/*.stories.tsx" # Test 2: Check story metadata structure which might need updates echo "Checking story metadata structure..." rg -l "^(export default|const meta =).*Meta[\s\S]*{" "packages/components/**/*.stories.tsx"Length of output: 598
Script:
#!/bin/bash # Let's first find the correct location of story files echo "Finding Storybook story files..." fd -e stories.tsx -e stories.jsx -e stories.js -e stories.ts # Then check for deprecated APIs in found files echo "Checking for deprecated Storybook APIs..." rg -l "storiesOf|addDecorator|addParameters" $(fd -e stories.tsx -e stories.jsx -e stories.js -e stories.ts) # Check story metadata structure echo "Checking story metadata structure..." rg "^(export default|const meta =).*Meta.*{" $(fd -e stories.tsx -e stories.jsx -e stories.js -e stories.ts) # Check .storybook configuration echo "Checking Storybook configuration..." fd -t f -p ".storybook"Length of output: 11157
Script:
#!/bin/bash # Let's check the content of a few story files to understand the current structure echo "Checking story file structure..." for file in packages/components/button/stories/button.stories.tsx packages/components/Grid/Grid.stories.tsx packages/components/avatar/stories/avatar.stories.tsx; do echo "=== $file ===" head -n 20 "$file" done # Let's also check Storybook main config echo "=== Checking Storybook main config ===" fd -t f "main\.(js|ts)" -p ".storybook" -x cat {}Length of output: 3065
packages/storybook/.storybook/preview.tsx (3)
Line range hint
31-67: LGTM! Theme configuration is well-structured.The theme configuration properly extends Storybook's default themes while maintaining NextUI's design system consistency.
70-73: LGTM! Comprehensive locale support.The locale configuration provides excellent international support with a well-organized list of language codes.
Line range hint
99-106: LGTM! Clean preview configuration export.The preview configuration is well-structured and properly typed using Storybook's Preview type.
packages/components/Grid/Grid.stories.tsx (1)
5-6:⚠️ Potential issueFix inconsistent import paths
The import paths mix
srcand relative paths, which could cause issues. Consider using consistent import paths relative to the stories file.-import Grid from "../src/Grid"; -import GridItem from "../src/GridItem"; +import {Grid} from "./Grid"; +import {GridItem} from "./GridItem";Likely invalid or redundant comment.
packages/components/Grid/__tests__/range-calendar.test.tsx (2)
1-7: LGTM: Imports and setup.The imports are well-organized and the necessary testing utilities are properly imported.
9-25: LGTM: Test utilities setup.The date formatter and test component wrapper are well-implemented, with clear documentation explaining their purpose.
packages/components/Grid/__tests__/calendar.test.tsx (2)
14-16: Calendar component correctly configured for testingThe
Calendarcomponent is appropriately set up withdisableAnimationto prevent animation issues during testing.
20-32: CalendarWithLocale component effectively manages locale settingsThe
CalendarWithLocalecomponent successfully integrates locale support by wrapping theCalendarBasecomponent within theNextUIProvider.
There was a problem hiding this comment.
Actionable comments posted: 20
🧹 Outside diff range and nitpick comments (9)
packages/components/Grid/GridItem.tsx (2)
1-7: Add JSDoc documentation for better developer experience.The interface and component would benefit from comprehensive JSDoc documentation to improve IDE support and make the component more self-documenting.
+/** + * Props for the GridItem component + * @property {ReactNode} children - The content to be rendered inside the grid item + * @property {string} [className] - Optional CSS class name for custom styling + */ interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> { children: ReactNode; className?: string; }
25-27: Add reference to unit tests in comments.The component implementation looks good, but it would be helpful to add a reference to the corresponding test file in the comments.
+/** + * @see GridItem.test.tsx for unit tests + */ GridItem.displayName = "NextUI.GridItem";packages/storybook/.storybook/main.js (1)
10-10: Consider keeping the welcome storyThe welcome story typically provides valuable documentation and getting started guidance for new contributors. Instead of removing it, consider updating it to include information about the new Grid component.
- //"./welcome.stories.mdx", + "./welcome.stories.mdx",packages/components/Grid/src/index.tsx (1)
6-33: Add TypeScript types to the example componentWhile the example is comprehensive, adding TypeScript types would improve documentation and type safety.
-const GridExample = () => { +const GridExample: React.FC = () => {packages/components/Grid/stories/Grid.stories.tsx (2)
8-37: LGTM! Consider enhancing the component description.The control configurations look good with the improved columns limit and gap options. The container option is properly implemented.
Consider expanding the component description to include examples of use cases:
- "A flexible Grid component that supports container layout and responsive design.", + "A flexible Grid component that supports container layout and responsive design. Ideal for creating responsive layouts, card grids, and dashboard layouts with configurable columns and spacing.",
48-89: Improve story organization and documentation.The story variations provide good coverage of different grid configurations. However, consider these improvements:
- Add descriptions to all stories, not just ResponsiveGrid
- Order stories from simple to complex configurations
- Include examples of common layout patterns
Add descriptions to other stories:
export const Default = Template.bind({}); Default.args = { columns: 3, gap: "1rem", container: false, }; +Default.parameters = { + docs: { + description: { + story: "Basic 3-column grid layout without container.", + }, + }, +}; // Similar additions for TwoColumns and FourColumnspackages/components/Grid/Grid.tsx (1)
1-2: Remove implementation commentThe comment about ensuring proper installation is implementation detail and should be removed.
import React, {ReactNode} from "react"; -import {useTheme} from "@nextui-org/theme"; // Ensure this is properly installed and configured +import {useTheme} from "@nextui-org/theme";packages/components/Grid/Grid.stories.tsx (2)
5-6: Consider using absolute imports instead of relative pathsThe relative import paths (
../src/) might cause issues if the file structure changes. Consider using absolute imports with path aliases for better maintainability.-import Grid from "../src/Grid"; -import GridItem from "../src/GridItem"; +import { Grid, GridItem } from "@nextui/components";
82-98: Enhance grid items accessibilityWhile the grid container has proper ARIA attributes, the individual items could benefit from better accessibility.
<GridItem key={index} role="gridcell" + aria-label={`Grid item ${index + 1}`} + aria-rowindex={Math.floor(index / args.columns) + 1} + aria-colindex={(index % args.columns) + 1} style={{ backgroundColor: args.itemBackground, color: args.itemTextColor,
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
- packages/components/Grid/Grid.stories.tsx (1 hunks)
- packages/components/Grid/Grid.tsx (1 hunks)
- packages/components/Grid/GridItem.tsx (1 hunks)
- packages/components/Grid/package.json (1 hunks)
- packages/components/Grid/src/Grid.stories.tsx (1 hunks)
- packages/components/Grid/src/Grid.tsx (1 hunks)
- packages/components/Grid/src/GridItem.tsx (1 hunks)
- packages/components/Grid/src/index.tsx (1 hunks)
- packages/components/Grid/stories/Grid.stories.tsx (1 hunks)
- packages/storybook/.storybook/main.js (1 hunks)
- packages/storybook/.storybook/preview.tsx (6 hunks)
- packages/storybook/package.json (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/storybook/.storybook/preview.tsx
- packages/storybook/package.json
🔇 Additional comments (13)
packages/components/Grid/GridItem.tsx (1)
1-27: LGTM! The implementation aligns well with the PR objectives.The GridItem component is well-structured and implements all the necessary features for a grid layout system:
- Proper TypeScript support with HTMLDivElement props extension
- Ref forwarding for DOM manipulation
- Grid semantics for accessibility
- Clean and maintainable code structure
This implementation provides a solid foundation for the grid layout system requested in issue #3894.
packages/storybook/.storybook/main.js (1)
3-6: LGTM: Helper function implementation is clean and focusedThe
getAbsolutePathutility function follows best practices for package path resolution in Storybook configurations.packages/components/Grid/src/index.tsx (3)
1-5: Clean and well-organized imports!The imports are minimal and follow standard practices.
6-33: Restructure the file organization and component namingThis file appears to be a demo/example of the Grid component but is currently placed in the main source directory and named ambiguously. This could lead to confusion for library users.
9-21: Verify container implementation detailsThe example demonstrates the
containerprop, but let's verify its implementation matches the PR objectives for centering and containing grid items within specified breakpoints.✅ Verification successful
Based on the search results, I can now generate a final response regarding the container implementation verification:
Container implementation matches PR objectives
The Grid component's container implementation correctly handles the centering and containing functionality:
- Container layout is implemented via a boolean prop with proper default (false)
- When enabled, it applies:
- Max-width constraint (1200px)
- Automatic horizontal centering (margin: 0 auto)
- Responsive behavior is preserved through the columns and gap props
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for container prop implementation in Grid component ast-grep --pattern 'interface GridProps { $$$ container?: $_ $$$ }' # Search for container-related styles rg -l "container.*=.*{" --type tsLength of output: 1746
Script:
#!/bin/bash # Search for Grid component implementation ast-grep --pattern 'const Grid = ({ container, $$ }: GridProps) => { $$$ }' # Search for container-related styles with fixed regex rg "container.*=" --type ts # Search for container-related CSS or styled-components rg "container" --type ts -A 5Length of output: 107586
packages/components/Grid/src/Grid.stories.tsx (1)
1-7: LGTM: Imports are well-organized and complete.The necessary dependencies for Storybook and the Grid components are properly imported.
packages/components/Grid/package.json (5)
1-10: LGTM! Package metadata is properly configured.The package metadata accurately reflects the Grid component's purpose and functionality.
14-21: LGTM! Package configuration follows NextUI standards.The package configuration is properly set up with the correct main entry point, distribution files, and access settings.
22-29: LGTM! Repository information is accurate.The repository configuration correctly points to the grid component directory.
30-38: LGTM! Build and development scripts are properly configured.The scripts section includes all necessary commands for development, building, and package management.
39-60: LGTM! Dependencies are properly configured and minimal.The dependencies are well-structured with:
- Appropriate peer dependency version ranges
- Minimal core dependencies required for grid functionality
- Relevant development dependencies
packages/components/Grid/Grid.tsx (1)
1-65: Verify Storybook integrationThe PR objectives mention Storybook integration, but we need to verify its implementation.
✅ Verification successful
Let me check the content of the Grid stories files to verify the Storybook integration.
Storybook integration is properly implemented
The Grid component has comprehensive Storybook integration with:
- Multiple story files demonstrating various use cases
- Well-documented props using argTypes
- Interactive controls for customization
- Responsive layout examples
- Component and story descriptions
- Multiple variants including Default, CircularItems, FourColumns, ContainerLayout, and ResponsiveGrid
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for Grid component stories echo "Searching for Grid stories..." fd -e stories.tsx -e stories.ts Grid # Check if Grid component is exported in the main stories file echo "Checking main stories export..." rg "export.*Grid" -g "*.stories.*"Length of output: 627
Script:
#!/bin/bash # Check content of Grid stories files echo "Content of Grid.stories.tsx:" cat packages/components/Grid/Grid.stories.tsx echo -e "\nContent of Grid stories in src directory:" cat packages/components/Grid/src/Grid.stories.tsx echo -e "\nContent of Grid stories in stories directory:" cat packages/components/Grid/stories/Grid.stories.tsxLength of output: 8096
packages/components/Grid/src/GridItem.tsx (1)
73-75: LGTM! Component export follows NextUI conventions.The display name is properly set and the export pattern aligns with NextUI's standards.
There was a problem hiding this comment.
Actionable comments posted: 18
🧹 Outside diff range and nitpick comments (5)
packages/components/Grid/stories/Grid.stories.tsx (1)
56-97: Consider adding descriptions for all stories.While the ResponsiveGrid story has a detailed description, other stories (Default, TwoColumns, FourColumns) would benefit from similar documentation explaining their use cases and behavior.
Example addition for TwoColumns:
export const TwoColumns = Template.bind({}); TwoColumns.args = { columns: 2, gap: "1rem", container: false, }; +TwoColumns.parameters = { + docs: { + description: { + story: "Basic two-column layout suitable for content-heavy designs.", + }, + }, +};packages/components/Grid/src/Grid.tsx (1)
53-80: LGTM! Well-structured StyledGrid implementationThe implementation correctly uses NextUI's styling system with proper variants for container, justify, and alignItems. Good use of CSS custom property for maxWidth.
Consider adding a comment explaining the
$$maxWidthCSS custom property usage:const StyledGrid = styled("div", { display: "grid", + // CSS custom property for configurable max-width in container mode $$maxWidth: "1200px",🧰 Tools
🪛 Biome
[error] 54-54: Shouldn't redeclare 'StyledGrid'. Consider to delete it or rename it.
'StyledGrid' is defined here:
(lint/suspicious/noRedeclare)
packages/components/Grid/Grid.tsx (1)
1-108: Add component documentation and examplesWhile the implementation meets the PR objectives, consider adding:
- JSDoc documentation for the component and its props
- Usage examples in comments
- Links to Storybook stories
Add documentation at the component level:
/** * Grid component for creating responsive grid layouts. * * @example * ```tsx * <Grid columns={3} gap="1rem" container> * <div>Item 1</div> * <div>Item 2</div> * </Grid> * ``` * * @see Storybook examples: [Grid Stories](link-to-storybook) */🧰 Tools
🪛 Biome
[error] 6-7: Expected a property, or a signature but instead found '<<'.
Expected a property, or a signature here.
(parse)
[error] 9-9: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 10-10: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 11-11: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 12-12: expected
,but instead found?Remove ?
(parse)
[error] 12-12: expected
,but instead found;Remove ;
(parse)
[error] 13-13: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 14-14: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 15-15: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 15-17: Expected a statement but instead found '=======
columns?: number &'.Expected a statement here.
(parse)
[error] 17-17: Expected a semicolon or an implicit semicolon after a statement, but found none
An explicit or implicit semicolon is expected here...
...Which is required to end this statement
(parse)
[error] 18-18: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 19-19: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 20-20: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 21-21: expected
,but instead found?Remove ?
(parse)
[error] 21-21: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 21-21: expected
,but instead found;Remove ;
(parse)
[error] 22-22: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 22-22: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 23-23: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 23-23: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 24-24: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 24-24: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 24-25: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 25-25: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 25-25: expected
(but instead foundfixesRemove fixes
(parse)
[error] 26-26: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 25-25:
withstatements are not allowed in strict mode(parse)
[error] 26-26: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 27-27: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 28-28: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 29-29: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 29-30: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 43-44: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 69-70: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 99-100: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 100-100: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 100-100: expected
(but instead foundfixesRemove fixes
(parse)
[error] 100-105:
withstatements are not allowed in strict mode(parse)
[error] 72-72: Shouldn't redeclare 'gridStyle'. Consider to delete it or rename it.
'gridStyle' is defined here:
(lint/suspicious/noRedeclare)
[error] 17-17: This block statement doesn't serve any purpose and can be safely removed.
Standalone block statements without any block-level declarations are redundant in JavaScript and can be removed to simplify the code.
(lint/complexity/noUselessLoneBlockStatements)
packages/components/Grid/src/GridItem.tsx (1)
98-115: Consider enhancing accessibility with aria-label support.While the component correctly uses the "gridcell" role, it could benefit from explicit aria-label support for better screen reader experience.
Add aria-label to the props interface and pass it through:
interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> { children: ReactNode; span?: number | Record<SizeType, number>; start?: number | Record<SizeType, number>; end?: number | Record<SizeType, number>; order?: number | Record<SizeType, number>; css?: CSS; + 'aria-label'?: string; }packages/components/Grid/src/Grid.stories.tsx (1)
1-142: Enhance documentation with usage examples.While the stories demonstrate the core features, consider adding JSDoc comments with usage examples for each story, especially for the container and responsive features requested in issue #3894.
Add comprehensive JSDoc comments like this:
/** * Demonstrates responsive grid layout that adapts to different screen sizes. * * @example * ```tsx * <Grid * columns={{ * "@initial": 1, * "@sm": 2, * "@md": 3, * "@lg": 4 * }} * gap="10px" * > * {items.map(item => ( * <GridItem key={item.id}>{item.content}</GridItem> * ))} * </Grid> * ``` */🧰 Tools
🪛 Biome
[error] 1-5: Expected a statement but instead found '<<<<<<< HEAD
// This file defines Storybook stories for the Grid component, showcasing its different configurations and responsiveness.
9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 5-5: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 5-5: expected
(but instead foundfixesRemove fixes
(parse)
[error] 5-6: Illegal use of an import declaration not at the top level
move this declaration to the top level
(parse)
[error] 5-6:
withstatements are not allowed in strict mode(parse)
[error] 15-16: Expected a property, a shorthand property, a getter, a setter, or a method but instead found '<<'.
Expected a property, a shorthand property, a getter, a setter, or a method here.
(parse)
[error] 16-16: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 16-16: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 17-17: Expected an identifier but instead found '{'.
Expected an identifier here.
(parse)
[error] 17-17: expected
...but instead foundcontrolRemove control
(parse)
[error] 17-17: expected
}but instead found:Remove :
(parse)
[error] 17-17: expected
...but instead foundtypeRemove type
(parse)
[error] 17-17: expected
}but instead found:Remove :
(parse)
[error] 17-17: Expected an identifier but instead found '1'.
Expected an identifier here.
(parse)
[error] 17-17: Expected an identifier but instead found '6'.
Expected an identifier here.
(parse)
[error] 17-17: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 17-17: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 18-18: expected
}but instead found:Remove :
(parse)
[error] 18-18: expected
}but instead found:Remove :
(parse)
[error] 18-18: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 18-18: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 25-25: expected
}but instead found:Remove :
(parse)
[error] 25-25: expected
}but instead found:Remove :
(parse)
[error] 25-25: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 27-27: expected
}but instead found:Remove :
(parse)
[error] 27-27: expected
}but instead found:Remove :
(parse)
[error] 27-27: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 27-27: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 28-28: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 33-33: expected
}but instead found:Remove :
(parse)
[error] 35-35: expected
}but instead found:Remove :
(parse)
[error] 35-35: expected
}but instead found:Remove :
(parse)
[error] 35-35: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 35-35: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 36-36: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 41-41: expected
}but instead found:Remove :
(parse)
[error] 43-43: expected
}but instead found:Remove :
(parse)
[error] 43-43: expected
}but instead found:Remove :
(parse)
[error] 43-43: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 43-43: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 44-44: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 44-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 46-46: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 46-47: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 52-52: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 53-54: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 55-55: Expected a JSX attribute but instead found '1'.
Expected a JSX attribute here.
(parse)
[error] 55-55: expected
>but instead found<Remove <
(parse)
[error] 54-55: Expected corresponding JSX closing tag for 'HEAD'.
Opening tag
closing tag
(parse)
[error] 75-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 85-85: expected
}but instead found:Remove :
(parse)
[error] 86-87: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 88-89: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 89-90: Expected a JSX attribute but instead found '======='.
Expected a JSX attribute here.
(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 97-97: expected
}but instead found:Remove :
(parse)
[error] 98-99: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 100-101: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 101-102: Expected a JSX attribute but instead found '======='.
Expected a JSX attribute here.
(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 109-109: expected
}but instead found:Remove :
(parse)
[error] 110-111: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 111-112: Expected a JSX attribute but instead found '======='.
Expected a JSX attribute here.
(parse)
[error] 112-113: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 120-120: expected
}but instead found:Remove :
(parse)
[error] 122-123: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 134-134: expected
}but instead found:Remove :
(parse)
[error] 135-135: expected
}but instead found:Remove :
(parse)
[error] 139-139: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 140-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-142: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 142-142: expected
<but instead the file endsthe file ends here
(parse)
[error] 20-23: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 29-31: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 37-39: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 48-51: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 79-82: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 115-117: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 124-131: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (9)
- packages/components/Grid/Grid.stories.tsx (1 hunks)
- packages/components/Grid/Grid.tsx (1 hunks)
- packages/components/Grid/GridItem.tsx (1 hunks)
- packages/components/Grid/src/Grid.stories.tsx (1 hunks)
- packages/components/Grid/src/Grid.tsx (1 hunks)
- packages/components/Grid/src/GridItem.tsx (1 hunks)
- packages/components/Grid/src/index.tsx (1 hunks)
- packages/components/Grid/stories/Grid.stories.tsx (1 hunks)
- packages/storybook/.storybook/preview.tsx (6 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/storybook/.storybook/preview.tsx
🧰 Additional context used
🪛 Biome
packages/components/Grid/Grid.stories.tsx
[error] 16-17: Expected a property, a shorthand property, a getter, a setter, or a method but instead found '<<'.
Expected a property, a shorthand property, a getter, a setter, or a method here.
(parse)
[error] 17-17: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 17-17: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 18-18: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 19-19: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 21-21: expected
}but instead found:Remove :
(parse)
[error] 22-22: expected
}but instead found:Remove :
(parse)
[error] 25-25: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 26-26: expected
}but instead found:Remove :
(parse)
[error] 26-26: expected
}but instead found:Remove :
(parse)
[error] 26-26: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 26-26: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 27-27: expected
}but instead found:Remove :
(parse)
[error] 27-27: expected
}but instead found:Remove :
(parse)
[error] 27-27: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 27-27: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 29-29: expected
}but instead found:Remove :
(parse)
[error] 29-29: expected
}but instead found:Remove :
(parse)
[error] 29-29: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 32-33: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 33-33: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 33-33: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 33-33: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 33-33: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 33-33: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 33-33: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 34-34: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 35-35: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 38-39: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 40-41: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 42-42: expected
>but instead found<Remove <
(parse)
[error] 42-42: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 43-43: expected
}but instead foundconstRemove const
(parse)
[error] 43-43: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 44-44: expected
}but instead foundswitchRemove switch
(parse)
[error] 45-45: expected
}but instead foundcaseRemove case
(parse)
[error] 46-46: expected
}but instead found:Remove :
(parse)
[error] 46-46: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 48-48: expected
}but instead found:Remove :
(parse)
[error] 48-48: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 50-50: expected
}but instead found:Remove :
(parse)
[error] 50-50: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 51-51: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 52-52: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 101-102: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 104-104: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 123-124: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 124-124: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 124-124: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 124-124: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 124-124: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 124-124: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 124-124: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 129-129: expected
}but instead found:Remove :
(parse)
[error] 138-139: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 141-141: expected
}but instead found:Remove :
(parse)
[error] 142-142: expected
}but instead found:Remove :
(parse)
[error] 143-143: expected
}but instead found:Remove :
(parse)
[error] 144-144: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 145-145: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 145-146: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 153-154: This expression is not valid as a JSX spread expression
(parse)
[error] 154-154: expected
}but instead found:Remove :
(parse)
[error] 155-156: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 158-158: expected
}but instead found:Remove :
(parse)
[error] 159-159: expected
}but instead found:Remove :
(parse)
[error] 160-160: expected
}but instead found:Remove :
(parse)
[error] 161-161: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 162-162: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 162-163: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 165-165: expected
}but instead found:Remove :
(parse)
[error] 166-166: expected
}but instead found:Remove :
(parse)
[error] 167-167: expected
}but instead found:Remove :
(parse)
[error] 168-168: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 169-169: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 169-170: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 175-176: This expression is not valid as a JSX spread expression
(parse)
[error] 176-176: expected
}but instead found:Remove :
(parse)
[error] 178-179: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 181-181: expected
}but instead found:Remove :
(parse)
[error] 182-182: expected
}but instead found:Remove :
(parse)
[error] 183-183: expected
}but instead found:Remove :
(parse)
[error] 184-184: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 185-185: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 185-186: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 191-192: This expression is not valid as a JSX spread expression
(parse)
[error] 192-192: expected
}but instead found:Remove :
(parse)
[error] 192-192: expected
}but instead found:Remove :
(parse)
[error] 192-192: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 192-192: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 205-206: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 208-208: expected
}but instead found:Remove :
(parse)
[error] 209-209: expected
}but instead found:Remove :
(parse)
[error] 210-210: expected
}but instead found:Remove :
(parse)
[error] 211-211: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 212-212: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 212-213: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 218-219: This expression is not valid as a JSX spread expression
(parse)
[error] 219-219: expected
}but instead found:Remove :
(parse)
[error] 219-220: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 222-222: expected
}but instead found:Remove :
(parse)
[error] 223-223: expected
}but instead found:Remove :
(parse)
[error] 224-224: expected
}but instead found:Remove :
(parse)
[error] 225-225: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 226-226: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 226-227: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 229-229: expected
}but instead found:Remove :
(parse)
[error] 230-230: expected
}but instead found:Remove :
(parse)
[error] 231-231: expected
}but instead found:Remove :
(parse)
[error] 232-232: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 233-233: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 233-234: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 239-240: This expression is not valid as a JSX spread expression
(parse)
[error] 240-240: expected
}but instead found:Remove :
(parse)
[error] 240-241: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 243-243: expected
}but instead found:Remove :
(parse)
[error] 244-244: expected
}but instead found:Remove :
(parse)
[error] 245-245: expected
}but instead found:Remove :
(parse)
[error] 247-247: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 248-248: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 248-249: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 254-255: This expression is not valid as a JSX spread expression
(parse)
[error] 255-255: expected
}but instead found:Remove :
(parse)
[error] 256-256: expected
}but instead found:Remove :
(parse)
[error] 260-260: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 260-261: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 263-263: expected
}but instead found:Remove :
(parse)
[error] 264-264: expected
}but instead found:Remove :
(parse)
[error] 265-265: expected
}but instead found:Remove :
(parse)
[error] 266-266: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 267-267: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 267-268: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 268-268: expected
<but instead the file endsthe file ends here
(parse)
[error] 125-126: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 147-148: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 171-172: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 176-176: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 187-188: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 214-215: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 235-236: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 250-251: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
packages/components/Grid/Grid.tsx
[error] 6-7: Expected a property, or a signature but instead found '<<'.
Expected a property, or a signature here.
(parse)
[error] 9-9: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 10-10: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 11-11: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 12-12: expected
,but instead found?Remove ?
(parse)
[error] 12-12: expected
,but instead found;Remove ;
(parse)
[error] 13-13: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 14-14: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 15-15: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 15-17: Expected a statement but instead found '=======
columns?: number &'.Expected a statement here.
(parse)
[error] 17-17: Expected a semicolon or an implicit semicolon after a statement, but found none
An explicit or implicit semicolon is expected here...
...Which is required to end this statement
(parse)
[error] 18-18: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 19-19: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 20-20: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 21-21: expected
,but instead found?Remove ?
(parse)
[error] 21-21: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 21-21: expected
,but instead found;Remove ;
(parse)
[error] 22-22: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 22-22: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 23-23: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 23-23: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 24-24: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 24-24: Expected a function body but instead found '}'.
Expected a function body here.
(parse)
[error] 24-25: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 25-25: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 25-25: expected
(but instead foundfixesRemove fixes
(parse)
[error] 26-26: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 25-25:
withstatements are not allowed in strict mode(parse)
[error] 26-26: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 27-27: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 28-28: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 29-29: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 29-30: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 43-44: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 69-70: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 99-100: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 100-100: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 100-100: expected
(but instead foundfixesRemove fixes
(parse)
[error] 100-105:
withstatements are not allowed in strict mode(parse)
[error] 72-72: Shouldn't redeclare 'gridStyle'. Consider to delete it or rename it.
'gridStyle' is defined here:
(lint/suspicious/noRedeclare)
[error] 17-17: This block statement doesn't serve any purpose and can be safely removed.
Standalone block statements without any block-level declarations are redundant in JavaScript and can be removed to simplify the code.
(lint/complexity/noUselessLoneBlockStatements)
packages/components/Grid/GridItem.tsx
[error] 10-11: Expected an expression for the left hand side of the
<<operator.This operator requires a left hand side value
(parse)
[error] 11-11: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 11-11: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 12-12: Expected a JSX attribute but instead found '('.
Expected a JSX attribute here.
(parse)
[error] 12-12: expected
...but instead foundchildrenRemove children
(parse)
[error] 12-12: Expected an expression but instead found '...'.
Expected an expression here.
(parse)
[error] 12-12: Comma operator isn't a valid value for a JSX spread argument.
(parse)
[error] 12-12: expected
}but instead found...Remove ...
(parse)
[error] 12-12: Expected a JSX attribute but instead found ','.
Expected a JSX attribute here.
(parse)
[error] 12-12: Expected a JSX attribute but instead found ') =>'.
Expected a JSX attribute here.
(parse)
[error] 13-13: expected
...but instead foundreturnRemove return
(parse)
[error] 13-13: Expected a JSX attribute but instead found '('.
Expected a JSX attribute here.
(parse)
[error] 14-14: expected
>but instead found<Remove <
(parse)
[error] 15-17: Expected a JSX attribute but instead found '=======
('.Expected a JSX attribute here.
(parse)
[error] 17-17: expected
...but instead foundchildrenRemove children
(parse)
[error] 17-17: expected
}but instead found:Remove :
(parse)
[error] 17-17: Expected a JSX attribute but instead found ','.
Expected a JSX attribute here.
(parse)
[error] 17-17: expected
{but instead found...Remove ...
(parse)
[error] 17-17: Expected a JSX attribute but instead found ','.
Expected a JSX attribute here.
(parse)
[error] 17-17: Expected a JSX attribute but instead found ') =>'.
Expected a JSX attribute here.
(parse)
[error] 18-18: expected
...but instead foundreturnRemove return
(parse)
[error] 18-18: Expected a JSX attribute but instead found '('.
Expected a JSX attribute here.
(parse)
[error] 19-19: expected
>but instead found<Remove <
(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 26-26: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 30-30: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 35-35: expected
<but instead the file endsthe file ends here
(parse)
[error] 24-24: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 33-33: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
packages/components/Grid/src/Grid.stories.tsx
[error] 1-5: Expected a statement but instead found '<<<<<<< HEAD
// This file defines Storybook stories for the Grid component, showcasing its different configurations and responsiveness.
9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 5-5: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 5-5: expected
(but instead foundfixesRemove fixes
(parse)
[error] 5-6: Illegal use of an import declaration not at the top level
move this declaration to the top level
(parse)
[error] 5-6:
withstatements are not allowed in strict mode(parse)
[error] 15-16: Expected a property, a shorthand property, a getter, a setter, or a method but instead found '<<'.
Expected a property, a shorthand property, a getter, a setter, or a method here.
(parse)
[error] 16-16: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 16-16: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 17-17: Expected an identifier but instead found '{'.
Expected an identifier here.
(parse)
[error] 17-17: expected
...but instead foundcontrolRemove control
(parse)
[error] 17-17: expected
}but instead found:Remove :
(parse)
[error] 17-17: expected
...but instead foundtypeRemove type
(parse)
[error] 17-17: expected
}but instead found:Remove :
(parse)
[error] 17-17: Expected an identifier but instead found '1'.
Expected an identifier here.
(parse)
[error] 17-17: Expected an identifier but instead found '6'.
Expected an identifier here.
(parse)
[error] 17-17: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 17-17: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 18-18: expected
}but instead found:Remove :
(parse)
[error] 18-18: expected
}but instead found:Remove :
(parse)
[error] 18-18: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 18-18: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 25-25: expected
}but instead found:Remove :
(parse)
[error] 25-25: expected
}but instead found:Remove :
(parse)
[error] 25-25: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 27-27: expected
}but instead found:Remove :
(parse)
[error] 27-27: expected
}but instead found:Remove :
(parse)
[error] 27-27: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 27-27: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 28-28: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 33-33: expected
}but instead found:Remove :
(parse)
[error] 35-35: expected
}but instead found:Remove :
(parse)
[error] 35-35: expected
}but instead found:Remove :
(parse)
[error] 35-35: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 35-35: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 36-36: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 41-41: expected
}but instead found:Remove :
(parse)
[error] 43-43: expected
}but instead found:Remove :
(parse)
[error] 43-43: expected
}but instead found:Remove :
(parse)
[error] 43-43: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 43-43: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 44-44: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 44-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 45-45: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 46-46: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 46-47: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 52-52: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 53-54: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 55-55: Expected a JSX attribute but instead found '1'.
Expected a JSX attribute here.
(parse)
[error] 55-55: expected
>but instead found<Remove <
(parse)
[error] 54-55: Expected corresponding JSX closing tag for 'HEAD'.
Opening tag
closing tag
(parse)
[error] 75-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 76-76: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 85-85: expected
}but instead found:Remove :
(parse)
[error] 86-87: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 88-89: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 89-90: Expected a JSX attribute but instead found '======='.
Expected a JSX attribute here.
(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 94-94: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 97-97: expected
}but instead found:Remove :
(parse)
[error] 98-99: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 100-101: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 101-102: Expected a JSX attribute but instead found '======='.
Expected a JSX attribute here.
(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 106-106: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 109-109: expected
}but instead found:Remove :
(parse)
[error] 110-111: Expected a JSX Expression, a Element, or a text but instead found '<<<<<<'.
Expected a JSX Expression, a Element, or a text here.
(parse)
[error] 111-112: Expected a JSX attribute but instead found '======='.
Expected a JSX attribute here.
(parse)
[error] 112-113: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 120-120: expected
}but instead found:Remove :
(parse)
[error] 122-123: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 134-134: expected
}but instead found:Remove :
(parse)
[error] 135-135: expected
}but instead found:Remove :
(parse)
[error] 139-139: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 140-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-141: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 141-142: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 142-142: expected
<but instead the file endsthe file ends here
(parse)
[error] 20-23: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 29-31: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 37-39: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 48-51: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 79-82: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 115-117: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 124-131: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
packages/components/Grid/src/Grid.tsx
[error] 4-5: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 6-7: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 10-11: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 11-11: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 11-11: expected
(but instead foundfixesRemove fixes
(parse)
[error] 15-16: Expected a property, or a signature but instead found '<<'.
Expected a property, or a signature here.
(parse)
[error] 11-15:
withstatements are not allowed in strict mode(parse)
[error] 15-17: Expected a statement but instead found '<<<<<<< HEAD
columns?: number'.Expected a statement here.
(parse)
[error] 18-18: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 19-19: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 19-20: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 39-42: Expected a statement but instead found '=======
// Layout
columns?: number | Record<SizeType, number>'.Expected a statement here.
(parse)
[error] 43-43: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 44-44: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 46-46: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 47-47: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 49-49: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 50-50: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 50-51: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 125-126: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 126-126: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 126-126: expected
(but instead foundfixesRemove fixes
(parse)
[error] 126-128:
withstatements are not allowed in strict mode(parse)
[error] 8-8: Shouldn't redeclare 'styled'. Consider to delete it or rename it.
'styled' is defined here:
(lint/suspicious/noRedeclare)
[error] 54-54: Shouldn't redeclare 'StyledGrid'. Consider to delete it or rename it.
'StyledGrid' is defined here:
(lint/suspicious/noRedeclare)
[error] 82-82: Shouldn't redeclare 'Grid'. Consider to delete it or rename it.
'Grid' is defined here:
(lint/suspicious/noRedeclare)
[error] 99-99: Avoid the use of spread (
...) syntax on accumulators.Spread syntax should be avoided on accumulators (like those in
.reduce) because it causes a time complexity ofO(n^2).
Consider methods such as .splice or .push instead.(lint/performance/noAccumulatingSpread)
packages/components/Grid/src/GridItem.tsx
[error] 1-2: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 4-5: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 10-11: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 11-11: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 11-11: expected
(but instead foundfixesRemove fixes
(parse)
[error] 11-28:
withstatements are not allowed in strict mode(parse)
[error] 33-34: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 36-37: Expected a property, a shorthand property, a getter, a setter, or a method but instead found '==='.
Expected a property, a shorthand property, a getter, a setter, or a method here.
(parse)
[error] 37-37: Expected an expression but instead found '==='.
Expected an expression here.
(parse)
[error] 37-37: Expected an expression but instead found '='.
Expected an expression here.
(parse)
[error] 35-37: Invalid assignment to
{ display: "block", ======This expression cannot be assigned to
(parse)
[error] 37-38: Expected an expression, or an assignment but instead found 'const'.
Expected an expression, or an assignment here.
(parse)
[error] 50-51: Expected a property, a shorthand property, a getter, a setter, or a method but instead found '>'.
Expected a property, a shorthand property, a getter, a setter, or a method here.
(parse)
[error] 51-51: Expected an expression but instead found '>>>'.
Expected an expression here.
(parse)
[error] 51-51: Expected an expression but instead found '>'.
Expected an expression here.
(parse)
[error] 51-51: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 51-51: expected
,but instead found:Remove :
(parse)
[error] 51-52: expected
,but instead found}Remove }
(parse)
[error] 64-65: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 77-78: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 95-96: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 96-96: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 96-96: expected
(but instead foundfixesRemove fixes
(parse)
[error] 96-113:
withstatements are not allowed in strict mode(parse)
[error] 35-37: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
[error] 7-7: Shouldn't redeclare 'CSS'. Consider to delete it or rename it.
'CSS' is defined here:
(lint/suspicious/noRedeclare)
[error] 7-7: Shouldn't redeclare 'SizeType'. Consider to delete it or rename it.
'SizeType' is defined here:
(lint/suspicious/noRedeclare)
[error] 8-8: Shouldn't redeclare 'styled'. Consider to delete it or rename it.
'styled' is defined here:
(lint/suspicious/noRedeclare)
[error] 38-38: Shouldn't redeclare 'StyledGridItem'. Consider to delete it or rename it.
'StyledGridItem' is defined here:
(lint/suspicious/noRedeclare)
[error] 79-79: Shouldn't redeclare 'getResponsiveStyles'. Consider to delete it or rename it.
'getResponsiveStyles' is defined here:
(lint/suspicious/noRedeclare)
packages/components/Grid/src/index.tsx
[error] 35-36: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 37-38: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 39-40: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 40-40: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 40-40: expected
(but instead foundfixesRemove fixes
(parse)
[error] 40-41: Illegal use of an export declaration not at the top level
move this declaration to the top level
(parse)
[error] 40-41:
withstatements are not allowed in strict mode(parse)
🔇 Additional comments (9)
packages/components/Grid/GridItem.tsx (2)
33-35: LGTM! Component metadata and exports are well-definedThe display name is properly set for debugging purposes, and the export is correctly implemented.
🧰 Tools
🪛 Biome
[error] 35-35: expected
<but instead the file endsthe file ends here
(parse)
[error] 33-33: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
1-35: Verify integration with the main Grid componentWhile the GridItem implementation looks good, we should verify its integration with the main Grid component to ensure it supports all the required layout features mentioned in the PR objectives.
✅ Verification successful
GridItem component is properly integrated with Grid system
The verification shows that GridItem is well integrated with the Grid component:
- It's properly imported and used in the main Grid examples and stories
- The implementation supports essential grid features:
- Responsive column spanning via
spanprop- Grid positioning with
startandendprops- Proper ARIA attributes for accessibility
- Styling customization through CSS props
- The component is used extensively in stories demonstrating various grid layouts and configurations
- Both components share consistent "NextUI" namespace in their display names
The changes in the PR, including the addition of aria-label support, enhance the component's accessibility while maintaining its core grid functionality.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for Grid component implementation and its usage of GridItem ast-grep --pattern 'import { GridItem } from $$$' ast-grep --pattern 'const Grid = $$$GridItem$$$'Length of output: 102
Script:
#!/bin/bash # Let's try different approaches to find Grid component and its relationship with GridItem # Find the Grid component file fd "Grid.tsx" # Search for GridItem usage patterns in the codebase rg "GridItem" -A 5 # Look for Grid component implementation ast-grep --pattern 'const Grid = React.forwardRef($$$)' # Search for Grid component test files fd "Grid.test" -e tsx -e tsLength of output: 15073
🧰 Tools
🪛 Biome
[error] 10-11: Expected an expression for the left hand side of the
<<operator.This operator requires a left hand side value
(parse)
[error] 11-11: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 11-11: Expected an expression but instead found '<<'.
Expected an expression here.
(parse)
[error] 12-12: Expected a JSX attribute but instead found '('.
Expected a JSX attribute here.
(parse)
[error] 12-12: expected
...but instead foundchildrenRemove children
(parse)
[error] 12-12: Expected an expression but instead found '...'.
Expected an expression here.
(parse)
[error] 12-12: Comma operator isn't a valid value for a JSX spread argument.
(parse)
[error] 12-12: expected
}but instead found...Remove ...
(parse)
[error] 12-12: Expected a JSX attribute but instead found ','.
Expected a JSX attribute here.
(parse)
[error] 12-12: Expected a JSX attribute but instead found ') =>'.
Expected a JSX attribute here.
(parse)
[error] 13-13: expected
...but instead foundreturnRemove return
(parse)
[error] 13-13: Expected a JSX attribute but instead found '('.
Expected a JSX attribute here.
(parse)
[error] 14-14: expected
>but instead found<Remove <
(parse)
[error] 15-17: Expected a JSX attribute but instead found '=======
('.Expected a JSX attribute here.
(parse)
[error] 17-17: expected
...but instead foundchildrenRemove children
(parse)
[error] 17-17: expected
}but instead found:Remove :
(parse)
[error] 17-17: Expected a JSX attribute but instead found ','.
Expected a JSX attribute here.
(parse)
[error] 17-17: expected
{but instead found...Remove ...
(parse)
[error] 17-17: Expected a JSX attribute but instead found ','.
Expected a JSX attribute here.
(parse)
[error] 17-17: Expected a JSX attribute but instead found ') =>'.
Expected a JSX attribute here.
(parse)
[error] 18-18: expected
...but instead foundreturnRemove return
(parse)
[error] 18-18: Expected a JSX attribute but instead found '('.
Expected a JSX attribute here.
(parse)
[error] 19-19: expected
>but instead found<Remove <
(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 22-22: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 26-26: Unexpected token. Did you mean
{'>'}or>?(parse)
[error] 30-30: Unexpected token. Did you mean
{'}'}or}?(parse)
[error] 35-35: expected
<but instead the file endsthe file ends here
(parse)
[error] 24-24: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 33-33: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
packages/components/Grid/src/index.tsx (2)
1-5: LGTM! Clean and well-organized imports.
1-42: Verify component usage across the codebase.Let's ensure proper component usage and no unintended dependencies.
✅ Verification successful
GridExample is safely contained and Grid usage is appropriate
Based on the verification results:
- GridExample is only used within the Grid component's source file as an example and is not used in any production code
- Grid component is properly imported and used across the codebase
- The
containerprop is correctly implemented in Grid usage patterns- Grid component is primarily used in stories and documentation, showing proper component usage
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify Grid component usage and dependencies # Check for any direct usage of GridExample outside of stories/examples echo "Checking for GridExample usage outside stories..." rg "GridExample" --type tsx --type ts | grep -v "stories\|examples" # Verify Grid container prop usage echo "Checking Grid container prop usage patterns..." ast-grep --pattern 'Grid container' -lLength of output: 454
Script:
#!/bin/bash # Let's improve our search with correct file extensions and ast-grep syntax # Check for GridExample usage echo "Checking for GridExample usage..." rg "GridExample" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts' # Check Grid container prop usage with correct ast-grep pattern echo "Checking Grid container prop usage..." ast-grep --pattern '<Grid container' --lang tsxLength of output: 872
Script:
#!/bin/bash # Let's try a different approach to check Grid usage patterns # Search for Grid imports and usage echo "Checking Grid component usage patterns..." rg "import.*Grid" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts' # Search for actual Grid usage in TSX files echo "Checking Grid JSX usage..." rg "<Grid" --type-add 'tsx:*.tsx' -A 2 # Check if GridExample is used in any test or story files echo "Checking GridExample in test/story files..." rg "GridExample" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts' -g '*{test,spec,stories}*'Length of output: 7344
🧰 Tools
🪛 Biome
[error] 35-36: Expected a statement but instead found '<<<<<<< HEAD'.
Expected a statement here.
(parse)
[error] 37-38: Expected a statement but instead found '======='.
Expected a statement here.
(parse)
[error] 39-40: Expected a statement but instead found '>>>>>>> 9207c6d06 (feat: grid component updates'.
Expected a statement here.
(parse)
[error] 40-40: numbers cannot be followed by identifiers directly after
an identifier cannot appear here
(parse)
[error] 40-40: expected
(but instead foundfixesRemove fixes
(parse)
[error] 40-41: Illegal use of an export declaration not at the top level
move this declaration to the top level
(parse)
[error] 40-41:
withstatements are not allowed in strict mode(parse)
packages/components/Grid/stories/Grid.stories.tsx (2)
11-28: LGTM! Improved control configurations.The implementation has addressed previous feedback by:
- Increasing the columns limit to 12
- Using a select control with predefined gap values
- Adding clear descriptions for all props
39-54: LGTM! Well-structured template with visual distinctions.The template effectively demonstrates grid capabilities with:
- Theme-based colors for visual distinction
- Column spanning
- Varying content sizes
packages/components/Grid/src/Grid.tsx (2)
13-51: LGTM! Enhanced GridProps interface aligns with requirementsThe new interface properly implements:
- Responsive columns with NextUI's SizeType
- Flexible gap sizing with BreakpointValue
- Container layout option
- Comprehensive alignment controls
- NextUI theme integration
🧰 Tools
🪛 Biome
[error] 15-16: Expected a property, or a signature but instead found '<<'.
Expected a property, or a signature here.
(parse)
[error] 15-17: Expected a statement but instead found '<<<<<<< HEAD
columns?: number'.Expected a statement here.
(parse)
[error] 18-18: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 19-19: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 19-20: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
[error] 39-42: Expected a statement but instead found '=======
// Layout
columns?: number | Record<SizeType, number>'.Expected a statement here.
(parse)
[error] 43-43: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 44-44: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 46-46: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 47-47: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 49-49: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 50-50: Expected an expression, or an assignment but instead found ':'.
Expected an expression, or an assignment here.
(parse)
[error] 50-51: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
128-129: LGTM! Proper component export setupGood practice setting the displayName for debugging purposes.
packages/components/Grid/src/GridItem.tsx (1)
13-28: LGTM! Well-structured interface with comprehensive documentation.The
GridItemPropsinterface is well-defined with proper TypeScript types and JSDoc comments. It correctly extends HTML div element props and includes all necessary grid customization options.🧰 Tools
🪛 Biome
[error] 11-28:
withstatements are not allowed in strict mode(parse)
feat(Grid): Implement GRID component with container option and Storybook configuration
Closes #3894
📝 Description
This PR introduces a new GRID component with an enhanced container layout option in the NextUI library, along with a Storybook integration to visualize and test grid configurations. The GRID component enables a flexible, customizable grid layout system ideal for building responsive UIs.
⛳️ Current behavior (updates)
The current NextUI library does not have a dedicated GRID component with a container layout feature, nor a Storybook entry to demonstrate grid behavior and options.
🚀 New behavior
With this update:
GRID Component: Adds a grid layout with configurable columns, gap, and container options.
Container Option: Adds the ability to toggle a container layout to center and contain grid items within specified breakpoints.
Storybook: Includes a new Storybook story to showcase and test grid layout variations, shapes, borders, and colors.
💣 Is this a breaking change (Yes/No): No
📝 Additional Information
Additional test cases and examples have been added to ensure the component is flexible and integrates smoothly with existing NextUI themes and layouts.
Summary by CodeRabbit
New Features
GridandGridItemcomponents for creating responsive grid layouts.Gridcomponent.GridExamplecomponent demonstrating various grid configurations.Bug Fixes
Chores