@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Form/Select.stories.tsx

@@ -1,152 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Select } from './Select';
-
-const meta = {
-  title: 'Components/Form/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the select',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the select is disabled',
-    },
-    invalid: {
-      control: 'boolean',
-      description: 'Whether the select is invalid',
-    },
-    valid: {
-      control: 'boolean',
-      description: 'Whether the select is valid',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text',
-    },
-    multiple: {
-      control: 'boolean',
-      description: 'Whether multiple options can be selected',
-    },
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample options
-const countries = [
-  { value: 'us', label: 'United States' },
-  { value: 'ca', label: 'Canada' },
-  { value: 'mx', label: 'Mexico' },
-  { value: 'uk', label: 'United Kingdom' },
-  { value: 'fr', label: 'France' },
-  { value: 'de', label: 'Germany' },
-  { value: 'jp', label: 'Japan' },
-];
-
-// Basic select
-export const Basic: Story = {
-  args: {
-    options: countries,
-    placeholder: 'Select a country',
-  },
-};
-
-// With selected value
-export const WithValue: Story = {
-  args: {
-    options: countries,
-    value: 'ca',
-    placeholder: 'Select a country',
-  },
-};
-
-// Interactive select
-export const Interactive: Story = {
-  args: {
-    options: countries,
-  },
-  render: () => {
-    const [selectedValue, setSelectedValue] = useState('');
-    
-    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-      setSelectedValue(e.target.value);
-    };
-    
-    return (
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-        <Select 
-          options={countries} 
-          placeholder="Select a country"
-          value={selectedValue}
-          onChange={handleChange}
-        />
-        {selectedValue && (
-          <div className="u-mt-3">
-            Selected value: <strong>{selectedValue}</strong>
-          </div>
-        )}
-      </div>
-    );
-  }
-};
-
-// Select sizes
-export const Sizes: Story = {
-  args: {
-    options: countries,
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Select size="sm" options={countries} placeholder="Small select" />
-      <Select size="md" options={countries} placeholder="Medium select (default)" />
-      <Select size="lg" options={countries} placeholder="Large select" />
-    </div>
-  ),
-};
-
-// Select states
-export const States: Story = {
-  args: {
-    options: countries,
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Select options={countries} placeholder="Default select" />
-      <Select options={countries} placeholder="Disabled select" disabled />
-      <Select options={countries} placeholder="Valid select" valid value="us" />
-      <Select options={countries} placeholder="Invalid select" invalid />
-    </div>
-  ),
-};
-
-// Multiple select
-export const Multiple: Story = {
-  args: {
-    options: countries,
-    placeholder: 'Select multiple countries',
-    multiple: true,
-  },
-};
-
-// With disabled options
-export const DisabledOptions: Story = {
-  args: {
-    options: [
-      { value: 'us', label: 'United States' },
-      { value: 'ca', label: 'Canada' },
-      { value: 'mx', label: 'Mexico', disabled: true },
-      { value: 'uk', label: 'United Kingdom' },
-      { value: 'fr', label: 'France', disabled: true },
-    ],
-    placeholder: 'Select a country',
-  },
-}; 

package/src/components/Form/Select.tsx

