this.gui 1.0.18 → 1.1.0

package/src/stories/Theme/SpacingAndRadius.stories.jsx

@@ -0,0 +1,129 @@
+// src/stories/Theme/SpacingAndRadius.stories.jsx
+import { Box, Stack, Typography, Paper, Divider } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+export default {
+  title: 'Theme/Spacing & Radius',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+// ————————————————————————————————————————————————
+// Helpers
+// ————————————————————————————————————————————————
+const Row = ({ label, children, hint }) => (
+  <Stack direction="row" alignItems="center" spacing={2} sx={{ py: 1 }}>
+    <Box sx={{ width: 140 }}>
+      <Typography variant="body2" sx={{ fontWeight: 600 }}>{label}</Typography>
+      {hint && (
+        <Typography variant="caption" sx={{ opacity: 0.7 }}>{hint}</Typography>
+      )}
+    </Box>
+    <Box sx={{ flex: 1 }}>{children}</Box>
+  </Stack>
+);
+
+// ————————————————————————————————————————————————
+// Spacing scale preview (0..8)
+// ————————————————————————————————————————————————
+function SpacingScaleView() {
+  const theme = useTheme();
+  // Build a scale of 0..8 using theme.spacing(n)
+  const scale = Array.from({ length: 9 }, (_, i) => i);
+
+  return (
+    <Paper elevation={0} sx={{ p: 3 }}>
+      <Typography variant="h4" gutterBottom>Spacing</Typography>
+      <Typography variant="body2" sx={{ mb: 2, opacity: 0.8 }}>
+        The spacing function multiplies the base unit and returns pixel values. Below you can see
+        the vertical size for <code>theme.spacing(n)</code> with <code>n = 0..8</code>.
+      </Typography>
+
+      <Divider sx={{ mb: 2 }} />
+
+      <Stack>
+        {scale.map((n) => {
+          const px = typeof theme.spacing === 'function' ? theme.spacing(n) : `${Number(theme.spacing || 8) * n}px`;
+          const minH = n === 0 ? 1 : undefined;
+          return (
+            <Row key={n} label={`spacing(${n})`} hint={px}>
+              <Box
+                sx={{
+                  height: px,
+                  minHeight: minH,
+                  width: '100%',
+                  background:
+                    'linear-gradient(90deg, rgba(0,0,0,0.12) 0 8px, transparent 8px) 0 0/16px 100% no-repeat',
+                  borderRadius: 1,
+                }}
+              />
+            </Row>
+          );
+        })}
+      </Stack>
+    </Paper>
+  );
+}
+
+// ————————————————————————————————————————————————
+// Radius showcase
+// ————————————————————————————————————————————————
+function RadiusShowcaseView() {
+  const theme = useTheme();
+  const base = Number(theme.shape?.borderRadius ?? 10);
+  const variants = [
+    { label: '0 (square)', value: 0 },
+    { label: 'sm (½× base)', value: Math.round(base * 0.5) },
+    { label: 'md (base)', value: base },
+    { label: 'lg (1.5× base)', value: Math.round(base * 1.5) },
+    { label: 'xl (2× base)', value: Math.round(base * 2) },
+  ];
+
+  return (
+    <Paper elevation={0} sx={{ p: 3 }}>
+      <Typography variant="h4" gutterBottom>Radius</Typography>
+      <Typography variant="body2" sx={{ mb: 2, opacity: 0.8 }}>
+        Shape radius is driven by the global token <code>radius.md</code>. Below are a few
+        derived sizes relative to the current base.
+      </Typography>
+
+      <Divider sx={{ mb: 2 }} />
+
+      <Stack direction="row" spacing={2} useFlexGap flexWrap="wrap">
+        {variants.map((r) => (
+          <Stack key={r.label} spacing={1} alignItems="center" sx={{ width: 160 }}>
+            <Box
+              sx={{
+                width: '100%',
+                height: 72,
+                borderRadius: `${r.value}px`,
+                border: (t) => `1px solid ${t.palette.divider}`,
+                background: (t) => (t.palette.mode === 'dark' ? t.palette.background.paper : '#fff'),
+              }}
+            />
+            <Typography variant="body2" sx={{ fontWeight: 600 }}>{r.label}</Typography>
+            <Typography variant="caption" sx={{ opacity: 0.7 }}>{r.value}px</Typography>
+          </Stack>
+        ))}
+      </Stack>
+    </Paper>
+  );
+}
+
+// ————————————————————————————————————————————————
+// Stories
+// ————————————————————————————————————————————————
+export const Spacing = () => (
+  <Box sx={{ p: { xs: 2, md: 4 } }}>
+    <SpacingScaleView />
+  </Box>
+);
+Spacing.storyName = 'Spacing scale';
+
+export const Radius = () => (
+  <Box sx={{ p: { xs: 2, md: 4 } }}>
+    <RadiusShowcaseView />
+  </Box>
+);
+Radius.storyName = 'Border radius';

package/src/stories/Theme/Typography.stories.jsx

@@ -0,0 +1,211 @@
+// src/stories/Theme/Typography.stories.jsx
+import { Box, Typography, Paper, Divider, Stack, Chip } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+/**
+ * Small helper to render a sample block for a variant
+ */
+const TypeRow = ({ variant, sample = 'The quick brown fox jumps over the lazy dog 1234', extra }) => {
+  const theme = useTheme();
+  const v = theme.typography?.[variant] || {};
+  const lineHeight = typeof v.lineHeight === 'number' ? v.lineHeight : String(v.lineHeight || '');
+  const fontSize = v.fontSize || '';
+  const weight = v.fontWeight || '';
+
+  return (
+    <Paper
+      variant="outlined"
+      sx={{
+        p: 1.25,
+        borderColor: theme.custom?.border || theme.palette.divider,
+        bgcolor: 'background.paper',
+        minWidth: 280,
+        flex: '1 1 320px',
+      }}
+    >
+      <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 700 }}>
+        {variant}
+      </Typography>
+      <Typography variant={variant} sx={{ mt: 0.5 }}>
+        {sample}
+      </Typography>
+      <Divider sx={{ my: 1 }} />
+      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+        <strong>font-size:</strong> {fontSize}{'  '}
+        <strong>line-height:</strong> {lineHeight}{'  '}
+        <strong>font-weight:</strong> {weight || '—'}
+        {extra ? <> · {extra}</> : null}
+      </Typography>
+    </Paper>
+  );
+};
+
+const Section = ({ title, hint, children }) => (
+  <Box sx={{ my: 3 }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+      <Typography variant="h5" sx={{ fontWeight: 700 }}>
+        {title}
+      </Typography>
+      {hint ? <Chip size="small" label={hint} /> : null}
+    </Box>
+    <Divider sx={{ my: 1.5 }} />
+    {children}
+  </Box>
+);
+
+/**
+ * Preview of the main typography scale coming from the active theme.
+ * Uses whatever your token engine compiled into theme.typography.
+ */
+function TypographyScale() {
+  const theme = useTheme();
+
+  const variants = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'subtitle1',
+    'body1',
+    'body2',
+    'button',
+  ];
+
+  return (
+    <Box sx={{ p: 2, bgcolor: 'background.default', color: 'text.primary' }}>
+      <Section title="Font Family">
+        <Typography variant="body2">
+          <strong>theme.typography.fontFamily:</strong>{' '}
+          <code>{theme.typography?.fontFamily}</code>
+        </Typography>
+      </Section>
+
+      <Section title="Variants">
+        <Stack direction="row" spacing={1.25} useFlexGap flexWrap="wrap">
+          {variants.map((v) => (
+            <TypeRow key={v} variant={v} />
+          ))}
+        </Stack>
+      </Section>
+    </Box>
+  );
+}
+
+/**
+ * Extra details from tokens exposed in the runtime:
+ * - lineHeights scale (if defined in theme.typography.lineHeights)
+ * - weights (if your tokens encode them)
+ */
+function TypographyDetails() {
+  const theme = useTheme();
+  const lh = theme.typography?.lineHeights || {};
+  const weights = {
+    bold: theme.typography?.fontWeightBold,
+    medium: theme.typography?.fontWeightMedium,
+    regular: theme.typography?.fontWeightRegular,
+  };
+
+  return (
+    <Box sx={{ p: 2, bgcolor: 'background.default', color: 'text.primary' }}>
+      <Section title="Line Heights Scale" hint="From tokens → theme.typography.lineHeights">
+        {Object.keys(lh).length ? (
+          <Stack direction="row" spacing={1.25} useFlexGap flexWrap="wrap">
+            {Object.entries(lh).map(([k, v]) => (
+              <Paper
+                key={k}
+                variant="outlined"
+                sx={{
+                  p: 1.25,
+                  minWidth: 160,
+                  borderColor: theme.custom?.border || theme.palette.divider,
+                }}
+              >
+                <Typography variant="body2" sx={{ fontWeight: 700 }}>
+                  {k}
+                </Typography>
+                <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                  {String(v)}
+                </Typography>
+                <Divider sx={{ my: 1 }} />
+                <Typography sx={{ lineHeight: Number(v) || v }}>
+                  The quick brown fox jumps over the lazy dog.
+                </Typography>
+              </Paper>
+            ))}
+          </Stack>
+        ) : (
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            No custom line height scale found in theme.typography.lineHeights.
+          </Typography>
+        )}
+      </Section>
+
+      <Section title="Font Weights (if provided)">
+        <Stack direction="row" spacing={1.25} useFlexGap flexWrap="wrap">
+          {Object.entries(weights).map(([k, v]) => (
+            <Paper
+              key={k}
+              variant="outlined"
+              sx={{
+                p: 1.25,
+                minWidth: 160,
+                borderColor: theme.custom?.border || theme.palette.divider,
+              }}
+            >
+              <Typography variant="body2" sx={{ fontWeight: 700 }}>
+                {k}
+              </Typography>
+              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                {v ?? '—'}
+              </Typography>
+              <Divider sx={{ my: 1 }} />
+              <Typography sx={{ fontWeight: v ?? 600 }}>
+                The quick brown fox jumps over the lazy dog.
+              </Typography>
+            </Paper>
+          ))}
+        </Stack>
+      </Section>
+    </Box>
+  );
+}
+
+export default {
+  title: 'Theme/Typography',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Typography scale compiled from tokens. Shows font family, variant sizes/weights/line-height, and optional line-height scale & weights if your tokens expose them.',
+      },
+    },
+  },
+};
+
+export const Scale = {
+  name: 'Scale',
+  render: () => <TypographyScale />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Core typography variants from the active theme (h1–h5, subtitle1, body1, body2, button).',
+      },
+    },
+  },
+};
+
+export const Details = {
+  name: 'Details (Line Heights & Weights)',
+  render: () => <TypographyDetails />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Optional token-driven extras: line-height scale and font weights if present in the compiled theme.',
+      },
+    },
+  },
+};

