@discourser/design-system 0.15.0 → 0.17.0

package/src/components/ScenarioQueue/AddScenarioDialog.tsx

@@ -0,0 +1,137 @@
+'use client'
+import type { ReactNode } from 'react'
+import { css } from 'styled-system/css'
+import * as Dialog from '../Dialog'
+
+interface AddScenarioDialogProps {
+  open: boolean
+  onClose: () => void
+  /** Render prop slot — consumer injects their scenario collection here. */
+  renderContent?: (props: { onClose: () => void }) => ReactNode
+  /** Called when user clicks "Browse More Scenarios" in the footer */
+  onBrowseMore?: () => void
+  /** Called when user clicks "Build Custom Scenario" in the footer */
+  onBuildCustom?: () => void
+}
+
+const dialogContentClass = css({
+  width: 'full',
+  maxWidth: '560px',
+  maxHeight: '80vh',
+  display: 'flex',
+  flexDirection: 'column',
+})
+
+const dialogBodyClass = css({
+  flex: '1',
+  overflowY: 'auto',
+  py: '0',
+  px: '6',
+})
+
+const footerLinkClass = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '1',
+  fontSize: 'sm',
+  color: 'primary.solid.bg',
+  fontWeight: 'medium',
+  textDecoration: 'none',
+  cursor: 'pointer',
+  bg: 'transparent',
+  border: 'none',
+  p: '0',
+  _hover: { textDecoration: 'underline' },
+  _focusVisible: { focusVisibleRing: 'outside' },
+})
+
+export function AddScenarioDialog({
+  open,
+  onClose,
+  renderContent,
+  onBrowseMore,
+  onBuildCustom,
+}: AddScenarioDialogProps) {
+  return (
+    <Dialog.Root open={open} onOpenChange={({ open: isOpen }) => !isOpen && onClose()}>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content className={dialogContentClass}>
+          <Dialog.Header>
+            <Dialog.Title>Add Scenario</Dialog.Title>
+            <Dialog.CloseTrigger asChild>
+              <button
+                aria-label="Close"
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 'l1',
+                  w: '6',
+                  h: '6',
+                  color: 'fg.muted',
+                  bg: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  fontSize: 'lg',
+                  _hover: { bg: 'neutral.subtle.bg', color: 'fg.default' },
+                })}
+              >
+                ✕
+              </button>
+            </Dialog.CloseTrigger>
+          </Dialog.Header>
+
+          {/* Scrollable body — consumer owns this content */}
+          <Dialog.Body className={dialogBodyClass}>
+            {renderContent ? (
+              renderContent({ onClose })
+            ) : (
+              // Storybook placeholder
+              <div
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  minH: '48',
+                  borderRadius: 'l2',
+                  bg: 'neutral.subtle.bg',
+                  color: 'fg.muted',
+                  fontSize: 'sm',
+                  borderWidth: '1px',
+                  borderStyle: 'dashed',
+                  borderColor: 'border.default',
+                })}
+              >
+                Scenario collection renders here
+              </div>
+            )}
+          </Dialog.Body>
+
+          <Dialog.Footer>
+            <button
+              type="button"
+              className={footerLinkClass}
+              onClick={() => {
+                onBrowseMore?.()
+                onClose()
+              }}
+            >
+              Browse More Scenarios →
+            </button>
+            <button
+              type="button"
+              className={footerLinkClass}
+              onClick={() => {
+                onBuildCustom?.()
+                onClose()
+              }}
+            >
+              Build Custom Scenario →
+            </button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  )
+}

package/src/components/ScenarioQueue/ScenarioCard.tsx

