From a7cec73346658cde6bb13eded376d3887798b301 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Mon, 27 Sep 2021 13:21:23 +0200 Subject: [PATCH] Add Components (#13) --- ...cess-npm-0.11.10-aeb3b641ae-bfcce49814.zip | Bin 0 -> 5843 bytes packages/react-chat-example/package.json | 1 + packages/react-chat-example/src/index.html | 2 - .../react-chat/src/components/Channels.tsx | 18 ++ packages/react-chat/src/components/Chat.tsx | 30 ++++ .../react-chat/src/components/ChatBody.tsx | 12 ++ .../react-chat/src/components/Members.tsx | 12 ++ .../react-chat/src/components/ReactChat.tsx | 12 +- .../react-chat/src/styles/GlobalStyle.tsx | 157 ++++++++++++++++++ packages/react-chat/src/styles/styles.ts | 1 + packages/react-chat/src/styles/themes.ts | 31 ++++ yarn.lock | 8 + 12 files changed, 281 insertions(+), 3 deletions(-) create mode 100644 .yarn/cache/process-npm-0.11.10-aeb3b641ae-bfcce49814.zip create mode 100644 packages/react-chat/src/components/Channels.tsx create mode 100644 packages/react-chat/src/components/Chat.tsx create mode 100644 packages/react-chat/src/components/ChatBody.tsx create mode 100644 packages/react-chat/src/components/Members.tsx create mode 100644 packages/react-chat/src/styles/GlobalStyle.tsx create mode 100644 packages/react-chat/src/styles/styles.ts create mode 100644 packages/react-chat/src/styles/themes.ts diff --git a/.yarn/cache/process-npm-0.11.10-aeb3b641ae-bfcce49814.zip b/.yarn/cache/process-npm-0.11.10-aeb3b641ae-bfcce49814.zip new file mode 100644 index 0000000000000000000000000000000000000000..1bb2720229e270ce8377c4aa97db6ee6abbdc0be GIT binary patch literal 5843 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 literal 0 HcmV?d00001 diff --git a/packages/react-chat-example/package.json b/packages/react-chat-example/package.json index 12243952..5e5004e7 100644 --- a/packages/react-chat-example/package.json +++ b/packages/react-chat-example/package.json @@ -22,6 +22,7 @@ "assert": "^2.0.0", "buffer": "^6.0.3", "crypto-browserify": "^3.12.0", + "process": "^0.11.10", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", diff --git a/packages/react-chat-example/src/index.html b/packages/react-chat-example/src/index.html index 54319f91..df61d712 100644 --- a/packages/react-chat-example/src/index.html +++ b/packages/react-chat-example/src/index.html @@ -1,10 +1,8 @@ - - DAppconnect chat diff --git a/packages/react-chat/src/components/Channels.tsx b/packages/react-chat/src/components/Channels.tsx new file mode 100644 index 00000000..817f4cc7 --- /dev/null +++ b/packages/react-chat/src/components/Channels.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import styled from "styled-components"; + +import { Theme } from "../styles/themes"; + +interface ChannelsProps { + theme: Theme; +} + +export function Channels({ theme }: ChannelsProps) { + return Channels; +} + +const ChannelsWrapper = styled.div` + width: 33%; + height: 100%; + background-color: ${({ theme }) => theme.sectionBackgroundColor}; +`; diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx new file mode 100644 index 00000000..810f3f1d --- /dev/null +++ b/packages/react-chat/src/components/Chat.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; + +import { Theme } from "../styles/themes"; + +import { Channels } from "./Channels"; +import { ChatBody } from "./ChatBody"; +import { Members } from "./Members"; + +interface ChatProps { + theme: Theme; + channels?: boolean; + members?: boolean; +} + +export function Chat({ theme, channels, members }: ChatProps) { + return ( + + {channels && } + + {members && } + + ); +} + +const ChatWrapper = styled.div` + width: 100%; + height: 100vh; + display: flex; +`; diff --git a/packages/react-chat/src/components/ChatBody.tsx b/packages/react-chat/src/components/ChatBody.tsx new file mode 100644 index 00000000..08b3f432 --- /dev/null +++ b/packages/react-chat/src/components/ChatBody.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import styled from "styled-components"; + +export function ChatBody() { + return Messages; +} + +const ChatBodyWrapper = styled.div` + flex: 1; + height: 100%; + background: ${({ theme }) => theme.bodyBackgroundColor}; +`; diff --git a/packages/react-chat/src/components/Members.tsx b/packages/react-chat/src/components/Members.tsx new file mode 100644 index 00000000..9c6e9aab --- /dev/null +++ b/packages/react-chat/src/components/Members.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import styled from "styled-components"; + +export function Members() { + return ; +} + +const MembersWrapper = styled.div` + width: 33%; + height: 100%; + background-color: ${({ theme }) => theme.sectionBackgroundColor}; +`; diff --git a/packages/react-chat/src/components/ReactChat.tsx b/packages/react-chat/src/components/ReactChat.tsx index 14a67cfb..d9d25d38 100644 --- a/packages/react-chat/src/components/ReactChat.tsx +++ b/packages/react-chat/src/components/ReactChat.tsx @@ -1,5 +1,15 @@ import React from "react"; +import { GlobalStyle } from "../styles/GlobalStyle"; +import { lightTheme } from "../styles/themes"; + +import { Chat } from "./Chat"; + export function ReactChat() { - return
This is react chat
; + return ( +
+ + +
+ ); } diff --git a/packages/react-chat/src/styles/GlobalStyle.tsx b/packages/react-chat/src/styles/GlobalStyle.tsx new file mode 100644 index 00000000..29b98c75 --- /dev/null +++ b/packages/react-chat/src/styles/GlobalStyle.tsx @@ -0,0 +1,157 @@ +import { createGlobalStyle } from "styled-components"; + +export const GlobalStyle = createGlobalStyle` + * { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + } + + body, + html { + margin: 0; + font-family: 'Inter', sans-serif; + font-weight: normal; + font-size: 15px; + line-height: 22px; + overflow-x: hidden; + } + + html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + em, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + b, + u, + i, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td, + article, + aside, + canvas, + details, + embed, + figure, + figcaption, + footer, + header, + hgroup, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; + } + + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + menu, + nav, + section { + display: block; + } + + body { + line-height: 1; + } + + ol, + ul { + list-style: none; + } + + blockquote, + q { + quotes: none; + } + + blockquote:before, + blockquote:after, + q:before, + q:after { + content: ''; + content: none; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + button { + border: none; + background: none; + cursor: pointer; + } + + a { + text-decoration: none; + cursor: pointer; + } +`; diff --git a/packages/react-chat/src/styles/styles.ts b/packages/react-chat/src/styles/styles.ts new file mode 100644 index 00000000..caf58033 --- /dev/null +++ b/packages/react-chat/src/styles/styles.ts @@ -0,0 +1 @@ +export const Font = "Inter, sans-serif"; diff --git a/packages/react-chat/src/styles/themes.ts b/packages/react-chat/src/styles/themes.ts new file mode 100644 index 00000000..ad3b5505 --- /dev/null +++ b/packages/react-chat/src/styles/themes.ts @@ -0,0 +1,31 @@ +export type Theme = { + textPrimaryColor: string; + textSecondaryColor: string; + bodyBackgroundColor: string; + sectionBackgroundColor: string; + memberNameColor: string; + guestNameColor: string; + notificationColor: string; +}; + +export const lightTheme: Theme = { + textPrimaryColor: "#000", + textSecondaryColor: "#939BA1", + bodyBackgroundColor: "#fff", + sectionBackgroundColor: "#F6F8FA", + memberNameColor: "#4360DF", + guestNameColor: "#887AF9", + notificationColor: "#4360DF", +}; + +export const darkTheme: Theme = { + textPrimaryColor: "#fff", + textSecondaryColor: "#909090", + bodyBackgroundColor: "#000", + sectionBackgroundColor: "#252525", + memberNameColor: "#88B0FF", + guestNameColor: "#887AF9", + notificationColor: "#887AF9", +}; + +export default { lightTheme, darkTheme }; diff --git a/yarn.lock b/yarn.lock index b4ca87de..927488a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -241,6 +241,7 @@ __metadata: mocha: ^9.0.3 npm-run-all: ^4.1.5 prettier: ^2.3.2 + process: ^0.11.10 react: ^17.0.2 react-dom: ^17.0.2 react-router-dom: ^5.2.0 @@ -8861,6 +8862,13 @@ fsevents@~2.3.2: languageName: node linkType: hard +"process@npm:^0.11.10": + version: 0.11.10 + resolution: "process@npm:0.11.10" + checksum: bfcce49814f7d172a6e6a14d5fa3ac92cc3d0c3b9feb1279774708a719e19acd673995226351a082a9ae99978254e320ccda4240ddc474ba31a76c79491ca7c3 + languageName: node + linkType: hard + "progress@npm:^2.0.0": version: 2.0.3 resolution: "progress@npm:2.0.3"