Mar 27, 2023 · Mar 22, 2023 · Mar 22, 2023
diff --git a/packages/website/src/components/ErrorsViewer.module.css b/packages/website/src/components/ErrorsViewer.module.css
 .fixer {
  margin: 0.5rem 0 0.5rem 1.5rem;
 }

 .errorPre {
  background: transparent;
  margin: 0;
  padding: 0;
  white-space: break-spaces;
  word-wrap: break-word;
 }
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
 import React, { useEffect, useState } from 'react';

 import styles from './ErrorsViewer.module.css';
 import type { AlertBlockProps } from './layout/AlertBlock';
 import AlertBlock from './layout/AlertBlock';
 import type { ErrorGroup, ErrorItem } from './types';

 export interface ErrorsViewerProps {
  readonly type: AlertBlockProps['type'];
 }

 interface AlertBlockProps {
  readonly type: 'danger' | 'warning' | 'note' | 'info' | 'success';
  readonly children: React.ReactNode;
  readonly fixer?: boolean;
 }

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

 function AlertBlock(props: AlertBlockProps): JSX.Element {
  return (
    <div className={`admonition alert alert--${props.type}`}>
      <div className="admonition-content">{props.children}</div>
    </div>
  );
 }

 function ErrorBlock({
  item,
  setIsLocked,
  return (
    <AlertBlock type={severityClass(item.severity)}>
      <div className={clsx(!!item.fixer && styles.fixerContainer)}>
        <div>
        <pre className={styles.errorPre}>
          {item.message} {item.location}
        </div>
        </pre>
        {item.fixer && (
          <FixButton
            disabled={isLocked}
  );
 }

 function SuccessBlock(): JSX.Element {
  return (
    <AlertBlock type="success">
      <div className={styles.fixerContainer}>
        <div>All is ok!</div>
      </div>
    </AlertBlock>
  );
 }

 export function ErrorViewer({
  value,
  title,
          <div className={styles.fixerContainer}>
            <h4>{title}</h4>
          </div>
          {type === 'danger' ? value.stack : value.message}
          <pre className={styles.errorPre}>
            {type === 'danger' ? value?.stack : value.message}
          </pre>
        </AlertBlock>
      </div>
    </div>
                )}
              </h4>
              {items.map((item, index) => (
                <ErrorBlock
                  isLocked={isLocked}
                  setIsLocked={setIsLocked}
                  item={item}
                  key={index}
                />
                <div className="margin-bottom--sm" key={index}>
                  <ErrorBlock
                    isLocked={isLocked}
                    setIsLocked={setIsLocked}
                    item={item}
                  />
                </div>
              ))}
            </div>
          );
        })
      ) : (
        <div className="margin-top--md">
          <SuccessBlock />
          <AlertBlock type="success">
            <div>All is ok!</div>
          </AlertBlock>
        </div>
      )}
    </div>
diff --git a/packages/website/src/components/layout/AlertBlock.tsx b/packages/website/src/components/layout/AlertBlock.tsx
 import React from 'react';

 export interface AlertBlockProps {
  readonly type: 'success' | 'info' | 'note' | 'warning' | 'danger';
  readonly children: React.ReactNode;
 }

 function AlertBlock(props: AlertBlockProps): JSX.Element {
  return (
    <div className={`admonition alert alert--${props.type}`}>
      <div className="admonition-content">{props.children}</div>
    </div>
  );
 }

 export default AlertBlock;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,3 +22,11 @@
		.fixer {
		margin: 0.5rem 0 0.5rem 1.5rem;
		}

		.errorPre {
		background: transparent;
		margin: 0;
		padding: 0;
		white-space: break-spaces;
		word-wrap: break-word;
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,6 +5,8 @@ import type Monaco from 'monaco-editor';
		import React, { useEffect, useState } from 'react';

		import styles from './ErrorsViewer.module.css';
		import type { AlertBlockProps } from './layout/AlertBlock';
		import AlertBlock from './layout/AlertBlock';
		import type { ErrorGroup, ErrorItem } from './types';

		export interface ErrorsViewerProps {
Expand All		@@ -17,13 +19,7 @@ export interface ErrorViewerProps {
		readonly type: AlertBlockProps['type'];
		}

		interface AlertBlockProps {
		readonly type: 'danger' \| 'warning' \| 'note' \| 'info' \| 'success';
		readonly children: React.ReactNode;
		readonly fixer?: boolean;
		}

		interface ErrorBlockProps {
		export interface ErrorBlockProps {
		readonly item: ErrorItem;
		readonly setIsLocked: (value: boolean) => void;
		readonly isLocked: boolean;
Expand DownExpand Up		@@ -64,14 +60,6 @@ function FixButton(props: FixButtonProps): JSX.Element {
		);
		}

		function AlertBlock(props: AlertBlockProps): JSX.Element {
		return (
		<div className={`admonition alert alert--${props.type}`}>
		<div className="admonition-content">{props.children}</div>
		</div>
		);
		}

		function ErrorBlock({
		item,
		setIsLocked,
Expand All		@@ -80,9 +68,9 @@ function ErrorBlock({
		return (
		<AlertBlock type={severityClass(item.severity)}>
		<div className={clsx(!!item.fixer && styles.fixerContainer)}>
		<div>
		<pre className={styles.errorPre}>
		{item.message} {item.location}
		</div>
		</pre>
		{item.fixer && (
		<FixButton
		disabled={isLocked}
Expand DownExpand Up		@@ -112,16 +100,6 @@ function ErrorBlock({
		);
		}

		function SuccessBlock(): JSX.Element {
		return (
		<AlertBlock type="success">
		<div className={styles.fixerContainer}>
		<div>All is ok!</div>
		</div>
		</AlertBlock>
		);
		}

		export function ErrorViewer({
		value,
		title,
Expand All		@@ -134,7 +112,9 @@ export function ErrorViewer({
		<div className={styles.fixerContainer}>
		<h4>{title}</h4>
		</div>
		{type === 'danger' ? value.stack : value.message}
		<pre className={styles.errorPre}>
		{type === 'danger' ? value?.stack : value.message}
		</pre>
		</AlertBlock>
		</div>
		</div>
Expand DownExpand Up		@@ -170,19 +150,22 @@ export function ErrorsViewer({ value }: ErrorsViewerProps): JSX.Element {
		)}
		</h4>
		{items.map((item, index) => (
		<ErrorBlock
		isLocked={isLocked}
		setIsLocked={setIsLocked}
		item={item}
		key={index}
		/>
		<div className="margin-bottom--sm" key={index}>
		<ErrorBlock
		isLocked={isLocked}
		setIsLocked={setIsLocked}
		item={item}
		/>
		</div>
		))}
		</div>
		);
		})
		) : (
		<div className="margin-top--md">
		<SuccessBlock />
		<AlertBlock type="success">
		<div>All is ok!</div>
		</AlertBlock>
		</div>
		)}
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,16 @@
		import React from 'react';

		export interface AlertBlockProps {
		readonly type: 'success' \| 'info' \| 'note' \| 'warning' \| 'danger';
		readonly children: React.ReactNode;
		}

		function AlertBlock(props: AlertBlockProps): JSX.Element {
		return (
		<div className={`admonition alert alert--${props.type}`}>
		<div className="admonition-content">{props.children}</div>
		</div>
		);
		}

		export default AlertBlock;