@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028.1

package/components/SectionTitle/index.tsx

@@ -1,74 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { DefaultTheme, makeStyles } from '@material-ui/styles'
-import clsx from 'clsx'
-
-import { colors } from '@postgres.ai/shared/styles/colors'
-
-type Props = {
-  level: 1 | 2
-  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  text: React.ReactNode
-  className?: string
-  rightContent?: React.ReactNode
-  children?: React.ReactNode
-  contentClassName?: string
-}
-
-const LEVEL_TO_FONT_SIZE = {
-  1: '16px',
-  2: '14px',
-}
-
-const LEVEL_TO_BOTTOM_PADDING = {
-  1: '16px',
-  2: '8px',
-}
-
-const useStyles = makeStyles<DefaultTheme, { level: Props['level'] }>(
-  {
-    root: {
-      borderBottom: `1px solid ${colors.consoleStroke}`,
-    },
-    content: (props) => ({
-      display: 'flex',
-      alignItems: 'center',
-      paddingBottom: LEVEL_TO_BOTTOM_PADDING[props.level],
-    }),
-    text: (props) => ({
-      margin: '0 10px 0 0',
-      fontSize: LEVEL_TO_FONT_SIZE[props.level],
-    }),
-  },
-  { index: 1 },
-)
-
-export const SectionTitle = (props: Props) => {
-  const {
-    text,
-    tag: Tag,
-    level,
-    rightContent,
-    children,
-    className,
-    contentClassName,
-  } = props
-
-  const classes = useStyles({ level })
-
-  return (
-    <div className={clsx(classes.root, className)}>
-      <div className={clsx(classes.content, contentClassName)}>
-        <Tag className={classes.text}>{text}</Tag>
-        {rightContent}
-      </div>
-      {children}
-    </div>
-  )
-}

package/components/Select/index.tsx

@@ -1,42 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { MenuItem } from '@material-ui/core'
-
-import { TextField, TextFieldProps } from '@postgres.ai/shared/components/TextField'
-
-type Value = string | number
-
-type Props = {
-  items: {
-    value: Value
-    children: React.ReactNode
-  }[]
-  value: Value | null
-  onChange: TextFieldProps['onChange']
-  className?: TextFieldProps['className']
-  label: TextFieldProps['label']
-  fullWidth?: TextFieldProps['fullWidth']
-  disabled?: TextFieldProps['disabled']
-  error?: boolean
-}
-
-export const Select = (props: Props) => {
-  const { items, ...textFieldProps } = props
-  return (
-    <TextField select {...textFieldProps}>
-      {items.map((item, i) => {
-        return (
-          <MenuItem value={item.value} key={`${item.value}-${i}`}>
-            {item.children}
-          </MenuItem>
-        )
-      })}
-    </TextField>
-  )
-}

package/components/SimpleModalControls/index.tsx

@@ -1,56 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { Button } from '@postgres.ai/shared/components/Button'
-
-type Props = {
-  items: {
-    text: string
-    variant?: 'primary' | 'secondary'
-    onClick: () => void
-    isDisabled?: boolean
-  }[]
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      marginTop: '16px',
-    },
-    button: {
-      marginLeft: '8px',
-    },
-  },
-  { index: 1 },
-)
-
-export const SimpleModalControls = (props: Props) => {
-  const classes = useStyles()
-
-  return (
-    <div className={classes.root}>
-      {props.items.map((item) => {
-        return (
-          <Button
-            key={item.text}
-            className={classes.button}
-            onClick={item.onClick}
-            variant={item.variant}
-            isDisabled={item.isDisabled}
-          >
-            {item.text}
-          </Button>
-        )
-      })}
-    </div>
-  )
-}

package/components/Spinner/icon.tsx

@@ -1,29 +0,0 @@
-export const SpinnerIcon = ({ className }: { className: string }) => (
-  <svg
-    width="144px"
-    height="144px"
-    viewBox="0 0 144 144"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    className={className}
-  >
-    <title>Oval</title>
-    <g
-      id="Page-1"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
-      strokeDasharray="100.5309677124023"
-      strokeLinecap="round"
-    >
-      <path
-        d="M72,136 C107.346224,136 136,107.346224 136,72 C136,36.653776 107.346224,8 72,8 C36.653776,8 8,36.653776 8,72 C8,107.346224 36.653776,136 72,136 Z"
-        id="Oval"
-        stroke="currentColor"
-        strokeWidth="16"
-      ></path>
-    </g>
-  </svg>
-)

package/components/Spinner/index.tsx

