Commit Graph

16 Commits

Author SHA1 Message Date
Phantom
4a38fd6ebc
feat(ui): new Switch (#11061)
* 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>
2025-12-01 17:04:43 +08:00
MyPrototypeWhat
9a356cb27d style(tabs.stories):lint 2025-11-21 17:26:14 +08:00
MyPrototypeWhat
53883a27be feat: add Tabs component and related subcomponents
- 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.
2025-11-21 17:09:29 +08:00
MyPrototypeWhat
1e4239d189 feat: update UI component stories to use centralized imports from @cherrystudio/ui
- 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.
2025-11-21 13:34:02 +08:00
MyPrototypeWhat
02a65daa27 feat: update @radix-ui/react-slot to version 1.2.4 and add Pagination component with stories
- 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.
2025-11-20 14:49:22 +08:00
MyPrototypeWhat
838bb385fd refactor: comment out Tooltip integration in Kbd stories for cleanup
- Removed the InTooltip story from Kbd.stories.tsx to declutter the examples.
- Kept the Tooltip-related imports commented out for potential future use.
2025-11-18 17:59:36 +08:00
MyPrototypeWhat
583e4e9db7 feat: add Kbd component for keyboard shortcuts and integrate with Tooltip
- 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.
2025-11-18 16:50:10 +08:00
MyPrototypeWhat
aa13ad4fac feat(checkbox): export CheckedState type and add checkbox/combobox to component index
- 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.
2025-11-12 15:04:50 +08:00
MyPrototypeWhat
02d79f47b3 feat(checkbox): add Radix UI checkbox component with Storybook examples
- 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.
2025-11-12 14:58:14 +08:00
MyPrototypeWhat
75c0923636 feat(radioGroup): enhance RadioGroup component with size variants and add Storybook examples
- 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.
2025-11-12 14:26:25 +08:00
MyPrototypeWhat
30947c6bc1 refactor(select): replace Selector component with new Select implementation in SettingsTab
- 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.
2025-11-11 11:01:48 +08:00
MyPrototypeWhat
b382b06c57 feat(select): introduce new Select component and related features
- 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.
2025-11-10 19:42:33 +08:00
MyPrototypeWhat
8246f46e7d fix(Button): update import path for Button component to reflect new structure 2025-11-10 19:35:46 +08:00
MyPrototypeWhat
12e3a22726 feat: add Combobox component with search and multi-select functionality
- 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.
2025-11-06 17:24:45 +08:00
MyPrototypeWhat
4ef4297391 refactor: update imports and button event handlers in story files
- 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.
2025-11-03 19:17:50 +08:00
MyPrototypeWhat
292f7f7b75 chore: remove unused CSS files and update Storybook configurations
- 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.
2025-11-03 18:31:48 +08:00