feat(for-ui): v2を作成

[Qs-F]

User description

チケット

実装内容

スクリーンショット

変更前	変更後

相談内容(あれば)

---

PR Type

Enhancement, Tests, Configuration changes, Documentation

---

Description

• Implemented various new components with customizable props and features, including Table, Button, Drawer, TextField, Select, TextArea, Snackbar, MenuItem, RadioGroup, CheckboxGroup, SwitchGroup, Stepper, Popper, Modal, Dropzone, Badge, Tooltip, Tabs, and more.
• Added extensive storybook stories for components to demonstrate usage and states.
• Included unit tests for multiple components to ensure proper functionality and coverage.
• Added configuration files for Vite, Vitest, and Storybook to support project building and testing.
• Updated TypeScript definitions and documentation for component props, refs, and utility functions.

---

Changes walkthrough 📝

	Relevant files
Tests	34 files Button.stories.tsx Add storybook stories for Button component                              packages/for-ui-legacy/src/button/Button.stories.tsx Added storybook stories for the Button component. Included different button variants: Filled, Outlined, Text, and Loading. Demonstrated button states: default, disabled, and loading. +558/-1  button.stories.tsx Add storybook stories for Button component                              packages/for-ui/src/button/button.stories.tsx Added storybook stories for the Button component. Included different button variants: Filled, Outlined, Text, and Loading. Demonstrated button states: default, disabled, and loading. +557/-0  Snackbar.test.tsx Add tests for Snackbar component                                                  packages/for-ui-legacy/src/snackbar/Snackbar.test.tsx Added tests for Snackbar component. Covered scenarios with close button and auto-hiding configuration. Included tests for SnackbarProvider context. +276/-1  Select.stories.tsx Add storybook stories for Select component                              packages/for-ui-legacy/src/select/Select.stories.tsx Added storybook stories for the Select component. Included single and multiple selection modes. Demonstrated disabled state and clearable options. +387/-1  Table.stories.tsx Add storybook stories for Table component                                packages/for-ui-legacy/src/table/Table.stories.tsx Added storybook stories for the Table component. Demonstrated various table configurations: with selection, sorting, and pagination. Included loading state and custom row click handling. +269/-1  Switch.stories.tsx Add storybook stories for Switch component                              packages/for-ui-legacy/src/switch/Switch.stories.tsx Added storybook stories for the Switch component. Included basic usage, integration with React Hook Form, and custom labels. Demonstrated usage within SwitchGroup. +149/-1  Skeleton.stories.tsx Add storybook stories for Skeleton component                          packages/for-ui-legacy/src/skeleton/Skeleton.stories.tsx Added new storybook stories for the Skeleton component. Included various examples demonstrating Skeleton usage with text, images, avatars, counts, and nested elements. +234/-1  Chip.stories.tsx Add storybook stories for Chip component                                  packages/for-ui-legacy/src/chip/Chip.stories.tsx Added new storybook stories for the Chip component. Included various examples demonstrating Chip usage with different intentions and icons. +152/-1  TextField.test.tsx Add unit tests for TextField component                                      packages/for-ui-legacy/src/textField/TextField.test.tsx Added unit tests for the TextField component. Covered various scenarios including rendering, typing, error handling, and controlled/uncontrolled states. +136/-1  Tabs.stories.tsx Add storybook stories for Tabs component                                  packages/for-ui-legacy/src/tabs/Tabs.stories.tsx Added new storybook stories for the Tabs component. Included examples demonstrating primary and secondary tabs, as well as tab lists. +153/-1  Radio.stories.tsx Add storybook stories for Radio component                                packages/for-ui-legacy/src/radio/Radio.stories.tsx Added new storybook stories for the Radio component. Included examples demonstrating basic usage, labels, no padding, and integration with forms. +154/-1  Checkbox.test.tsx Add unit tests for Checkbox component                                        packages/for-ui-legacy/src/checkbox/Checkbox.test.tsx Added unit tests for the Checkbox component. Covered various scenarios including rendering, state changes, and integration with forms. +124/-1  TextField.stories.tsx Add storybook stories for TextField component                        packages/for-ui-legacy/src/textField/TextField.stories.tsx Added new storybook stories for the TextField component. Included examples demonstrating basic usage, icons, and form integration. +165/-1  TextArea.test.tsx Add unit tests for TextArea component                                        packages/for-ui-legacy/src/textArea/TextArea.test.tsx Added unit tests for the TextArea component. Covered various scenarios including rendering, typing, error handling, and controlled/uncontrolled states. +108/-1  Badge.stories.tsx Add storybook stories for Badge component                                packages/for-ui-legacy/src/badge/Badge.stories.tsx Added new storybook stories for the Badge component. Included examples demonstrating different variants and intentions with icons. +87/-1    Checkbox.stories.tsx Add storybook stories for Checkbox component                          packages/for-ui-legacy/src/checkbox/Checkbox.stories.tsx Added new storybook stories for the Checkbox component. Included examples demonstrating basic usage, no padding, and integration with forms. +131/-1  TablePagination.test.tsx Add unit tests for TablePagination component                          packages/for-ui-legacy/src/table/TablePagination.test.tsx Added unit tests for the TablePagination component. Covered various scenarios including rendering and event handling for pagination controls. +86/-1    Button.test.tsx Add unit tests for Button component                                            packages/for-ui-legacy/src/button/Button.test.tsx Added unit tests for the Button component. Covered various scenarios including rendering, clicking, and different states. +96/-1    button.test.tsx Add unit tests for Button component                                            packages/for-ui/src/button/button.test.tsx Added unit tests for the Button component. Covered various scenarios including rendering, clicking, and different states. +95/-0    TextArea.stories.tsx Add storybook stories for TextArea component                          packages/for-ui-legacy/src/textArea/TextArea.stories.tsx Added new storybook stories for the TextArea component. Included examples demonstrating basic usage, error handling, and form integration. +121/-1  Menu.stories.tsx Add storybook stories for Menu component                                  packages/for-ui-legacy/src/menu/Menu.stories.tsx Added storybook stories for Menu component. Included examples for base menu, menu with icons, and menu with menu list. +95/-1    Stepper.stories.tsx Add storybook stories for Stepper component                            packages/for-ui-legacy/src/stepper/Stepper.stories.tsx Added storybook stories for Stepper component. Included examples for different label positions. +75/-1    Snackbar.stories.tsx Add storybook stories for Snackbar component                          packages/for-ui-legacy/src/snackbar/Snackbar.stories.tsx Added storybook stories for Snackbar component. Included examples for stateless, stateful, and context-based snackbars. +83/-1    Drawer.stories.tsx Add storybook stories for Drawer component                              packages/for-ui-legacy/src/drawer/Drawer.stories.tsx Added storybook stories for Drawer component. Included examples for different anchor positions and fixed width. +97/-1    Callout.stories.tsx Add storybook stories for Callout component                            packages/for-ui-legacy/src/callout/Callout.stories.tsx Added storybook stories for Callout component. Included examples for different intentions and icon usage. +60/-1    Popper.stories.tsx Add storybook stories for Popper component                              packages/for-ui-legacy/src/popper/Popper.stories.tsx Added storybook stories for Popper component. Included examples for base popper and custom close actions. +65/-1    Modal.stories.tsx Add storybook stories for Modal component                                packages/for-ui-legacy/src/modal/Modal.stories.tsx Added storybook stories for Modal component. Included examples for default modal usage. +50/-1    Dropzone.stories.tsx Add storybook stories for Dropzone component                          packages/for-ui-legacy/src/dropzone/Dropzone.stories.tsx Added storybook stories for Dropzone component. Included examples for basic usage and file handling. +46/-1    Tooltip.test.tsx Add tests for Tooltip component                                                    packages/for-ui-legacy/src/tooltip/Tooltip.test.tsx Added tests for Tooltip component. Included tests for rendering, accessibility, and focus behavior. +39/-1    MenuItem.stories.tsx Add storybook stories for MenuItem component                          packages/for-ui-legacy/src/menu/MenuItem.stories.tsx Added storybook stories for MenuItem component. Included examples for different icons and descriptions. +40/-1    rhf.tsx Add utility for testing React Hook Form components              packages/for-ui-legacy/src/testing/rhf.tsx Added utility for testing React Hook Form components. Included support for form submission and component registration. +32/-0    Tooltip.stories.tsx Add storybook stories for Tooltip component                            packages/for-ui-legacy/src/tooltip/Tooltip.stories.tsx Added storybook stories for Tooltip component. Included examples for different tooltip frames and icons. +32/-1    Callout.test.tsx Add tests for Callout component                                                    packages/for-ui-legacy/src/callout/Callout.test.tsx Added tests for Callout component. Included tests for rendering and different intentions. +14/-1    Tab.stories.tsx Add storybook stories for Tab component                                    packages/for-ui-legacy/src/tabs/Tab.stories.tsx Added storybook stories for Tab component. Included examples for labels and badges. +18/-1
Enhancement	50 files Table.tsx Implement Table component with features                                    packages/for-ui-legacy/src/table/Table.tsx Implemented Table component with various features. Added support for selectable rows, pagination, and sorting. Included loading state and skeleton loading rows. +419/-1  Button.tsx Implement Button component with various props                        packages/for-ui-legacy/src/button/Button.tsx Implemented Button component with various props. Added support for different variants, sizes, and loading state. Included legacy support for deprecated props. +278/-1  TablePagination.tsx Implement TablePagination component                                            packages/for-ui-legacy/src/table/TablePagination.tsx Implemented TablePagination component. Added support for pagination controls and custom event handlers. Included integration with Table component. +266/-1  Drawer.tsx Implement Drawer component with customizable props              packages/for-ui-legacy/src/drawer/Drawer.tsx Implemented Drawer component with customizable props. Added support for resizing, navigation content, and trigger component. Included default width and anchor position options. +247/-1  TextField.tsx Implement new customizable TextField component                      packages/for-ui-legacy/src/textField/TextField.tsx Implemented a new TextField component with various props for customization. Added support for price formatting, prefixes, suffixes, icons, labels, and helper texts. Included custom styling and accessibility features. +228/-1  Select.tsx Add new Select component with autocomplete                              packages/for-ui-legacy/src/select/Select.tsx Added a new Select component with autocomplete functionality. Included support for multiple selections, free solo input, and custom rendering of options and tags. Integrated various customization options and accessibility features. +226/-1  TextArea.tsx Implement new customizable TextArea component                        packages/for-ui-legacy/src/textArea/TextArea.tsx Implemented a new TextArea component with customizable props. Added support for error handling, helper texts, labels, and size adjustments. Included custom styling and accessibility features. +175/-1  Snackbar.tsx Implement new customizable Snackbar component                        packages/for-ui-legacy/src/snackbar/Snackbar.tsx Implemented a new Snackbar component with customizable props. Added support for auto-hide, custom messages, and trigger components. Included custom styling and accessibility features. +166/-1  MenuItem.tsx Implement new customizable MenuItem component                        packages/for-ui-legacy/src/menu/MenuItem.tsx Implemented a new MenuItem component with customizable props. Added support for icons, descriptions, and different intentions. Included custom styling and accessibility features. +102/-1  LimitedChip.tsx Implement new customizable LimitedChip component                  packages/for-ui-legacy/src/chip/LimitedChip.tsx Implemented a new LimitedChip component with customizable props. Added support for different intentions and click handling. Included custom styling and accessibility features. +73/-1    TableCell.tsx Implement new customizable TableCell component                      packages/for-ui-legacy/src/table/TableCell.tsx Implemented a new TableCell component with customizable props. Added support for sortable headers and different cell types. Included custom styling and accessibility features. +90/-1    Skeleton.tsx Implement new customizable Skeleton component                        packages/for-ui-legacy/src/skeleton/Skeleton.tsx Implemented a new Skeleton component with customizable props. Added support for loading states, text sizes, and recursive children handling. Included custom styling and accessibility features. +96/-1    FullChip.tsx Implement new customizable FullChip component                        packages/for-ui-legacy/src/chip/FullChip.tsx Implemented a new FullChip component with customizable props. Added support for different intentions and icons. Included custom styling and accessibility features. +72/-1    Callout.tsx Implement Callout component with intentions and icons        packages/for-ui-legacy/src/callout/Callout.tsx Implemented Callout component with various intentions. Added support for icons and custom children. +65/-1    RadioGroup.tsx Implement RadioGroup component with labels and errors        packages/for-ui-legacy/src/radio/RadioGroup.tsx Implemented RadioGroup component with support for labels, errors, and helper text. Added support for custom children and styling. +76/-1    text.tsx Implement Text component with customizable styles                packages/for-ui/src/text/text.tsx Implemented Text component with customizable size, weight, and typeface. Added support for custom HTML elements and class names. +83/-0    Text.tsx Implement Text component with customizable styles                packages/for-ui-legacy/src/text/Text.tsx Implemented Text component with customizable size, weight, and typeface. Added support for custom HTML elements and class names. +82/-1    Checkbox.tsx Implement Checkbox component with custom indicators            packages/for-ui-legacy/src/checkbox/Checkbox.tsx Implemented Checkbox component with custom indicators. Added support for labels and disabled state. +61/-1    Chip.tsx Implement Chip component with customizable intention          packages/for-ui-legacy/src/chip/Chip.tsx Implemented Chip component with customizable intention and clickable area. Added support for icons and click handlers. +58/-1    CheckboxGroup.tsx Implement CheckboxGroup component with labels and errors  packages/for-ui-legacy/src/checkbox/CheckboxGroup.tsx Implemented CheckboxGroup component with support for labels, errors, and helper text. Added support for custom children and styling. +58/-1    SwitchGroup.tsx Implement SwitchGroup component with labels and errors      packages/for-ui-legacy/src/switch/SwitchGroup.tsx Implemented SwitchGroup component with support for labels, errors, and helper text. Added support for custom children and styling. +58/-1    Step.tsx Implement Step component with custom icons and labels        packages/for-ui-legacy/src/stepper/Step.tsx Implemented Step component with custom icons and labels. Added support for active and completed states. +48/-1    Radio.tsx Implement Radio component with custom indicators                  packages/for-ui-legacy/src/radio/Radio.tsx Implemented Radio component with custom indicators. Added support for labels and disabled state. +51/-1    Dropzone.tsx Implement Dropzone component with file upload support        packages/for-ui-legacy/src/dropzone/Dropzone.tsx Implemented Dropzone component with support for file uploads. Added support for custom messages and multiple file handling. +53/-1    OutlinedBadge.tsx Implement OutlinedBadge component with customizable intention packages/for-ui-legacy/src/badge/OutlinedBadge.tsx Implemented OutlinedBadge component with customizable intention and icon. Added support for labels and custom styling. +46/-1    SnackbarContext.tsx Implement SnackbarContext for managing snackbar state        packages/for-ui-legacy/src/snackbar/SnackbarContext.tsx Implemented SnackbarContext for managing snackbar state. Added support for enqueueing snackbars and context provider. +63/-1    Popper.tsx Implement Popper component with customizable trigger          packages/for-ui-legacy/src/popper/Popper.tsx Implemented Popper component with customizable trigger and children. Added support for material-ui popup state integration. +53/-1    Modal.tsx Implement Modal component with backdrop and handlers          packages/for-ui-legacy/src/modal/Modal.tsx Implemented Modal component with backdrop and customizable children. Added support for open and close handlers. +56/-1    Badge.tsx Implement Badge component with different variants                packages/for-ui-legacy/src/badge/Badge.tsx Implemented Badge component with support for different variants. Added support for icons and custom intentions. +62/-1    Stepper.tsx Implement Stepper component with customizable label positions packages/for-ui-legacy/src/stepper/Stepper.tsx Implemented Stepper component with customizable label positions. Added support for active steps and connectors. +45/-1    TextBadge.tsx Implement TextBadge component with customizable intention packages/for-ui-legacy/src/badge/TextBadge.tsx Implemented TextBadge component with customizable intention and icon. Added support for labels and custom styling. +46/-1    ConstantBadge.tsx Implement ConstantBadge component with customizable intention packages/for-ui-legacy/src/badge/ConstantBadge.tsx Implemented ConstantBadge component with customizable intention and icon. Added support for labels and custom styling. +50/-1    Tooltip.tsx Implement Tooltip component with customizable title            packages/for-ui-legacy/src/tooltip/Tooltip.tsx Implemented Tooltip component with customizable title and children. Added support for custom tooltip frames. +55/-1    Menu.tsx Implement Menu component with customizable trigger              packages/for-ui-legacy/src/menu/Menu.tsx Implemented Menu component with customizable trigger and children. Added support for material-ui popup state integration. +62/-1    Switch.tsx Implement Switch component with custom styles                        packages/for-ui-legacy/src/switch/Switch.tsx Implemented Switch component with custom styles and labels. Added support for disabled state. +34/-1    TextDefaultStyler.tsx Implement TextDefaultStyler component for default text styling packages/for-ui-legacy/src/system/TextDefaultStyler.tsx Implemented TextDefaultStyler component for default text styling. Added support for custom renderers and content. +29/-1    text_default_styler.tsx Implement TextDefaultStyler component for default text styling packages/for-ui/src/system/text_default_styler.tsx Implemented TextDefaultStyler component for default text styling. Added support for custom renderers and content. +28/-0    MenuList.tsx Implement MenuList component with customizable element type packages/for-ui-legacy/src/menu/MenuList.tsx Implemented MenuList component with customizable element type. Added support for custom class names and refs. +32/-1    Tab.tsx Implement Tab component with customizable badges                  packages/for-ui-legacy/src/tabs/Tab.tsx Implemented Tab component with customizable badges and styles. Added support for disabled state. +24/-1    PropsCascader.tsx Implement PropsCascader component for cascading props        packages/for-ui-legacy/src/system/PropsCascader.tsx Implemented PropsCascader component for cascading props to children. Added support for custom HTML attributes and refs. +22/-1    props_cascader.tsx Implement PropsCascader component for cascading props        packages/for-ui/src/system/props_cascader.tsx Implemented PropsCascader component for cascading props to children. Added support for custom HTML attributes and refs. +21/-0    Loading.tsx Implement Loading SVG component                                                    packages/for-ui-legacy/src/loader/Loading.tsx Implemented Loading SVG component. Added support for custom SVG properties. +8/-1      loading.tsx Implement Loading SVG component                                                    packages/for-ui/src/loader/loading.tsx Implemented Loading SVG component. Added support for custom SVG properties. +7/-0      MenuDivider.tsx Implement MenuDivider component with custom styles              packages/for-ui-legacy/src/menu/MenuDivider.tsx Implemented MenuDivider component with custom styles. Added support for class names and refs. +17/-1    TabList.tsx Implement TabList component with customizable intention    packages/for-ui-legacy/src/tabs/TabList.tsx Implemented TabList component with customizable intention and styles. Added support for no border and reverse options. +15/-1    style.ts Add styles for TabList and Tabs components                              packages/for-ui-legacy/src/tabs/style.ts Added styles for TabList and Tabs components. Included support for primary and secondary intentions. +11/-1    walkChildren.ts Implement walkChildren utility for visiting React nodes    packages/for-ui-legacy/src/system/walkChildren.ts Implemented walkChildren utility for recursively visiting React nodes. Added support for custom visitor functions. +16/-0    fsx.ts Update fsx utility to extend tailwind merge                            packages/for-ui/src/system/fsx.ts Updated fsx utility to extend tailwind merge with custom class groups. Included support for font size classes. +8/-6      Tabs.tsx Implement Tabs component with customizable intention          packages/for-ui-legacy/src/tabs/Tabs.tsx Implemented Tabs component with customizable intention and styles. Added support for primary and secondary intentions. +13/-1    prepareForSlot.tsx Implement prepareForSlot utility for slot components          packages/for-ui-legacy/src/utils/prepareForSlot.tsx Implemented prepareForSlot utility for creating slot components. Added support for custom props and refs. +14/-0
Miscellaneous	2 files makeData.ts Add static data for Person type                                                    packages/for-ui-legacy/src/utils/makeData.ts Added static data for Person type. Included sample person data for use in table stories and tests. +338/-0  index.tsx Add exports for Stepper and Step components                            packages/for-ui-legacy/src/stepper/index.tsx Added exports for Stepper and Step components. +3/-1
Configuration changes	6 files react-table-config.d.ts Add TypeScript definitions for react-table configuration  packages/for-ui-legacy/types/react-table-config.d.ts Added TypeScript definitions for react-table configuration. Included various hooks and props for table customization. +122/-1  vite.config.ts Add Vite configuration for project build                                  packages/for-ui-legacy/vite.config.ts Added Vite configuration for building the project. Included support for external packages and different build formats. +39/-0    preview.tsx Add Storybook preview configuration with custom theme        packages/for-ui-legacy/.storybook/preview.tsx Added Storybook preview configuration. Included custom theme and layout settings. +57/-0    preview.tsx Update Storybook preview configuration                                      packages/for-ui/.storybook/preview.tsx Updated Storybook preview configuration. Removed custom theme and layout settings. +3/-28    main.ts Add main configuration for Storybook                                          packages/for-ui/.storybook/main.ts Added main configuration for Storybook. Included support for addons and framework settings. +30/-0    vitest.config.ts Add Vitest configuration for testing                                          packages/for-ui-legacy/vitest.config.ts Added Vitest configuration for testing. Included support for React and jsdom environment. +17/-0
Documentation	4 files componentType.ts Add type definitions for component props and refs                packages/for-ui-legacy/src/system/componentType.ts Added type definitions for component props and refs. Included support for custom element types and preserved omit. +25/-1    component_type.ts Add type definitions for component props and refs                packages/for-ui/src/system/component_type.ts Added type definitions for component props and refs. Included support for custom element types and preserved omit. +24/-0    index.ts Export all components and utilities from legacy package    packages/for-ui-legacy/src/index.ts Exported all components and utilities from the legacy package. Included support for badges, buttons, callouts, and more. +22/-0    index.ts Update exports to include button, loader, and text              packages/for-ui/src/index.ts Updated exports to include button, loader, and text components. Removed exports for other components. +3/-22

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[cloudflare-workers-and-pages]

