anteriority-ui 1.0.0

package/screens/components/MarkdownEditor/index.module.css

@@ -0,0 +1,192 @@
+.editorContainer {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.02);
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+  position: relative;
+}
+
+.editorContainer:focus-within {
+  border-color: #7c9cff;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background-color: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+}
+
+.toolbarGroup {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.toolbarDivider {
+  width: 1px;
+  height: 18px;
+  background-color: rgba(255, 255, 255, 0.12);
+  margin: 0 0.25rem;
+}
+
+.toolButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #9ba1ae;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.toolButton:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #e6e8ec;
+}
+
+.toolButton:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.modeToggle {
+  display: inline-flex;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 6px;
+  padding: 2px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.modeButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: #9ba1ae;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.modeButton:hover {
+  color: #e6e8ec;
+}
+
+.modeButtonActive {
+  background-color: rgba(124, 156, 255, 0.15);
+  color: var(--markdown-editor-active, #7c9cff);
+  font-weight: 600;
+}
+
+.contentArea {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+}
+
+.textarea {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  padding: 0.85rem 1rem;
+  background: transparent;
+  border: none;
+  color: #e6e8ec;
+  font-family: inherit;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  overflow-y: auto;
+}
+
+.textarea::placeholder {
+  color: #6b7280;
+}
+
+.splitArea {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  height: 100%;
+}
+
+.splitEditor {
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  height: 100%;
+}
+
+.previewPane {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  padding: 0.85rem 1.1rem;
+  background-color: rgba(0, 0, 0, 0.15);
+  overflow-y: auto;
+}
+
+.emptyPreview {
+  color: #6b7280;
+  font-style: italic;
+  font-size: 0.85rem;
+  padding-top: 0.5rem;
+}
+
+/* Barra de redimensionamiento estilo VS Code */
+.resizeHandle {
+  height: 14px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ns-resize;
+  background-color: rgba(255, 255, 255, 0.02);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  user-select: none;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  flex-shrink: 0;
+}
+
+.resizeHandle:hover {
+  background-color: rgba(124, 156, 255, 0.12);
+  border-top-color: rgba(124, 156, 255, 0.5);
+}
+
+.resizeHandleDragging {
+  background-color: rgba(124, 156, 255, 0.22);
+  border-top-color: #7c9cff;
+}
+
+.gripPill {
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.2);
+  transition: background-color 0.15s ease, width 0.15s ease;
+}
+
+.resizeHandle:hover .gripPill,
+.resizeHandleDragging .gripPill {
+  background-color: #7c9cff;
+  width: 48px;
+}

package/screens/components/MarkdownEditor/index.stories.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { MarkdownEditor } from './index';
+
+export default {
+  title: 'Components/MarkdownEditor',
+  component: MarkdownEditor,
+};
+
+const EditorWithState = (args) => {
+  const [value, setValue] = useState(args.value ?? '');
+  return (
+    <MarkdownEditor
+      {...args}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export const Default = {
+  render: (args) => <EditorWithState {...args} />,
+  args: {
+    value: '# Hello world\n\nStart writing **markdown** here.',
+    placeholder: 'Write your markdown here...',
+    defaultHeight: 320,
+  },
+};
+
+export const Empty = {
+  render: (args) => <EditorWithState {...args} />,
+  args: {
+    value: '',
+    placeholder: 'Type something...',
+    defaultHeight: 260,
+  },
+};
+
+export const CustomLabels = {
+  render: (args) => <EditorWithState {...args} />,
+  args: {
+    value: '## Título\n\nContenido de ejemplo con **negrita**.',
+    placeholder: 'Escribe aquí...',
+    defaultHeight: 320,
+    labels: {
+      editorTab: 'Editar',
+      splitTab: 'Dividido',
+      previewTab: 'Vista previa',
+    },
+  },
+};

package/screens/components/Material-UI/Components/InputWithIcon/index.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Input from '@mui/material/Input';
+import InputLabel from '@mui/material/InputLabel';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormControl from '@mui/material/FormControl';
+import MuiTextField from '@mui/material/TextField';
+
+export default function InputWithIcon({
+  label,
+  value,
+  onChange,
+  icon: Icon,
+  placeholder,
+  type = 'text',
+  variant = 'outlined', // 'standard' | 'outlined' | 'row' | 'filled'
+  fullWidth = true,
+  iconColor = 'black',
+  ...props
+}) {
+  const adornmentId = React.useId();
+
+  if (variant === 'standard') {
+    return (
+      <FormControl variant="standard" fullWidth={fullWidth} sx={{ m: 0 }}>
+        {label && <InputLabel htmlFor={adornmentId}>{label}</InputLabel>}
+        <Input
+          id={adornmentId}
+          type={type}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          startAdornment={
+            Icon && (
+              <InputAdornment position="start">
+                <Icon size={20} style={{ color: iconColor }} />
+              </InputAdornment>
+            )
+          }
+          {...props}
+        />
+      </FormControl>
+    );
+  }
+
+  if (variant === 'row') {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'flex-end', width: fullWidth ? '100%' : 'auto', gap: 1 }}>
+        {Icon && <Icon size={20} style={{ color: iconColor, marginBottom: '4px' }} />}
+        <MuiTextField
+          type={type}
+          label={label}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          variant="standard"
+          fullWidth={fullWidth}
+          {...props}
+        />
+      </Box>
+    );
+  }
+
+  // Default: outlined or filled
+  return (
+    <MuiTextField
+      type={type}
+      label={label}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      variant={variant === 'filled' ? 'filled' : 'outlined'}
+      size="small"
+      fullWidth={fullWidth}
+      slotProps={{
+        input: {
+          startAdornment: Icon && (
+            <InputAdornment position="start">
+              <Icon size={18} style={{ color: 'currentColor' }} />
+            </InputAdornment>
+          ),
+        },
+      }}
+      {...props}
+    />
+  );
+}

