@postgres.ai/shared 3.5.1-pr-1027.0

package/components/SectionTitle/index.tsx

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

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

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

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

@@ -0,0 +1,16 @@
+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/Spinner/styles.module.scss

@@ -0,0 +1,33 @@
+@import '@postgres.ai/shared/styles/vars';
+
+@keyframes rotation {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.root {
+  color: $color-orange;
+
+  animation: rotation ease-in-out .5s infinite;
+
+  // Sizes.
+  &.sm {
+    height: 16px;
+    width: 16px;
+  }
+
+  &.md {
+    height: 24px;
+    width: 24px;
+  }
+
+  &.lg {
+    height: 32px;
+    width: 32px;
+  }
+}

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/Status/styles.module.scss

@@ -0,0 +1,45 @@
+/*--------------------------------------------------------------------------
+ * 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 '@postgres.ai/shared/styles/vars';
+
+.root {
+  &.ok {
+    color: $color-status-ok;
+  }
+
+  &.warning {
+    color: $color-status-warning;
+  }
+
+  &.error {
+    color: $color-status-error;
+  }
+
+  &.waiting {
+    color: $color-status-waiting;
+  }
+
+  &.unknown {
+    color: $color-status-unknown;
+  }
+}
+
+.iconContainer {
+  display: inline-block;
+  margin-right: 0.5em;
+  width: 0.8em;
+  position: relative;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

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/StubSpinnerFlex/styles.module.scss

@@ -0,0 +1,20 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  background: $color-white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  &.absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &.flex {
+    flex: 1 1 100%;
+  }
+}

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