cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-09 16:53:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(@ui): migrate input box

Browse source
This commit is contained in:
Paul Makles 2022-05-30 12:26:16 +01:00
parent 2f9bfbf83f
commit 1d243d4762
13 changed files with 66 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/common/messaging/MessageBox.tsx
View file

@ -95,7 +95,7 @@ const Blocked = styled.div`
`;
const Action = styled.div`
> div {
> a {
height: 48px;
width: 48px;
display: flex;
@ -118,7 +118,7 @@ const Action = styled.div`
`;
const FileAction = styled.div`
> div {
> a {
height: 48px;
width: 62px;
display: flex;

4
src/components/navigation/right/Search.tsx
View file

@ -5,15 +5,13 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, InputBox } from "@revoltchat/ui";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Message from "../../common/messaging/Message";
import InputBox from "../../ui/InputBox";
import Overline from "../../ui/Overline";
import Preloader from "../../ui/Preloader";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
type SearchState =

4
src/components/settings/appearance/ThemeOverrides.tsx
View file

@ -2,14 +2,14 @@ import { Pencil } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import styled from "styled-components/macro";
import { InputBox } from "@revoltchat/ui";
import { useDebounceCallback } from "../../../lib/debounce";
import { useApplicationState } from "../../../mobx/State";
import { Variables } from "../../../context/Theme";
import InputBox from "../../ui/InputBox";
const Container = styled.div`
row-gap: 8px;
display: grid;

41
src/components/ui/InputBox.tsx
View file

@ -1,41 +0,0 @@
import styled, { css } from "styled-components/macro";
interface Props {
readonly contrast?: boolean;
}
export default styled.input<Props>`
z-index: 1;
font-size: 1rem;
padding: 8px 16px;
border-radius: var(--border-radius);
font-family: inherit;
color: var(--foreground);
background: var(--primary-background);
transition: 0.2s ease background-color;
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
&:hover {
background: var(--secondary-background);
}
&:focus {
box-shadow: 0 0 0 1.5pt var(--accent);
}
${(props) =>
props.contrast &&
css`
color: var(--secondary-foreground);
background: var(--secondary-background);
&:hover {
background: var(--hover);
}
`}
`;

5
src/context/intermediate/modals/Input.tsx
View file

@ -1,14 +1,13 @@
import { useHistory } from "react-router";
import { Server } from "revolt.js";
import { ulid } from "ulid";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import InputBox from "../../../components/ui/InputBox";
import { InputBox } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { Children } from "../../../types/Preact";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";

4
src/context/intermediate/modals/Prompt.tsx
View file

@ -7,15 +7,15 @@ import styles from "./Prompt.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { InputBox } from "@revoltchat/ui";
import { TextReact } from "../../../lib/i18n";
import Message from "../../../components/common/messaging/Message";
import UserIcon from "../../../components/common/user/UserIcon";
import InputBox from "../../../components/ui/InputBox";
import Modal, { Action } from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import Radio from "../../../components/ui/Radio";
import { Children } from "../../../types/Preact";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";

4
src/context/intermediate/popovers/ServerIdentityModal.tsx
View file

@ -5,14 +5,12 @@ import styles from "./ServerIdentityModal.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, InputBox } from "@revoltchat/ui";
import { noop } from "../../../lib/js";
import InputBox from "../../../components/ui/InputBox";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { FileUploader } from "../../revoltjs/FileUploads";
import { useClient } from "../../revoltjs/RevoltClient";

72
src/pages/login/FormField.tsx
View file

@ -2,10 +2,16 @@ import { UseFormMethods } from "react-hook-form";
import { Text, Localizer } from "preact-i18n";
import InputBox from "../../components/ui/InputBox";
import { InputBox } from "@revoltchat/ui";
import Overline from "../../components/ui/Overline";
type FieldType = "email" | "username" | "password" | "invite" | "current_password";
type FieldType =
| "email"
| "username"
| "password"
| "invite"
| "current_password";
type Props = Omit<JSX.HTMLAttributes<HTMLInputElement>, "children" | "as"> & {
type: FieldType;
@ -13,7 +19,7 @@ type Props = Omit<JSX.HTMLAttributes<HTMLInputElement>, "children" | "as"> & {
register: UseFormMethods["register"];
error?: string;
name?: string;
}
};
export default function FormField({
type,
@ -44,43 +50,43 @@ export default function FormField({
type === "invite" || type === "username"
? "text"
: type === "current_password"
? "password"
: type
? "password"
: type
}
// See https://github.com/mozilla/contain-facebook/issues/783
className="fbc-has-badge"
ref={register(
type === "password" || type === "current_password"
? {
validate: (value: string) =>
value.length === 0
? "RequiredField"
: value.length < 8
? "TooShort"
: value.length > 1024
? "TooLong"
: undefined,
}
validate: (value: string) =>
value.length === 0
? "RequiredField"
: value.length < 8
? "TooShort"
: value.length > 1024
? "TooLong"
: undefined,
}
: type === "email"
? {
required: "RequiredField",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "InvalidEmail",
},
}
: type === "username"
? {
validate: (value: string) =>
value.length === 0
? "RequiredField"
: value.length < 2
? "TooShort"
: value.length > 32
? "TooLong"
: undefined,
}
: { required: "RequiredField" },
? {
required: "RequiredField",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "InvalidEmail",
},
}
: type === "username"
? {
validate: (value: string) =>
value.length === 0
? "RequiredField"
: value.length < 2
? "TooShort"
: value.length > 32
? "TooLong"
: undefined,
}
: { required: "RequiredField" },
)}
{...props}
/>

6
src/pages/settings/channel/Overview.tsx
View file

@ -5,14 +5,12 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Button, Checkbox } from "@revoltchat/ui";
import { Button, Checkbox, InputBox } from "@revoltchat/ui";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import InputBox from "../../../components/ui/InputBox";
interface Props {
channel: Channel;
}
@ -85,7 +83,7 @@ export default observer(({ channel }: Props) => {
)}
</h3>
<InputBox
contrast
palette="secondary"
value={name}
maxLength={32}
onChange={(e) => {

4
src/pages/settings/panes/MyBots.tsx
View file

@ -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 } from "@revoltchat/ui";
import { Button, Checkbox, InputBox } 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 InputBox from "../../../components/ui/InputBox";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
@ -450,6 +449,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
<Text id="app.settings.pages.bots.reserved" />
</h5>
<InputBox
palette="secondary"
ref={setInteractionsRef}
value={data.interactions_url}
disabled={saving}

11
src/pages/settings/server/Members.tsx
View file

@ -9,11 +9,16 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useMemo, useState } from "preact/hooks";
import { Button, Checkbox, IconButton, Preloader } from "@revoltchat/ui";
import {
Button,
Checkbox,
IconButton,
InputBox,
Preloader,
} from "@revoltchat/ui";
import UserIcon from "../../../components/common/user/UserIcon";
import { Username } from "../../../components/common/user/UserShort";
import InputBox from "../../../components/ui/InputBox";
import Overline from "../../../components/ui/Overline";
interface InnerProps {
@ -122,7 +127,7 @@ export const Members = ({ server }: Props) => {
placeholder="Search for a specific user..."
value={query}
onChange={(e) => setQuery(e.currentTarget.value)}
contrast
palette="secondary"
/>
<div className={styles.subtitle}>{data?.length ?? 0} Members</div>
{members ? (

6
src/pages/settings/server/Overview.tsx
View file

@ -7,7 +7,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, InputBox } from "@revoltchat/ui";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { noop } from "../../../lib/js";
@ -15,8 +15,6 @@ import { noop } from "../../../lib/js";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { getChannelName } from "../../../context/revoltjs/util";
import InputBox from "../../../components/ui/InputBox";
interface Props {
server: Server;
}
@ -70,9 +68,9 @@ export const Overview = observer(({ server }: Props) => {
<Text id="app.main.servers.name" />
</h3>
<InputBox
contrast
value={name}
maxLength={32}
palette="secondary"
onChange={(e) => {
setName(e.currentTarget.value);
if (!changed) setChanged(true);

6
src/pages/settings/server/Roles.tsx
View file

@ -12,13 +12,13 @@ import {
H1,
Checkbox,
ColourSwatches,
InputBox,
} from "@revoltchat/ui";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { PermissionList } from "../../../components/settings/roles/PermissionList";
import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
import InputBox from "../../../components/ui/InputBox";
import Overline from "../../../components/ui/Overline";
interface Props {
@ -148,7 +148,7 @@ export const Roles = observer(({ server }: Props) => {
name: e.currentTarget.value,
})
}
contrast
palette="secondary"
/>
</p>
</section>
@ -205,7 +205,7 @@ export const Roles = observer(({ server }: Props) => {
),
})
}
contrast
palette="secondary"
/>
</p>
</section>