* feat(textarea): add Textarea component with variants and Storybook examples
* feat(textarea): enhance Textarea component with context, improved variants, and Storybook examples
* Fine-tuning the style
* fix ci
* feat(textarea): refactor Textarea stories to use custom label and caption components
* feat(textarea): add TextareaContext for managing textarea state
* fix: format
* feat(textarea): refactor TextareaInput to simplify props and remove autoSize handling
* feat(textarea): remove TextareaContext and update stories to reflect new error handling
* refactor(textarea): remove TextareaRoot component
After removing TextareaContext, TextareaRoot became a simple wrapper div
with no functionality beyond applying layout styles. This change:
- Removes TextareaRoot component and its exports
- Updates all Storybook stories to use plain divs with the same styling
- Simplifies the component API while maintaining the same functionality
Addresses reviewer feedback: https://github.com/CherryHQ/cherry-studio/pull/11260#discussion_r2580009134🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* chore: format
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
- Updated DialogContent styling to use a rounded border and improved shadow effects for better visual appeal.
- Introduced a new Storybook file for the Dialog component, featuring multiple stories that demonstrate various use cases, including default, alert, form, and customizable dialogs.
- Enhanced accessibility and usability by providing examples for different dialog configurations and actions.
- Replace local imports of Input and Switch components with imports from the @cherrystudio/ui package for consistency.
- Minor adjustment to the Switch story to include a button type for the toggle state functionality.
* feat(input): add new input component and update eslint config
Add new custom input component to replace antd and heroui inputs
Update eslint config to enforce using the new input component
* feat(input): refactor input component to support compound pattern
Add new Input component with support for Password and Button variants through compound pattern. Move input implementation to new directory structure and enhance with label and caption support. Remove old input implementation.
* refactor(input): consolidate input components and update exports
Move input component files to lowercase directory and simplify structure
Remove unused button and password input components
Update exports in components index file
* refactor: replace antd Input with @cherrystudio/ui Input across components
* feat(primitives): add textarea component to ui primitives
* feat(primitives): add input-group component with variants and controls
build: update @radix-ui/react-slot dependency to v1.2.4
* refactor(ui): simplify input component and update usage
Remove complex Input component implementation and replace with simpler version
Update components to use new Input and Textarea components from ui package
* feat(ui): add composite input component and utility functions
- Introduce new CompositeInput component with variants and password toggle
- Add utility functions for null/undefined conversion
- Export new components and types from index
- Update input props interface and usage in input-group
* feat(Input): refactor CompositeInput component and add stories
- Refactor CompositeInput component with improved variants and styling
- Add comprehensive Storybook stories for Input, InputGroup and CompositeInput components
- Implement password toggle functionality and button variants
- Include accessibility features and interactive examples
* feat(input): improve disabled state styling and behavior
- Add disabled state variants for input components
- Ensure password toggle button respects disabled state
- Update disabled styling for better visual consistency
- Add storybook examples for disabled password inputs
* feat(input): add validation states and form examples
- Implement validation states for input components
- Add real-time validation examples
- Create form validation demos for different input types
- Update styling for disabled and invalid states
* feat(input): add prefix support for email variant input
Add prefix variants styling and prefix prop to CompositeInput component to support email inputs with fixed prefixes. Update stories to demonstrate various prefix use cases and interactive examples.
* refactor(Input): simplify content rendering logic by removing useMemo hooks
The startContent and endContent memoized values were removed and their logic was inlined directly in the JSX. This makes the code more straightforward and removes unnecessary memoization overhead since the calculations are simple.
* feat(Input): add select variant to CompositeInput component
Add new 'select' variant to CompositeInput component with support for select dropdown groups and items. Includes styling variants, type exports, and comprehensive storybook examples demonstrating various use cases like currency input, URL with protocol, phone with country code, and temperature with unit selectors.
* Revert "refactor: replace antd Input with @cherrystudio/ui Input across components"
This reverts commit f7f689b326.
* fix(CompositeInput): handle missing props gracefully by returning null
Add null checks for email and select variants to prevent rendering issues when required props are missing
* fix(Input): adjust select prefix and trigger styling
Update select prefix variants to remove redundant padding and simplify size variants. Add new selectTriggerVariants for consistent styling across sizes.
* feat(storybook): add playground story for InputGroup component
Add interactive playground story with controls for all InputGroup props including addons, button variants and input types
* style(primitives): remove redundant border radius from input group variants
* style(input): adjust button and label variant styling
Refactor variant classes to use string literals instead of arrays for better readability
* refactor(Input): simplify variant class strings in input component
---------
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
Co-authored-by: fullex <106392080+0xfullex@users.noreply.github.com>
* refactor(ui): migrate switch component from heroui to radix-ui
replace heroui switch implementation with radix-ui for better maintainability
update package.json and yarn.lock to include new dependency
* fix(eslint): enable heroui import restriction for deprecated Switch component
* refactor(ui): update Switch component props from isSelected/onValueChange to checked/onCheckedChange
Standardize Switch component props across the codebase to use checked/onCheckedChange instead of isSelected/onValueChange for better consistency with common React patterns. Also updates loading state prop from isLoading to loading and removes size prop where unnecessary.
The changes include:
- Replacing isSelected with checked
- Replacing onValueChange with onCheckedChange
- Updating isLoading to loading
- Removing redundant size props
- Adjusting styling to accommodate new loading state
* refactor(switch): improve switch component styling and structure
- Add default values for loading and disabled props
- Update styling classes and add group cursor pointer
- Restructure loading indicator and thumb positioning
- Wrap DescriptionSwitch children in flex container
* refactor(ui): improve switch component structure and usage
- Restructure DescriptionSwitch to use explicit props instead of children
- Add label, description, and position props for better customization
- Update all switch usages in SettingsTab to use new props format
* refactor(primitives): simplify switch props by omitting children
Remove redundant children prop from CustomSwitchProps since it's already omitted from the parent type
* fix(switch): add useId for label accessibility in DescriptionSwitch
Ensure proper label association with switch input by generating unique ID using React's useId hook
* refactor(settings): remove commented out SettingRowTitleSmall components
* refactor(SettingsTab): add todo comment for memoization optimization
* feat(switch): add size prop to customize switch dimensions
Add sm, md, and lg size options to the Switch component with corresponding styles. This allows for better visual consistency across different UI contexts.
* style(ui): adjust switch component styling and theme colors
update switch component layout and spacing to improve consistency
modify secondary-foreground color variable to use correct semantic token
* feat(switch): add new switch component styles and animations
- Add new switch.css file with gradient and transition styles
- Update switch.tsx component with new styling classes and animations
- Remove loader icon in favor of animated gradient effect
* fix(i18n): Auto update translations for PR #11061
* style(primitives): remove redundant border style from switch component
* refactor(switch): remove switch.css and update switch component styles
Remove deprecated switch.css file and migrate styles to inline tailwind classes. Update disabled state styling to use opacity instead of linear gradient for better consistency.
* refactor(switch): simplify switch thumb implementation
Replace complex div structure with svg for loading state
Adjust disabled opacity and loading state styling
* style(switch): adjust thumb size and positioning for better consistency
* feat(switch): add storybook documentation for switch component
Add comprehensive Storybook documentation for the Switch component, including:
- Basic usage examples
- Different states (checked, disabled, loading)
- Size variations
- DescriptionSwitch variant
- Real-world usage scenarios
- Accessibility examples
- Form integration examples
Also remove redundant box-content class from switch styles
* fix(switch): adjust thumb positioning for md and lg sizes
* style(primitives): improve switch component styling and spacing
- Add padding to the container
- Simplify label height logic
- Update typography classes for better consistency
- Adjust switch container alignment
* feat(switch): add size prop to DescriptionSwitch component
Add support for sm, md, and lg sizes to DescriptionSwitch component with responsive text sizing. Also includes comprehensive Storybook documentation with examples of all sizes and states.
* style(switch): align label text to right when isLeftSide is true
* refactor(stories): clean up DescriptionSwitch stories by removing unused imports and simplifying JSX
* refactor(ui): rename CustomizedSwitch to Switch for consistency
Simplify component naming by removing redundant 'Customized' prefix and aligning with common naming conventions
* refactor(switch): extract switch root styles into cva variants
Improve maintainability by using class-variance-authority to manage switch root styles and variants
* refactor(switch): extract thumb variants into separate cva function
Improve maintainability by moving switch thumb styling logic into a dedicated variants configuration. This makes the component more readable and easier to modify.
* feat(switch): add classNames prop for custom styling
Allow custom class names to be applied to switch root, thumb, and thumbSvg elements for more flexible styling options.
* feat(switch): add loading animation variants for switch thumb
Extract loading animation logic into separate cva variants for better maintainability and reusability
---------
Co-authored-by: GitHub Action <action@github.com>
- Introduced a new Tabs component along with TabsList, TabsTrigger, and TabsContent for improved content organization.
- Updated package.json and yarn.lock to include @radix-ui/react-tabs dependency.
- Enhanced index.ts to export the new Tabs components for easier access in the UI library.
- Created stories for the Tabs component in Storybook to demonstrate various usage scenarios.
- Added a new Breadcrumb.stories.tsx file to showcase the Breadcrumb component and its variations.
- Refactored existing stories for Button, Checkbox, Combobox, Kbd, Pagination, RadioGroup, Select, and Spinner components to import directly from @cherrystudio/ui instead of relative paths.
- Enhanced the organization and accessibility of component stories in the Storybook environment.
- Updated the @radix-ui/react-slot dependency in package.json and yarn.lock to version 1.2.4.
- Introduced a new Pagination component with associated subcomponents (PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis).
- Added stories for the Pagination component to demonstrate various use cases and configurations.
- Removed the InTooltip story from Kbd.stories.tsx to declutter the examples.
- Kept the Tooltip-related imports commented out for potential future use.
- Introduced a new Kbd component to display keyboard shortcuts, supporting both single keys and key combinations.
- Added KbdGroup for grouping multiple Kbd components together.
- Updated package.json to include @radix-ui/react-tooltip version 1.2.8.
- Created stories for Kbd component showcasing various use cases, including integration with Tooltip for enhanced user guidance.
- Exported CheckedState type from the checkbox component for better type management.
- Added checkbox and combobox components to the main component index for easier access.
- Updated Storybook examples to utilize the CheckedState type for controlled checkbox states.
- Introduced a new checkbox component utilizing Radix UI, allowing for customizable sizes and states.
- Implemented styles using class-variance-authority for consistent design across different sizes (sm, md, lg).
- Added comprehensive Storybook stories demonstrating various use cases, including default, checked, disabled, and controlled states.
- Updated package.json and yarn.lock to include the new Radix UI checkbox dependency.
- Introduced size variants for RadioGroupItem using class-variance-authority for better customization.
- Updated RadioGroupItem to accept size prop and adjusted styles accordingly.
- Added comprehensive Storybook stories for various use cases, including default, disabled, and size variations, to demonstrate component functionality and usage.
- Updated SettingsTab to utilize the new Select component instead of the deprecated Selector.
- Enhanced Select integration with SelectTrigger, SelectContent, SelectItem, and SelectValue for improved functionality.
- Removed Selector imports and related code to streamline the component structure.
- Adjusted styles and layout for better user experience in the settings interface.
- Added a new Select component based on Radix UI, including SelectTrigger, SelectContent, SelectItem, and SelectValue.
- Implemented support for groups and separators within the Select component.
- Updated package.json to include @radix-ui/react-select as a dependency.
- Removed deprecated Selector and SearchableSelector components to streamline the codebase.
- Added stories for the Select component to showcase various use cases and configurations.
- Introduced a new Combobox component that supports single and multiple selections, search functionality, and customizable rendering of options.
- Implemented variants for different states (default, error, disabled) and sizes (small, default, large).
- Added a demo and Storybook stories to showcase various use cases and states of the Combobox.
- Refactored import statements in CodeEditor, ThinkingEffect, ErrorBoundary, and Spinner story files for consistency and clarity.
- Changed button event handlers from `onPress` to `onClick` to align with standard React practices.
- Improved type imports for better organization and maintainability.
- Deleted the todocss.css file as it was no longer needed.
- Updated Storybook main.ts to include path aliasing for better module resolution.
- Removed deprecated stories and components, streamlining the codebase.
- Added new stories for CodeEditor, Ellipsis, ExpandableText, and other components to enhance documentation and showcase functionality.
