anima-ds-nucleus 1.0.0

package/src/components/DataDisplay/Timeline/Timeline.stories.jsx

@@ -0,0 +1,64 @@
+import { Timeline } from './Timeline';
+
+const timelineItems = [
+  {
+    date: '15 de Enero 2024',
+    title: 'Pedido creado',
+    description: 'El pedido #12345 ha sido creado exitosamente.',
+    icon: 'CheckCircleIcon',
+  },
+  {
+    date: '16 de Enero 2024',
+    title: 'Pedido confirmado',
+    description: 'El pedido ha sido confirmado y está en proceso.',
+    icon: 'CheckCircleIcon',
+  },
+  {
+    date: '17 de Enero 2024',
+    title: 'En tránsito',
+    description: 'El pedido ha sido enviado y está en camino.',
+    icon: 'CheckCircleIcon',
+  },
+  {
+    date: '18 de Enero 2024',
+    title: 'Entregado',
+    description: 'El pedido ha sido entregado exitosamente.',
+    icon: 'CheckCircleIcon',
+  },
+];
+
+export default {
+  title: 'DataDisplay/Timeline',
+  component: Timeline,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    items: timelineItems,
+  },
+};
+
+export const Simple = {
+  args: {
+    items: [
+      {
+        date: 'Hoy',
+        title: 'Evento 1',
+        description: 'Descripción del primer evento',
+      },
+      {
+        date: 'Ayer',
+        title: 'Evento 2',
+        description: 'Descripción del segundo evento',
+      },
+    ],
+  },
+};
+
+export const WithoutIcons = {
+  args: {
+    items: timelineItems.map(({ icon, ...item }) => item),
+  },
+};
+

package/src/components/Inputs/Checkbox/Checkbox.jsx