@@ -1,16 +0,0 @@
-import cn from 'classnames'
-import { SpinnerIcon } from './icon'
-
-import styles from './styles.module.scss'
-
-export type Size = 'sm' | 'md' | 'lg'
-
-export type Props = {
-  size?: Size
-  className?: string
-}
-
-export const Spinner = (props: Props) => {
-  const { size = 'md' } = props
-  return <SpinnerIcon className={cn(styles.root, styles[size], props.className)} />
-}

package/components/Status/index.tsx

@@ -1,61 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 clsx from 'clsx'
-
-import { WarningIcon } from '@postgres.ai/shared/icons/Warning'
-import { CircleIcon } from '@postgres.ai/shared/icons/Circle'
-
-import styles from './styles.module.scss'
-
-type Type = 'ok' | 'warning' | 'error' | 'waiting' | 'unknown'
-
-export type Props = {
-  type?: Type
-  children?: React.ReactNode
-  icon?: React.ReactNode
-  className?: string
-  classNameIcon?: string
-  disableColor?: boolean
-}
-
-const TYPE_TO_ICON = {
-  ok: <CircleIcon className={styles.icon} />,
-  warning: <WarningIcon className={styles.icon} />,
-  error: <WarningIcon className={styles.icon} />,
-  waiting: <CircleIcon className={styles.icon} />,
-  unknown: <CircleIcon className={styles.icon} />,
-}
-
-export const Status = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const {
-    type = 'ok',
-    children = type,
-    icon = TYPE_TO_ICON[type],
-    className,
-    classNameIcon,
-    disableColor,
-    ...hiddenProps
-  } = props
-
-  return (
-    <span
-      {...hiddenProps}
-      className={clsx(styles.root, !disableColor && styles[type], className)}
-      ref={ref}
-    >
-      {icon && (
-        <span className={clsx(styles.iconContainer, classNameIcon)}>
-          {icon}
-          &thinsp;
-        </span>
-      )}
-      {children}
-    </span>
-  )
-})

package/components/StubContainer/index.tsx

@@ -1,41 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 Box from '@mui/material/Box'
-import clsx from 'clsx'
-
-const useStyles = makeStyles(
-  {
-    root: {
-      padding: '20px 0',
-      flex: '1 1 100%',
-    },
-  },
-  { index: 1 },
-)
-
-type Props = {
-  className?: string
-  children: React.ReactNode
-}
-
-export const StubContainer = (props: Props) => {
-  const classes = useStyles()
-
-  return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      className={clsx(classes.root, props.className)}
-    >
-      {props.children}
-    </Box>
-  )
-}

package/components/StubSpinner/index.tsx

@@ -1,49 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
-
-import {
-  Spinner,
-  Props as SpinnerProps,
-} from '@postgres.ai/shared/components/Spinner'
-
-import { colors } from '@postgres.ai/shared/styles/colors'
-
-type Props = {
-  className?: string
-  size?: SpinnerProps['size']
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      height: '100%',
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: colors.white,
-    },
-  },
-  { index: 1 },
-)
-
-export const StubSpinner = (props: Props) => {
-  const { className, size = 'lg' } = props
-  const classes = useStyles()
-
-  return (
-    <div className={clsx(classes.root, className)}>
-      <Spinner size={size} />
-    </div>
-  )
-}

package/components/StubSpinnerFlex/index.tsx

@@ -1,20 +0,0 @@
-import cn from 'classnames'
-
-import { Spinner, Size } from '@postgres.ai/shared/components/Spinner'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  mode?: 'absolute' | 'flex'
-  size?: Size
-  className?: string
-}
-
-export const StubSpinner = (props: Props) => {
-  const { mode = 'flex', size = 'lg' } = props
-  return (
-    <div className={cn(styles.root, props.className, styles[mode])}>
-      <Spinner size={size} />
-    </div>
-  )
-}

package/components/SyntaxHighlight/index.tsx