@@ -0,0 +1,120 @@
+'use client'
+import { type ComponentProps, forwardRef } from 'react'
+import { Box, Circle, HStack, VStack } from 'styled-system/jsx'
+import { scenarioCard } from 'styled-system/recipes'
+import * as Card from '../Card'
+import { ClockIcon } from '../Icons/ClockIcon'
+import { GripDotsVerticalIcon } from '../Icons/GripDotsVerticalIcon'
+import * as Switch from '../Switch'
+import {
+  type ScenarioCardProps,
+  difficultyLabel,
+} from './types'
+
+export interface ScenarioCardElementProps
+  extends ScenarioCardProps,
+    Omit<ComponentProps<'div'>, 'children'> {
+  /** Callback ref for the root element (used by ScenarioCardDraggable) */
+  rootRef?: (el: HTMLDivElement | null) => void
+  /** Callback ref for the drag handle (used by ScenarioCardDraggable) */
+  handleRef?: (el: HTMLDivElement | null) => void
+}
+
+export const ScenarioCard = forwardRef<HTMLDivElement, ScenarioCardElementProps>(
+  function ScenarioCard(
+    {
+      scenario,
+      position,
+      isActive,
+      showRequeueSwitch = false,
+      onRequeue,
+      isRepeat = false,
+      isDragging = false,
+      rootRef,
+      handleRef,
+      className: _className,
+      ...rest
+    },
+    _ref,
+  ) {
+    const styles = scenarioCard({ isActive, isDragging })
+
+    return (
+      <Card.Root
+        ref={rootRef}
+        className={styles.root}
+        variant="elevated"
+        css={{
+          boxShadow: '0px 2px 8px 0px rgba(167, 139, 250, 0.15)',
+          // neutral.surface.bg resolves to white in light mode; Figma uses neutral/99 (#FDFCF5)
+          bg: 'neutral.1',
+        }}
+        {...rest}
+      >
+        <VStack gap="2.5" pl="5" pr="3" py="2.5" alignItems="flex-start">
+          {/* Top row: drag handle (left) + position badge (right) — queue tab only */}
+          {!showRequeueSwitch && (
+            <HStack justify="space-between" alignItems="flex-start" w="full" py="2" pr="2.5">
+              <Box
+                ref={handleRef}
+                className={styles.dragHandle}
+                aria-label="Drag to reorder"
+              >
+                <GripDotsVerticalIcon w="9" h="10" aria-hidden="true" />
+              </Box>
+              <Circle
+                size={isActive ? "12" : "11"}
+                className={styles.positionBadge}
+                aria-label={`Position ${position}`}
+              >
+                {position}
+              </Circle>
+            </HStack>
+          )}
+
+          {/* Title */}
+          <Box px="1" py="1.5" w="full">
+            <p className={styles.title}>{scenario.title}</p>
+          </Box>
+
+          {/* Badge column: difficulty stacked above duration, matching Figma flex-col layout */}
+          <VStack gap="3" alignItems="flex-start" py="2.5">
+            <Box
+              className={styles.difficultyBadge}
+              data-difficulty={scenario.difficulty}
+            >
+              {difficultyLabel[scenario.difficulty]}
+            </Box>
+
+            <Box className={styles.durationBadge} data-difficulty={scenario.difficulty}>
+              <ClockIcon w="3" h="3" aria-hidden="true" />
+              {scenario.duration}
+            </Box>
+
+            {isRepeat && (
+              <Box className={styles.durationBadge} data-difficulty={scenario.difficulty}>Repeat</Box>
+            )}
+          </VStack>
+
+          {/* Re-queue switch row (completed tab only) */}
+          {showRequeueSwitch && (
+            <HStack className={styles.switchRow} justify="space-between">
+              <span className={styles.switchLabel}>Re-queue</span>
+              <Switch.Root
+                size="sm"
+                defaultChecked
+                onCheckedChange={(details) => {
+                  if (!details.checked) onRequeue?.(scenario.id)
+                }}
+                aria-label={`Re-queue ${scenario.title}`}
+              >
+                <Switch.HiddenInput />
+                <Switch.Control css={{ _checked: { bg: 'secondary.6' } }} />
+              </Switch.Root>
+            </HStack>
+          )}
+        </VStack>
+      </Card.Root>
+    )
+  },
+)

package/src/components/ScenarioQueue/ScenarioCardDraggable.tsx

@@ -0,0 +1,41 @@
+'use client'
+import { useSortable } from '@dnd-kit/react/sortable'
+import { ScenarioCard } from './ScenarioCard'
+import type { Scenario } from './types'
+
+interface ScenarioCardDraggableProps {
+  scenario: Scenario
+  /** 0-based index in the current list (required by useSortable) */
+  index: number
+  /** 1-based display position shown in the position badge */
+  position: number
+  /** Whether this is the active (first) card */
+  isActive: boolean
+  /** Whether this card was previously completed and re-queued */
+  isRepeat?: boolean
+}
+
+export function ScenarioCardDraggable({
+  scenario,
+  index,
+  position,
+  isActive,
+  isRepeat,
+}: ScenarioCardDraggableProps) {
+  const { ref, handleRef, isDragging } = useSortable({
+    id: scenario.id,
+    index,
+  })
+
+  return (
+    <ScenarioCard
+      scenario={scenario}
+      position={position}
+      isActive={isActive}
+      isDragging={isDragging}
+      isRepeat={isRepeat}
+      rootRef={ref}
+      handleRef={handleRef}
+    />
+  )
+}

package/src/components/ScenarioQueue/ScenarioQueue.figma.tsx

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { ScenarioQueue } from './ScenarioQueue';
+
+const scenarios = [
+  {
+    id: '1',
+    title: 'UX Research & Design Interview',
+    category: 'UX Design',
+    difficulty: 'beginner' as const,
+    duration: '10-15 min',
+    status: 'queued' as const,
+  },
+  {
+    id: '2',
+    title: 'Business Analysis ROI Design Presentation',
+    category: 'Business',
+    difficulty: 'intermediate' as const,
+    duration: '15-25 min',
+    status: 'queued' as const,
+  },
+  {
+    id: '3',
+    title: 'Product Redesign Challenge',
+    category: 'Product',
+    difficulty: 'advanced' as const,
+    duration: '25-35 min',
+    status: 'queued' as const,
+  },
+];
+
+figma.connect(
+  ScenarioQueue,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=478-5757',
+  {
+    example: () => <ScenarioQueue scenarios={scenarios} />,
+  },
+);