Convert entire library to Typescript

Author: adamgraham

package.json

@@ -3,21 +3,23 @@
   "version": "2.2.0",
   "license": "SEE LICENSE IN LICENSE",
   "repository": "https://github.com/zigurous/react-components",
-  "source": "src/index.js",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "unpkg": "dist/index.umd.js",
   "dependencies": {
-    "classnames": "^2.3.1",
-    "prismjs": "^1.28.0",
-    "prop-types": "^15.8.1",
-    "react-cookie": "^4.1.1",
+    "classnames": "^2.5.1",
+    "prismjs": "^1.29.0",
+    "react-cookie": "^7.2.1",
     "react-image-lightbox": "^5.1.4"
   },
   "devDependencies": {
+    "@types/prismjs": "^1.26.4",
+    "@types/react": "^18.1.0",
+    "@types/react-dom": "^18.1.0",
     "clipboardy": "^3.0.0",
     "cross-env": "^7.0.3",
-    "microbundle-crl": "^0.13.11",
+    "microbundle": "^0.15.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "svg2js": "^0.0.4-alpha1"
@@ -27,8 +29,8 @@
     "react-dom": "^18.1.0"
   },
   "scripts": {
-    "build": "microbundle-crl --compress --css-modules \"[local]\" --globals react=React,react-dom=ReactDOM",
-    "start": "microbundle-crl watch --no-compress --globals react=React,react-dom=ReactDOM",
+    "build": "microbundle --compress --jsx React.createElement --jsxFragment React.Fragment --globals react=React,react-dom=ReactDOM",
+    "start": "microbundle watch --no-compress --jsx React.createElement --jsxFragment React.Fragment --globals react=React,react-dom=ReactDOM",
     "predeploy": "yarn build",
     "prepare": "yarn build"
   },

src/components/AppFooter.js renamed to src/components/AppFooter.tsx

@@ -1,38 +1,52 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Link from './Link';
-import Logo from './Logo';
+import Logo, { LogoProps } from './Logo';
+import type { LinkType, Theme } from '../types';
 
-function AppFooter({
+export interface AppFooterProps {
+  bordered?: boolean;
+  className?: string;
+  copyright?: React.ReactNode;
+  hideLogo?: boolean;
+  LinkElementType?: React.ElementType;
+  links?: LinkType[];
+  logoProps?: LogoProps;
+  onLinkClick?: (link: LinkType) => void;
+  sticky?: boolean;
+  theme?: Theme | string;
+  transparent?: boolean;
+}
+
+export default function AppFooter({
   bordered = false,
   className,
   copyright,
   hideLogo = false,
   LinkElementType = 'a',
-  links = [],
+  links,
+  logoProps,
   onLinkClick,
-  onLogoClick,
   sticky = false,
   theme,
   transparent = false,
-}) {
+}: AppFooterProps) {
   return (
     <footer
       className={classNames(
         'app-footer',
         { 'app-footer--bordered': bordered },
         { 'app-footer--transparent': transparent },
         { 'app-footer--sticky': sticky },
-        className
+        className,
       )}
       data-theme={theme}
     >
       <div className="container">
         <div className="row align-items-center margin-top-lg margin-bottom-lg">
           <div className="col font-xs font-weight-500">
             <span>
-              {!hideLogo && <Logo onClick={onLogoClick} size="xs" />}
+              {!hideLogo && <Logo size="xs" {...logoProps} />}
               {copyright && (
                 <span className="copyright margin-left-xl margin-right-xl">
                   {copyright}
@@ -41,11 +55,11 @@ function AppFooter({
             </span>
             {links && links.length > 0 && (
               <span className="links">
-                {links.map((link) => (
+                {links.map(link => (
                   <Link
                     aria-label={link.name}
+                    as={LinkElementType}
                     className="color-inherit margin-left-md margin-right-md"
-                    ElementType={link.ElementType || LinkElementType}
                     external={link.external}
                     key={link.id || link.to}
                     onClick={() => {
@@ -66,19 +80,3 @@ function AppFooter({
     </footer>
   );
 }
-
-AppFooter.propTypes = {
-  bordered: PropTypes.bool,
-  className: PropTypes.string,
-  copyright: PropTypes.node,
-  hideLogo: PropTypes.bool,
-  LinkElementType: PropTypes.elementType,
-  links: PropTypes.arrayOf(PropTypes.shape(Link.propTypes)),
-  onLinkClick: PropTypes.func,
-  onLogoClick: PropTypes.func,
-  sticky: PropTypes.bool,
-  theme: PropTypes.string,
-  transparent: PropTypes.bool,
-};
-
-export default AppFooter;

src/components/AppHeader.js

@@ -0,0 +1,96 @@
+import classNames from 'classnames';
+import React from 'react';
+import Logo, { LogoProps } from './Logo';
+import NavBar from './NavBar';
+import NavMenu from './NavMenu';
+import SocialNavLinks, { SocialNavLinksProps } from './SocialNavLinks';
+import type { LinkType, SocialLinkType, Theme } from '../types';
+
+export interface AppHeaderProps {
+  bordered?: boolean;
+  className?: string;
+  fluid?: boolean;
+  hideLogo?: boolean;
+  hideNavigation?: boolean;
+  hideSocialLinks?: boolean;
+  LinkElementType?: React.ElementType;
+  links?: LinkType[];
+  location?: Location | null;
+  logoProps?: LogoProps;
+  onLinkClick?: (link: LinkType) => void;
+  rootElement?: string;
+  socialLinks?: SocialLinkType[];
+  socialNavLinksProps?: SocialNavLinksProps;
+  sticky?: boolean;
+  theme?: Theme | string;
+  transparent?: boolean;
+}
+
+export default function AppHeader({
+  bordered = false,
+  className,
+  fluid = false,
+  hideLogo = false,
+  hideNavigation = false,
+  hideSocialLinks = false,
+  LinkElementType = 'a',
+  links,
+  location = typeof window !== 'undefined' ? window.location : null,
+  logoProps,
+  onLinkClick,
+  rootElement = 'body',
+  socialLinks,
+  socialNavLinksProps = { iconInnerPadding: 10, iconSize: 20 },
+  sticky = false,
+  theme,
+  transparent = false,
+}: AppHeaderProps) {
+  return (
+    <header
+      className={classNames(
+        'app-header',
+        { 'app-header--bordered': bordered },
+        { 'app-header--transparent': transparent },
+        { 'app-header--sticky': sticky },
+        className,
+      )}
+      data-theme={theme}
+    >
+      <div
+        className={classNames({
+          container: !fluid,
+          'container-fluid': fluid,
+        })}
+      >
+        <div className="app-header__content left">
+          {!hideLogo && <Logo size="sm" {...logoProps} />}
+          {!hideNavigation && (
+            <NavBar
+              LinkElementType={LinkElementType}
+              links={links}
+              location={location}
+              onLinkClick={onLinkClick}
+            />
+          )}
+        </div>
+        <div className="app-header__content right">
+          {!hideSocialLinks && socialLinks && socialLinks.length > 0 && (
+            <SocialNavLinks links={socialLinks} {...socialNavLinksProps} />
+          )}
+          {!hideNavigation && (
+            <NavMenu
+              hideSocialLinks={hideSocialLinks}
+              LinkElementType={LinkElementType}
+              links={links}
+              location={location}
+              onLinkClick={onLinkClick}
+              rootElement={rootElement}
+              socialLinks={socialLinks}
+              theme={theme}
+            />
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}