Add types modal scaffold

kossnocorp · kossnocorp · commit 2d3b6609b626 · 2023-01-05T08:57:24.000+08:00
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@date-fns/docs": "0.12.1",
     "@sentry/browser": "^5.30.0",
     "@sentry/tracing": "^5.30.0",
-    "@switcher/preact": "^1.1.2",
+    "@switcher/preact": "2.3.0",
     "@types/assets-webpack-plugin": "^7.1.0",
     "@types/copy-webpack-plugin": "^10.1.0",
     "@types/cors": "^2.8.7",
@@ -60,7 +60,7 @@
     "mocha": "^8.2.1",
     "null-loader": "^4.0.1",
     "power-assert": "^1.6.1",
-    "preact": "^10.4.8",
+    "preact": "^10.11.3",
     "preact-render-to-string": "^5.1.10",
     "prettier": "2.1.1",
     "prismjs": "^1.23.0",
diff --git a/src/server/template/index.ts b/src/server/template/index.ts
@@ -58,6 +58,7 @@ export const template = ({ body }: Params = {}) =>
   </head>
   <body>
     <div id="root">${body ?? ''}</div>
+    <div id="portals"></div>
 
     <script src="${entryPath('main', 'js')}"></script>
 
diff --git a/src/ui/components/DocType/index.tsx b/src/ui/components/DocType/index.tsx
@@ -6,7 +6,7 @@ interface Props {
 }
 
 export const DocType: FunctionComponent<Props> = ({ type }) => {
-  console.log({ type })
+  // console.log({ type })
 
   switch (type.type) {
     case 'intrinsic':
@@ -25,7 +25,7 @@ export const DocType: FunctionComponent<Props> = ({ type }) => {
       return (
         <span>
           <a
-            href={`#types/${
+            href={`#types/${type.name}/${
               /* TODO: Get rid of it one TypeDoc adds it */
               ((type as unknown) as { id: number }).id
             }`}
diff --git a/src/ui/components/ModalPortal/CloseIcon.tsx b/src/ui/components/ModalPortal/CloseIcon.tsx
@@ -0,0 +1,10 @@
+import { h } from 'preact'
+
+export const ModalPortalCloseIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      fill="currentColor"
+      d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
+    />
+  </svg>
+)
diff --git a/src/ui/components/ModalPortal/index.tsx b/src/ui/components/ModalPortal/index.tsx
@@ -0,0 +1,64 @@
+import classNames from 'classnames'
+import { ComponentChildren, FunctionComponent, h } from 'preact'
+import { createPortal } from 'preact/compat'
+import { Ref, useEffect } from 'preact/hooks'
+import { ModalPortalCloseIcon } from './CloseIcon'
+import * as styles from './styles.css'
+
+export interface ModalPortalProps {
+  children: ComponentChildren
+  close: () => void
+  bare?: boolean
+  size?: keyof typeof styles.window
+  closeOnOverlayClick?: boolean
+  adjusted?: boolean
+  overlayRef?: Ref<HTMLDivElement | null>
+}
+
+export const ModalPortal: FunctionComponent<ModalPortalProps> = ({
+  children,
+  close,
+  bare,
+  size = 'medium',
+  closeOnOverlayClick,
+  adjusted,
+  overlayRef,
+}) => {
+  const portals = document.getElementById('portals')
+
+  useEffect(() => {
+    if (!portals) return
+    document.body.style.overflow = 'hidden'
+    return () => (document.body.style.overflow = 'auto')
+  }, [portals])
+
+  if (!portals) return null
+
+  return createPortal(
+    <div
+      class={classNames(styles.overlay, !!adjusted && styles.overlayAdjusted)}
+      ref={overlayRef}
+      data-testid="modal-overlay"
+    >
+      {bare ? (
+        children
+      ) : (
+        <div
+          class={styles.windowWrapper}
+          onClick={(e: MouseEvent) => {
+            if (closeOnOverlayClick) e.target === e.currentTarget && close()
+          }}
+        >
+          <div class={styles.window[size]}>
+            <button class={styles.close} onClick={close}>
+              <ModalPortalCloseIcon />
+            </button>
+
+            {children}
+          </div>
+        </div>
+      )}
+    </div>,
+    portals
+  )
+}
diff --git a/src/ui/components/ModalPortal/styles.css.ts b/src/ui/components/ModalPortal/styles.css.ts
@@ -0,0 +1,81 @@
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css'
+
+export const overlay = style({
+  zIndex: 20,
+  position: 'fixed',
+  left: '0',
+  top: '0',
+  right: '0',
+  bottom: '0',
+  background: '#080005d4',
+  overflowY: 'auto',
+  display: 'flex',
+  justifyContent: 'center',
+})
+
+export const overlayAdjusted = style({
+  alignItems: 'center',
+})
+
+export const windowWrapper = style({
+  width: '100%',
+  padding: '4rem',
+
+  '@media': {
+    '(max-width: 1024px)': {
+      padding: '1rem',
+    },
+  },
+})
+
+export const windowBase = style({
+  background: '#fffdf9',
+  borderRadius: '4px',
+  color: '#4a3142',
+  width: '100%',
+  margin: '0 auto',
+})
+
+export const window = styleVariants({
+  small: [
+    windowBase,
+    {
+      maxWidth: '40rem',
+    },
+  ],
+
+  medium: [
+    windowBase,
+    {
+      maxWidth: '50rem',
+    },
+  ],
+})
+
+export const close = style({
+  border: '0',
+  background: 'transparent',
+  position: 'fixed',
+  width: '3rem',
+  height: '3rem',
+  color: '#5d3861',
+  cursor: 'pointer',
+
+  ':hover': {
+    color: '#c482cb',
+  },
+
+  selectors: {
+    [`${window.small} &`]: {
+      marginLeft: '41rem',
+    },
+
+    [`${window.medium} &`]: {
+      marginLeft: '51rem',
+    },
+  },
+})
+
+globalStyle(`${close} svg`, {
+  width: '100%',
+})
diff --git a/src/ui/components/Modals/index.tsx b/src/ui/components/Modals/index.tsx
@@ -0,0 +1,141 @@
+import { ModalPortal, ModalPortalProps } from '~/ui/components/ModalPortal'
+import {
+  ComponentChild,
+  ComponentChildren,
+  createContext,
+  FunctionComponent,
+  h,
+} from 'preact'
+import {
+  MutableRef,
+  Ref,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks'
+import { useRefState } from '~/utils/useRefState'
+
+export interface ModalComponent {
+  id: string
+  component: ComponentChildren
+}
+
+export type ModalOverlayRef = MutableRef<HTMLDivElement | null>
+
+export type ModalOnCloseRef = MutableRef<(() => unknown) | null>
+
+export interface ModalAPI {
+  modal: ModalComponent | undefined
+  props: ShowModalInnerProps
+  showModal: ShowModal
+  overlayRef: ModalOverlayRef
+  onCloseRef: ModalOnCloseRef
+}
+
+export type ShowModalInnerProps = Pick<
+  ModalPortalProps,
+  'size' | 'bare' | 'closeOnOverlayClick' | 'adjusted'
+>
+
+export interface ShowModalProps {
+  modalId: string
+  component: ComponentChild | null
+  props?: ShowModalInnerProps
+  onClose?: () => unknown
+}
+
+export type ShowModal = (props: ShowModalProps) => void
+
+export const ModalsContext = createContext<ModalAPI>({
+  modal: undefined,
+  props: {},
+  showModal: () => {},
+  overlayRef: { current: null },
+  onCloseRef: { current: null },
+})
+
+export interface ModalsProps {
+  api: ModalAPI
+}
+
+export function Modals({
+  api: { modal, props, showModal, overlayRef },
+}: ModalsProps) {
+  if (!modal) return null
+  return (
+    <ModalPortal
+      close={() => {
+        showModal({ modalId: modal.id, component: undefined })
+      }}
+      overlayRef={overlayRef}
+      {...props}
+    >
+      {modal.component}
+    </ModalPortal>
+  )
+}
+
+export function useModals(): ModalAPI {
+  const [modal, setModal] = useRefState<ModalComponent | undefined>(undefined)
+  const [props, setProps] = useState<ShowModalInnerProps>({ size: 'medium' })
+  const overlayRef: ModalOverlayRef = useRef(null)
+  const onCloseRef: ModalOnCloseRef = useRef(null)
+
+  const showModal: ShowModal = ({
+    modalId,
+    component,
+    props: newProps,
+    onClose,
+  }) => {
+    // Call current modal onClose callback
+    if (!component) onCloseRef.current?.()
+    // Assign new callback
+    onCloseRef.current = onClose || null
+
+    // Ignore close if another modal got opened
+    if (!component && modalId !== modal.current?.id) return
+
+    setModal(component ? { id: modalId, component } : undefined)
+    setProps(newProps || {})
+  }
+
+  return { modal: modal.current, props, showModal, overlayRef, onCloseRef }
+}
+
+export interface ModalPropsBase {
+  close: () => void
+  overlayRef: ModalOverlayRef
+}
+
+export interface ModalPropsExtra {
+  onClose: () => unknown
+}
+
+export function createModal<Props extends Record<string, any>>(
+  Component: FunctionComponent<Props & ModalPropsBase>,
+  innerProps?: Omit<ModalPortalProps, keyof ModalPropsBase | 'children'>
+) {
+  return (): ((props: Props & ModalPropsExtra) => void) => {
+    const modalId = useMemo(() => Date.now().toString(), [])
+    const { showModal, overlayRef } = useContext(ModalsContext)
+
+    return ({ onClose, ...props }) => {
+      showModal({
+        modalId,
+        component: (
+          // @ts-ignore: we're tricking TypeScript, this is ok
+          <Component
+            {...props}
+            close={() => {
+              showModal({ modalId, component: null })
+            }}
+            overlayRef={overlayRef}
+          />
+        ),
+        props: innerProps,
+        onClose,
+      })
+    }
+  }
+}
diff --git a/src/ui/index.tsx b/src/ui/index.tsx
@@ -7,6 +7,7 @@ import { NotFound } from '~/ui/screens/NotFound'
 import 'reset.css/reset.css?global'
 import './global.css?global'
 import { defaultSubmodule } from '@date-fns/docs/consts'
+import { Modals, ModalsContext, useModals } from './components/Modals'
 
 const win = typeof window !== 'undefined' ? window : undefined
 
@@ -17,9 +18,14 @@ export const UI = () => {
     win?.ga?.('send', 'pageview')
   }, [JSON.stringify(location)])
 
+  const modalsApi = useModals()
+
   return (
     <>
-      <Content location={location} />
+      <ModalsContext.Provider value={modalsApi}>
+        <Content location={location} />
+        <Modals api={modalsApi} />
+      </ModalsContext.Provider>
     </>
   )
 }
diff --git a/src/ui/screens/Docs/Doc/TSDoc/Returns/index.tsx b/src/ui/screens/Docs/Doc/TSDoc/Returns/index.tsx
@@ -11,7 +11,6 @@ interface Props {
 
 export const Returns: FunctionComponent<Props> = ({ fn }) => {
   const description = useMemo(() => findReturns(fn), [fn])
-  console.log({ fn })
   return (
     <DocReturns
       returns={
diff --git a/src/ui/screens/Docs/Doc/TSDoc/Types/index.tsx b/src/ui/screens/Docs/Doc/TSDoc/Types/index.tsx
@@ -0,0 +1,23 @@
+import { h } from 'preact'
+import { DeclarationReflection } from 'typedoc'
+import { createModal } from '~/ui/components/Modals'
+import * as styles from './styles.css'
+
+export interface TypesModalProps {
+  typeId: number
+  tsdoc: DeclarationReflection
+}
+
+export const useTypesModal = createModal<TypesModalProps>(
+  ({ typeId, tsdoc }) => {
+    return (
+      <div class={styles.wrapper}>
+        <div class={styles.inner}>
+          <div class={styles.nav}>TODO: Navigation</div>
+          <div class={styles.content}>TODO: Content</div>
+        </div>
+      </div>
+    )
+  },
+  { size: 'medium', closeOnOverlayClick: true }
+)
diff --git a/src/ui/screens/Docs/Doc/TSDoc/Types/styles.css.ts b/src/ui/screens/Docs/Doc/TSDoc/Types/styles.css.ts
diff --git a/src/ui/screens/Docs/Doc/TSDoc/index.tsx b/src/ui/screens/Docs/Doc/TSDoc/index.tsx
diff --git a/src/ui/screens/Docs/NavBar/index.tsx b/src/ui/screens/Docs/NavBar/index.tsx
diff --git a/src/utils/useRefState/index.ts b/src/utils/useRefState/index.ts
diff --git a/yarn.lock b/yarn.lock
