Add CompletionCheck to native harmony

packages/mobile/.storybook/storybook.requires.ts

@@ -61,6 +61,7 @@ const getStories = () => {
     '../src/harmony-native/Hint.stories.tsx': require('../src/harmony-native/components/Hint/Hint.stories.tsx'),
     '../src/harmony-native/SelectablePill.stories.tsx': require('../src/harmony-native/components/input/SelectablePill/SelectablePill.stories.tsx'),
     '../src/harmony-native/FollowButton.stories.tsx': require('../src/harmony-native/components/Button/FollowButton/FollowButton.stories.tsx'),
+    '../src/harmony-native/CompletionCheck.stories.tsx': require('../src/harmony-native/components/CompletionCheck/CompletionCheck.stories.tsx'),
   }
 }
 

packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.stories.tsx

@@ -0,0 +1,29 @@
+import type { CompletionCheckProps } from '@audius/harmony'
+import type { Meta, StoryObj } from '@storybook/react-native'
+
+import { Flex } from '../layout/Flex/Flex'
+
+import { CompletionCheck } from './CompletionCheck'
+
+const meta: Meta<CompletionCheckProps> = {
+  title: 'Components/Input/CompletionCheck',
+  component: CompletionCheck,
+  argTypes: {
+    value: {
+      description: 'Value',
+      control: { type: 'radio' },
+      options: ['incomplete', 'complete', 'error']
+    }
+  },
+  render: (props) => (
+    <Flex p='l'>
+      <CompletionCheck {...props} />
+    </Flex>
+  )
+}
+
+export default meta
+
+type Story = StoryObj<CompletionCheckProps>
+
+export const Default: Story = {}

packages/mobile/src/harmony-native/components/CompletionCheck/CompletionCheck.tsx

@@ -0,0 +1,94 @@
+import type { CompletionCheckProps } from '@audius/harmony'
+import styled, { css } from '@emotion/native'
+import type { ViewProps } from 'react-native'
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming
+} from 'react-native-reanimated'
+
+import {
+  Flex,
+  IconValidationCheck,
+  IconValidationX
+} from '@audius/harmony-native'
+
+const CompletionIconBase = styled(Animated.View)({
+  position: 'absolute',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: 16,
+  width: 16,
+  borderRadius: 9999
+})
+
+const CompletionDefault = styled(CompletionIconBase)(({ theme }) => ({
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: theme.color.neutral.neutral
+}))
+
+// NOTE: Probably not needed, but leaving code in case we need this later
+// const CompletionEmpty = (props: ViewProps) => <CompletionIconBase {...props} />
+
+const CompletionError = (props: ViewProps) => (
+  <CompletionIconBase {...props}>
+    <IconValidationX />
+  </CompletionIconBase>
+)
+
+const CompletionSuccess = (props: ViewProps) => (
+  <CompletionIconBase {...props}>
+    <IconValidationCheck />
+  </CompletionIconBase>
+)
+
+const useIconValueWithTiming = (
+  value: CompletionCheckProps['value'],
+  iconValue: CompletionCheckProps['value']
+) => {
+  return useDerivedValue(() => {
+    return withTiming(value === iconValue ? 1 : 0, {
+      duration: 180,
+      easing: Easing.inOut(Easing.ease)
+    })
+  })
+}
+
+const useIconAnimation = (value: Animated.SharedValue<0 | 1>) => {
+  return useAnimatedStyle(() => {
+    const scale = interpolate(value.value, [0, 0.75, 1], [0, 1.2, 1])
+    const opacity = interpolate(value.value, [0, 1], [0.3, 1])
+    const zIndex = interpolate(value.value, [0, 1], [0, 2])
+
+    return { zIndex, opacity, transform: [{ scale }] }
+  })
+}
+
+export const CompletionCheck = ({ value }: CompletionCheckProps) => {
+  // const incompleteValue = useIconValueWithTiming(value, 'incomplete')
+  const completeValue = useIconValueWithTiming(value, 'complete')
+  const errorValue = useIconValueWithTiming(value, 'error')
+
+  // const incompleteStyle = useIconAnimation(incompleteValue)
+  const completeStyle = useIconAnimation(completeValue)
+  const errorStyle = useIconAnimation(errorValue)
+
+  return (
+    <Flex
+      alignItems='center'
+      style={css({
+        position: 'relative',
+        width: 16,
+        height: 16
+      })}
+    >
+      <CompletionDefault />
+      {/* <CompletionEmpty style={[incompleteStyle]} /> */}
+      <CompletionSuccess style={[completeStyle]} />
+      <CompletionError style={[errorStyle]} />
+    </Flex>
+  )
+}