nitro-web 0.0.10 → 0.0.12

package/client/store.ts

@@ -0,0 +1,31 @@
+import { createContainer } from 'react-tracked'
+import { Store } from 'types'
+
+
+export type BeforeUpdate = (prevStore: Store | null, newData: Store) => Store
+
+let initData: Store
+let beforeUpdate: BeforeUpdate = (prevStore, newData) => newData
+
+const container = createContainer(() => {
+  const [store, setStore] = useState(() => beforeUpdate(null, initData || exposedData || {}))
+
+  // Wrap the setState function to always run beforeUpdate
+  const wrappedSetStore = (updater: (prevStore: Store) => Store) => {
+    if (typeof updater === 'function') {
+      setStore((prevStore: Store) => beforeUpdate(prevStore, updater(prevStore)))
+    } else {
+      setStore((prevStore: Store) => beforeUpdate(prevStore, updater))
+    }
+  }
+
+  exposedData = store
+  return [store, wrappedSetStore]
+})
+
+export let exposedData: Store
+export const { Provider, useTracked } = container
+export function beforeCreate(_initData: Store, _beforeUpdate: BeforeUpdate) {
+  initData = _initData // normally provided from a /login or /state request data
+  beforeUpdate = _beforeUpdate
+}

package/components/auth/auth.api.js

@@ -1,11 +1,12 @@
+// @ts-nocheck
 import MongoStore from 'connect-mongo'
 import crypto from 'crypto'
 import expressSession from 'express-session'
 import passport from 'passport'
 import passportLocal from 'passport-local'
 import db from 'monastery'
-import { sendEmail } from '../../server/email/index.js'
-import * as util from '../../util.js'
+import { sendEmail } from 'nitro-web/server'
+import * as util from 'nitro-web/util'
 // import stripeController from '../billing/stripe.api.js'
 
 let config = {}

package/components/auth/{reset.jsx → reset.tsx}

@@ -1,22 +1,19 @@
-import * as util from '../../util.js'
-import { Topbar } from '../partials/element/topbar.jsx'
-import { Input } from '../partials/form/input.jsx'
-import { FormError } from '../partials/form/form-error.jsx'
-import { Button } from '../partials/element/button.jsx'
+import { Topbar, Input, FormError, Button, util } from 'nitro-web'
+import { Errors } from 'types'
 
 export function ResetInstructions() {
   const navigate = useNavigate()
   const isLoading = useState('')
-  const [, setStore] = sharedStore.useTracked()
-  const [state, setState] = useState({ email: '' })
+  const [, setStore] = useTracked()
+  const [state, setState] = useState({ email: '', errors: [] as Errors })
 
-  async function onSubmit (e) {
+  async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
-      await util.request(e, 'post /api/reset-instructions', state, isLoading)
+      await util.request(event, 'post /api/reset-instructions', state, isLoading)
       setStore(s => ({ ...s, message: 'Done! Please check your email.' }))
       navigate('/signin')
-    } catch (errors) {
-      return setState({ ...state, errors })
+    } catch (e) {
+      return setState({ ...state, errors: e as Errors })
     }
   }
 
@@ -27,15 +24,15 @@ export function ResetInstructions() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange(setState)} placeholder="Your email address..." />
+          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         
         <div class="mb-14">
           Remembered your password? You can <Link to="/signin" class="underline2 is-active">sign in here</Link>.
-          <FormError state={state} class="pt-2" />
+          <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Email me a reset password link</Button>
+        <Button className="w-full" isLoading={!!isLoading[0]} type="submit">Email me a reset password link</Button>
       </form>
     </div>
   )
@@ -45,20 +42,21 @@ export function ResetPassword() {
   const navigate = useNavigate()
   const params = useParams()
   const isLoading = useState('')
-  const [, setStore] = sharedStore.useTracked()
+  const [, setStore] = useTracked()
   const [state, setState] = useState(() => ({
     password: '',
     password2: '',
     token: params.token,
+    errors: [] as Errors,
   }))
 
-  async function onSubmit (e) {
+  async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
-      const data = await util.request(e, 'post /api/reset-password', state, isLoading)
+      const data = await util.request(event, 'post /api/reset-password', state, isLoading)
       setStore(() => data)
       navigate('/')
-    } catch (errors) {
-      return setState({ ...state, errors })
+    } catch (e) {
+      return setState({ ...state, errors: e as Errors })
     }
   }
 
