@umituz/web-design-system 6.14.0 → 6.16.0

package/src/presentation/molecules/EntityRow.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Link } from 'react-router';
+import { cn } from '../../infrastructure/utils';
+
+export interface EntityRowProps {
+  icon: ReactNode;
+  title: ReactNode;
+  meta?: ReactNode[];
+  badge?: ReactNode;
+  aside?: ReactNode;
+  to?: string;
+  highlight?: boolean;
+  className?: string;
+  onClick?: () => void;
+  children?: ReactNode;
+}
+
+export const EntityRow = forwardRef<HTMLLIElement, EntityRowProps>(
+  (
+    {
+      icon,
+      title,
+      meta,
+      badge,
+      aside,
+      to,
+      highlight = false,
+      className,
+      onClick,
+      children,
+    },
+    ref
+  ) => {
+    const content = (
+      <>
+        <span className="entity-row-icon" aria-hidden="true">
+          {icon}
+        </span>
+        <span className="entity-row-main">
+          <span className={cn('entity-row-title', highlight && 'highlight')}>
+            {title}
+            {highlight && <span className="entity-row-dot" role="img" aria-label="Unread" />}
+          </span>
+          {meta?.map((line, index) => (
+            <span key={index} className="entity-row-meta">
+              {line}
+            </span>
+          ))}
+          {children}
+        </span>
+        {badge && <span className="entity-row-badge">{badge}</span>}
+        {aside && <span className="entity-row-aside">{aside}</span>}
+      </>
+    );
+
+    const rowClasses = cn('entity-row', highlight && 'highlight', className);
+
+    if (to) {
+      return (
+        <li ref={ref} className="list-none">
+          <Link to={to} className={rowClasses} onClick={onClick}>
+            {content}
+          </Link>
+        </li>
+      );
+    }
+
+    return (
+      <li ref={ref} className={rowClasses} onClick={onClick}>
+        {content}
+      </li>
+    );
+  }
+);
+
+EntityRow.displayName = 'EntityRow';

package/src/presentation/molecules/PlaceholderPanel.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+
+export interface PlaceholderPanelProps {
+  step: string;
+  title: string;
+  description: string;
+  capabilities: string[];
+  children?: ReactNode;
+  className?: string;
+}
+
+export function PlaceholderPanel({
+  step,
+  title,
+  description,
+  capabilities,
+  children,
+  className,
+}: PlaceholderPanelProps) {
+  return (
+    <section className={cn('placeholder-panel', className)} aria-label={title}>
+      <div>
+        <span className="placeholder-panel-step">Roadmap · {step}</span>
+        <h2 className="placeholder-panel-title">{title}</h2>
+        <p className="placeholder-panel-desc">{description}</p>
+      </div>
+      <ul className="placeholder-panel-caps">
+        {capabilities.map((capability) => (
+          <li key={capability} className="placeholder-panel-cap">
+            <Check size={15} className="placeholder-panel-check" aria-hidden="true" />
+            {capability}
+          </li>
+        ))}
+      </ul>
+      {children}
+    </section>
+  );
+}

package/src/presentation/molecules/index.ts

@@ -93,3 +93,12 @@ export type { TabNavProps, TabNavItem } from './TabNav';
 
 export { FilterSelect } from './FilterSelect';
 export type { FilterSelectProps, FilterSelectOption } from './FilterSelect';
+
+export { EntityRow } from './EntityRow';
+export type { EntityRowProps } from './EntityRow';
+
+export { PlaceholderPanel } from './PlaceholderPanel';
+export type { PlaceholderPanelProps } from './PlaceholderPanel';
+
+export { ConditionPips } from './ConditionPips';
+export type { ConditionPipsProps } from './ConditionPips';