@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Testimonial/Testimonial.tsx

@@ -0,0 +1,138 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { TESTIMONIAL } from '../../lib/constants/components';
+
+export interface TestimonialAuthor {
+  /**
+   * The author's name
+   */
+  name: string;
+
+  /**
+   * The author's role or title
+   */
+  role: string;
+
+  /**
+   * The URL to the author's avatar image
+   */
+  avatarSrc?: string;
+
+  /**
+   * Alternative text for the avatar image
+   */
+  avatarAlt?: string;
+}
+
+export interface TestimonialProps {
+  /**
+   * The testimonial quote text or content
+   */
+  quote: ReactNode;
+
+  /**
+   * Author information
+   */
+  author?: TestimonialAuthor;
+
+  /**
+   * Size variant
+   */
+  size?: 'sm' | 'lg' | '';
+
+  /**
+   * Whether to show a skeleton loading state
+   */
+  skeleton?: boolean;
+
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+
+/**
+ * Testimonial component for displaying customer quotes and feedback
+ */
+export const Testimonial: React.FC<TestimonialProps> = ({
+  quote,
+  author,
+  size = '',
+  skeleton = false,
+  className = '',
+}) => {
+  const testimonialRef = useRef<HTMLDivElement>(null);
+  const testimonialInstance = useRef<any>(null);
+
+  useEffect(() => {
+    // Only run on client-side
+    if (typeof window === 'undefined' || !testimonialRef.current) return undefined;
+
+    // Cleanup on unmount
+    return () => {
+      if (testimonialInstance.current) {
+        testimonialInstance.current.destroy();
+      }
+    };
+  }, [size, skeleton]);
+
+  // Determine CSS classes
+  const testimonialClasses = [
+    'c-testimonial',
+    size === 'sm' ? TESTIMONIAL.CLASSES.SMALL : '',
+    size === 'lg' ? TESTIMONIAL.CLASSES.LARGE : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Render skeleton version
+  if (skeleton) {
+    return (
+      <div className={testimonialClasses} ref={testimonialRef}>
+        <blockquote className="c-testimonial__quote">
+          <span className="c-skeleton"></span>
+          <span className="c-skeleton"></span>
+          <span className="c-skeleton u-w-75"></span>
+          <span className="c-skeleton u-w-25"></span>
+        </blockquote>
+        <div className="c-testimonial__author">
+          <span className="c-testimonial__author-avatar c-avatar c-avatar--xxl c-avatar--circle c-skeleton"></span>
+          <div className="c-testimonial__info u-w-75">
+            <p className="c-testimonial__author-name">
+              <span className="c-skeleton u-w-25"></span>
+            </p>
+            <p className="c-testimonial__author-role">
+              <span className="c-skeleton u-w-25"></span>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Render normal version
+  return (
+    <div className={testimonialClasses} ref={testimonialRef}>
+      <blockquote className="c-testimonial__quote">{quote}</blockquote>
+      {author && (
+        <div className="c-testimonial__author">
+          {author.avatarSrc && (
+            <img
+              src={author.avatarSrc}
+              alt={author.avatarAlt || ''}
+              className="c-testimonial__author-avatar c-avatar c-avatar--xxl c-avatar--circle"
+            />
+          )}
+          <div className="c-testimonial__info">
+            <p className="c-testimonial__author-name">{author.name}</p>
+            <p className="c-testimonial__author-role">{author.role}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Testimonial.displayName = 'Testimonial';
+
+export default Testimonial;

package/src/components/Testimonial/index.ts

@@ -0,0 +1,3 @@
+export { Testimonial } from './Testimonial';
+export type { TestimonialProps, TestimonialAuthor } from './Testimonial';
+export { default } from './Testimonial';

package/src/components/Todo/Todo.stories.tsx

@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { generateUUID } from '../../lib/utils';
+import { Todo } from './Todo';
+
+const meta: Meta<typeof Todo> = {
+  title: 'Components/Todo',
+  component: Todo,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    items: { control: 'object' },
+    title: { control: 'text' },
+
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    placeholder: { control: 'text' },
+    showCompleted: { control: 'boolean' },
+    className: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Todo>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { id: '1', text: 'Learn React', completed: true },
+      { id: '2', text: 'Build a todo app', completed: false },
+      { id: '3', text: 'Deploy to production', completed: false },
+    ],
+    title: 'Todo List',
+    placeholder: 'Add a new task',
+    size: 'md',
+    showCompleted: true,
+    disabled: false,
+  },
+};
+
+export const WithManyItems: Story = {
+  args: {
+    items: [
+      { id: generateUUID(), text: 'Complete project documentation', completed: false },
+      { id: generateUUID(), text: 'Review pull requests', completed: true },
+      { id: generateUUID(), text: 'Update dependencies', completed: false },
+      { id: generateUUID(), text: 'Write unit tests', completed: false },
+      { id: generateUUID(), text: 'Fix accessibility issues', completed: true },
+    ],
+    title: 'Project Tasks',
+    showCompleted: true,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: 'lg',
+  },
+};
+
+export const HideCompleted: Story = {
+  args: {
+    items: [
+      { id: generateUUID(), text: 'Learn React', completed: true },
+      { id: generateUUID(), text: 'Build a todo app', completed: false },
+      { id: generateUUID(), text: 'Deploy to production', completed: false },
+    ],
+    showCompleted: false,
+    title: 'Active Tasks',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    ...Default.args,
+    title: 'My Custom Todo List',
+  },
+};
+
+export const NoTitle: Story = {
+  args: {
+    ...Default.args,
+    title: '',
+  },
+};

package/src/components/Todo/Todo.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { TodoProps } from '../../lib/types/components';
+import { useTodo } from '../../lib/composables/useTodo';
+import { Icon } from '../Icon/Icon';
+import { TODO } from '../../lib/constants/components';
+import { generateUUID } from '../../lib/utils';
+
+export const Todo: React.FC<TodoProps> = ({
+  items = [],
+  title = 'Todo List',
+  onAddTodo,
+  onToggleTodo,
+  onDeleteTodo,
+  size = 'md',
+  placeholder = 'Add a new todo',
+  showCompleted = true,
+  className = '',
+  disabled = false,
+}) => {
+  const { inputText, setInputText, addTodo, generateTodoClasses, generateItemClasses } = useTodo({
+    items,
+    title,
+    size,
+    placeholder,
+    showCompleted,
+    disabled,
+  });
+
+  // State to manage local items
+  const [localItems, setLocalItems] = useState(items);
+
+  // Update local items when props change
+  useEffect(() => {
+    setLocalItems(items);
+  }, [items]);
+
+  // Handle item toggle
+  const handleToggle = (id: string) => {
+    if (disabled) return;
+
+    setLocalItems(prevItems =>
+      prevItems.map(item => (item.id === id ? { ...item, completed: !item.completed } : item))
+    );
+
+    if (onToggleTodo) {
+      onToggleTodo(id);
+    }
+  };
+
+  // Handle item delete
+  const handleDelete = (id: string) => {
+    if (disabled) return;
+
+    setLocalItems(prevItems => prevItems.filter(item => item.id !== id));
+
+    if (onDeleteTodo) {
+      onDeleteTodo(id);
+    }
+  };
+
+  // Handle form submission
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (disabled || !inputText.trim()) return;
+
+    // Create a new todo item with a unique ID
+    const newTodo = {
+      id: generateUUID(),
+      text: inputText.trim(),
+      completed: false,
+    };
+
+    // Update local state
+    setLocalItems(prevItems => [...prevItems, newTodo]);
+
+    // Call parent callback if provided
+    if (onAddTodo) {
+      onAddTodo(inputText);
+    }
+
+    // Clear the input field
+    setInputText('');
+  };
+
+  // Filter items based on showCompleted prop
+  const filteredItems = showCompleted ? localItems : localItems.filter(item => !item.completed);
+
+  // Generate component classes
+  const todoClass = generateTodoClasses({ size, className, disabled });
+
+  return (
+    <div className={todoClass}>
+      {title && <h2 className="c-todo__title">{title}</h2>}
+
+      <form className="c-todo__form" onSubmit={handleFormSubmit}>
+        <div className="c-todo__form-group">
+          <input
+            type="text"
+            className="c-todo__input c-input"
+            placeholder={placeholder}
+            value={inputText}
+            onChange={e => setInputText(e.target.value)}
+            disabled={disabled}
+            aria-label="Add a new todo"
+          />
+          <button
+            type="submit"
+            className="c-todo__add-btn c-btn c-btn--primary"
+            disabled={disabled || !inputText.trim()}
+            aria-label="Add todo"
+          >
+            <Icon name="Plus" size="sm" />
+          </button>
+        </div>
+      </form>
+
+      <ul className="c-todo__list">
+        {filteredItems.length === 0 ? (
+          <li className="c-todo__empty">No items to display</li>
+        ) : (
+          filteredItems.map(item => (
+            <li key={item.id} className={generateItemClasses(item)}>
+              <div className="c-todo__item-content">
+                <label className="c-todo__checkbox-label">
+                  <input
+                    type="checkbox"
+                    className="c-todo__checkbox c-checkbox"
+                    checked={item.completed}
+                    onChange={() => handleToggle(item.id)}
+                    disabled={disabled}
+                    aria-label={`Mark "${item.text}" as ${item.completed ? 'incomplete' : 'complete'}`}
+                  />
+                  <span className="c-todo__item-text">{item.text}</span>
+                </label>
+
+                <button
+                  type="button"
+                  className="c-todo__delete-btn c-btn c-btn--error c-btn--sm"
+                  onClick={() => handleDelete(item.id)}
+                  disabled={disabled}
+                  aria-label={`Delete "${item.text}"`}
+                >
+                  <Icon name="Trash" size="sm" />
+                </button>
+              </div>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+};
+
+Todo.displayName = 'Todo';
+
+export type { TodoProps };
+
+export default Todo;

package/src/components/Todo/index.ts

@@ -0,0 +1 @@
+export { default } from './Todo';

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Toggle } from './Toggle';
+
+export default {
+  title: 'Components/Toggle',
+  component: Toggle,
+  argTypes: {
+    initialOn: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+  },
+} as Meta<typeof Toggle>;
+
+const Template: StoryFn<typeof Toggle> = args => (
+  <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
+    <Toggle {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  initialOn: false,
+  disabled: false,
+};
+
+export const InitiallyOn = Template.bind({});
+InitiallyOn.args = {
+  initialOn: true,
+  disabled: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  initialOn: false,
+  disabled: true,
+};
+
+export const DisabledOn = Template.bind({});
+DisabledOn.args = {
+  initialOn: true,
+  disabled: true,
+};

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { TOGGLE } from '../../lib/constants/components';
+
+export interface ToggleProps {
+  /**
+   * Whether the toggle is initially on
+   */
+  initialOn?: boolean;
+
+  /**
+   * Callback when the toggle is turned on
+   */
+  onToggleOn?: () => void;
+
+  /**
+   * Callback when the toggle is turned off
+   */
+  onToggleOff?: () => void;
+
+  /**
+   * Whether the toggle is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Additional CSS class for the toggle
+   */
+  className?: string;
+}
+
+/**
+ * Toggle component for switching between two states
+ */
+export const Toggle: React.FC<ToggleProps> = ({
+  initialOn = false,
+  onToggleOn,
+  onToggleOff,
+  disabled = false,
+  className = '',
+}) => {
+  const [isOn, setIsOn] = useState(initialOn);
+
+  // Handle toggle click
+  const handleClick = () => {
+    if (disabled) return;
+
+    const newState = !isOn;
+    setIsOn(newState);
+
+    if (newState) {
+      if (onToggleOn) onToggleOn();
+    } else {
+      if (onToggleOff) onToggleOff();
+    }
+  };
+
+  // Handle key down events
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  return (
+    <div
+      className={`c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      role="switch"
+      aria-checked={isOn}
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled}
+    >
+      <div className="c-toggle__switch"></div>
+    </div>
+  );
+};
+
+Toggle.displayName = 'Toggle';
+
+export default Toggle;

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: [
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+      ],
+      defaultValue: 'top',
+    },
+    trigger: {
+      control: { type: 'select' },
+      options: ['hover', 'click'],
+      defaultValue: 'hover',
+    },
+    delay: {
+      control: { type: 'number' },
+      defaultValue: 200,
+    },
+    offset: {
+      control: { type: 'number' },
+      defaultValue: 10,
+    },
+  },
+} as Meta<typeof Tooltip>;
+
+const Template: StoryFn<typeof Tooltip> = args => (
+  <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
+    <Tooltip {...args}>
+      <button className="c-btn c-btn--primary">Hover me</button>
+    </Tooltip>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  content: <p className="u-mb-0">This is a tooltip on top</p>,
+  position: 'top',
+  trigger: 'hover',
+};
+
+export const ClickTrigger = Template.bind({});
+ClickTrigger.args = {
+  content: <p className="u-mb-0">Click anywhere to close this tooltip</p>,
+  position: 'top',
+  trigger: 'click',
+};
+
+export const BottomPosition = Template.bind({});
+BottomPosition.args = {
+  content: <p className="u-mb-0">This tooltip appears below the trigger</p>,
+  position: 'bottom',
+};
+
+export const LeftPosition = Template.bind({});
+LeftPosition.args = {
+  content: <p className="u-mb-0">This tooltip appears to the left</p>,
+  position: 'left',
+};
+
+export const RightPosition = Template.bind({});
+RightPosition.args = {
+  content: <p className="u-mb-0">This tooltip appears to the right</p>,
+  position: 'right',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  content: <p className="u-mb-0">Tooltips work great with icons</p>,
+  position: 'top',
+  children: <i className="icon-lux-info" style={{ fontSize: '24px', cursor: 'pointer' }}></i>,
+};
+
+export const CustomDelay = Template.bind({});
+CustomDelay.args = {
+  content: <p className="u-mb-0">This tooltip has a longer delay</p>,
+  position: 'top',
+  delay: 500,
+};
+
+export const CustomOffset = Template.bind({});
+CustomOffset.args = {
+  content: <p className="u-mb-0">This tooltip has a larger offset from the trigger</p>,
+  position: 'top',
+  offset: 20,
+};
+
+export const RichContent = Template.bind({});
+RichContent.args = {
+  content: (
+    <div>
+      <h4 style={{ marginTop: 0, marginBottom: '8px' }}>Rich Tooltip Content</h4>
+      <ul style={{ margin: 0, paddingLeft: '16px' }}>
+        <li>Supports HTML content</li>
+        <li>Can include multiple elements</li>
+        <li>Helpful for complex information</li>
+      </ul>
+    </div>
+  ),
+  position: 'bottom',
+  trigger: 'click',
+  offset: 15,
+};