refactor: export and use components props

src/components/common/CodeEditor.tsx

@@ -1,7 +1,7 @@
 import { css, Theme } from "@mui/material/styles";
 import { config } from "ace-builds";
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
-import AceEditor from "react-ace";
+import AceEditor, { IAceEditorProps } from "react-ace";
 
 // https://github.com/securingsincity/react-ace/issues/725
 config.set("basePath", "https://cdn.jsdelivr.net/npm/ace-builds@1.4.14/src-min-noconflict/");
@@ -10,7 +10,7 @@ config.setModuleUrl(
   "https://cdn.jsdelivr.net/npm/ace-builds@1.4.14/src-min-noconflict/worker-javascript.js"
 );
 
-type Props = ComponentPropsWithoutRef<typeof AceEditor>;
+export type Props = IAceEditorProps;
 
 const editor = (theme: Theme) => css`
   box-shadow: ${theme.shadows[1]};

src/components/common/Configuration.tsx

@@ -2,7 +2,7 @@ import { Box, Paper, Stack, Typography } from "@mui/material";
 import { css, Theme } from "@mui/material/styles";
 import { memo, ReactNode } from "react";
 
-type Props = {
+export type Props = {
   icon: ReactNode;
   title: string;
   input: ReactNode;

src/components/common/Configurations.tsx

@@ -1,11 +1,11 @@
 import { Stack } from "@mui/material";
 import equal from "fast-deep-equal";
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
 
-import Configuration from "./Configuration";
+import Configuration, { Props as ConfigurationProps } from "./Configuration";
 
-type Props = {
+export type Props = {
-  configurations: ComponentPropsWithoutRef<typeof Configuration>[];
+  configurations: ConfigurationProps[];
 };
 
 const StyledComponent = ({ configurations }: Props) => (

src/components/common/Main.tsx

@@ -1,12 +1,8 @@
-import { Stack, Typography } from "@mui/material";
+import { Stack, StackProps, Typography } from "@mui/material";
 import { css, Theme } from "@mui/material/styles";
-import { ComponentPropsWithoutRef, memo, PropsWithChildren } from "react";
+import { memo, PropsWithChildren } from "react";
 
-type Props = PropsWithChildren<
+export type Props = PropsWithChildren<{ title: string } & StackProps>;
-  {
-    title: string;
-  } & ComponentPropsWithoutRef<typeof Stack>
->;
 
 const mainTitle = (theme: Theme) => css`
   font-size: ${theme.typography.fontSize * 3}px;

src/components/common/MainItem.tsx

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

src/components/common/TextField.tsx

@@ -1,7 +1,7 @@
-import { TextField } from "@mui/material";
+import { TextField, TextFieldProps } from "@mui/material";
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
 
