feat(for-ui): v2を作成 #1591

Qs-F · 2024-11-06T16:54:48Z

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 · 2024-11-06T16:54:49Z

Deploying for-ui with Cloudflare Pages

Latest commit:	`8bcfdaa`
Status:	🚫 Build failed.

View logs

changeset-bot · 2024-11-06T16:54:52Z

⚠️ 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 · 2024-11-06T16:54:56Z

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

🪧 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-merge-pro · 2024-11-06T16:56:13Z

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-merge-pro · 2024-11-06T16:56:29Z

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-merge-pro · 2024-11-06T17:17:28Z

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-merge-pro · 2024-11-06T17:18:15Z

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

Qs-F added 5 commits November 6, 2024 23:46

feat: publish for-ui-legacy

0766df4

fix: LICENSE

022adad

fix: eslint-config package

eaf2f66

fix: update lock file

93259c5

WIP

8bcfdaa

Qs-F marked this pull request as draft November 6, 2024 16:54

Qs-F changed the title ~~feat(for-ui): v2を作成~~ feat(for-ui): For UI v2を実装 Nov 6, 2024

qodo-merge-pro bot changed the title ~~feat(for-ui): For UI v2を実装~~ feat(for-ui): v2を作成 Nov 6, 2024

qodo-merge-pro bot added the Review effort [1-5]: 4 label Nov 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(for-ui): v2を作成 #1591

feat(for-ui): v2を作成 #1591

Qs-F commented Nov 6, 2024 •

edited by qodo-merge-pro bot

Loading

cloudflare-workers-and-pages bot commented Nov 6, 2024 •

edited

Loading

changeset-bot bot commented Nov 6, 2024

coderabbitai bot commented Nov 6, 2024

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

qodo-merge-pro bot commented Nov 6, 2024

Configuration options

qodo-merge-pro bot commented Nov 6, 2024

Configuration options

qodo-merge-pro bot commented Nov 6, 2024

qodo-merge-pro bot commented Nov 6, 2024

feat(for-ui): v2を作成 #1591

Are you sure you want to change the base?

feat(for-ui): v2を作成 #1591

Conversation

Qs-F commented Nov 6, 2024 • edited by qodo-merge-pro bot Loading

User description

チケット

実装内容

スクリーンショット

相談内容(あれば)

PR Type

Description

Changes walkthrough 📝

cloudflare-workers-and-pages bot commented Nov 6, 2024 • edited Loading

Deploying for-ui with Cloudflare Pages

changeset-bot bot commented Nov 6, 2024

⚠️ No Changeset found

coderabbitai bot commented Nov 6, 2024

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

qodo-merge-pro bot commented Nov 6, 2024

CI Failure Feedback 🧐

Configuration options

qodo-merge-pro bot commented Nov 6, 2024

CI Failure Feedback 🧐

Configuration options

qodo-merge-pro bot commented Nov 6, 2024

PR Reviewer Guide 🔍

qodo-merge-pro bot commented Nov 6, 2024

PR Code Suggestions ✨

Qs-F commented Nov 6, 2024 •

edited by qodo-merge-pro bot

Loading

cloudflare-workers-and-pages bot commented Nov 6, 2024 •

edited

Loading