@@ -1,107 +0,0 @@
-import copyToClipboard from 'copy-to-clipboard'
-import { makeStyles, IconButton } from '@material-ui/core'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
-
-import { icons } from '@postgres.ai/shared/styles/icons'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-
-const useStyles = makeStyles(
-  {
-    copyFieldContainer: {
-      position: 'relative',
-      display: 'inline-flex',
-      maxWidth: '100%',
-      width: '100%',
-      margin: "12px 0",
-      backgroundColor: 'rgb(250, 250, 250)',
-
-      '& code': {
-        whiteSpace: 'inherit !important',
-      },
-    },
-    copyButton: {
-      top: 6,
-      position: 'sticky',
-      right: 6,
-      zIndex: 10,
-      width: 26,
-      height: 26,
-      padding: 8,
-      backgroundColor: 'rgba(128, 128, 128, 0.15)',
-      transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
-
-      '&:hover': {
-        backgroundColor: 'rgba(128, 128, 128, 0.25)',
-      },
-    },
-  },
-  { index: 1 },
-)
-
-export const SyntaxHighlight = ({
-  content,
-  wrapLines,
-  id,
-  style,
-}: {
-  content: string
-  wrapLines?: boolean
-  id?: string
-  style?: React.CSSProperties
-}) => {
-  const classes = useStyles()
-
-  const copyContent = () => {
-    if (!content) {
-      const codeTag = document.getElementById(id as string)
-      if (codeTag) {
-        copyToClipboard(codeTag.innerText)
-      }
-      return
-    }
-
-    copyToClipboard(content.replace(/^\s*[\r\n]/gm, ''))
-  }
-
-  const fontSize = style ? '12px' : '14px'
-
-  return (
-    <div className={classes.copyFieldContainer} style={style}>
-      <SyntaxHighlighter
-        id={id}
-        language="bash"
-        wrapLines={wrapLines}
-        style={oneLight}
-        customStyle={{
-          borderRadius: 4,
-          fontSize: fontSize,
-          margin: 0,
-          border: 0,
-          flexGrow: 1,
-          height: '100%',
-        }}
-        codeTagProps={{
-          style: {
-            fontSize: fontSize,
-          },
-        }}
-        lineProps={{
-          style: {
-            display: 'flex',
-            fontSize: fontSize,
-          },
-        }}
-      >
-        {content}
-      </SyntaxHighlighter>
-      <IconButton
-        className={classes.copyButton}
-        aria-label="Copy"
-        onClick={copyContent}
-      >
-        <Tooltip content={'Copy'}>{icons.copyIcon}</Tooltip>
-      </IconButton>
-    </div>
-  )
-}

package/components/Table/RowMenu/index.tsx

@@ -1,111 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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, { useState } from 'react'
-import { Menu, MenuItem, IconButton, makeStyles } from '@material-ui/core'
-import { MoreVert } from '@material-ui/icons'
-import clsx from 'clsx'
-
-import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex'
-
-const DIRECTION_TO_ORIGIN = {
-  left: 'right',
-  right: 'left',
-} as const
-
-type Action = {
-  name: string
-  onClick: () => void
-  isDisabled?: boolean
-}
-
-export type Props = {
-  actions: Action[]
-  isDisabled?: boolean
-  isLoading?: boolean
-  direction?: 'left' | 'right'
-}
-
-const useStyles = makeStyles(
-  {
-    button: {
-      '&:disabled': {
-        cursor: 'not-allowed',
-        pointerEvents: 'all',
-      },
-    },
-    spinner: {
-      background: 'transparent',
-    },
-    hiddenIcon: {
-      visibility: 'hidden',
-    },
-  },
-  { index: 1 },
-)
-
-export const RowMenu = (props: Props) => {
-  const {
-    actions,
-    isDisabled = false,
-    isLoading = false,
-    direction = 'right',
-  } = props
-  const classes = useStyles()
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-
-  const isOpen = Boolean(anchorEl)
-
-  const openMenu: React.MouseEventHandler<HTMLButtonElement> = (e) =>
-    setAnchorEl(e.currentTarget)
-
-  const closeMenu = () => setAnchorEl(null)
-
-  return (
-    <>
-      <IconButton
-        onClick={openMenu}
-        disabled={isDisabled || isLoading}
-        className={classes.button}
-      >
-        <MoreVert className={clsx(isLoading && classes.hiddenIcon)} />
-        {isLoading && (
-          <StubSpinner size="sm" mode="absolute" className={classes.spinner} />
-        )}
-      </IconButton>
-      <Menu
-        anchorOrigin={{
-          vertical: 'top',
-          horizontal: DIRECTION_TO_ORIGIN[direction],
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: DIRECTION_TO_ORIGIN[direction],
-        }}
-        anchorEl={anchorEl}
-        keepMounted
-        open={isOpen}
-        onClose={closeMenu}
-      >
-        {actions.map((action, i) => {
-          return (
-            <MenuItem
-              key={i}
-              onClick={() => {
-                closeMenu()
-                action.onClick()
-              }}
-              disabled={action.isDisabled}
-            >
-              {action.name}
-            </MenuItem>
-          )
-        })}
-      </Menu>
-    </>
-  )
-}