pixel-react 1.4.6 → 1.4.7

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -13,28 +13,33 @@ const meta: Meta<typeof MenuOption> = {
   argTypes: {
     iconName: {
       control: 'text',
+      description: 'Name of the icon to display in the button.',
       defaultValue: 'more',
     },
     labelName: {
       control: 'text',
-      defaultValue: 'Controlled Menu',
+      description: 'Label text displayed beside the icon.',
+      defaultValue: 'Menu',
     },
     tooltipTitle: {
       control: 'text',
+      description: 'Tooltip text displayed on hover.',
       defaultValue: 'Select an option',
     },
     tooltipPlacement: {
       control: {
-        type: 'select',
-        options: ['top', 'down', 'left', 'right'],
+        type: 'text',
+        options: ['top', 'down', 'left', 'right'],  
       },
+      description: 'Placement of the tooltip relative to the button.',
       defaultValue: 'top',
     },
     dropdownPlacement: {
       control: {
-        type: 'select',
-        options: ['top', 'down', 'left', 'right'],
+        type: 'text',
+        options: ['top', 'down', 'left', 'right'],  
       },
+      description: 'Placement of the dropdown menu relative to the button.',
       defaultValue: 'down',
     },
   },
@@ -57,46 +62,96 @@ const handleOptionClick = (option: { label: string }) => {
   alert(`Option clicked: ${option.label}`);
 };
 
-export const ControlledMenuOptionTop: Story = {
+
+export const ControlledMenuOption: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Controlled Menu',
+    tooltipTitle: 'Select an option',
+    dropdownPlacement: "top",  
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="top" // Override dropdown position to top
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A controlled `MenuOption` with customizable tooltip and dropdown placement.',
+      },
+    },
+  },
 };
 
-export const ControlledMenuOptionBottom: Story = {
+
+export const MenuOptionTop: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'top',
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="down"
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned above the button.',
+      },
+    },
+  },
 };
 
