lint dev-center

Author: vas3a

package.json

@@ -26,6 +26,7 @@
         "@sprig-technologies/sprig-browser": "^2.20.1",
         "@stripe/react-stripe-js": "1.13.0",
         "@stripe/stripe-js": "1.41.0",
+        "@types/testing-library__jest-dom": "^5.14.5",
         "apexcharts": "^3.36.0",
         "axios": "^1.1.2",
         "browser-cookies": "^1.2.0",

src-ts/.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
         }
     },
     rules: {
+        '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/ban-types': [
             'error',
             {

src-ts/tools/dev-center/dev-center-lib/CopyButton/CopyButton.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import classNames from 'classnames'
 
 import { Button, copyTextToClipboard, IconOutline } from '../../../../lib'
 
@@ -10,15 +11,17 @@ interface CopyButtonProps {
 }
 
 export const CopyButton: React.FC<CopyButtonProps> = props => {
-    const { text = '', className = '' }: CopyButtonProps = props
+    function handleCopyClick(): void {
+        copyTextToClipboard(props.text ?? '')
+    }
 
     return (
         <Button
             size='xl'
             buttonStyle='icon'
-            className={`${styles['copy-btn']} ${className}`}
+            className={classNames(styles['copy-btn'], props.className)}
             icon={IconOutline.DocumentDuplicateIcon}
-            onClick={() => copyTextToClipboard(text)}
+            onClick={handleCopyClick}
         />
     )
 }

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/LayoutDoc.tsx

@@ -10,21 +10,17 @@ interface LayoutDocProps {
     toc: TOC
 }
 
-export const LayoutDoc: React.FC<LayoutDocProps> = props => {
-    const { children, toc, disableToc }: LayoutDocProps = props
-
-    return (
-        <main className={styles.main}>
-            <div
-                className={`${styles.mainContent} ${
-                    disableToc ? styles.disableToc : ''
-                }`}
-            >
-                {children}
-            </div>
-            {disableToc ? undefined : <TableOfContents toc={toc} />}
-        </main>
-    )
-}
+export const LayoutDoc: React.FC<LayoutDocProps> = props => (
+    <main className={styles.main}>
+        <div
+            className={`${styles.mainContent} ${
+                props.disableToc ? styles.disableToc : ''
+            }`}
+        >
+            {props.children}
+        </div>
+        {props.disableToc ? undefined : <TableOfContents toc={props.toc} />}
+    </main>
+)
 
 export default LayoutDoc

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownAccordion.tsx

@@ -1,38 +1,44 @@
-import * as React from 'react'
+import {
+    Children,
+    Dispatch,
+    FC, isValidElement, ReactNode, SetStateAction, useState,
+} from 'react'
 
 import { IconSolid, useWindowSize } from '../../../../lib'
 import { Breakpoints } from '../../../../lib/styles'
 
 import styles from './MarkdownAccordion.module.scss'
 
 interface MarkdownAccordionProps {
-    children: React.ReactNode
+    children: ReactNode
 }
 
-export const MarkdownAccordion: React.FC<MarkdownAccordionProps> = props => {
-    const { children: childrenProp }: MarkdownAccordionProps = props
+export const MarkdownAccordion: FC<MarkdownAccordionProps> = props => {
 
     const [collapsed, setCollapsed]: [
         boolean,
-        React.Dispatch<React.SetStateAction<boolean>>
-    ] = React.useState<boolean>(false)
+        Dispatch<SetStateAction<boolean>>
+    ] = useState<boolean>(false)
     const size: ReturnType<typeof useWindowSize> = useWindowSize()
 
     if (size && size.width > Breakpoints.lgMax) {
-        return <>{childrenProp}</>
+        return <>{props.children}</>
+    }
+
+    const [header, ...childs]: ReturnType<typeof Children.toArray>
+        = Children.toArray(props.children)
+
+    function handleClickOutline(): void {
+        if (isValidElement(header)) {
+            setCollapsed(!collapsed)
+        }
     }
 
-    const [header, ...children]: ReturnType<typeof React.Children.toArray>
-        = React.Children.toArray(childrenProp)
     return (
         <div className={`${styles.accordion}`}>
             <div
                 className={`${styles['pane-outline']}`}
-                onClick={() => {
-                    if (React.isValidElement(header)) {
-                        setCollapsed(!collapsed)
-                    }
-                }}
+                onClick={handleClickOutline}
             >
                 {header}
                 {collapsed ? (
@@ -42,7 +48,7 @@ export const MarkdownAccordion: React.FC<MarkdownAccordionProps> = props => {
                 )}
             </div>
 
-            {!collapsed && children}
+            {!collapsed && childs}
         </div>
     )
 }