@authing/react-ui-components 3.0.1-beta.4 → 3.0.1-rc.3

package/src/components/AuthingGuard/types/index.ts

@@ -0,0 +1,4 @@
+export * from './Forms'
+export * from './GuardState'
+export * from './GuardConfig'
+export * from './Locales'

package/src/components/index.ts

@@ -0,0 +1,7 @@
+import { AuthingGuard } from './AuthingGuard'
+
+export * from './AuthingGuard/types'
+export * from './AuthingGuard/hooks'
+export type { AuthenticationClientOptions } from 'authing-js-sdk'
+
+export { AuthingGuard }

package/src/context/base.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+// create context with no upfront defaultValue
+// without having to do undefined check all the time
+export function createBaseContext<C>() {
+  const ctx = React.createContext<C | undefined>(undefined)
+  function useBaseContext() {
+    const ctxConst = React.useContext(ctx)
+    if (!ctxConst)
+      throw new Error('useBaseContext must be inside a Provider with a value')
+    return ctxConst
+  }
+  // make TypeScript infer a tuple, not an array of union types
+  return [ctx, useBaseContext] as const
+}
+
+export interface IBaseAction<ActionType = string> {
+  type: ActionType & string
+  payload?: any
+  [key: string]: string
+}
+
+export interface IBaseContext<S> {
+  state: S
+  [k: string]: any
+}
+
+export type BaseContextComponent<Props> = React.PropsWithChildren<Props>

package/src/context/global/context.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback, useReducer } from 'react'
+import { createBaseContext, IBaseContext, BaseContextComponent } from '../base'
+import { reducer, IState } from './reducer'
+
+// 页面上下文，除了状态外还有公开的方法
+export interface IGuardContext extends IBaseContext<IState> {
+  dispatch: Function
+  getValue: (key: keyof IState) => any
+  setValue: (key: keyof IState, value: any) => void
+}
+
+// 实例化上下文，这里避免了为空检查
+const [Context, useBaseContext] = createBaseContext<IGuardContext>()
+
+export function useGuardContext(): IGuardContext {
+  const guardContext = useBaseContext()
+  // TODO: custom some
+  return guardContext
+}
+
+export function GuardContext({
+  children = null,
+  value,
+}: BaseContextComponent<Record<string, any>>) {
+  const [state, dispatch] = useReducer(reducer, value)
+  const getValue = (key: keyof IState) => state[key]
+  const setValue = useCallback((key: keyof IState, value: any) => {
+    dispatch({ type: 'SET_VALUE', key, value })
+  }, [])
+
+  let ctx: IGuardContext = {
+    state,
+    dispatch,
+    getValue,
+    setValue,
+  }
+
+  return <Context.Provider value={ctx}>{children}</Context.Provider>
+}

package/src/context/global/reducer.tsx

@@ -0,0 +1,56 @@
+import {
+  GuardConfig,
+  ActiveTabs,
+  GuardScenes,
+  UserConfig,
+  GuardEventsHandler,
+  LocalesConfig,
+  Lang,
+} from '../../components/AuthingGuard/types'
+import { AuthenticationClient } from 'authing-js-sdk'
+import { IBaseAction } from '../base'
+import { ApplicationMfaType } from '../../components/AuthingGuard/api/appConfig'
+
+export type IState = {
+  config: GuardConfig // 处理后的 Guard 配置
+  userConfig: UserConfig // 用户传入的配置
+  authClient: AuthenticationClient
+  activeTabs: ActiveTabs // 登录、注册方式
+  guardScenes: GuardScenes // 当前在哪个界面
+  guardTitle: string
+  // 需要 mfa 登录时后端返回的错误信息
+  mfaData: {
+    mfaToken: string
+    phone?: string
+    email?: string
+    applicationMfa?: {
+      status: 0 | 1
+      mfaPolicy: ApplicationMfaType
+      sort: number
+    }[]
+  }
+  userPoolId: string
+  appId: string
+  guardEvents: GuardEventsHandler
+  localesConfig: LocalesConfig
+  lang?: Lang
+  realHost: string
+}
+
+const handlers: any = {
+  // eslint-disable-next-line
+  ['SET_VALUE']: (state: IState, payloads: any) => {
+    return {
+      ...state,
+      [payloads.key]: payloads.value,
+    }
+  },
+}
+
+export const reducer = (state: IState, { type, ...payloads }: IBaseAction) => {
+  const handler = handlers[type]
+  if (handler) {
+    return handler(state, payloads)
+  }
+  return state
+}

