refactor: ♻️ del children type (#3283)

* refactor: 🔧 del unnecessary children type

Change-Id: I3dea5e07f5401bdbdd168eb959fe361c57784167

* feat: 💄 eslint

Change-Id: Ie173adeca9e3112d8cdfc1f85964332105dcb424

* feat: 🔧 add css type

Change-Id: I8850c4d09b152f4d9c4d98e6eebca58bd9eecd37

* fix: 💄 ci lint

Change-Id: I69ff89c7a30e2bdcd26475ec83f3f5ec143121b6

app/components/Analytics.ts

@@ -2,11 +2,7 @@
 import * as React from "react";
 import env from "~/env";
 
-type Props = {
-  children?: React.ReactNode;
-};
-
-export default class Analytics extends React.Component<Props> {
+export default class Analytics extends React.Component {
   componentDidMount() {
     if (!env.GOOGLE_ANALYTICS_ID) {
       return;

app/components/AuthenticatedLayout.tsx

@@ -34,10 +34,7 @@ const CommandBar = React.lazy(
     )
 );
 
-type Props = WithTranslation &
-  RootStore & {
-    children?: React.ReactNode;
-  };
+type Props = WithTranslation & RootStore;
 
 @observer
 class AuthenticatedLayout extends React.Component<Props> {

app/components/Breadcrumb.tsx

@@ -9,11 +9,15 @@ import { MenuInternalLink } from "~/types";
 type Props = {
   items: MenuInternalLink[];
   max?: number;
-  children?: React.ReactNode;
   highlightFirstItem?: boolean;
 };
 
-function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
+function Breadcrumb({
+  items,
+  highlightFirstItem,
+  children,
+  max = 2,
+}: React.PropsWithChildren<Props>) {
   const totalItems = items.length;
   const topLevelItems: MenuInternalLink[] = [...items];
   let overflowItems;

app/components/ButtonLink.tsx

@@ -3,10 +3,9 @@ import styled from "styled-components";
 
 type Props = {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
 };
 
-const ButtonLink = React.forwardRef(
+const ButtonLink: React.FC<Props> = React.forwardRef(
   (props: Props, ref: React.Ref<HTMLButtonElement>) => {
     return <Button {...props} ref={ref} />;
   }

app/components/CenteredContent.tsx

@@ -3,7 +3,6 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 
 type Props = {
-  children?: React.ReactNode;
   withStickyHeader?: boolean;
 };
 
@@ -27,7 +26,7 @@ const Content = styled.div`
   `};
 `;
 
-const CenteredContent = ({ children, ...rest }: Props) => {
+const CenteredContent: React.FC<Props> = ({ children, ...rest }) => {
   return (
     <Container {...rest}>
       <Content>{children}</Content>

app/components/DocumentBreadcrumb.tsx

@@ -12,7 +12,6 @@ import { collectionUrl } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
-  children?: React.ReactNode;
   onlyText?: boolean;
 };
 
@@ -49,7 +48,11 @@ function useCategory(document: Document): MenuInternalLink | null {
   return null;
 }
 
-const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}) => {
   const { collections } = useStores();
   const { t } = useTranslation();
   const category = useCategory(document);

app/components/ErrorBoundary.tsx

@@ -12,7 +12,6 @@ import Text from "~/components/Text";
 import env from "~/env";
 
 type Props = WithTranslation & {
-  children: React.ReactNode;
   reloadOnChunkMissing?: boolean;
 };
 

app/components/EventBoundary.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
 
 type Props = {
-  children: React.ReactNode;
   className?: string;
 };
 
-export default function EventBoundary({ children, className }: Props) {
+const EventBoundary: React.FC<Props> = ({ children, className }) => {
   const handleClick = React.useCallback((event: React.SyntheticEvent) => {
     event.preventDefault();
     event.stopPropagation();
@@ -16,4 +15,6 @@ export default function EventBoundary({ children, className }: Props) {
       {children}
     </span>
   );
-}
+};
+
+export default EventBoundary;

app/components/Guide.tsx

@@ -6,19 +6,18 @@ import Scrollable from "~/components/Scrollable";
 import usePrevious from "~/hooks/usePrevious";
 
 type Props = {
-  children?: React.ReactNode;
   isOpen: boolean;
   title?: string;
   onRequestClose: () => void;
 };
 
-const Guide = ({
+const Guide: React.FC<Props> = ({
   children,
   isOpen,
   title = "Untitled",
   onRequestClose,
   ...rest
-}: Props) => {
+}) => {
   const dialog = useDialogState({
     animated: 250,
   });

app/components/Labeled.tsx

@@ -5,10 +5,9 @@ import Flex from "~/components/Flex";
 
 type Props = {
   label: React.ReactNode | string;
-  children?: React.ReactNode;
 };
 
-const Labeled = ({ label, children, ...props }: Props) => (
+const Labeled: React.FC<Props> = ({ label, children, ...props }) => (
   <Flex column {...props}>
     <Label>{label}</Label>
     {children}

app/components/Layout.tsx

@@ -14,12 +14,11 @@ import { isModKey } from "~/utils/keyboard";
 
 type Props = {
   title?: string;
-  children?: React.ReactNode;
   sidebar?: React.ReactNode;
   rightRail?: React.ReactNode;
 };
 
-function Layout({ title, children, sidebar, rightRail }: Props) {
+const Layout: React.FC<Props> = ({ title, children, sidebar, rightRail }) => {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;
 
@@ -65,7 +64,7 @@ function Layout({ title, children, sidebar, rightRail }: Props) {
       </Container>
     </Container>
   );
-}
+};
 
 const Container = styled(Flex)`
   background: ${(props) => props.theme.background};

app/components/Modal.tsx

@@ -15,18 +15,17 @@ import { fadeAndScaleIn } from "~/styles/animations";
 
 let openModals = 0;
 type Props = {
-  children?: React.ReactNode;
   isOpen: boolean;
   title?: React.ReactNode;
   onRequestClose: () => void;
 };
 
-const Modal = ({
+const Modal: React.FC<Props> = ({
   children,
   isOpen,
   title = "Untitled",
   onRequestClose,
-}: Props) => {
+}) => {
   const dialog = useDialogState({
     animated: 250,
   });

app/scenes/Settings/components/SettingRow.tsx

@@ -9,7 +9,6 @@ type Props = {
   label: React.ReactNode;
   description: React.ReactNode;
   name: string;
-  children: React.ReactNode;
   visible?: boolean;
   border?: boolean;
 };
@@ -53,20 +52,28 @@ const Label = styled(Text)`
   margin-bottom: 4px;
 `;
 
-export default function SettingRow(props: Props) {
-  if (props.visible === false) {
+const SettingRow: React.FC<Props> = ({
+  visible,
+  description,
+  name,
+  label,
+  border,
+  children,
+}) => {
+  if (visible === false) {
     return null;
   }
-
   return (
-    <Row gap={32} $border={props.border}>
+    <Row gap={32} $border={border}>
       <Column>
         <Label as="h3">
-          <label htmlFor={props.name}>{props.label}</label>
+          <label htmlFor={name}>{label}</label>
         </Label>
-        <Text type="secondary">{props.description}</Text>
+        <Text type="secondary">{description}</Text>
       </Column>
-      <Column>{props.children}</Column>
+      <Column>{children}</Column>
     </Row>
   );
-}
+};
+
+export default SettingRow;