Merge pull request #63 from getpingback/fix/addVariables

fix: color picker bg color and remove unecessary opacity prop

src/components/color-picker/color-picker.stories.tsx

@@ -14,14 +14,12 @@ type Story = StoryObj<typeof ColorPicker>;
 export const Default: Story = {
   args: {
     color: '#000000',
-    opacity: 1,
     saveText: 'Save',
     cancelText: 'Cancel'
   },
-  render: ({ color: defaultColor, opacity: defaultOpacity, ...args }) => {
+  render: ({ color: defaultColor, ...args }) => {
     const [color, setColor] = useState(defaultColor);
-    const [opacity, setOpacity] = useState(defaultOpacity);
 
-    return <ColorPicker {...args} color={color} onChange={setColor} opacity={opacity} onChangeOpacity={setOpacity} />;
+    return <ColorPicker {...args} color={color} onChange={setColor} />;
   }
 };

src/components/color-picker/color-picker.test.tsx

@@ -5,9 +5,7 @@ import { ColorPicker } from './color-picker';
 describe('ColorPicker', () => {
   const defaultProps = {
     color: '#000000',
-    onChange: jest.fn(),
-    opacity: 1,
-    onChangeOpacity: jest.fn()
+    onChange: jest.fn()
   };
 
   beforeEach(() => {
@@ -51,7 +49,17 @@ describe('ColorPicker', () => {
     const opacityInput = screen.getByDisplayValue('100%');
     fireEvent.change(opacityInput, { target: { value: '50' } });
 
-    expect(defaultProps.onChangeOpacity).toHaveBeenCalledWith(0.5);
+    expect(defaultProps.onChange).toHaveBeenCalledWith('#00000080');
+  });
+
+  it('correctly displays opacity when color has alpha channel', () => {
+    render(<ColorPicker {...defaultProps} color="#FF000080" />);
+
+    const trigger = screen.getByRole('button');
+    fireEvent.click(trigger);
+
+    const opacityInput = screen.getByDisplayValue('50%');
+    expect(opacityInput).toBeInTheDocument();
   });
 
   it('calls onSave when save button is clicked', () => {
@@ -90,6 +98,5 @@ describe('ColorPicker', () => {
     fireEvent.click(themeColors[0]);
 
     expect(defaultProps.onChange).toHaveBeenCalled();
-    expect(defaultProps.onChangeOpacity).toHaveBeenCalledWith(1);
   });
 });

src/components/color-picker/color-picker.tsx

@@ -1,39 +1,45 @@
 import * as React from 'react';
 
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/lib/utils';
 import { HexColorPicker } from 'react-colorful';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
 import { Button } from '../button';
+import { getInitialOpacity, opacityToHex } from './utils';
 import { THEME_COLORS } from './constants';
-import { opacityToHex } from './utils';
 
 interface ColorPickerProps {
   color: string;
   onChange: (color: string) => void;
-  opacity: number;
-  onChangeOpacity: (opacity: number) => void;
   onSave?: () => void;
   onCancel?: () => void;
   cancelText?: string;
   saveText?: string;
+  className?: string;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  align?: 'start' | 'center' | 'end';
 }
 
 export const ColorPicker = ({
   color = '#000000',
   onChange,
-  opacity = 1,
-  onChangeOpacity,
   onSave,
   onCancel,
   cancelText = 'Cancel',
-  saveText = 'Save'
+  saveText = 'Save',
+  side = 'bottom',
+  align = 'end',
+  className
 }: ColorPickerProps) => {
+  const initialOpacity = getInitialOpacity(color);
   const [isOpen, setIsOpen] = React.useState(false);
+  const [opacity, setOpacity] = React.useState(initialOpacity);
 
   const handleChangeOpacity = (e: React.ChangeEvent<HTMLInputElement>) => {
     const rawValue = e.target.value.replace('%', '');
     const value = Math.min(100, Math.max(0, Number(rawValue) || 0));
     const newOpacity = value / 100;
-    onChangeOpacity(newOpacity);
+    setOpacity(newOpacity);
 
     if (newOpacity < 1) {
       const baseColor = color.slice(0, 7);
@@ -49,7 +55,7 @@ export const ColorPicker = ({
 
   const handleChangeHexColor = (color: string) => {
     onChange(color);
-    onChangeOpacity(1);
+    setOpacity(1);
   };
 
   const handleSave = () => {
@@ -72,9 +78,9 @@ export const ColorPicker = ({
         />
       </DropdownMenuPrimitive.Trigger>
       <DropdownMenuPrimitive.Content
-        side="bottom"
-        align="start"
-        className="w-[252px] p-4 flex flex-col z-50 rounded-lg shadow-modal"
+        side={side}
+        align={align}
+        className={cn('w-[252px] bg-[#FFFFFF] p-4 flex flex-col z-50 rounded-lg shadow-modal', className)}
         data-testid="color-picker-dialog"
       >
         <div className="custom-color-picker">

src/components/color-picker/utils.ts

@@ -3,3 +3,8 @@ export const opacityToHex = (opacity: number): string => {
     .toString(16)
     .padStart(2, '0');
 };
+
+export const getInitialOpacity = (color: string): number => {
+  const opacity = color.slice(7);
+  return opacity ? parseInt(opacity, 16) / 255 : 1;
+};