@postgres.ai/shared 3.5.1-pr-1027.0

package/helpers/getEntropy.ts

@@ -0,0 +1,232 @@
+const replaceChars = '!@$&*'
+const sepChars = '_-., '
+const otherSpecialChars = '“#%"()+/:;<=>?[\\]^{|}~'
+const lowerChars = 'abcdefghijklmnopqrstuvwxyz'
+const upperChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+const digitsChars = '0123456789'
+export const MIN_ENTROPY = 60
+
+function getBase(password: string): number {
+  let uniqueChars: string[] = []
+  for (const c of password) {
+    if (!uniqueChars.includes(c)) {
+      uniqueChars.push(c)
+    }
+  }
+  let hasReplace = false
+  let hasSep = false
+  let hasOtherSpecial = false
+  let hasLower = false
+  let hasUpper = false
+  let hasDigits = false
+  let base = 0
+
+  for (let i = 0; i < uniqueChars.length; i++) {
+    switch (true) {
+      case replaceChars.includes(uniqueChars[i]):
+        hasReplace = true
+        break
+      case sepChars.includes(uniqueChars[i]):
+        hasSep = true
+        break
+      case otherSpecialChars.includes(uniqueChars[i]):
+        hasOtherSpecial = true
+        break
+      case lowerChars.includes(uniqueChars[i]):
+        hasLower = true
+        break
+      case upperChars.includes(uniqueChars[i]):
+        hasUpper = true
+        break
+      case digitsChars.includes(uniqueChars[i]):
+        hasDigits = true
+        break
+      default:
+        base++
+        break
+    }
+  }
+  if (hasReplace) {
+    base += replaceChars.length
+  }
+  if (hasSep) {
+    base += sepChars.length
+  }
+  if (hasOtherSpecial) {
+    base += otherSpecialChars.length
+  }
+  if (hasLower) {
+    base += lowerChars.length
+  }
+  if (hasUpper) {
+    base += upperChars.length
+  }
+  if (hasDigits) {
+    base += digitsChars.length
+  }
+  return base
+}
+const seqNums = '0123456789'
+const seqKeyboard0 = 'qwertyuiop'
+const seqKeyboard1 = 'asdfghjkl'
+const seqKeyboard2 = 'zxcvbnm'
+const seqAlphabet = 'abcdefghijklmnopqrstuvwxyz'
+function removeMoreThanTwoFromSequence(s: string, seq: string): string {
+  const seqRunes: string[] = Array.from(seq)
+  let runes: string[] = Array.from(s)
+  let matches = 0
+  for (let i = 0; i < runes.length; i++) {
+    for (let j = 0; j < seqRunes.length; j++) {
+      if (i >= runes.length) {
+        break
+      }
+      const r = runes[i]
+      const r2 = seqRunes[j]
+      if (r !== r2) {
+        matches = 0
+        continue
+      }
+      // found a match, advance the counter
+      matches++
+      if (matches > 2) {
+        runes.splice(i, 1)
+      } else {
+        i++
+      }
+    }
+  }
+  return runes.join('')
+}
+function getReversedString(s: string): string {
+  const rune: string[] = Array.from(s)
+  const n = rune.length
+  for (let i = 0; i < Math.floor(n / 2); i++) {
+    ;[rune[i], rune[n - 1 - i]] = [rune[n - 1 - i], rune[i]]
+  }
+  return rune.join('')
+}
+function removeMoreThanTwoRepeatingChars(s: string): string {
+  let prevPrev: string = ''
+  let prev: string = ''
+  const runes: string[] = Array.from(s)
+  for (let i = 0; i < runes.length; i++) {
+    const r = runes[i]
+    if (r === prev && r === prevPrev) {
+      runes.splice(i, 1)
+      i--
+    }
+    prevPrev = prev
+    prev = r
+  }
+  return runes.join('')
+}
+function getLength(password: string): number {
+  password = removeMoreThanTwoRepeatingChars(password)
+  password = removeMoreThanTwoFromSequence(password, seqNums)
+  password = removeMoreThanTwoFromSequence(password, seqKeyboard0)
+  password = removeMoreThanTwoFromSequence(password, seqKeyboard1)
+  password = removeMoreThanTwoFromSequence(password, seqKeyboard2)
+  password = removeMoreThanTwoFromSequence(password, seqAlphabet)
+  password = removeMoreThanTwoFromSequence(password, getReversedString(seqNums))
+  password = removeMoreThanTwoFromSequence(
+    password,
+    getReversedString(seqKeyboard0),
+  )
+  password = removeMoreThanTwoFromSequence(
+    password,
+    getReversedString(seqKeyboard1),
+  )
+  password = removeMoreThanTwoFromSequence(
+    password,
+    getReversedString(seqKeyboard2),
+  )
+  password = removeMoreThanTwoFromSequence(
+    password,
+    getReversedString(seqAlphabet),
+  )
+  return password.length
+}
+export function getEntropy(password: string): number {
+  return getEntropyInternal(password)
+}
+function getEntropyInternal(password: string): number {
+  const base = getBase(password)
+  const length = getLength(password)
+  // calculate log2(base^length)
+  return logPow(base, length, 2)
+}
+function logX(base: number, n: number): number {
+  if (base == 0) {
+    return 0
+  } else {
+    return Math.log2(n) / Math.log2(base)
+  }
+}
+function logPow(expBase: number, pow: number, logBase: number): number {
+  let total = 0
+  for (let i = 0; i < pow; i++) {
+    total += logX(logBase, expBase)
+  }
+  return total
+}
+
+export function validatePassword(password: string, minEntropy: number): string {
+  const entropy: number = getEntropy(password)
+  if (entropy >= minEntropy) {
+    return ''
+  }
+
+  let hasReplace: boolean = false
+  let hasSep: boolean = false
+  let hasOtherSpecial: boolean = false
+  let hasLower: boolean = false
+  let hasUpper: boolean = false
+  let hasDigits: boolean = false
+
+  for (const c of password) {
+    switch (true) {
+      case replaceChars.includes(c):
+        hasReplace = true
+        break
+      case sepChars.includes(c):
+        hasSep = true
+        break
+      case otherSpecialChars.includes(c):
+        hasOtherSpecial = true
+        break
+      case lowerChars.includes(c):
+        hasLower = true
+        break
+      case upperChars.includes(c):
+        hasUpper = true
+        break
+      case digitsChars.includes(c):
+        hasDigits = true
+        break
+    }
+  }
+
+  const allMessages: string[] = []
+
+  if (!hasOtherSpecial || !hasSep || !hasReplace) {
+    allMessages.push('including more special characters')
+  }
+  if (!hasLower) {
+    allMessages.push('using lowercase letters')
+  }
+  if (!hasUpper) {
+    allMessages.push('using uppercase letters')
+  }
+  if (!hasDigits) {
+    allMessages.push('using numbers')
+  }
+
+  if (allMessages.length > 0) {
+    const errorMessage: string = `Weak password, try ${allMessages.join(
+      ', ',
+    )} or using a longer password`
+    return errorMessage
+  }
+
+  return 'Weak password, try using a longer password'
+}

