@pareto-engineering/design-system 5.3.0 → 5.4.0

package/src/ui/f/fields/FileUpload/common/Preview/Preview.jsx

@@ -1,198 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { LoadingCircle, ProgressBar, Tooltip } from 'ui/a'
-
-// Local Definitions
-
-import './styles.scss'
-
-import { Button } from 'ui/b'
-
-import { getFileType, getFileTypeFromUrl } from '../../utils'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'file-preview'
-
-const statusColorMap = {
-  pending:'yellow',
-  error  :'red',
-  success:'green',
-}
-
-const FILE_UPLOAD_COMPLETE_PROGRESS = 100
-
-/**
- * This is the component description.
- */
-const Preview = ({
-  id,
-  className:userClassName,
-  style,
-  file,
-  handleDelete,
-  uploadStatus,
-  color,
-  uploadProgress,
-  writeOnly,
-  // ...otherProps
-}) => {
-  const isFileObject = file instanceof File
-  const type = isFileObject ? getFileType(file) : getFileTypeFromUrl(file?.url)
-
-  const statusColor = statusColorMap[uploadStatus] ?? color
-
-  const isPending = uploadStatus === 'pending'
-  // isPreview means the file is uploaded and previewed while other files can still be uploaded
-  const isSuccess = uploadStatus === 'success' || file?.isPreview
-
-  const handlePreview = () => {
-    if (!isFileObject) {
-      window.open(file.url, '_blank')
-    }
-  }
-
-  const canDelete = file?.isPreview || isFileObject
-
-  const isFileBroken = !writeOnly && !file?.url
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <div className="identity">
-        <span
-          className={
-            [
-              'type',
-              type.toLowerCase(),
-            ]
-              .filter((e) => e)
-              .join(' ')
-}
-        >
-          {type}
-        </span>
-        <span title={file.name} className="name">{file.name}</span>
-        {isFileBroken
-          ? (
-            <>
-              <Tooltip
-                description="bulk-updates-text"
-                content={(
-                  <p>
-                    This file doesn&apos;t have a link or the link is invalid.
-                  </p>
-                )}
-              >
-                <span className="icon x-ui-icons c-x">
-                  h
-                </span>
-              </Tooltip>
-              {
-                writeOnly && (
-                  <Button
-                    color="ui-icons"
-                    isCompact
-                    isSimple
-                    onClick={() => handleDelete()}
-                  >
-                    <span className="icon">{canDelete ? 'Y' : '9'}</span>
-                  </Button>
-                )
-              }
-            </>
-          )
-          : (
-            <Button
-              color="ui-icons"
-              isCompact
-              isSimple
-              onClick={() => (canDelete ? handleDelete() : handlePreview())}
-            >
-              <span className="icon">{canDelete ? 'Y' : '9'}</span>
-            </Button>
-          )}
-      </div>
-      {writeOnly && (
-        <div className={`progress-status x-${statusColor}`}>
-          <div className="status">
-            {isPending ? (
-              <LoadingCircle
-                className={`x-${statusColor}`}
-                heightWidth="1rem"
-                color={statusColor}
-              />
-            ) : (
-              <>
-                <span className="icon">
-                  {isSuccess ? 'I' : 'Y'}
-                </span>
-                <span>{isSuccess ? 'Uploaded' : 'Error'}</span>
-              </>
-            )}
-          </div>
-          <ProgressBar
-            color={statusColor}
-            progress={isPending ? uploadProgress : FILE_UPLOAD_COMPLETE_PROGRESS}
-            height="3px"
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-
-Preview.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The base color of the file preview
-   */
-  color:PropTypes.string,
-
-  /**
-   * The upload progress of the file
-   */
-  uploadProgress:PropTypes.number,
-
-  /**
-   * Whether the preview is used in a context where the user can upload new files
-   */
-  writeOnly:PropTypes.bool,
-}
-
-Preview.defaultProps = {
-  color         :'green',
-  uploadProgress:0,
-}
-
-export default Preview

package/src/ui/f/fields/FileUpload/common/Preview/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as Preview } from './Preview'

package/src/ui/f/fields/FileUpload/common/Preview/styles.scss

@@ -1,96 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-padding: 1rem;
-$default-margin: 1rem;
-$files-per-row: 3;
-$total-gaps: $files-per-row - 1;
-$combined-gap: calc(var(--gap) * $total-gaps);
-$width-without-gaps: calc(100% - $combined-gap);
-$default-file-width: calc($width-without-gaps / $files-per-row);
-
-.#{bem.$base}.file-preview {
-  border: var(--theme-default-border-style) var(--ui-lines);
-  border-radius: calc(var(--theme-default-border-radius) / 2);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--gap) / 4);
-  padding: $default-padding;
-  width: $default-file-width;
-
-  > .identity {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--gap) / 2);
-    justify-content: space-between;
-
-    > .type {
-      padding-block: calc($default-padding / 4);
-      padding-inline: calc($default-padding / 2);
-
-      // TODO: update the colors to use variables. These are colors from the new DS
-      &.pdf,
-      &.broken,
-      &.unknown {
-        background-color: #fdead7;
-        color: #b93814;
-      }
-
-      &.file {
-        background-color: #eef2f6;
-        color: #364151;
-      }
-
-      &.txt {
-        background-color: #d1dfff;
-        color: #004eeb;
-      }
-
-
-      &.vid {
-        background-color: #ebe9fe;
-        color: #5a25dc;
-      }
-
-      &.img {
-        background-color: #cbfbef;
-        color: #107569;
-      }
-
-      &.aud {
-        background-color: #fef7c3;
-        color: #a15c08;
-      }
-    }
-
-    > .name {
-      color: var(--on-x);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    > .#{bem.$base}.button {
-      margin-left: auto;
-    }
-  }
-
-  > .progress-status {
-    > .status {
-      align-items: center;
-      color: var(--x);
-      display: flex;
-      gap: calc(var(--gap) / 2);
-      margin-bottom: calc($default-margin / 4);
-
-      > .icon {
-        background-color: var(--x);
-        border-radius: 50%;
-        color: var(--on-x);
-        font-size: calc(var(--s-2) * 1rem);
-        padding: calc($default-padding / 4);
-      }
-    }
-  }
-}

