this.gui 1.3.22 → 1.3.26

package/src/components/generics/Feedback/Callout.jsx

@@ -0,0 +1,92 @@
+import { useTheme } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+const variantStyles = {
+  warning: {
+    light: {
+      background: '#fff8e1',
+      border: '#f4b400',
+      color: '#f4b400',
+    },
+    dark: {
+      background: '#2c1a00',
+      border: '#f4b400',
+      color: '#f4b400',
+    },
+  },
+  info: {
+    light: {
+      background: '#e3f2fd',
+      border: '#2196f3',
+      color: '#0d47a1',
+    },
+    dark: {
+      background: '#0d2b45',
+      border: '#64b5f6',
+      color: '#90caf9',
+    },
+  },
+  success: {
+    light: {
+      background: '#e8f5e9',
+      border: '#4caf50',
+      color: '#2e7d32',
+    },
+    dark: {
+      background: '#1b3c28',
+      border: '#66bb6a',
+      color: '#a5d6a7',
+    },
+  },
+  alert: {
+    light: {
+      background: '#ffebee',
+      border: '#f44336',
+      color: '#b71c1c',
+    },
+    dark: {
+      background: '#3d0000',
+      border: '#ef5350',
+      color: '#ef9a9a',
+    },
+  },
+  neutral: {
+    light: {
+      background: '#f5f5f5',
+      border: '#9e9e9e',
+      color: '#424242',
+    },
+    dark: {
+      background: '#2c2c2c',
+      border: '#bdbdbd',
+      color: '#e0e0e0',
+    },
+  },
+};
+
+export default function Callout({
+  children = "This repository is in continuous development and may be unstable.",
+  variant = "warning", // default variant
+}) {
+  const theme = useTheme();
+  const mode = theme.palette.mode;
+  const styles = variantStyles[variant]?.[mode] || variantStyles.warning.light;
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: styles.background,
+        border: `1px solid ${styles.border}`,
+        color: styles.color,
+        padding: '10px 16px',
+        borderRadius: '4px',
+        fontWeight: 'bold',
+        marginBottom: '1.5rem',
+        textAlign: 'center',
+        fontSize: '0.9rem',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/generics/Layout/GridX.jsx

@@ -0,0 +1,29 @@
+import { Grid, Box, Typography } from '@mui/material';
+
+/**
+ * PageGrid
+ * Standardized grid container for organizing content in pages.
+ *
+ * Props:
+ * - items: Array of { title, content, xs, md }
+ * - spacing: Grid spacing (default 3)
+ * - sx: Additional styling for the Box wrapper
+ */
+export default function GridX({ items = [], spacing = 3, sx = {} }) {
+  return (
+    <Box sx={{ width: '100%', mt: 2, ...sx }}>
+      <Grid container spacing={spacing}>
+        {items.map((item, index) => (
+          <Grid item xs={item.xs || 12} md={item.md || 6} key={index}>
+            {item.title && (
+              <Typography variant="h6" sx={{ fontWeight: 500, mb: 1 }}>
+                {item.title}
+              </Typography>
+            )}
+            {item.content}
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

package/src/components/generics/Layout/Hero2.jsx

@@ -0,0 +1,132 @@
+// neurons.me — this.GUI
+// Generic Hero2 component with video background, overlay and titles
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Typography } from '@mui/material';
+
+/**
+ * Hero2
+ * A compact hero/cover with background video or image, an opacity layer, and title/subtitle.
+ *
+ * Props:
+ * - videoSrc: string URL for the background video.
+ * - poster: string URL for the poster/fallback image.
+ * - height: CSS size for hero height (e.g., '220px', '30vh'). Default: '220px'.
+ * - title: string | ReactNode, main title text.
+ * - subTitle: string | ReactNode, secondary text.
+ * - overlayOpacity: number [0..1], darkness of overlay. Default: 0.5.
+ * - overlayColor: CSS color of overlay. Default: '#000'.
+ * - overlayBlur: CSS blur amount for overlay backdrop. Default: '8px'.
+ * - overlayGradient: CSS gradient string for overlay background.
+ * - borderRadius: number | string for rounding container. Default: 12.
+ * - textColor: CSS color for text. Default: '#fff'.
+ * - align: 'center' | 'left' | 'right'. Default: 'center'.
+ * - autoPlay, loop, muted, playsInline: booleans for <video>. Defaults true/true/true/true.
+ * - objectFit: how the media covers the box. Default: 'cover'.
+ * - TitleComponent: optional component to render the title (defaults to GUI.TextTitle or 'h1').
+ * - children: extra nodes rendered under the subtitle (e.g., buttons).
+ */
+export default function Hero2({
+  videoSrc = '/apps/neurons1.mp4',
+  poster,
+  height = '220px',
+  title = 'Apps',
+  subTitle,
+  overlayOpacity = 0.5,
+  overlayColor = '#000',
+  overlayBlur = '8px',
+  overlayGradient,
+  borderRadius = 8,
+  textColor = '#fff',
+  align = 'center',
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  playsInline = true,
+  objectFit = 'cover',
+  TitleComponent,
+  children,
+}) {
+  const Title = TitleComponent || 'h1';
+  const alignMap = {
+    center: { justifyContent: 'center', alignItems: 'center', textAlign: 'center' },
+    left: { justifyContent: 'center', alignItems: 'flex-start', textAlign: 'left', paddingLeft: '1rem' },
+    right: { justifyContent: 'center', alignItems: 'flex-end', textAlign: 'right', paddingRight: '1rem' },
+  };
+
+  return (
+    <Box sx={{ position: 'relative', width: '100%', height, overflow: 'hidden', borderRadius, mb: '2rem' }}>
+      {/* Background Video */}
+      {videoSrc ? (
+        <Box component="video"
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          playsInline={playsInline}
+          poster={poster}
+          sx={{ width: '100%', height: '100%', objectFit }}>
+          <source src={videoSrc} type="video/mp4" />
+          {/* Fallback text */}
+          Tu navegador no soporta video.
+        </Box>
+      ) : (
+        // If no videoSrc, show poster as background
+        <Box sx={{ width: '100%', height: '100%', backgroundImage: poster ? `url(${poster})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center' }} />
+      )}
+
+      {/* Opacity Layer */}
+      <Box
+        sx={{
+          position: 'absolute', inset: 0, pointerEvents: 'none',
+          background: overlayGradient || overlayColor,
+          opacity: overlayOpacity,
+          backdropFilter: `blur(${overlayBlur})`,
+          WebkitBackdropFilter: `blur(${overlayBlur})`,
+        }}
+      />
+
+      {/* Foreground Content */}
+      <Box sx={{ position: 'absolute', inset: 0, display: 'flex', ...alignMap[align] }}>
+        <Box sx={{ color: textColor, textShadow: '0 2px 10px rgba(0,0,0,.6)' }}>
+          {title && (
+            <Title style={{ margin: 0, fontWeight: 800, fontSize: '2rem' }}>
+              {title}
+            </Title>
+          )}
+          {subTitle && (
+            <Typography variant="subtitle1" sx={{ mt: 0.5, opacity: 0.9 }}>
+              {subTitle}
+            </Typography>
+          )}
+          {children && (
+            <Box sx={{ mt: 1.25 }}>
+              {children}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+Hero2.propTypes = {
+  videoSrc: PropTypes.string,
+  poster: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  overlayOpacity: PropTypes.number,
+  overlayColor: PropTypes.string,
+  overlayBlur: PropTypes.string,
+  overlayGradient: PropTypes.string,
+  borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  textColor: PropTypes.string,
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  muted: PropTypes.bool,
+  playsInline: PropTypes.bool,
+  objectFit: PropTypes.string,
+  TitleComponent: PropTypes.elementType,
+  children: PropTypes.node,
+};

package/src/components/generics/Layout/PageContainer.jsx

@@ -0,0 +1,29 @@
+//components/Pages/PageContainer.jsx
+import { Box, useTheme, useMediaQuery } from "@mui/material";
+/**
+ * PageContainer
+ * Generic content wrapper for page layouts.
+ * Provides consistent padding and background only.
+ */
+export default function PageContainer({ children }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  return (
+    <Box
+      sx={{
+        px: isMobile ? 2 : 3,
+        pt: 3,
+        maxWidth: "987px",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        backgroundColor: theme.palette.background.default,
+        margin: "0 auto"
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/generics/Layout/PageDivider.jsx

@@ -0,0 +1,20 @@
+import { Divider } from "@mui/material";
+
+/**
+ * PageDivider Component
+ * A standardized divider to visually separate sections or content blocks.
+ *
+ * Props:
+ * - spacing: Adds vertical spacing above and below the divider (default: 2).
+ * - variant: MUI Divider variant, e.g., "fullWidth", "middle" (default: "fullWidth").
+ */
+export default function PageDivider({ spacing = 2, variant = "fullWidth" }) {
+  return (
+    <Divider
+      variant={variant}
+      sx={{
+        my: spacing,
+      }}
+    />
+  );
+}

package/src/components/generics/Layout/Section.jsx

@@ -0,0 +1,43 @@
+import { Box } from "@mui/material";
+
+/**
+ * Section
+ * Minimal container that respects parent width.
+ * Controls: width, padding, margins, background color.
+ */
+export default function Section({
+  children,
+  width = "100%",           // toma el ancho del padre por defecto
+  padding = 1.6,               // padding base (MUI spacing units)
+  paddingX,                  // opcional: override horizontal
+  paddingY,                  // opcional: override vertical
+  marginY = 3,               // separación vertical por defecto
+  marginTop,                 // override superior
+  marginBottom,              // override inferior
+  bgcolor = "background.paper",
+  sx = {},
+  ...props
+}) {
+  const px = paddingX ?? padding;
+  const py = paddingY ?? padding;
+  const mt = marginTop ?? marginY;
+  const mb = marginBottom ?? marginY;
+
+  return (
+    <Box
+      component="section"
+      sx={{
+        width,
+        px,
+        py,
+        mt,
+        mb,
+        bgcolor,
+        ...sx,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/generics/Layout/SectionHeader.jsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+/**
+ * SectionHeader
+ * Heading block to use inside Section (optional).
+ */
+export default function SectionHeader({ title, subtitle, sx = {} }) {
+  return (
+    <>
+      {title && (
+        <Typography variant="h4" sx={{ fontWeight: 600, mb: subtitle ? 0.5 : 1, ...sx }}>
+          {title}
+        </Typography>
+      )}
+      {subtitle && (
+        <Typography variant="body2" sx={{ color: "text.secondary", mb: 1 }}>
+          {subtitle}
+        </Typography>
+      )}
+    </>
+  );
+}

package/src/components/generics/Media/Img.jsx

@@ -0,0 +1,58 @@
+import { Box, Typography } from "@mui/material";
+/**
+ * PageImage Component
+ * Displays an image with optional alignment and caption.
+ *
+ * Props:
+ * - src: URL of the image (required).
+ * - alt: Alternative text for accessibility (default: "").
+ * - align: "left" | "center" | "right" (default: "center").
+ * - caption: Optional text displayed below the image.
+ * - maxWidth: Maximum width of the image (default: "100%").
+ */
+export default function Img({
+  src,
+  alt = "",
+  align = "center",
+  caption,
+  maxWidth = "100%",
+}) {
+  const justifyContent =
+    align === "left"
+      ? "flex-start"
+      : align === "right"
+      ? "flex-end"
+      : "center";
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: align }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent,
+          width: "100%",
+          mb: caption ? 1 : 0,
+        }}
+      >
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            maxWidth,
+            height: "auto",
+            borderRadius: "4px",
+          }}
+        />
+      </Box>
+      {caption && (
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{ textAlign: align }}
+        >
+          {caption}
+        </Typography>
+      )}
+    </Box>
+  );
+}

package/src/components/generics/Media/VideoEmbed.jsx

@@ -0,0 +1,51 @@
+import { Box } from "@mui/material";
+
+/**
+ * PageEmbed Component
+ * Embeds external content such as videos, maps, or other iframes with a responsive aspect ratio.
+ *
+ * Props:
+ * - src: The URL of the content to embed (required).
+ * - title: Accessible title for the iframe (required for accessibility).
+ * - ratio: Aspect ratio of the embed. Accepts "16:9", "4:3", or custom (default: "16:9").
+ * - allowFullScreen: Allows fullscreen mode (default: true).
+ */
+export default function VideoEmbed({
+  src,
+  title,
+  ratio = "16:9",
+  allowFullScreen = true,
+}) {
+  if (!src) return null;
+
+  const [w, h] = ratio.split(":").map(Number);
+  const paddingTop = (h / w) * 100;
+
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        width: "100%",
+        paddingTop: `${paddingTop}%`,
+        borderRadius: "6px",
+        overflow: "hidden",
+        boxShadow: 1,
+        my: 2,
+      }}
+    >
+      <iframe
+        src={src}
+        title={title}
+        allowFullScreen={allowFullScreen}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          border: 0,
+        }}
+      />
+    </Box>
+  );
+}

package/src/components/generics/Organization/TableOfContents.jsx

@@ -0,0 +1,51 @@
+import { List, ListItemButton, ListItemText, Typography } from "@mui/material";
+
+/**
+ * PageTableOfContents Component
+ * Generates a table of contents (TOC) from an array of headings.
+ *
+ * Props:
+ * - headings: Array of objects with { id, text, level }:
+ *   - id: The anchor or unique identifier (used for scrolling).
+ *   - text: The heading text to display.
+ *   - level: Heading level (1, 2, or 3). Used to indent items.
+ * - onNavigate: Optional callback when a TOC item is clicked (receives id).
+ */
+export default function TableOfContents({ headings = [], onNavigate }) {
+  if (!headings || headings.length === 0) return null;
+
+  const handleClick = (id) => {
+    if (onNavigate) {
+      onNavigate(id);
+    } else {
+      const el = document.getElementById(id);
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+
+  return (
+    <div style={{ padding: "1rem" }}>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Table of Contents
+      </Typography>
+      <List dense>
+        {headings.map((heading, index) => (
+          <ListItemButton
+            key={index}
+            sx={{
+              pl: heading.level === 1 ? 1 : heading.level === 2 ? 3 : 5,
+            }}
+            onClick={() => handleClick(heading.id)}
+          >
+            <ListItemText
+              primaryTypographyProps={{
+                variant: heading.level === 1 ? "body1" : "body2",
+              }}
+              primary={heading.text}
+            />
+          </ListItemButton>
+        ))}
+      </List>
+    </div>
+  );
+}

package/src/components/generics/Organization/Tabs.jsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Tabs as MuiTabs, Tab, Box, Typography } from "@mui/material";
+
+/**
+ * Tabs Component
+ * A simple tab system to switch between different content sections.
+ *
+ * Props:
+ * - tabs: Array of objects { label, content } (required).
+ * - initialIndex: Index of the tab to show first (default: 0).
+ * - variant: Tabs variant ("standard" | "scrollable" | "fullWidth"). Default: "standard".
+ */
+export default function Tabs({ tabs = [], initialIndex = 0, variant = "standard" }) {
+  const [value, setValue] = useState(initialIndex);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  if (!tabs || tabs.length === 0) {
+    return <Typography variant="body2">No tabs available.</Typography>;
+  }
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <MuiTabs
+        value={value}
+        onChange={handleChange}
+        variant={variant}
+        sx={{ mb: 2 }}
+      >
+        {tabs.map((tab, index) => (
+          <Tab key={index} label={tab.label} />
+        ))}
+      </MuiTabs>
+      <Box sx={{ p: 2 }}>
+        {tabs[value]?.content || (
+          <Typography variant="body2" color="text.secondary">
+            No content for this tab.
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/components/generics/Text/TextList.jsx

@@ -0,0 +1,41 @@
+import { List, ListItem, ListItemText } from "@mui/material";
+
+/**
+ * TextList Component
+ * Standardized list component for ordered or unordered lists.
+ *
+ * Props:
+ * - items: Array of strings or objects with { primary, secondary } (required).
+ * - type: "unordered" | "ordered" (default: "unordered").
+ * - dense: Reduces vertical spacing (default: false).
+ */
+export default function PageList({ items = [], type = "unordered", dense = false }) {
+  const isOrdered = type === "ordered";
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <List
+      dense={dense}
+      sx={{
+        listStyleType: isOrdered ? "decimal" : "disc",
+        pl: 3,
+        "& .MuiListItem-root": {
+          display: "list-item",
+          py: dense ? 0.25 : 0.5,
+        },
+      }}
+    >
+      {items.map((item, index) => {
+        const primary = typeof item === "string" ? item : item.primary;
+        const secondary = typeof item === "string" ? null : item.secondary;
+
+        return (
+          <ListItem key={index}>
+            <ListItemText primary={primary} secondary={secondary} />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}

package/src/components/generics/Text/TextParagraph.jsx

@@ -0,0 +1,28 @@
+import { Typography } from "@mui/material";
+
+/**
+ * TextParagraph Component
+ * Standardized paragraph text for pages with consistent spacing and alignment.
+ *
+ * Props:
+ * - children: Text or elements to display as paragraph content.
+ * - align: "left" | "center" | "right" | "justify" (default: "left").
+ * - variant: MUI Typography variant, e.g., "body1" | "body2" | "caption" (default: "body1").
+ * - gutterBottom: Adds bottom spacing (default: true).
+ */
+export default function PageParagraph({
+  children,
+  align = "left",
+  variant = "body1",
+  gutterBottom = true,
+}) {
+  return (
+    <Typography
+      variant={variant}
+      align={align}
+      sx={{ mb: gutterBottom ? 2 : 0 }}
+    >
+      {children}
+    </Typography>
+  );
+}

package/src/components/generics/Text/TextQuote.jsx

@@ -0,0 +1,23 @@
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+export default function TextQuote({ children }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  return (
+    <Box
+      component="blockquote"
+      sx={{
+        borderLeft: `4px solid ${theme.palette.primary.main}`,
+        padding: "1rem 1.5rem",
+        margin: "1.5rem 0",
+        fontStyle: "italic",
+        color: theme.palette.text.secondary,
+        "& p": { margin: 0 },
+      }}
+    >
+      <Typography variant="body1">{children}</Typography>
+    </Box>
+  );
+}