@@ -0,0 +1,27 @@
+export const Checkbox = ({
+  label,
+  checked = false,
+  disabled = false,
+  onChange,
+  className = '',
+  ...props
+}) => {
+  return (
+    <label className={`flex items-center ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${className}`}>
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+        {...props}
+      />
+      {label && (
+        <span className="ml-2 text-sm text-gray-700">{label}</span>
+      )}
+    </label>
+  );
+};
+
+export default Checkbox;
+

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

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Checkbox } from './Checkbox';
+
+export default {
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Checkbox
+        label="Accept terms and conditions"
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+    );
+  },
+};
+
+export const Checked = {
+  args: {
+    label: 'Checked by default',
+    checked: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Disabled checkbox',
+    checked: false,
+    disabled: true,
+  },
+};
+
+export const DisabledChecked = {
+  args: {
+    label: 'Disabled and checked',
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const WithoutLabel = {
+  args: {
+    checked: false,
+  },
+};
+

package/src/components/Inputs/DatePicker/DatePicker.jsx

@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const DatePicker = ({
+  label,
+  value,
+  error,
+  helperText,
+  disabled = false,
+  required = false,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  const inputClasses = `
+    w-full px-3 py-2 pl-10 border rounded-lg
+    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+    disabled:bg-gray-100 disabled:cursor-not-allowed
+    ${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>
+      )}
+      <div className="relative">
+        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <Icon name="CalendarIcon" className="h-5 w-5 text-gray-400" />
+        </div>
+        <input
+          type="date"
+          value={value}
+          disabled={disabled}
+          className={inputClasses}
+          {...props}
+        />
+      </div>
+      {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 DatePicker;
+

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

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { DatePicker } from './DatePicker';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+export default {
+  title: 'Inputs/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <DatePicker
+        label="Fecha de nacimiento"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const WithError = {
+  args: {
+    label: 'Fecha',
+    error: 'Por favor selecciona una fecha válida',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Fecha deshabilitada',
+    value: '2024-01-01',
+    disabled: true,
+  },
+};
+
+export const Required = {
+  args: {
+    label: 'Fecha requerida',
+    required: true,
+  },
+};
+

package/src/components/Inputs/FileUpload/FileUpload.jsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const FileUpload = ({
+  label,
+  accept,
+  multiple = false,
+  error,
+  helperText,
+  disabled = false,
+  required = false,
+  onFileChange,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const [files, setFiles] = useState([]);
+
+  const handleChange = (e) => {
+    const selectedFiles = Array.from(e.target.files);
+    setFiles(selectedFiles);
+    if (onFileChange) {
+      onFileChange(selectedFiles);
+    }
+  };
+
+  const removeFile = (index) => {
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    if (onFileChange) {
+      onFileChange(newFiles);
+    }
+  };
+
+  return (
+    <div className={`w-full ${className}`}>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-gray-400 transition-colors">
+        <div className="space-y-1 text-center">
+          <Icon name="CloudArrowUpIcon" className="mx-auto h-12 w-12 text-gray-400" />
+          <div className="flex text-sm text-gray-600">
+            <label
+              htmlFor="file-upload"
+              className={`relative cursor-pointer rounded-md font-medium ${
+                disabled ? 'text-gray-400 cursor-not-allowed' : 'text-blue-600 hover:text-blue-500'
+              } focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500`}
+            >
+              <span>{multiple ? 'Sube archivos' : 'Sube un archivo'}</span>
+              <input
+                id="file-upload"
+                name="file-upload"
+                type="file"
+                className="sr-only"
+                accept={accept}
+                multiple={multiple}
+                disabled={disabled}
+                onChange={handleChange}
+                {...props}
+              />
+            </label>
+            <p className="pl-1">o arrastra y suelta</p>
+          </div>
+          <p className="text-xs text-gray-500">PNG, JPG, GIF hasta 10MB</p>
+        </div>
+      </div>
+      {files.length > 0 && (
+        <div className="mt-4 space-y-2">
+          {files.map((file, index) => (
+            <div
+              key={index}
+              className="flex items-center justify-between p-2 bg-gray-50 rounded-lg"
+            >
+              <div className="flex items-center space-x-2">
+                <Icon name="DocumentIcon" className="h-5 w-5 text-gray-400" />
+                <span className="text-sm text-gray-700">{file.name}</span>
+                <span className="text-xs text-gray-500">
+                  ({(file.size / 1024).toFixed(2)} KB)
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={() => removeFile(index)}
+                className="text-red-600 hover:text-red-800"
+              >
+                <Icon name="XMarkIcon" className="h-5 w-5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      {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 FileUpload;
+

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

@@ -0,0 +1,52 @@
+import { FileUpload } from './FileUpload';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+export default {
+  title: 'Inputs/FileUpload',
+  component: FileUpload,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    label: 'Subir archivo',
+    accept: 'image/*',
+  },
+};
+
+export const Multiple = {
+  args: {
+    label: 'Subir múltiples archivos',
+    accept: 'image/*',
+    multiple: true,
+  },
+};
+
+export const WithError = {
+  args: {
+    label: 'Subir archivo',
+    error: 'El archivo es demasiado grande',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Subir archivo',
+    disabled: true,
+  },
+};
+
+export const Required = {
+  args: {
+    label: 'Subir archivo requerido',
+    required: true,
+  },
+};
+

package/src/components/Inputs/Input/Input.jsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next';
+
+export const Input = ({
+  label,
+  placeholder,
+  type = 'text',
+  error,
+  helperText,
+  disabled = false,
+  required = false,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  const inputClasses = `
+    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
+    ${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>
+      )}
+      <input
+        type={type}
+        placeholder={placeholder || t('placeholder.search')}
+        disabled={disabled}
+        className={inputClasses}
+        {...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 Input;
+

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

@@ -0,0 +1,63 @@
+import { Input } from './Input';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+export default {
+  title: 'Inputs/Input',
+  component: Input,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Label',
+    placeholder: 'Enter text...',
+  },
+};
+
+export const WithError = {
+  args: {
+    label: 'Email',
+    type: 'email',
+    placeholder: 'Enter your email',
+    error: 'Please enter a valid email address',
+  },
+};
+
+export const WithHelperText = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter password',
+    helperText: 'Must be at least 8 characters',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Disabled Input',
+    placeholder: 'This input is disabled',
+    disabled: true,
+  },
+};
+
+export const Required = {
+  args: {
+    label: 'Required Field',
+    placeholder: 'This field is required',
+    required: true,
+  },
+};
+

package/src/components/Inputs/RadioButton/RadioButton.jsx

@@ -0,0 +1,31 @@
+export const RadioButton = ({
+  label,
+  name,
+  value,
+  checked = false,
+  disabled = false,
+  onChange,
+  className = '',
+  ...props
+}) => {
+  return (
+    <label className={`flex items-center ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${className}`}>
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        {...props}
+      />
+      {label && (
+        <span className="ml-2 text-sm text-gray-700">{label}</span>
+      )}
+    </label>
+  );
+};
+
+export default RadioButton;
+

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

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { RadioButton } from './RadioButton';
+
+export default {
+  title: 'Inputs/RadioButton',
+  component: RadioButton,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => {
+    const [selected, setSelected] = useState('option1');
+    return (
+      <div className="space-y-2">
+        <RadioButton
+          name="options"
+          value="option1"
+          label="Option 1"
+          checked={selected === 'option1'}
+          onChange={(e) => setSelected(e.target.value)}
+        />
+        <RadioButton
+          name="options"
+          value="option2"
+          label="Option 2"
+          checked={selected === 'option2'}
+          onChange={(e) => setSelected(e.target.value)}
+        />
+        <RadioButton
+          name="options"
+          value="option3"
+          label="Option 3"
+          checked={selected === 'option3'}
+          onChange={(e) => setSelected(e.target.value)}
+        />
+      </div>
+    );
+  },
+};
+
+export const Single = {
+  args: {
+    name: 'single',
+    value: 'value1',
+    label: 'Single Radio Button',
+    checked: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    name: 'disabled',
+    value: 'value1',
+    label: 'Disabled Radio Button',
+    checked: false,
+    disabled: true,
+  },
+};
+

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

@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next';
+
+export const Select = ({
+  label,
+  options = [],
+  value,
+  placeholder,
+  error,
+  helperText,
+  disabled = false,
+  required = false,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  const selectClasses = `
+    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
+    ${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>
+      )}
+      <select
+        value={value}
+        disabled={disabled}
+        className={selectClasses}
+        {...props}
+      >
+        {placeholder && (
+          <option value="">{placeholder || t('placeholder.select')}</option>
+        )}
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {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 Select;
+