@@ -69,19 +67,19 @@ export function ResetPassword() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="password">Your New Password</label>
-          <Input name="password" type="password" state={state} onChange={onChange(setState)} />
+          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)} />
         </div>
         <div>
           <label for="password2">Repeat Your New Password</label>
-          <Input name="password2" type="password" state={state} onChange={onChange(setState)} />
+          <Input name="password2" type="password" state={state} onChange={onChange.bind(setState)} />
         </div>
 
         <div class="mb-14">
           Remembered your password? You can <Link to="/signin" class="underline2 is-active">sign in here</Link>.
-          <FormError state={state} class="pt-2" />
+          <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Reset Password</Button>
+        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Reset Password</Button>
       </form>
     </div>
   )

package/components/auth/{signin.jsx → signin.tsx}

@@ -1,18 +1,16 @@
-import * as util from '../../util.js'
-import { Topbar } from '../partials/element/topbar.jsx'
-import { Input } from '../partials/form/input.jsx'
-import { Button } from '../partials/element/button.jsx'
-import { FormError } from '../partials/form/form-error.jsx'
+import { Topbar, Input, Button, FormError, util } from 'nitro-web'
+import { Config, Errors } from 'types'
 
-export function Signin({ config }) {
+export function Signin({ config }: { config: Config }) {
   const navigate = useNavigate()
   const location = useLocation()
   const isSignout = location.pathname == '/signout'
   const isLoading = useState(isSignout ? 'is-loading' : '')
-  const [, setStore] = sharedStore.useTracked()
+  const [, setStore] = useTracked()
   const [state, setState] = useState({
-    email: config.env == 'development' ? config.testEmail : '',
+    email: config.env == 'development' ? config.placeholderEmail : '',
     password: config.env == 'development' ? '1234' : '',
+    errors: [] as Errors,
   })
 
   useEffect(() => {
@@ -27,11 +25,11 @@ export function Signin({ config }) {
       util.axios().get('/api/signout')
         .then(() => isLoading[1](''))
         .then(() => navigate({ pathname: '/signin', search: location.search }, { replace: true }))
-        .catch(err => console.error(err) || isLoading[1](''))
+        .catch(err => (console.error(err), isLoading[1]('')))
     }
   }, [isSignout])
 
-  async function onSubmit (e) {
+  async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
     try {
       const data = await util.request(e, 'post /api/signin', state, isLoading)
       isLoading[1]('is-loading')
@@ -40,8 +38,8 @@ export function Signin({ config }) {
         if (location.search.includes('redirect')) navigate(location.search.replace('?redirect=', ''))
         else navigate('/')
       }, 100) 
-    } catch (errors) {
-      return setState({ ...state, errors })
+    } catch (e) {
+      return setState({ ...state, errors: e as Errors})
     }
   }
 
@@ -52,22 +50,22 @@ export function Signin({ config }) {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange(setState)} placeholder="Your email address..." />
+          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         <div>
           <div class="flex justify-between"> 
             <label for="password">Password</label>
             <Link to="/reset" class="label underline2">Forgot?</Link>
           </div>
-          <Input name="password" type="password" state={state} onChange={onChange(setState)}/>
+          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
         </div>
         
         <div class="mb-14">
           Don&apos;t have an account? You can <Link to="/signup" class="underline2 is-active">sign up here</Link>.
-          <FormError state={state} class="pt-2" />
+          <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Sign In</Button>
+        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Sign In</Button>
       </form>
     </div>
   )

package/components/auth/{signup.jsx → signup.tsx}

@@ -1,28 +1,26 @@
-import * as util from '../../util.js'
-import { Topbar } from '../partials/element/topbar.jsx'
-import { Input } from '../partials/form/input.jsx'
-import { Button } from '../partials/element/button.jsx'
-import { FormError } from '../partials/form/form-error.jsx'
+import { Button, Input, FormError, Topbar, util } from 'nitro-web'
+import { Config, Errors } from 'types'
 
