@postgres.ai/shared 4.1.3 → 4.2.0-pr-1200

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>
-    </>
-  )
-}

package/components/Table/index.tsx

@@ -1,140 +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 {
-  Table as TableBase,
-  TableProps as TableBaseProps,
-  TableHead,
-  TableRow,
-  TableCell as TableCellBase,
-  TableCellProps as TableCellBaseProps,
-  TableBody,
-  makeStyles,
-} from '@material-ui/core'
-import clsx from 'clsx'
-
-import { colors } from '@postgres.ai/shared/styles/colors'
-
-import { RowMenu, Props as RowMenuProps } from './RowMenu'
-
-const cellStyles = {
-  paddingLeft: '8px',
-  paddingRight: '8px',
-  borderColor: colors.consoleStroke,
-}
-
-// Table.
-type TableProps = TableBaseProps
-
-const useTableStyles = makeStyles(
-  {
-    root: {
-      whiteSpace: 'nowrap',
-
-      '& .MuiTableCell-root': {
-        lineHeight: 'normal',
-      },
-    },
-  },
-  { index: 1 },
-)
-
-const Table = (props: TableProps) => {
-  const classes = useTableStyles()
-  return (
-    <TableBase {...props} className={clsx(props.className, classes.root)} />
-  )
-}
-
-// TableHeaderCell.
-type TableHeaderCellProps = TableCellBaseProps
-
-const useTableHeaderCellStyles = makeStyles(
-  {
-    root: {
-      ...cellStyles,
-      color: colors.pgaiDarkGray,
-      paddingTop: '12px',
-      paddingBottom: '12px',
-    },
-  },
-  { index: 1 },
-)
-
-const TableHeaderCell = (props: TableHeaderCellProps) => {
-  const classes = useTableHeaderCellStyles()
-
-  return (
-    <TableCellBase {...props} className={clsx(props.className, classes.root)} />
-  )
-}
-
-// TableBodyCell.
-type TableBodyCellProps = TableCellBaseProps
-
-const useTableBodyCellStyles = makeStyles(
-  {
-    root: {
-      ...cellStyles,
-      fontSize: '12px',
-      paddingTop: '8px',
-      paddingBottom: '8px',
-    },
-  },
-  { index: 1 },
-)
-
-const TableBodyCell = (props: TableBodyCellProps) => {
-  const classes = useTableBodyCellStyles()
-
-  return (
-    <TableCellBase {...props} className={clsx(props.className, classes.root)} />
-  )
-}
-
-// TableBodyCellMenu.
-type TableBodyCellMenuProps = TableBodyCellProps & RowMenuProps
-
-const useTableBodyCellMenuStyles = makeStyles(
-  {
-    root: {
-      padding: 0,
-    },
-  },
-  { index: 1 },
-)
-
-const TableBodyCellMenu = (props: TableBodyCellMenuProps) => {
-  const classes = useTableBodyCellMenuStyles()
-
-  const { isLoading, isDisabled, children, ...hiddenProps } = props
-
-  const handleClick: React.MouseEventHandler<HTMLTableDataCellElement> = (e) =>
-    e.stopPropagation()
-
-  return (
-    <TableBodyCell
-      {...hiddenProps}
-      className={classes.root}
-      onClick={handleClick}
-    >
-      <RowMenu {...hiddenProps} isLoading={isLoading} isDisabled={isDisabled} />
-      {children}
-    </TableBodyCell>
-  )
-}
-
-export {
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeaderCell,
-  TableBodyCell,
-  TableBodyCellMenu,
-}

package/components/Text/index.tsx

@@ -1,28 +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'
-
-type Props = {
-  children: React.ReactNode
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      margin: 0,
-    },
-  },
-  { index: 1 },
-)
-
-export const Text = (props: Props) => {
-  const classes = useStyles()
-
-  return <p className={classes.root}>{props.children}</p>
-}