Deploying for-ui with    Cloudflare Pages

Latest commit:	8bcfdaa
Status:	🚫  Build failed.

View logs

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8bcfdaa

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

This PR includes no changesets

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

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

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

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[qodo-code-review]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

CI Failure Feedback 🧐

Action: build-nextjs

Failed stage: Run npm install --no-save turbo-linux-64 [❌]

Failure summary: The action failed due to the following reasons: The Node.js version used (v16.20.2) does not meet the required version constraints for several packages: - [email protected] requires Node.js ^18.17.0 || >=20.5.0 and npm >= 9. - @4design/[email protected] requires Node.js ^20.11.1 and npm ^10.9.0. An error occurred during the installation of the esbuild package: - The install.js script expected version 0.24.0 but found version 0.21.5, causing a version mismatch error.

Relevant error logs: 1: ##[group]Operating System 2: Ubuntu ... 513: npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' } 514: npm WARN EBADENGINE } 515: npm WARN EBADENGINE Unsupported engine { 516: npm WARN EBADENGINE package: '[email protected]', 517: npm WARN EBADENGINE required: { node: '^18.17.0 || >=20.5.0', npm: '>= 9' }, 518: npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' } 519: npm WARN EBADENGINE } 520: npm WARN EBADENGINE Unsupported engine { 521: npm WARN EBADENGINE package: '[email protected]', ... 645: npm WARN EBADENGINE Unsupported engine { 646: npm WARN EBADENGINE package: '@4design/[email protected]', 647: npm WARN EBADENGINE required: { node: '^20.11.1', npm: '^10.9.0' }, 648: npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' } 649: npm WARN EBADENGINE } 650: npm WARN deprecated [email protected]: Rimraf versions prior to v4 are no longer supported 651: npm ERR! code 1 652: npm ERR! path /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild 653: npm ERR! command failed 654: npm ERR! command sh -c -- node install.js 655: npm ERR! /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134 656: npm ERR! throw new Error(`Expected ${JSON.stringify(versionFromPackageJSON)} but got ${JSON.stringify(stdout)}`); 657: npm ERR! ^ 658: npm ERR! 659: npm ERR! Error: Expected "0.24.0" but got "0.21.5" 660: npm ERR! at validateBinaryVersion (/home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134:11) 661: npm ERR! at /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:284:5 662: npm ERR! A complete log of this run can be found in: 663: npm ERR! /home/runner/.npm/_logs/2024-11-06T16_55_09_608Z-debug-0.log 664: ##[error]Process completed with exit code 1.

