refactor: move FatalError to form-component lib

libs/form-component/src/app-components/FatalError/FatalError.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FatalError } from './FatalError';
+import { FatalErrorEmpty } from './FatalErrorEmpty';
+
+const meta = {
+  title: 'AppComponents/FatalError',
+  component: FatalError,
+} satisfies Meta<typeof FatalError>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Preview: Story = {
+  args: {
+    children: 'An unrecoverable error has occurred.',
+  },
+};
+
+export const Empty: StoryObj<typeof FatalErrorEmpty> = {
+  render: () => <FatalErrorEmpty />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Renders a hidden marker element signalling a fatal error without visible content.',
+      },
+    },
+  },
+};

libs/form-component/src/app-components/FatalError/FatalError.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+
+import { FatalError } from './FatalError';
+import { FatalErrorEmpty } from './FatalErrorEmpty';
+
+describe('FatalError', () => {
+  it('renders children inside a div with data-fatal-error', () => {
+    render(
+      <FatalError>
+        <span>Something went wrong</span>
+      </FatalError>,
+    );
+
+    const child = screen.getByText('Something went wrong');
+    expect(child).toBeInTheDocument();
+    expect(child.parentElement).toHaveAttribute('data-fatal-error');
+  });
+
+  it('forwards additional props to the underlying div', () => {
+    render(
+      <FatalError className='custom' data-testid='fatal'>
+        content
+      </FatalError>,
+    );
+
+    const wrapper = screen.getByTestId('fatal');
+    expect(wrapper).toHaveAttribute('data-fatal-error');
+    expect(wrapper).toHaveClass('custom');
+  });
+});
+
+describe('FatalErrorEmpty', () => {
+  it('renders a hidden div with data-fatal-error and no content', () => {
+    const { container } = render(<FatalErrorEmpty />);
+    const div = container.querySelector('[data-fatal-error]');
+
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveStyle({ display: 'none' });
+    expect(div?.children).toHaveLength(0);
+  });
+});

src/App/frontend/src/app-components/error/FatalError/FatalError.tsx → libs/form-component/src/app-components/FatalError/FatalError.tsx

@@ -1,15 +1,14 @@
-import React from 'react';
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 
 /**
  * The `data-fatal-error` signals that some unrecoverable error occured which should prevent PDF generation from happening as it would not include necessary information.
  */
