@postgres.ai/shared 4.0.4 → 4.1.0

package/components/Status/index.tsx

@@ -0,0 +1,61 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,41 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,49 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,111 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,140 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,28 @@
+/*--------------------------------------------------------------------------
+ * 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>
+}

package/components/TextField/index.tsx

@@ -0,0 +1,119 @@
+/*--------------------------------------------------------------------------
+ * 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 {
+  TextField as TextFieldBase,
+  makeStyles,
+  InputProps,
+  TextFieldProps as TextFieldPropsBase,
+} from '@material-ui/core'
+import clsx from 'clsx'
+
+export type TextFieldProps = {
+  label?: string
+  disabled?: boolean
+  defaultValue?: string
+  value?: TextFieldPropsBase['value']
+  className?: string
+  fullWidth?: boolean
+  autoFocus?: boolean
+  id?: TextFieldPropsBase['id']
+  multiline?: TextFieldPropsBase['multiline']
+  onKeyDown?: TextFieldPropsBase['onKeyDown']
+  onChange?: TextFieldPropsBase['onChange']
+  InputProps?: InputProps
+  InputLabelProps?: TextFieldPropsBase['InputLabelProps']
+  children?: TextFieldPropsBase['children']
+  select?: TextFieldPropsBase['select']
+  type?: 'text' | 'password'
+  error?: boolean
+  placeholder?: string
+  onBlur?: TextFieldPropsBase['onBlur']
+  onFocus?: TextFieldPropsBase['onFocus']
+  name?: TextFieldPropsBase['name']
+  helperText?: TextFieldPropsBase['helperText']
+  style?: React.CSSProperties
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      fontSize: '14px',
+    },
+    selectIcon: {
+      fontSize: '24px',
+    },
+    inputRoot: {
+      padding: 0,
+    },
+    input: {
+      padding: '8px',
+    },
+    helperText: {
+      fontSize: 12
+    }
+  },
+  { index: 1 },
+)
+
+export const TextField = (props: TextFieldProps) => {
+  const classes = useStyles()
+
+  return (
+    <TextFieldBase
+      onKeyDown={props.onKeyDown}
+      autoFocus={props.autoFocus}
+      id={props.id}
+      multiline={props.multiline}
+      label={props.label}
+      variant="outlined"
+      disabled={props.disabled}
+      className={clsx(classes.root, props.className)}
+      defaultValue={props.defaultValue}
+      value={props.value}
+      margin="normal"
+      fullWidth={props.fullWidth}
+      classes={{ }}
+      InputProps={{
+        ...props.InputProps,
+
+        classes: {
+          root: classes.inputRoot,
+          input: classes.input,
+          ...props.InputProps?.classes,
+        },
+      }}
+      SelectProps={{
+        classes: {
+          icon: classes.selectIcon,
+        },
+      }}
+      InputLabelProps={{
+        shrink: true,
+
+        ...props.InputLabelProps,
+      }}
+      FormHelperTextProps={{
+        classes: {
+          root: classes.helperText
+        }
+      }}
+      onChange={props.onChange}
+      children={props.children}
+      select={props.select}
+      type={props.type}
+      error={props.error}
+      placeholder={props.placeholder}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
+      name={props.name}
+      helperText={props.helperText}
+      style={props.style}
+    />
+  )
+}