package/src/ui/f/fields/FileUpload/common/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { Preview } from './Preview'

package/src/ui/f/fields/FileUpload/index.js

@@ -1,3 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as FileUpload } from './FileUpload'
-export { fileUploadOptions, getFileType, getFileTypeFromUrl } from './utils'

package/src/ui/f/fields/FileUpload/styles.scss

@@ -1,73 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-padding: 1rem;
-$default-margin: 1rem;
-
-.#{bem.$base}.file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap);
-
-
-  > p {
-    color: var(--y);
-    margin: 0;
-  }
-
-  > .#{bem.$base}.description {
-    height: auto;
-  }
-
-  > .#{bem.$base}.form-label {
-    align-items: center;
-    border: var(--theme-default-border-style) var(--ui-lines);
-    border-radius: calc(var(--theme-default-border-radius) / 2);
-    color: var(--heading);
-    cursor: pointer;
-    display: flex;
-    gap: calc(var(--gap) / 2);
-    padding: $default-padding;
-    width: fit-content;
-
-    &:has(>input:disabled) {
-      --icon-color: var(--hard-disabled);
-      color: var(--hard-disabled);
-      cursor: not-allowed;
-    }
-
-    &:has(>input:not(:disabled)) {
-      &:hover,
-      &:active {
-        border: var(--theme-hover-input-border);
-      }
-    }
-
-    > .ai-icon {
-      color: var(--icon-color, var(--interactive));
-      font-size: calc(var(--s2) * 1rem);
-    }
-
-    > input[type="file"] {
-      display: none;
-    }
-  }
-
-  > .attached-files {
-    display: flex;
-    gap: var(--gap);
-
-    > p {
-      margin: 0;
-    }
-
-    > .files {
-      align-items: center;
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--gap);
-      width: 100%;
-    }
-  }
-}

package/src/ui/f/fields/FileUpload/utils.js