@@ -1,193 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { SelectProps } from '../../lib/types/components';
-import { useSelect } from '../../lib/composables';
-import { SELECT } from '../../lib/constants/components';
-
-/**
- * Select - A component for dropdown selection
- */
-export const Select: React.FC<SelectProps> = ({
-  options = [],
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder = 'Select an option',
-  className = '',
-  disabled = false,
-  required = false,
-  id,
-  name,
-  size = 'md',
-  invalid = false,
-  valid = false,
-  multiple = false,
-  ariaLabel,
-  ariaDescribedBy,
-}) => {
-  const { generateSelectClass } = useSelect({ 
-    size, disabled, invalid, valid
-  });
-  
-  const selectClass = generateSelectClass({ 
-    className, size, disabled, invalid, valid
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState(placeholder);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const nativeSelectRef = useRef<HTMLSelectElement>(null);
-
-  // Update selected label when value changes
-  useEffect(() => {
-    if (value) {
-      const selectedOption = options.find(opt => opt.value === value);
-      if (selectedOption) {
-        setSelectedLabel(selectedOption.label);
-      }
-    } else {
-      setSelectedLabel(placeholder);
-    }
-  }, [value, options, placeholder]);
-
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-        if (bodyRef.current) {
-          bodyRef.current.style.height = '0px';
-        }
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  // Toggle dropdown
-  const handleToggle = () => {
-    if (!disabled) {
-      if (!isOpen && bodyRef.current && panelRef.current) {
-        bodyRef.current.style.height = `${panelRef.current.clientHeight}px`;
-      } else if (bodyRef.current) {
-        bodyRef.current.style.height = '0px';
-      }
-      setIsOpen(!isOpen);
-    }
-  };
-
-  // Handle item selection
-  const handleItemClick = (option: { value: string, label: string }) => {
-    setSelectedLabel(option.label);
-    setIsOpen(false);
-    if (bodyRef.current) {
-      bodyRef.current.style.height = '0px';
-    }
-    
-    if (nativeSelectRef.current) {
-      nativeSelectRef.current.value = option.value;
-    }
-    
-    if (onChange) {
-      // Create a synthetic event
-      const event = {
-        target: {
-          name,
-          value: option.value
-        }
-      } as React.ChangeEvent<HTMLSelectElement>;
-      onChange(event);
-    }
-  };
-
-  return (
-    <div 
-      className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`} 
-      ref={dropdownRef}
-      aria-expanded={isOpen}
-    >
-      {/* Native select for accessibility and form submission */}
-      <select
-        ref={nativeSelectRef}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        disabled={disabled}
-        required={required}
-        id={id}
-        name={name}
-        multiple={multiple}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-        style={{ display: 'none' }}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map((option) => (
-          <option 
-            key={option.value} 
-            value={option.value} 
-            disabled={option.disabled}
-          >
-            {option.label}
-          </option>
-        ))}
-      </select>
-      
-      {/* Custom Select UI */}
-      <div 
-        className={SELECT.CLASSES.SELECTED}
-        onClick={handleToggle}
-        aria-disabled={disabled}
-      >
-        {selectedLabel}
-      </div>
-      
-      <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
-      
-      <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
-        <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
-          <ul className={SELECT.CLASSES.SELECT_ITEMS}>
-            {options.map((option, index) => (
-              <li 
-                key={option.value}
-                className={SELECT.CLASSES.SELECT_ITEM}
-                data-value={option.value}
-                onClick={() => !option.disabled && handleItemClick(option)}
-              >
-                <label htmlFor={`SelectItem${index}`} className="c-checkbox">
-                  <input 
-                    type="checkbox" 
-                    id={`SelectItem${index}`} 
-                    className="c-checkbox__input c-select__item-input" 
-                    checked={value === option.value}
-                    readOnly
-                    disabled={option.disabled}
-                  />
-                  <div className="c-select__item-label">{option.label}</div>
-                </label>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export type { SelectProps  };
-
-Select.displayName = 'Select';
-
-export default Select;
-  

package/src/components/Form/Textarea.stories.tsx

@@ -1,119 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Textarea } from './Textarea';
-
-const meta = {
-  title: 'Components/Form/Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    value: {
-      control: 'text',
-      description: 'Textarea value',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text',
-    },
-    rows: {
-      control: 'number',
-      description: 'Number of visible text lines',
-    },
-    cols: {
-      control: 'number',
-      description: 'Number of average character widths',
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the textarea',
-    },
-    variant: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
-      description: 'Color variant of the textarea',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the textarea is disabled',
-    },
-    invalid: {
-      control: 'boolean',
-      description: 'Whether the textarea is invalid',
-    },
-    valid: {
-      control: 'boolean',
-      description: 'Whether the textarea is valid',
-    },
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic textarea
-export const Basic: Story = {
-  args: {
-    placeholder: 'Enter text here',
-    rows: 4,
-  },
-};
-
-// With value
-export const WithValue: Story = {
-  args: {
-    value: 'This is some sample text in the textarea.',
-    rows: 4,
-  },
-};
-
-// Textarea sizes
-export const Sizes: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Textarea size="sm" placeholder="Small textarea" rows={3} />
-      <Textarea size="md" placeholder="Medium textarea (default)" rows={3} />
-      <Textarea size="lg" placeholder="Large textarea" rows={3} />
-    </div>
-  ),
-};
-
-// Textarea rows
-export const Rows: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Textarea placeholder="2 rows" rows={2} />
-      <Textarea placeholder="4 rows" rows={4} />
-      <Textarea placeholder="6 rows" rows={6} />
-    </div>
-  ),
-};
-
-// Textarea variants
-export const Variants: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Textarea variant="primary" placeholder="Primary textarea" rows={2} />
-      <Textarea variant="secondary" placeholder="Secondary textarea" rows={2} />
-      <Textarea variant="success" placeholder="Success textarea" rows={2} />
-      <Textarea variant="error" placeholder="Error textarea" rows={2} />
-      <Textarea variant="warning" placeholder="Warning textarea" rows={2} />
-      <Textarea variant="info" placeholder="Info textarea" rows={2} />
-    </div>
-  ),
-};
-
-// States
-export const States: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Textarea placeholder="Default textarea" rows={2} />
-      <Textarea placeholder="Disabled textarea" disabled rows={2} />
-      <Textarea placeholder="Valid textarea" valid rows={2} />
-      <Textarea placeholder="Invalid textarea" invalid rows={2} />
-      <Textarea placeholder="Read-only textarea" readOnly value="This content cannot be edited" rows={2} />
-    </div>
-  ),
-}; 

package/src/components/Form/Textarea.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { TextareaProps } from '../../lib/types/components';
-import { useTextarea } from '../../lib/composables/useTextarea';
-
-/**
- * Textarea - A component for multiline text input
- */
-export const Textarea: React.FC<TextareaProps> = ({
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder,
-  className = '',
-  disabled = false,
-  required = false,
-  readOnly = false,
-  id,
-  name,
-  rows = 4,
-  cols,
-  maxLength,
-  minLength,
-  size = 'md',
-  variant,
-  invalid = false,
-  valid = false,
-  autoFocus = false,
-  ariaLabel,
-  ariaDescribedBy,
-}) => {
-  const { generateTextareaClass } = useTextarea({ 
-    size, variant, disabled, invalid, valid
-  });
-  
-  const textareaClass = generateTextareaClass({ 
-    className, size, variant, disabled, invalid, valid
-  });
-  
-  return (
-    <textarea
-      className={textareaClass}
-      value={value}
-      onChange={onChange}
-      onBlur={onBlur}
-      onFocus={onFocus}
-      placeholder={placeholder}
-      disabled={disabled}
-      required={required}
-      readOnly={readOnly}
-      id={id}
-      name={name}
-      rows={rows}
-      cols={cols}
-      maxLength={maxLength}
-      minLength={minLength}
-      autoFocus={autoFocus}
-      aria-label={ariaLabel}
-      aria-describedby={ariaDescribedBy}
-      aria-invalid={invalid}
-    />
-  );
-};
-
-export type { TextareaProps  };
-
-Textarea.displayName = 'Textarea';
-
-export default Textarea;

package/src/components/Form/index.ts

@@ -1,7 +0,0 @@
-export { default as Form } from './Form';
-export { default as FormGroup } from './FormGroup';
-export { default as Input } from './Input';
-export { default as Select } from './Select';
-export { default as Checkbox } from './Checkbox';
-export { default as Radio } from './Radio';
-export { default as Textarea } from './Textarea';