-export function Signup({ config }) {
+export function Signup({ config }: { config: Config}) {
   const navigate = useNavigate()
   const isLoading = useState('')
-  const [, setStore] = sharedStore.useTracked()
+  const [, setStore] = useTracked()
   const [state, setState] = useState({
-    email: config.env === 'development' ? config.testEmail : '',
+    email: config.env === 'development' ? config.placeholderEmail : '',
     name: config.env === 'development' ? 'Bruce Wayne' : '',
     business: { name: config.env === 'development' ? 'Wayne Enterprises' : '' },
     password: config.env === 'development' ? '1234' : '',
+    errors: [] as Errors,
   })
 
-  async function onSubmit (e) {
+  async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
     try {
       const data = await util.request(e, 'post /api/signup', state, isLoading)
       isLoading[1]('is-loading')
       setStore(() => data)
       setTimeout(() => navigate('/'), 0) // wait for setStore
-    } catch (errors) {
-      return setState({ ...state, errors })
+    } catch (e) {
+      return setState({ ...state, errors: e as Errors })
     }
   }
   
@@ -34,28 +32,28 @@ export function Signup({ config }) {
         <div class="grid grid-cols-2 gap-6">  
           <div>
             <label for="name">Your Name</label>
-            <Input name="name" placeholder="E.g. Tony Stark" state={state} onChange={onChange(setState)} />
+            <Input name="name" placeholder="E.g. Tony Stark" state={state} onChange={onChange.bind(setState)} />
           </div>
           <div>
             <label for="business.name">Company Name</label>
-            <Input name="business.name" placeholder="E.g. Stark Industries" state={state} onChange={onChange(setState)} />
+            <Input name="business.name" placeholder="E.g. Stark Industries" state={state} onChange={onChange.bind(setState)} />
           </div>
         </div>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" state={state} onChange={onChange(setState)} placeholder="Your email address..." />
+          <Input name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
         </div>
         <div>
           <label for="password">Password</label>
-          <Input name="password" type="password" state={state} onChange={onChange(setState)}/>
+          <Input name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
         </div>
         
         <div class="mb-14">
           Already have an account? You can <Link to="/signin" class="underline2 is-active">sign in here</Link>.
-          <FormError state={state} class="pt-2" />
+          <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Create Account</Button>
+        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Create Account</Button>
       </form>
     </div>
   )

package/components/billing/stripe.api.js

@@ -1,6 +1,7 @@
+// @ts-nocheck
 import Stripe from 'stripe'
 import db from 'monastery'
-import * as util from '../../util.js'
+import * as util from 'nitro-web/util'
 
 let stripe = undefined
 let stripeProducts = []

package/components/dashboard/{dashboard.jsx → dashboard.tsx}

@@ -1,7 +1,7 @@
 import { css, theme } from 'twin.macro'
 
-export function Dashboard({ config }) {
-  const [store] = sharedStore.useTracked()
+export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
+  const [store] = useTracked()
   const textColor = store.apiAvailable ? 'text-green-700' : 'text-pink-700'
   const fillColor = store.apiAvailable ? 'fill-green-500' : 'fill-pink-500'
   const bgColor = store.apiAvailable ? 'bg-green-100' : 'bg-pink-100'
@@ -17,7 +17,7 @@ export function Dashboard({ config }) {
           <svg viewBox="0 0 6 6" aria-hidden="true" className={`size-1.5 ${fillColor}`}>
             <circle r={3} cx={3} cy={3} />
           </svg>
-          { store.apiAvailable ? 'API Available' : `API Unavailable${config.isDemo ? ' (Static Example)' : ''}` }
+          { store.apiAvailable ? 'API Available' : `API Unavailable${config.isStatic ? ' (Static Example)' : ''}` }
         </span>
       </p>
     </div>

package/components/partials/element/{accordion.jsx → accordion.tsx}

@@ -1,7 +1,15 @@
+
 import { css } from 'twin.macro'
-import { IsFirstRender } from '../is-first-render.js'
+import { IsFirstRender } from 'nitro-web'
+
+type AccordionProps = {
+  children: React.ReactNode
+  className?: string
+  expanded?: boolean
+  onChange?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void
+}
 
-export function Accordion({ children, className, expanded, onChange }) {
+export function Accordion({ children, className, expanded, onChange }: AccordionProps) {
   /**
    * @param {rxjs} children - first child is the header, second child is the contents
    *   <Accordion>
@@ -10,12 +18,12 @@ export function Accordion({ children, className, expanded, onChange }) {
    * @param {boolean} <expanded> - initial value (or controlled value if onChange is passed)
    * @param {function} <onChange> - called when the header is clicked
    */
-  let [preState, setPreState] = useState(expanded)
-  let [state, setState] = useState(expanded)
-  let [height, setHeight] = useState('auto')
-  let isFirst = IsFirstRender()
-  let el = useRef()
-  let style = () => css`
+  const [preState, setPreState] = useState(expanded)
+  const [state, setState] = useState(expanded)
+  const [height, setHeight] = useState('auto')
+  const isFirst = IsFirstRender()
+  const el = useRef<HTMLDivElement>(null)
+  const style = css`
     &>:last-child {
       height: 0;
       overflow: hidden;
@@ -34,7 +42,7 @@ export function Accordion({ children, className, expanded, onChange }) {
   useEffect(() => {
     // Calulcate height first before opening and closing
     if (!isFirst) {
-      setHeight((_o) => el.current.children[1].scrollHeight + 'px' + (preState ? '-' : ''))
+      setHeight((_o) => el.current?.children[1].scrollHeight + 'px' + (preState ? '-' : ''))
     }
   }, [preState])
 
@@ -52,9 +60,9 @@ export function Accordion({ children, className, expanded, onChange }) {
     return () => timeout && clearTimeout(timeout)
   }, [height])
 
-  let onClick = function(e) {
+  const onClick = function(e: React.MouseEvent<HTMLDivElement>) {
     // Click came from inside the accordion header/summary
-    if (e.currentTarget.children[0].contains(e.target) || e.currentTarget.children[0] == e.target) {
+    if (e.currentTarget.children[0].contains(e.target as Node) || e.currentTarget.children[0] == e.target) {
       if (onChange) {
         onChange(e, getElementIndex(e.currentTarget))
       } else {
@@ -63,9 +71,9 @@ export function Accordion({ children, className, expanded, onChange }) {
     }
   }
 
-  let getElementIndex = function(node) {
+  const getElementIndex = function(node: HTMLElement) {
     let index = 0
-    while ((node = node.previousElementSibling)) index++
+    while ((node = node.previousElementSibling as HTMLElement)) index++
     return index
   }
 

package/components/partials/element/avatar.tsx

@@ -0,0 +1,40 @@
+import { Initials } from 'nitro-web'
+import { s3Image } from 'nitro-web/util'
+import noImage from 'nitro-web/client/imgs/no-image.svg'
+import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
+import { User } from 'types'
+
+type AvatarProps = {
+  awsUrl: string
+  isRound?: boolean
+  user: User,
+  showPlaceholderImage?: boolean
+  className?: string
+}
+
+export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className }: AvatarProps) {
+  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease ' + (className || '')
+
+  function getInitials(user: User) {
+    const text = (user.firstName ? [user.firstName, user.lastName] : (user?.name||'').split(' ')).map((o) => o?.charAt(0))
+    if (text.length == 1) return text[0] || ''
+    if (text.length > 1) return `${text[0]}${text[text.length - 1]}`
+    return ''
+  }
+
+  function getHex(user: User) {
+    const colors = ['#067306', '#AA33FF', '#FF54AF', '#F44336', '#c03c3c', '#7775f2', '#d88c1b']
+    const charIndex = (user.firstName||'a').toLowerCase().charCodeAt(0) - 97
+    const charIndexLimited = (charIndex < 0 || charIndex > 25) ? 25 : charIndex
+    const index = Math.round(charIndexLimited / 25 * (colors.length-1))
+    return colors[index]
+  }
+
+  return (
+    user.avatar 
+    ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small') || noImage} /> 
+    : showPlaceholderImage ? <img class={classes} src={avatarImg} width="30px" /> 
+    : <Initials className={classes} icon={{ initials: getInitials(user), hex: getHex(user) }} isRound={isRound} isMedium={true} />
+  )
+}
+

package/components/partials/element/{button.jsx → button.tsx}

@@ -1,16 +1,19 @@
-// todo: add loading indicator
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-/**
- * @param {'primary'|'secondary'|'white'|'primary-sm'|'secondary-sm'|'white-sm'} [type='primary']
- * @param {string} [className]
- * @param {boolean} [isLoading]
- * @param {React.ReactNode|string} [IconLeft]
- * @param {React.ReactNode|string} [IconRight]
- * @param {React.ReactNode|string} [IconRight2]
- * @param {React.ReactNode|string} [children]
- */
-export function Button({ color='primary', className, isLoading, IconLeft, IconRight, IconRight2, children, ...props }) {
-  const size = color.match(/xs|sm|md|lg/) || 'md'
+
+type Props = {
+  color?: 'primary'|'secondary'|'white'
+  size?: 'xs'|'sm'|'md'|'lg'
+  className?: string
+  isLoading?: boolean
+  IconLeft?: React.ReactNode|'v'
+  IconRight?: React.ReactNode|'v'
+  IconRight2?: React.ReactNode|'v'
+  children?: React.ReactNode|'v'
+  [key: string]: unknown
+}
+
+export function Button({ color='primary', size='md', className, isLoading, IconLeft, IconRight, IconRight2, children, ...props }: Props) {
+  // const size = (color.match(/xs|sm|md|lg/)?.[0] || 'md') as 'xs'|'sm'|'md'|'lg'
   const iconPosition = IconLeft ? 'left' : IconRight ? 'right' : IconRight2 ? 'right2' : 'none'
   const base = 'relative inline-block font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
 
@@ -34,15 +37,16 @@ export function Button({ color='primary', className, isLoading, IconLeft, IconRi
     right2: 'w-full inline-flex items-center justify-between',
     none: 'w-full ',
   }
-  
-  if (color.match(/primary/)) var colorAndSize = `${primary} ${sizes[size]}`
+
+  let colorAndSize = ''
+  if (color.match(/primary/)) colorAndSize = `${primary} ${sizes[size]}`
   else if (color.match(/secondary/)) colorAndSize = `${secondary} ${sizes[size]}`
   else if (color.match(/white/)) colorAndSize = `${white} ${sizes[size]}`
 
-  var contentLayout = `${contentLayouts[iconPosition]}`
+  let contentLayout = `${contentLayouts[iconPosition]}`
   if (!(className||'').match(/gap-/)) contentLayout += ' gap-x-1.5'
 
-  function getIcon(Icon, className) {
+  function getIcon(Icon: React.ReactNode|'v', className: string) {
     if (Icon == 'v') return <ChevronDownIcon className={className} />
     else return Icon
   }

package/components/partials/element/{dropdown.jsx → dropdown.tsx}

@@ -1,30 +1,32 @@
 import { css } from 'twin.macro'
-import { cloneElement } from 'react'
-import { toArray } from '../../../util.js'
-import { forwardRef } from 'react'
-import { getSelectStyle } from '../form/select.jsx'
+import { forwardRef, cloneElement } from 'react'
+import { toArray } from 'nitro-web/util'
+import { getSelectStyle } from 'nitro-web'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 
+type DropdownProps = {
+  animate?: boolean
+  children?: React.ReactNode
+  className?: string
+  css?: string
+  /** The direction of the menu **/
+  dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
+  options?: { label: string|React.ReactNode, onClick?: Function, isSelected?: boolean, icon?: React.ReactNode, className?: string }[]
+  /** Whether the dropdown is hoverable **/
+  isHoverable?: boolean
+  /** The minimum width of the menu **/
+  minWidth?: number | string
+  /** The content to render inside the top of the dropdown **/
+  menuChildren?: React.ReactNode
+  menuIsOpen?: boolean
+  menuToggles?: boolean
+  toggleCallback?: (isActive: boolean) => void
+}
 
-/**
- * Dropdown component
- * 
- * @param {boolean} animate 
- * @param {React.ReactNode} children
- * @param {string} className
- * @param {'bottom-left'|'bottom-right'|'top-left'|'top-right'} [dir='bottom-left'] - The direction of the menu
- * @param {[{ label, onClick, isSelected, icon, className }]} options - Menu options
- * @param {boolean} isHoverable - Whether the dropdown is hoverable
- * @param {number} minWidth - The minimum width of the menu
- * @param {React.ReactNode} menuChildren - The content to render inside the top of the dropdown
- * @param {boolean} menuIsOpen - Whether the menu is open
- * @param {boolean} menuToggles - Whether the menu toggles
- * @param {function} toggleCallback - The callback function to call when the menu is toggled
- */
-export const Dropdown = forwardRef(function Dropdown({ 
+export const Dropdown = forwardRef(function Dropdown({
   animate=true,
   children, 
-  className, 
+  className,
   dir, 
   options, 
   isHoverable,
@@ -33,21 +35,21 @@ export const Dropdown = forwardRef(function Dropdown({
   menuIsOpen, 
   menuToggles=true,
   toggleCallback,
-}, ref) {
+}: DropdownProps, ref) {
   // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
   isHoverable = isHoverable && !menuIsOpen
-  const dropdownRef = useRef(null)
-  const [isActive, setIsActive] = useState(menuIsOpen)
+  const dropdownRef = useRef<HTMLDivElement|null>(null)
+  const [isActive, setIsActive] = useState(!!menuIsOpen)
   const menuStyle = getSelectStyle({ name: 'menu', usePrefixes: true })
 
   // Expose the setIsActive function to the parent component
   useImperativeHandle(ref, () => ({ setIsActive }))
 
   useEffect(() => {
-    const pageClick = (e) => {
+    const pageClick = (event: MouseEvent | FocusEvent) => {
       try {
         // If the active element exists and is clicked outside of the dropdown, toggle the dropdown
-        if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) setIsActive(!isActive)
+        if (dropdownRef.current !== null && !dropdownRef.current.contains(event.target as Node)) setIsActive(!isActive)
       } catch (_e) {
         // Errors throw for contains() when the user clicks off the webpage when open
         setIsActive(!isActive)
@@ -70,13 +72,13 @@ export const Dropdown = forwardRef(function Dropdown({
     if (toggleCallback) toggleCallback(isActive)
   }, [isActive])
   
-  function onMouseDown(e) {
+  function onMouseDown(e: { key: string, preventDefault: Function }) {
     if (e.key && e.key != 'Enter') return
     if (e.key) e.preventDefault() // for button, stops buttons firing twice
     if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) setIsActive(!isActive)
   }
 
-  function onClick(option, e) {
+  function onClick(option: { onClick?: Function }, e: React.MouseEvent) {
     if (option.onClick) option.onClick(e)
     if (!menuIsOpen) setIsActive(!isActive)
   }
@@ -114,7 +116,7 @@ export const Dropdown = forwardRef(function Dropdown({
               <li 
                 key={i} 
                 className={`${optionStyle} ${option.className}`}
-                onClick={(e) => onClick(option, e)}
+                onClick={(e: React.MouseEvent) => onClick(option, e)}
               >
                 <span class="flex-auto">{option.label}</span>
                 { !!option.icon && option.icon }
@@ -128,7 +130,7 @@ export const Dropdown = forwardRef(function Dropdown({
   )
 })
 
-const style = () => css`
+const style = css`
   ul {
     transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease;
   }

package/components/partials/element/github-link.tsx

@@ -0,0 +1,16 @@
+import GithubIcon from 'nitro-web/client/imgs/github.svg'
+
+export function GithubLink({ filename }: { filename: string }) {
+  const base = 'https://github.com/boycce/nitro-web/blob/master/'
+  // Filenames are relative to the webpack start directory
+  // 1. Remove ../ from filename (i.e. for _example build)
+  // 2. Remove node_modules/nitro-web/ from filename (i.e. for packages using nitro-web)
+  const link = base + filename.replace(/^(\.\.\/|.*node_modules\/nitro-web\/)/, '')
+  
+  return (
+    // <a href={link}>Go to Github</a>
+    <a href={link} className="fixed top-0 right-0">
+      <GithubIcon />
+    </a>
+  )
+}

package/components/partials/element/{initials.jsx → initials.tsx}

@@ -1,6 +1,15 @@
 import { css } from 'twin.macro'
 
-export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }) {
+type InitialsProps = {
+  icon?: { initials: string, hex: string }
+  isBig?: boolean
+  isMedium?: boolean
+  isSmall?: boolean
+  isRound?: boolean
+  className?: string
+}
+
+export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }: InitialsProps) {
   return (
     <span 
       css={style} 
@@ -20,7 +29,7 @@ export function Initials({ icon, isBig, isMedium, isSmall, isRound, className })
   )
 }
 
-const style = (_theme) => css`
+const style = css`
   // seen in input.jsx
   display: flex;
   align-items: center;