@@ -1,52 +0,0 @@
-export const fileUploadOptions = [
-  {
-    key  :'FILE',
-    value:'.doc,.docx,.odt,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.oasis.opendocument.text',
-    label:'Documents',
-  },
-  {
-    key  :'TXT',
-    value:'.xls,.xlsx,.ods,.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.oasis.opendocument.spreadsheet,text/csv',
-    label:'Spreadsheets',
-  },
-  {
-    key  :'PDF',
-    value:'.pdf,application/pdf',
-    label:'PDF',
-  },
-  {
-    key  :'VID',
-    value:'.mp4,.ogg,.webm,video/mp4,video/ogg,video/webm',
-    label:'Videos',
-  },
-  {
-    key  :'IMG',
-    value:'.png,.jpeg,.jpg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp',
-    label:'Images',
-  },
-  {
-    key  :'AUD',
-    value:'.mp3,.ogg,.wav,audio/mpeg,audio/ogg,audio/wav',
-    label:'Audio',
-  },
-]
-
-export const getFileType = (file) => {
-  const mimeType = file?.type
-  const extension = file?.name?.split('.').pop().toLowerCase()
-  const fileType = fileUploadOptions.find(
-    (option) => option.value.includes(mimeType) || option.value.includes(extension))
-
-  return fileType ? fileType.key : 'unknown'
-}
-
-export const getFileTypeFromUrl = (url) => {
-  if (!url) {
-    return 'BROKEN'
-  }
-  const urlWithoutParams = url.split('?')[0]
-  const extension = urlWithoutParams.split('.').pop().toLowerCase()
-  const fileType = fileUploadOptions.find((option) => option.value.includes(extension))
-
-  return fileType ? fileType.key : 'UNKNOWN'
-}

package/src/ui/f/fields/LatexPreviewInput/LatexPreviewInput.jsx

@@ -1,92 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { memo, useMemo } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { useFormikContext } from 'formik'
-
-import convertLatexToHtml from './convertLatexToHtml'
-
-import { TextareaInput } from '../TextareaInput'
-
-import './styles.scss'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'latex-preview-input'
-
-/**
- * This is the component description.
- */
-const LatexPreviewInput = ({
-  id,
-  className,
-  userClassName,
-  disabled,
-  style,
-  ...otherProps
-}) => {
-  const { name } = otherProps
-
-  const { values } = useFormikContext()
-
-  const LatexPreview = useMemo(() => convertLatexToHtml(values[name]), [values[name]])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        className,
-        userClassName,
-        'form-input',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <TextareaInput
-        className="preview-child"
-        disabled={disabled}
-        {...otherProps}
-      />
-      {/* eslint-disable-next-line react/no-danger */}
-      <div className="latex-container preview-child" dangerouslySetInnerHTML={{ __html: LatexPreview }} />
-    </div>
-  )
-}
-
-LatexPreviewInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * Whether the Form input input should be disabled
-   */
-  disabled:PropTypes.bool,
-}
-
-LatexPreviewInput.defaultProps = {
-  disabled:false,
-}
-
-export default memo(LatexPreviewInput)

package/src/ui/f/fields/LatexPreviewInput/convertLatexToHtml.jsx

@@ -1,38 +0,0 @@
-import * as React from 'react'
-
-import ReactMarkdown from 'react-markdown'
-
-import RemarkMathPlugin from 'remark-math'
-
-import { MathJax, MathJaxContext } from 'better-react-mathjax'
-
-import rehypeMathjax from 'rehype-mathjax/svg'
-
-import ReactDOMServer from 'react-dom/server'
-
-const convertLatexToHtml = (content) => {
-  if (content.includes('https://forte-assets.pareto.ai/')) {
-    return content
-  }
-
-  const processedContent = content.replaceAll(/\\\\/g, '\n\n')
-
-  const renderedContent = ReactDOMServer.renderToString(
-    <MathJaxContext>
-      <ReactMarkdown
-        remarkPlugins={[RemarkMathPlugin]}
-        rehypePlugins={[rehypeMathjax]}
-        components={{
-          math      :({ value }) => <MathJax.Node formula={value} />,
-          inlineMath:({ value }) => <MathJax.Node inline formula={value} />,
-        }}
-      >
-        {processedContent}
-      </ReactMarkdown>
-    </MathJaxContext>,
-  )
-
-  return renderedContent
-}
-
-export default convertLatexToHtml

package/src/ui/f/fields/LatexPreviewInput/index.js

@@ -1,3 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as LatexPreviewInput } from './LatexPreviewInput'
-export { default as convertLatexToHtml } from './convertLatexToHtml'

package/src/ui/f/fields/LatexPreviewInput/styles.scss

@@ -1,25 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-margin: 1em;
-
-.#{bem.$base}.latex-preview-input {
-  display: flex;
-  flex-direction: row;
-  gap: $default-margin;
-
-  > .preview-child {
-    flex: 1;
-    position: relative;
-  }
-
-  > .latex-container {
-    border: 1px solid var(--ui-lines);
-    border-radius: var(--theme-default-border-radius);
-    margin-top: calc($default-margin * 2.5);
-    max-width: 50%;
-    overflow: auto;
-    padding: 0 $default-margin;
-  }
-}