package/helpers/localStorage.ts

@@ -0,0 +1,15 @@
+const keys = {
+  // Keep this name.
+  authToken: 'token',
+}
+
+export class LocalStorage {
+  // Auth token.
+  getAuthToken = () => window.localStorage.getItem(keys.authToken)
+
+  setAuthToken = (value: string) => window.localStorage.setItem(keys.authToken, value)
+
+  removeAuthToken = () => window.localStorage.removeItem(keys.authToken)
+}
+
+export const localStorage = new LocalStorage()

package/helpers/request.ts

@@ -0,0 +1,47 @@
+import 'whatwg-fetch'
+
+type RequestParams = Record<string, unknown>
+
+export type RequestOptions = RequestInit & {
+  params?: RequestParams
+}
+
+const serializeParams = (params: RequestParams | null) => {
+  if (!params) return null
+
+  const searchParams = new URLSearchParams()
+
+  Object.entries(params).map((param) => {
+    const [key, value] = param
+    searchParams.append(key, String(value))
+  })
+
+  return searchParams.toString()
+}
+
+const createUrl = (path: string, params: RequestParams | null) => {
+  const serializedParams = serializeParams(params)
+  const queryString = serializedParams ? `?${serializedParams}` : ''
+  return `${path}${queryString}`
+}
+
+export const request = async (path: string, options?: RequestOptions) => {
+  const { params = null, ...requestInit } = options ?? {}
+
+  const url = createUrl(path, params)
+
+  try {
+    return await window.fetch(url, {
+      ...requestInit,
+      headers: {
+        'Content-Type': 'application/json',
+        ...requestInit?.headers,
+      },
+    })
+  } catch (e) {
+    return new Response(null, {
+      status: 500,
+      statusText: `Unknown error`,
+    })
+  }
+}