-type Props = ComponentPropsWithoutRef<typeof TextField>;
+export type Props = TextFieldProps;
 
 const StyledComponent = (props: Props) => (
   <TextField

src/components/common/ToolCard.tsx

@@ -11,7 +11,7 @@ import { css, Theme } from "@mui/material/styles";
 import NextLink, { LinkProps } from "next/link";
 import { memo, ReactNode } from "react";
 
-type Props = {
+export type Props = {
   icon: ReactNode;
   title: string;
   description: string;

src/components/common/ToolCardGrid.tsx

@@ -1,11 +1,11 @@
 import { Grid } from "@mui/material";
 import equal from "fast-deep-equal";
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
 
-import ToolCard from "./ToolCard";
+import ToolCard, { Props as ToolCardProps } from "./ToolCard";
 
-type Props = {
+export type Props = {
-  tools: ComponentPropsWithoutRef<typeof ToolCard>[];
+  tools: ToolCardProps[];
 };
 
 const StyledComponent = ({ tools }: Props) => (

src/components/common/index.ts

@@ -1,7 +1,17 @@
-import Configurations from "./Configurations";
+import { Props as CodeEditorProps } from "./CodeEditor";
-import Main from "./Main";
+import Configurations, { Props as ConfigurationsProps } from "./Configurations";
-import MainItem from "./MainItem";
+import Main, { Props as MainProps } from "./Main";
-import TextField from "./TextField";
+import MainItem, { Props as MainItemProps } from "./MainItem";
-import ToolCardGrid from "./ToolCardGrid";
+import TextField, { Props as TextFieldProps } from "./TextField";
+import ToolCardGrid, { Props as ToolCardGridProps } from "./ToolCardGrid";
+
+export type {
+  CodeEditorProps,
+  ConfigurationsProps,
+  MainProps,
+  MainItemProps,
+  TextFieldProps,
+  ToolCardGridProps,
+};
 
 export { Configurations, Main, MainItem, TextField, ToolCardGrid };

src/components/layout/Drawer.tsx

@@ -1,17 +1,17 @@
 import { Home } from "@mui/icons-material";
 import { Box, Divider, Drawer, List, Stack } from "@mui/material";
 import { css } from "@mui/material/styles";
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
 
 import { drawerToolGroups } from "@/data/tools";
 import { pagesPath } from "@/libs/$path";
 
-import DrawerCollapseItem from "./DrawerCollapseItem";
+import DrawerCollapseItem, { Props as DrawerCollapseItemProps } from "./DrawerCollapseItem";
 import DrawerItem from "./DrawerItem";
 import SearchBar from "./SearchBar";
 
 type Props = {
-  toolGroups: ComponentPropsWithoutRef<typeof DrawerCollapseItem>[];
+  toolGroups: DrawerCollapseItemProps[];
 };
 
 export const drawerWidth = 300;

src/components/layout/DrawerCollapseItem.tsx

@@ -1,22 +1,22 @@
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { Collapse, List, ListItemButton, ListItemText } from "@mui/material";
 import equal from "fast-deep-equal";
-import { ComponentPropsWithoutRef, memo, MouseEventHandler, useCallback, useState } from "react";
+import { memo, MouseEventHandler, useCallback, useState } from "react";
 
-import DrawerItem from "./DrawerItem";
+import DrawerItem, { Props as DrawerItemProps } from "./DrawerItem";
-import DrawerItemIcon from "./DrawerItemIcon";
+import DrawerItemIcon, { Props as DrawerItemIconProps } from "./DrawerItemIcon";
 
-type ContainerProps = {
+export type Props = {
   title: string;
-  tools: ComponentPropsWithoutRef<typeof DrawerItem>[];
+  tools: DrawerItemProps[];
-} & ComponentPropsWithoutRef<typeof DrawerItemIcon>;
+} & DrawerItemIconProps;
 
-type Props = {
+type ComponentProps = {
   open: boolean;
   onClick: MouseEventHandler<HTMLDivElement>;
-} & ContainerProps;
+} & Props;
 
-const StyledComponent = ({ icon, title, tools, open, onClick }: Props) => (
+const StyledComponent = ({ icon, title, tools, open, onClick }: ComponentProps) => (
   <>
     <ListItemButton {...{ onClick }}>
       <DrawerItemIcon {...{ icon }} />
@@ -42,7 +42,7 @@ const StyledComponent = ({ icon, title, tools, open, onClick }: Props) => (
 
 export const Component = memo(StyledComponent, equal);
 
-const Container = ({ icon, title, tools }: ContainerProps) => {
+const Container = ({ icon, title, tools }: Props) => {
   const [open, setOpen] = useState(false);
 
   const onClick = useCallback(() => {

src/components/layout/DrawerItem.tsx

@@ -1,16 +1,16 @@
 import { Box, ListItemButton, ListItemText, Tooltip } from "@mui/material";
 import { css } from "@mui/material/styles";
 import NextLink, { LinkProps } from "next/link";
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
 
-import DrawerItemIcon from "./DrawerItemIcon";
+import DrawerItemIcon, { Props as DrawerItemIconProps } from "./DrawerItemIcon";
 
-type Props = {
+export type Props = {
   title: string;
   disabled?: boolean;
   subItem?: true;
 } & Pick<LinkProps, "href"> &
-  ComponentPropsWithoutRef<typeof DrawerItemIcon>;
+  DrawerItemIconProps;
 
 const indent = css`
   text-indent: 40px;

src/components/layout/DrawerItemIcon.tsx

@@ -2,7 +2,7 @@ import { ListItemIcon } from "@mui/material";
 import { css } from "@mui/material/styles";
 import { memo, ReactNode } from "react";
 
-type Props = {
+export type Props = {
   icon: ReactNode;
 };
 

src/components/pages/converters/json-yaml/Configuration.tsx

@@ -12,7 +12,7 @@ export const isSpaces = (x: number): x is Spaces => spacesArray.includes(x as Sp
 
 type OnSelectChange<T> = NonNullable<SelectInputProps<T>["onChange"]>;
 
-type Props = {
+export type Props = {
   spaces: Spaces;
   onSpacesChange: OnSelectChange<Spaces>;
 };

src/components/pages/converters/json-yaml/Content.tsx

@@ -1,11 +1,12 @@
 import { Skeleton, Stack } from "@mui/material";
 import dynamic from "next/dynamic";
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 import YAML from "yaml";
 
 import { Main, MainItem } from "@/components/common";
+import { Props as CodeEditorProps } from "@/components/common/CodeEditor";
 
-import Configuration, { isSpaces, Spaces } from "./Configuration";
+import Configuration, { Props as ConfigurationProps, isSpaces, Spaces } from "./Configuration";
 
 // https://github.com/securingsincity/react-ace/issues/27
 const CodeEditor = dynamic(
@@ -20,15 +21,15 @@ const CodeEditor = dynamic(
   { ssr: false, loading: () => <Skeleton variant="rectangular" height="100%" /> }
 );
 
-type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["value"]>;
+type CodeValue = NonNullable<CodeEditorProps["value"]>;
-type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["onChange"]>;
+type OnCodeChange = NonNullable<CodeEditorProps["onChange"]>;
 
 type Props = {
   json: CodeValue;
   yaml: CodeValue;
   onJsonChange: OnCodeChange;
   onYamlChange: OnCodeChange;
-} & ComponentPropsWithoutRef<typeof Configuration>;
+} & ConfigurationProps;
 
 const StyledComponent = ({
   json,

src/components/pages/converters/number-base/Configuration.tsx

@@ -8,7 +8,7 @@ import { Configurations } from "@/components/common";
 type SwitchChecked = NonNullable<SwitchBaseProps["checked"]>;
 type OnSwitchChange = NonNullable<SwitchBaseProps["onChange"]>;
 
-type Props = {
+export type Props = {
   format: SwitchChecked;
   onFormatChange: OnSwitchChange;
 };

src/components/pages/converters/number-base/Content.tsx

@@ -1,7 +1,7 @@
 import { Stack } from "@mui/material";
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem, TextField } from "@/components/common";
+import { Main, MainItem, TextField, TextFieldProps } from "@/components/common";
 import {
   formatBinary,
   formatDecimal,
@@ -17,10 +17,10 @@ import {
   unformatOctal,
 } from "@/libs/string";
 
-import Configuration from "./Configuration";
+import Configuration, { Props as ConfigurationProps } from "./Configuration";
 
-type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type TextFieldValue = TextFieldProps["value"];
-type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+type OnTextFieldChange = NonNullable<TextFieldProps["onChange"]>;
 
 type Props = {
   dec: TextFieldValue;
@@ -31,7 +31,7 @@ type Props = {
   onHexChange: OnTextFieldChange;
   onOctChange: OnTextFieldChange;
   onBinChange: OnTextFieldChange;
-} & ComponentPropsWithoutRef<typeof Configuration>;
+} & ConfigurationProps;
 
 const StyledComponent = ({
   format,

src/components/pages/encoders-decoders/base64/Content.tsx

@@ -1,10 +1,10 @@
 import { encode, decode, isValid } from "js-base64";
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem, TextField } from "@/components/common";
+import { Main, MainItem, TextField, TextFieldProps } from "@/components/common";
 
-type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type TextFieldValue = TextFieldProps["value"];
-type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+type OnTextFieldChange = NonNullable<TextFieldProps["onChange"]>;
 
 type Props = {
   decoded: TextFieldValue;

src/components/pages/encoders-decoders/html/Content.tsx

@@ -1,10 +1,10 @@
 import { decode, encode } from "html-entities";
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem, TextField } from "@/components/common";
+import { Main, MainItem, TextField, TextFieldProps } from "@/components/common";
 
-type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type TextFieldValue = TextFieldProps["value"];
-type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+type OnTextFieldChange = NonNullable<TextFieldProps["onChange"]>;
 
 type Props = {
   decoded: TextFieldValue;

src/components/pages/encoders-decoders/jwt/Content.tsx

@@ -1,8 +1,8 @@
 import { Skeleton } from "@mui/material";
 import dynamic from "next/dynamic";
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem, TextField } from "@/components/common";
+import { CodeEditorProps, Main, MainItem, TextField, TextFieldProps } from "@/components/common";
 import { decode } from "@/libs/jwt";
 
 // https://github.com/securingsincity/react-ace/issues/27
@@ -15,9 +15,9 @@ const CodeEditor = dynamic(
   { ssr: false, loading: () => <Skeleton variant="rectangular" width="100%" height="160px" /> }
 );
 
-type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type TextFieldValue = TextFieldProps["value"];
-type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["value"]>;
+type CodeValue = NonNullable<CodeEditorProps["value"]>;
-type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+type OnTextFieldChange = NonNullable<TextFieldProps["onChange"]>;
 
 type Props = {
   jwt: TextFieldValue;

src/components/pages/encoders-decoders/url/Content.tsx

@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem, TextField } from "@/components/common";
+import { Main, MainItem, TextField, TextFieldProps } from "@/components/common";
 
-type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type TextFieldValue = TextFieldProps["value"];
-type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+type OnTextFieldChange = NonNullable<TextFieldProps["onChange"]>;
 
 type Props = {
   decoded: TextFieldValue;

src/components/pages/formatters/json/Configuration.tsx

@@ -12,7 +12,7 @@ export const isSpaces = (x: number): x is Spaces => spacesArray.includes(x as Sp
 
 type OnSelectChange<T> = NonNullable<SelectInputProps<T>["onChange"]>;
 
-type Props = {
+export type Props = {
   spaces: Spaces;
   onSpacesChange: OnSelectChange<Spaces>;
 };

src/components/pages/formatters/json/Content.tsx

@@ -1,10 +1,10 @@
 import { Skeleton, Stack } from "@mui/material";
 import dynamic from "next/dynamic";
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem } from "@/components/common";
+import { CodeEditorProps, Main, MainItem } from "@/components/common";
 
-import Configuration, { isSpaces, Spaces } from "./Configuration";
+import Configuration, { Props as ConfigurationProps, isSpaces, Spaces } from "./Configuration";
 
 // https://github.com/securingsincity/react-ace/issues/27
 const CodeEditor = dynamic(
@@ -16,14 +16,14 @@ const CodeEditor = dynamic(
   { ssr: false, loading: () => <Skeleton variant="rectangular" height="100%" /> }
 );
 
-type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["value"]>;
+type CodeValue = NonNullable<CodeEditorProps["value"]>;
-type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["onChange"]>;
+type OnCodeChange = NonNullable<CodeEditorProps["onChange"]>;
 
 type Props = {
   json: CodeValue;
   formatted: CodeValue;
   onJsonChange: OnCodeChange;
-} & ComponentPropsWithoutRef<typeof Configuration>;
+} & ConfigurationProps;
 
 const StyledComponent = ({ json, formatted, spaces, onJsonChange, onSpacesChange }: Props) => (
   <Main title="Json Formatter">

src/components/pages/generators/hash/Configuration.tsx

@@ -8,7 +8,7 @@ import { Configurations } from "@/components/common";
 type SwitchChecked = NonNullable<SwitchBaseProps["checked"]>;
 type OnSwitchChange = NonNullable<SwitchBaseProps["onChange"]>;
 
-type Props = {
+export type Props = {
   uppercase: SwitchChecked;
   onCaseChange: OnSwitchChange;
 };

src/components/pages/generators/hash/Content.tsx

@@ -1,13 +1,13 @@
 import { Stack } from "@mui/material";
 import createHash from "create-hash"; // smaller bundle size than Node.js standard library
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem, TextField } from "@/components/common";
+import { Main, MainItem, TextField, TextFieldProps } from "@/components/common";
 
-import Configuration from "./Configuration";
+import Configuration, { Props as ConfigurationProps } from "./Configuration";
 
-type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type TextFieldValue = TextFieldProps["value"];
-type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+type OnTextFieldChange = NonNullable<TextFieldProps["onChange"]>;
 
 type Props = {
   input: TextFieldValue;
@@ -16,7 +16,7 @@ type Props = {
   sha256: TextFieldValue;
   sha512: TextFieldValue;
   onInputChange: OnTextFieldChange;
-} & ComponentPropsWithoutRef<typeof Configuration>;
+} & ConfigurationProps;
 
 const StyledComponent = ({
   uppercase,

src/components/pages/generators/uuid/Configuration.tsx

@@ -16,7 +16,7 @@ type SwitchChecked = NonNullable<SwitchBaseProps["checked"]>;
 type OnSwitchChange = NonNullable<SwitchBaseProps["onChange"]>;
 type OnSelectChange<T> = NonNullable<SelectInputProps<T>["onChange"]>;
 
-type Props = {
+export type Props = {
   hyphens: SwitchChecked;
   uppercase: SwitchChecked;
   uuidVersion: UuidVersion;

src/components/pages/generators/uuid/Content.tsx

@@ -1,22 +1,26 @@
-import { Button, Stack, Typography } from "@mui/material";
+import { Button, ButtonProps, Stack, Typography } from "@mui/material";
 import { range } from "fp-ts/NonEmptyArray";
-import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 
-import { Main, MainItem, TextField } from "@/components/common";
+import { Main, MainItem, TextField, TextFieldProps } from "@/components/common";
 import { uuid } from "@/libs/uuid";
 
-import Configuration, { isUuidVersion, UuidVersion } from "./Configuration";
+import Configuration, {
+  Props as ConfigurationProps,
+  isUuidVersion,
+  UuidVersion,
+} from "./Configuration";
 
-type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type TextFieldValue = TextFieldProps["value"];
-type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+type OnTextFieldChange = NonNullable<TextFieldProps["onChange"]>;
-type OnButtonClick = NonNullable<ComponentPropsWithoutRef<typeof Button>["onChange"]>;
+type OnButtonClick = NonNullable<ButtonProps["onChange"]>;
 
 type Props = {
   generates: TextFieldValue;
   uuids: TextFieldValue;
   onGeneratesChange: OnTextFieldChange;
   onGenerateClick: OnButtonClick;
-} & ComponentPropsWithoutRef<typeof Configuration>;
+} & ConfigurationProps;
 
 const StyledComponent = ({
   hyphens,

src/components/pages/home/Content.tsx

@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
 
-import { Main, ToolCardGrid } from "@/components/common";
+import { Main, ToolCardGrid, ToolCardGridProps } from "@/components/common";
 import { homeTools } from "@/data/tools";
 
-type Props = ComponentPropsWithoutRef<typeof ToolCardGrid>;
+type Props = ToolCardGridProps;
 
 const StyledComponent = ({ tools }: Props) => (
   <Main title="All tools" height="fit-content">

src/components/pages/search/Content.tsx

@@ -1,13 +1,13 @@
 import equal from "fast-deep-equal";
 import Fuse from "fuse.js";
-import { ComponentPropsWithoutRef, memo } from "react";
+import { memo } from "react";
 import { selector, useRecoilValue } from "recoil";
 
-import { Main, ToolCardGrid } from "@/components/common";
+import { Main, ToolCardGrid, ToolCardGridProps } from "@/components/common";
 import { searchTextState } from "@/components/layout/states";
 import { homeTools } from "@/data/tools";
 
-type Props = ComponentPropsWithoutRef<typeof ToolCardGrid>;
+type Props = ToolCardGridProps;
 
 const StyledComponent = ({ tools }: Props) => (
   <Main title="Searched tools">