From 4e37e2f59bcf9fd1f44abbe65d701ebe36de4369 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 10 May 2024 23:37:23 -0500
Subject: [Reduced Onboarding] Add profile step (#3933)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Onboarding avatar creator or upload (#2860)

* add screen to onboarding flow

* update base

* add icon

* fix icon

* fix after merge

* create flatlist

* add emoji list

* add state context, pressables

* select/update

* add camera icon

* add photo selection button

* image selection

* cleanup

* add most needed icons

* fix icon naming

* add icons

* export path strings for emoji

* canvas drawing for web

* types

* move breakpoints to individual steps

* create canvas

* canvas working 🎉

* update state

* it works!

* working on both platforms

* remove comments

* remove log

* remove unused web canvas

* animate picture selection/removal

* compress images on web correctly

* add times icon

* scrollable horizontal flatlist on web

* prefetch

* adjustments

* add more assets

* remove unused smiles

* add all the icons

* adjust color options

* animate grow/shrink selections

* change layout on tablet/desktop

* better web layout

* fix path

* adjust web layout

* organize

* organize imports and cleanup styles

* make generated images smaller

* implement design changes

use row for buttons on web

use RNGH FlatList

random color at start

improve logic

update dialog for web

update dialog style on mobile

some more progress

create dialog

simplify context

start implementing design

* rm change

* cleanup imports

* trigger a pr label

* Formatting

---------

Co-authored-by: Eric Bailey <git@esb.lol>
(cherry picked from commit 087186e3867b0eefb11a056b0b644f5585fa16bd)

* UI tweaks

* Revert layout change

* Gate avi upload

* Support returning to profile step

* Add Statsig

---------

Co-authored-by: Hailey <me@haileyok.com>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 .../Onboarding/StepProfile/AvatarCreatorItems.tsx  | 145 +++++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx

(limited to 'src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx')

diff --git a/src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx b/src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx
new file mode 100644
index 000000000..98c01ce7d
--- /dev/null
+++ b/src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx
@@ -0,0 +1,145 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {Avatar} from '#/screens/Onboarding/StepProfile/index'
+import {
+  AvatarColor,
+  avatarColors,
+  emojiItems,
+  EmojiName,
+  emojiNames,
+} from '#/screens/Onboarding/StepProfile/types'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {Text} from '#/components/Typography'
+
+const ACTIVE_BORDER_WIDTH = 3
+const ACTIVE_BORDER_STYLES = {
+  top: -ACTIVE_BORDER_WIDTH,
+  bottom: -ACTIVE_BORDER_WIDTH,
+  left: -ACTIVE_BORDER_WIDTH,
+  right: -ACTIVE_BORDER_WIDTH,
+  opacity: 0.5,
+  borderWidth: 3,
+}
+
+export function AvatarCreatorItems({
+  type,
+  avatar,
+  setAvatar,
+}: {
+  type: 'emojis' | 'colors'
+  avatar: Avatar
+  setAvatar: React.Dispatch<React.SetStateAction<Avatar>>
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const isEmojis = type === 'emojis'
+
+  const onSelectEmoji = React.useCallback(
+    (emoji: EmojiName) => {
+      setAvatar(prev => ({
+        ...prev,
+        placeholder: emojiItems[emoji],
+      }))
+    },
+    [setAvatar],
+  )
+
+  const onSelectColor = React.useCallback(
+    (color: AvatarColor) => {
+      setAvatar(prev => ({
+        ...prev,
+        backgroundColor: color,
+      }))
+    },
+    [setAvatar],
+  )
+
+  return (
+    <View style={[a.w_full]}>
+      <Text style={[a.pb_md, t.atoms.text_contrast_medium]}>
+        {isEmojis ? (
+          <Trans>Select an emoji</Trans>
+        ) : (
+          <Trans>Select a color</Trans>
+        )}
+      </Text>
+
+      <View
+        style={[
+          a.flex_row,
+          a.align_start,
+          a.justify_start,
+          a.flex_wrap,
+          a.gap_md,
+        ]}>
+        {isEmojis
+          ? emojiNames.map(emojiName => (
+              <Button
+                key={emojiName}
+                label={_(msg`Select the ${emojiName} emoji as your avatar`)}
+                size="small"
+                shape="round"
+                variant="solid"
+                color="secondary"
+                onPress={() => onSelectEmoji(emojiName)}>
+                <ButtonIcon icon={emojiItems[emojiName].component} />
+                {avatar.placeholder.name === emojiName && (
+                  <View
+                    style={[
+                      a.absolute,
+                      a.rounded_full,
+                      ACTIVE_BORDER_STYLES,
+                      {
+                        borderColor: avatar.backgroundColor,
+                      },
+                    ]}
+                  />
+                )}
+              </Button>
+            ))
+          : avatarColors.map(color => (
+              <Button
+                key={color}
+                label={_(msg`Choose this color as your avatar`)}
+                size="small"
+                shape="round"
+                variant="solid"
+                onPress={() => onSelectColor(color)}>
+                {ctx => (
+                  <>
+                    <View
+                      style={[
+                        a.absolute,
+                        a.inset_0,
+                        a.rounded_full,
+                        {
+                          opacity: ctx.hovered || ctx.pressed ? 0.8 : 1,
+                          backgroundColor: color,
+                        },
+                      ]}
+                    />
+
+                    {avatar.backgroundColor === color && (
+                      <View
+                        style={[
+                          a.absolute,
+                          a.rounded_full,
+                          ACTIVE_BORDER_STYLES,
+                          {
+                            borderColor: color,
+                          },
+                        ]}
+                      />
+                    )}
+                  </>
+                )}
+              </Button>
+            ))}
+      </View>
+    </View>
+  )
+}
-- 
cgit 1.4.1