package/hooks/useWindowDimensions.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+export const useWindowDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = useState(window.innerWidth)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowDimensions(window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return windowDimensions
+}

package/icons/ArrowDropDown/index.tsx

@@ -0,0 +1,29 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+
+type Props = {
+  className?: string
+}
+
+export const ArrowDropDownIcon = (props: Props) => {
+  return (
+    <svg
+      className={props.className}
+      viewBox="0 0 8 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        // eslint-disable-next-line max-len
+        d="M7.8515 0.898419C7.75261 0.799446 7.63538 0.75 7.49994 0.75H0.500038C0.364534 0.75 0.247392 0.799446 0.148419 0.898419C0.0494455 0.997501 0 1.11464 0 1.25006C0 1.38546 0.0494455 1.5026 0.148419 1.6016L3.64838 5.10156C3.74746 5.20054 3.86461 5.25009 4 5.25009C4.13539 5.25009 4.25265 5.20054 4.35154 5.10156L7.8515 1.60157C7.95036 1.5026 8 1.38546 8 1.25004C8 1.11464 7.95036 0.997501 7.8515 0.898419Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/icons/Circle/index.tsx

@@ -0,0 +1,27 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+
+type Props = {
+  className?: string
+}
+
+export const CircleIcon = (props: Props) => {
+  const { className } = props
+
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 10 10"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="5" cy="5" r="5" fill="currentColor"></circle>
+    </svg>
+  )
+}

package/icons/External/index.tsx

@@ -0,0 +1,14 @@
+export const ExternalIcon = ({ className }: { className: string }) => (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fill="#551A8B"
+      d="M18,10.82a1,1,0,0,0-1,1V19a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V8A1,1,0,0,1,5,7h7.18a1,1,0,0,0,0-2H5A3,3,0,0,0,2,8V19a3,3,0,0,0,3,3H16a3,3,0,0,0,3-3V11.82A1,1,0,0,0,18,10.82Zm3.92-8.2a1,1,0,0,0-.54-.54A1,1,0,0,0,21,2H15a1,1,0,0,0,0,2h3.59L8.29,14.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L20,5.41V9a1,1,0,0,0,2,0V3A1,1,0,0,0,21.92,2.62Z"
+    />
+  </svg>
+)

package/icons/Info/index.tsx

@@ -0,0 +1,12 @@
+export const InfoIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 12 12"
+    className={className}
+  >
+    <g fill="currentColor" fillRule="nonzero">
+      <path d="M6 0C2.692 0 0 2.692 0 6s2.692 6 6 6 6-2.692 6-6-2.692-6-6-6Zm0 10.91A4.915 4.915 0 0 1 1.09 6 4.915 4.915 0 0 1 6 1.09 4.915 4.915 0 0 1 10.91 6 4.915 4.915 0 0 1 6 10.91Z" />
+      <path d="M6 2.545A.728.728 0 0 0 6 4a.728.728 0 0 0 0-1.455ZM6 5.09a.545.545 0 0 0-.545.546V8.91a.545.545 0 0 0 1.09 0V5.636A.545.545 0 0 0 6 5.091Z" />
+    </g>
+  </svg>
+)

