@oxy.so/bloom 2.8.0 → 2.10.0

package/src/creator-studio/AudienceOverview.tsx

@@ -0,0 +1,135 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+
+import { Sparkline } from '../chart-cards/primitives/Sparkline';
+import { RiBookmarkLine } from '../icons/remix/RiBookmarkLine';
+import { RiHeadphoneLine } from '../icons/remix/RiHeadphoneLine';
+import { RiPlayLine } from '../icons/remix/RiPlayLine';
+import { RiUserFollowLine } from '../icons/remix/RiUserFollowLine';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { StatCards } from '../stat-cards/StatCards';
+import type { StatCardsDeltaColor, StatCardsItem } from '../stat-cards/types';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveCreatorStudioPaint } from './shared';
+import type { AudienceMetricKind, AudienceOverviewProps, CreatorOption, CreatorTrend } from './types';
+
+/**
+ * `AudienceOverview`: the dashboard's opening row — a heading with a period
+ * `SegmentedControl`, over `StatCards` (plain) whose tiles carry a
+ * `Sparkline` accessory.
+ *
+ *   header   heading `headline-semibold` + optional caption `body-2-regular`
+ *            text-secondary; the switcher on the right, top-aligned. Below
+ *            560px of its OWN width the switcher drops under the heading
+ *   gap      16 between the header and the tiles
+ *   tiles    `StatCards` — 2 columns, 4 from a 1024px window
+ *   spark    72 × 28, the trend's status colour (up → positive, down →
+ *            negative, flat → text-tertiary), hidden from assistive tech: the
+ *            value and delta chip already say it
+ */
+
+export const AUDIENCE_PERIODS: readonly CreatorOption[] = [
+  { value: '7d', label: '7 days' },
+  { value: '28d', label: '28 days' },
+  { value: '12m', label: '12 months' },
+  { value: 'all', label: 'All time' },
+];
+
+const KIND_ICONS: Record<AudienceMetricKind, StatCardsItem['icon']> = {
+  listeners: RiHeadphoneLine,
+  streams: RiPlayLine,
+  followers: RiUserFollowLine,
+  saves: RiBookmarkLine,
+};
+
+/** A trend onto the stat card's delta colour. */
+export const TREND_DELTA_COLORS: Record<CreatorTrend, StatCardsDeltaColor> = {
+  up: 'lime',
+  down: 'rose',
+  flat: 'neutral',
+};
+
+const TREND_SPARK_TONES = { up: 'positive', down: 'negative', flat: 'neutral' } as const;
+
+/** Below this own width the switcher stacks under the heading. */
+const STACK_BELOW = 560;
+
+function AudienceOverviewComponent({
+  metrics,
+  period,
+  onPeriodChange,
+  periods = AUDIENCE_PERIODS,
+  title = 'Audience',
+  caption,
+  periodLabel = 'Period',
+  style,
+  testID,
+}: AudienceOverviewProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
+  const [width, setWidth] = useState(0);
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setWidth((prev) => (prev === next ? prev : next));
+  }, []);
+  const stacked = width > 0 && width < STACK_BELOW;
+
+  const stats = useMemo<StatCardsItem[]>(
+    () =>
+      metrics.map((metric) => ({
+        icon: metric.icon ?? KIND_ICONS[metric.kind],
+        label: metric.label,
+        value: metric.value,
+        delta: metric.delta,
+        deltaColor: TREND_DELTA_COLORS[metric.trend],
+        accessory:
+          metric.series && metric.series.length > 1 ? (
+            <Sparkline data={metric.series} tone={TREND_SPARK_TONES[metric.trend]} />
+          ) : undefined,
+      })),
+    [metrics],
+  );
+
+  return (
+    <View testID={testID} onLayout={onLayout} style={[styles.root, style]}>
+      <View style={stacked ? styles.headerStacked : styles.header}>
+        <View style={styles.heading}>
+          <Text variant="headline-semibold" role="heading" numberOfLines={1} style={{ color: paint.text }}>
+            {title}
+          </Text>
+          {caption ? (
+            <Text variant="body-2-regular" style={{ color: paint.textSecondary }}>
+              {caption}
+            </Text>
+          ) : null}
+        </View>
+        <View testID={testID ? `${testID}-period` : undefined} style={stacked ? styles.periodStacked : null}>
+          <SegmentedControl label={periodLabel} type="radio" size="small" value={period} onChange={onPeriodChange}>
+            {periods.map((option) => (
+              <SegmentedControlItem
+                key={option.value}
+                value={option.value}
+                testID={testID ? `${testID}-period-${option.value}` : undefined}
+              >
+                <SegmentedControlItemText>{option.label}</SegmentedControlItemText>
+              </SegmentedControlItem>
+            ))}
+          </SegmentedControl>
+        </View>
+      </View>
+      <StatCards stats={stats} testID={testID ? `${testID}-stats` : undefined} />
+    </View>
+  );
+}
+
+export const AudienceOverview = memo(AudienceOverviewComponent);
+AudienceOverview.displayName = 'AudienceOverview';
+
+const styles = StyleSheet.create({
+  root: { width: '100%', gap: 16 },
+  header: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 },
+  headerStacked: { flexDirection: 'column', alignItems: 'stretch', gap: 12 },
+  heading: { flexShrink: 1, minWidth: 0, gap: 2 },
+  periodStacked: { alignSelf: 'flex-start', maxWidth: '100%' },
+});