package/src/templates/BrowserExtension.jsx

@@ -0,0 +1,56 @@
+import { Box, Toolbar, AppBar, Typography, Container } from "@mui/material";
+
+/**
+ * BrowserExtension Layout
+ * Un layout optimizado para popups de extensiones de navegador.
+ * Tamaño reducido y estilo minimalista, ideal para entornos con espacio limitado.
+ */
+export default function BrowserExtensionLayout({ children, title = "Cleaker Extension" }) {
+  return (
+    <Box
+      sx={{
+        width: 300,
+        height: 400,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: (theme) => theme.palette.background.default,
+        color: (theme) => theme.palette.text.primary,
+      }}
+    >
+      <AppBar
+        position="static"
+        color="default"
+        elevation={1}
+        sx={{
+          minHeight: 40,
+          backgroundColor: (theme) =>
+            theme.palette.mode === "light"
+              ? theme.palette.background.paper
+              : theme.palette.background.default,
+          borderBottom: (theme) =>
+            `1px solid ${
+              theme.palette.mode === "light"
+                ? "rgba(0,0,0,0.1)"
+                : "rgba(255,255,255,0.1)"
+            }`,
+        }}
+      >
+        <Toolbar variant="dense" sx={{ minHeight: 40 }}>
+          <Typography variant="subtitle1" noWrap component="div">
+            {title}
+          </Typography>
+        </Toolbar>
+      </AppBar>
+
+      <Container
+        sx={{
+          flex: 1,
+          overflowY: "auto",
+          padding: 1,
+        }}
+      >
+        {children}
+      </Container>
+    </Box>
+  );
+}