package/src/index.tsx

@@ -0,0 +1,142 @@
+import { Button } from 'antd'
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+import { Lang } from './components'
+import { AuthingGuard } from './components/AuthingGuard'
+
+import { SocialConnectionProvider } from 'authing-js-sdk'
+
+import {
+  GuardMode,
+  // LoginMethods,
+  UserConfig,
+  // LoginMethods,
+  // RegisterMethods,
+  // GuardScenes,
+  // SocialConnections,
+} from './components/AuthingGuard/types/GuardConfig'
+import reportWebVitals from './reportWebVitals'
+
+const App = () => {
+  const [lang, setLang] = useState<Lang>('zh-CN')
+  const [title, setTitle] = useState('标题')
+
+  const config: UserConfig = {
+    mode: GuardMode.Modal,
+    // appHost: 'https://core.dev2.authing-inc.co',
+    apiHost: 'http://console.authing.localhost:3000',
+    // appHost: 'http://0w9ugz.authing.localhost:3000',
+    // apiHost: 'http://192.168.50.57:3000',
+    // loginMethods: Object.values(LoginMethods),
+    // logo:
+    //   'https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png',
+    // title: 'Authing',
+    // defaultLoginMethod: LoginMethods.LDAP,
+    // registerMethods: Object.values(RegisterMethods),
+    // defaultRegisterMethod: RegisterMethods.Email,
+    // defaultScenes: GuardScenes.Login,
+    // socialConnections: Object.values(SocialConnections),
+    // enterpriseConnections: ["oidc1"],
+    // appDomain: 'oidc1.authing.cn',
+    // appId: '5f17a529f64fb009b794a2ff',
+    // isSSO: true,
+    // zIndex: 300,
+    // text: {
+    //   loginTabs: {
+    //     [LoginMethods.Password]: '密码登录一下',
+    //   },
+    //   loginBtn: {
+    //     loading: 'fuck',
+    //   },
+    // },
+    // mode: GuardMode.Modal,
+    // contentCss: `
+    //   html, body {
+    //     background-color: #fff;
+    //   }
+    // `,
+    // // autoRegister: true,
+    socialConnections: [SocialConnectionProvider.WECHATPC],
+  }
+
+  const [visible, setVisible] = useState(false)
+
+  // useEffect(() => {
+  //   setTimeout(() => setVisible(true), 3000)
+  // }, [])
+
+  // initAuthClient({
+  //   appId: '60c02a89a9e0431e271d9ff0',
+  //   // appHost: 'http://console.authing.localhost:3000',
+  // })
+
+  return (
+    // eslint-disable-next-line react/jsx-no-undef
+    <>
+      <Button
+        type="primary"
+        onClick={() => {
+          //
+        }}
+      >
+        add socialConnections
+      </Button>
+      <Button
+        type="primary"
+        onClick={() => {
+          setVisible(!visible)
+        }}
+      >
+        开关
+      </Button>
+      <Button
+        type="primary"
+        onClick={() => {
+          setLang('zh-CN')
+        }}
+      >
+        中文
+      </Button>
+      <Button
+        type="primary"
+        onClick={() => {
+          setLang('en-US')
+        }}
+      >
+        English
+      </Button>
+      <input
+        value={title}
+        onChange={(evt) => setTitle(evt.target.value)}
+      ></input>
+      <AuthingGuard
+        onLoad={(v) => console.log(v)}
+        visible={visible}
+        // onLoginTabChange={(v) => console.log(v)}
+        // onRegisterTabChange={(v) => console.log(v)}
+        // onClose={() => {
+        //   setVisible(false)
+        //   setTimeout(() => {
+        //     setVisible(true)
+        //   }, 2000)
+        // }}
+        onClose={() => {
+          setVisible(false)
+        }}
+        // onLoad={(a) => console.log(a, '加载完成')}
+        // onPwdResetError={(e) => console.log(e)}
+        appId="61ada57aef5ed526528ed5b6"
+        // tenantId="61a5ed126cddae656cce9007"
+        // appId="5fd877fb0ba0421962eced94"
+        config={config}
+      />
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()

package/src/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

package/src/react-app-env.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test'
+    readonly PUBLIC_URL: string
+  }
+}
+
+declare module '*.avif' {
+  const src: string
+  export default src
+}
+
+declare module '*.bmp' {
+  const src: string
+  export default src
+}
+
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.webp' {
+  const src: string
+  export default src
+}
+
+declare module '*.svg' {
+  import * as React from 'react'
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >
+
+  const src: string
+  export default src
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals'
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
+  }
+}
+
+export default reportWebVitals

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'

