this.gui 1.0.18 → 1.1.0

package/src/gui/atoms.tsx

@@ -0,0 +1,129 @@
+/* 
+ * This.GUI — primitives
+ * Thin wrappers around MUI components to present a stable, library-owned API.
+ * Internally we use MUI, but components in the design system should import from
+ * "@/gui/primitives" instead of "@mui/material". This lets us swap engines later.
+ * 
+ * La regla estándar en tu wrapper
+ *   • Si MUI lo declaró polimórfico → usa OverridableComponent en tu wrapper.
+ *   • Si no lo es → usa forwardRef normal.
+ *
+ * Así garantizas dos cosas:
+ * ✅ Tu wrapper no pierde nada de lo que MUI ofrece.
+ * ✅ No te complicas agregando polimorfismo donde MUI no lo soporta.
+ */
+import * as React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+// AppBar is not polymorphic so we wrap it with forwardRef
+import AppBar from './atoms/AppBar/AppBar';
+export { default as AppBar } from './atoms/AppBar/AppBar';
+// Box is polymorphic so we re-export it directly
+import Box, { type BoxProps } from './atoms/Box/Box';
+export { default as Box } from './atoms/Box/Box';
+export type { BoxProps } from './atoms/Box/Box';
+//Button is polymorphic so we re-export it directly
+import Button from './atoms/Button/Button';
+export { default as Button } from './atoms/Button/Button';
+export type { GuiButtonProps as ButtonProps } from './atoms/Button/Button';
+//Collapse is not polymorphic so we wrap it with forwardRef
+import Collapse, { type CollapseProps } from './atoms/Collapse/Collapse';
+export { default as Collapse } from './atoms/Collapse/Collapse';
+export type { CollapseProps } from './atoms/Collapse/Collapse';
+//IconButton is polymorphic so we re-export it directly
+import IconButton, { type IconButtonProps } from './atoms/IconButton/IconButton';
+export { default as IconButton } from './atoms/IconButton/IconButton';
+export type { IconButtonProps } from './atoms/IconButton/IconButton';
+//Divider is not polymorphic so we wrap it with forwardRef
+import Divider, { type DividerProps } from './atoms/Divider/Divider';
+export { default as Divider } from './atoms/Divider/Divider';
+export type { DividerProps } from './atoms/Divider/Divider';
+//Drawer is not polymorphic so we wrap it with forwardRef
+import Drawer, { type DrawerProps } from './atoms/Drawer/Drawer';
+export { default as Drawer } from './atoms/Drawer/Drawer';
+export type { DrawerProps } from './atoms/Drawer/Drawer';
+//Link is polymorphic so we re-export it directly
+import Link from './atoms/Link/Link';
+export { default as Link } from './atoms/Link/Link';
+export type { LinkProps } from './atoms/Link/Link';
+// List and related are not polymorphic so we wrap them with forwardRef
+import List, { type ListProps } from './atoms/List/List';
+export { default as List } from './atoms/List/List';
+export type { ListProps } from './atoms/List/List';
+import ListItem, { type ListItemProps } from './atoms/ListItem/ListItem';
+export { default as ListItem } from './atoms/ListItem/ListItem';
+export type { ListItemProps } from './atoms/ListItem/ListItem';
+import ListItemButton, { type ListItemButtonProps } from './atoms/ListItemButton/ListItemButton';
+export { default as ListItemButton } from './atoms/ListItemButton/ListItemButton';
+export type { ListItemButtonProps } from './atoms/ListItemButton/ListItemButton';
+import ListItemIcon, { type ListItemIconProps } from './atoms/ListItemIcon/ListItemIcon';
+export { default as ListItemIcon } from './atoms/ListItemIcon/ListItemIcon';
+export type { ListItemIconProps } from './atoms/ListItemIcon/ListItemIcon';
+import ListItemText, { type ListItemTextProps } from './atoms/ListItemText/ListItemText';
+export { default as ListItemText } from './atoms/ListItemText/ListItemText';
+export type { ListItemTextProps } from './atoms/ListItemText/ListItemText';
+//Menu and related are polymorphic so we re-export them directly
+import Menu, { type MenuProps } from './atoms/Menu/Menu';
+export { default as Menu } from './atoms/Menu/Menu';
+export type { MenuProps } from './atoms/Menu/Menu';
+import MenuItem, { type MenuItemProps } from './atoms/MenuItem/MenuItem';
+export { default as MenuItem } from './atoms/MenuItem/MenuItem';
+export type { MenuItemProps } from './atoms/MenuItem/MenuItem';
+//Paper is not polymorphic so we wrap it with forwardRef
+import Paper, { type PaperProps } from './atoms/Paper/Paper';
+export { default as Paper } from './atoms/Paper/Paper';
+export type { PaperProps } from './atoms/Paper/Paper';
+//Stack is not polymorphic so we wrap it with forwardRef
+import Stack, { type StackProps } from './atoms/Stack/Stack';
+export { default as Stack } from './atoms/Stack/Stack';
+export type { StackProps } from './atoms/Stack/Stack';
+//Switch is not polymorphic so we wrap it with forwardRef
+import Switch, { type SwitchProps } from './atoms/Switch/Switch';
+export { default as Switch } from './atoms/Switch/Switch';
+export type { SwitchProps } from './atoms/Switch/Switch';
+//Toolbar is not polymorphic so we wrap it with forwardRef
+import Toolbar from './atoms/Toolbar/Toolbar';
+export { default as Toolbar } from './atoms/Toolbar/Toolbar';
+export type { ToolbarProps } from './atoms/Toolbar/Toolbar';
+//Tooltip is not polymorphic so we wrap it with forwardRef
+import Tooltip from './atoms/Tooltip/Tooltip';
+export { default as Tooltip } from './atoms/Tooltip/Tooltip';
+export type { TooltipProps } from './atoms/Tooltip/Tooltip';
+//Typography is polymorphic so we re-export it directly
+import Typography, { type TypographyProps } from './atoms/Typography/Typography';
+export { default as Typography } from './atoms/Typography/Typography';
+export type { TypographyProps } from './atoms/Typography/Typography';
+
+/* -------------------------------------------------------------------------------------------------
+ * GuiSx — re-export of MUI’s SxProps<Theme>
+ * -------------------------------------------------------------------------------------------------*/
+
+/** Public sx type (kept for now to ease migration). */
+export type GuiSx = SxProps<Theme>;
+
+/* -------------------------------------------------------------------------------------------------
+ * Named bundle export (optional ergonomic import)
+ * -------------------------------------------------------------------------------------------------*/
+export const Atoms = {
+  Box,
+  Typography,
+  Link,
+  Stack,
+  Divider,
+  AppBar,
+  Toolbar,
+  IconButton,
+  Menu,
+  MenuItem,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Collapse,
+  Button,
+  Tooltip,
+  Switch,
+  Paper,
+} as const;
+export default Atoms;