package/src/templates/Layout.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { Box } from '@/gui/atoms';
+import TopBar from '@/gui/molecules/AppBars/TopBar/TopBar';
+import LeftSidebar from '@/gui/molecules/AppBars/LeftSidebar/LeftSidebar';
+
+interface LayoutProps {
+  hasTopBar?: boolean;
+  hasLeftSidebar?: boolean;
+  withRouter?: boolean;
+  children: React.ReactNode;
+}
+
+function Layout({ hasTopBar = false, hasLeftSidebar = false, withRouter = false, children }: LayoutProps) {
+  const sidebarToggleLocation: 'topbar' | 'sidebar' | 'none' =
+    hasLeftSidebar ? (hasTopBar ? 'topbar' : 'sidebar') : 'none';
+
+  const layoutContent = (
+    <Box id="layout-root" display="contents">
+      {hasTopBar && (
+        <TopBar
+          showMenuButton={hasLeftSidebar}
+          toggleLocation={sidebarToggleLocation}
+        />
+      )}
+      {hasLeftSidebar && (
+        <LeftSidebar toggleLocation={sidebarToggleLocation} />
+      )}
+      {children}
+    </Box>
+  );
+
+  return withRouter ? <BrowserRouter>{layoutContent}</BrowserRouter> : layoutContent;
+}
+
+export default Layout as React.FC<LayoutProps>;

