Onboarding Checklist

1import React, { useCallback, useEffect, useState } from "react"
2import {
3  PixelRatio,
4  Platform,
5  Pressable,
6  StyleSheet,
7  Text,
8  View,
9  useColorScheme,
10  useWindowDimensions,
11  type StyleProp,
12  type ViewStyle,
13} from "react-native"
14import Animated, {
15  Easing,
16  ReduceMotion,
17  useAnimatedStyle,
18  useSharedValue,
19  withSpring,
20  withTiming,
21} from "react-native-reanimated"
22import Svg, { Path } from "react-native-svg"
23import { scheduleOnRN } from "react-native-worklets"
24const FONT =
25  Platform.OS === "web"
26    ? "Arial"
27    : Platform.OS === "ios"
28      ? "Helvetica"
29      : "sans-serif"
30const MODERN_SHADOW =
31  Platform.OS !== "android" || Number(Platform.Version) >= 28
32const DISCLOSURE = {
33  stiffness: 300,
34  damping: 30,
35  mass: 1,
36  reduceMotion: ReduceMotion.System,
37} as const
38const CHEVRON = {
39  stiffness: 500,
40  damping: 25,
41  mass: 1,
42  reduceMotion: ReduceMotion.System,
43} as const
44const ROW = {
45  duration: 150,
46  easing: Easing.bezier(0.4, 0, 0.2, 1),
47  reduceMotion: ReduceMotion.System,
48} as const
49const PROGRESS = { ...ROW, duration: 500 } as const
50export type ChecklistStep = { id: number; title: string; isCompleted: boolean }
51export type OnboardingChecklistProps = {
52  steps: ChecklistStep[]
53  title?: string
54  defaultExpanded?: boolean
55  onStepPress?: (step: ChecklistStep) => void
56  theme?: "light" | "dark" | "system"
57  backgroundColor?: string
58  contentColor?: string
59  titleColor?: string
60  textColor?: string
61  subduedColor?: string
62  borderColor?: string
63  progressColor?: string
64  progressTrackColor?: string
65  completedColor?: string
66  radius?: number
67  contentRadius?: number
68  style?: StyleProp<ViewStyle>
69  testID?: string
70}
71function shadow(color: string, large = false): ViewStyle {
72  if (!MODERN_SHADOW) return { elevation: large ? 4 : 1 }
73  return {
74    boxShadow: large
75      ? [
76          {
77            offsetX: 0,
78            offsetY: 10,
79            blurRadius: 15,
80            spreadDistance: -3,
81            color,
82          },
83          { offsetX: 0, offsetY: 4, blurRadius: 6, spreadDistance: -4, color },
84        ]
85      : [
86          { offsetX: 0, offsetY: 1, blurRadius: 3, color },
87          { offsetX: 0, offsetY: 1, blurRadius: 2, spreadDistance: -1, color },
88        ],
89  }
90}
91function ProgressBar({
92  filled,
93  fill,
94  track,
95  tablet,
96}: {
97  filled: boolean
98  fill: string
99  track: string
100  tablet: boolean
101}) {
102  const color = useSharedValue(filled ? fill : track)
103  useEffect(() => {
104    color.set(withTiming(filled ? fill : track, PROGRESS))
105  }, [filled, fill, track, color])
106  const style = useAnimatedStyle(() => ({ backgroundColor: color.get() }))
107  return (
108    <Animated.View
109      style={[
110        {
111          width: tablet ? 3.5 : 2.5,
112          height: tablet ? 16 : 14,
113          borderRadius: 999,
114        },
115        style,
116      ]}
117    />
118  )
119}
120function ChecklistRow({
121  step,
122  tablet,
123  dark,
124  textColor,
125  subduedColor,
126  completedColor,
127  radius,
128  onPress,
129  testID,
130}: {
131  step: ChecklistStep
132  tablet: boolean
133  dark: boolean
134  textColor: string
135  subduedColor: string
136  completedColor: string
137  radius: number
138  onPress?: (step: ChecklistStep) => void
139  testID?: string
140}) {
141  const scale = useSharedValue(1),
142    background = useSharedValue("rgba(0,0,0,0)")
143  const text = useSharedValue(step.isCompleted ? subduedColor : textColor)
144  useEffect(() => {
145    text.set(withTiming(step.isCompleted ? subduedColor : textColor, ROW))
146  }, [step.isCompleted, textColor, subduedColor, text])
147  const style = useAnimatedStyle(() => ({
148    backgroundColor: background.get(),
149    transform: [{ scale: scale.get() }],
150  }))
151  const textStyle = useAnimatedStyle(() => ({ color: text.get() }))
152  const active = step.id === 3
153  const badgeWidth = tablet ? 24 : 20,
154    badgeHeight = tablet ? 20 : 18
155  const badgeColor = step.isCompleted
156    ? completedColor
157    : active
158      ? dark
159        ? "#ededed"
160        : "#292929"
161      : "transparent"
162  const badgeBorder = active
163    ? dark
164      ? "#ededed"
165      : "#292929"
166    : dark
167      ? "#333"
168      : "#e5e5e7"
169  return (
170    <Animated.View style={[{ borderRadius: radius }, style]}>
171      <Pressable
172        accessibilityRole={onPress ? "button" : undefined}
173        accessibilityLabel={`${step.title}, ${step.isCompleted ? "completed" : `step ${step.id}`}`}
174        onPress={() => onPress?.(step)}
175        onPressIn={() => scale.set(withTiming(tablet ? 1 : 0.98, ROW))}
176        onPressOut={() => scale.set(withTiming(1, ROW))}
177        onHoverIn={() =>
178          background.set(
179            withTiming(dark ? "rgba(255,255,255,.05)" : "#f9f9f9", ROW)
180          )
181        }
182        onHoverOut={() => background.set(withTiming("rgba(0,0,0,0)", ROW))}
183        testID={testID}
184        style={{
185          paddingVertical: tablet ? 12 : 10,
186          paddingHorizontal: tablet ? 16 : 12,
187          flexDirection: "row",
188          alignItems: "center",
189          justifyContent: "space-between",
190        }}
191      >
192        <View
193          style={{
194            flex: 1,
195            minWidth: 0,
196            flexDirection: "row",
197            alignItems: "center",
198            gap: tablet ? 12 : 10,
199          }}
200        >
201          <View
202            style={[
203              {
204                width: badgeWidth,
205                height: badgeHeight,
206                borderRadius: 999,
207                borderWidth: step.isCompleted ? 0 : 2,
208                borderColor: badgeBorder,
209                backgroundColor: badgeColor,
210                alignItems: "center",
211                justifyContent: "center",
212              },
213              shadow(
214                step.isCompleted
215                  ? "#238848"
216                  : active
217                    ? "#1a1919"
218                    : "rgba(143,142,142,.4)"
219              ),
220            ]}
221          >
222            {step.isCompleted ? (
223              <Svg
224                width={tablet ? 12 : 10}
225                height={tablet ? 12 : 10}
226                viewBox="0 0 24 24"
227                accessible={false}
228              >
229                <Path
230                  d="m20 6-11 11-5-5"
231                  stroke="#fff"
232                  strokeWidth={4}
233                  strokeLinecap="round"
234                  strokeLinejoin="round"
235                  fill="none"
236                />
237              </Svg>
238            ) : (
239              <Text
240                style={{
241                  fontFamily: FONT,
242                  fontSize: tablet ? 12 : 10,
243                  fontWeight: "700",
244                  color: active
245                    ? dark
246                      ? "#1a1a1a"
247                      : "#fff"
248                    : dark
249                      ? "#555"
250                      : "#a1a1a1",
251                }}
252              >
253                {step.id}
254              </Text>
255            )}
256          </View>
257          <Animated.Text
258            numberOfLines={1}
259            style={[
260              {
261                flexShrink: 1,
262                fontFamily: FONT,
263                fontSize: tablet ? 14 : 13,
264                lineHeight: tablet ? 21 : 19.5,
265                fontWeight: "500",
266              },
267              textStyle,
268            ]}
269          >
270            {step.title}
271          </Animated.Text>
272        </View>
273        {!step.isCompleted && (
274          <Svg
275            width={tablet ? 16 : 14}
276            height={tablet ? 16 : 14}
277            viewBox="0 0 24 24"
278            accessible={false}
279          >
280            <Path
281              d="m9 18 6-6-6-6"
282              stroke={dark ? "#444" : "#d1d1d6"}
283              strokeWidth={2}
284              strokeLinecap="round"
285              strokeLinejoin="round"
286              fill="none"
287            />
288          </Svg>
289        )}
290      </Pressable>
291    </Animated.View>
292  )
293}
294export function OnboardingChecklist({
295  steps,
296  title = "Getting started",
297  defaultExpanded = false,
298  onStepPress,
299  theme = "system",
300  backgroundColor,
301  contentColor,
302  titleColor,
303  textColor,
304  subduedColor,
305  borderColor,
306  progressColor = "#22c55e",
307  progressTrackColor,
308  completedColor = "#00b613",
309  radius = 14,
310  contentRadius,
311  style,
312  testID,
313}: OnboardingChecklistProps) {
314  const system = useColorScheme(),
315    { width } = useWindowDimensions()
316  const dark = theme === "dark" || (theme === "system" && system === "dark")
317  const tablet = width >= 640
318  const [expanded, setExpanded] = useState(defaultExpanded),
319    [naturalHeight, setNaturalHeight] = useState(0)
320  const [visible, setVisible] = useState(defaultExpanded)
321  const hide = useCallback(() => setVisible(false), [])
322  const rotation = useSharedValue(0),
323    height = useSharedValue(0),
324    opacity = useSharedValue(defaultExpanded ? 1 : 0)
325  const completed = steps.filter((step) => step.isCompleted).length
326  const innerBorder = PixelRatio.roundToNearestPixel(1.4)
327  useEffect(() => {
328    rotation.set(withSpring(expanded ? 0 : 180, CHEVRON))
329  }, [expanded, rotation])
330  useEffect(() => {
331    if (expanded) setVisible(true)
332    height.set(
333      withSpring(
334        expanded ? naturalHeight + innerBorder : 0,
335        DISCLOSURE,
336        (finished) => {
337          if (finished && !expanded) scheduleOnRN(hide)
338        }
339      )
340    )
341    opacity.set(withSpring(expanded ? 1 : 0, DISCLOSURE))
342  }, [expanded, naturalHeight, innerBorder, height, opacity, hide])
343  const arrowStyle = useAnimatedStyle(() => ({
344    transform: [{ rotate: `${rotation.get()}deg` }],
345  }))
346  const bodyStyle = useAnimatedStyle(() => ({
347    height: Math.max(0, height.get()),
348    opacity: Math.max(0, Math.min(1, opacity.get())),
349  }))
350  const color = textColor ?? (dark ? "#d4d4d4" : "#1a1a1a")
351  const subdued = subduedColor ?? (dark ? "#555" : "#a1a1a1")
352  return (
353    <View
354      style={[
355        { width: "100%", padding: tablet ? 40 : 16, alignItems: "center" },
356        style,
357      ]}
358      testID={testID}
359    >
360      <View
361        style={[
362          {
363            width: "100%",
364            maxWidth: 400,
365            backgroundColor: backgroundColor ?? (dark ? "#161616" : "#f5f5f7"),
366            borderWidth: 1,
367            borderColor:
368              borderColor ?? (dark ? "rgba(255,255,255,.1)" : "#e5e5e5"),
369            borderRadius: radius,
370            overflow: "hidden",
371          },
372          shadow("rgba(0,0,0,.1)", true),
373        ]}
374      >
375        <Pressable
376          accessibilityRole="button"
377          accessibilityLabel={`${title}, ${completed} of ${steps.length} completed`}
378          accessibilityState={{ expanded }}
379          aria-expanded={expanded}
380          onPress={() => setExpanded((value) => !value)}
381          testID={testID ? `${testID}-toggle` : undefined}
382          style={{
383            padding: tablet ? 14 : 12,
384            flexDirection: "row",
385            alignItems: "center",
386            justifyContent: "space-between",
387          }}
388        >
389          <View
390            style={{
391              flex: 1,
392              minWidth: 0,
393              flexDirection: "row",
394              alignItems: "center",
395              gap: tablet ? 12 : 8,
396            }}
397          >
398            <Animated.View
399              style={[
400                {
401                  width: tablet ? 32 : 28,
402                  height: tablet ? 32 : 28,
403                  alignItems: "center",
404                  justifyContent: "center",
405                },
406                arrowStyle,
407              ]}
408            >
409              <Svg
410                width={tablet ? 22 : 20}
411                height={tablet ? 22 : 20}
412                viewBox="0 0 24 24"
413                accessible={false}
414              >
415                <Path
416                  d="m18 15-6-6-6 6"
417                  stroke="#a1a1a1"
418                  strokeWidth={2}
419                  strokeLinecap="round"
420                  strokeLinejoin="round"
421                  fill="none"
422                />
423              </Svg>
424            </Animated.View>
425            <Text
426              numberOfLines={1}
427              style={{
428                flexShrink: 1,
429                paddingRight: 4,
430                fontFamily: FONT,
431                fontSize: tablet ? 15 : 14,
432                lineHeight: tablet ? 22.5 : 21,
433                fontWeight: "700",
434                color: titleColor ?? (dark ? "#ededed" : "#1a1a1a"),
435              }}
436            >
437              {title}
438            </Text>
439          </View>
440          <View
441            style={{
442              marginLeft: 4,
443              flexDirection: "row",
444              alignItems: "center",
445              gap: tablet ? 12 : 8,
446            }}
447          >
448            <View aria-hidden style={{ flexDirection: "row", gap: 2 }}>
449              {Array.from({ length: 14 }, (_, index) => (
450                <ProgressBar
451                  key={index}
452                  filled={index < (completed / steps.length) * 14}
453                  fill={progressColor}
454                  track={progressTrackColor ?? (dark ? "#2a2a2a" : "#e5e5e7")}
455                  tablet={tablet}
456                />
457              ))}
458            </View>
459            <Text
460              style={{
461                minWidth: tablet ? 30 : 28,
462                textAlign: "right",
463                fontFamily: FONT,
464                fontSize: tablet ? 13 : 12,
465                lineHeight: tablet ? 19.5 : 18,
466                fontWeight: "700",
467                color: dark ? "#888" : "#71717a",
468              }}
469            >
470              {completed}/{steps.length}
471            </Text>
472          </View>
473        </Pressable>
474        <Animated.View
475          pointerEvents={expanded ? "auto" : "none"}
476          accessibilityElementsHidden={!expanded}
477          importantForAccessibility={expanded ? "auto" : "no-hide-descendants"}
478          aria-hidden={!expanded}
479          style={[
480            {
481              borderTopWidth: visible ? innerBorder : 0,
482              borderColor: dark ? "rgba(255,255,255,.05)" : "#e9e8ef",
483              borderTopLeftRadius: contentRadius ?? (tablet ? 24 : 26),
484              borderTopRightRadius: contentRadius ?? (tablet ? 24 : 26),
485              backgroundColor: contentColor ?? (dark ? "#1c1c1c" : "#fff"),
486              overflow: "hidden",
487            },
488            bodyStyle,
489          ]}
490        >
491          <View
492            style={{ padding: tablet ? 8 : 6, gap: 2 }}
493            onLayout={({ nativeEvent }) =>
494              setNaturalHeight(nativeEvent.layout.height)
495            }
496          >
497            {steps.map((step) => (
498              <ChecklistRow
499                key={step.id}
500                step={step}
501                tablet={tablet}
502                dark={dark}
503                textColor={color}
504                subduedColor={subdued}
505                completedColor={completedColor}
506                radius={radius}
507                onPress={onStepPress}
508                testID={testID ? `${testID}-step-${step.id}` : undefined}
509              />
510            ))}
511          </View>
512        </Animated.View>
513      </View>
514    </View>
515  )
516}