@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/layouts/mdi-main/mdi-app-catalog.generated.ts

@@ -0,0 +1,159 @@
+// Generated by @codexsun/app-cli. Do not edit manually.
+
+export type MdiCatalogApplication = {
+  icon: string;
+  id: string;
+  label: string;
+  localUrlKey: string;
+  path: string;
+};
+
+export const mdiCatalogApplications: readonly MdiCatalogApplication[] = [
+  {
+    "icon": "application",
+    "id": "accounts",
+    "label": "Accounts",
+    "localUrlKey": "VITE_ACCOUNTS_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "auditor",
+    "label": "Auditor",
+    "localUrlKey": "VITE_AUDITOR_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "billing",
+    "label": "Billing",
+    "localUrlKey": "VITE_BILLING_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "codeitz",
+    "label": "Codeitz",
+    "localUrlKey": "VITE_CODEITZ_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "codeloop",
+    "label": "CodeLoop",
+    "localUrlKey": "VITE_CODELOOP_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "crm",
+    "label": "CRM",
+    "localUrlKey": "VITE_CRM_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "cxforge",
+    "label": "CXForge",
+    "localUrlKey": "VITE_CXFORGE_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "docx",
+    "label": "DOCX",
+    "localUrlKey": "VITE_DOCX_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "ecommerce",
+    "label": "Ecommerce",
+    "localUrlKey": "VITE_ECOMMERCE_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "garments",
+    "label": "Garments",
+    "localUrlKey": "VITE_GARMENTS_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "himsx",
+    "label": "HIMSX",
+    "localUrlKey": "VITE_HIMSX_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "hrms",
+    "label": "HRMS",
+    "localUrlKey": "VITE_HRMS_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "lms",
+    "label": "LMS",
+    "localUrlKey": "VITE_LMS_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "orship",
+    "label": "Orship",
+    "localUrlKey": "VITE_ORSHIP_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "platform",
+    "id": "platform",
+    "label": "Platform",
+    "localUrlKey": "VITE_PLATFORM_WEB_URL",
+    "path": "/system"
+  },
+  {
+    "icon": "application",
+    "id": "projex",
+    "label": "Projex",
+    "localUrlKey": "VITE_PROJEX_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "qcafe",
+    "label": "Q Cafe",
+    "localUrlKey": "VITE_QCAFE_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "application",
+    "id": "sites",
+    "label": "Sites",
+    "localUrlKey": "VITE_SITES_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "uiux",
+    "id": "uiux",
+    "label": "UIUX",
+    "localUrlKey": "VITE_UIUX_WEB_URL",
+    "path": "/"
+  },
+  {
+    "icon": "zetro",
+    "id": "zetro",
+    "label": "Zetro",
+    "localUrlKey": "VITE_ZETRO_WEB_URL",
+    "path": "/zetro"
+  },
+  {
+    "icon": "application",
+    "id": "zuno",
+    "label": "Zuno",
+    "localUrlKey": "VITE_ZUNO_WEB_URL",
+    "path": "/"
+  }
+] as const;

package/src/layouts/mdi-main/mdi-app-catalog.ts

