📄 `ErrorsViewer`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	5
📦 Imports	12
💠 JSX Elements	26
📐 Interfaces	4

📚 Table of Contents¶

Imports
JSX Elements
Functions
Interfaces

🛠️ File Location:¶

📂 packages/website/src/components/ErrorsViewer.tsx

📦 Imports¶

Name	Source
`Monaco`	`monaco-editor`
`Link`	`@docusaurus/Link`
`IconExternalLink`	`@theme/Icon/ExternalLink`
`clsx`	`clsx`
`useEffect`	`react`
`useState`	`react`
`React`	`react`
`AlertBlockProps`	`./layout/AlertBlock`
`ErrorGroup`	`./types`
`ErrorItem`	`./types`
`styles`	`./ErrorsViewer.module.css`
`AlertBlock`	`./layout/AlertBlock`

JSX Elements¶

Component	Type	Props	Children
`button`	element	className="button button--primary button--sm", disabled={props.disabled}, onC...	{props.children}
`AlertBlock`	component	type={severityClass(item.severity)}	, {item.suggestions && item.suggestions.length > 0 && ( {item.sugg...
`div`	element	className={clsx(!!item.fixer && styles.fixerContainer)}	, {item.fixer && ( <FixButton disabled={isLocked} fix={item.fixer.fix} s...
`pre`	element	className={styles.errorPre}	{item.message},
`FixButton`	component	disabled={isLocked}, fix={item.fixer.fix}, setIsLocked={setIsLocked}	text: "apply fix"
`div`	element	none	{item.suggestions.map((fixer, index) => ( <div className={clsx(styles.fixerCo...
`div`	element	className={clsx(styles.fixerContainer, styles.fixer)}, key={index}	,
`span`	element	none	text: ">",
`FixButton`	component	disabled={isLocked}, fix={fixer.fix}, setIsLocked={setIsLocked}	text: "apply suggestion"
`div`	element	className={styles.list}
`div`	element	className="margin-top--md"
`AlertBlock`	component	type={type}	,
`div`	element	className={styles.fixerContainer}
`h4`	element	none	{title}
`pre`	element	className={styles.errorPre}	{type === 'danger' ? value.stack : value.message}
`div`	element	className={styles.list}	{value?.length ? ( value.map(({ group, items, uri }) => { return ( <div class...
`div`	element	className="margin-top--md", key={group}	, {items.map((item, index) => ( <div className="margin-bottom--sm" key={i...
`h4`	element	none	{group}, {uri && ( <> {' - '} docs <IconExt...
`Fragment`	fragment	none
`Link`	component	href={uri}, target="_blank"	text: "docs",
`IconExternalLink`	component	height={13.5}, width={13.5}	none
`div`	element	className="margin-bottom--sm", key={index}
`ErrorBlock`	component	isLocked={isLocked}, item={item}, setIsLocked={setIsLocked}	none
`div`	element	className="margin-top--md"
`AlertBlock`	component	type="success"
`div`	element	none	text: "All is ok!"

Functions¶

`ErrorViewer({ title, type, value, }: ErrorViewerProps): React.JSX.Element`¶

Parameters:

{ title, type, value, } ErrorViewerProps

Returns: React.JSX.Element

Code

export function ErrorViewer({
  title,
  type,
  value,
}: ErrorViewerProps): React.JSX.Element {
  return (
    <div className={styles.list}>
      <div className="margin-top--md">
        <AlertBlock type={type}>
          <div className={styles.fixerContainer}>
            <h4>{title}</h4>
          </div>
          <pre className={styles.errorPre}>
            {type === 'danger' ? value.stack : value.message}
          </pre>
        </AlertBlock>
      </div>
    </div>
  );
}

`ErrorsViewer({ value }: ErrorsViewerProps): React.JSX.Element`¶

Parameters:

{ value } ErrorsViewerProps

Returns: React.JSX.Element

Calls:

useState (from react)
useEffect (from react)
setIsLocked
value.map
items.map

Code

export function ErrorsViewer({ value }: ErrorsViewerProps): React.JSX.Element {
  const [isLocked, setIsLocked] = useState(false);

  useEffect(() => {
    setIsLocked(false);
  }, [value]);

  return (
    <div className={styles.list}>
      {value?.length ? (
        value.map(({ group, items, uri }) => {
          return (
            <div className="margin-top--md" key={group}>
              <h4>
                {group}
                {uri && (
                  <>
                    {' - '}
                    <Link href={uri} target="_blank">
                      docs <IconExternalLink height={13.5} width={13.5} />
                    </Link>
                  </>
                )}
              </h4>
              {items.map((item, index) => (
                <div className="margin-bottom--sm" key={index}>
                  <ErrorBlock
                    isLocked={isLocked}
                    item={item}
                    setIsLocked={setIsLocked}
                  />
                </div>
              ))}
            </div>
          );
        })
      ) : (
        <div className="margin-top--md">
          <AlertBlock type="success">
            <div>All is ok!</div>
          </AlertBlock>
        </div>
      )}
    </div>
  );
}

`severityClass(severity: Monaco.MarkerSeverity): AlertBlockProps['type']`¶

Parameters:

severity Monaco.MarkerSeverity

Returns: AlertBlockProps['type']

Internal Comments:

/* eslint-disable @typescript-eslint/no-unsafe-enum-comparison -- Monaco is imported as a type */

Code

function severityClass(
  severity: Monaco.MarkerSeverity,
): AlertBlockProps['type'] {
  switch (severity) {
    /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison -- Monaco is imported as a type */
    case 2:
      return 'note';
    case 4:
      return 'warning';
    case 8:
      return 'danger';
    /* eslint-enable @typescript-eslint/no-unsafe-enum-comparison */
  }
  return 'info';
}

`FixButton(props: FixButtonProps): React.JSX.Element`¶

Parameters:

props FixButtonProps

Returns: React.JSX.Element

Calls:

props.fix
props.setIsLocked

Code

function FixButton(props: FixButtonProps): React.JSX.Element {
  return (
    <button
      className="button button--primary button--sm"
      disabled={props.disabled}
      onClick={(): void => {
        props.fix();
        props.setIsLocked(true);
      }}
    >
      {props.children}
    </button>
  );
}

`ErrorBlock({ isLocked, item, setIsLocked, }: ErrorBlockProps): React.JSX.Element`¶

Parameters:

{ isLocked, item, setIsLocked, } ErrorBlockProps

Returns: React.JSX.Element

Calls:

severityClass
clsx (from clsx)
item.suggestions.map

Code

function ErrorBlock({
  isLocked,
  item,
  setIsLocked,
}: ErrorBlockProps): React.JSX.Element {
  return (
    <AlertBlock type={severityClass(item.severity)}>
      <div className={clsx(!!item.fixer && styles.fixerContainer)}>
        <pre className={styles.errorPre}>
          {item.message} {item.location}
        </pre>
        {item.fixer && (
          <FixButton
            disabled={isLocked}
            fix={item.fixer.fix}
            setIsLocked={setIsLocked}
          >
            apply fix
          </FixButton>
        )}
      </div>
      {item.suggestions && item.suggestions.length > 0 && (
        <div>
          {item.suggestions.map((fixer, index) => (
            <div
              className={clsx(styles.fixerContainer, styles.fixer)}
              key={index}
            >
              <span>&gt; {fixer.message}</span>
              <FixButton
                disabled={isLocked}
                fix={fixer.fix}
                setIsLocked={setIsLocked}
              >
                apply suggestion
              </FixButton>
            </div>
          ))}
        </div>
      )}
    </AlertBlock>
  );
}

Interfaces¶

`ErrorsViewerProps`¶

Interface Code

export interface ErrorsViewerProps {
  readonly value?: ErrorGroup[];
}

Properties¶

Name	Type	Optional	Description
`value`	`ErrorGroup[]`	✓	not shown

`ErrorViewerProps`¶

Interface Code

export interface ErrorViewerProps {
  readonly title: string;
  readonly type: AlertBlockProps['type'];
  readonly value: Error;
}

Properties¶

Name	Type	Optional	Description
`title`	`string`	✗	not shown
`type`	`AlertBlockProps['type']`	✗	not shown
`value`	`Error`	✗	not shown

`ErrorBlockProps`¶

Interface Code

export interface ErrorBlockProps {
  readonly isLocked: boolean;
  readonly item: ErrorItem;
  readonly setIsLocked: (value: boolean) => void;
}

Properties¶

Name	Type	Optional	Description
`isLocked`	`boolean`	✗	not shown
`item`	`ErrorItem`	✗	not shown
`setIsLocked`	`(value: boolean) => void`	✗	not shown

`FixButtonProps`¶

Interface Code

export interface FixButtonProps {
  readonly children?: React.ReactNode;
  readonly disabled: boolean;
  readonly fix: () => void;
  readonly setIsLocked: (value: boolean) => void;
}

Properties¶

Name	Type	Optional	Description
`children`	`React.ReactNode`	✓	not shown
`disabled`	`boolean`	✗	not shown
`fix`	`() => void`	✗	not shown
`setIsLocked`	`(value: boolean) => void`	✗	not shown

Generated by Syntax Scribe

📄 ErrorsViewer¶

📊 Analysis Summary¶

📚 Table of Contents¶

🛠️ File Location:¶

📦 Imports¶

JSX Elements¶

, {items.map((item, index) => ( <div className="margin-bottom--sm" key={i...

Functions¶

ErrorViewer({ title, type, value, }: ErrorViewerProps): React.JSX.Element¶

ErrorsViewer({ value }: ErrorsViewerProps): React.JSX.Element¶

severityClass(severity: Monaco.MarkerSeverity): AlertBlockProps['type']¶

FixButton(props: FixButtonProps): React.JSX.Element¶

ErrorBlock({ isLocked, item, setIsLocked, }: ErrorBlockProps): React.JSX.Element¶

Interfaces¶

ErrorsViewerProps¶

Properties¶

ErrorViewerProps¶

Properties¶

ErrorBlockProps¶

Properties¶

FixButtonProps¶

Properties¶

📄 `ErrorsViewer`¶

`ErrorViewer({ title, type, value, }: ErrorViewerProps): React.JSX.Element`¶

`ErrorsViewer({ value }: ErrorsViewerProps): React.JSX.Element`¶

`severityClass(severity: Monaco.MarkerSeverity): AlertBlockProps['type']`¶

`FixButton(props: FixButtonProps): React.JSX.Element`¶

`ErrorBlock({ isLocked, item, setIsLocked, }: ErrorBlockProps): React.JSX.Element`¶

`ErrorsViewerProps`¶

`ErrorViewerProps`¶

`ErrorBlockProps`¶

`FixButtonProps`¶