@gcsa/console-react 0.1.0

package/src/GcsaLoadingMask.tsx

@@ -0,0 +1,53 @@
+import type { CSSProperties } from 'react';
+import { GcsaBrandMark } from './GcsaBrandMark';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+
+export type GcsaLoadingMaskProps = {
+  text?: string;
+  background?: string;
+  customClass?: string;
+  fullscreen?: boolean;
+  visible?: boolean;
+};
+
+export function GcsaLoadingMask({
+  text = '',
+  background,
+  customClass,
+  fullscreen = false,
+  visible = true
+}: GcsaLoadingMaskProps) {
+  const messages = useGcsaLocaleMessages();
+
+  if (!visible) return null;
+
+  const maskStyle: CSSProperties | undefined = background
+    ? { backgroundColor: background }
+    : undefined;
+
+  const className = [
+    'gcsa-loading-mask',
+    fullscreen ? 'gcsa-loading-mask--fullscreen' : '',
+    customClass || ''
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      className={className}
+      style={maskStyle}
+      role="status"
+      aria-live="polite"
+      aria-label={text || messages.loading}
+    >
+      <div className="gcsa-loading-spinner">
+        <div className="gcsa-loading-spinner__stage">
+          <div className="gcsa-loading-spinner__ring" aria-hidden="true" />
+          <GcsaBrandMark className="gcsa-loading-spinner__logo" />
+        </div>
+        {text ? <p className="gcsa-loading-spinner__text">{text}</p> : null}
+      </div>
+    </div>
+  );
+}

package/src/GcsaMarkdownRenderer.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react';
+import { renderGcsaMarkdown } from '@gcsa/console-core';
+
+export type GcsaMarkdownRendererProps = {
+  content: string;
+  inline?: boolean;
+  className?: string;
+};
+
+export function GcsaMarkdownRenderer({
+  content,
+  inline = false,
+  className
+}: GcsaMarkdownRendererProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    root.querySelectorAll('table').forEach((table) => {
+      if (table.parentElement?.classList.contains('gcsa-markdown__table-wrap')) return;
+      const wrapper = document.createElement('div');
+      wrapper.className = 'gcsa-markdown__table-wrap';
+      table.parentNode?.insertBefore(wrapper, table);
+      wrapper.appendChild(table);
+    });
+  }, [content]);
+
+  const classNames = ['gcsa-markdown', inline ? 'gcsa-markdown--inline' : '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      ref={rootRef}
+      className={classNames}
+      dangerouslySetInnerHTML={{ __html: renderGcsaMarkdown(content) }}
+    />
+  );
+}

package/src/GcsaMenu.tsx