-export function FatalError({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) {
+export function FatalError({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) {
   return (
-    <div
-      data-fatal-error
-      {...props}
-    >
+    <div data-fatal-error {...props}>
       {children}
     </div>
   );

src/App/frontend/src/app-components/error/FatalErrorEmpty/FatalErrorEmpty.tsx → libs/form-component/src/app-components/FatalError/FatalErrorEmpty.tsx

@@ -1,13 +1,6 @@
-import React from 'react';
-
 /**
  * The `data-fatal-error` signals that some unrecoverable error occured which should prevent PDF generation from happening as it would not include necessary information.
  */
 export function FatalErrorEmpty() {
-  return (
-    <div
-      data-fatal-error
-      style={{ display: 'none' }}
-    />
-  );
+  return <div data-fatal-error style={{ display: 'none' }} />;
 }

libs/form-component/src/app-components/FatalError/index.ts

@@ -0,0 +1,2 @@
+export { FatalError } from './FatalError';
+export { FatalErrorEmpty } from './FatalErrorEmpty';

libs/form-component/src/app-components/index.ts

@@ -3,6 +3,7 @@ export * from './Button';
 export * from './Card';
 export * from './Datepicker';
 export * from './Dropzone';
+export * from './FatalError';
 export * from './Flex';
 export * from './Input';
 export * from './hooks';

src/App/frontend/monorepo-changed-paths.txt

@@ -1,4 +1,3 @@
-.claude/settings.json
 .gitattributes
 .github/
 .husky/
@@ -24,9 +23,11 @@ src/app-components/Input/
 src/app-components/Label/
 src/app-components/Number/
 src/app-components/Table/
-src/app-components/Text/DisplayText.tsx
+src/app-components/Text/
 src/app-components/TextArea/TextArea.tsx
 src/app-components/TimePicker/
+src/app-components/error/FatalError/FatalError.tsx
+src/app-components/error/FatalErrorEmpty/FatalErrorEmpty.tsx
 src/app-components/loading/Spinner/Spinner.tsx
 src/codegen/schemas/layout-sets.schema.v1.ts
 src/components/presentation/Header.tsx
@@ -55,6 +56,7 @@ src/features/form/layoutSettings/
 src/features/form/rules/RulesContext.tsx
 src/features/formData/LegacyRules.ts
 src/features/instance/instanceUtils.ts
+src/features/instantiate/InstantiationError.tsx
 src/features/instantiate/containers/InstantiateContainer.tsx
 src/features/instantiate/useInstantiation.tsx
 src/features/language/LangDataSourcesProvider.tsx

src/App/frontend/src/components/altinnError.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { FatalError } from '@app/form-component';
 import cn from 'classnames';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import classes from 'src/components/altinnError.module.css';
 import { Lang } from 'src/features/language/Lang';
 import { getHelpCircleIllustrationUrl } from 'src/utils/urls/appUrlHelper';

src/App/frontend/src/layout/GenericComponent.tsx

@@ -2,11 +2,9 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router';
 import type { SetURLSearchParams } from 'react-router';
 
-import { Flex } from '@app/form-component';
+import { FatalError, FatalErrorEmpty, Flex } from '@app/form-component';
 import classNames from 'classnames';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
-import { FatalErrorEmpty } from 'src/app-components/error/FatalErrorEmpty/FatalErrorEmpty';
 import { SearchParams } from 'src/core/routing/types';
 import { useIsNavigating } from 'src/core/routing/useIsNavigating';
 import { useDevToolsStore } from 'src/features/devtools/data/DevToolsStore';

src/App/frontend/src/layout/SigneeList/SigneeListError.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { FatalError } from '@app/form-component';
 import { isAxiosError } from 'axios';
 import { z, ZodError } from 'zod';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 

src/App/frontend/src/layout/SigneeList/SigneeListSummary.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 import { useParams } from 'react-router';
 import type { PropsWithChildren, ReactElement } from 'react';
 
-import { Label } from '@app/form-component';
+import { FatalError, Label } from '@app/form-component';
 import { Divider, Paragraph } from '@digdir/designsystemet-react';
 import { format } from 'date-fns';
 import { nb } from 'date-fns/locale/nb';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { LoadingWrapper } from 'src/app-components/loading/LoadingWrapper/LoadingWrapper';
 import { useTaskOverrides } from 'src/core/contexts/TaskOverrides';
 import { Lang } from 'src/features/language/Lang';

src/App/frontend/src/layout/SigningActions/SigningActionsComponent.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router';
 
-import { Spinner } from '@app/form-component';
+import { FatalError, Spinner } from '@app/form-component';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { Panel } from 'src/app-components/Panel/Panel';
 import { useIsAuthorized } from 'src/features/instance/useProcessQuery';
 import { Lang } from 'src/features/language/Lang';

src/App/frontend/src/layout/SigningDocumentList/SigningDocumentListError.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { FatalError } from '@app/form-component';
 import { isAxiosError } from 'axios';
 import { ZodError } from 'zod';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { problemDetailsSchema } from 'src/layout/SigneeList/SigneeListError';

src/App/frontend/src/layout/Subform/SubformComponent.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { useNavigation } from 'react-router';
 
-import { Button, Flex, Spinner } from '@app/form-component';
+import { Button, FatalError, Flex, Spinner } from '@app/form-component';
 import { Table } from '@digdir/designsystemet-react';
 import { PencilIcon, PlusIcon, TrashIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { Caption } from 'src/components/form/caption/Caption';
 import { FormStore } from 'src/features/form/FormContext';
 import { getDefaultDataTypeFromUiFolder } from 'src/features/form/ui';

src/App/frontend/src/layout/Subform/Summary/SubformSummaryComponent.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 
-import { Spinner } from '@app/form-component';
+import { FatalError, Spinner } from '@app/form-component';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { getDefaultDataTypeFromUiFolder } from 'src/features/form/ui';
 import { useInstanceDataElements } from 'src/features/instance/InstanceContext';
 import { Lang } from 'src/features/language/Lang';

src/App/frontend/src/layout/Subform/Summary/SubformSummaryTable.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { useNavigate, useNavigation } from 'react-router';
 
-import { Flex, Spinner } from '@app/form-component';
+import { FatalError, Flex, Spinner } from '@app/form-component';
 import { Paragraph, Table } from '@digdir/designsystemet-react';
 import classNames from 'classnames';
 
-import { FatalError } from 'src/app-components/error/FatalError/FatalError';
 import { Caption } from 'src/components/form/caption/Caption';
 import { Label } from 'src/components/label/Label';
 import { FormStore } from 'src/features/form/FormContext';