package/icons/Renewable/index.tsx

@@ -0,0 +1,65 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+
+type Props = {
+  className?: string
+}
+
+export const RenewableIcon = React.forwardRef<SVGSVGElement, Props>(
+  (props, ref) => {
+    const { className, ...hiddenProps } = props
+    return (
+      <svg
+        {...hiddenProps}
+        ref={ref}
+        className={className}
+        viewBox="0 0 10 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.14337 0L8.19809 2.9755L4.59387 3.26718L5.16139 2.07055C4.22847 2.10806 3.3161 2.48386 2.66614 3.18795L2.20594 2.76312C3.05679 1.84141 4.26977 1.40592 5.45883 1.44339L6.14337 0Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.7343 9.13905L6.12728 9.39371L7.71025 6.14261L8.45158 7.24009C8.89401 6.4179 9.03479 5.44126 8.75942 4.52346L9.35931 4.34347C9.71979 5.54495 9.47743 6.81074 8.8401 7.81527L9.7343 9.13905Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 7.57495L1.61898 4.34163L3.60962 7.36037L2.28757 7.43896C2.76953 8.23862 3.53811 8.85742 4.46813 9.08819L4.3173 9.69607C3.09983 9.39397 2.13422 8.54041 1.59468 7.48015L0 7.57495Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.26612 2.51078C5.07868 2.17637 3.73747 2.48899 2.89616 3.40036L1.97575 2.55072C3.17071 1.25624 5.01514 0.857134 6.60567 1.30506L6.26612 2.51078Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.33938 8.11969C8.34588 7.28131 8.83847 5.87691 8.45939 4.61345L9.65917 4.25348C10.1969 6.04581 9.49312 7.95595 8.14107 9.08215L7.33938 8.11969Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.07072 5.82736C2.20416 7.20026 3.19328 8.44922 4.54348 8.78425L4.24181 10C2.32911 9.5254 1.00387 7.79934 0.823976 5.94853L2.07072 5.82736Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  },
+)

package/icons/Shield/index.tsx

@@ -0,0 +1,33 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+
+type Props = {
+  className?: string
+}
+
+export const ShieldIcon = React.forwardRef<SVGSVGElement, Props>(
+  (props, ref) => {
+    const { className, ...hiddenProps } = props
+    return (
+      <svg
+        {...hiddenProps}
+        ref={ref}
+        className={className}
+        viewBox="0 0 8 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.00195 0L0.251953 1.66667V4.16667C0.251953 6.47917 1.85195 8.64167 4.00195 9.16667C6.15195 8.64167 7.75195 6.47917 7.75195 4.16667V1.66667L4.00195 0ZM3.16862 6.66667L1.50195 5L2.08945 4.4125L3.16862 5.4875L5.91445 2.74167L6.50195 3.33333L3.16862 6.66667Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  },
+)

package/icons/Warning/index.tsx

@@ -0,0 +1,29 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+
+type Props = {
+  className?: string
+}
+
+export const WarningIcon = (props: Props) => {
+  return (
+    <svg
+      className={props.className}
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        // eslint-disable-next-line max-len
+        d="M9.79222 7.49885L6.2597 1.00518C5.69214 0.04969 4.30861 0.0484205 3.74029 1.00518L0.207947 7.49885C-0.372248 8.4752 0.330193 9.71157 1.46736 9.71157H8.53251C9.66873 9.71157 10.3724 8.47619 9.79222 7.49885ZM5 8.53969C4.67699 8.53969 4.41406 8.27676 4.41406 7.95375C4.41406 7.63074 4.67699 7.36782 5 7.36782C5.323 7.36782 5.58593 7.63074 5.58593 7.95375C5.58593 8.27676 5.323 8.53969 5 8.53969ZM5.58593 6.19594C5.58593 6.51895 5.323 6.78188 5 6.78188C4.67699 6.78188 4.41406 6.51895 4.41406 6.19594V3.26625C4.41406 2.94324 4.67699 2.68032 5 2.68032C5.323 2.68032 5.58593 2.94324 5.58593 3.26625V6.19594Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/meta.json

@@ -0,0 +1 @@
+{"buildDate":1634829055606}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@postgres.ai/shared",
+  "version": "3.5.1-pr-1027.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/core": "^7.13.0",
+    "@craco/craco": "^7.0.0-alpha.7",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@material-ui/styles": "^4.11.4",
+    "@monaco-editor/react": "^4.4.5",
+    "@mui/material": "^5.10.12",
+    "@types/node": "^12.20.33",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.10",
+    "@types/react-router": "^5.1.17",
+    "@types/react-router-dom": "^5.3.1",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "classnames": "^2.3.1",
+    "clsx": "^1.1.1",
+    "copy-to-clipboard": "^3.3.1",
+    "create-file-webpack": "^1.0.2",
+    "crypto-browserify": "^3.12.0",
+    "date-fns": "^2.22.1",
+    "formik": "^2.2.9",
+    "get-user-locale": "^1.4.0",
+    "mobx": "^6.3.5",
+    "mobx-react-lite": "^3.2.1",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-countdown-hook": "^1.1.0",
+    "react-scripts": "^5.0.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "stream-browserify": "^3.0.0",
+    "typescript": "^4.8.3",
+    "use-timer": "^2.0.1",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "glob": "^11.0.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-assets.js",
+    "pack": "node scripts/pack.js"
+  }
+}

package/pages/Clone/Status/index.tsx

@@ -0,0 +1,73 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+import { makeStyles } from '@material-ui/core'
+import clsx from 'clsx'
+
+import {
+  CloneDto,
+  formatCloneDto,
+} from '@postgres.ai/shared/types/api/entities/clone'
+import { Status as StatusBase } from '@postgres.ai/shared/components/Status'
+import { FormattedText } from '@postgres.ai/shared/components/FormattedText'
+import {
+  getCloneStatusType,
+  getCloneStatusText,
+} from '@postgres.ai/shared/utils/clone'
+
+type Props = {
+  rawClone: CloneDto
+  className?: string
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      marginTop: '2px',
+    },
+    status: {
+      fontWeight: 500,
+    },
+    message: {
+      margin: '4px 0 0 0',
+    },
+    errorMessage: {
+      marginTop: '8px',
+    },
+  },
+  { index: 1 },
+)
+
+export const Status = React.memo((props: Props) => {
+  const { rawClone, className } = props
+
+  const classes = useStyles()
+
+  const clone = formatCloneDto(rawClone)
+
+  const { code, message } = clone.status
+
+  const statusType = getCloneStatusType(code)
+  const statusText = getCloneStatusText(code)
+
+  const isError = statusType === 'error'
+
+  return (
+    <div className={clsx(classes.root, className)}>
+      <StatusBase type={statusType} className={classes.status}>
+        {statusText}
+      </StatusBase>
+
+      {!isError && <p className={classes.message}>{message}</p>}
+
+      {isError && (
+        <FormattedText value={message} className={classes.errorMessage} />
+      )}
+    </div>
+  )
+})

package/pages/Clone/context.ts

@@ -0,0 +1,22 @@
+import { createStrictContext } from '@postgres.ai/shared/utils/react'
+
+import { Api } from './stores/Main'
+import { Stores } from './useCreatedStores'
+
+export type Host = {
+  instanceId: string
+  cloneId: string
+  routes: {
+    instance: () => string
+  }
+  api: Api
+  elements: {
+    breadcrumbs: React.ReactNode
+  }
+}
+
+export const { useStrictContext: useHost, Provider: HostProvider } =
+  createStrictContext<Host>()
+
+export const { useStrictContext: useStores, Provider: StoresProvider } =
+  createStrictContext<Stores>()