@@ -0,0 +1,340 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { Collapsible } from '@ark-ui/react/collapsible';
+import { Menu } from '@ark-ui/react/menu';
+import type { GcsaMenuItem, GcsaMenuMode } from '@gcsa/console-core';
+import { createGcsaPopupPositioning } from '@gcsa/console-core';
+import { GcsaIcon } from './GcsaIcon';
+import { GcsaTooltip } from './GcsaTooltip';
+
+export type { GcsaMenuItem, GcsaMenuMode } from '@gcsa/console-core';
+
+export type GcsaMenuProps = {
+  items: GcsaMenuItem[];
+  selectedKey?: string;
+  defaultSelectedKey?: string;
+  openKeys?: string[];
+  defaultOpenKeys?: string[];
+  mode?: GcsaMenuMode;
+  collapsed?: boolean;
+  className?: string;
+  onSelectedKeyChange?: (key: string) => void;
+  onSelect?: (key: string) => void;
+  onOpenKeysChange?: (keys: string[]) => void;
+};
+
+type MenuNodesProps = {
+  items: GcsaMenuItem[];
+  mode: GcsaMenuMode;
+  selectedKey: string;
+  openKeys: string[];
+  collapsed?: boolean;
+  depth: number;
+  onSelect: (key: string) => void;
+  onToggle: (key: string, open: boolean) => void;
+};
+
+function isBranch(item: GcsaMenuItem) {
+  return Boolean(item.children?.length) && item.type !== 'group' && item.type !== 'divider';
+}
+
+function flattenDropdownItems(items: GcsaMenuItem[]) {
+  return items
+    .filter(item => item.type !== 'group' && item.type !== 'divider')
+    .map(item => ({
+      key: item.key,
+      label: item.label,
+      disabled: item.disabled
+    }));
+}
+
+function branchContainsSelection(item: GcsaMenuItem, selectedKey: string) {
+  if (item.key === selectedKey) return true;
+  return item.children?.some(child => child.key === selectedKey) ?? false;
+}
+
+function MenuIcon({ item }: { item: GcsaMenuItem }) {
+  if (item.icon) {
+    return (
+      <span className="gcsa-menu__icon" aria-hidden="true">
+        {item.icon as ReactNode}
+      </span>
+    );
+  }
+  if (item.iconKey) {
+    return (
+      <span className="gcsa-menu__icon" aria-hidden="true">
+        <GcsaIcon name={item.iconKey} />
+      </span>
+    );
+  }
+  return null;
+}
+
+function MenuNodes({
+  items,
+  mode,
+  selectedKey,
+  openKeys,
+  collapsed = false,
+  depth,
+  onSelect,
+  onToggle
+}: MenuNodesProps) {
+  const openKeySet = useMemo(() => new Set(openKeys), [openKeys]);
+  const showTooltips = collapsed && depth === 0;
+
+  return (
+    <ul
+      className={`gcsa-menu__list${depth > 0 ? ' gcsa-menu__list--nested' : ''}`}
+      role="none"
+    >
+      {items.map(item => {
+        if (item.type === 'divider') {
+          return (
+            <li key={item.key} className="gcsa-menu__node gcsa-menu__node--divider" role="none">
+              <div className="gcsa-menu__divider" role="separator" />
+            </li>
+          );
+        }
+
+        if (item.type === 'group') {
+          return (
+            <li key={item.key} className="gcsa-menu__node gcsa-menu__node--group" role="none">
+              <div className="gcsa-menu__group-label">{item.label}</div>
+            </li>
+          );
+        }
+
+        if (isBranch(item)) {
+          if (collapsed && mode !== 'horizontal') {
+            const childItems = flattenDropdownItems(item.children!);
+            const branchSelected = branchContainsSelection(item, selectedKey);
+
+            return (
+              <li key={item.key} className="gcsa-menu__node" role="none">
+                <Menu.Root
+                  positioning={createGcsaPopupPositioning({ placement: 'right-start', gutter: 8 })}
+                  onSelect={details => onSelect(details.value)}
+                >
+                  <GcsaTooltip content={item.label} placement="right" gutter={10}>
+                    <Menu.Trigger asChild>
+                      <button
+                        type="button"
+                        className={`gcsa-menu__item gcsa-menu__item--submenu gcsa-focus-ring${
+                          branchSelected ? ' gcsa-menu__item--selected' : ''
+                        }${item.disabled ? ' gcsa-menu__item--disabled' : ''}`}
+                        disabled={item.disabled}
+                      >
+                        <MenuIcon item={item} />
+                        <span className="gcsa-menu__label">{item.label}</span>
+                      </button>
+                    </Menu.Trigger>
+                  </GcsaTooltip>
+                  <Menu.Positioner>
+                    <Menu.Content className="gcsa-dropdown gcsa-ui-surface">
+                      {childItems.map(child => (
+                        <Menu.Item
+                          key={child.key}
+                          value={child.key}
+                          disabled={child.disabled}
+                          className="gcsa-dropdown__item"
+                        >
+                          <Menu.ItemText>{child.label}</Menu.ItemText>
+                        </Menu.Item>
+                      ))}
+                    </Menu.Content>
+                  </Menu.Positioner>
+                </Menu.Root>
+              </li>
+            );
+          }
+
+          if (mode === 'horizontal') {
+            const childItems = flattenDropdownItems(item.children!);
+            const branchSelected = branchContainsSelection(item, selectedKey);
+
+            return (
+              <li key={item.key} className="gcsa-menu__node" role="none">
+                <div className="gcsa-menu__branch">
+                  <Menu.Root onSelect={details => onSelect(details.value)}>
+                    <Menu.Trigger asChild>
+                      <button
+                        type="button"
+                        className={`gcsa-menu__item gcsa-menu__item--submenu gcsa-focus-ring${
+                          branchSelected ? ' gcsa-menu__item--selected' : ''
+                        }${item.disabled ? ' gcsa-menu__item--disabled' : ''}`}
+                        disabled={item.disabled}
+                      >
+                        <span className="gcsa-menu__label">{item.label}</span>
+                        <span className="gcsa-menu__arrow" aria-hidden="true">
+                          <GcsaIcon name="chevronLeft" size="sm" />
+                        </span>
+                      </button>
+                    </Menu.Trigger>
+                    <Menu.Positioner>
+                      <Menu.Content className="gcsa-dropdown gcsa-ui-surface">
+                        {childItems.map(child => (
+                          <Menu.Item
+                            key={child.key}
+                            value={child.key}
+                            disabled={child.disabled}
+                            className="gcsa-dropdown__item"
+                          >
+                            <Menu.ItemText>{child.label}</Menu.ItemText>
+                          </Menu.Item>
+                        ))}
+                      </Menu.Content>
+                    </Menu.Positioner>
+                  </Menu.Root>
+                </div>
+              </li>
+            );
+          }
+
+          return (
+            <li key={item.key} className="gcsa-menu__node" role="none">
+              <Collapsible.Root
+                open={openKeySet.has(item.key)}
+                className="gcsa-menu__submenu"
+                onOpenChange={details => onToggle(item.key, details.open)}
+              >
+                <Collapsible.Trigger
+                  className={`gcsa-menu__item gcsa-menu__item--submenu gcsa-focus-ring${
+                    item.key === selectedKey ? ' gcsa-menu__item--selected' : ''
+                  }${item.disabled ? ' gcsa-menu__item--disabled' : ''}`}
+                  disabled={item.disabled}
+                  data-selected={item.key === selectedKey ? '' : undefined}
+                >
+                  <MenuIcon item={item} />
+                  <span className="gcsa-menu__label">{item.label}</span>
+                  <span className="gcsa-menu__arrow" aria-hidden="true">
+                    <GcsaIcon name="chevronLeft" size="sm" />
+                  </span>
+                </Collapsible.Trigger>
+                <Collapsible.Content className="gcsa-menu__submenu-panel">
+                  <MenuNodes
+                    items={item.children!}
+                    mode={mode}
+                    selectedKey={selectedKey}
+                    openKeys={openKeys}
+                    collapsed={collapsed}
+                    depth={depth + 1}
+                    onSelect={onSelect}
+                    onToggle={onToggle}
+                  />
+                </Collapsible.Content>
+              </Collapsible.Root>
+            </li>
+          );
+        }
+
+        const itemClassName = `gcsa-menu__item gcsa-focus-ring${
+          item.key === selectedKey ? ' gcsa-menu__item--selected' : ''
+        }${item.disabled ? ' gcsa-menu__item--disabled' : ''}`;
+
+        const leafNode = item.href ? (
+          <a
+            href={item.href}
+            className={itemClassName}
+            role="menuitem"
+            aria-current={item.key === selectedKey ? 'page' : undefined}
+          >
+            <MenuIcon item={item} />
+            <span className="gcsa-menu__label">{item.label}</span>
+          </a>
+        ) : (
+          <button
+            type="button"
+            className={itemClassName}
+            role="menuitem"
+            disabled={item.disabled}
+            aria-current={item.key === selectedKey ? 'page' : undefined}
+            onClick={() => {
+              if (!item.disabled) onSelect(item.key);
+            }}
+          >
+            <MenuIcon item={item} />
+            <span className="gcsa-menu__label">{item.label}</span>
+          </button>
+        );
+
+        return (
+          <li key={item.key} className="gcsa-menu__node" role="none">
+            <GcsaTooltip
+              content={item.label}
+              placement="right"
+              disabled={!showTooltips}
+              gutter={10}
+            >
+              {leafNode}
+            </GcsaTooltip>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function GcsaMenu({
+  items,
+  selectedKey,
+  defaultSelectedKey,
+  openKeys,
+  defaultOpenKeys,
+  mode = 'vertical',
+  collapsed = false,
+  className,
+  onSelectedKeyChange,
+  onSelect,
+  onOpenKeysChange
+}: GcsaMenuProps) {
+  const [innerSelectedKey, setInnerSelectedKey] = useState(
+    selectedKey ?? defaultSelectedKey ?? ''
+  );
+  const [innerOpenKeys, setInnerOpenKeys] = useState<string[]>(openKeys ?? defaultOpenKeys ?? []);
+
+  const resolvedSelectedKey = selectedKey ?? innerSelectedKey;
+  const resolvedOpenKeys = openKeys ?? innerOpenKeys;
+
+  useEffect(() => {
+    if (!collapsed) return;
+    setInnerOpenKeys([]);
+    onOpenKeysChange?.([]);
+  }, [collapsed]);
+
+  function handleSelect(key: string) {
+    if (selectedKey === undefined) setInnerSelectedKey(key);
+    onSelectedKeyChange?.(key);
+    onSelect?.(key);
+  }
+
+  function handleToggle(key: string, open: boolean) {
+    const next = open
+      ? [...new Set([...resolvedOpenKeys, key])]
+      : resolvedOpenKeys.filter(item => item !== key);
+    if (openKeys === undefined) setInnerOpenKeys(next);
+    onOpenKeysChange?.(next);
+  }
+
+  const modeClass = `gcsa-menu--${mode}`;
+  const collapsedClass = collapsed ? ' gcsa-menu--collapsed' : '';
+
+  return (
+    <nav
+      className={`gcsa-menu gcsa-ui-surface ${modeClass}${collapsedClass}${className ? ` ${className}` : ''}`}
+      role="menu"
+      aria-orientation={mode === 'horizontal' ? 'horizontal' : 'vertical'}
+    >
+      <MenuNodes
+        items={items}
+        mode={mode}
+        selectedKey={resolvedSelectedKey}
+        openKeys={resolvedOpenKeys}
+        collapsed={collapsed}
+        depth={0}
+        onSelect={handleSelect}
+        onToggle={handleToggle}
+      />
+    </nav>
+  );
+}

package/src/GcsaModal.tsx

@@ -0,0 +1,68 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+import { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';
+
+export type GcsaModalProps = {
+  open: boolean;
+  title?: string;
+  closable?: boolean;
+  footer?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+export function GcsaModal({
+  open,
+  title,
+  closable = true,
+  footer,
+  onOpenChange,
+  children
+}: GcsaModalProps) {
+  const messages = useGcsaLocaleMessages();
+  const { backdropZ, positionerZ } = useGcsaOverlayZIndex(open);
+  const backdropStyle = (backdropZ == null ? undefined : { zIndex: backdropZ }) as CSSProperties | undefined;
+  const positionerStyle = (positionerZ == null ? undefined : { zIndex: positionerZ }) as CSSProperties | undefined;
+
+  return (
+    <Dialog.Root
+      open={open}
+      lazyMount
+      unmountOnExit
+      onOpenChange={details => onOpenChange?.(details.open)}
+    >
+      <Portal>
+        <Dialog.Backdrop className="gcsa-modal__backdrop" style={backdropStyle} />
+        <Dialog.Positioner className="gcsa-modal__positioner" style={positionerStyle}>
+          <Dialog.Content className="gcsa-modal__panel gcsa-ui-surface">
+            {closable ? (
+              <Dialog.CloseTrigger className="gcsa-modal__close" aria-label={messages.close}>
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+                  <path
+                    d="M2 2l10 10M12 2L2 12"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                  />
+                </svg>
+              </Dialog.CloseTrigger>
+            ) : null}
+            {title ? (
+              <header className="gcsa-modal__header">
+                <Dialog.Title asChild>
+                  <div className="gcsa-modal__title">{title}</div>
+                </Dialog.Title>
+              </header>
+            ) : null}
+            <div className={`gcsa-modal__body${title ? ' gcsa-modal__body--titled' : ''}`}>
+              {children}
+            </div>
+            {footer ? <div className="gcsa-modal__footer">{footer}</div> : null}
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}