package/src/creator-studio/CreditsEditor.tsx

@@ -0,0 +1,184 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+
+import { Button } from '../button';
+import { RiAddLine } from '../icons/remix/RiAddLine';
+import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
+import {
+  Select,
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '../select';
+import { TextFieldInput } from '../text-field';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { DEFAULT_CREDIT_ROLES, resolveCreatorStudioPaint } from './shared';
+import type { CreditsEditorLabels, CreditsEditorProps, CreatorOption, TrackCredit } from './types';
+
+/**
+ * `CreditsEditor`: who wrote, produced and performed a track.
+ *
+ *   heading  `body-medium` title + an empty-state line (`body-2-regular`
+ *            text-secondary) while there are no credits
+ *   rows     8 apart: role `Select` (200 wide) · name `TextFieldInput` (fills) ·
+ *            a secondary delete icon button named "Remove credit <n>". Below 480px
+ *            of its own width the role takes its own line over name + delete
+ *   add      a secondary "Add credit" button with a plus glyph; the new row
+ *            takes the first role and an empty name
+ *
+ * Controlled: every change calls `onCreditsChange` with the whole list.
+ */
+
+export const CREDITS_EDITOR_LABELS: CreditsEditorLabels = {
+  title: 'Credits',
+  role: 'Role',
+  name: 'Name',
+  add: 'Add credit',
+  remove: (index, name) => (name ? `Remove credit ${index + 1}, ${name}` : `Remove credit ${index + 1}`),
+  empty: 'Credit the songwriters, producers and performers on this track.',
+};
+
+const STACK_BELOW = 480;
+let creditCounter = 0;
+
+function CreditsEditorComponent({
+  credits,
+  onCreditsChange,
+  roles = DEFAULT_CREDIT_ROLES,
+  createId,
+  disabled = false,
+  labels: labelOverrides,
+  style,
+  testID,
+}: CreditsEditorProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
+  const labels = { ...CREDITS_EDITOR_LABELS, ...labelOverrides };
+  const [width, setWidth] = useState(0);
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setWidth((prev) => (prev === next ? prev : next));
+  }, []);
+  const stacked = width > 0 && width < STACK_BELOW;
+  const createIdRef = useRef(createId);
+  createIdRef.current = createId;
+
+  const update = (id: string, patch: Partial<TrackCredit>) =>
+    onCreditsChange(credits.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+  const remove = (id: string) => onCreditsChange(credits.filter((c) => c.id !== id));
+  const add = () => {
+    const id = createIdRef.current ? createIdRef.current() : `credit-${Date.now()}-${creditCounter++}`;
+    onCreditsChange([...credits, { id, role: roles[0]?.value ?? '', name: '' }]);
+  };
+
+  return (
+    <View testID={testID} onLayout={onLayout} style={[styles.root, style]}>
+      <View style={styles.heading}>
+        <Text variant="body-medium" role="heading" style={{ color: paint.text }}>
+          {labels.title}
+        </Text>
+        {credits.length === 0 ? (
+          <Text variant="body-2-regular" style={{ color: paint.textSecondary }}>
+            {labels.empty}
+          </Text>
+        ) : null}
+      </View>
+
+      {credits.map((credit, index) => {
+        const roleSelect = (
+          <View style={stacked ? styles.roleStacked : styles.role}>
+            <Select
+              value={credit.role}
+              onValueChange={(role) => update(credit.id, { role })}
+              disabled={disabled}
+            >
+              <SelectTrigger
+                label={`${labels.role}, credit ${index + 1}`}
+                testID={testID ? `${testID}-role-${index}` : undefined}
+              >
+                <SelectValue placeholder={labels.role} />
+                <SelectIcon />
+              </SelectTrigger>
+              <SelectContent<CreatorOption>
+                label={labels.role}
+                items={roles}
+                renderItem={(item) => (
+                  <SelectItem value={item.value} label={item.label}>
+                    <SelectItemIndicator />
+                    <SelectItemText>{item.label}</SelectItemText>
+                  </SelectItem>
+                )}
+              />
+            </Select>
+          </View>
+        );
+        const nameAndRemove = (
+          <View style={styles.nameRow}>
+            <View style={styles.name}>
+              <TextFieldInput
+                label={`${labels.name}, credit ${index + 1}`}
+                placeholder={labels.name}
+                value={credit.name}
+                onChangeText={(name) => update(credit.id, { name })}
+                disabled={disabled}
+                testID={testID ? `${testID}-name-${index}` : undefined}
+              />
+            </View>
+            <Button
+              variant="secondary"
+              size="medium"
+              iconOnly
+              leadingIcon={RiDeleteBinLine}
+              disabled={disabled}
+              accessibilityLabel={labels.remove(index, credit.name)}
+              onPress={() => remove(credit.id)}
+              testID={testID ? `${testID}-remove-${index}` : undefined}
+            />
+          </View>
+        );
+        return (
+          <View
+            key={credit.id}
+            testID={testID ? `${testID}-row-${index}` : undefined}
+            style={stacked ? styles.rowStacked : styles.row}
+          >
+            {roleSelect}
+            {nameAndRemove}
+          </View>
+        );
+      })}
+
+      <Button
+        variant="secondary"
+        size="medium"
+        leadingIcon={RiAddLine}
+        onPress={add}
+        disabled={disabled}
+        style={styles.add}
+        testID={testID ? `${testID}-add` : undefined}
+      >
+        {labels.add}
+      </Button>
+    </View>
+  );
+}
+
+export const CreditsEditor = memo(CreditsEditorComponent);
+CreditsEditor.displayName = 'CreditsEditor';
+
+const styles = StyleSheet.create({
+  root: { width: '100%', gap: 8, minWidth: 0 },
+  heading: { gap: 2, marginBottom: 4 },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  rowStacked: { gap: 6 },
+  role: { width: 200, flexShrink: 0 },
+  roleStacked: { width: '100%' },
+  nameRow: { flexGrow: 1, flexShrink: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 4 },
+  name: { flex: 1, minWidth: 0 },
+  add: { alignSelf: 'flex-start', marginTop: 4 },
+});

