@oxy.so/bloom 2.8.0 → 2.10.0

package/src/creator-studio/ReleaseCard.tsx

@@ -0,0 +1,292 @@
+import React, { memo, useMemo } from 'react';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
+
+import { mixColor, resolveButtonRamps } from '../button/shared';
+import { Button } from '../button';
+import { Chip } from '../chip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../dropdown-menu';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiAlbumLine } from '../icons/remix/RiAlbumLine';
+import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
+import { RiMoreFill } from '../icons/remix/RiMoreFill';
+import { useImageResolver } from '../image-resolver/context';
+import { useInteractiveWebCss } from '../styles/interactive-web-css';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  CARD_RADIUS,
+  COVER_RADIUS,
+  CREATOR_STUDIO_CSS,
+  CREATOR_STUDIO_STYLE_ID,
+  isImageUrl,
+  pressDataSet,
+  RELEASE_STATUS_LABELS,
+  RELEASE_STATUS_TONES,
+  RELEASE_TYPE_LABELS,
+  releaseStatusNeedsReason,
+  resolveCreatorStudioPaint,
+} from './shared';
+import type { ReleaseCardLabels, ReleaseCardProps, ReleaseStatusBadgeProps } from './types';
+
+/**
+ * `ReleaseStatusBadge`: a release's distribution status as a `Chip` — the
+ * tone per status is `RELEASE_STATUS_TONES` (draft default, in review warning,
+ * scheduled info, live success, rejected error, taken down error outlined).
+ */
+export function ReleaseStatusBadge({ status, label, size = 'small', testID }: ReleaseStatusBadgeProps) {
+  const { tone, fill } = RELEASE_STATUS_TONES[status];
+  return (
+    <Chip size={size} color={tone} variant={fill} testID={testID}>
+      {label ?? RELEASE_STATUS_LABELS[status]}
+    </Chip>
+  );
+}
+
+export const RELEASE_CARD_LABELS: ReleaseCardLabels = {
+  types: RELEASE_TYPE_LABELS,
+  statuses: RELEASE_STATUS_LABELS,
+  tracks: (count) => `${count} ${count === 1 ? 'track' : 'tracks'}`,
+  actions: (title) => `More actions for ${title}`,
+};
+
+/**
+ * `ReleaseCard`: one release in the catalog.
+ *
+ *   card     radius 16, padding 12 (longhands), background-secondary; hovering
+ *            the pressable part deepens it (neutral-200 at 50% / neutral-800)
+ *   grid     square cover (radius 12) → 12 → title `body-medium` + artist
+ *            `body-2-regular` → meta `caption-1-regular` text-tertiary
+ *            ("Single · 14 Mar 2026 · 4 tracks") → 10 → status badge and the
+ *            "⋯" menu button on one row
+ *   row      64px cover, the same text column, badge and menu on the right
+ *   reason   rejected / taken down with a `statusReason`: an error-tinted note
+ *            (radius 10, 16px warning glyph, `body-2-regular`) under the rest
+ *
+ * `onPress` makes the cover and text ONE pressable named by the title; the menu
+ * button is its sibling, never nested inside it.
+ */
+function ReleaseCardComponent({
+  release,
+  layout = 'grid',
+  onPress,
+  actions = [],
+  labels: labelOverrides,
+  style,
+  testID,
+}: ReleaseCardProps) {
+  const theme = useTheme();
+  useInteractiveWebCss(CREATOR_STUDIO_STYLE_ID, CREATOR_STUDIO_CSS);
+  const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
+  const hoverSurface = useMemo(() => {
+    const { neutral: n } = resolveButtonRamps(theme);
+    return theme.isDark ? n[800] : mixColor(paint.surface, n[200], 0.5);
+  }, [theme, paint.surface]);
+  const labels = { ...RELEASE_CARD_LABELS, ...labelOverrides };
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const resolver = useImageResolver();
+
+  const uri = release.artwork
+    ? isImageUrl(release.artwork)
+      ? release.artwork
+      : resolver?.(release.artwork, 'cover')
+    : undefined;
+  const row = layout === 'row';
+  const meta = [labels.types[release.type], release.releaseDate, labels.tracks(release.trackCount)].join(' · ');
+  const reason = releaseStatusNeedsReason(release.status) ? release.statusReason : undefined;
+
+  const cover = (
+    <View
+      testID={testID ? `${testID}-cover` : undefined}
+      style={[row ? styles.rowCover : styles.gridCover, { backgroundColor: paint.placeholder }]}
+    >
+      {uri ? (
+        <Image source={{ uri }} style={styles.coverImage} accessibilityIgnoresInvertColors />
+      ) : (
+        <RiAlbumLine width={row ? 24 : 40} height={row ? 24 : 40} fill={paint.placeholderIcon} />
+      )}
+    </View>
+  );
+
+  const text = (
+    <View style={styles.text}>
+      <Text variant="body-medium" numberOfLines={1} style={{ color: paint.text }}>
+        {release.title}
+      </Text>
+      {release.artist ? (
+        <Text variant="body-2-regular" numberOfLines={1} style={{ color: paint.textSecondary }}>
+          {release.artist}
+        </Text>
+      ) : null}
+      <Text variant="caption-1-regular" numberOfLines={1} style={{ color: paint.textTertiary, marginTop: 2 }}>
+        {meta}
+      </Text>
+    </View>
+  );
+
+  const main = (
+    <>
+      {cover}
+      {text}
+    </>
+  );
+
+  const ringStyle: WebCssStyle = { '--bloom-studio-ring': paint.accent };
+  const pressable = onPress ? (
+    <Pressable
+      {...pressDataSet()}
+      accessibilityRole="button"
+      accessibilityLabel={release.title}
+      onPress={onPress}
+      onHoverIn={onIn}
+      onHoverOut={onOut}
+      testID={testID ? `${testID}-open` : undefined}
+      style={[row ? styles.rowMain : styles.gridMain, ringStyle, { borderRadius: COVER_RADIUS }]}
+    >
+      {main}
+    </Pressable>
+  ) : (
+    <View style={row ? styles.rowMain : styles.gridMain}>{main}</View>
+  );
+
+  const menu =
+    actions.length > 0 ? (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild label={labels.actions(release.title)}>
+          <Button
+            variant="secondary"
+            size="small"
+            iconOnly
+            leadingIcon={RiMoreFill}
+            accessibilityLabel={labels.actions(release.title)}
+            testID={testID ? `${testID}-actions` : undefined}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent minWidth={180}>
+          {actions.map((action) => {
+            const Icon = action.icon;
+            return (
+              <DropdownMenuItem
+                key={action.label}
+                onPress={action.onPress}
+                disabled={action.disabled}
+                variant={action.destructive ? 'destructive' : 'default'}
+                leading={Icon ? <Icon width={16} height={16} fill={action.destructive ? paint.error : paint.textSecondary} /> : undefined}
+              >
+                {action.label}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ) : null;
+
+  const badge = (
+    <ReleaseStatusBadge
+      status={release.status}
+      label={labels.statuses[release.status]}
+      testID={testID ? `${testID}-status` : undefined}
+    />
+  );
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.card,
+        { backgroundColor: hovered ? hoverSurface : paint.surface },
+        style,
+      ]}
+    >
+      {row ? (
+        <View style={styles.rowLayout}>
+          {pressable}
+          <View style={styles.rowAside}>
+            {badge}
+            {menu}
+          </View>
+        </View>
+      ) : (
+        <>
+          {pressable}
+          <View style={styles.gridFooter}>
+            {badge}
+            {menu}
+          </View>
+        </>
+      )}
+      {reason ? (
+        <View
+          testID={testID ? `${testID}-reason` : undefined}
+          style={[styles.reason, { backgroundColor: paint.errorSurface }]}
+        >
+          <RiErrorWarningLine width={16} height={16} fill={paint.error} />
+          <Text variant="body-2-regular" style={[styles.reasonText, { color: paint.error }]}>
+            {reason}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ReleaseCard = memo(ReleaseCardComponent);
+ReleaseCard.displayName = 'ReleaseCard';
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: CARD_RADIUS,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 12,
+    paddingRight: 12,
+    gap: 10,
+    minWidth: 0,
+  },
+  gridMain: { gap: 12, minWidth: 0 },
+  gridCover: {
+    width: '100%',
+    aspectRatio: 1,
+    borderRadius: COVER_RADIUS,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowCover: {
+    width: 64,
+    height: 64,
+    borderRadius: COVER_RADIUS,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  coverImage: { width: '100%', height: '100%' },
+  text: { minWidth: 0, flexShrink: 1, gap: 2 },
+  gridFooter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    minHeight: 32,
+  },
+  rowLayout: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+  rowMain: { flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 12 },
+  rowAside: { flexDirection: 'row', alignItems: 'center', gap: 4, flexShrink: 0 },
+  reason: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    borderRadius: 10,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  reasonText: { flex: 1, minWidth: 0 },
+});

package/src/creator-studio/ReleaseTimeline.tsx

@@ -0,0 +1,216 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+
+import { RiCheckLine } from '../icons/remix/RiCheckLine';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveCreatorStudioPaint, type CreatorStudioPaint } from './shared';
+import type { ReleaseStep, ReleaseStepState, ReleaseTimelineProps } from './types';
+
+/**
+ * `ReleaseTimeline`: a release's distribution steps — Uploaded → Metadata →
+ * Artwork → Review → Scheduled → Live — with a state and a date each.
+ *
+ *   marker     24px disc: complete — accent fill, 14px white check;
+ *              current — accent 2px ring around an 8px accent dot;
+ *              upcoming — 2px neutral ring; error — error fill, white cross
+ *   connector  2px, accent after a complete step, track otherwise
+ *   vertical   marker column, 12 gap, label `body-medium` (`body-2-medium`
+ *              text-secondary when upcoming) + date `caption-1-regular`
+ *              text-tertiary on the right, description `body-2-regular` under
+ *              it (error colour on an error step); 16 between steps with the
+ *              connector running through the gap
+ *   horizontal markers on one line joined by connectors, each label and date
+ *              centred under its marker; the steps share the width equally.
+ *              Under 96px per step of its own width it renders vertically
+ *
+ * Assistive tech gets a list (`role="list"`) of items named
+ * "<label>, <state>, <date>"; the current step carries `aria-current="step"`.
+ */
+
+export const RELEASE_STEP_STATE_LABELS: Record<ReleaseStepState, string> = {
+  complete: 'complete',
+  current: 'in progress',
+  upcoming: 'not started',
+  error: 'needs attention',
+};
+
+const MARKER = 24;
+/** The narrowest a horizontal step may be before the timeline falls back to vertical. */
+const HORIZONTAL_STEP_MIN = 96;
+
+/** The spoken name of one step. */
+export function releaseStepAccessibilityLabel(
+  step: ReleaseStep,
+  stateLabels: Record<ReleaseStepState, string> = RELEASE_STEP_STATE_LABELS,
+): string {
+  return [step.label, stateLabels[step.state], step.date, step.description].filter(Boolean).join(', ');
+}
+
+function Marker({ state, paint }: { state: ReleaseStepState; paint: CreatorStudioPaint }) {
+  if (state === 'complete') {
+    return (
+      <View style={[styles.marker, { backgroundColor: paint.accent }]}>
+        <RiCheckLine width={14} height={14} fill={paint.onAccent} />
+      </View>
+    );
+  }
+  if (state === 'error') {
+    return (
+      <View style={[styles.marker, { backgroundColor: paint.error }]}>
+        <RiCloseLine width={14} height={14} fill="#fff" />
+      </View>
+    );
+  }
+  if (state === 'current') {
+    return (
+      <View style={[styles.marker, styles.ring, { borderColor: paint.accent }]}>
+        <View style={[styles.dot, { backgroundColor: paint.accent }]} />
+      </View>
+    );
+  }
+  return <View style={[styles.marker, styles.ring, { borderColor: paint.ring }]} />;
+}
+
+function ReleaseTimelineComponent({
+  steps,
+  orientation = 'vertical',
+  accessibilityLabel = 'Release progress',
+  stateLabels: stateOverrides,
+  style,
+  testID,
+}: ReleaseTimelineProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
+  const stateLabels = { ...RELEASE_STEP_STATE_LABELS, ...stateOverrides };
+  const [width, setWidth] = useState(0);
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setWidth((prev) => (prev === next ? prev : next));
+  }, []);
+  // A row of steps needs room for its labels; narrower than that it reads as a column.
+  const horizontal =
+    orientation === 'horizontal' && (width === 0 || width >= steps.length * HORIZONTAL_STEP_MIN);
+
+  return (
+    <View
+      onLayout={onLayout}
+      role="list"
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      style={[horizontal ? styles.rootHorizontal : styles.rootVertical, style]}
+    >
+      {steps.map((step, i) => {
+        const last = i === steps.length - 1;
+        const first = i === 0;
+        const muted = step.state === 'upcoming';
+        const connector = step.state === 'complete' ? paint.accent : paint.track;
+        const previousConnector = steps[i - 1]?.state === 'complete' ? paint.accent : paint.track;
+        const itemProps = {
+          role: 'listitem' as const,
+          accessibilityLabel: releaseStepAccessibilityLabel(step, stateLabels),
+          ...(step.state === 'current' ? { 'aria-current': 'step' as const } : null),
+          testID: testID ? `${testID}-step-${step.id}` : undefined,
+        };
+        const label = (
+          <Text
+            variant={muted ? 'body-2-medium' : 'body-medium'}
+            numberOfLines={horizontal ? 2 : 1}
+            style={[
+              { color: muted ? paint.textSecondary : paint.text },
+              horizontal ? styles.centerText : styles.flexText,
+            ]}
+          >
+            {step.label}
+          </Text>
+        );
+        const date = step.date ? (
+          <Text
+            variant="caption-1-regular"
+            numberOfLines={1}
+            style={[{ color: paint.textTertiary }, horizontal ? styles.centerText : null]}
+          >
+            {step.date}
+          </Text>
+        ) : null;
+        const description = step.description ? (
+          <Text
+            variant="body-2-regular"
+            style={[
+              { color: step.state === 'error' ? paint.error : paint.textSecondary },
+              horizontal ? styles.centerText : null,
+            ]}
+          >
+            {step.description}
+          </Text>
+        ) : null;
+
+        if (horizontal) {
+          return (
+            <View key={step.id} {...itemProps} style={styles.hItem}>
+              <View style={styles.hTrack}>
+                <View
+                  style={[styles.hConnector, { backgroundColor: first ? 'transparent' : previousConnector }]}
+                />
+                <Marker state={step.state} paint={paint} />
+                <View style={[styles.hConnector, { backgroundColor: last ? 'transparent' : connector }]} />
+              </View>
+              <View style={styles.hText}>
+                {label}
+                {date}
+                {description}
+              </View>
+            </View>
+          );
+        }
+
+        return (
+          <View key={step.id} {...itemProps} style={styles.vItem}>
+            <View style={styles.vRail}>
+              <Marker state={step.state} paint={paint} />
+              {last ? null : <View style={[styles.vConnector, { backgroundColor: connector }]} />}
+            </View>
+            <View style={[styles.vText, last ? null : styles.vTextGap]}>
+              <View style={styles.vHeading}>
+                {label}
+                {date}
+              </View>
+              {description}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+export const ReleaseTimeline = memo(ReleaseTimelineComponent);
+ReleaseTimeline.displayName = 'ReleaseTimeline';
+
+const styles = StyleSheet.create({
+  rootVertical: { width: '100%' },
+  rootHorizontal: { width: '100%', flexDirection: 'row', alignItems: 'flex-start' },
+  marker: {
+    width: MARKER,
+    height: MARKER,
+    borderRadius: MARKER / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  ring: { borderWidth: 2, backgroundColor: 'transparent' },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  vItem: { flexDirection: 'row', gap: 12 },
+  vRail: { width: MARKER, alignItems: 'center' },
+  vConnector: { width: 2, flexGrow: 1, minHeight: 16, marginTop: 4, marginBottom: 4, borderRadius: 1 },
+  vText: { flex: 1, minWidth: 0, gap: 2, paddingTop: 2 },
+  vTextGap: { paddingBottom: 16 },
+  vHeading: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 },
+  flexText: { flexShrink: 1 },
+  hItem: { flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0, alignItems: 'center', gap: 8 },
+  hTrack: { width: '100%', flexDirection: 'row', alignItems: 'center' },
+  hConnector: { flex: 1, height: 2 },
+  hText: { alignItems: 'center', gap: 2, paddingLeft: 4, paddingRight: 4 },
+  centerText: { textAlign: 'center' },
+});