@@ -0,0 +1,76 @@
+import {
+  BookOpenIcon,
+  BotIcon,
+  BoxesIcon,
+  PanelsTopLeftIcon,
+} from "lucide-react";
+
+import type { MdiAppItem } from "./mdi-types";
+import { mdiCatalogApplications } from "./mdi-app-catalog.generated";
+
+type MdiCatalogEntry = MdiAppItem & {
+  id: string;
+  localUrlKey: string;
+  path: string;
+};
+
+const icons = {
+  docs: BookOpenIcon,
+  platform: BoxesIcon,
+  uiux: PanelsTopLeftIcon,
+  zetro: BotIcon,
+};
+const mdiApplicationCatalog: readonly MdiCatalogEntry[] =
+  mdiCatalogApplications.map((application) => ({
+    icon: icons[application.icon as keyof typeof icons] ?? BoxesIcon,
+    id: application.id,
+    localUrlKey: application.localUrlKey,
+    label: application.label,
+    path: application.path,
+  }));
+
+export function createDefaultMdiApps(applicationId: string): MdiAppItem[] {
+  const currentLocation =
+    typeof window === "undefined" ? undefined : window.location;
+
+  return mdiApplicationCatalog.map(({ id, localUrlKey, path, ...app }) => ({
+    ...app,
+    active: isApplicationActive(id, applicationId),
+    href: createApplicationHref(
+      requiredEnvironmentPort(localUrlKey),
+      path,
+      currentLocation,
+    ),
+  }));
+}
+
+function requiredEnvironmentPort(key: string): string {
+  const value = import.meta.env[key];
+  if (!/^\d{1,5}$/u.test(value ?? ""))
+    throw new Error(`${key} must be a local port in the root .env file.`);
+  return value!;
+}
+
+function isApplicationActive(id: string, applicationId: string): boolean {
+  return id === applicationId;
+}
+
+function createApplicationHref(
+  localPort: string,
+  path: string,
+  currentLocation?: Location,
+): string {
+  if (!currentLocation || !isLocalHostname(currentLocation.hostname))
+    return path;
+
+  const target = new URL(currentLocation.origin);
+  target.port = localPort;
+  target.pathname = path;
+  target.search = "";
+  target.hash = "";
+  return target.toString();
+}
+
+function isLocalHostname(hostname: string): boolean {
+  return hostname === "127.0.0.1" || hostname === "localhost";
+}

package/src/layouts/mdi-main/mdi-app-switcher.tsx

