@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/Form/Select.tsx

@@ -1,191 +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,124 +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,78 +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';

package/src/components/Hero/Hero.stories.tsx

@@ -1,297 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Hero } from './Hero';
-import { Button } from '../Button/Button';
-import { HERO } from '../../lib/constants/components';
-
-// Extract class names without the leading dots
-const HERO_CLASS = HERO.SELECTORS.HERO.replace('.', '');
-const CONTAINER_CLASS = HERO.SELECTORS.CONTAINER.replace('.', '');
-const GRID_CLASS = HERO.SELECTORS.GRID.replace('.', '');
-const CONTENT_CLASS = HERO.SELECTORS.CONTENT.replace('.', '');
-const SUBTITLE_CLASS = HERO.SELECTORS.SUBTITLE.replace('.', '');
-const TITLE_CLASS = HERO.SELECTORS.TITLE.replace('.', '');
-const TEXT_CLASS = HERO.SELECTORS.TEXT.replace('.', '');
-const ACTIONS_CLASS = HERO.SELECTORS.ACTIONS.replace('.', '');
-const IMAGE_CLASS = HERO.SELECTORS.IMAGE.replace('.', '');
-const BG_CLASS = HERO.SELECTORS.BG.replace('.', '');
-const BG_IMAGE_CLASS = HERO.SELECTORS.BG_IMAGE.replace('.', '');
-const OVERLAY_CLASS = HERO.SELECTORS.OVERLAY.replace('.', '');
-const IMAGE_WRAPPER_CLASS = HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '');
-const CENTER_CLASS = HERO.CLASSES.CENTER;
-const RIGHT_CLASS = HERO.CLASSES.RIGHT;
-const LEFT_CLASS = HERO.CLASSES.LEFT;
-const FULL_VH_CLASS = HERO.CLASSES.FULL_VH;
-
-const meta = {
-  title: 'Components/Hero',
-  component: Hero,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Hero title',
-    },
-    subtitle: {
-      control: 'text',
-      description: 'Hero subtitle',
-    },
-    text: {
-      control: 'text',
-      description: 'Hero text content',
-    },
-    imageSrc: {
-      control: 'text',
-      description: 'Image source URL',
-    },
-    imageAlt: {
-      control: 'text',
-      description: 'Image alt text',
-    },
-    alignment: {
-      control: { type: 'select', options: ['left', 'center', 'right'] },
-      description: 'Content alignment',
-    },
-    backgroundImageSrc: {
-      control: 'text',
-      description: 'Background image source URL',
-    },
-    showOverlay: {
-      control: 'boolean',
-      description: 'Show background overlay',
-    },
-    fullViewportHeight: {
-      control: 'boolean',
-      description: 'Make hero full viewport height',
-    },
-    imageColSize: {
-      control: { type: 'range', min: 1, max: 12, step: 1 },
-      description: 'Image column size (1-12)',
-    },
-    contentColSize: {
-      control: { type: 'range', min: 1, max: 12, step: 1 },
-      description: 'Content column size (1-12)',
-    },
-    contentWidth: {
-      control: 'text',
-      description: 'Custom width for the hero content (e.g., "800px", "50%")',
-      table: {
-        defaultValue: { summary: '536px' },
-      },
-    },
-    parallax: {
-      control: 'boolean',
-      description: 'Enable parallax effect on background image',
-    },
-    parallaxIntensity: {
-      control: { type: 'range', min: 0, max: 1, step: 0.1 },
-      description: 'Parallax effect intensity (0-1)',
-    },
-    videoBackground: {
-      control: 'text',
-      description: 'Video background URL',
-    },
-    videoOptions: {
-      control: 'object',
-      description: 'Video background options',
-    },
-  },
-} satisfies Meta<typeof Hero>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Helper for button actions
-const primaryActionButtons = (
-  <>
-    <Button label="Get Started" variant="primary" />
-    <Button label="Learn More" variant="outline-secondary" />
-  </>
-);
-
-const showcaseActionButtons = (
-  <>
-    <Button label="Explore Components" variant="primary" />
-    <Button label="View Documentation" variant="outline-secondary" />
-  </>
-);
-
-const demoText =
-  'Build modern, responsive interfaces with a clean, consistent design language. Our component library helps you create beautiful user experiences with minimal effort.';
-
-const showcaseText =
-  'Atomix provides a complete design system with powerful, flexible components that follow best practices for accessibility, performance, and user experience.';
-
-/**
- * Default Hero component with right-aligned content and image
- */
-export const Default: Story = {
-  args: {
-    title: 'Modern UI Components for Developers',
-    subtitle: 'Atomix Design System',
-    text: demoText,
-    imageSrc: 'https://picsum.photos/id/0/712/500',
-    imageAlt: 'Developer working with code',
-    alignment: 'right',
-    actions: primaryActionButtons,
-  },
-};
-
-/**
- * Hero with left-aligned content and image on right
- */
-export const LeftAligned: Story = {
-  args: {
-    ...Default.args,
-    title: 'Crafted for Developer Experience',
-    alignment: 'left',
-    imageSrc: 'https://picsum.photos/id/3/712/500',
-  },
-};
-
-/**
- * Hero with center-aligned content and image below
- */
-export const CenterAligned: Story = {
-  args: {
-    ...Default.args,
-    title: 'Build Faster with Atomix',
-    text: 'Our components follow best practices for accessibility, performance, and responsive design. Start building beautiful interfaces in minutes.',
-    alignment: 'center',
-    imageSrc: 'https://picsum.photos/id/1/1024/300',
-  },
-};
-
-/**
- * Hero with background image
- */
-export const WithBackgroundImage: Story = {
-  args: {
-    ...Default.args,
-    title: 'Powerful Design System',
-    text: showcaseText,
-    actions: showcaseActionButtons,
-    backgroundImageSrc: 'https://picsum.photos/id/24/1920/1080',
-    showOverlay: true,
-  },
-};
-
-/**
- * Hero with background image and no foreground image
- */
-export const BackgroundImageOnly: Story = {
-  args: {
-    ...Default.args,
-    title: 'Beautiful & Accessible Components',
-    text: 'Atomix is built with accessibility in mind, ensuring your applications work for everyone. Our components are fully responsive and follow WAI-ARIA guidelines.',
-    imageSrc: undefined,
-    backgroundImageSrc: 'https://picsum.photos/id/1067/1920/1080',
-    showOverlay: true,
-    alignment: 'center',
-    actions: showcaseActionButtons,
-    contentWidth: '800px',
-  },
-};
-
-/**
- * Full viewport height hero
- */
-export const FullViewportHeight: Story = {
-  args: {
-    ...BackgroundImageOnly.args,
-    title: 'Atomix. Build Once. Use Everywhere.',
-    text: 'A flexible, scalable design system that works seamlessly across all devices and platforms.',
-    fullViewportHeight: true,
-  },
-};
-
-/**
- * Left-aligned content with background image
- */
-export const LeftAlignedWithBackground: Story = {
-  args: {
-    ...WithBackgroundImage.args,
-    title: 'Customizable & Extensible',
-    text: 'Easily customize components to match your brand. Built with a flexible architecture that allows for easy extension and adaptation.',
-    alignment: 'left',
-  },
-};
-
-/**
- * Center-aligned content with background and foreground image
- */
-export const CenterAlignedWithImageBackground: Story = {
-  args: {
-    ...WithBackgroundImage.args,
-    title: 'Based on Modern Standards',
-    text: 'Built with the latest technologies like React, TypeScript, and SCSS. Follows BEM, ITCSS, and OOCSS methodologies for clean, maintainable CSS.',
-    alignment: 'center',
-    imageSrc: 'https://picsum.photos/id/160/1312/280',
-  },
-};
-
-/**
- * Center-aligned content with custom content width
- */
-export const CustomContentWidth: Story = {
-  args: {
-    ...CenterAligned.args,
-    title: 'Hero with Custom Content Width',
-    text: 'This hero component has a custom content width set through the contentWidth prop, which sets the --atomix-hero-content-width CSS variable.',
-    contentWidth: '800px',
-  },
-};
-
-/**
- * Hero with parallax background effect
- */
-export const WithParallaxEffect: Story = {
-  args: {
-    ...BackgroundImageOnly.args,
-    title: 'Parallax Background Effect',
-    text: 'This hero features a parallax scrolling effect on the background image, creating depth and visual interest as the user scrolls.',
-    backgroundImageSrc: 'https://picsum.photos/id/1015/1920/1080',
-    parallax: true,
-    parallaxIntensity: 0.5,
-    fullViewportHeight: true,
-  },
-};
-
-/**
- * Hero with video background
- */
-export const WithVideoBackground: Story = {
-  args: {
-    title: 'Video Background Hero',
-    subtitle: 'Dynamic & Engaging',
-    text: 'Add motion and visual interest to your hero sections with video backgrounds. Perfect for creating immersive landing pages.',
-    alignment: 'center',
-    videoBackground: 'https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4',
-    videoOptions: {
-      autoplay: true,
-      loop: true,
-      muted: true,
-      posterUrl: 'https://picsum.photos/id/1018/1920/1080',
-    },
-    showOverlay: true,
-    actions: showcaseActionButtons,
-    contentWidth: '800px',
-  },
-};
-
-/**
- * Hero with video background and foreground image
- */
-export const VideoBackgroundWithImage: Story = {
-  args: {
-    ...WithVideoBackground.args,
-    title: 'Complete Media Support',
-    text: 'Combine video backgrounds with foreground images for rich, layered visual presentations.',
-    alignment: 'left',
-    imageSrc: 'https://picsum.photos/id/180/712/500',
-    imageAlt: 'Product showcase',
-  },
-};