From be12c6da206ade0a70c07df75512945d25013be9 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 23 May 2022 21:21:29 +0100 Subject: [PATCH] chore: migrate Button to @revoltchat/ui (#617) * chore: start moving Button over * fix: convert ServerIdentityModal * fix: modal button styling * fix: popover styles * fix: clean up references to ui/*.* * fix: button sizing Co-authored-by: Ed L --- .prettierrc.js | 1 + src/components/common/AgeGate.tsx | 7 +- .../common/messaging/embed/EmbedInvite.tsx | 3 +- src/components/navigation/right/Search.tsx | 5 +- .../settings/appearance/ThemeTools.tsx | 12 +- src/components/ui/Button.tsx | 148 ------------------ src/components/ui/Modal.tsx | 12 +- .../modals/ExternalLinkPrompt.tsx | 5 +- .../intermediate/modals/Onboarding.tsx | 3 +- src/context/intermediate/modals/Prompt.tsx | 20 ++- .../intermediate/modals/SessionsPrompt.tsx | 47 +++--- .../intermediate/popovers/CreateBot.tsx | 5 +- .../intermediate/popovers/ModifyAccount.tsx | 2 +- .../popovers/ServerIdentityModal.tsx | 5 +- .../intermediate/popovers/UserProfile.tsx | 8 +- src/pages/channels/voice/VoiceHeader.tsx | 7 +- src/pages/invite/Invite.tsx | 7 +- src/pages/invite/InviteBot.tsx | 9 +- src/pages/login/forms/Form.tsx | 23 ++- src/pages/login/forms/MailProvider.tsx | 2 +- src/pages/settings/channel/Overview.tsx | 5 +- src/pages/settings/panes/Account.tsx | 7 +- src/pages/settings/panes/Audio.tsx | 10 +- src/pages/settings/panes/MyBots.tsx | 7 +- src/pages/settings/panes/Native.tsx | 11 +- src/pages/settings/panes/Plugins.tsx | 5 +- src/pages/settings/panes/Profile.tsx | 5 +- src/pages/settings/panes/Sessions.tsx | 22 +-- src/pages/settings/server/Members.tsx | 6 +- src/pages/settings/server/Overview.tsx | 5 +- tsconfig.json | 2 +- ui/index.html | 13 -- ui/ui.tsx | 87 ---------- vite.config.ts | 1 - 34 files changed, 156 insertions(+), 361 deletions(-) delete mode 100644 src/components/ui/Button.tsx delete mode 100644 ui/index.html delete mode 100644 ui/ui.tsx diff --git a/.prettierrc.js b/.prettierrc.js index d9170ab2..d016bb18 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -4,6 +4,7 @@ module.exports = { jsxBracketSameLine: true, importOrder: [ "preact|classnames|.scss$", + "^@revoltchat", "/(lib)", "/(redux|mobx)", "/(context)", diff --git a/src/components/common/AgeGate.tsx b/src/components/common/AgeGate.tsx index 6641877b..825721b8 100644 --- a/src/components/common/AgeGate.tsx +++ b/src/components/common/AgeGate.tsx @@ -6,10 +6,11 @@ import styled from "styled-components/macro"; import { Text } from "preact-i18n"; import { useState } from "preact/hooks"; +import { Button } from "@revoltchat/ui"; + import { useApplicationState } from "../../mobx/State"; import { SECTION_NSFW } from "../../mobx/stores/Layout"; -import Button from "../ui/Button"; import Checkbox from "../ui/Checkbox"; import { Children } from "../../types/Preact"; @@ -85,11 +86,11 @@ export default observer((props: Props) => {
- @@ -61,8 +65,8 @@ export default function ThemeTools() { }> {currentNickname !== "" && (
{isPublicBot && ( - diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx index 92634247..0d906868 100644 --- a/src/pages/channels/voice/VoiceHeader.tsx +++ b/src/pages/channels/voice/VoiceHeader.tsx @@ -6,14 +6,14 @@ import { VolumeFull, VolumeMute, } from "@styled-icons/boxicons-solid"; -import { Hashnode, Speakerdeck, Teamspeak } from "@styled-icons/simple-icons"; import { observer } from "mobx-react-lite"; import styled from "styled-components/macro"; import { Text } from "preact-i18n"; import { useMemo } from "preact/hooks"; -import VoiceClient from "../../../lib/vortex/VoiceClient"; +import { Button } from "@revoltchat/ui"; + import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; @@ -21,7 +21,6 @@ import { useClient } from "../../../context/revoltjs/RevoltClient"; import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import Button from "../../../components/ui/Button"; interface Props { id: string; @@ -145,7 +144,7 @@ export default observer(({ id }: Props) => {
- diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx index 801426ab..363e1a39 100644 --- a/src/pages/invite/Invite.tsx +++ b/src/pages/invite/Invite.tsx @@ -7,6 +7,8 @@ import styles from "./Invite.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; +import { Button } from "@revoltchat/ui"; + import { defer } from "../../lib/defer"; import { TextReact } from "../../lib/i18n"; @@ -22,7 +24,6 @@ import { takeError } from "../../context/revoltjs/util"; import ServerIcon from "../../components/common/ServerIcon"; import UserIcon from "../../components/common/user/UserIcon"; -import Button from "../../components/ui/Button"; import Overline from "../../components/ui/Overline"; import Preloader from "../../components/ui/Preloader"; @@ -71,7 +72,7 @@ export default function Invite() {
-

diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index 08d4722c..65b4be55 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -14,6 +14,8 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; +import { Button } from "@revoltchat/ui"; + import { stopPropagation } from "../../../lib/stopPropagation"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; @@ -25,7 +27,6 @@ import { import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import Button from "../../../components/ui/Button"; import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; @@ -101,7 +102,9 @@ export const Account = observer(() => {
- diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx index 1e39185b..e7194bee 100644 --- a/src/pages/settings/panes/Audio.tsx +++ b/src/pages/settings/panes/Audio.tsx @@ -2,11 +2,11 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { TextReact } from "../../../lib/i18n"; +import { Button } from "@revoltchat/ui"; + import { stopPropagation } from "../../../lib/stopPropagation"; import { voiceState } from "../../../lib/vortex/VoiceState"; -import Button from "../../../components/ui/Button"; import ComboBox from "../../../components/ui/ComboBox"; import Overline from "../../../components/ui/Overline"; import Tip from "../../../components/ui/Tip"; @@ -162,8 +162,10 @@ export function Audio() { {!permission && ( )} diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index 5b3299d2..1a50d726 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/src/pages/settings/panes/MyBots.tsx @@ -11,6 +11,8 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useEffect, useState } from "preact/hooks"; +import { Button } from "@revoltchat/ui"; + import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { internalEmit } from "../../../lib/eventEmitter"; import { useTranslation } from "../../../lib/i18n"; @@ -26,7 +28,6 @@ import AutoComplete, { import CollapsibleSection from "../../../components/common/CollapsibleSection"; import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import Button from "../../../components/ui/Button"; import Checkbox from "../../../components/ui/Checkbox"; import InputBox from "../../../components/ui/InputBox"; import Tip from "../../../components/ui/Tip"; @@ -343,7 +344,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) { setEditMode(false); } else setEditMode(true); }} - contrast> + palette="secondary">

diff --git a/tsconfig.json b/tsconfig.json index 1df4e75d..c4a59366 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,5 +19,5 @@ "types": ["vite-plugin-pwa/client"], "experimentalDecorators": true }, - "include": ["src", "ui/ui.tsx", "external/lang/Languages.ts"] + "include": ["src", "external/lang/Languages.ts"] } diff --git a/ui/index.html b/ui/index.html deleted file mode 100644 index 51074353..00000000 --- a/ui/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Revolt UI - - -
- - - diff --git a/ui/ui.tsx b/ui/ui.tsx deleted file mode 100644 index e6db65af..00000000 --- a/ui/ui.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import styled from "styled-components/macro"; - -import "../src/styles/index.scss"; -import { render } from "preact"; -import { useState } from "preact/hooks"; - -import Theme from "../src/context/Theme"; - -import Banner from "../src/components/ui/Banner"; -import Button from "../src/components/ui/Button"; -import Checkbox from "../src/components/ui/Checkbox"; -import ColourSwatches from "../src/components/ui/ColourSwatches"; -import ComboBox from "../src/components/ui/ComboBox"; -import InputBox from "../src/components/ui/InputBox"; -import Overline from "../src/components/ui/Overline"; -import Radio from "../src/components/ui/Radio"; -import Tip from "../src/components/ui/Tip"; - -export const UIDemo = styled.div` - gap: 12px; - padding: 12px; - display: flex; - flex-direction: column; - align-items: flex-start; -`; - -export function UI() { - let [checked, setChecked] = useState(false); - let [colour, setColour] = useState("#FD6671"); - let [selected, setSelected] = useState<"a" | "b" | "c">("a"); - - return ( - <> - - - - - I am a banner! - - Do you want thing?? - - - - - - - - - - - - setColour(v)} /> - I am a tip! I provide valuable information. - setSelected("a")}> - First option - - setSelected("b")}> - Second option - - setSelected("c")}> - Last option - - Normal overline - Subtle overline - Error overline - Normal overline - - Subtle overline - - - ); -} - -render( - <> - - - - - , - document.getElementById("app")!, -); diff --git a/vite.config.ts b/vite.config.ts index 4558623b..4d695ab9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -119,7 +119,6 @@ export default defineConfig({ rollupOptions: { input: { main: resolve(__dirname, "index.html"), - ui: resolve(__dirname, "ui/index.html"), }, }, },