package/src/creator-studio/MetadataFields.tsx

@@ -0,0 +1,169 @@
+import React, { memo, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { Button } from '../button';
+import { Chip } from '../chip';
+import { RiAddLine } from '../icons/remix/RiAddLine';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import {
+  TextField,
+  TextFieldHint,
+  TextFieldInput,
+  TextFieldLabel,
+} from '../text-field';
+import { useTheme } from '../theme/use-theme';
+import { addUnique, formatIsrc, isValidIsrc, normalizeIsrc, pressDataSet, resolveCreatorStudioPaint } from './shared';
+import type { ArtistChipsInputProps, IsrcFieldProps } from './types';
+
+/**
+ * `ArtistChipsInput`: a list of names as removable chips over an input.
+ *
+ *   label     `TextFieldLabel` (with the required asterisk)
+ *   chips     `Chip` medium, wrapping, 6 apart; each carries a 16px remove
+ *             glyph named "Remove <name>"
+ *   input     `TextField` + `TextFieldInput`; Enter (or the "Add" button)
+ *             adds the trimmed name once — case-insensitively unique — and
+ *             clears the input. At `max` the input and button disable
+ *   hint      `TextFieldHint` under it
+ */
+function ArtistChipsInputComponent({
+  label,
+  values,
+  onValuesChange,
+  placeholder,
+  hint,
+  max,
+  removeLabel = (name) => `Remove ${name}`,
+  addLabel = 'Add',
+  disabled = false,
+  required = false,
+  style,
+  testID,
+}: ArtistChipsInputProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
+  const [draft, setDraft] = useState('');
+  const full = max !== undefined && values.length >= max;
+  const blocked = disabled || full;
+
+  const commit = () => {
+    const next = addUnique(values, draft, max);
+    if (next.length !== values.length) onValuesChange(next);
+    setDraft('');
+  };
+
+  return (
+    <View testID={testID} style={[styles.field, style]}>
+      <TextFieldLabel required={required}>{label}</TextFieldLabel>
+      {values.length > 0 ? (
+        <View style={styles.chips} testID={testID ? `${testID}-chips` : undefined}>
+          {values.map((name) => (
+            <Chip
+              key={name}
+              size="medium"
+              variant="subtle"
+              disabled={disabled}
+              endIcon={
+                <Pressable
+                  {...pressDataSet()}
+                  accessibilityRole="button"
+                  accessibilityLabel={removeLabel(name)}
+                  disabled={disabled}
+                  hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
+                  onPress={() => onValuesChange(values.filter((v) => v !== name))}
+                  testID={testID ? `${testID}-remove-${name}` : undefined}
+                  style={styles.remove}
+                >
+                  <RiCloseLine width={14} height={14} fill={paint.textSecondary} />
+                </Pressable>
+              }
+            >
+              {name}
+            </Chip>
+          ))}
+        </View>
+      ) : null}
+      <View style={styles.inputRow}>
+        <TextField style={styles.input} disabled={blocked}>
+          <TextFieldInput
+            label={label}
+            value={draft}
+            onChangeText={setDraft}
+            placeholder={placeholder}
+            disabled={blocked}
+            returnKeyType="done"
+            submitBehavior="submit"
+            onSubmitEditing={commit}
+            testID={testID ? `${testID}-input` : undefined}
+          />
+        </TextField>
+        <Button
+          variant="secondary"
+          size="medium"
+          leadingIcon={RiAddLine}
+          disabled={blocked || draft.trim() === ''}
+          onPress={commit}
+          accessibilityLabel={`${addLabel} ${label.toLowerCase()}`}
+          testID={testID ? `${testID}-add` : undefined}
+        >
+          {addLabel}
+        </Button>
+      </View>
+      {hint ? <TextFieldHint>{hint}</TextFieldHint> : null}
+    </View>
+  );
+}
+
+export const ArtistChipsInput = memo(ArtistChipsInputComponent);
+ArtistChipsInput.displayName = 'ArtistChipsInput';
+
+/**
+ * `IsrcField`: the recording code, grouped `CC-XXX-YY-NNNNN` as it is typed
+ * (uppercased, anything but letters and digits dropped, 12 characters max).
+ * The hint shows the format; once 12 characters are in and they do not form a
+ * valid code, the field paints invalid and the hint turns into the message.
+ * `onChangeText` receives the grouped value.
+ */
+function IsrcFieldComponent({
+  value,
+  onChangeText,
+  label = 'ISRC',
+  hint = 'Format: CC-XXX-YY-NNNNN',
+  invalidMessage = 'That is not a valid ISRC',
+  disabled = false,
+  style,
+  testID,
+}: IsrcFieldProps) {
+  const complete = normalizeIsrc(value).length === 12;
+  const invalid = complete && !isValidIsrc(value);
+  return (
+    <View testID={testID} style={[styles.field, style]}>
+      <TextFieldLabel>{label}</TextFieldLabel>
+      <TextField isInvalid={invalid} disabled={disabled}>
+        <TextFieldInput
+          label={label}
+          value={value}
+          onChangeText={(text) => onChangeText(formatIsrc(text))}
+          placeholder="GB-XXX-26-00001"
+          autoCapitalize="characters"
+          autoCorrect={false}
+          disabled={disabled}
+          isInvalid={invalid}
+          testID={testID ? `${testID}-input` : undefined}
+        />
+      </TextField>
+      <TextFieldHint isInvalid={invalid}>{invalid ? invalidMessage : hint}</TextFieldHint>
+    </View>
+  );
+}
+
+export const IsrcField = memo(IsrcFieldComponent);
+IsrcField.displayName = 'IsrcField';
+
+const styles = StyleSheet.create({
+  field: { width: '100%', minWidth: 0 },
+  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginBottom: 8 },
+  remove: { alignItems: 'center', justifyContent: 'center', borderRadius: 9999 },
+  inputRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  input: { flex: 1, minWidth: 0 },
+});