refactor: move TS types to proper modules

Author: Hotell

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "files.autoSave": "onFocusChange",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

conferences/big-party-iv/components/schedule.tsx

@@ -9,7 +9,7 @@ export const Schedule = (props: { data: SpeakerModel[] }) => {
     width: '100',
     height: '100',
     layout: 'responsive',
-  }
+  } as const
 
   return (
     <section className="schedule ngparty-conf-section">

conferences/big-party-v/faq.tsx

@@ -44,7 +44,7 @@ export const Faq = () => {
       <ul className="faq-content">
         {DATA.map((item) => {
           return (
-            <li className="faq-content-item">
+            <li className="faq-content-item" key={item.question}>
               <FaqItem {...item} />
             </li>
           )

globals.d.ts

@@ -1,58 +1,10 @@
-import React from 'react'
-declare module 'react' {
-  interface DOMAttributes<T> {
-    on?: string
-  }
-}
-
-declare global {
-  declare namespace JSX {
-    interface AmpLightBox {
-      id: string
-      layout: 'nodisplay'
-    }
-    interface AmpSidebar {
-      id: string
-      className?: string
-      layout: 'nodisplay'
-      side: 'left' | 'right'
-    }
-    interface AmpImg {
-      alt?: string
-      src?: string
-      width?: string
-      height?: string
-      layout?:
-        | 'responsive'
-        | 'fixed'
-        | 'fill'
-        | 'fixed-height'
-        | 'flex-item'
-        | 'container'
-        | 'nodisplay'
-        | 'intrinsic'
-      className?: string
-    }
-
-    interface AmpIframe {
-      width?: string
-      height?: string
-      sandbox?: string
-      layout?: string
-      frameborder?: string
-      src?: string
-      className?: string
-      children?: React.ReactNode
-    }
-    interface AmpAnalytics {}
-
-    interface IntrinsicElements {
-      'amp-img': AmpImg
-      'amp-iframe': AmpIframe
-      'amp-analytics': AmpAnalytics
-      'amp-sidebar': AmpSidebar
-      'amp-lightbox': AmpLightBox
-    }
+declare namespace JSX {
+  interface IntrinsicElements {
+    'amp-img': AMP.AmpImg
+    'amp-iframe': AMP.AmpIframe
+    'amp-analytics': AMP.AmpAnalytics
+    'amp-sidebar': AMP.AmpSidebar
+    'amp-lightbox': AMP.AmpLightBox
   }
 }
 

tsconfig.json

@@ -23,6 +23,7 @@
   ],
   "include": [
     "next-env.d.ts",
+    "typings",
     "**/*.ts",
     "**/*.tsx"
   ]

typings/amp.d.ts

@@ -0,0 +1,43 @@
+declare namespace AMP {
+  interface AmpLightBox {
+    id: string
+    layout: 'nodisplay'
+    children?: React.ReactNode
+  }
+  interface AmpSidebar {
+    id: string
+    className?: string
+    layout: 'nodisplay'
+    side: 'left' | 'right'
+    children?: React.ReactNode
+  }
+  interface AmpImg {
+    alt?: string
+    src?: string
+    width?: string
+    height?: string
+    layout?:
+      | 'responsive'
+      | 'fixed'
+      | 'fill'
+      | 'fixed-height'
+      | 'flex-item'
+      | 'container'
+      | 'nodisplay'
+      | 'intrinsic'
+    className?: string
+    children?: React.ReactNode
+  }
+
+  interface AmpIframe {
+    width?: string
+    height?: string
+    sandbox?: string
+    layout?: string
+    frameborder?: string
+    src?: string
+    className?: string
+    children?: React.ReactNode
+  }
+  interface AmpAnalytics {}
+}

typings/extended/react.d.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+declare module 'react' {
+  interface DOMAttributes<T> {
+    on?: string
+  }
+}