---

✨ CI feedback usage guide:

---

The CI feedback tool (/checks) automatically triggers when a PR has a failed check.
The tool analyzes the failed checks and provides several feedbacks:

• Failed stage
• Failed test name
• Failure summary
• Relevant error logs

In addition to being automatically triggered, the tool can also be invoked manually by commenting on a PR:

/checks "https://github.com/{repo_name}/actions/runs/{run_number}/job/{job_number}"

where {repo_name} is the name of the repository, {run_number} is the run number of the failed check, and {job_number} is the job number of the failed check.

Configuration options

• enable_auto_checks_feedback - if set to true, the tool will automatically provide feedback when a check is failed. Default is true.
• excluded_checks_list - a list of checks to exclude from the feedback, for example: ["check1", "check2"]. Default is an empty list.
• enable_help_text - if set to true, the tool will provide a help message with the feedback. Default is true.
• persistent_comment - if set to true, the tool will overwrite a previous checks comment with the new feedback. Default is true.
• final_update_message - if persistent_comment is true and updating a previous checks message, the tool will also create a new message: "Persistent checks updated to latest commit". Default is true.

See more information about the checks tool in the docs.

[qodo-code-review]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

CI Failure Feedback 🧐

Action: build-vite

Failed stage: Run npm install --no-save turbo-linux-64 [❌]

