anima-ds-nucleus 1.0.0

package/src/components/Inputs/Select/Select.stories.jsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { Select } from './Select';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+  { value: 'option4', label: 'Option 4' },
+];
+
+export default {
+  title: 'Inputs/Select',
+  component: Select,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <Select
+        label="Select an option"
+        options={options}
+        value={value}
+        placeholder="Choose..."
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const WithError = {
+  args: {
+    label: 'Select',
+    options: options,
+    placeholder: 'Choose an option',
+    error: 'Please select an option',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Disabled Select',
+    options: options,
+    value: 'option1',
+    disabled: true,
+  },
+};
+
+export const Required = {
+  args: {
+    label: 'Required Select',
+    options: options,
+    placeholder: 'Choose an option',
+    required: true,
+  },
+};
+

package/src/components/Inputs/Switch/Switch.jsx

@@ -0,0 +1,44 @@
+export const Switch = ({
+  label,
+  checked = false,
+  disabled = false,
+  onChange,
+  className = '',
+  ...props
+}) => {
+  return (
+    <label className={`flex items-center ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${className}`}>
+      <div className="relative">
+        <input
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={onChange}
+          className="sr-only"
+          {...props}
+        />
+        <div
+          className={`
+            w-11 h-6 rounded-full transition-colors
+            ${checked ? 'bg-blue-600' : 'bg-gray-300'}
+            ${disabled ? 'opacity-50' : ''}
+          `}
+        >
+          <div
+            className={`
+              absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full
+              transition-transform duration-200 ease-in-out
+              ${checked ? 'transform translate-x-5' : ''}
+            `}
+          />
+        </div>
+      </div>
+      {label && (
+        <span className="ml-3 text-sm text-gray-700">{label}</span>
+      )}
+    </label>
+  );
+};
+
+export default Switch;
+

package/src/components/Inputs/Switch/Switch.stories.jsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Switch } from './Switch';
+
+export default {
+  title: 'Inputs/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Switch
+        label="Activar notificaciones"
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+    );
+  },
+};
+
+export const Checked = {
+  args: {
+    label: 'Switch activado',
+    checked: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Switch deshabilitado',
+    checked: false,
+    disabled: true,
+  },
+};
+
+export const DisabledChecked = {
+  args: {
+    label: 'Switch deshabilitado y activado',
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const WithoutLabel = {
+  args: {
+    checked: false,
+  },
+};
+

package/src/components/Inputs/Textarea/Textarea.jsx

@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+
+export const Textarea = ({
+  label,
+  placeholder,
+  error,
+  helperText,
+  disabled = false,
+  required = false,
+  rows = 4,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  const textareaClasses = `
+    w-full px-3 py-2 border rounded-lg
+    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+    disabled:bg-gray-100 disabled:cursor-not-allowed
+    resize-y
+    ${error ? 'border-red-500' : 'border-gray-300'}
+    ${className}
+  `;
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <textarea
+        rows={rows}
+        placeholder={placeholder || t('placeholder.search')}
+        disabled={disabled}
+        className={textareaClasses}
+        {...props}
+      />
+      {error && (
+        <p className="mt-1 text-sm text-red-600">{error}</p>
+      )}
+      {helperText && !error && (
+        <p className="mt-1 text-sm text-gray-500">{helperText}</p>
+      )}
+    </div>
+  );
+};
+
+export default Textarea;
+

package/src/components/Inputs/Textarea/Textarea.stories.jsx

@@ -0,0 +1,65 @@
+import { Textarea } from './Textarea';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+export default {
+  title: 'Inputs/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    label: 'Descripción',
+    placeholder: 'Escribe tu mensaje aquí...',
+    rows: 4,
+  },
+};
+
+export const WithError = {
+  args: {
+    label: 'Comentario',
+    placeholder: 'Escribe tu comentario',
+    error: 'Este campo es requerido',
+  },
+};
+
+export const WithHelperText = {
+  args: {
+    label: 'Mensaje',
+    placeholder: 'Escribe tu mensaje',
+    helperText: 'Máximo 500 caracteres',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Texto deshabilitado',
+    placeholder: 'Este campo está deshabilitado',
+    disabled: true,
+    defaultValue: 'Texto prellenado',
+  },
+};
+
+export const Required = {
+  args: {
+    label: 'Campo requerido',
+    placeholder: 'Este campo es obligatorio',
+    required: true,
+  },
+};
+
+export const Large = {
+  args: {
+    label: 'Mensaje largo',
+    placeholder: 'Escribe un mensaje largo',
+    rows: 8,
+  },
+};
+

package/src/components/Layout/Accordion/Accordion.jsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const Accordion = ({
+  items = [],
+  allowMultiple = false,
+  defaultOpen = [],
+  className = '',
+  ...props
+}) => {
+  const [openItems, setOpenItems] = useState(defaultOpen);
+
+  const toggleItem = (index) => {
+    if (allowMultiple) {
+      setOpenItems((prev) =>
+        prev.includes(index)
+          ? prev.filter((i) => i !== index)
+          : [...prev, index]
+      );
+    } else {
+      setOpenItems((prev) => (prev.includes(index) ? [] : [index]));
+    }
+  };
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className={`space-y-2 ${className}`} {...props}>
+      {items.map((item, index) => {
+        const isOpen = openItems.includes(index);
+        return (
+          <div key={index} className="border border-gray-200 rounded-lg overflow-hidden">
+            <button
+              onClick={() => toggleItem(index)}
+              className="w-full px-4 py-3 flex items-center justify-between bg-white hover:bg-gray-50 transition-colors"
+            >
+              <span className="font-medium text-gray-900">{item.title}</span>
+              <Icon
+                name="ChevronDownIcon"
+                className={`h-5 w-5 text-gray-500 transition-transform ${
+                  isOpen ? 'transform rotate-180' : ''
+                }`}
+              />
+            </button>
+            {isOpen && (
+              <div className="px-4 py-3 bg-gray-50 border-t border-gray-200">
+                {item.content}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Accordion;
+

package/src/components/Layout/Accordion/Accordion.stories.jsx

@@ -0,0 +1,55 @@
+import { Accordion } from './Accordion';
+
+const accordionItems = [
+  {
+    title: '¿Qué es este servicio?',
+    content: (
+      <p className="text-gray-600">
+        Este es un servicio que permite gestionar y organizar información de manera eficiente.
+      </p>
+    ),
+  },
+  {
+    title: '¿Cómo puedo empezar?',
+    content: (
+      <p className="text-gray-600">
+        Puedes empezar creando una cuenta y siguiendo el proceso de registro.
+      </p>
+    ),
+  },
+  {
+    title: '¿Hay algún costo?',
+    content: (
+      <p className="text-gray-600">
+        El servicio tiene un plan gratuito y planes premium disponibles.
+      </p>
+    ),
+  },
+];
+
+export default {
+  title: 'Layout/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    items: accordionItems,
+  },
+};
+
+export const AllowMultiple = {
+  args: {
+    items: accordionItems,
+    allowMultiple: true,
+  },
+};
+
+export const DefaultOpen = {
+  args: {
+    items: accordionItems,
+    defaultOpen: [0],
+  },
+};
+

package/src/components/Layout/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,49 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const Breadcrumbs = ({
+  items = [],
+  separator = '/',
+  className = '',
+  ...props
+}) => {
+  if (items.length === 0) return null;
+
+  return (
+    <nav className={className} aria-label="Breadcrumb" {...props}>
+      <ol className="flex items-center space-x-2">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li key={index} className="flex items-center">
+              {index > 0 && (
+                <span className="mx-2 text-gray-400">
+                  {separator === 'icon' ? (
+                    <Icon name="ChevronRightIcon" className="h-4 w-4" />
+                  ) : (
+                    separator
+                  )}
+                </span>
+              )}
+              {isLast ? (
+                <span className="text-gray-500 font-medium" aria-current="page">
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  href={item.href || '#'}
+                  className="text-gray-500 hover:text-gray-700"
+                  onClick={item.onClick}
+                >
+                  {item.label}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumbs;
+

package/src/components/Layout/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -0,0 +1,44 @@
+import { Breadcrumbs } from './Breadcrumbs';
+
+const breadcrumbItems = [
+  { label: 'Inicio', href: '#' },
+  { label: 'Productos', href: '#' },
+  { label: 'Electrónica', href: '#' },
+  { label: 'Smartphones' },
+];
+
+export default {
+  title: 'Layout/Breadcrumbs',
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    items: breadcrumbItems,
+  },
+};
+
+export const WithIconSeparator = {
+  args: {
+    items: breadcrumbItems,
+    separator: 'icon',
+  },
+};
+
+export const CustomSeparator = {
+  args: {
+    items: breadcrumbItems,
+    separator: '>',
+  },
+};
+
+export const Simple = {
+  args: {
+    items: [
+      { label: 'Inicio', href: '#' },
+      { label: 'Página actual' },
+    ],
+  },
+};
+

package/src/components/Layout/Breakpoint/Breakpoint.jsx

@@ -0,0 +1,35 @@
+export const Breakpoint = ({ children, min, max, className = '', ...props }) => {
+  if (!min && !max) {
+    return null;
+  }
+
+  const breakpointMap = {
+    'breakpoint-sm': { min: 'var(--breakpoint-sm)', max: 'var(--breakpoint-sm-max)' },
+    'breakpoint-md': { min: 'var(--breakpoint-md)', max: 'var(--breakpoint-md-max)' },
+    'breakpoint-base': { min: 'var(--breakpoint-base)', max: 'var(--breakpoint-base-max)' },
+    'breakpoint-lg': { min: 'var(--breakpoint-lg)', max: 'none' },
+  };
+
+  const breakpoint = breakpointMap[min] || breakpointMap[max];
+  if (!breakpoint) {
+    return null;
+  }
+
+  const style = {
+    '--breakpoint-min': breakpoint.min,
+    '--breakpoint-max': breakpoint.max === 'none' ? '9999px' : breakpoint.max,
+  };
+
+  return (
+    <div
+      className={`breakpoint-container ${className}`.trim()}
+      style={style}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Breakpoint;
+