@axzydev/axzy_ui_system 1.2.16 → 1.3.1

package/src/components/molecules/time-picker/timePicker.tsx

@@ -1,9 +1,11 @@
 import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { FaClock } from "react-icons/fa";
 import ITInput from "@/components/atoms/input/input";
 import ITButton from "@/components/atoms/button/button";
 import useClickOutside from "@/hooks/useClickOutside";
+import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import { theme } from "@/theme/theme";
 import { ITTimePickerProps } from "./timePicker.props";
 import ITText from "@/components/atoms/text/text";
@@ -48,13 +50,18 @@ export default function ITTimePicker({
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState(value || "");
   const [isValidTime, setIsValidTime] = useState(true);
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
 
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
   const hoursRef = useRef<HTMLDivElement>(null);
   const minutesRef = useRef<HTMLDivElement>(null);
 
+  // Dropdown position (rendered in a portal so it escapes overflow/transform ancestors).
+  const { panelRef: dropdownRef, style: panelStyle } = useFloatingPanel(
+    wrapperRef,
+    isOpen && !disabled,
+    { estimatedHeight: 300, matchWidth: false }
+  );
+
   useClickOutside(dropdownRef, () => {
     // Only close if it's currently open to avoid setting state unnecessarily
     if (isOpen) {
@@ -76,23 +83,7 @@ export default function ITTimePicker({
     setInputValue(value || "");
   }, [value]);
 
-  const calculateDropdownPosition = () => {
-    if (wrapperRef.current) {
-      const inputRect = wrapperRef.current.getBoundingClientRect();
-      const dropdownHeight = 280; // approximate height of the time picker dropdown
-      const viewportHeight = window.innerHeight;
-
-      let top = inputRect.bottom + 4;
-      if (inputRect.bottom + dropdownHeight > viewportHeight) {
-        top = inputRect.top - dropdownHeight - 4;
-      }
 
-      setDropdownPosition({
-        top,
-        left: inputRect.left,
-      });
-    }
-  };
 
   const validateTime = (timeString: string) => {
     const regex = /^([01]\d|2[0-3]):([0-5]\d)$/;
@@ -210,7 +201,6 @@ export default function ITTimePicker({
           <FaClock
             onClick={() => {
               if (!disabled) {
-                calculateDropdownPosition();
                 setIsOpen(!isOpen);
               }
             }}
@@ -224,14 +214,11 @@ export default function ITTimePicker({
         }
       />
 
-      {isOpen && !disabled && (
+      {isOpen && !disabled && createPortal(
         <div 
           ref={dropdownRef}
-          className="fixed z-[70] bg-white border border-secondary-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
-          style={{
-            top: `${dropdownPosition.top}px`,
-            left: `${dropdownPosition.left}px`,
-          }}
+          className="bg-white border border-secondary-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
+          style={panelStyle}
         >
           <div className="flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider">
             <ITText as="div" className="flex-1 text-center py-2 border-r border-secondary-100">
@@ -331,7 +318,8 @@ export default function ITTimePicker({
               <ITText as="span">Aceptar</ITText>
             </ITButton>
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );

package/src/components/molecules/wysiwyg/wysiwyg.props.ts

@@ -0,0 +1,51 @@
+import { SizesTypes } from "@/types/sizes.types";
+
+/** Toolbar actions supported by ITWysiwyg. */
+export type ToolbarAction =
+  | "bold"
+  | "italic"
+  | "underline"
+  | "highlight"
+  | "ul"
+  | "ol"
+  | "clear";
+
+/** Available formatting tools. Every action maps to a toolbar button with an icon and tooltip. */
+export const toolbarActions: ToolbarAction[] = [
+  "bold",
+  "italic",
+  "underline",
+  "highlight",
+  "ul",
+  "ol",
+  "clear",
+];
+
+export interface ITWysiwygProps {
+  /** Controlled HTML value rendered inside the editor. Overrides the visible content only while the editor is not focused (avoids caret jumps). */
+  value?: string;
+  /** Callback fired with the editor's HTML whenever the content changes. */
+  onChange?: (html: string) => void;
+  /** Label text rendered above the editor. */
+  label?: string;
+  /** Placeholder text shown when the editor is empty. */
+  placeholder?: string;
+  /** Validation error message displayed below the editor. */
+  error?: string;
+  /** Disables the editor and toolbar when true. @default false */
+  disabled?: boolean;
+  /** Renders content in read-only mode (not editable, toolbar disabled). @default false */
+  readOnly?: boolean;
+  /** Name attribute for form submission and label association via `htmlFor`. */
+  name?: string;
+  /** Editor size: controls padding and font size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
+  size?: SizesTypes;
+  /** Minimum height in pixels of the editable area. @default 128 */
+  minHeight?: number;
+  /** Background color used by the marker tool (yellow highlight). @default "#fde68a" */
+  highlightColor?: string;
+  /** Subset of toolbar actions to render. @default all actions */
+  toolbar?: ToolbarAction[];
+  /** Additional CSS classes for the wrapper. */
+  className?: string;
+}

package/src/components/molecules/wysiwyg/wysiwyg.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import ITWysiwyg from '@/components/molecules/wysiwyg/wysiwyg';
+
+const meta = {
+  title: 'Components/Form/ITWysiwyg',
+  component: ITWysiwyg,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    toolbar: {
+      control: 'select',
+      options: [
+        ['bold', 'italic', 'underline', 'highlight', 'ul', 'ol', 'clear'],
+        ['bold', 'italic', 'underline'],
+        ['ul', 'ol'],
+      ],
+    },
+  },
+} satisfies Meta<typeof ITWysiwyg>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Escribe algo...',
+    minHeight: 140,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Descripción',
+    placeholder: 'Texto libre...',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    value: '<div>Texto con <strong>negrita</strong>, <em>itálica</em> y <u>subrayado</u>.</div><div><mark style="background-color:#fde68a">Con marcador</mark> y:</div><ul><li>Elemento uno</li><li>Elemento dos</li></ul>',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: '<div>Contenido bloqueado para edición.</div>',
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    label: 'Vista previa',
+    value: '<div>Solo lectura, sin toolbar activo.</div>',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Descripción',
+    error: 'Este campo es obligatorio.',
+    value: '',
+  },
+};
+
+export const CustomHighlight: Story = {
+  args: {
+    highlightColor: '#a7f3d0',
+    label: 'Marcador verde',
+  },
+};
+
+export const LiveValue: Story = {
+  render: (args) => {
+    const [html, setHtml] = useState<string>(
+      '<div>Edita aquí y mira el HTML generado abajo.</div>'
+    );
+    return (
+      <div className="w-96 space-y-4">
+        <ITWysiwyg {...args} value={html} onChange={setHtml} />
+        <pre className="max-h-40 overflow-auto rounded-lg bg-slate-950 p-3 text-[10px] text-emerald-300">
+          <code>{html}</code>
+        </pre>
+      </div>
+    );
+  },
+  args: {},
+};