Failure summary: The action failed due to the following reasons: The Node.js and npm versions installed do not meet the required versions specified by some packages: - [email protected] requires Node.js ^18.17.0 || >=20.5.0 and npm >= 9, but the current versions are Node.js v16.20.2 and npm 8.19.4. - @4design/[email protected] requires Node.js ^20.11.1 and npm ^10.9.0, but the current versions are Node.js v16.20.2 and npm 8.19.4. An error occurred during the installation of esbuild via the install.js script: - The script expected version "0.24.0" but found version "0.21.5", causing the installation to fail.

Relevant error logs: 1: ##[group]Operating System 2: Ubuntu ... 513: npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' } 514: npm WARN EBADENGINE } 515: npm WARN EBADENGINE Unsupported engine { 516: npm WARN EBADENGINE package: '[email protected]', 517: npm WARN EBADENGINE required: { node: '^18.17.0 || >=20.5.0', npm: '>= 9' }, 518: npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' } 519: npm WARN EBADENGINE } 520: npm WARN EBADENGINE Unsupported engine { 521: npm WARN EBADENGINE package: '[email protected]', ... 645: npm WARN EBADENGINE Unsupported engine { 646: npm WARN EBADENGINE package: '@4design/[email protected]', 647: npm WARN EBADENGINE required: { node: '^20.11.1', npm: '^10.9.0' }, 648: npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' } 649: npm WARN EBADENGINE } 650: npm WARN deprecated [email protected]: Rimraf versions prior to v4 are no longer supported 651: npm ERR! code 1 652: npm ERR! path /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild 653: npm ERR! command failed 654: npm ERR! command sh -c -- node install.js 655: npm ERR! /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134 656: npm ERR! throw new Error(`Expected ${JSON.stringify(versionFromPackageJSON)} but got ${JSON.stringify(stdout)}`); 657: npm ERR! ^ 658: npm ERR! 659: npm ERR! Error: Expected "0.24.0" but got "0.21.5" 660: npm ERR! at validateBinaryVersion (/home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134:11) 661: npm ERR! at /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:284:5 662: npm ERR! A complete log of this run can be found in: 663: npm ERR! /home/runner/.npm/_logs/2024-11-06T16_55_09_574Z-debug-0.log 664: ##[error]Process completed with exit code 1.

