@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Form/Select.tsx

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,297 @@
+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',
+  },
+};