From 46e3721ef39cb7d7a0533a1ff0357a7231485c5d Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 11:42:06 +0300 Subject: [PATCH 1/9] Implement demo with emoji picker --- package.json | 1 + src/components/General/EmojiPicker.tsx | 67 ++++++++++++++++++++++++++ src/pages/LandingPage/LandingPage.tsx | 2 + yarn.lock | 19 ++++++++ 4 files changed, 89 insertions(+) create mode 100644 src/components/General/EmojiPicker.tsx diff --git a/package.json b/package.json index 9f5c7e7a..fb179ed5 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@tamagui/vite-plugin": "1.36.4", "@types/react": "18", "@types/react-dom": "18", + "emoji-picker-react": "^4.4.11", "expo-modules-core": "^1.5.9", "react": "18", "react-color": "^2.19.3", diff --git a/src/components/General/EmojiPicker.tsx b/src/components/General/EmojiPicker.tsx new file mode 100644 index 00000000..6cc6c1a8 --- /dev/null +++ b/src/components/General/EmojiPicker.tsx @@ -0,0 +1,67 @@ +import { Text } from '@status-im/components' +import EmojiPicker, { + EmojiStyle, + Theme, + EmojiClickData, + Emoji, + SuggestionMode, + Categories, +} from 'emoji-picker-react' +import { useState } from 'react' +import { Stack, XStack } from 'tamagui' + +function EmojiPickerDialog() { + const [selectedEmoji, setSelectedEmoji] = useState('') + + function onClick(emojiData: EmojiClickData) { + setSelectedEmoji(emojiData.unified) + } + + return ( + + Emoji Picker Demo + + Your selected Emoji is: + {selectedEmoji ? ( + + ) : null} + + + + + ) +} +export default EmojiPickerDialog diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 1a17ce81..411af0e9 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -6,6 +6,7 @@ import { Button as StatusButton } from '@status-im/components' import NimbusLogo from '../../components/Logos/NimbusLogo' import { XStack, YStack } from 'tamagui' import { NodeIcon } from '@status-im/icons' +import EmojiPickerDialog from '../../components/General/EmojiPicker' function LandingPage() { return ( @@ -24,6 +25,7 @@ function LandingPage() { }>Get Started + diff --git a/yarn.lock b/yarn.lock index 7d92fd5a..6ad42e19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8588,6 +8588,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 + languageName: node + linkType: hard + "co@npm:^4.6.0": version: 4.6.0 resolution: "co@npm:4.6.0" @@ -9537,6 +9544,17 @@ __metadata: languageName: node linkType: hard +"emoji-picker-react@npm:^4.4.11": + version: 4.4.11 + resolution: "emoji-picker-react@npm:4.4.11" + dependencies: + clsx: ^1.2.1 + peerDependencies: + react: ">=16" + checksum: 69ec9468996a5b0a277fd7821156695af7d097f5f4d6da7c4286181bce5edc36e888f52be4b22f342a84bc9b99e7f71ee69e9079a69f0c58404aeccba8c85ab8 + languageName: node + linkType: hard + "emoji-regex@npm:^8.0.0": version: 8.0.0 resolution: "emoji-regex@npm:8.0.0" @@ -13842,6 +13860,7 @@ __metadata: "@typescript-eslint/eslint-plugin": ^6.0.0 "@typescript-eslint/parser": ^6.0.0 "@vitejs/plugin-react": ^4.0.3 + emoji-picker-react: ^4.4.11 eslint: ^8.45.0 eslint-plugin-react-hooks: ^4.6.0 eslint-plugin-react-refresh: ^0.4.3 From a5bb4cf4e6bbb8e01933a246bb009f1e75053293 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 11:49:32 +0300 Subject: [PATCH 2/9] Add storybook for emoji picker --- .../General/EmojiPickerDialog.stories.tsx | 19 +++++++++++++++++++ ...{EmojiPicker.tsx => EmojiPickerDialog.tsx} | 6 ++++-- src/pages/LandingPage/LandingPage.tsx | 4 ++-- 3 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 src/components/General/EmojiPickerDialog.stories.tsx rename src/components/General/{EmojiPicker.tsx => EmojiPickerDialog.tsx} (89%) diff --git a/src/components/General/EmojiPickerDialog.stories.tsx b/src/components/General/EmojiPickerDialog.stories.tsx new file mode 100644 index 00000000..34d43884 --- /dev/null +++ b/src/components/General/EmojiPickerDialog.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' +import EmojiPickerDialog from './EmojiPickerDialog' + + +const meta = { + title: 'General/EmojiPickerDialog', + component: EmojiPickerDialog, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const DefaultColors: Story = { + args: {emojiStyle: 'TWITTER'}, +} diff --git a/src/components/General/EmojiPicker.tsx b/src/components/General/EmojiPickerDialog.tsx similarity index 89% rename from src/components/General/EmojiPicker.tsx rename to src/components/General/EmojiPickerDialog.tsx index 6cc6c1a8..3ce76986 100644 --- a/src/components/General/EmojiPicker.tsx +++ b/src/components/General/EmojiPickerDialog.tsx @@ -10,7 +10,9 @@ import EmojiPicker, { import { useState } from 'react' import { Stack, XStack } from 'tamagui' -function EmojiPickerDialog() { +type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE' + +function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) { const [selectedEmoji, setSelectedEmoji] = useState('') function onClick(emojiData: EmojiClickData) { @@ -39,7 +41,7 @@ function EmojiPickerDialog() { suggestedEmojisMode={SuggestionMode.RECENT} skinTonesDisabled searchPlaceHolder="Search emojis" - emojiStyle={EmojiStyle.FACEBOOK} + emojiStyle={EmojiStyle[emojiStyle]} categories={[ { name: 'People', diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 411af0e9..b593779c 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -6,7 +6,7 @@ import { Button as StatusButton } from '@status-im/components' import NimbusLogo from '../../components/Logos/NimbusLogo' import { XStack, YStack } from 'tamagui' import { NodeIcon } from '@status-im/icons' -import EmojiPickerDialog from '../../components/General/EmojiPicker' +import EmojiPickerDialog from '../../components/General/EmojiPickerDialog' function LandingPage() { return ( @@ -25,7 +25,7 @@ function LandingPage() { }>Get Started - + From ea1bb1eccd4c561490730f85c1c0f42dbf6b1522 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 12:13:12 +0300 Subject: [PATCH 3/9] Clear code --- src/components/General/PinnedNottification.tsx | 2 +- src/pages/LandingPage/LandingPage.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/General/PinnedNottification.tsx b/src/components/General/PinnedNottification.tsx index b4146d15..0c0fcc59 100644 --- a/src/components/General/PinnedNottification.tsx +++ b/src/components/General/PinnedNottification.tsx @@ -4,7 +4,7 @@ import { RootState } from '../../redux/store' function PinnedNotification() { const pinnedMessage = useSelector((state: RootState) => state.pinnedMessage.pinnedMessage) - console.log(pinnedMessage) + return ( <> {pinnedMessage && pinnedMessage.pinned && ( diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 737d4b51..ba3065b9 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -4,7 +4,6 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import Title from '../../components/General/Title' import NimbusLogo from '../../components/Logos/NimbusLogo' import { NodeIcon } from '@status-im/icons' -import EmojiPickerDialog from '../../components/General/EmojiPickerDialog' import { Button as StatusButton, Text } from '@status-im/components' import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' @@ -29,7 +28,6 @@ function LandingPage() { }>Get Started - From 103a818aae8f9ffacb729d87600d48a0be561e07 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 13:57:25 +0300 Subject: [PATCH 4/9] Implement in create local node page --- .../CreateLocalNodePage/CreateLocalNodePage.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 0db1b774..74322ad7 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -7,9 +7,11 @@ import Header from '../../components/General/Header' import Titles from '../../components/General/Titles' import LabelInputField from '../../components/General/LabelInputField' import ColorPicker from '../../components/General/ColorPicker' +import EmojiPickerDialog from '../../components/General/EmojiPickerDialog' const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) + const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false) return ( @@ -31,7 +33,18 @@ const CreateLocalNodePage = () => { - } /> + setIsEmojiDialogOpen(prev => !prev)} + style={{ cursor: 'pointer' }} + /> + } + /> + {isEmojiDialogOpen && } From a8de82d974e23f5d6f87a6ceb544ab5125506db6 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 14:00:39 +0300 Subject: [PATCH 5/9] Style dialog --- src/components/General/EmojiPickerDialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx index 3ce76986..c11f717c 100644 --- a/src/components/General/EmojiPickerDialog.tsx +++ b/src/components/General/EmojiPickerDialog.tsx @@ -20,8 +20,8 @@ function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) { } return ( - - Emoji Picker Demo + + Your selected Emoji is: {selectedEmoji ? ( From 8a37c21b325c1bead0dc217b6f9f4c8fd2e47530 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 14:00:56 +0300 Subject: [PATCH 6/9] Clear code --- src/components/General/EmojiPickerDialog.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx index c11f717c..fdc58548 100644 --- a/src/components/General/EmojiPickerDialog.tsx +++ b/src/components/General/EmojiPickerDialog.tsx @@ -1,4 +1,3 @@ -import { Text } from '@status-im/components' import EmojiPicker, { EmojiStyle, Theme, From 2600a2cefb71662e22d1e0a188625b7d86f30a8a Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 14:01:39 +0300 Subject: [PATCH 7/9] Clear code --- src/components/General/EmojiPickerDialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx index fdc58548..196b9b65 100644 --- a/src/components/General/EmojiPickerDialog.tsx +++ b/src/components/General/EmojiPickerDialog.tsx @@ -21,12 +21,12 @@ function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) { return ( - + {/* Your selected Emoji is: {selectedEmoji ? ( ) : null} - + */} Date: Tue, 22 Aug 2023 14:05:12 +0300 Subject: [PATCH 8/9] Update EmojiPickerDialog.tsx --- src/components/General/EmojiPickerDialog.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx index 196b9b65..da0702b8 100644 --- a/src/components/General/EmojiPickerDialog.tsx +++ b/src/components/General/EmojiPickerDialog.tsx @@ -2,25 +2,23 @@ import EmojiPicker, { EmojiStyle, Theme, EmojiClickData, - Emoji, SuggestionMode, Categories, } from 'emoji-picker-react' import { useState } from 'react' -import { Stack, XStack } from 'tamagui' +import { Stack } from 'tamagui' type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE' function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) { const [selectedEmoji, setSelectedEmoji] = useState('') - +//we can set function onClick(emojiData: EmojiClickData) { setSelectedEmoji(emojiData.unified) } return ( - {/* Your selected Emoji is: {selectedEmoji ? ( From 94cee709effe3d69fd1e1b6db8ac070d2e908b88 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Tue, 22 Aug 2023 14:10:00 +0300 Subject: [PATCH 9/9] Fix warning --- src/components/General/EmojiPickerDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx index da0702b8..f16f7895 100644 --- a/src/components/General/EmojiPickerDialog.tsx +++ b/src/components/General/EmojiPickerDialog.tsx @@ -12,7 +12,7 @@ type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE' function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) { const [selectedEmoji, setSelectedEmoji] = useState('') -//we can set + console.log(selectedEmoji) function onClick(emojiData: EmojiClickData) { setSelectedEmoji(emojiData.unified) }