- Added `@storybook/react` version 10.1.11 to the UI package's dependencies.
- Updated `pnpm-lock.yaml` to include the new `@storybook/react` package and ensure consistency across environments.
This commit enhances the UI component library by integrating Storybook for improved development and documentation.
- Removed outdated dependencies `js-yaml`, `bonjour-service`, and `emoji-picker-element-data` from `devDependencies`.
- Added `@radix-ui/primitive` and `@radix-ui/react-use-callback-ref` to `dependencies` in the UI package.
- Updated `pnpm-lock.yaml` to reflect changes in package versions and ensure consistency across environments.
- Cleaned up unnecessary resolutions in the UI package's `package.json`.
This commit enhances dependency management and ensures the project is aligned with the latest package versions.
- Add `closeButton` prop to BaseToastProps interface
- Update dismissable prop description for clarity
- Add close button styling to classNames
- Pass closeButton prop to external toast configuration
- Update Storybook stories to include closeButton control
- Rename "Dismissable Control" story to "Close Button Control"
- Add dismissable control to playground
- Add custom toast example with JSX rendering
- Add dismissable control showcase
- Add custom class names example
- Update component description for clarity
- Import CheckIcon for custom toast example
- Replace `ToastType` with discriminated union `ToastProps`
- Add `BaseToastProps` for shared properties
- Introduce `CustomToastProps` with JSX render function
- Update quick API methods to accept message as first parameter
- Add `toast.custom()` method for custom toast rendering
- Export all individual toast type interfaces
- Changed utility imports from '@cherrystudio/ui/utils' to '@cherrystudio/ui/lib/utils' across multiple components for better organization.
- Introduced a new internal utility module for class name merging, ensuring consistent usage across the UI components.
- Updated relevant components to reflect the new import paths, enhancing maintainability and clarity.
- Introduced a new Badge component with multiple visual style variants: default, secondary, destructive, and outline.
- Added comprehensive Storybook stories to demonstrate the Badge component's usage, including examples with icons and as links.
- Updated the component index to export the new Badge component.
- Simplify toast API to match sonner's interface
- Add support for colored backgrounds and custom durations
- Improve icon rendering with unique IDs to prevent conflicts
- Remove unused code and consolidate styles
- Update stories to reflect new API changes
Update toast component to use the standard sonner package instead of the cherrystudio fork. This simplifies dependencies and ensures better maintainability with the upstream package.
- Add custom toast component with support for info, success, warning, error, and loading states
- Implement action buttons, links, colored messages, and dismissable toasts
- Add TypeScript type definitions and Storybook documentation
- Export toast API for programmatic usage
- Add sonner package for toast notifications with custom icons and styling
- Add next-themes package for theme support
- Create new Toaster component with theme-aware styling
- Adjusted tsconfig.web.json to maintain formatting consistency.
- Enhanced tsconfig.json in the ui package by adding strict compiler options for better code quality.
- Modified the generate-icons script to remove an unused parameter, streamlining the function call.
- Introduced multiple new SVG icons including AddCategory, AiChat, Aicon27, AiEssentialsIconSet, AiPrompt, Brain, BrainCircuit, BrainCog, CodeAi, Emoji, Group, MessageAi1, MessageBalloonAi1, and Vector.
- Updated the icons index file to include the new icons for easier access.
- Enhanced the icons component structure for better maintainability.
* 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>
- Introduced a new ConfirmDialog component for confirmation scenarios, integrating Dialog and Button primitives.
- Added props for customizable titles, descriptions, and button texts, including support for loading states and destructive actions.
- Created Storybook stories demonstrating various use cases, including default, destructive, and custom content scenarios.
- Changed button border radius from rounded-md to rounded-xs for a sleeker look.
- Adjusted padding to py-2 px-4 to reduce button size and enhance usability.
- Updated hover effect to use shadow-xs for a more subtle interaction feedback.
- Simplified size variants by removing unnecessary padding adjustments.
- 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.
- Added comments in theme.css and theme.css files to explain the changes in spacing variable definitions.
- Temporarily commented out the `--spacing-5xs` variable due to significant differences with container spacing in Tailwind CSS v4.
- Ensured clarity on the priority of CSS variable resolution in Tailwind CSS.
- 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>
- Deleted the DmxapiToImg SVG file and its corresponding React component to streamline the icon library.
- Updated index.ts and Logos.stories.tsx to remove references to DmxapiToImg, ensuring consistency across the codebase.
- 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.
- Introduced a new Breadcrumb component along with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, and BreadcrumbEllipsis.
- Updated index.ts to export the new Breadcrumb components for easier access in the UI library.
- Added 'migration_completed' stage to the migration process for better tracking of completion.
- Updated relevant components and hooks to handle the new stage, including UI changes to confirm migration completion.
- Adjusted messages and progress indicators to reflect the new stage in the migration workflow.
- Exported the new Pagination component from the index file to make it available for use.
- Updated the PaginationLink styles to improve hover effects and active state visibility, enhancing user experience.
- 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.
