@discourser/design-system 0.15.0 → 0.15.1

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { createStyleContext } from 'styled-system/jsx'
+import { breadcrumb } from 'styled-system/recipes'
+
+const ChevronRightIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m9 18 6-6-6-6"></path>
+  </svg>
+)
+
+const { withProvider, withContext } = createStyleContext(breadcrumb)
+
+export type RootProps = ComponentProps<typeof Root>
+
+export const Root = withProvider(ark.nav, 'root', { defaultProps: { 'aria-label': 'breadcrumb' } })
+export const List = withContext(ark.ol, 'list')
+export const Item = withContext(ark.li, 'item')
+export const Link = withContext(ark.a, 'link')
+export const Ellipsis = withContext(ark.li, 'ellipsis', {
+  defaultProps: {
+    role: 'presentation',
+    'aria-hidden': true,
+    children: '...',
+  },
+})
+
+export const Separator = withContext(ark.li, 'separator', {
+  defaultProps: {
+    'aria-hidden': true,
+    children: <ChevronRightIcon />,
+  },
+})

package/src/components/Icons/ClockIcon.tsx

@@ -0,0 +1,40 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+
+const StyledSvg = styled(ark.svg)
+
+export type ClockIconProps = ComponentProps<typeof StyledSvg>
+
+export const ClockIcon = (props: ClockIconProps) => (
+  <StyledSvg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 6V12"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.24 16.24L12 12"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StyledSvg>
+)

package/src/components/Icons/GripDotsVerticalIcon.tsx

@@ -0,0 +1,26 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+
+const StyledSvg = styled(ark.svg)
+
+export type GripDotsVerticalIconProps = ComponentProps<typeof StyledSvg>
+
+export const GripDotsVerticalIcon = (props: GripDotsVerticalIconProps) => (
+  <StyledSvg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M9 6H9.01M15 6H15.01M15 12H15.01M9 12H9.01M9 18H9.01M15 18H15.01M10 6C10 6.55228 9.55228 7 9 7C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5C9.55228 5 10 5.44772 10 6ZM16 6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6C14 5.44772 14.4477 5 15 5C15.5523 5 16 5.44772 16 6ZM10 12C10 12.5523 9.55228 13 9 13C8.44772 13 8 12.5523 8 12C8 11.4477 8.44772 11 9 11C9.55228 11 10 11.4477 10 12ZM16 12C16 12.5523 15.5523 13 15 13C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11C15.5523 11 16 11.4477 16 12ZM10 18C10 18.5523 9.55228 19 9 19C8.44772 19 8 18.5523 8 18C8 17.4477 8.44772 17 9 17C9.55228 17 10 17.4477 10 18ZM16 18C16 18.5523 15.5523 19 15 19C14.4477 19 14 18.5523 14 18C14 17.4477 14.4477 17 15 17C15.5523 17 16 17.4477 16 18Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StyledSvg>
+)

package/src/components/Icons/index.ts

@@ -0,0 +1,2 @@
+export { GripDotsVerticalIcon, type GripDotsVerticalIconProps } from './GripDotsVerticalIcon'
+export { ClockIcon, type ClockIconProps } from './ClockIcon'

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}
+    />
+  )
+}