@oxyhq/bloom 0.29.6 → 0.30.0

package/src/profile-card/ProfileCard.stories.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ProfileCard } from './index';
+import type { AvatarGroupItem } from '../avatar-group';
+import { BloomThemeProvider } from '../theme';
+import { Star_Filled_Corner0_Rounded as StarIcon } from '../icons/Star';
+
+/** Small colored square as a data-URI so stories are self-contained. */
+function token(color: string): string {
+  return `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' rx='20' fill='${color}'/></svg>`;
+}
+
+const TOP_TOKENS: AvatarGroupItem[] = [
+  { id: 'a', uri: token('gold') },
+  { id: 'b', uri: token('tomato') },
+  { id: 'c', uri: token('mediumseagreen') },
+  { id: 'd', uri: token('royalblue') },
+  { id: 'e', uri: token('orchid') },
+];
+
+const HERO = token('slateblue');
+
+function Badge() {
+  return (
+    <View
+      style={{
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        backgroundColor: 'gold',
+        borderWidth: 2,
+        borderColor: '#111',
+      }}
+    />
+  );
+}
+
+const trophy = <StarIcon size="sm" style={{ color: '#F5B301' }} />;
+
+function Gallery() {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 20, maxWidth: 780 }}>
+      {/* wallet — dot-grid meter */}
+      <ProfileCard
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        headlineIcon={trophy}
+        metric={{ kind: 'dots', label: 'Token diversity', filled: 34, total: 50 }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+
+      {/* wallet — progress + trophy */}
+      <ProfileCard
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        metric={{
+          kind: 'progress',
+          label: 'TX count 24h',
+          value: 192,
+          max: 350,
+          minLabel: '32',
+          maxLabel: '350',
+          icon: trophy,
+        }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+
+      {/* wallet — split bar % */}
+      <ProfileCard
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        metric={{
+          kind: 'split',
+          label: 'Net flow 24h',
+          percent: 62,
+          leftValue: '+$4,210',
+          rightValue: '-$2,560',
+        }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+
+      {/* social */}
+      <ProfileCard
+        variant="social"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Ada' }}
+        value="12,480"
+        subtitle="@ada"
+        metric={{ kind: 'progress', label: 'Weekly goal', value: 5, max: 7 }}
+        footer={{ label: 'Mutuals', items: TOP_TOKENS }}
+      />
+
+      {/* shopping */}
+      <ProfileCard
+        variant="shopping"
+        avatar={{ source: HERO, name: 'Store' }}
+        value="48 orders"
+        subtitle="This month"
+        metric={{ kind: 'dots', label: 'Categories', filled: 6, total: 12 }}
+        footer={{ label: 'Recent buyers', items: TOP_TOKENS }}
+      />
+
+      {/* stat (default) */}
+      <ProfileCard
+        variant="stat"
+        avatar={{ source: HERO, name: 'Score' }}
+        value="820"
+        subtitle="Trust score"
+        headlineIcon={trophy}
+        metric={{
+          kind: 'split',
+          label: 'Positive vs negative',
+          percent: 88,
+          leftValue: '880',
+          rightValue: '60',
+        }}
+      />
+    </View>
+  );
+}
+
+function WideGallery() {
+  return (
+    <View style={{ gap: 16, width: 420 }}>
+      <ProfileCard
+        layout="wide"
+        variant="wallet"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Wallet' }}
+        value="$167,395"
+        subtitle="*5bF5"
+        headlineIcon={trophy}
+        metric={{ kind: 'dots', label: 'Token diversity', filled: 34, total: 50 }}
+        footer={{ label: 'Top tokens', items: TOP_TOKENS }}
+      />
+      <ProfileCard
+        layout="wide"
+        variant="social"
+        avatar={{ source: HERO, badge: <Badge />, name: 'Ada' }}
+        value="12,480"
+        subtitle="@ada"
+        metric={{
+          kind: 'progress',
+          label: 'TX count 24h',
+          value: 192,
+          max: 350,
+          minLabel: '32',
+          maxLabel: '350',
+          icon: trophy,
+        }}
+        footer={{ label: 'Mutuals', items: TOP_TOKENS }}
+      />
+    </View>
+  );
+}
+
+const meta: Meta<typeof ProfileCard> = {
+  title: 'Data Display/ProfileCard',
+  component: ProfileCard,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProfileCard>;
+
+export const WidgetLight: Story = {
+  render: () => (
+    <BloomThemeProvider mode="light">
+      <View style={{ padding: 24 }}>
+        <Gallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const WidgetDark: Story = {
+  render: () => (
+    <BloomThemeProvider mode="dark">
+      <View style={{ padding: 24, backgroundColor: '#000' }}>
+        <Gallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const WideLight: Story = {
+  render: () => (
+    <BloomThemeProvider mode="light">
+      <View style={{ padding: 24 }}>
+        <WideGallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const WideDark: Story = {
+  render: () => (
+    <BloomThemeProvider mode="dark">
+      <View style={{ padding: 24, backgroundColor: '#000' }}>
+        <WideGallery />
+      </View>
+    </BloomThemeProvider>
+  ),
+};

package/src/profile-card/ProfileCard.tsx

@@ -0,0 +1,303 @@
+import React, { memo } from 'react';
+import { View, StyleSheet, type ViewStyle } from 'react-native';
+
+import { Card } from '../card';
+import { Avatar } from '../avatar';
+import { AvatarGroup } from '../avatar-group';
+import { DotGridMeter } from '../dot-grid-meter';
+import { StatBar } from '../stat-bar';
+import { Text } from '../typography';
+import { useTheme } from '../theme/use-theme';
+import type { ThemeColors } from '../theme/types';
+import type { AvatarRingConfig } from '../avatar/types';
+import type {
+  ProfileCardMetric,
+  ProfileCardProps,
+  ProfileCardVariant,
+} from './types';
+
+const WIDGET_WIDTH = 240;
+const CARD_PADDING = 16;
+const CARD_RADIUS = 24;
+const AVATAR_SIZE = 52;
+const FOOTER_AVATAR_SIZE = 28;
+
+interface VariantAccents {
+  ring: string;
+  fill: string;
+  dots: string;
+}
+
+function variantAccents(variant: ProfileCardVariant, colors: ThemeColors): VariantAccents {
+  switch (variant) {
+    case 'wallet':
+      return { ring: colors.success, fill: colors.primary, dots: colors.success };
+    case 'shopping':
+      return { ring: colors.info, fill: colors.info, dots: colors.info };
+    case 'social':
+      return { ring: colors.primary, fill: colors.primary, dots: colors.primary };
+    case 'stat':
+    default:
+      return { ring: colors.primary, fill: colors.primary, dots: colors.primary };
+  }
+}
+
+function AvatarWithBadge({
+  source,
+  name,
+  ring,
+  badge,
+}: {
+  source?: string | null;
+  name?: string;
+  ring: AvatarRingConfig;
+  badge?: React.ReactNode;
+}) {
+  return (
+    <View style={styles.avatarWrap}>
+      <Avatar source={source ?? undefined} name={name} size={AVATAR_SIZE} ring={ring} />
+      {badge != null && (
+        <View
+          style={[
+            styles.badge,
+            { width: Math.round(AVATAR_SIZE * 0.34), height: Math.round(AVATAR_SIZE * 0.34) },
+          ]}
+        >
+          {badge}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function MetricSection({
+  metric,
+  accents,
+  labelColor,
+}: {
+  metric: ProfileCardMetric;
+  accents: VariantAccents;
+  labelColor: string;
+}) {
+  switch (metric.kind) {
+    case 'dots':
+      return (
+        <View style={styles.section}>
+          {metric.label != null && (
+            <Text style={[styles.sectionLabel, { color: labelColor }]} numberOfLines={1}>
+              {metric.label}
+            </Text>
+          )}
+          <DotGridMeter
+            filled={metric.filled}
+            total={metric.total}
+            filledColor={metric.filledColor ?? accents.dots}
+          />
+        </View>
+      );
+    case 'progress':
+      return (
+        <StatBar
+          variant="progress"
+          label={metric.label}
+          value={metric.value}
+          max={metric.max}
+          minLabel={metric.minLabel}
+          maxLabel={metric.maxLabel}
+          icon={metric.icon}
+          fillColor={metric.fillColor ?? accents.fill}
+        />
+      );
+    case 'split':
+      return (
+        <StatBar
+          variant="split"
+          label={metric.label}
+          percent={metric.percent}
+          leftValue={metric.leftValue}
+          rightValue={metric.rightValue}
+          fillColor={metric.fillColor ?? accents.fill}
+        />
+      );
+    case 'custom':
+    default:
+      return <>{metric.node}</>;
+  }
+}
+
+/**
+ * A composed profile "widget" card — the Apple-Watch-style stat card. Fully
+ * app-agnostic: it takes pre-formatted strings, colors, and `ReactNode` icons
+ * (no domain/currency logic). Built on {@link Card}, {@link Avatar} (ring +
+ * badge), {@link DotGridMeter}/{@link StatBar}, and a {@link AvatarGroup} row.
+ *
+ * `variant` only picks sensible accent defaults (ring + metric fill); every
+ * accent stays overridable via the individual props.
+ */
+const ProfileCardComponent: React.FC<ProfileCardProps> = ({
+  layout = 'widget',
+  variant = 'stat',
+  avatar,
+  value,
+  subtitle,
+  headlineIcon,
+  metric,
+  footer,
+  onPress,
+  style,
+  testID,
+}) => {
+  const { colors } = useTheme();
+  const accents = variantAccents(variant, colors);
+  const isWide = layout === 'wide';
+
+  const ring: AvatarRingConfig = avatar.ring ?? { colors: accents.ring, width: 2, gap: 2 };
+
+  const surfaceStyle: ViewStyle = {
+    width: isWide ? '100%' : WIDGET_WIDTH,
+    padding: CARD_PADDING,
+    borderRadius: CARD_RADIUS,
+    borderCurve: 'continuous',
+  };
+
+  const headline = (
+    <>
+      <Text style={[styles.value, { color: colors.text }]} numberOfLines={1}>
+        {value}
+      </Text>
+      {subtitle != null && (
+        <Text style={[styles.subtitle, { color: colors.textTertiary }]} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      )}
+    </>
+  );
+
+  const metricNode =
+    metric != null ? (
+      <MetricSection metric={metric} accents={accents} labelColor={colors.textTertiary} />
+    ) : null;
+
+  const footerNode =
+    footer != null ? (
+      <View style={styles.section}>
+        {footer.label != null && (
+          <Text style={[styles.sectionLabel, { color: colors.textTertiary }]} numberOfLines={1}>
+            {footer.label}
+          </Text>
+        )}
+        <AvatarGroup
+          layout="row"
+          items={footer.items}
+          size={FOOTER_AVATAR_SIZE}
+          max={footer.max ?? 4}
+        />
+      </View>
+    ) : null;
+
+  return (
+    <Card
+      variant="filled"
+      onPress={onPress}
+      style={[surfaceStyle, style]}
+      testID={testID}
+    >
+      <View style={styles.body}>
+        {isWide ? (
+          <View style={styles.headerRowWide}>
+            <AvatarWithBadge
+              source={avatar.source}
+              name={avatar.name}
+              ring={ring}
+              badge={avatar.badge}
+            />
+            <View style={styles.wideValueRow}>
+              <View style={styles.headlineColumn}>{headline}</View>
+              {headlineIcon != null && <View style={styles.wideIcon}>{headlineIcon}</View>}
+            </View>
+          </View>
+        ) : (
+          <View style={styles.headerRow}>
+            <AvatarWithBadge
+              source={avatar.source}
+              name={avatar.name}
+              ring={ring}
+              badge={avatar.badge}
+            />
+            <View style={styles.headlineColumn}>{headline}</View>
+          </View>
+        )}
+
+        {metricNode}
+        {footerNode}
+      </View>
+
+      {!isWide && headlineIcon != null && <View style={styles.floatingIcon}>{headlineIcon}</View>}
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    gap: 16,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  headerRowWide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  headlineColumn: {
+    flex: 1,
+    minWidth: 0,
+  },
+  wideValueRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  wideIcon: {
+    marginLeft: 8,
+  },
+  value: {
+    fontSize: 26,
+    fontWeight: '800',
+    letterSpacing: -0.5,
+    fontVariant: ['tabular-nums'],
+  },
+  subtitle: {
+    marginTop: 2,
+    fontSize: 13,
+    fontVariant: ['tabular-nums'],
+  },
+  section: {
+    gap: 8,
+  },
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  avatarWrap: {
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    right: -2,
+    bottom: -2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  floatingIcon: {
+    position: 'absolute',
+    top: CARD_PADDING,
+    right: CARD_PADDING,
+  },
+});
+
+export const ProfileCard = memo(ProfileCardComponent);
+ProfileCard.displayName = 'ProfileCard';

package/src/profile-card/index.ts

@@ -0,0 +1,9 @@
+export { ProfileCard } from './ProfileCard';
+export type {
+  ProfileCardProps,
+  ProfileCardLayout,
+  ProfileCardVariant,
+  ProfileCardAvatar,
+  ProfileCardMetric,
+  ProfileCardFooter,
+} from './types';

package/src/profile-card/types.ts

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AvatarRingConfig } from '../avatar/types';
+import type { AvatarGroupItem } from '../avatar-group/types';
+
+export type ProfileCardLayout = 'widget' | 'wide';
+export type ProfileCardVariant = 'wallet' | 'social' | 'shopping' | 'stat';
+
+/** The avatar block of a {@link ProfileCard}. All values are consumer-supplied. */
+export interface ProfileCardAvatar {
+  /**
+   * Avatar value, routed into {@link Avatar}'s `source` prop — a full URL or a
+   * resolver-handled id (e.g. an Oxy file ID).
+   */
+  source?: string | null;
+  /** Decorative ring. Defaults to a solid ring in the variant accent color. */
+  ring?: AvatarRingConfig;
+  /** Badge overlay pinned to the avatar's bottom-right (e.g. a small logo). */
+  badge?: ReactNode;
+  /** Name used for the avatar's initial/placeholder and accessibility. */
+  name?: string;
+}
+
+/** The metric visual rendered below the headline. */
+export type ProfileCardMetric =
+  | { kind: 'dots'; label?: string; filled: number; total: number; filledColor?: string }
+  | {
+      kind: 'progress';
+      label: string;
+      value: number;
+      max: number;
+      minLabel?: string;
+      maxLabel?: string;
+      icon?: ReactNode;
+      fillColor?: string;
+    }
+  | {
+      kind: 'split';
+      label: string;
+      percent: number;
+      leftValue: string;
+      rightValue: string;
+      fillColor?: string;
+    }
+  | { kind: 'custom'; node: ReactNode };
+
+/** The trailing facepile row (e.g. "Top tokens"). */
+export interface ProfileCardFooter {
+  /** Small label above the row. */
+  label?: string;
+  /** Avatars rendered adjacent in a row. */
+  items: AvatarGroupItem[];
+  /** Maximum avatars before collapsing into `+N`. @default 4 */
+  max?: number;
+}
+
+export interface ProfileCardProps {
+  /**
+   * Card shape. `'widget'` is a compact ~square card; `'wide'` is a full-width
+   * card. @default 'widget'
+   */
+  layout?: ProfileCardLayout;
+  /**
+   * Selects sensible accent defaults (ring / metric fill). Every accent stays
+   * overridable per-element. @default 'stat'
+   */
+  variant?: ProfileCardVariant;
+  /** Avatar block. */
+  avatar: ProfileCardAvatar;
+  /** Pre-formatted headline value (e.g. a balance or count). */
+  value: string;
+  /** Secondary line under the headline. */
+  subtitle?: string;
+  /** Node floated at the card's top-right (e.g. a trophy or menu icon). */
+  headlineIcon?: ReactNode;
+  /** Metric visual below the headline. */
+  metric?: ProfileCardMetric;
+  /** Trailing facepile row. */
+  footer?: ProfileCardFooter;
+  /** Press handler — makes the whole card pressable. */
+  onPress?: () => void;
+  /** Container style override (merged over the card surface). */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/stat-bar/StatBar.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { StatBar } from './index';
+import { BloomThemeProvider } from '../theme';
+import { Star_Filled_Corner0_Rounded as StarIcon } from '../icons/Star';
+
+function Demo() {
+  return (
+    <View style={{ gap: 28 }}>
+      <StatBar
+        variant="progress"
+        label="TX count 24h"
+        value={192}
+        max={350}
+        minLabel="32"
+        maxLabel="350"
+        icon={<StarIcon size="sm" style={{ color: '#F59E0B' }} />}
+      />
+      <StatBar
+        variant="split"
+        label="Net flow 24h"
+        percent={62}
+        leftValue="+$4,210"
+        rightValue="-$2,560"
+        leftColor="#10B981"
+        rightColor="#EF4444"
+      />
+    </View>
+  );
+}
+
+const meta: Meta<typeof StatBar> = {
+  title: 'Data Display/StatBar',
+  component: StatBar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatBar>;
+
+export const Light: Story = {
+  render: () => (
+    <BloomThemeProvider mode="light">
+      <View style={{ padding: 24, width: 320 }}>
+        <Demo />
+      </View>
+    </BloomThemeProvider>
+  ),
+};
+
+export const Dark: Story = {
+  render: () => (
+    <BloomThemeProvider mode="dark">
+      <View style={{ padding: 24, width: 320, backgroundColor: '#000' }}>
+        <Demo />
+      </View>
+    </BloomThemeProvider>
+  ),
+};