From f3bdbe52d9cd8489f9ba49a7ee5ba44b8f0302cb Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:47:13 +0100 Subject: [PATCH] feat(@ui): migrate textarea and tip --- src/components/ui/TextArea.module.scss | 31 -- src/components/ui/TextArea.tsx | 58 ---- src/components/ui/Tip.tsx | 72 ----- src/lib/TextAreaAutoSize.tsx | 3 +- src/pages/invite/InviteBot.tsx | 7 +- src/pages/settings/panes/Account.tsx | 4 +- src/pages/settings/panes/Audio.tsx | 7 +- src/pages/settings/panes/Languages.tsx | 20 +- src/pages/settings/panes/MyBots.tsx | 7 +- src/pages/settings/panes/Native.tsx | 5 +- src/pages/settings/panes/Plugins.tsx | 6 +- src/pages/settings/panes/Profile.tsx | 15 +- src/pages/settings/panes/Sessions.tsx | 14 +- src/pages/settings/panes/ThemeShop.tsx | 399 ------------------------- 14 files changed, 41 insertions(+), 607 deletions(-) delete mode 100644 src/components/ui/TextArea.module.scss delete mode 100644 src/components/ui/TextArea.tsx delete mode 100644 src/components/ui/Tip.tsx delete mode 100644 src/pages/settings/panes/ThemeShop.tsx diff --git a/src/components/ui/TextArea.module.scss b/src/components/ui/TextArea.module.scss deleted file mode 100644 index b6e1ab0f..00000000 --- a/src/components/ui/TextArea.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -.container { - font-size: .875rem; - line-height: 20px; - position: relative; -} - -.textarea { - width: 100%; - white-space: pre-wrap; - - textarea::placeholder { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -.hide { - width: 100%; - overflow: hidden; - position: relative; -} - -.ghost { - width: 100%; - white-space: pre-wrap; - - top: 0; - position: absolute; - visibility: hidden; -} diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx deleted file mode 100644 index 01c4e136..00000000 --- a/src/components/ui/TextArea.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import styled, { css } from "styled-components/macro"; - -export interface TextAreaProps { - code?: boolean; - padding?: string; - lineHeight?: string; - hideBorder?: boolean; -} - -export const TEXT_AREA_BORDER_WIDTH = 2; -export const DEFAULT_TEXT_AREA_PADDING = 16; -export const DEFAULT_LINE_HEIGHT = 20; - -export default styled.textarea` - width: 100%; - resize: none; - display: block; - color: var(--foreground); - background: var(--secondary-background); - padding: ${(props) => props.padding ?? "var(--textarea-padding)"}; - line-height: ${(props) => - props.lineHeight ?? "var(--textarea-line-height)"}; - - ${(props) => - props.hideBorder && - css` - border: none; - `} - - ${(props) => - !props.hideBorder && - css` - border-radius: var(--border-radius); - transition: border-color 0.2s ease-in-out; - border: var(--input-border-width) solid transparent; - `} - - &:focus { - outline: none; - - ${(props) => - !props.hideBorder && - css` - border: var(--input-border-width) solid var(--accent); - `} - } - - ${(props) => - props.code - ? css` - font-family: var(--monospace-font), monospace; - ` - : css` - font-family: inherit; - `} - - font-variant-ligatures: var(--ligatures); -`; diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx deleted file mode 100644 index 46f9e239..00000000 --- a/src/components/ui/Tip.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { InfoCircle } from "@styled-icons/boxicons-regular"; -import styled, { css } from "styled-components/macro"; - -import { Children } from "../../types/Preact"; - -interface Props { - warning?: boolean; - error?: boolean; -} - -export const Separator = styled.div` - height: 1px; - width: calc(100% - 10px); - background: var(--secondary-header); - margin: 18px auto; -`; - -export const TipBase = styled.div` - display: flex; - padding: 12px; - font-weight: 500; - overflow: hidden; - align-items: center; - - font-size: 14px; - background: var(--primary-header); - border-radius: var(--border-radius); - border: 2px solid var(--secondary-header); - - a { - cursor: pointer; - &:hover { - text-decoration: underline; - } - } - - svg { - flex-shrink: 0; - margin-inline-end: 10px; - } - - ${(props) => - props.warning && - css` - color: var(--warning); - border: 2px solid var(--warning); - background: var(--secondary-header); - `} - - ${(props) => - props.error && - css` - color: white; - border: 2px solid var(--error); - background: var(--error); - `} -`; - -export default function Tip( - props: Props & { children: Children; hideSeparator?: boolean }, -) { - const { children, hideSeparator, ...tipProps } = props; - return ( - <> - {!hideSeparator && } - - - {children} - - - ); -} diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx index 51ae17b8..805d1145 100644 --- a/src/lib/TextAreaAutoSize.tsx +++ b/src/lib/TextAreaAutoSize.tsx @@ -3,7 +3,8 @@ import styled from "styled-components/macro"; import { RefObject } from "preact"; import { useEffect, useLayoutEffect, useRef } from "preact/hooks"; -import TextArea, { TextAreaProps } from "../components/ui/TextArea"; +import { TextArea } from "@revoltchat/ui"; +import type { TextAreaProps } from "@revoltchat/ui/esm/components/design/atoms/inputs/TextArea"; import { internalSubscribe } from "./eventEmitter"; import { isTouchscreenDevice } from "./isTouchscreenDevice"; diff --git a/src/pages/invite/InviteBot.tsx b/src/pages/invite/InviteBot.tsx index 72b09fcf..99a863a9 100644 --- a/src/pages/invite/InviteBot.tsx +++ b/src/pages/invite/InviteBot.tsx @@ -4,14 +4,13 @@ import styled from "styled-components/macro"; import { useEffect, useState } from "preact/hooks"; -import { Button, ComboBox, Preloader } from "@revoltchat/ui"; +import { Button, ComboBox, Preloader, Tip } from "@revoltchat/ui"; import { useClient } from "../../context/revoltjs/RevoltClient"; import UserIcon from "../../components/common/user/UserIcon"; import Markdown from "../../components/markdown/Markdown"; import Overline from "../../components/ui/Overline"; -import Tip from "../../components/ui/Tip"; const BotInfo = styled.div` gap: 12px; @@ -46,9 +45,7 @@ export default function InviteBot() { return (
- - This section is under construction. - + This section is under construction. {typeof data === "undefined" && } {data && ( <> diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index 65b4be55..d1687f1e 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -14,7 +14,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, LineDivider, Tip } from "@revoltchat/ui"; import { stopPropagation } from "../../../lib/stopPropagation"; @@ -27,7 +27,6 @@ import { import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; export const Account = observer(() => { @@ -227,6 +226,7 @@ export const Account = observer(() => { + diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx index 62227d07..3333b7ee 100644 --- a/src/pages/settings/panes/Audio.tsx +++ b/src/pages/settings/panes/Audio.tsx @@ -2,7 +2,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { Button, ComboBox } from "@revoltchat/ui"; +import { Button, ComboBox, Tip } from "@revoltchat/ui"; import { stopPropagation } from "../../../lib/stopPropagation"; import { voiceState } from "../../../lib/vortex/VoiceState"; @@ -10,7 +10,6 @@ import { voiceState } from "../../../lib/vortex/VoiceState"; import opusSVG from "../assets/opus_logo.svg"; import Overline from "../../../components/ui/Overline"; -import Tip from "../../../components/ui/Tip"; { /*import OpusSVG from "../assets/opus_logo.svg";*/ @@ -96,13 +95,13 @@ export function Audio() { <>
{!permission && ( - + )} {error && permission === "prompt" && ( - + diff --git a/src/pages/settings/panes/Languages.tsx b/src/pages/settings/panes/Languages.tsx index 7a62875d..c347de52 100644 --- a/src/pages/settings/panes/Languages.tsx +++ b/src/pages/settings/panes/Languages.tsx @@ -5,7 +5,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useMemo } from "preact/hooks"; -import { Checkbox } from "@revoltchat/ui"; +import { Checkbox, LineDivider, Tip } from "@revoltchat/ui"; import { useApplicationState } from "../../../mobx/State"; @@ -23,7 +23,6 @@ import { Languages as Langs, } from "../../../../external/lang/Languages"; import Emoji from "../../../components/common/Emoji"; -import Tip from "../../../components/ui/Tip"; type Key = [Language, LanguageEntry]; @@ -198,16 +197,17 @@ export const Languages = observer(() => { .filter(([, lang]) => lang.cat === "alt") .map(EntryFactory)}
+ - - {" "} - - - + {" "} + + + +
); diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index 10756648..c68f238b 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/src/pages/settings/panes/MyBots.tsx @@ -11,7 +11,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useEffect, useState } from "preact/hooks"; -import { Button, Checkbox, InputBox } from "@revoltchat/ui"; +import { Button, Checkbox, InputBox, Tip } from "@revoltchat/ui"; import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { internalEmit } from "../../../lib/eventEmitter"; @@ -28,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 Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; interface Data { @@ -465,9 +464,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) { {error && (
- - {error} - + {error}
)} diff --git a/src/pages/settings/panes/Native.tsx b/src/pages/settings/panes/Native.tsx index c02e131d..f1e75837 100644 --- a/src/pages/settings/panes/Native.tsx +++ b/src/pages/settings/panes/Native.tsx @@ -2,11 +2,10 @@ import { Refresh } from "@styled-icons/boxicons-regular"; import { useEffect, useState } from "preact/hooks"; -import { Button, Checkbox } from "@revoltchat/ui"; +import { Button, Checkbox, Tip } from "@revoltchat/ui"; import RLogo from "../assets/revolt_r.svg"; -import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; export function Native() { @@ -27,7 +26,7 @@ export function Native() { return (
- Some options might require a restart. + Some options might require a restart.

App Behavior

{ const plugins = useApplicationState().plugins; return (
- + {plugins.list().map((plugin) => { diff --git a/src/pages/settings/panes/Profile.tsx b/src/pages/settings/panes/Profile.tsx index 45fe95fb..ff1dd44b 100644 --- a/src/pages/settings/panes/Profile.tsx +++ b/src/pages/settings/panes/Profile.tsx @@ -7,7 +7,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useContext, useEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, LineDivider, Tip } from "@revoltchat/ui"; import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { useTranslation } from "../../../lib/i18n"; @@ -23,7 +23,6 @@ import { import AutoComplete, { useAutoComplete, } from "../../../components/common/AutoComplete"; -import Tip from "../../../components/ui/Tip"; export const Profile = observer(() => { const status = useContext(StatusContext); @@ -203,11 +202,15 @@ export const Profile = observer(() => {

+ + - Want to change your username?{" "} - switchPage("account")}> - Head over to your account settings. - + + Want to change your username?{" "} + switchPage("account")}> + Head over to your account settings. + +
); diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx index 8905f38f..4652c069 100644 --- a/src/pages/settings/panes/Sessions.tsx +++ b/src/pages/settings/panes/Sessions.tsx @@ -18,13 +18,12 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button, Preloader } from "@revoltchat/ui"; +import { Button, LineDivider, Preloader, Tip } from "@revoltchat/ui"; import { dayjs } from "../../../context/Locale"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { AppContext } from "../../../context/revoltjs/RevoltClient"; -import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; dayjs.extend(relativeTime); @@ -248,13 +247,14 @@ export function Sessions() { + - - {" "} - switchPage("account")}> - - + {" "} + switchPage("account")}> + + +
); diff --git a/src/pages/settings/panes/ThemeShop.tsx b/src/pages/settings/panes/ThemeShop.tsx deleted file mode 100644 index ea010736..00000000 --- a/src/pages/settings/panes/ThemeShop.tsx +++ /dev/null @@ -1,399 +0,0 @@ -/** - * ! DEPRECATED FILE - * ! DO NOT IMPORT - * - * Replaced by Revolt Discover - */ -import { Check } from "@styled-icons/boxicons-regular"; -import { - Star, - Brush, - Bookmark, - BarChartAlt2, -} from "@styled-icons/boxicons-solid"; -import styled from "styled-components/macro"; - -import { Text } from "preact-i18n"; -import { useEffect, useState } from "preact/hooks"; - -import { useApplicationState } from "../../../mobx/State"; - -import { Theme, generateVariables } from "../../../context/Theme"; - -import Tip from "../../../components/ui/Tip"; -import previewPath from "../assets/preview.svg"; - -import { GIT_REVISION } from "../../../revision"; - -export const fetchManifest = (): Promise => - fetch(`${import.meta.env.VITE_THEMES_URL}/manifest.json`).then((res) => - res.json(), - ); - -export const fetchTheme = (slug: string): Promise => - fetch(`${import.meta.env.VITE_THEMES_URL}/theme_${slug}.json`).then((res) => - res.json(), - ); - -export interface ThemeMetadata { - name: string; - creator: string; - commit?: string; - description: string; -} - -export type Manifest = { - generated: string; - themes: Record; -}; - -// TODO: ability to preview / display the settings set like in the appearance pane -const ThemeInfo = styled.article` - display: flex; - flex-direction: column; - gap: 10px; - padding: 1rem; - border-radius: var(--border-radius); - background: var(--secondary-background); - - &[data-loaded] { - .preview { - opacity: 1; - } - } - - .preview { - grid-area: preview; - aspect-ratio: 323 / 202; - - background-color: var(--secondary-background); - border-radius: calc(var(--border-radius) / 2); - - // prep style for later - outline: 3px solid transparent; - - // hide random svg parts, crop border on firefox - overflow: hidden; - - // hide until loaded - opacity: 0; - - // style button - border: 0; - margin: 0; - padding: 0; - - transition: 0.25s opacity, 0.25s outline; - - > * { - grid-area: 1 / 1; - } - - svg { - height: 100%; - width: 100%; - object-fit: contain; - } - - &:hover, - &:active, - &:focus-visible { - outline: 3px solid var(--tertiary-background); - } - } - - .name { - margin-top: 5px !important; - grid-area: name; - margin: 0; - } - - .creator { - grid-area: creator; - justify-self: end; - font-size: 0.75rem; - } - - .description { - margin-bottom: 5px; - grid-area: desc; - } - - .previewBox { - position: relative; - height: 100%; - width: 100%; - - .hover { - opacity: 0; - font-family: var(--font), sans-serif; - font-variant-ligatures: var(--ligatures); - font-weight: 600; - display: flex; - align-items: center; - justify-content: center; - color: white; - height: 100%; - width: 100%; - z-index: 10; - position: absolute; - background: rgba(0, 0, 0, 0.5); - cursor: pointer; - transition: opacity 0.2s ease-in-out; - - &:hover { - opacity: 1; - } - } - - > svg { - height: 100%; - } - } -`; - -const ThemeList = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1rem; -`; - -const Banner = styled.div` - display: flex; - flex-direction: column; -`; - -const Category = styled.div` - display: flex; - gap: 8px; - align-items: center; - - .title { - display: flex; - align-items: center; - gap: 8px; - flex-grow: 1; - } - - .view { - font-size: 12px; - } -`; - -const ActiveTheme = styled.div` - display: flex; - flex-direction: column; - background: var(--secondary-background); - padding: 0; - border-radius: var(--border-radius); - gap: 8px; - overflow: hidden; - - .active-indicator { - display: flex; - gap: 6px; - align-items: center; - background: var(--accent); - width: 100%; - padding: 5px 10px; - font-size: 13px; - font-weight: 400; - color: white; - } - .title { - font-size: 1.2rem; - font-weight: 600; - } - - .author { - font-size: 12px; - margin-bottom: 5px; - } - - .theme { - width: 124px; - height: 80px; - background: var(--tertiary-background); - border-radius: 4px; - } - - .container { - display: flex; - gap: 16px; - padding: 10px 16px 16px; - } -`; - -const ThemedSVG = styled.svg<{ theme: Theme }>` - ${(props) => props.theme && generateVariables(props.theme)} -`; - -type ThemePreviewProps = Omit, "as"> & { - slug?: string; - theme?: Theme; - onThemeLoaded?: (theme: Theme) => void; -}; - -const ThemePreview = ({ theme, ...props }: ThemePreviewProps) => { - return ( - - ); -}; - -const ThemeShopRoot = styled.div` - display: grid; - gap: 1rem; - - h5 { - margin-bottom: 0; - } -`; - -export function ThemeShop() { - // setThemeList is for adding more / lazy loading in the future - const [themeList, setThemeList] = useState< - [string, ThemeMetadata][] | null - >(null); - const [themeData, setThemeData] = useState>({}); - - const themes = useApplicationState().settings.theme; - - async function fetchThemeList() { - const manifest = await fetchManifest(); - setThemeList( - Object.entries(manifest.themes).filter((x) => - x[1].commit ? x[1].commit === GIT_REVISION : true, - ), - ); - } - - async function getTheme(slug: string) { - const theme = await fetchTheme(slug); - setThemeData((data) => ({ ...data, [slug]: theme })); - } - - useEffect(() => { - fetchThemeList(); - }, []); - - useEffect(() => { - themeList?.forEach(([slug]) => { - getTheme(slug); - }); - }, [themeList]); - - return ( - -
- -
- {/* -
- Oops! Couldn't load the theme shop. Make sure you're - connected to the internet and try again. -
- */} - - The Theme Shop is currently under construction. - - - {/* FIXME INTEGRATE WITH MOBX */} - {/* -
- - -
-
-
theme svg goes here
-
-
Theme Title
-
- {" "} - Author -
-
This is a theme description.
-
-
- - " contrast /> - -
- - -
- - - - - - -
- - -
- - - - - - -
- - -
- - - - - - -
- - -
- - - - */} -
- - {themeList?.map(([slug, theme]) => ( - - -

{theme.name}

- {/* Maybe id's of the users should be included as well / instead? */} -
- {" "} - {theme.creator} -
-
{theme.description}
- - ))} - - - ); -}