---

✨ CI feedback usage guide:

---

The CI feedback tool (/checks) automatically triggers when a PR has a failed check.
The tool analyzes the failed checks and provides several feedbacks:

• Failed stage
• Failed test name
• Failure summary
• Relevant error logs

In addition to being automatically triggered, the tool can also be invoked manually by commenting on a PR:

/checks "https://github.com/{repo_name}/actions/runs/{run_number}/job/{job_number}"

where {repo_name} is the name of the repository, {run_number} is the run number of the failed check, and {job_number} is the job number of the failed check.

Configuration options

• enable_auto_checks_feedback - if set to true, the tool will automatically provide feedback when a check is failed. Default is true.
• excluded_checks_list - a list of checks to exclude from the feedback, for example: ["check1", "check2"]. Default is an empty list.
• enable_help_text - if set to true, the tool will provide a help message with the feedback. Default is true.
• persistent_comment - if set to true, the tool will overwrite a previous checks comment with the new feedback. Default is true.
• final_update_message - if persistent_comment is true and updating a previous checks message, the tool will also create a new message: "Persistent checks updated to latest commit". Default is true.

See more information about the checks tool in the docs.

[qodo-code-review]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Performance Concern The Button component has complex conditional rendering logic and multiple style variations. This could potentially impact performance, especially if used extensively throughout the application. Consider optimizing the component or using memoization techniques. Code Complexity The Table component is quite complex with numerous props and conditional logic. This complexity might make it difficult to maintain and extend in the future. Consider breaking it down into smaller, more manageable sub-components. Potential Bug In the MultipleFreeSolo story, the same options are being used for both select components. If these options are meant to be different, this could lead to unexpected behavior.