package/src/templates/Minimal.jsx

@@ -0,0 +1,123 @@
+// all.this/packages-src/this.GUI/npm/src/templates/Minimal.jsx
+import React, { useState } from "react";
+class ErrorBoundary extends React.Component {
+  constructor(props){ super(props); this.state = { hasError: false, error: null }; }
+  static getDerivedStateFromError(error){ return { hasError: true, error }; }
+  componentDidCatch(error, info){ console.error(`[MinimalLayout:${this.props.label}]`, error, info); }
+  render(){
+    if(this.state.hasError){
+      return (
+        <div style={{ padding: 16, border: '1px solid #f99', borderRadius: 8, background: 'rgba(255,0,0,0.05)', margin: '12px 0' }}>
+          <strong>Component "{this.props.label}" failed to render.</strong>
+          <div style={{ fontSize: 12, opacity: 0.8, marginTop: 6 }}>{String(this.state.error)}</div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+import { Outlet } from "react-router-dom";
+import { Box } from "@mui/material";
+import TopBarAndSideBar from "../components/generics/AppBars/TopBarAndSideBar/TopBarAndSideBar";
+import PageContainer from "../components/generics/Layout/PageContainer";
+import Footer from "../components/generics/AppBars/Footer/Footer";
+import RightContextDrawer from "../components/generics/AppBars/RightContextDrawer/RightContextDrawer";
+import StickyOptions from "../components/generics/AppBars/StickyOptions/StickyOptions";
+
+export default function MinimalLayout({ config, topic, rightContext, stickyOptions, footer }) {
+  const {
+    title = "This.GUI",
+    logo = "https://neurons.me/neurons.me.png",
+    sideBarLinks = undefined,
+    topNavLinks = undefined
+  } = config || {};
+
+  // ---- Normalize/guards ------------------------------------------------------
+  const hasSideBarObject =
+    sideBarLinks &&
+    typeof sideBarLinks === "object" &&
+    !Array.isArray(sideBarLinks) &&
+    Object.keys(sideBarLinks).length > 0;
+
+  // Only pass contexts if we truly have a section map. Otherwise omit the prop entirely.
+  const sections = hasSideBarObject ? sideBarLinks : undefined;
+
+  // StickyOptions: render only if we truly have an items array with content
+  const ctaConfig = stickyOptions || (config && config.stickyOptions) || null;
+  const hasCtas =
+    !!ctaConfig &&
+    Array.isArray(ctaConfig.items) &&
+    ctaConfig.items.length > 0;
+
+  // Right drawer width (guard if rightContext is malformed)
+  const rightDrawerWidth =
+    rightContext && Array.isArray(rightContext.items) && rightContext.items.length > 0 ? 260 : 0;
+
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  return (
+    <>
+      <ErrorBoundary label="TopBarAndSideBar">
+        <TopBarAndSideBar
+          title={title}
+          logo={logo}
+          drawerWidth={240}
+          contexts={sections || {}}
+          topic={topic}
+          {...(Array.isArray(topNavLinks) ? { topNavLinks } : {})}
+        />
+      </ErrorBoundary>
+
+      {hasCtas && (
+        <ErrorBoundary label="StickyOptions">
+          <StickyOptions
+            items={ctaConfig.items}
+            positioning={ctaConfig.positioning || {}}
+            behavior={{ respectRightDrawer: true, ...(ctaConfig.behavior || {}) }}
+            theme={ctaConfig.theme || {}}
+            visibility={ctaConfig.visibility || {}}
+            i18n={ctaConfig.i18n || {}}
+          />
+        </ErrorBoundary>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          px: { xs: 2, sm: 3 },
+          mt: 5,
+          width: "auto",
+          "--right-drawer-width": `${rightDrawerWidth}px`,
+          ml: { md: "240px", xs: 0 },
+          mr: { md: rightDrawerWidth ? `${rightDrawerWidth}px` : 0, xs: 0 }
+        }}
+      >
+        <ErrorBoundary label="Page">
+          <PageContainer>
+            <Outlet />
+          </PageContainer>
+        </ErrorBoundary>
+      </Box>
+
+      {footer && (
+        <ErrorBoundary label="Footer">
+          <Footer
+            leftInset={240}
+            rightInset={rightDrawerWidth}
+            {...(typeof footer === "object" ? footer : {})}
+          />
+        </ErrorBoundary>
+      )}
+
+      {rightContext && Array.isArray(rightContext.items) && rightContext.items.length > 0 && (
+        <ErrorBoundary label="RightContextDrawer">
+          <RightContextDrawer
+            open={drawerOpen}
+            onClose={() => setDrawerOpen(!drawerOpen)}
+            rightContext={rightContext}
+          />
+        </ErrorBoundary>
+      )}
+    </>
+  );
+}

package/src/templates/Shell/Shell.jsx

@@ -0,0 +1,107 @@
+// src/templates/Shell.jsx
+// Clean Shell that composes NavBar, LeftDrawer, RightDrawer, StickyOptions and Footer
+// and relies on runtime insets managed by the drawers themselves.
+//
+// Props (clean API)
+// - navBar?:       props for <NavBar />
+// - leftDrawer?:   { enabled?: boolean, drawerWidth?: number, drawerLinks?: RouteItem[] }
+// - rightDrawer?:  props for <RightDrawer /> (enabled inferred by its content)
+// - stickyOptions?: props for <StickyOptions />
+// - footer?:       props for <Footer />
+//
+// Notes
+// - Mobile: LeftDrawer is temporary and controlled here via `leftOpen`.
+// - Desktop: LeftDrawer is permanent; it will update theme.layout.insets.left internally.
+// - RightDrawer also updates theme.layout.insets.right when permanent.
+// - Shell itself no longer sets manual `ml/mr`; content adapts via theme/layout insets.
+
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+import NavBar from '../../components/generics/AppBars/NavBar/NavBar';
+import LeftDrawer from '../../components/generics/AppBars/LeftDrawer/LeftDrawer';
+import RightDrawer from '../../components/generics/AppBars/RightDrawer/RightDrawer';
+import StickyOptions from '../../components/generics/AppBars/StickyOptions/StickyOptionsTop';
+import Footer from '../../components/generics/AppBars/Footer/Footer';
+import PageContainer from '../../components/generics/Layout/PageContainer';
+
+export default function Shell({
+  navBar = {},
+  leftDrawer = {},
+  rightDrawer = null,
+  stickyOptions = null,
+  footer = null,
+}) {
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
+
+  // ---------------- Left drawer control (mobile temporary) ------------------
+  const leftEnabled = leftDrawer?.enabled !== false; // default: true
+  const leftWidth = leftDrawer?.drawerWidth ?? 240;
+  const [leftOpen, setLeftOpen] = React.useState(false);
+  const toggleLeft = () => setLeftOpen((v) => !v);
+
+  // ---------------- NavBar props -------------------------------------------
+  const navProps = {
+    title: 'This.GUI',
+    logo: 'https://neurons.me/neurons.me.png',
+    showMenuButton: leftEnabled,
+    onMenuClick: leftEnabled ? toggleLeft : undefined,
+    showThemeToggle: true,
+    ...navBar,
+  };
+
+  // ---------------- LeftDrawer props ---------------------------------------
+  const leftProps = leftEnabled
+    ? {
+        open: !isDesktop ? leftOpen : true,
+        onClose: () => setLeftOpen(false),
+        drawerWidth: leftWidth,
+        drawerLinks: leftDrawer?.drawerLinks || [],
+        // cualquier otra prop declarativa se pasa tal cual
+        ...leftDrawer,
+      }
+    : null;
+
+  // ---------------- RightDrawer visibility ---------------------------------
+  const hasRight = !!rightDrawer && (rightDrawer.enabled !== false);
+
+  // ---------------- Sticky Options -----------------------------------------
+  const hasSticky = !!(stickyOptions && Array.isArray(stickyOptions.items) && stickyOptions.items.length > 0);
+
+  return (
+    <>
+      <NavBar {...navProps} />
+
+      {leftEnabled && <LeftDrawer {...leftProps} />}
+
+      {hasSticky && (
+        <StickyOptions
+          items={stickyOptions.items}
+          positioning={stickyOptions.positioning || {}}
+          behavior={stickyOptions.behavior || {}}
+          theme={stickyOptions.theme || {}}
+          visibility={stickyOptions.visibility || {}}
+          i18n={stickyOptions.i18n || {}}
+        />
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          px: { xs: 2, sm: 3 },
+          mt: 5, // leave space for AppBar (48px dense + 8px tolerance)
+          width: 'auto',
+        }}
+      >
+        <PageContainer>
+          <Outlet />
+        </PageContainer>
+      </Box>
+
+      {footer && <Footer {...(typeof footer === 'object' ? footer : {})} />}
+
+      {hasRight && <RightDrawer {...rightDrawer} />}
+    </>
+  );
+}