@oxy.so/bloom 6.4.0 → 7.0.0

package/src/project-board/ProjectBoardControls.tsx

@@ -0,0 +1,254 @@
+import type { ReactNode } from 'react';
+import { useMessages } from '../locale/messages';
+import { BoardTooltip } from './BoardTooltip';
+import { PRIORITIES, cx } from './constants';
+import { useProjectBoardPlatform } from './context';
+import { PROJECT_BOARD_MESSAGES } from './messages';
+import {
+  SourcePressable as Pressable,
+  RiCheckLine,
+  RiEqualizerLine,
+  RiSideBarLine,
+  RiSortDesc,
+  SourceText as Text,
+  SourceView as View,
+} from './SourcePrimitives';
+import type { BoardSort, TicketPriority } from './types';
+export { PRIORITIES } from './constants';
+const TRIGGER =
+  'relative flex size-9 shrink-0 items-center justify-center rounded-2lg border border-border-button-default bg-background-primary-default text-foreground-icon-primary shadow-xs transition-colors hover:border-border-button-hover hover:bg-background-primary-hover';
+const MENU = 'w-[220px] rounded-[14px] p-1';
+const ROW = 'rounded-2lg px-2 py-1.5 text-body-medium';
+export function PropertySelect({
+  label,
+  value,
+  options,
+  onChange,
+  renderValue,
+  leading,
+  create = false,
+  chip = false,
+}: {
+  label: string;
+  value: string;
+  options: readonly {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    hideLabel?: boolean;
+  }[];
+  onChange: (v: string) => void;
+  renderValue?: ReactNode;
+  leading?: ReactNode;
+  create?: boolean;
+  chip?: boolean;
+}) {
+  const {
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectContent,
+    SelectItem,
+    SelectItemText,
+    SelectItemIndicator,
+  } = useProjectBoardPlatform();
+  return (
+    <Select size="sm" value={value} onValueChange={onChange}>
+      <SelectTrigger asChild label={label}>
+        <Pressable
+          accessibilityLabel={label}
+          className={
+            create
+              ? 'w-auto justify-start rounded-md border-0 bg-transparent p-0 text-body-medium text-text-secondary shadow-none hover:bg-background-primary-hover [&>svg]:hidden'
+              : cx(
+                  'w-auto min-w-0 justify-start rounded-md border-0 bg-transparent p-1 text-body-medium text-text-primary shadow-none [&>svg]:hidden',
+                  chip
+                    ? 'group/priority hover:bg-transparent'
+                    : 'hover:bg-background-primary-hover',
+                )
+          }
+          style={{
+            flexShrink: 0,
+            flexDirection: 'row',
+            margin: create ? 0 : -4,
+          }}
+        >
+          {renderValue ?? <SelectValue leading={leading} placeholder={label} />}
+        </Pressable>
+      </SelectTrigger>
+      <SelectContent
+        label={label}
+        className={
+          create ? 'z-[110] w-[220px]' : 'z-[120] w-[220px] rounded-[14px] p-1'
+        }
+        items={options}
+        valueExtractor={(item) => item.id}
+        width={220}
+        renderItem={(item) => (
+          <SelectItem
+            value={item.id}
+            label={item.label}
+            className="px-2 py-1.5 text-body-medium"
+          >
+            {item.icon}
+            {!item.hideLabel && <SelectItemText>{item.label}</SelectItemText>}
+            <SelectItemIndicator />
+          </SelectItem>
+        )}
+      />
+    </Select>
+  );
+}
+export function ProjectBoardControls({
+  sort,
+  onSort,
+  priority,
+  onPriority,
+  project,
+  onProject,
+  projects,
+  showDone,
+  onShowDone,
+  fillColumns,
+  onFillColumns,
+}: {
+  sort: BoardSort;
+  onSort: (s: BoardSort) => void;
+  priority: TicketPriority | 'all';
+  onPriority: (p: TicketPriority | 'all') => void;
+  project: string;
+  onProject: (p: string) => void;
+  projects: readonly string[];
+  showDone: boolean;
+  onShowDone: (v: boolean) => void;
+  fillColumns: boolean;
+  onFillColumns: (v: boolean) => void;
+}) {
+  const { messages: m } = useMessages(PROJECT_BOARD_MESSAGES);
+  const {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+  } = useProjectBoardPlatform();
+  const filtered = priority !== 'all' || project !== 'all';
+  const trigger = (label: string, icon: ReactNode, active = false) => (
+    <BoardTooltip label={label}>
+      <DropdownMenuTrigger asChild>
+        <Pressable accessibilityLabel={label} className={TRIGGER}>
+          {icon}
+          {active && (
+            <View className="absolute -top-0.5 -end-0.5 size-2 rounded-full bg-accent-500 ring-2 ring-background-full" />
+          )}
+        </Pressable>
+      </DropdownMenuTrigger>
+    </BoardTooltip>
+  );
+  const option = (
+    label: string,
+    selected: boolean,
+    run: () => void,
+    key: string,
+  ) => (
+    <DropdownMenuItem key={key} onPress={run} className={ROW}>
+      <Text className="flex-1 text-body-medium text-text-primary">{label}</Text>
+      {selected && <RiCheckLine className="size-4" />}
+    </DropdownMenuItem>
+  );
+  return (
+    <View className="flex items-center gap-2" accessibilityLabel={m.controls}>
+      <DropdownMenu>
+        {trigger(
+          m.sortTickets,
+          <RiSortDesc className="size-5" />,
+          sort !== 'manual',
+        )}
+        <DropdownMenuContent
+          label={m.sortTickets}
+          className={MENU}
+          style={{ width: 220 }}
+        >
+          {(
+            [
+              { id: 'manual', label: m.manualOrder },
+              { id: 'priority', label: m.priority },
+              { id: 'title', label: m.title },
+            ] as const
+          ).map((o) =>
+            option(o.label, sort === o.id, () => onSort(o.id), o.id),
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu>
+        {trigger(
+          m.filterTickets,
+          <RiEqualizerLine className="size-5" />,
+          filtered,
+        )}
+        <DropdownMenuContent
+          label={m.filterTickets}
+          className={MENU}
+          style={{ width: 220 }}
+        >
+          <Text className="px-2 pt-2 pb-1 text-body-2-medium text-text-tertiary">
+            {m.priority}
+          </Text>
+          {(['all', ...PRIORITIES] as const).map((v) =>
+            option(
+              v === 'all' ? m.allPriorities : v,
+              priority === v,
+              () => onPriority(v),
+              v,
+            ),
+          )}
+          <Text className="px-2 pt-2 pb-1 text-body-2-medium text-text-tertiary">
+            {m.project}
+          </Text>
+          {['all', ...projects].map((v) =>
+            option(
+              v === 'all' ? m.allProjects : v,
+              project === v,
+              () => onProject(v),
+              v,
+            ),
+          )}
+          {filtered && (
+            <DropdownMenuItem
+              className={ROW}
+              onPress={() => {
+                onPriority('all');
+                onProject('all');
+              }}
+            >
+              {m.clearFilters}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu>
+        {trigger(m.displayOptions, <RiSideBarLine className="size-5" />)}
+        <DropdownMenuContent
+          label={m.displayOptions}
+          className={MENU}
+          style={{ width: 220 }}
+        >
+          <DropdownMenuCheckboxItem
+            className={ROW}
+            checked={showDone}
+            onCheckedChange={onShowDone}
+          >
+            {m.showDone}
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            className={ROW}
+            checked={fillColumns}
+            onCheckedChange={onFillColumns}
+          >
+            {m.fillScreens}
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </View>
+  );
+}

package/src/project-board/ProjectBoardEmptyState.tsx

@@ -0,0 +1,179 @@
+import { useEffect, type ReactNode } from 'react';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  FadeIn,
+  FadeOut,
+  useAnimatedProps,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { G, Rect } from 'react-native-svg';
+import { useMessages } from '../locale/messages';
+import { StyledView } from '../styles/styled-primitives';
+import { getResolvedTokens } from '../theme/token-registry';
+import { useBloomTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { PROJECT_BOARD_MESSAGES } from './messages';
+
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+const AnimatedG = Animated.createAnimatedComponent(G);
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+function EmptyCard({
+  delay,
+  minimumScale = 0.85,
+  children,
+}: {
+  delay: number;
+  minimumScale?: number;
+  children: ReactNode;
+}) {
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(reducedMotion ? 1 : 0);
+  useEffect(() => {
+    progress.value = reducedMotion
+      ? 1
+      : withDelay(
+          delay,
+          withTiming(1, { duration: 320, easing: Easing.inOut(Easing.ease) }),
+        );
+    return () => cancelAnimation(progress);
+  }, [delay, reducedMotion, progress]);
+  const props = useAnimatedProps(
+    () => ({
+      opacity: progress.value,
+      transform: `translate(0 ${-5 * (1 - progress.value)}) translate(21 13.5) scale(${minimumScale + (1 - minimumScale) * progress.value}) translate(-21 -13.5)`,
+    }),
+    [progress, minimumScale],
+  );
+  return <AnimatedG animatedProps={props}>{children}</AnimatedG>;
+}
+function EmptyLine({
+  width,
+  y,
+  delay,
+  color,
+}: {
+  width: number;
+  y: number;
+  delay: number;
+  color: string;
+}) {
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(reducedMotion ? 1 : 0);
+  useEffect(() => {
+    progress.value = reducedMotion
+      ? 1
+      : withDelay(
+          delay,
+          withTiming(1, { duration: 320, easing: Easing.inOut(Easing.ease) }),
+        );
+    return () => cancelAnimation(progress);
+  }, [delay, reducedMotion, progress]);
+  const props = useAnimatedProps(
+    () => ({ width: width * progress.value }),
+    [progress, width],
+  );
+  return (
+    <AnimatedRect
+      animatedProps={props}
+      opacity={0.4}
+      x={3}
+      y={y}
+      height={3}
+      rx={1.5}
+      fill={color}
+    />
+  );
+}
+/** Original Figma 4488:11844 geometry and front-to-back reveal timing. */
+export function ProjectBoardEmptyState() {
+  const { theme, colorPreset } = useBloomTheme();
+  const colors = theme.colors;
+  const tokens = getResolvedTokens(colorPreset, theme.mode);
+  const { messages: m } = useMessages(PROJECT_BOARD_MESSAGES);
+  const reducedMotion = useReducedMotion();
+  return (
+    <AnimatedView
+      entering={reducedMotion ? undefined : FadeIn.duration(160)}
+      exiting={reducedMotion ? undefined : FadeOut.duration(160)}
+      pointerEvents="none"
+      className="absolute inset-0 flex items-center justify-center"
+      accessibilityLabel={m.noTickets}
+      accessibilityLiveRegion="polite"
+    >
+      <StyledView className="relative h-[146px] w-[170px]">
+        <StyledView
+          className="absolute top-[18px] left-[15px] h-[103px] w-[140px] rounded-2-5xl"
+          style={{ backgroundColor: colors.backgroundTertiary }}
+        />
+        <StyledView className="absolute top-[41px] left-[64px]">
+          <Svg width={42} height={35} viewBox="0 0 42 35">
+            <EmptyCard delay={720}>
+              <Rect
+                x={6}
+                y={18}
+                width={30}
+                height={17}
+                rx={3.5}
+                fill={tokens['--muted'] ?? colors.border}
+              />
+            </EmptyCard>
+            <EmptyCard delay={570}>
+              <Rect
+                x={3}
+                y={12}
+                width={36}
+                height={19}
+                rx={4}
+                fill={tokens['--popover'] ?? colors.backgroundSecondary}
+              />
+            </EmptyCard>
+            <EmptyCard delay={0} minimumScale={0.4}>
+              <Rect
+                width={42}
+                height={27}
+                rx={5}
+                fill={tokens['--border'] ?? colors.border}
+              />
+              <EmptyLine
+                width={14}
+                y={10}
+                delay={320}
+                color={tokens['--card'] ?? colors.background}
+              />
+              <Rect
+                opacity={0.4}
+                x={35}
+                y={3}
+                width={4}
+                height={4}
+                rx={2}
+                fill={tokens['--card'] ?? colors.background}
+              />
+              <EmptyLine
+                width={31}
+                y={15}
+                delay={420}
+                color={tokens['--card'] ?? colors.background}
+              />
+              <EmptyLine
+                width={31}
+                y={20}
+                delay={520}
+                color={tokens['--card'] ?? colors.background}
+              />
+            </EmptyCard>
+          </Svg>
+        </StyledView>
+        <StyledView className="absolute top-[87px] left-0 w-full items-center">
+          <Text variant="body-2-medium" style={{ color: colors.textTertiary }}>
+            {m.noTickets}
+          </Text>
+        </StyledView>
+      </StyledView>
+    </AnimatedView>
+  );
+}

package/src/project-board/ProjectBoardIcons.tsx

@@ -0,0 +1,93 @@
+import type { ComponentType } from 'react';
+import { styled } from 'react-native-css';
+import Svg, { Path } from 'react-native-svg';
+import { RiCheckboxBlankCircleLine } from '../icons/remix/RiCheckboxBlankCircleLine';
+import { RiCheckboxCircleLine } from '../icons/remix/RiCheckboxCircleLine';
+import { RiEyeLine } from '../icons/remix/RiEyeLine';
+import type { Props } from '../icons/shared';
+import { StyledView } from '../styles/styled-primitives';
+import { cx } from './constants';
+import { RiInboxArchiveLine } from './RiInboxArchiveLine';
+import { RiPieChart2Line } from './RiPieChart2Line';
+
+const STATUS_ICONS = {
+  backlog: RiInboxArchiveLine,
+  todo: RiCheckboxBlankCircleLine,
+  'in-progress': RiPieChart2Line,
+  review: RiEyeLine,
+  done: RiCheckboxCircleLine,
+};
+const StyledSvg: ComponentType<Props> = styled(Svg, { className: 'style' });
+export function TicketStatusIcon({
+  status,
+  className,
+}: {
+  status: string;
+  className?: string;
+}) {
+  const Icon =
+    STATUS_ICONS[status as keyof typeof STATUS_ICONS] ??
+    RiCheckboxBlankCircleLine;
+  return (
+    <StyledView className={cx('size-[18px] shrink-0', className)}>
+      <Icon width={18} height={18} fill="currentColor" />
+    </StyledView>
+  );
+}
+
+export function TicketAssigneeIcon({ className }: { className?: string }) {
+  return (
+    <StyledSvg
+      width={18}
+      height={18}
+      viewBox="0 0 18 18"
+      className={cx('inline-block size-[18px] shrink-0', className)}
+    >
+      <Path
+        d="M9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9C16.5 13.1421 13.1421 16.5 9 16.5ZM9 15C12.3137 15 15 12.3137 15 9C15 5.68629 12.3137 3 9 3C5.68629 3 3 5.68629 3 9C3 12.3137 5.68629 15 9 15ZM5.25 9H6.75C6.75 10.2427 7.75732 11.25 9 11.25C10.2427 11.25 11.25 10.2427 11.25 9H12.75C12.75 11.071 11.071 12.75 9 12.75C6.92893 12.75 5.25 11.071 5.25 9Z"
+        fill="currentColor"
+      />
+    </StyledSvg>
+  );
+}
+
+export function TicketUrgencyIcon({ className }: { className?: string }) {
+  return (
+    <StyledSvg
+      width={18}
+      height={18}
+      viewBox="0 0 18 18"
+      className={cx('inline-block size-[18px] shrink-0', className)}
+    >
+      <Path
+        d="M15 9.75C15 11.4068 14.3285 12.9068 13.2427 13.9927L14.3033 15.0533C15.6605 13.6961 16.5 11.821 16.5 9.75C16.5 5.60786 13.1421 2.25 9 2.25C4.85786 2.25 1.5 5.60786 1.5 9.75C1.5 11.821 2.33947 13.6961 3.6967 15.0533L4.75736 13.9927C3.67157 12.9068 3 11.4068 3 9.75C3 6.43629 5.68629 3.75 9 3.75C12.3137 3.75 15 6.43629 15 9.75ZM11.4698 6.21973L7.875 9.375L9.375 10.875L12.5304 7.28039L11.4698 6.21973Z"
+        fill="currentColor"
+      />
+    </StyledSvg>
+  );
+}
+
+export function TicketFavoriteIcon({
+  className,
+  selected,
+}: {
+  className?: string;
+  selected?: boolean;
+}) {
+  return (
+    <StyledSvg
+      width={17}
+      height={17}
+      viewBox="0 0 17 17"
+      className={cx('size-[17px] shrink-0', className)}
+      fill="none"
+    >
+      <Path
+        d="M7.5767 2.7199A1 1 0 0 1 9.4233 2.7199 L10.3815 5.0236A1 1 0 0 0 11.2249 5.6363 L13.7119 5.8357A1 1 0 0 1 14.2825 7.5920 L12.3877 9.2151A1 1 0 0 0 12.0655 10.2066 L12.6444 12.6335A1 1 0 0 1 11.1505 13.7189 L9.0213 12.4184A1 1 0 0 0 7.9787 12.4184 L5.8495 13.7189A1 1 0 0 1 4.3556 12.6335 L4.9345 10.2066A1 1 0 0 0 4.6123 9.2151 L2.7175 7.5920A1 1 0 0 1 3.2881 5.8357 L5.7751 5.6363A1 1 0 0 0 6.6185 5.0236Z"
+        fill={selected ? 'currentColor' : 'none'}
+        stroke="currentColor"
+        strokeWidth={1}
+      />
+    </StyledSvg>
+  );
+}

package/src/project-board/RiInboxArchiveLine.tsx

@@ -0,0 +1,4 @@
+import { createSinglePathSVG } from '../icons/TEMPLATE';
+export const RiInboxArchiveLine = createSinglePathSVG({
+  path: 'M20 3L22 7V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V7.00353L4 3H20ZM20 9H4V19H20V9ZM13 10V14H16L12 18L8 14H11V10H13ZM18.7639 5H5.23656L4.23744 7H19.7639L18.7639 5Z',
+});

package/src/project-board/RiMoreLine.tsx

@@ -0,0 +1,4 @@
+import { createSinglePathSVG } from '../icons/TEMPLATE';
+export const RiMoreLine = createSinglePathSVG({
+  path: 'M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z',
+});

package/src/project-board/RiPieChart2Line.tsx

@@ -0,0 +1,4 @@
+import { createSinglePathSVG } from '../icons/TEMPLATE';
+export const RiPieChart2Line = createSinglePathSVG({
+  path: 'M12 0.5C18.3513 0.5 23.5 5.64873 23.5 12C23.5 12.3369 23.4855 12.6704 23.4571 13H21.9506C21.4489 18.0533 17.1853 22 12 22C6.47715 22 2 17.5228 2 12C2 6.81465 5.94668 2.5511 11 2.04938V0.542876C11.3296 0.514488 11.6631 0.5 12 0.5ZM11 4.06189C7.05369 4.55399 4 7.92038 4 12C4 16.4183 7.58172 20 12 20C16.0796 20 19.446 16.9463 19.9381 13H11V4.06189ZM13 2.552V11H21.448C20.9827 6.55197 17.448 3.01732 13 2.552Z',
+});

package/src/project-board/RiRestartLine.tsx

@@ -0,0 +1,4 @@
+import { createSinglePathSVG } from '../icons/TEMPLATE';
+export const RiRestartLine = createSinglePathSVG({
+  path: 'M18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z',
+});