@@ -0,0 +1,107 @@
+import { CheckIcon, XIcon } from 'lucide-react'
+import { useState } from 'react'
+
+import { Button } from '@devxcrew/react-ui/components/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@devxcrew/react-ui/components/popover'
+import { cn } from '@devxcrew/react-ui/lib/utils'
+import { TopologyMarker } from '../../features/interface-topology'
+
+import { mdiTopMenuButtonClassName } from './mdi-top-menu-control'
+import { useMdiTopology } from './mdi-topology'
+import type { MdiAppItem } from './mdi-types'
+
+export function MdiAppSwitcher({ apps }: { apps: MdiAppItem[] }) {
+  const [open, setOpen] = useState(false)
+  const topology = useMdiTopology()
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            size="icon"
+            className={cn(mdiTopMenuButtonClassName, topology.highlightClassName('01.5.1'))}
+            aria-label="Open applications"
+            {...topology.regionProps('01.5.1')}
+          />
+        }
+      >
+        <DotGrid />
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        sideOffset={9}
+        className={cn('w-88 gap-3 rounded-3xl p-4', topology.highlightClassName('01.5.2'))}
+        {...topology.regionProps('01.5.2')}
+      >
+        <TopologyMarker id="01.5.2" topology={topology} />
+        <div className="flex items-center justify-between px-2">
+          <h2 className="text-base font-semibold">Apps</h2>
+          <Button variant="ghost" size="icon-sm" onClick={() => setOpen(false)} aria-label="Close">
+            <XIcon />
+          </Button>
+        </div>
+        <div
+          className={cn(
+            'grid grid-cols-3 gap-x-3 gap-y-5 rounded-2xl border p-5',
+            topology.highlightClassName('01.5.3'),
+          )}
+          {...topology.regionProps('01.5.3')}
+        >
+          {apps.map((app) => (
+            <AppItem key={app.label} app={app} onClose={() => setOpen(false)} />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function DotGrid() {
+  return (
+    <span className="grid size-4 grid-cols-3 place-items-center gap-px" aria-hidden="true">
+      {Array.from({ length: 9 }, (_, index) => (
+        <span className="size-1 rounded-full bg-current" key={index} />
+      ))}
+    </span>
+  )
+}
+
+function AppItem({ app, onClose }: { app: MdiAppItem; onClose: () => void }) {
+  const Icon = app.icon
+  const content = (
+    <>
+      <span
+        className={cn(
+          'relative grid size-11 place-items-center rounded-xl border bg-background shadow-sm',
+          app.active && 'border-foreground/50 bg-muted',
+        )}
+      >
+        <Icon className="size-5" />
+        {app.active ? (
+          <span className="absolute -top-1 -right-1 grid size-4 place-items-center rounded-full bg-foreground text-background">
+            <CheckIcon className="size-2.5" />
+          </span>
+        ) : null}
+      </span>
+      <span className="text-sm font-medium">{app.label}</span>
+    </>
+  )
+  const className =
+    'flex min-w-0 flex-col items-center gap-2 rounded-xl p-1 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring'
+  const onClick = () => {
+    app.onSelect?.()
+    onClose()
+  }
+
+  return app.href ? (
+    <a className={className} href={app.href} onClick={onClick}>
+      {content}
+    </a>
+  ) : (
+    <button className={className} type="button" onClick={onClick}>
+      {content}
+    </button>
+  )
+}

package/src/layouts/mdi-main/mdi-feature-settings.tsx

@@ -0,0 +1,135 @@
+import { ArrowLeftIcon } from 'lucide-react';
+
+import { Button } from '@devxcrew/react-ui/components/button';
+import { Separator } from '@devxcrew/react-ui/components/separator';
+import { Switch } from '@devxcrew/react-ui/components/switch';
+import { TopologyMarker, TopologyRegion } from '../../features/interface-topology';
+
+import type { MdiFeatureKey, MdiFeatures } from './mdi-types';
+import { useMdiTopology } from './mdi-topology';
+
+const featureOptions: Array<{
+  agentWorkspaceOnly?: boolean;
+  description: string;
+  key: MdiFeatureKey;
+  label: string;
+  topologyId: string;
+}> = [
+  {
+    key: 'ito',
+    label: 'ITO inspection',
+    description: 'Show the Interface Topology inspection control above the status bar.',
+    topologyId: '06.2.0',
+  },
+  {
+    key: 'topMenu',
+    label: 'Top menu',
+    description: 'Show the application context, search, and account actions.',
+    topologyId: '06.2.1',
+  },
+  {
+    key: 'notifications',
+    label: 'Notifications',
+    description: 'Show the notification action in the top menu.',
+    topologyId: '06.2.2',
+  },
+  {
+    key: 'appSwitcher',
+    label: 'Application switcher',
+    description: 'Show the grid used to move between available applications.',
+    topologyId: '06.2.3',
+  },
+  {
+    key: 'profileMenu',
+    label: 'Profile menu',
+    description: 'Show the current user and account actions.',
+    topologyId: '06.2.4',
+  },
+  {
+    key: 'statusBar',
+    label: 'Workspace status bar',
+    description: 'Show workspace state along the bottom edge.',
+    topologyId: '06.2.5',
+  },
+  {
+    agentWorkspaceOnly: true,
+    key: 'primaryActivityRail',
+    label: 'Primary activity rail',
+    description: 'Show the fixed agent tools along the left edge of the workspace.',
+    topologyId: '06.2.6',
+  },
+  {
+    agentWorkspaceOnly: true,
+    key: 'secondaryUtilityRail',
+    label: 'Secondary utility rail',
+    description: 'Show supporting agent tools along the right edge of the workspace.',
+    topologyId: '06.2.7',
+  },
+];
+
+type MdiFeatureSettingsProps = {
+  features: MdiFeatures;
+  onBack: () => void;
+  onFeatureChange: (feature: MdiFeatureKey, enabled: boolean) => void;
+  showAgentWorkspaceOptions?: boolean;
+};
+
+export function MdiFeatureSettings({
+  features,
+  onBack,
+  onFeatureChange,
+  showAgentWorkspaceOptions = false,
+}: MdiFeatureSettingsProps) {
+  const topology = useMdiTopology();
+  const visibleOptions = featureOptions.filter((option) => !option.agentWorkspaceOnly || showAgentWorkspaceOptions);
+  return (
+    <section
+      className="relative h-full overflow-auto bg-background data-[ito-highlighted=true]:ring-2 data-[ito-highlighted=true]:ring-inset data-[ito-highlighted=true]:ring-violet-700"
+      aria-labelledby="mdi-features-title"
+      {...topology.regionProps('06')}
+    >
+      <TopologyMarker id="06" topology={topology} />
+      <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-6 py-10 lg:px-10">
+        <div className="flex items-start gap-4">
+          <TopologyRegion as="div" id="06.1" topology={topology}>
+            <Button variant="outline" size="icon" onClick={onBack} aria-label="Back to workspace">
+              <ArrowLeftIcon />
+            </Button>
+          </TopologyRegion>
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium text-muted-foreground">Settings</p>
+            <h1 id="mdi-features-title" className="text-2xl font-semibold tracking-tight">
+              Workspace features
+            </h1>
+            <p className="text-sm leading-6 text-muted-foreground">
+              Choose which shared MDI controls appear in this application.
+            </p>
+          </div>
+        </div>
+        <TopologyRegion as="div" className="flex flex-col" id="06.2" topology={topology}>
+          {visibleOptions.map((option, index) => (
+            <TopologyRegion as="div" id={option.topologyId} key={option.key} topology={topology}>
+              {index > 0 ? <Separator /> : null}
+              <div className="flex items-center gap-6 py-5">
+                <span className="flex min-w-0 flex-1 flex-col gap-1">
+                  <span id={`${option.key}-label`} className="text-sm font-semibold">
+                    {option.label}
+                  </span>
+                  <span id={`${option.key}-description`} className="text-sm leading-5 text-muted-foreground">
+                    {option.description}
+                  </span>
+                </span>
+                <Switch
+                  checked={features[option.key]}
+                  onCheckedChange={(enabled) => onFeatureChange(option.key, enabled)}
+                  aria-labelledby={`${option.key}-label`}
+                  aria-describedby={`${option.key}-description`}
+                />
+              </div>
+            </TopologyRegion>
+          ))}
+        </TopologyRegion>
+      </div>
+    </section>
+  );
+}

package/src/layouts/mdi-main/mdi-global-search.tsx

@@ -0,0 +1,192 @@
+import { SearchIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { Button } from '@devxcrew/react-ui/components/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@devxcrew/react-ui/components/command'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@devxcrew/react-ui/components/dialog'
+import { Kbd } from '@devxcrew/react-ui/components/kbd'
+import { cn } from '@devxcrew/react-ui/lib/utils'
+import { TopologyMarker } from '../../features/interface-topology'
+
+import { mdiTopMenuSurfaceClassName } from './mdi-top-menu-control'
+import { useMdiTopology } from './mdi-topology'
+import type { MdiAppItem, MdiNavigationItem, MdiNavigationSection } from './mdi-types'
+
+type MdiGlobalSearchProps = {
+  applicationName: string
+  apps: MdiAppItem[]
+  navigation: MdiNavigationSection[]
+  placeholder: string
+  value?: string
+  onSearchChange?: (value: string) => void
+}
+
+export function MdiGlobalSearch({
+  applicationName,
+  apps,
+  navigation,
+  placeholder,
+  value,
+  onSearchChange,
+}: MdiGlobalSearchProps) {
+  const [open, setOpen] = useState(false)
+  const topology = useMdiTopology()
+
+  useEffect(() => {
+    function handleShortcut(event: KeyboardEvent) {
+      if (!event.ctrlKey || event.key.toLowerCase() !== 'k') return
+      event.preventDefault()
+      setOpen((current) => !current)
+    }
+
+    window.addEventListener('keydown', handleShortcut)
+    return () => window.removeEventListener('keydown', handleShortcut)
+  }, [])
+
+  return (
+    <>
+      <Button
+        aria-keyshortcuts="Control+K"
+        aria-label="Open global search"
+        className={cn(
+          mdiTopMenuSurfaceClassName,
+          'h-9 gap-2 rounded-full px-2.5 text-sm font-medium sm:px-3',
+          topology.highlightClassName('01.3.1'),
+        )}
+        onClick={() => setOpen(true)}
+        variant="outline"
+        {...topology.regionProps('01.3.1')}
+      >
+        <SearchIcon className="size-4" />
+        <span className="hidden sm:inline">Search</span>
+        <Kbd className="hidden bg-muted-foreground/10 text-xs sm:inline-flex">Ctrl K</Kbd>
+      </Button>
+
+      <Dialog onOpenChange={setOpen} open={open}>
+        <DialogContent
+          className={cn(
+            'top-[14%] translate-y-0 overflow-hidden rounded-2xl! p-0 shadow-2xl sm:max-w-3xl',
+            topology.highlightClassName('01.3.2'),
+          )}
+          showCloseButton={false}
+          {...topology.regionProps('01.3.2')}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>Global search</DialogTitle>
+            <DialogDescription>
+              Search {applicationName} and open workspace destinations.
+            </DialogDescription>
+          </DialogHeader>
+          <TopologyMarker id="01.3.2" topology={topology} />
+          <Command>
+            <div
+              className={topology.highlightClassName('01.3.3')}
+              {...topology.regionProps('01.3.3')}
+            >
+              <CommandInput
+                autoFocus
+                onValueChange={onSearchChange}
+                placeholder={placeholder}
+                value={value}
+              />
+            </div>
+            <CommandList
+              className={topology.highlightClassName('01.3.4')}
+              {...topology.regionProps('01.3.4')}
+            >
+              <CommandEmpty>
+                {onSearchChange
+                  ? `Search results for ${applicationName} are updating in the workspace.`
+                  : 'No matching destination.'}
+              </CommandEmpty>
+              <NavigationGroup navigation={navigation} onClose={() => setOpen(false)} />
+              <ApplicationGroup apps={apps} onClose={() => setOpen(false)} />
+            </CommandList>
+            <div className="flex items-center justify-end gap-2 border-t px-3 py-2 text-xs text-muted-foreground">
+              <span>Close</span>
+              <Kbd>Esc</Kbd>
+            </div>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+function NavigationGroup({
+  navigation,
+  onClose,
+}: {
+  navigation: MdiNavigationSection[]
+  onClose: () => void
+}) {
+  const items = navigation.flatMap((section) => getNavigationLeaves(section.items))
+  if (items.length === 0) return null
+
+  return (
+    <CommandGroup heading="Current workspace">
+      {items.map((item) => (
+        <DestinationItem item={item} key={`${item.label}-${item.href ?? ''}`} onClose={onClose} />
+      ))}
+    </CommandGroup>
+  )
+}
+
+function getNavigationLeaves(items: MdiNavigationItem[]): MdiNavigationItem[] {
+  return items.flatMap((item) => {
+    const children = item.children ?? []
+    return children.length > 0 ? getNavigationLeaves(children) : [item]
+  })
+}
+
+function ApplicationGroup({ apps, onClose }: { apps: MdiAppItem[]; onClose: () => void }) {
+  return (
+    <CommandGroup heading="Applications">
+      {apps.map((app) => {
+        const Icon = app.icon
+        return (
+          <CommandItem
+            key={app.label}
+            onSelect={() => activateDestination(app, onClose)}
+            value={app.label}
+          >
+            <Icon />
+            <span>{app.label}</span>
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function DestinationItem({ item, onClose }: { item: MdiNavigationItem; onClose: () => void }) {
+  const Icon = item.icon
+  return (
+    <CommandItem onSelect={() => activateDestination(item, onClose)} value={item.label}>
+      {Icon ? <Icon /> : <span className="size-4" />}
+      <span>{item.label}</span>
+    </CommandItem>
+  )
+}
+
+function activateDestination(
+  destination: Pick<MdiAppItem, 'href' | 'onSelect'>,
+  onClose: () => void,
+) {
+  destination.onSelect?.()
+  if (destination.href) window.location.assign(destination.href)
+  onClose()
+}