-export const ControlledMenuOptionRight: Story = {
+
+export const MenuOptionBottom: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'down',
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="right"
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned below the button.',
+      },
+    },
+  },
+};
+
+
+export const MenuOptionLeft: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'left',
+  },
+  render: (args) => (
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the left of the button.',
+      },
+    },
+  },
+};
+
+export const MenuOptionRight: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'right',
+  },
+  render: (args) => (
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the right of the button.',
+      },
+    },
+  },
 };
 
 export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -45,24 +45,26 @@ const OptionCard = ({
   menuRef,
   closeDropdown,
   zIndex,
-  dropdownPosition,
+  dropdownPlacement,
 }: OptionCardProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
   const [optionsHeight, setOptionsHeight] = useState(0);
+  const [optionsWidth, setOptionsWidth] = useState(0);
   const optionCardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (optionCardRef?.current) {
       const rect = optionCardRef?.current?.getBoundingClientRect();
       setOptionsHeight(rect?.height);
+      setOptionsWidth(rect?.width);
     }
   }, []);
 
   useClickOutside(menuRef, closeDropdown, [optionCardRef]);
 
   const style = (() => {
-    switch (dropdownPosition) {
+    switch (dropdownPlacement) {
       case 'top':
         return {
           top: menuPosition.top - optionsHeight - 7,
@@ -70,18 +72,18 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.bottom - 5,
+          top: menuPosition.bottom,
           left: menuPosition.rightSpaceAvailable + 12,
         };
       case 'left':
         return {
           top: menuPosition.top,
-          right: menuPosition.rightSpaceAvailable + 35,
+          left: menuPosition.left - optionsWidth - 7,
         };
       case 'right':
         return {
           top: menuPosition.top,
-          left: menuPosition.rightSpaceAvailable + 35,
+          left: menuPosition.left + 20,
         };
       default:
         return {
@@ -94,14 +96,12 @@ const OptionCard = ({
   return createPortal(
     <div
       className={classNames('ff-option-card', currentTheme)}
-      ref={optionCardRef}
       style={{ ...style, zIndex }}
+      ref={optionCardRef}
     >
-      <div className="ff-option-wrapper">
-        {options.map((opt) => (
-          <Option key={opt.label} option={opt} onClick={onClick} />
-        ))}
-      </div>
+      {options.map((opt) => (
+        <Option key={opt.label} option={opt} onClick={onClick} />
+      ))}
     </div>,
     document.body
   );
@@ -126,10 +126,11 @@ const MenuOption = ({
   const menuRef = useRef<HTMLDivElement>(null);
   const [menuPosition, setMenuPosition] = useState({
     top: 0,
-    bottom: 0,
+    left: 0,
     height: 0,
-    fromBottom: 0,
+    right: 0,
     rightSpaceAvailable: 0,
+    bottomSpaceAvailable: 0,
   });
 
   const closeDropDown = () => setIsClicked(false);
@@ -151,10 +152,11 @@ const MenuOption = ({
 
       setMenuPosition({
         top: rect.top,
+        left: rect.left,
         height: rect.height,
+        right: rect.right,
         rightSpaceAvailable: document.body.clientWidth - rect.right,
-        bottom: rect.bottom,
-        fromBottom: window.innerHeight - rect.bottom,
+        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
       });
     }
   };
@@ -199,7 +201,7 @@ const MenuOption = ({
           menuRef={menuRef}
           closeDropdown={closeDropDown}
           zIndex={zIndex}
-          dropdownPosition={dropdownPlacement}
+          dropdownPlacement={dropdownPlacement}
         />
       )}
     </div>

package/src/components/MenuOption/types.ts

@@ -90,7 +90,7 @@ interface OptionCardProps {
    * @type {dropdownPosition}
    * @optional
    */
-  dropdownPosition?: 'top' | 'down' | 'left' | 'right';
+  dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
 }
 
 interface MenuOptionProps {

package/src/components/Modal/Modal.stories.tsx

@@ -26,7 +26,7 @@ export const DefaultModalStory: Story = {
     footerContent: <Button variant="primary" label="continue" />,
     customWidth: '660px',
     customHeight: 'auto',
-    boxShadow:'0px 1px 4px 0px #FFC600'
+    border: '1px solid #E79B0866',
   },
 };
 
@@ -58,7 +58,7 @@ export const Controlled: Story = {
             footerContent={<Button variant="primary" label="continue" />}
             customWidth="660px"
             customHeight="auto"
-            boxShadow='0px 1px 4px 0px #FFC600'
+            border="1px solid #E79B0866"
           />
         )}
       </>

package/src/components/Modal/Modal.tsx

@@ -22,7 +22,9 @@ const Modal: React.FC<ModalProps> = ({
   customHeight = 'auto',
   children,
   zIndex = 999,
-  boxShadow = '0px 1px 4px 0px #FFC600',
+  boxShadow = '',
+  border = '',
+  background='',
 }) => {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -58,7 +60,9 @@ const Modal: React.FC<ModalProps> = ({
       <div
         style={{
           boxShadow: boxShadow,
-          borderRadius:  '12px' ,
+          border: border,
+          borderRadius: '12px',
+          background: background,
         }}
         className="ff-modal-container"
       >

package/src/components/Modal/modal.scss

@@ -12,9 +12,8 @@
 }
 
 .ff-modal-container {
-  box-shadow: 0px 1px 4px 0px #ffc600;
-  border-radius: 12px; // Ensures box-shadow respects the rounded corners
-  overflow: hidden; // Prevents content overflow
+  border-radius: 12px;
+  overflow: hidden;
 }
 
 .ff-modal-content {

package/src/components/Modal/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 export interface ModalProps {
   isOpen: boolean;
@@ -37,5 +37,7 @@ export interface ModalProps {
   customWidth: string;
   customHeight?: string;
   zIndex?: number;
-  boxShadow:string;
+  boxShadow?: string;
+  border?: string;
+  background?: string;
 }

package/src/utils/capitalize/capitalize.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { capitalize } from './capitalize';
+
+export default {
+  title: 'Utils/Capitalize', // Organize under the "Utils" category
+  component: capitalize,
+};
+
+export const Default = () => {
+  const examples = [
+    { input: 'hello', output: capitalize('hello') },
+    { input: 'world', output: capitalize('world') },
+    { input: '', output: capitalize('') },
+    { input: 'capitalize', output: capitalize('capitalize') },
+  ];
+
+  return (
+    <div>
+      <h3>Capitalize Function Examples</h3>
+      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+        <thead>
+          <tr>
+            <th style={{ border: '1px solid black', padding: '8px' }}>Input</th>
+            <th style={{ border: '1px solid black', padding: '8px' }}>
+              Output
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {examples.map((example, index) => (
+            <tr key={index}>
+              <td style={{ border: '1px solid black', padding: '8px' }}>
+                {example.input}
+              </td>
+              <td style={{ border: '1px solid black', padding: '8px' }}>
+                {example.output}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/utils/capitalize/capitalize.tsx

@@ -0,0 +1,4 @@
+export const capitalize = (text: string): string => {
+  if (!text) return '';
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};