package/screens/components/Material-UI/Components/InputWithIcon/index.stories.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Mail, Search as SearchIcon, User } from 'lucide-react';
+import InputWithIcon from './index';
+
+export default {
+  title: 'Components/Material-UI/InputWithIcon',
+  component: InputWithIcon,
+};
+
+const ControlledTemplate = (args) => {
+  const [value, setValue] = useState(args.value || '');
+  return (
+    <InputWithIcon
+      {...args}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export const Outlined = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Correo electrónico',
+    placeholder: 'usuario@correo.com',
+    icon: Mail,
+    variant: 'outlined',
+  },
+};
+
+export const Standard = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Usuario',
+    placeholder: 'Escribe tu nombre...',
+    icon: User,
+    variant: 'standard',
+  },
+};
+
+export const Row = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Buscar',
+    placeholder: 'Buscar...',
+    icon: SearchIcon,
+    variant: 'row',
+  },
+};

package/screens/components/Material-UI/Components/MenuPopover/index.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { ChevronRight } from 'lucide-react';
+import Button from '../../../Button';
+
+export default function MenuPopover({
+  item,
+  styles = {},
+  renderIcon,
+  onNavigate,
+  isCollapsed,
+  children,
+  triggerProps = {},
+  bgColor = '#ffffffff',
+  textColor = '#000000ff',
+  dangerColor = '#ef4444',
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleItemClick = (subItem) => {
+    handleClose();
+    if (onNavigate) {
+      onNavigate(subItem);
+    }
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Button
+        id={`menu-button-${item.label}`}
+        variant={Button.VARIANTS.GHOST}
+        color="inherit"
+        aria-controls={open ? `menu-${item.label}` : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        title={isCollapsed ? item.label : undefined}
+        {...triggerProps}
+        className={`${styles.navItem || ''} ${triggerProps.className || ''}`}
+        style={{ justifyContent: isCollapsed ? 'center' : 'flex-start', textTransform: 'none', ...triggerProps.style }}
+        onClick={handleClick}
+      >
+        {renderIcon(item.icon, styles.icon)}
+        {!isCollapsed && <span style={{ flex: 1, textAlign: 'left' }}>{item.label}</span>}
+        {!isCollapsed && (
+          <span style={{ display: 'flex', alignItems: 'center' }}>
+            <ChevronRight size={16} />
+          </span>
+        )}
+      </Button>
+
+      <Menu
+        id={`menu-${item.label}`}
+        aria-labelledby={`menu-button-${item.label}`}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        slotProps={{
+          paper: {
+            style: {
+              backgroundColor: bgColor,
+              color: textColor,
+              borderRadius: '8px',
+              marginTop: '4px',
+              boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+              minWidth: '200px',
+              border: '1px solid rgba(0, 0, 0, 0.08)'
+            }
+          }
+        }}
+      >
+        {children ? (
+          typeof children === 'function' ? children({ handleClose }) : children
+        ) : (
+          item.subItems && item.subItems.map((subIt) => {
+            const isDanger = subIt.isDanger || subIt.label?.toLowerCase().includes('eliminar') || subIt.label?.toLowerCase().includes('cancelar');
+            return (
+              <MenuItem
+                key={subIt.label}
+                onClick={() => handleItemClick(subIt)}
+                sx={{
+                  fontSize: '0.9rem',
+                  py: 1.25,
+                  px: 2,
+                  color: isDanger ? `${dangerColor} !important` : textColor,
+                  fontWeight: isDanger ? 500 : 400,
+                  '&:hover': {
+                    backgroundColor: isDanger ? 'rgba(239, 68, 68, 0.08)' : '#b3b3b44b'
+                  }
+                }}
+              >
+                {subIt.label}
+              </MenuItem>
+            );
+          })
+        )}
+      </Menu>
+    </div>
+  );
+}

package/screens/components/Material-UI/Components/MenuPopover/index.stories.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Settings } from 'lucide-react';
+import MenuPopover from './index';
+
+export default {
+  title: 'Components/Material-UI/MenuPopover',
+  component: MenuPopover,
+};
+
+const item = {
+  label: 'Opciones',
+  icon: Settings,
+  subItems: [
+    { label: 'Editar' },
+    { label: 'Duplicar' },
+    { label: 'Eliminar', isDanger: true },
+  ],
+};
+
+export const Default = {
+  args: {
+    item,
+    renderIcon: (Icon) => (Icon ? <Icon size={18} /> : null),
+    onNavigate: (subItem) => console.log('navigate to', subItem),
+    isCollapsed: false,
+  },
+};
+
+export const Collapsed = {
+  args: {
+    item,
+    renderIcon: (Icon) => (Icon ? <Icon size={18} /> : null),
+    onNavigate: (subItem) => console.log('navigate to', subItem),
+    isCollapsed: true,
+  },
+};

package/screens/components/Material-UI/Components/MultilinePlaceholder/index.jsx

@@ -0,0 +1,44 @@
+import React, { forwardRef } from 'react';
+import MuiTextField from '@mui/material/TextField';
+import { formatHighlightedText } from '../../../GreenHighlight/utils';
+
+const MultilinePlaceholder = forwardRef(({ 
+  label, 
+  value, 
+  onChange, 
+  error, 
+  helperText,
+  rows = 4,
+  maxRows,
+  variant = "outlined",
+  size = "small",
+  fullWidth = true,
+  placeholder,
+  bgColor = '#fff',
+  ...props
+}, ref) => {
+  const formattedLabel = typeof label === 'string' ? formatHighlightedText(label) : label;
+  const displayHelperText = typeof helperText === 'string' ? formatHighlightedText(helperText) : helperText;
+
+  return (
+    <MuiTextField
+      label={formattedLabel}
+      value={value}
+      onChange={onChange}
+      error={!!error}
+      helperText={error || displayHelperText}
+      variant={variant}
+      size={size}
+      fullWidth={fullWidth}
+      placeholder={placeholder}
+      multiline
+      rows={rows}
+      maxRows={maxRows}
+      sx={{ m: 0, '& .MuiInputBase-root': { backgroundColor: bgColor } }}
+      inputRef={ref}
+      {...props}
+    />
+  );
+});
+
+export default MultilinePlaceholder;

package/screens/components/Material-UI/Components/MultilinePlaceholder/index.stories.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import MultilinePlaceholder from './index';
+
+export default {
+  title: 'Components/Material-UI/MultilinePlaceholder',
+  component: MultilinePlaceholder,
+};
+
+const ControlledTemplate = (args) => {
+  const [value, setValue] = useState(args.value || '');
+  return (
+    <MultilinePlaceholder
+      {...args}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export const Default = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Descripción',
+    placeholder: 'Escribe una descripción...',
+    rows: 4,
+  },
+};
+
+export const WithHelperText = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Notas',
+    helperText: 'Opcional, máximo 500 caracteres.',
+    rows: 3,
+  },
+};
+
+export const WithError = {
+  render: (args) => <ControlledTemplate {...args} />,
+  args: {
+    label: 'Comentarios',
+    error: 'Este campo es obligatorio',
+    rows: 3,
+  },
+};

