@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/primitives/catalog-browse-card/CatalogBrowseCard.tsx

@@ -0,0 +1,121 @@
+import './catalog-browse-card.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
+
+export type CatalogBrowseCardVariant = 'cover' | 'row';
+
+export interface CatalogBrowseCardProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'children' | 'title'
+> {
+  description?: ReactNode;
+  icon?: string | undefined;
+  imageAlt?: string | undefined;
+  imageUrl?: string | null | undefined;
+  label: ReactNode;
+  /**
+   * Custom media content for the icon/cover region. When set, replaces the
+   * default `WorkbenchMediaSlot` (imageUrl / fallback icon).
+   */
+  media?: ReactNode;
+  /** Overlay content inside the media region (badges, status chips, etc.). */
+  mediaOverlay?: ReactNode;
+  meta?: ReactNode;
+  selected?: boolean | undefined;
+  /**
+   * Secondary actions outside the primary hit target (for example Assign).
+   * When set, the root becomes a non-button container and click/drag handlers
+   * apply to the main control only.
+   */
+  trailing?: ReactNode;
+  tooltip?: string | undefined;
+  variant?: CatalogBrowseCardVariant | undefined;
+}
+
+export function CatalogBrowseCard({
+  className,
+  description,
+  icon = 'library',
+  imageAlt,
+  imageUrl = null,
+  label,
+  media,
+  mediaOverlay,
+  meta,
+  selected = false,
+  tooltip,
+  trailing,
+  type = 'button',
+  variant = 'row',
+  ...props
+}: CatalogBrowseCardProps) {
+  const hasDescription = description !== undefined && description !== null && description !== '';
+  const hasMeta = meta !== undefined && meta !== null && meta !== '';
+  const hasMediaOverlay = mediaOverlay !== undefined && mediaOverlay !== null;
+  const hasCustomMedia = media !== undefined && media !== null;
+  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;
+
+  const mediaRegion = (
+    <span
+      aria-hidden={hasMediaOverlay ? undefined : true}
+      className={cx(
+        'ui-catalog-browse-card__icon',
+        hasMediaOverlay && 'ui-catalog-browse-card__icon--overlay',
+      )}
+    >
+      {hasCustomMedia ? (
+        <span className="ui-catalog-browse-card__media-custom">{media}</span>
+      ) : (
+        <WorkbenchMediaSlot
+          alt={imageAlt}
+          className="ui-catalog-browse-card__media"
+          fallbackIcon={icon}
+          imageClassName="ui-catalog-browse-card__image"
+          imageUrl={imageUrl}
+        />
+      )}
+      {hasMediaOverlay ? (
+        <span className="ui-catalog-browse-card__media-overlay">{mediaOverlay}</span>
+      ) : null}
+    </span>
+  );
+
+  const bodyRegion = (
+    <span className="ui-catalog-browse-card__body">
+      <span className="ui-catalog-browse-card__title">{label}</span>
+      {hasMeta ? <span className="ui-catalog-browse-card__meta">{meta}</span> : null}
+      {hasDescription ? (
+        <span className="ui-catalog-browse-card__description">{description}</span>
+      ) : null}
+    </span>
+  );
+
+  const rootClassName = cx(
+    'ui-catalog-browse-card',
+    variant === 'cover' && 'ui-catalog-browse-card--cover',
+    selected && 'ui-catalog-browse-card--selected',
+    hasTrailing && 'ui-catalog-browse-card--with-trailing',
+    className,
+  );
+
+  if (!hasTrailing) {
+    return (
+      <button className={rootClassName} type={type} title={tooltip} {...props}>
+        {mediaRegion}
+        {bodyRegion}
+      </button>
+    );
+  }
+
+  return (
+    <div className={rootClassName}>
+      <button className="ui-catalog-browse-card__main" type={type} title={tooltip} {...props}>
+        {mediaRegion}
+        {bodyRegion}
+      </button>
+      <div className="ui-catalog-browse-card__trailing">{trailing}</div>
+    </div>
+  );
+}

package/src/primitives/catalog-browse-card/catalog-browse-card.css

