feat: add switcher and correct styles (Issue #14) (#22)

Author: PolinaGurinovich97

package-lock.json

@@ -2,6 +2,7 @@
   "name": "@epam/ai-dial-ui-kit",
   "version": "0.0.1",
   "type": "module",
+  "license": "Apache-2.0",
   "types": "dist/src/index.d.ts",
   "engines": {
     "node": ">=22.2.0",

package.json

@@ -91,7 +91,7 @@ describe('Dial UI Kit :: DialInput', () => {
       <DialInput elementId="test-input" placeholder="Invalid input" invalid />,
     );
     const input = getByPlaceholderText('Invalid input');
-    const container = input.parentElement;
+    const container = input.parentElement?.parentElement;
     expect(input).toHaveClass('border-0 bg-transparent');
     expect(container).toHaveClass('dial-input-error');
   });

src/components/Input/Input.spec.tsx

@@ -1,15 +1,17 @@
 import classNames from 'classnames';
-import type { FC } from 'react';
+import type { ChangeEvent, FC, KeyboardEvent, WheelEvent } from 'react';
 
 import { DialIcon } from '@/components/Icon/Icon';
 import { DialTooltip } from '@/components/Tooltip/Tooltip';
 import type { InputBaseProps } from '@/models/field-control-props';
+import { handleKeyDown } from './utils';
 
 export interface DialInputProps extends InputBaseProps {
   type?: string;
   containerCssClass?: string;
   cssClass?: string;
   hideBorder?: boolean;
+  tooltipTriggerClassName?: string;
   onChange?: (value: string) => void;
 }
 
@@ -45,6 +47,7 @@ export interface DialInputProps extends InputBaseProps {
  * @param [prefix] - Text to display inside the input on the left
  * @param [suffix] - Text to display inside the input on the right
  * @param [textBeforeInput] - Text to display before the input in a separate field
+ * @param [tooltipTriggerClassName] - Additional CSS classes to apply to the tooltip
  * @param [textAfterInput] - Text to display after the input in a separate field
  */
 export const DialInput: FC<DialInputProps> = ({
@@ -56,6 +59,7 @@ export const DialInput: FC<DialInputProps> = ({
   placeholder = '',
   cssClass = '',
   containerCssClass,
+  tooltipTriggerClassName,
   type = 'text',
   disabled,
   readonly,
@@ -68,6 +72,41 @@ export const DialInput: FC<DialInputProps> = ({
   textBeforeInput,
   textAfterInput,
 }) => {
+  const handleWheel = (e: WheelEvent<HTMLInputElement>) =>
+    (e.target as HTMLInputElement).blur();
+
+  const isNumericInput =
+    type === 'number' || min !== undefined || max !== undefined;
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    handleKeyDown(e, type, min, max);
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.currentTarget.value;
+
+    if (isNumericInput && newValue !== '') {
+      const numericValue = parseFloat(newValue);
+
+      // If it's not a valid number (except for partial inputs like "-" or ".")
+      if (isNaN(numericValue) && newValue !== '-' && newValue !== '.') {
+        return;
+      }
+
+      // Check range constraints for complete numbers
+      if (!isNaN(numericValue)) {
+        if (min !== undefined && numericValue < min) {
+          return;
+        }
+        if (max !== undefined && numericValue > max) {
+          return;
+        }
+      }
+    }
+
+    onChange?.(newValue);
+  };
+
   return (
     <div
       className={classNames(
@@ -96,19 +135,23 @@ export const DialInput: FC<DialInputProps> = ({
       {prefix && <p className="text-secondary dial-small pl-2"> {prefix}</p>}
       <DialIcon icon={iconBeforeInput} className="pl-2" />
 
-      <input
-        type={type}
-        autoComplete="new-password"
-        id={elementId}
-        placeholder={placeholder}
-        value={value ?? ''}
-        title={value ? String(value) : ''}
-        disabled={disabled}
-        min={min}
-        max={max}
-        className={classNames('border-0 bg-transparent px-2', cssClass)}
-        onChange={(event) => !readonly && onChange?.(event.currentTarget.value)}
-      />
+      <DialTooltip tooltip={value} triggerClassName={tooltipTriggerClassName}>
+        <input
+          type={type}
+          autoComplete="off"
+          id={elementId}
+          placeholder={placeholder}
+          value={value ?? ''}
+          title={value ? String(value) : ''}
+          disabled={disabled}
+          className={classNames('border-0 bg-transparent px-2', cssClass)}
+          onChange={(event) => !readonly && handleChange?.(event)}
+          onKeyDown={onKeyDown}
+          onWheel={handleWheel}
+          min={min}
+          max={max}
+        />
+      </DialTooltip>
 
       <DialIcon icon={iconAfterInput} className="pr-2" />
       {suffix && <p className="text-secondary dial-small pr-2"> {suffix}</p>}

src/components/Input/Input.tsx

@@ -0,0 +1,77 @@
+import type { KeyboardEvent } from 'react';
+
+const ALLOWED_INPUT_KEYS = [
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Backspace',
+  'Delete',
+  'Tab',
+  'Enter',
+  'Escape',
+  'Home',
+  'End',
+];
+
+export const handleKeyDown = (
+  e: KeyboardEvent<HTMLInputElement>,
+  type?: string,
+  min?: number,
+  max?: number,
+) => {
+  const isNumericInput =
+    type === 'number' || min !== undefined || max !== undefined;
+
+  if (!isNumericInput) return;
+
+  if (ALLOWED_INPUT_KEYS.includes(e.key)) {
+    return;
+  }
+
+  // Allow minus sign only at the beginning and if min allows negative numbers
+  if (
+    e.key === '-' &&
+    e.currentTarget.selectionStart === 0 &&
+    (min === undefined || min < 0)
+  ) {
+    return;
+  }
+
+  // Allow decimal point for number inputs (but not if it already exists)
+  if (
+    e.key === '.' &&
+    type === 'number' &&
+    !e.currentTarget.value.includes('.')
+  ) {
+    return;
+  }
+
+  // Only allow numeric characters
+  if (!/^[0-9]$/.test(e.key)) {
+    e.preventDefault();
+    return;
+  }
+
+  // Check if the resulting value would be within range
+  if (min !== undefined || max !== undefined) {
+    const currentValue = e.currentTarget.value;
+    const cursorPosition = e.currentTarget.selectionStart || 0;
+    const newValue =
+      currentValue.slice(0, cursorPosition) +
+      e.key +
+      currentValue.slice(cursorPosition);
+    const numericValue = parseFloat(newValue);
+
+    if (!isNaN(numericValue)) {
+      if (min !== undefined && numericValue < min) {
+        e.preventDefault();
+        return;
+      }
+      if (max !== undefined && numericValue > max) {
+        e.preventDefault();
+        return;
+      }
+    }
+  }
+};

src/components/Input/utils.ts

@@ -0,0 +1,39 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { DialSwitch } from './Switch';
+
+describe('Dial UI Kit :: DialSwitch', () => {
+  it('renders with title', () => {
+    render(<DialSwitch title="Test Switch" switchId="switch1" />);
+    expect(screen.getByText('Test Switch')).toBeInTheDocument();
+  });
+
+  it('calls onChange with toggled value', () => {
+    const onChange = vi.fn();
+    render(
+      <DialSwitch
+        title="Test Switch"
+        switchId="switch2"
+        isOn={false}
+        onChange={onChange}
+      />,
+    );
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.click(checkbox);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    const onChange = vi.fn();
+    render(
+      <DialSwitch
+        title="Disabled Switch"
+        switchId="switch3"
+        disabled
+        onChange={onChange}
+      />,
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+  });
+});

src/components/Switch/Switch.spec.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { DialSwitch, type DialSwitchProps } from './Switch';
+
+const InteractiveSwitch = (args: DialSwitchProps) => {
+  const [value, setValue] = useState(args.isOn);
+
+  return (
+    <div className="w-full text-primary">
+      <DialSwitch
+        {...args}
+        isOn={value}
+        onChange={(newValue) => setValue(newValue)}
+      />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'Components/Switch',
+  component: DialSwitch,
+  tags: ['switch'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A flexible switch component with consistent styling.',
+      },
+    },
+  },
+  argTypes: {
+    switchId: {
+      control: 'text',
+      description: 'Unique identifier for the switch element',
+    },
+    title: {
+      control: 'text',
+      description: 'The title/label text to display for the switch',
+    },
+    isOn: {
+      control: 'boolean',
+      description: 'The current value of the switch',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the switch is disabled',
+    },
+    onChange: {
+      action: 'changed',
+      control: false,
+      description: 'Callback function called when the switch value changes',
+    },
+  },
+} satisfies Meta<typeof DialSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: InteractiveSwitch,
+  args: {
+    switchId: 'default-switch',
+    title: 'Enable feature',
+  },
+};
+
+export const WithActiveValue: Story = {
+  render: InteractiveSwitch,
+  args: {
+    switchId: 'default-switch',
+    title: 'Enable feature',
+    isOn: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: InteractiveSwitch,
+  args: {
+    switchId: 'default-switch',
+    title: 'Enable feature',
+    isOn: true,
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  args: {
+    switchId: 'all-variants-textarea',
+  },
+  render: () => (
+    <div className="min-w-[800px] p-8">
+      <div className="grid grid-cols-3 gap-6">
+        {/* Default State */}
+        <div>
+          <div className="text-primary font-semibold mb-2">Default</div>
+          <InteractiveSwitch switchId="default-switch" title="Switch" />
+        </div>
+
+        {/* Disabled State for active Switch */}
+        <div>
+          <div className="text-primary font-semibold mb-2">
+            Disabled for active Switch
+          </div>
+          <InteractiveSwitch
+            switchId="disabled-switch"
+            title="Disabled Switch"
+            disabled={true}
+            isOn={true}
+          />
+        </div>
+
+        {/* Disabled State for not active Switch */}
+        <div>
+          <div className="text-primary font-semibold mb-2">
+            Disabled for not active Switch
+          </div>
+          <InteractiveSwitch
+            switchId="disabled-switch"
+            title="Disabled Switch"
+            disabled={true}
+            isOn={false}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};