package/screens/components/Material-UI/Components/Paginador/index.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import Pagination from '@mui/material/Pagination';
+import Box from '@mui/material/Box';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+
+export default function Paginador({ 
+  count = 10, 
+  page = 1, 
+  onChange, 
+  color = 'primary', 
+  size = 'medium',
+  disabled = false,
+  variant = 'outlined',
+  shape = 'rounded',
+  pageSize,
+  pageSizeOptions = [5, 10, 20, 50],
+  onPageSizeChange,
+  ...props 
+}) {
+  return (
+    <Box 
+      sx={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: pageSize && onPageSizeChange ? 'space-between' : 'flex-end', 
+        width: '100%', 
+        mt: 3, 
+        mb: 1 
+      }}
+    >
+      {/* ado Izquierdo: Select de Filas */}
+      {pageSize && onPageSizeChange ? (
+        <FormControl size="small" variant="outlined" sx={{ minWidth: 85 }}>
+          <InputLabel id="page-size-select-label">Filas</InputLabel>
+          <Select
+            labelId="page-size-select-label"
+            id="page-size-select"
+            value={pageSize}
+            label="Filas"
+            onChange={(e) => onPageSizeChange(Number(e.target.value))}
+            disabled={disabled} 
+            MenuProps={{
+              anchorOrigin: {
+                vertical: 'top',
+                horizontal: 'left',
+              },
+              transformOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left',
+              },
+            }}
+          >
+            {pageSizeOptions.map((option) => (
+              <MenuItem key={option} value={option}>
+                {option}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      ) : <div />}
+
+      {/* Lado Derecho: Controles de Paginación */}
+      <Pagination 
+        count={count} 
+        page={page} 
+        onChange={onChange} 
+        color={color} 
+        size={size}
+        disabled={disabled}
+        variant={variant}
+        shape={shape}
+        {...props} 
+      />
+    </Box>
+  );
+}