package/src/gui/index.ts

@@ -0,0 +1,69 @@
+// src/gui/index.ts
+import { useTheme as useMuiTheme } from '@mui/material/styles';
+import useMuiMediaQuery from '@mui/material/useMediaQuery';
+import type { Theme } from '@mui/material/styles';
+import { keyForWidth, resolveViewportProp } from '@/types/viewport';
+// —— Tipos que expones como “contrato” de this.GUI
+export type GuiTheme = Theme; // por ahora es el de MUI extendido (theme.d.ts)
+// —— Hook central de tema (no importes MUI en los componentes)
+export function useGuiTheme(): GuiTheme {
+  return useMuiTheme() as GuiTheme;
+}
+
+// —— Wrapper genérico sobre useMediaQuery de MUI
+export function useGuiMediaQuery(query: string | ((theme: GuiTheme) => string)): boolean {
+  const theme = useGuiTheme();
+  const finalQuery = typeof query === 'function' ? query(theme) : query;
+  return useMuiMediaQuery(finalQuery);
+}
+
+// —— Breakpoints “portables”
+export function useViewportKey(): 'xs'|'sm'|'md'|'lg'|'xl' {
+  // si mañana cambias motor, reimplementas adentro y listo
+  const theme = useGuiTheme();
+  // usa window.innerWidth para no obligar a cada comp a pasar queries
+  const width = typeof window !== 'undefined' ? window.innerWidth : 0;
+  return keyForWidth(width, theme);
+}
+
+export function useIsMobile(): boolean {
+  const theme = useGuiTheme();
+  return useMuiMediaQuery(theme.breakpoints.down('sm'));
+}
+
+// —— Insets coordinados (ya los inyectas en GuiProvider)
+export function useInsets() {
+  const theme = useGuiTheme();
+  return theme?.layout?.insets ?? { left: 0, right: 0, nav: 0 };
+}
+export function useUpdateInsets() {
+  const theme = useGuiTheme();
+  return theme?.updateInsets ?? (() => {});
+}
+
+// —— Resolver genérico de viewport para props declarativas
+export function useViewportProp<T extends string|number|boolean|object>(
+  prop: T | Partial<Record<'xs'|'sm'|'md'|'lg'|'xl', T>> & { default?: T },
+  opts?: { widthOverride?: number }
+): T | undefined {
+  const theme = useGuiTheme();
+  return resolveViewportProp(prop as any, theme, opts);
+}
+
+// —— Resolver de color por token (unifica MUI/Lucide/htmlColor/color)
+export function resolveColorToken(token?: string, theme?: GuiTheme): string | undefined {
+  if (!token) return undefined;
+  const pal: any = (theme ?? useGuiTheme()).palette;
+  if (/^#|^rgb\(|^hsl\(/i.test(token)) return token; // CSS color directo
+  if (token.includes('.')) {
+    // "text.secondary", "action.active", etc.
+    const v = token.split('.').reduce<any>((acc, k) => (acc ? acc[k] : undefined), pal);
+    if (typeof v === 'string') return v;
+    if (v && typeof v === 'object') return v.main ?? v.default;
+    return undefined;
+  }
+  const v = pal[token];
+  if (typeof v === 'string') return v;
+  if (v && typeof v === 'object') return v.main ?? v.default;
+  return undefined;
+}

package/src/gui/molecules/AppBars/Footer/Footer.resolver.tsx

@@ -0,0 +1,104 @@
+// src/gui/molecules/AppBars/Footer/Footer.resolver.tsx
+import * as React from 'react';
+import Footer from './Footer';
+import type { RegistryEntry, ResolveCtx } from '@/registry/types';
+import { Link as GuiLink } from '@/gui/atoms';
+
+export type FooterSpec = {
+  type: 'Footer';
+  props?: {
+    // Branding
+    title?: string;
+    logoSrc?: string;
+    homeHref?: string;
+
+    // SPA routing for Brand
+    brandComponent?: string; // e.g., "Link" (string token resolved by resolver)
+    brandTo?: string;        // router destination (e.g., "/")
+
+    // Links
+    links?: Array<{ label: string; href: string; external?: boolean }>;
+
+    // Social icons
+    socialLinks?: Array<{ icon: string; href: string; iconColor?: string }>;
+
+    // Insets
+    leftInset?: number;
+    rightInset?: number;
+
+    // Slots via ctx.slots
+    startSlotId?: string;
+    endSlotId?: string;
+
+    // Granular styling (deben existir en FooterProps)
+    sx?: any;
+    leftSx?: any;
+    centerSx?: any;
+    rightSx?: any;
+    brandSx?: any;
+    logoSx?: any;
+    titleSx?: any;
+    socialLinkSx?: any;
+    navLinkSx?: any;
+
+    // Passthrough adicionales
+    linkProps?: Record<string, any>;
+    iconProps?: Record<string, any>;
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+  };
+};
+
+const FooterResolver: RegistryEntry = {
+  type: 'Footer',
+  resolve(spec: FooterSpec, ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+
+    const startSlot = p.startSlotId && ctx?.slots ? ctx.slots[p.startSlotId] : undefined;
+    const endSlot   = p.endSlotId   && ctx?.slots ? ctx.slots[p.endSlotId]   : undefined;
+
+    // Resolve brand component for SPA routing
+    let brandComponent: any | undefined = undefined;
+    if (p.brandComponent === 'Link') {
+      brandComponent = GuiLink;
+    } else if (!p.brandComponent && p.brandTo) {
+      // If a brandTo is provided without an explicit component token, default to This.GUI Link
+      brandComponent = GuiLink;
+    }
+
+    return (
+      <Footer
+        title={p.title ?? 'neurons.me'}
+        logoSrc={p.logoSrc}
+        homeHref={p.homeHref}
+        brandComponent={brandComponent}
+        brandTo={p.brandTo}
+        links={p.links ?? []}
+        socialLinks={p.socialLinks ?? []}
+        leftInset={p.leftInset}
+        rightInset={p.rightInset}
+        startSlot={startSlot}
+        endSlot={endSlot}
+        linkProps={p.linkProps as any}
+        iconProps={p.iconProps}
+
+        // granular styling (sin ts-expect-error)
+        sx={p.sx}
+        leftSx={p.leftSx}
+        centerSx={p.centerSx}
+        rightSx={p.rightSx}
+        brandSx={p.brandSx}
+        logoSx={p.logoSx}
+        titleSx={p.titleSx}
+        socialLinkSx={p.socialLinkSx}
+        navLinkSx={p.navLinkSx}
+        id={p.id}
+        className={p.className}
+        data-testid={p['data-testid']}
+      />
+    );
+  },
+};
+
+export default FooterResolver;