@@ -0,0 +1,175 @@
+.ui-catalog-browse-card {
+  align-content: start;
+  background: var(
+    --shell-color-surface-raised,
+    var(--color-surface-raised, rgba(255, 255, 255, 0.04))
+  );
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+  border-radius: var(--shell-radius-md, 6px);
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  grid-template-columns: auto 1fr;
+  min-height: 96px;
+  padding: var(--shell-spacing-panel-sm, 10px);
+  text-align: start;
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.ui-catalog-browse-card:hover,
+.ui-catalog-browse-card--with-trailing:hover {
+  background: var(
+    --shell-color-surface-hover,
+    var(--color-surface-hover, rgba(255, 255, 255, 0.06))
+  );
+  border-color: var(
+    --shell-color-border-strong,
+    var(--color-border-strong, rgba(255, 255, 255, 0.16))
+  );
+}
+
+.ui-catalog-browse-card:focus-visible,
+.ui-catalog-browse-card--with-trailing:focus-within {
+  outline: 2px solid var(--shell-color-focus-border, var(--color-focus-border));
+  outline-offset: 1px;
+}
+
+.ui-catalog-browse-card--with-trailing {
+  align-items: stretch;
+  cursor: default;
+  display: flex;
+  flex-direction: row;
+  grid-template-columns: none;
+}
+
+.ui-catalog-browse-card--with-trailing.ui-catalog-browse-card--cover {
+  flex-direction: column;
+}
+
+.ui-catalog-browse-card__main {
+  align-content: start;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  flex: 1 1 auto;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  grid-template-columns: auto 1fr;
+  min-width: 0;
+  padding: 0;
+  text-align: start;
+}
+
+.ui-catalog-browse-card--cover .ui-catalog-browse-card__main {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  width: 100%;
+}
+
+.ui-catalog-browse-card__main:focus {
+  outline: none;
+}
+
+.ui-catalog-browse-card__trailing {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+}
+
+.ui-catalog-browse-card--cover .ui-catalog-browse-card__trailing {
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.ui-catalog-browse-card--selected {
+  background: var(--shell-color-list-active, var(--color-list-active, rgba(255, 255, 255, 0.08)));
+  border-color: var(--shell-color-focus-border, var(--color-focus-border));
+}
+
+.ui-catalog-browse-card__icon {
+  align-items: center;
+  background: var(--shell-color-surface-sunken, rgba(255, 255, 255, 0.03));
+  border-radius: var(--shell-radius-sm, 4px);
+  color: var(--shell-color-text-muted, var(--color-text-muted));
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 32px;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 32px;
+}
+
+.ui-catalog-browse-card__media,
+.ui-catalog-browse-card__media-custom {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-catalog-browse-card__media-custom {
+  display: block;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ui-catalog-browse-card__media-overlay {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+}
+
+.ui-catalog-browse-card__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-catalog-browse-card--cover {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 220px;
+}
+
+.ui-catalog-browse-card--cover .ui-catalog-browse-card__icon {
+  width: 100%;
+  height: 120px;
+  font-size: 36px;
+}
+
+.ui-catalog-browse-card__body {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ui-catalog-browse-card__title {
+  font-size: var(--shell-font-size-body, 0.875rem);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-catalog-browse-card__meta,
+.ui-catalog-browse-card__description {
+  color: var(--shell-color-text-muted, var(--color-text-muted));
+  font-size: var(--shell-font-size-caption, 0.75rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ui-catalog-browse-card__description {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  white-space: normal;
+}

package/src/primitives/catalog-browse-card/index.ts

@@ -0,0 +1 @@
+export * from './CatalogBrowseCard';

package/src/primitives/catalog-browse-pane/CatalogBrowseFacetChips.tsx

@@ -0,0 +1,59 @@
+import './catalog-browse-facet-chips.css';
+import type { ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { Chip } from '../chip/Chip';
+
+export interface CatalogBrowseFacetOption {
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface CatalogBrowseFacetChipsProps {
+  readonly allLabel: string;
+  readonly ariaLabel: string;
+  readonly className?: string;
+  readonly onChange: (value: string | 'all') => void;
+  readonly options: ReadonlyArray<CatalogBrowseFacetOption>;
+  readonly value: string | 'all';
+}
+
+/**
+ * Simple single-select chip facet for `CatalogBrowsePane.facetStrip`.
+ * Prefer `LibraryFacetFilterStrip` for multi-field catalog facets.
+ */
+export function CatalogBrowseFacetChips({
+  allLabel,
+  ariaLabel,
+  className,
+  onChange,
+  options,
+  value,
+}: CatalogBrowseFacetChipsProps): ReactNode {
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cx('ui-catalog-browse-facet-chips', className)}
+      role="toolbar"
+    >
+      <Chip
+        aria-pressed={value === 'all'}
+        className={value === 'all' ? 'ui-chip--selected' : undefined}
+        label={allLabel}
+        onClick={() => onChange('all')}
+      />
+      {options.map((option) => {
+        const active = value === option.id;
+        return (
+          <Chip
+            aria-pressed={active}
+            className={active ? 'ui-chip--selected' : undefined}
+            key={option.id}
+            label={option.label}
+            onClick={() => onChange(option.id)}
+          />
+        );
+      })}
+    </div>
+  );
+}