diff --git a/.eslintrc b/.eslintrc index 7f231e0d..b0ea0af6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -47,7 +47,7 @@ // Side effect imports. ["^\\u0000"], // `react` related packages come first. - ["^react"], + ["^react$", "^react-dom$"], // Things that start with a letter (or digit or underscore), or `@` followed by a letter. ["^@?\\w"], // Absolute imports and other imports such as Vue-style `@/foo`. diff --git a/examples/channel/index.html b/examples/channel/index.html deleted file mode 100644 index ccc97709..00000000 --- a/examples/channel/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - Channel | Status - - - -
- - - diff --git a/examples/channel/index.tsx b/examples/channel/index.tsx deleted file mode 100644 index f7a55e0c..00000000 --- a/examples/channel/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { StrictMode } from 'react' -import { render } from 'react-dom' - -import { Channel, lightTheme } from '@status-im/react' - -const App = () => { - return ( -
- -
- ) -} - -render( - - - , - document.getElementById('root') -) diff --git a/examples/channel/package.json b/examples/channel/package.json deleted file mode 100644 index 261cd7d8..00000000 --- a/examples/channel/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "channel", - "version": "0.0.0", - "source": "index.html", - "browserslist": "> 0.5%, last 2 versions, not dead, not ios_saf < 13", - "scripts": { - "dev": "parcel", - "prebuild": "rm -rf dist", - "build": "parcel build" - }, - "dependencies": { - "@status-im/react": "^0.0.0", - "react": "^17.0.0", - "react-dom": "^17.0.0" - }, - "devDependencies": { - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", - "parcel": "^2.0.0", - "assert": "^2.0.0", - "crypto-browserify": "^3.12.0", - "process": "^0.11.10", - "stream-browserify": "^3.0.0", - "typescript": "^4.0.0" - } -} diff --git a/examples/channel/styles.css b/examples/channel/styles.css deleted file mode 100644 index e69de29b..00000000 diff --git a/examples/community/index.tsx b/examples/community/index.tsx index 4be44cf4..0a5f43b9 100644 --- a/examples/community/index.tsx +++ b/examples/community/index.tsx @@ -4,11 +4,7 @@ import { render } from 'react-dom' import { Community, lightTheme } from '@status-im/react' const App = () => { - return ( -
- -
- ) + return } render( diff --git a/examples/community/styles.css b/examples/community/styles.css index e69de29b..58bff252 100644 --- a/examples/community/styles.css +++ b/examples/community/styles.css @@ -0,0 +1,5 @@ +body, +html, +#root { + height: 100%; +} diff --git a/packages/status-react/package.json b/packages/status-react/package.json index bd6364e5..8ba441cf 100644 --- a/packages/status-react/package.json +++ b/packages/status-react/package.json @@ -25,7 +25,16 @@ }, "dependencies": { "@hcaptcha/react-hcaptcha": "^1.0.0", + "@radix-ui/react-accessible-icon": "^0.1.4", + "@radix-ui/react-alert-dialog": "^0.1.7", + "@radix-ui/react-collapsible": "^0.1.6", + "@radix-ui/react-context-menu": "^0.1.6", + "@radix-ui/react-dialog": "^0.1.7", + "@radix-ui/react-dropdown-menu": "^0.1.6", + "@radix-ui/react-tooltip": "^0.1.7", + "@radix-ui/react-visually-hidden": "^0.1.4", "@status-im/core": "^0.0.0", + "@stitches/react": "^1.2.7", "emoji-mart": "^3.0.1", "html-entities": "^2.3.2", "js-sha3": "^0.8.0", @@ -34,7 +43,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-is": "^17.0.2", - "styled-components": "^5.3.1" + "tinykeys": "^1.4.0" }, "devDependencies": { "@types/emoji-mart": "^3.0.6", diff --git a/packages/status-react/src/hooks/use-keyboard-shortcut.tsx b/packages/status-react/src/hooks/use-keyboard-shortcut.tsx new file mode 100644 index 00000000..b8ca537b --- /dev/null +++ b/packages/status-react/src/hooks/use-keyboard-shortcut.tsx @@ -0,0 +1,12 @@ +import { useEffect } from 'react' + +import tinykeys from 'tinykeys' + +import type { KeyBindingMap } from 'tinykeys' + +// docs: https://github.com/jamiebuilds/tinykeys#commonly-used-keys-and-codes +export const useKeyboardShortcuts = (keyBindingMap: KeyBindingMap) => { + useEffect(() => { + return tinykeys(window, keyBindingMap) + }) +} diff --git a/packages/status-react/src/index.tsx b/packages/status-react/src/index.tsx index 0daf2bb9..7106ae8e 100644 --- a/packages/status-react/src/index.tsx +++ b/packages/status-react/src/index.tsx @@ -1,4 +1,3 @@ -export { type ChannelProps, Channel } from './modules/channel' export { type CommunityProps, Community } from './modules/community' export { darkTheme, lightTheme } from './styles/themes' export type { Config } from './types/config' diff --git a/packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx b/packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx deleted file mode 100644 index a75b23d8..00000000 --- a/packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react' - -import styled from 'styled-components' - -import { ChatCreation } from '~/src/components/Chat/ChatCreation' -import { ChatInput } from '~/src/components/Chat/ChatInput' -import { ChatTopbar, ChatTopbarLoading } from '~/src/components/Chat/ChatTopbar' -import { TokenRequirement } from '~/src/components/Form/TokenRequirement' -import { MessagesList } from '~/src/components/Messages/MessagesList' -import { NarrowChannels } from '~/src/components/NarrowMode/NarrowChannels' -import { NarrowMembers } from '~/src/components/NarrowMode/NarrowMembers' -import { LoadingSkeleton } from '~/src/components/Skeleton/LoadingSkeleton' -import { useMessengerContext } from '~/src/contexts/messengerProvider' -import { useNarrow } from '~/src/contexts/narrowProvider' - -import type { Reply } from '~/src/hooks/useReply' -import type { ChannelData } from '~/src/models/ChannelData' - -export enum ChatBodyState { - Chat, - Channels, - Members, -} - -function ChatBodyLoading() { - const narrow = useNarrow() - return ( - - - - - undefined} /> - - - ) -} - -type ChatBodyContentProps = { - showState: ChatBodyState - switchShowState: (state: ChatBodyState) => void - channel: ChannelData -} - -function ChatBodyContent({ - showState, - switchShowState, - channel, -}: ChatBodyContentProps) { - const [reply, setReply] = useState(undefined) - - switch (showState) { - case ChatBodyState.Chat: - return ( - <> - - - - ) - case ChatBodyState.Channels: - return ( - switchShowState(ChatBodyState.Channels)} - /> - ) - case ChatBodyState.Members: - return ( - switchShowState(ChatBodyState.Members)} - /> - ) - } -} - -interface GroupChatBodyProps { - onClick: () => void - showMembers: boolean - permission: boolean - editGroup: boolean - setEditGroup: React.Dispatch> -} - -export function GroupChatBody({ - onClick, - showMembers, - permission, - editGroup, - setEditGroup, -}: GroupChatBodyProps) { - const { activeChannel, loadingMessenger } = useMessengerContext() - - const narrow = useNarrow() - const className = useMemo(() => (narrow ? 'narrow' : ''), [narrow]) - - const [showState, setShowState] = useState(ChatBodyState.Chat) - const switchShowState = useCallback( - (state: ChatBodyState) => { - if (narrow) { - setShowState(prev => (prev === state ? ChatBodyState.Chat : state)) - } - }, - [narrow] - ) - - useEffect(() => { - if (!narrow) { - setShowState(ChatBodyState.Chat) - } - }, [narrow]) - - if (!loadingMessenger && activeChannel) { - return ( - - - {editGroup ? ( - - ) : ( - - )} - - - {!permission && ( - - - - )} - - ) - } - - return -} - -export const Wrapper = styled.div` - width: 61%; - display: flex; - flex-direction: column; - flex: 1; - height: 100%; - background: ${({ theme }) => theme.bodyBackgroundColor}; - position: relative; - - &.narrow { - width: 100%; - } -` - -const ChatBodyWrapper = styled.div` - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - flex: 1; - background: ${({ theme }) => theme.bodyBackgroundColor}; -` - -const BluredWrapper = styled.div` - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: center; - position: absolute; - bottom: 0; - left: 0; - background: ${({ theme }) => theme.bodyBackgroundGradient}; - backdrop-filter: blur(4px); - z-index: 2; -` diff --git a/packages/status-react/src/modules/channel/GroupChatRoom.tsx b/packages/status-react/src/modules/channel/GroupChatRoom.tsx deleted file mode 100644 index 90093243..00000000 --- a/packages/status-react/src/modules/channel/GroupChatRoom.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useState } from 'react' - -import styled from 'styled-components' - -import { Channels } from '~/src/components/Channels/Channels' -import { ChatCreation } from '~/src/components/Chat/ChatCreation' -import { AgreementModal } from '~/src/components/Modals/AgreementModal' -import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal' -import { EditModal } from '~/src/components/Modals/EditModal' -import { LeavingModal } from '~/src/components/Modals/LeavingModal' -import { LogoutModal } from '~/src/components/Modals/LogoutModal' -import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal' -import { ProfileModal } from '~/src/components/Modals/ProfileModal' -import { StatusModal } from '~/src/components/Modals/StatusModal' -import { UserCreationModal } from '~/src/components/Modals/UserCreationModal' -import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal' -import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal' -import { WalletModal } from '~/src/components/Modals/WalletModal' -import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList' -import { ChatState, useChatState } from '~/src/contexts/chatStateProvider' -import { useNarrow } from '~/src/contexts/narrowProvider' - -import { GroupChatBody } from './GroupChat/GroupChatBody' -import { GroupMembers } from './GroupMembers/GroupMembers' - -// import type { ChannelProps } from '.' - -function Modals() { - return ( - <> - - - - - - - - - - - - - - ) -} - -// interface Props { -// options: ChannelProps['options'] -// } - -export const GroupChatRoom = () => { - const [state] = useChatState() - const [showMembers, setShowMembers] = useState(false) - const [editGroup, setEditGroup] = useState(false) - const narrow = useNarrow() - - return ( - - {!narrow && ( - - - - )} - {state === ChatState.ChatBody && ( - setShowMembers(!showMembers)} - showMembers={showMembers} - permission={true} - editGroup={editGroup} - setEditGroup={setEditGroup} - /> - )} - {showMembers && !narrow && state === ChatState.ChatBody && ( - - )} - {state === ChatState.ChatCreation && } - - - - ) -} - -const ChatWrapper = styled.div` - width: 100%; - height: 100%; - display: flex; - position: relative; -` - -const ChannelsWrapper = styled.div` - width: 21%; - height: 100%; - min-width: 250px; - background-color: ${({ theme }) => theme.sectionBackgroundColor}; - padding: 10px 16px; - display: flex; - flex-direction: column; -` diff --git a/packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx b/packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx deleted file mode 100644 index e0b51728..00000000 --- a/packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useMemo, useState } from 'react' - -import styled from 'styled-components' - -import { MembersList } from '~/src/components/Members/MembersList' -import { useMessengerContext } from '~/src/contexts/messengerProvider' - -export function GroupMembers() { - const { addContact, activeChannel } = useMessengerContext() - const heading = useMemo( - () => - activeChannel && activeChannel?.type === 'group' - ? 'Group members' - : 'Members', - [activeChannel] - ) - const [newUserInput, setNewUserInput] = useState('') - return ( - <> - - {heading} - - setNewUserInput(e.target.value)} - /> - - - - ) -} - -const MembersWrapper = styled.div` - width: 18%; - height: 100%; - min-width: 164px; - display: flex; - flex-direction: column; - background-color: ${({ theme }) => theme.sectionBackgroundColor}; - padding: 16px; - overflow-y: scroll; -` - -const MemberHeading = styled.h2` - font-weight: 500; - font-size: 15px; - line-height: 22px; - color: ${({ theme }) => theme.primary}; - margin-bottom: 16px; -` diff --git a/packages/status-react/src/modules/channel/index.tsx b/packages/status-react/src/modules/channel/index.tsx deleted file mode 100644 index f82835cb..00000000 --- a/packages/status-react/src/modules/channel/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { useRef } from 'react' - -import styled, { ThemeProvider } from 'styled-components' - -import { ChatStateProvider } from '~/src/contexts/chatStateProvider' -import { IdentityProvider } from '~/src/contexts/identityProvider' -import { MessengerProvider } from '~/src/contexts/messengerProvider' -import { ModalProvider } from '~/src/contexts/modalProvider' -import { NarrowProvider } from '~/src/contexts/narrowProvider' -import { ToastProvider } from '~/src/contexts/toastProvider' -import { GlobalStyle } from '~/src/styles/GlobalStyle' - -import { GroupChatRoom } from './GroupChatRoom' - -import type { Config } from '~/src/types/config' - -interface Props extends Config { - options: { - showMembers?: false - } -} - -export const Channel = (props: Props) => { - const { publicKey, theme, environment } = props - - const ref = useRef(null) - - return ( - - - - - - - - - - -