ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-16 20:49:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: clean code editor components and styles

Browse Source
This commit is contained in:
rusconn
2022-04-04 10:45:42 +09:00
parent d410830b7e
commit dfb6461eef
12 changed files with 75 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/common/CodeEditor.tsx
View File

@@ -1,4 +1,4 @@
import { Paper } from "@mui/material";
import { css, Theme } from "@mui/material/styles";
import { config } from "ace-builds";
import { ComponentPropsWithoutRef, memo } from "react";
import AceEditor from "react-ace";
@@ -12,19 +12,24 @@ config.setModuleUrl(
type Props = ComponentPropsWithoutRef<typeof AceEditor>;
const editor = (theme: Theme) => css`
box-shadow: ${theme.shadows[1]};
`;
const StyledComponent = (props: Props) => (
<Paper>
<AceEditor
wrapEnabled
theme="textmate"
showPrintMargin={false}
highlightActiveLine={false}
editorProps={{ $blockScrolling: true }}
setOptions={{ mergeUndoDeltas: false }}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
</Paper>
<AceEditor
wrapEnabled
width="auto"
height="100%"
theme="textmate"
showPrintMargin={false}
highlightActiveLine={false}
editorProps={{ $blockScrolling: true }}
setOptions={{ mergeUndoDeltas: false }}
css={editor}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
export const Component = memo(StyledComponent);

26
src/components/common/CodeEditorHalf.tsx
View File

@@ -1,26 +0,0 @@
import { useTheme } from "@mui/material/styles";
import { ComponentPropsWithoutRef, memo } from "react";
import { drawerWidth } from "@/components/layout/Drawer";
import { headerHeight } from "@/components/layout/Header";
import CodeEditor from "./CodeEditor";
type Props = Omit<ComponentPropsWithoutRef<typeof CodeEditor>, "width">;
const StyledComponent = (props: Props) => {
const theme = useTheme();
return (
<CodeEditor
height={`calc(100vh - ${headerHeight}px - ${theme.spacing(6 * 2)} - 192px`}
width={`calc(calc(100vw - ${drawerWidth}px - ${theme.spacing(6 * 2)} - 18px) / 2)`}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
};
export const Component = memo(StyledComponent);
export default Component;

26
src/components/common/CodeEditorHalfLoading.tsx
View File

@@ -1,26 +0,0 @@
import { Skeleton } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { ComponentPropsWithoutRef, memo } from "react";
import { drawerWidth } from "@/components/layout/Drawer";
import { headerHeight } from "@/components/layout/Header";
type Props = Omit<ComponentPropsWithoutRef<typeof Skeleton>, "width">;
const StyledComponent = (props: Props) => {
const theme = useTheme();
return (
<Skeleton
variant="rectangular"
height={`calc(100vh - ${headerHeight}px - ${theme.spacing(6 * 2)} - 192px`}
width={`calc(calc(100vw - ${drawerWidth}px - ${theme.spacing(6 * 2)} - 18px) / 2)`}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
};
export const Component = memo(StyledComponent);
export default Component;

24
src/components/common/Main.tsx
View File

@@ -1,24 +1,28 @@
import { Box, Stack, Typography } from "@mui/material";
import { Stack, Typography } from "@mui/material";
import { css, Theme } from "@mui/material/styles";
import { memo, PropsWithChildren } from "react";
import { ComponentPropsWithoutRef, memo, PropsWithChildren } from "react";
type Props = PropsWithChildren<{
title: string;
}>;
type Props = PropsWithChildren<
{
title: string;
} & ComponentPropsWithoutRef<typeof Stack>
>;
const mainTitle = (theme: Theme) => css`
font-size: ${theme.typography.fontSize * 3}px;
font-weight: 400;
margin-bottom: ${theme.spacing(2)};
`;
const StyledComponent = ({ children, title }: Props) => (
<Box component="main" padding={6}>
const StyledComponent = ({ children, title, ...stackProps }: Props) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<Stack component="main" height="100%" padding={6} spacing={2} {...stackProps}>
<Typography variant="h1" css={mainTitle}>
{title}
</Typography>
<Stack spacing={2}>{children}</Stack>
</Box>
<Stack spacing={2} flexGrow={1}>
{children}
</Stack>
</Stack>
);
export const Component = memo(StyledComponent);

21
src/components/common/MainItem.tsx
View File

@@ -1,17 +1,20 @@
import { Box, Typography } from "@mui/material";
import { memo, PropsWithChildren } from "react";
import { Box, Stack, Typography } from "@mui/material";
import { ComponentPropsWithoutRef, memo, PropsWithChildren } from "react";
type Props = PropsWithChildren<{
title: string;
}>;
type Props = PropsWithChildren<
{
title: string;
} & ComponentPropsWithoutRef<typeof Stack>
>;
const StyledComponent = ({ children, title }: Props) => (
<Box>
const StyledComponent = ({ children, title, ...stackProps }: Props) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<Stack {...stackProps}>
<Typography variant="h6" component="h2">
{title}
</Typography>
{children}
</Box>
<Box flexGrow={1}>{children}</Box>
</Stack>
);
export const Component = memo(StyledComponent);

3
src/components/common/index.ts
View File

@@ -1,8 +1,7 @@
import CodeEditorHalfLoading from "./CodeEditorHalfLoading";
import Configurations from "./Configurations";
import Main from "./Main";
import MainItem from "./MainItem";
import TextField from "./TextField";
import ToolCardGrid from "./ToolCardGrid";
export { CodeEditorHalfLoading, Configurations, Main, MainItem, TextField, ToolCardGrid };
export { Configurations, Main, MainItem, TextField, ToolCardGrid };

36
src/components/pages/converters/json-yaml/Content.tsx
View File

@@ -1,27 +1,27 @@
import { Stack } from "@mui/material";
import { Skeleton, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
import YAML from "yaml";
import { CodeEditorHalfLoading, Main, MainItem } from "@/components/common";
import { Main, MainItem } from "@/components/common";
import Configuration, { isSpaces, Spaces } from "./Configuration";
// https://github.com/securingsincity/react-ace/issues/27
const CodeEditorHalf = dynamic(
const CodeEditor = dynamic(
async () => {
const ace = await import("@/components/common/CodeEditorHalf");
const ace = await import("@/components/common/CodeEditor");
await Promise.all([
import("ace-builds/src-noconflict/mode-json"),
import("ace-builds/src-noconflict/mode-yaml"),
]);
return ace;
},
{ ssr: false, loading: () => <CodeEditorHalfLoading /> }
{ ssr: false, loading: () => <Skeleton variant="rectangular" height="100%" /> }
);
type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["value"]>;
type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["onChange"]>;
type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["value"]>;
type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["onChange"]>;
type Props = {
json: CodeValue;
@@ -42,24 +42,12 @@ const StyledComponent = ({
<MainItem title="Configuration">
<Configuration {...{ spaces, onSpacesChange }} />
</MainItem>
<Stack direction="row" spacing={2}>
<MainItem title="Json">
<CodeEditorHalf
name="json"
mode="json"
value={json}
tabSize={spaces}
onChange={onJsonChange}
/>
<Stack direction="row" spacing={2} height="100%">
<MainItem title="Json" height="100%" flexGrow={1}>
<CodeEditor name="json" mode="json" value={json} tabSize={spaces} onChange={onJsonChange} />
</MainItem>
<MainItem title="Yaml">
<CodeEditorHalf
name="yaml"
mode="yaml"
value={yaml}
tabSize={spaces}
onChange={onYamlChange}
/>
<MainItem title="Yaml" height="100%" flexGrow={1}>
<CodeEditor name="yaml" mode="yaml" value={yaml} tabSize={spaces} onChange={onYamlChange} />
</MainItem>
</Stack>
</Main>

19
src/components/pages/encoders-decoders/jwt/CodeEditor.tsx
View File

@@ -1,19 +0,0 @@
import { ComponentPropsWithoutRef, memo } from "react";
import CodeEditor from "@/components/common/CodeEditor";
type Props = Omit<ComponentPropsWithoutRef<typeof CodeEditor>, "height" | "width">;
const StyledComponent = (props: Props) => (
<CodeEditor
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
readOnly
height="160px"
width="100%"
/>
);
export const Component = memo(StyledComponent);
export default Component;

8
src/components/pages/encoders-decoders/jwt/CodeEditorLoading.tsx
View File

@@ -1,8 +0,0 @@
import { Skeleton } from "@mui/material";
import { memo } from "react";
const StyledComponent = () => <Skeleton variant="rectangular" width="100%" height="160px" />;
export const Component = memo(StyledComponent);
export default Component;

11
src/components/pages/encoders-decoders/jwt/Content.tsx
View File

@@ -1,19 +1,18 @@
import { Skeleton } from "@mui/material";
import dynamic from "next/dynamic";
import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
import { Main, MainItem, TextField } from "@/components/common";
import { decode } from "@/libs/jwt";
import CodeEditorLoading from "./CodeEditorLoading";
// https://github.com/securingsincity/react-ace/issues/27
const CodeEditor = dynamic(
async () => {
const ace = await import("./CodeEditor");
const ace = await import("@/components/common/CodeEditor");
await import("ace-builds/src-noconflict/mode-json");
return ace;
},
{ ssr: false, loading: CodeEditorLoading }
{ ssr: false, loading: () => <Skeleton variant="rectangular" width="100%" height="160px" /> }
);
type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
@@ -33,10 +32,10 @@ const StyledComponent = ({ jwt, header, payload, onJwtChange }: Props) => (
<TextField multiline rows={5} value={jwt} onChange={onJwtChange} />
</MainItem>
<MainItem title="Header">
<CodeEditor name="header" mode="json" value={header} />
<CodeEditor readOnly height="160px" width="100%" name="header" mode="json" value={header} />
</MainItem>
<MainItem title="Payload">
<CodeEditor name="payload" mode="json" value={payload} />
<CodeEditor readOnly height="160px" width="100%" name="payload" mode="json" value={payload} />
</MainItem>
</Main>
);

24
src/components/pages/formatters/json/Content.tsx
View File

@@ -1,23 +1,23 @@
import { Stack } from "@mui/material";
import { Skeleton, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
import { CodeEditorHalfLoading, Main, MainItem } from "@/components/common";
import { Main, MainItem } from "@/components/common";
import Configuration, { isSpaces, Spaces } from "./Configuration";
// https://github.com/securingsincity/react-ace/issues/27
const CodeEditorHalf = dynamic(
const CodeEditor = dynamic(
async () => {
const ace = await import("@/components/common/CodeEditorHalf");
const ace = await import("@/components/common/CodeEditor");
await import("ace-builds/src-noconflict/mode-json");
return ace;
},
{ ssr: false, loading: () => <CodeEditorHalfLoading /> }
{ ssr: false, loading: () => <Skeleton variant="rectangular" height="100%" /> }
);
type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["value"]>;
type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["onChange"]>;
type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["value"]>;
type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["onChange"]>;
type Props = {
json: CodeValue;
@@ -30,12 +30,12 @@ const StyledComponent = ({ json, formatted, spaces, onJsonChange, onSpacesChange
<MainItem title="Configuration">
<Configuration {...{ spaces, onSpacesChange }} />
</MainItem>
<Stack direction="row" spacing={2}>
<MainItem title="Input">
<CodeEditorHalf name="json" mode="json" value={json} tabSize={2} onChange={onJsonChange} />
<Stack direction="row" spacing={2} height="100%">
<MainItem title="Input" height="100%" flexGrow={1}>
<CodeEditor name="json" mode="json" value={json} tabSize={2} onChange={onJsonChange} />
</MainItem>
<MainItem title="Output">
<CodeEditorHalf name="formatted" mode="json" value={formatted} tabSize={spaces} readOnly />
<MainItem title="Output" height="100%" flexGrow={1}>
<CodeEditor name="formatted" mode="json" value={formatted} tabSize={spaces} readOnly />
</MainItem>
</Stack>
</Main>

2
src/components/pages/home/Content.tsx
View File

@@ -6,7 +6,7 @@ import { homeTools } from "@/data/tools";
type Props = ComponentPropsWithoutRef<typeof ToolCardGrid>;
const StyledComponent = ({ tools }: Props) => (
<Main title="All tools">
<Main title="All tools" height="fit-content">
<ToolCardGrid {...{ tools }} />
</Main>
);