package/src/utils/clipboard.ts

@@ -0,0 +1,27 @@
+import { i18n } from 'src/components/AuthingGuard/locales'
+
+// https://juejin.im/post/6844903857290477582
+export const copyToClipboard = (str: string) => {
+  const el = document.createElement('textarea') // 创建一个 <textarea> 元素
+  el.value = str // 设置它的值为你想复制的字符串
+  el.setAttribute('readonly', '') // 设置为只读以防止干扰
+  el.style.position = 'absolute'
+  el.style.left = '-9999px' // 移出屏幕外以使其不可见
+  document.body.appendChild(el) // 插入 <textarea> 元素到 HTML 文档中
+  try {
+    const selected =
+      document.getSelection()!.rangeCount > 0 // 检查是否之前曾选中过内容
+        ? document.getSelection()!.getRangeAt(0) // 如果找到，则保存选中
+        : false // 标记为  false 以表示不存在之前选中的内容
+    el.select() // 选中 <textarea> 的内容
+    document.execCommand('copy') // 复制 - 仅当作为用户操作的响应结果时才可以工作(比如，点击事件)
+    document.body.removeChild(el) // 移除 <textarea> 元素
+    if (selected) {
+      // 如果在复制前已存在选中的内容
+      document.getSelection()!.removeAllRanges() // 取消 HTML 文档中所有的选中部分
+      document.getSelection()!.addRange(selected) // 恢复原来的选中
+    }
+  } catch (e) {
+    console.warn(i18n.t('common.copyFailed'))
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,180 @@
+import { useEffect } from 'react'
+import { Rule } from 'antd/lib/form'
+import { useGuardContext } from '../context/global/context'
+import qs from 'qs'
+
+export * from './popupCenter'
+export * from './clipboard'
+
+export const VALIDATE_PATTERN = {
+  // https://emailregex.com/
+  // eslint-disable-next-line no-control-regex
+  email: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+  //   以下的来自 authing-user-portal 项目
+  phone: /^1[3-9]\d{9}$/,
+  ip: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/,
+  host: /^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+.?$/,
+} as const
+
+export const validate = (type: keyof typeof VALIDATE_PATTERN, val: string) => {
+  return VALIDATE_PATTERN[type].test(val)
+}
+
+export const getRequiredRules = (msg: string): Rule[] => {
+  return [
+    {
+      required: true,
+      message: msg,
+    },
+  ]
+}
+
+export function getDeviceName() {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  const userAgent = window.navigator.userAgent
+  const platform = window.navigator.platform
+  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
+  const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
+  const iosPlatforms = ['iPhone', 'iPad', 'iPod']
+
+  let os = null
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    os = 'Mac OS'
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    os = 'iOS'
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    os = 'Windows'
+  } else if (/Android/.test(userAgent)) {
+    os = 'Android'
+  } else if (!os && /Linux/.test(platform)) {
+    os = 'Linux'
+  }
+
+  return os
+}
+
+export type STYLE_RECORD_KEY = 'appConfig' | 'userConfig'
+
+/**
+ * 传对象 {'background-color': 'red'}
+ * 传字符串 "CSS 样式"
+ */
+const insertedRecord: Record<STYLE_RECORD_KEY, any> = {
+  appConfig: null,
+  userConfig: null,
+}
+export const insertStyles = (
+  styles: string | any,
+  recordKey: STYLE_RECORD_KEY
+) => {
+  let styleElt, styleSheet
+  if ((document as any).createStyleSheet) {
+    // IE
+    styleSheet = (document as any).createStyleSheet()
+  } else {
+    let head = document.getElementsByTagName('head')[0]
+    styleElt = document.createElement('style')
+    head.appendChild(styleElt)
+    styleSheet = document.styleSheets[document.styleSheets.length - 1]
+  }
+  if (typeof styles === 'string') {
+    if (styleElt) styleElt.innerHTML = styles
+    else styleSheet.cssText = styles // IE
+  } else {
+    let i = 0
+    for (let selector in styles) {
+      if (styleSheet.insertRule) {
+        let rule = selector + ' {' + styles[selector] + '}'
+        styleSheet.insertRule(rule, i++)
+      } else {
+        styleSheet.addRule(selector, styles[selector], i++)
+      }
+    }
+  }
+
+  insertedRecord[recordKey] = styleElt
+}
+
+export const removeStyles = (recordKey: STYLE_RECORD_KEY) => {
+  if (!insertedRecord[recordKey]) {
+    return
+  }
+
+  const styleElt = insertedRecord[recordKey]
+
+  styleElt.parentNode?.removeChild(styleElt)
+
+  insertedRecord[recordKey] = null
+}
+
+export const useTitle = (title: string, prefix?: string) => {
+  const {
+    state: { config },
+  } = useGuardContext()
+
+  useEffect(() => {
+    document.title = `${prefix ?? `${config.title} `} ${title}`
+  }, [config.title, prefix, title])
+}
+
+export const getClassnames = (classnames: (string | boolean | undefined)[]) => {
+  return classnames.filter(Boolean).join(' ')
+}
+
+/**
+ * https://www.itranslater.com/qa/details/2115518846294557696
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item: any) {
+  return item && typeof item === 'object' && !Array.isArray(item)
+}
+
+/**
+ * https://www.itranslater.com/qa/details/2115518846294557696
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export function deepMerge<T extends any = any>(
+  target: T,
+  ...sources: any[]
+): T {
+  if (!sources.length) return target
+  const source = sources.shift()
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        // @ts-ignore
+        if (!target[key]) {
+          Object.assign(target, { [key]: {} })
+        }
+        // @ts-ignore
+        deepMerge(target[key], source[key])
+      } else {
+        Object.assign(target, { [key]: source[key] })
+      }
+    }
+  }
+
+  return deepMerge(target, ...sources)
+}
+
+export const getUserRegisterParams = () => {
+  const query = qs.parse(window.location.search, {
+    ignoreQueryPrefix: true,
+  })
+  return Object.keys(query).map((key) => ({
+    key,
+    value: query[key],
+  }))
+}
+
+export const isWechatBrowser = () =>
+  /MicroMessenger/i.test(navigator?.userAgent)

package/src/utils/popupCenter.ts

@@ -0,0 +1,48 @@
+/**
+ * 在屏幕中心弹出新窗口加载 url
+ * @param url
+ * @param param1
+ */
+export const popupCenter = (
+  url: string,
+  { w, h }: { w: number; h: number } = { w: 585, h: 649 }
+) => {
+  // Fixes dual-screen position                             Most browsers      Firefox
+  const dualScreenLeft =
+    window.screenLeft !== undefined ? window.screenLeft : window.screenX
+  const dualScreenTop =
+    window.screenTop !== undefined ? window.screenTop : window.screenY
+
+  const width = window.innerWidth
+    ? window.innerWidth
+    : document.documentElement.clientWidth
+    ? document.documentElement.clientWidth
+    : window.screen.width
+  const height = window.innerHeight
+    ? window.innerHeight
+    : document.documentElement.clientHeight
+    ? document.documentElement.clientHeight
+    : window.screen.height
+
+  const systemZoom = width / window.screen.availWidth
+  const left = (width - w) / 2 / systemZoom + dualScreenLeft
+  const top = (height - h) / 2 / systemZoom + dualScreenTop
+  const newWindow = window.open(
+    url,
+    '_blank',
+    `
+        toolbar=no,
+        menubar=no,
+        scrollbars=no,
+        resizable=no,
+        location=no,
+        status=no
+        width=${w / systemZoom}, 
+        height=${h / systemZoom}, 
+        top=${top}, 
+        left=${left}
+        `
+  )
+
+  newWindow?.focus()
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "lib/",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "noEmit": false,
+    "jsx": "react"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
+  "exclude": ["node_modules", "lib", "build"]
+}