[qodo-code-review]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Best practice	Provide a default value for the aria-label prop to ensure accessibility Consider adding a default value for the aria-label prop in the Pagination component to ensure accessibility even if the prop is not explicitly provided. packages/for-ui-legacy/src/table/TablePagination.tsx [151-165] export const Pagination: FC<PaginationProps> = ({ defaultPage, total, page, onChangePage, onClickFirstPageButton, onClickLastPageButton, onClickNextPageButton, onClickPreviousPageButton, disabled = false, className, + 'aria-label': ariaLabel = 'ページ送り', ...props }) => { Suggestion importance[1-10]: 8 Why: Adding a default value for the aria-label prop enhances accessibility, which is crucial for users relying on screen readers. This change ensures that even if developers forget to provide a custom label, a sensible default is always present.	8
	Use descriptive names for exports to improve code clarity and avoid potential conflicts Consider using a more descriptive name for the '_Text' export to improve clarity and avoid potential naming conflicts. packages/for-ui/src/button/button.stories.tsx [371] -export const _Text = (): JSX.Element => ( +export const TextButtonVariant = (): JSX.Element => ( Apply this suggestion Suggestion importance[1-10]: 6 Why: Renaming '_Text' to 'TextButtonVariant' improves code clarity and reduces the risk of naming conflicts. It's a valuable improvement for code maintainability.	6
	Use semantic HTML elements to improve accessibility and convey the structure of the content more accurately Consider using a more semantic HTML structure for the button variants showcase, such as using instead of for better accessibility and semantic meaning. packages/for-ui/src/button/button.stories.tsx [31-199] export const Filled = (): JSX.Element => ( - <dl className="flex flex-col gap-8"> - <Text as="dt" size="l" weight="bold"> + <section className="flex flex-col gap-8"> + <Text as="h2" size="l" weight="bold"> Button/Filled/Large </Text> - <dd className="flex flex-row gap-8"> + <div className="flex flex-row gap-8"> ... - </dd> - </dl> + </div> + </section> ); Suggestion importance[1-10]: 6 Why: Using more semantic HTML elements like instead of improves accessibility and better conveys the content structure. It's an important improvement for web standards compliance.	6
	Use a named constant for magic numbers to improve code readability and maintainability Consider using a constant for the timeout duration in the Loading story to improve maintainability. packages/for-ui/src/button/button.stories.tsx [549] -setTimeout(() => setLoading(false), 1000); +const LOADING_TIMEOUT = 1000; +setTimeout(() => setLoading(false), LOADING_TIMEOUT); Apply this suggestion Suggestion importance[1-10]: 5 Why: Using a named constant for the timeout duration improves code readability and maintainability. It's a good practice, but not critical for functionality.	5
Enhancement	Remove deprecated prop and update component to use the new prop for improved consistency The color prop is marked as deprecated, but it's still being used in the component. Consider removing the deprecated prop and updating the component to use only the intention prop for consistency. packages/for-ui-legacy/src/button/Button.tsx [164-172] -const intention = color - ? ( - { - primary: 'primary', - secondary: 'secondary', - default: 'primary', - } as const - )[color] - : passedIntention; +const intention = passedIntention; +// Remove the color prop and update all usages to use the intention prop instead Apply this suggestion Suggestion importance[1-10]: 8 Why: Removing the deprecated 'color' prop and updating the component to use only the 'intention' prop improves consistency and reduces potential confusion. This change has a significant impact on code quality and future maintenance.	8
	Extract reusable logic into custom hooks to improve code organization and reusability Consider using a custom hook for the loading state logic in the Loading story to improve reusability and separation of concerns. packages/for-ui/src/button/button.stories.tsx [541-557] +const useLoadingState = (duration: number) => { + const [loading, setLoading] = useState(false); + const handleClick = useCallback(() => { + setLoading(true); + setTimeout(() => setLoading(false), duration); + }, [duration]); + return { loading, handleClick }; +}; + export const Loading = (args: ButtonProps) => { - const [loading, setLoading] = useState(false); - + const { loading, handleClick } = useLoadingState(1000); return ( - <Button - loading={loading} - onClick={() => { - setLoading(true); - setTimeout(() => setLoading(false), 1000); - }} - {...args} - > + <Button loading={loading} onClick={handleClick} {...args}> <MdSync /> データを更新 </Button> ); }; Apply this suggestion Suggestion importance[1-10]: 7 Why: Creating a custom hook for loading state logic enhances code reusability and organization. It's a significant improvement in code structure and maintainability.	7
	Enhance the sample data with more diverse and realistic entries to improve testing and demonstration scenarios Consider using a more diverse set of sample data for the StaticPersonData array. The current data has many repeated entries, which may not provide a realistic representation for testing or demonstration purposes. packages/for-ui-legacy/src/utils/makeData.ts [13-338] export const StaticPersonData: Person[] = [ { id: 1, - firstName: 'population', - lastName: 'wdpw7', - age: 1, - visits: 13, - status: '', - image: '/image.png', + firstName: 'John', + lastName: 'Doe', + age: 30, + visits: 15, + status: 'active', + image: '/john.png', }, - ... + { + id: 2, + firstName: 'Jane', + lastName: 'Smith', + age: 28, + visits: 20, + status: 'inactive', + image: '/jane.png', + }, + // Add more diverse entries... ]; Suggestion importance[1-10]: 7 Why: The suggestion provides more diverse and realistic sample data, which would improve the quality of testing and demonstrations. This change could lead to better edge case detection and more representative UI examples.	7
	Use a more specific type for the data prop to improve type safety and clarity Consider using a more specific type for the data prop instead of TableOptions['data']. This could improve type safety and make the component's API clearer. packages/for-ui-legacy/src/table/Table.tsx [81] -data: TableOptions<T>['data']; +data: T[]; Apply this suggestion Suggestion importance[1-10]: 6 Why: Using a more specific type (T[]) instead of TableOptions['data'] improves type safety and makes the API clearer. This change has moderate impact on code quality and maintainability.	6
	Simplify and clarify type definition by using a union type instead of an intersection type Consider using a union type instead of an intersection type for the ButtonProps to make the type definition more precise and easier to understand. packages/for-ui-legacy/src/button/Button.tsx [13-105] -export type ButtonProps<As extends ElementType = 'button'> = ComponentPropsWithAs< - Omit<MuiButtonProps<As>, 'href' | 'children' | 'onClick'> & { - // ... other props - }, - As ->; +export type ButtonProps<As extends ElementType = 'button'> = ComponentPropsWithAs<As> & { + // ... other props +} & Omit<MuiButtonProps<As>, 'href' | 'children' | 'onClick'>; Apply this suggestion Suggestion importance[1-10]: 5 Why: Using a union type instead of an intersection type can make the ButtonProps type definition more precise and easier to understand. This change moderately improves code readability and maintainability.	5
	Improve prop naming for clarity by changing 'total' to 'totalPages' in the Pagination component Consider using a more descriptive name for the total prop in the Pagination component, such as totalPages, to clearly indicate that it represents the total number of pages rather than the total number of items. packages/for-ui-legacy/src/table/TablePagination.tsx [85-89] type PaginationProps = { /** * 全てのページ数を指定 */ - total: number; + totalPages: number; // ... other props }; +// Update usage in the component +export const Pagination: FC<PaginationProps> = ({ + defaultPage, + totalPages, + page, + // ... other props +}) => { + const { items } = usePagination({ + page, + defaultPage, + count: totalPages, + // ... other options + }); + // ... rest of the component +}; + Apply this suggestion Suggestion importance[1-10]: 5 Why: Renaming the 'total' prop to 'totalPages' improves code clarity and reduces potential misunderstandings. While helpful, it's a minor enhancement that doesn't significantly impact functionality or fix a critical issue.	5
Possible issue	Remove unused prop or implement its functionality to improve code cleanliness The onRowClick function is defined but not used in the Table component. Consider removing it if it's not needed, or implement its functionality if it's intended to be used. packages/for-ui-legacy/src/table/Table.tsx [41] -onRowClick?: (e: MouseEvent<HTMLTableRowElement>, row: RowType<T>) => void; +// Remove the onRowClick prop if not used, or implement its functionality in the Table component Apply this suggestion Suggestion importance[1-10]: 7 Why: The onRowClick prop is defined but not used in the component. Removing unused code or implementing missing functionality improves code cleanliness and prevents potential confusion.	7
Maintainability	Extract the usePagination hook into a separate file for better code organization and reusability In the WithTablePage story, consider extracting the usePagination hook into a separate file for better code organization and reusability across components. packages/for-ui-legacy/src/table/Table.stories.tsx [106-132] -export const WithTablePage: Story = () => { - const usePagination = (limit = 10) => { - const [page, setPage] = useState(1); +// In a new file, e.g., 'src/hooks/usePagination.ts' +export const usePagination = (limit = 10) => { + const [page, setPage] = useState(1); - const offset = (page - 1) * limit; - const next = () => setPage(page + 1); - const prev = () => setPage(page - 1); - const onChange = (p: number) => { - if (p === page) return; - - setPage(p); - }; - - return { - page, - limit, - offset, - actions: { - next, - prev, - onChange, - }, - }; + const offset = (page - 1) * limit; + const next = () => setPage(page + 1); + const prev = () => setPage(page - 1); + const onChange = (p: number) => { + if (p === page) return; + setPage(p); }; + return { + page, + limit, + offset, + actions: { + next, + prev, + onChange, + }, + }; +}; + +// In Table.stories.tsx +import { usePagination } from '../hooks/usePagination'; + +export const WithTablePage: Story = () => { + const { page, limit, offset, actions } = usePagination(); + // ... rest of the story implementation +}; + Apply this suggestion Suggestion importance[1-10]: 6 Why: Extracting the usePagination hook improves code organization and promotes reusability. While beneficial for maintainability, it's a moderate improvement as it doesn't directly affect functionality or fix a critical issue.	6

💡 Need additional feedback ? start a PR chat