diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/avatar-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/avatar-error.tsx deleted file mode 100644 index 205ddc92e6..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/avatar-error.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { Avatar } from "@mittwald/flow-react-components"; - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/avatar-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/avatar-loading.tsx deleted file mode 100644 index 96e86c7af5..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/avatar-loading.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { - Avatar, - Skeleton, -} from "@mittwald/flow-react-components"; - - - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/chart-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/chart-error.tsx deleted file mode 100644 index 778e5aa04a..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/chart-error.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { - AlertIcon, - CartesianChart, - Heading, - IllustratedMessage, - Text, - XAxis, - YAxis, -} from "@mittwald/flow-react-components"; - - - - Fehler beim Laden - - Dieser Bereich konnte nicht geladen werden. Wir - arbeiten daran das Problem zu beheben. - - - } -> - - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/chart-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/chart-loading.tsx deleted file mode 100644 index e51430a8c6..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/chart-loading.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { - CartesianChart, - LoadingSpinner, - XAxis, - YAxis, -} from "@mittwald/flow-react-components"; - -} -> - - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/content-fragment-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/content-fragment-error.tsx deleted file mode 100644 index 9da180d1ff..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/content-fragment-error.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { - Alert, - Heading, - Text, -} from "@mittwald/flow-react-components"; - - - Fehler beim Laden - - Dieser Bereich konnte nicht geladen werden. Wir arbeiten - daran das Problem zu beheben. - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/content-fragment-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/content-fragment-loading.tsx deleted file mode 100644 index 2fa39883ff..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/content-fragment-loading.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { - Section, - SkeletonText, - Text, -} from "@mittwald/flow-react-components"; - -
- - - - - - - - - -
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/context-menu-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/context-menu-error.tsx deleted file mode 100644 index 4f017e673d..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/context-menu-error.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { AlertText } from "@mittwald/flow-react-components"; - -
-
- Fehler beim Laden -
-
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/context-menu-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/context-menu-loading.tsx deleted file mode 100644 index 7f7582a8d0..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/context-menu-loading.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { SkeletonText } from "@mittwald/flow-react-components"; - -
-
- -
-
- -
-
- -
-
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/field-fragment-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/field-fragment-loading.tsx deleted file mode 100644 index 627b41c8f2..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/field-fragment-loading.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { - Label, - SkeletonText, - TextField, -} from "@mittwald/flow-react-components"; - - - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/illustrated-message-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/illustrated-message-error.tsx deleted file mode 100644 index 0ea6ccc880..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/illustrated-message-error.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { - AlertIcon, - Heading, - IllustratedMessage, - Text, -} from "@mittwald/flow-react-components"; - - - - Fehler beim Laden - - Dieser Bereich konnte nicht geladen werden. Wir arbeiten - daran das Problem zu beheben. - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/illustrated-message-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/illustrated-message-loading.tsx deleted file mode 100644 index dd4f41f445..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/illustrated-message-loading.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { - Heading, - Section, - SkeletonText, - Text, -} from "@mittwald/flow-react-components"; - -<> -
- - - - - - - - - -
-
- - - - - - - - - -
-; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/layout-card-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/layout-card-error.tsx deleted file mode 100644 index 7d0c48eb63..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/layout-card-error.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { - AlertIcon, - LayoutCard, - Heading, - Text, - IllustratedMessage, -} from "@mittwald/flow-react-components"; - - - - - Fehler beim Laden - - Dieser Bereich konnte nicht geladen werden. Wir - arbeiten daran das Problem zu beheben. - - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/layout-card-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/layout-card-loading.tsx deleted file mode 100644 index 83dbcf187d..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/layout-card-loading.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { - Heading, - LayoutCard, - Section, - SkeletonText, - Text, -} from "@mittwald/flow-react-components"; - - -
- - - - - - - - - -
-
- - - - - - - - - -
-
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/modal-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/modal-error.tsx deleted file mode 100644 index b4fe6cdfaf..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/modal-error.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { - ActionGroup, - AlertIcon, - Button, - Heading, - IllustratedMessage, - Text, -} from "@mittwald/flow-react-components"; - -
- -
- - - Fehler beim Laden - - Dieser Bereich konnte nicht geladen werden. Wir - arbeiten daran das Problem zu beheben. - - -
- - - -
-
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/modal-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/modal-loading.tsx deleted file mode 100644 index 83afd0aa40..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/modal-loading.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { LoadingSpinner } from "@mittwald/flow-react-components"; - -
- -
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/section-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/section-error.tsx deleted file mode 100644 index 99aa5eb404..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/section-error.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { - AlertIcon, - Heading, - Section, - Text, -} from "@mittwald/flow-react-components"; - -
- - - Fehler beim Laden - - - Dieser Bereich konnte nicht geladen werden. Wir arbeiten - daran das Problem zu beheben. - -
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/section-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/section-loading.tsx deleted file mode 100644 index f3c542f244..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/section-loading.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { - Heading, - Section, - SkeletonText, - Text, -} from "@mittwald/flow-react-components"; - -
- - - - - - - - - -
; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/text-error.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/text-error.tsx deleted file mode 100644 index 7be47a6213..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/text-error.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { AlertText } from "@mittwald/flow-react-components"; - -Fehler beim Laden; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/text-loading.tsx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/text-loading.tsx deleted file mode 100644 index 3dc9641a3a..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/examples/text-loading.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { - Text, - SkeletonText, -} from "@mittwald/flow-react-components"; - - - -; diff --git a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx b/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx deleted file mode 100644 index 66536cbba7..0000000000 --- a/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: Boundaries ---- - -Error- und Loading Boundaries sind ein zentrales Werkzeug, um Ladezustände -anzuzeigen und Fehler im UI gezielt abzufangen. Sie verhindern, dass Fehler -unkontrolliert die gesamte Anwendung zum Absturz bringen, und bieten die -Möglichkeit, Usern eine verständliche Rückmeldung zu geben. Gleichzeitig -unterstützen sie Entwicklern durch Logging und Monitoring bei der Fehleranalyse. - -Da jede Anwendung unterschiedliche Anforderungen hat, gibt es kein universelles -Schema, wo und wie Boundaries am besten platziert werden. Die folgenden Best -practices sollen bei der Orientierung und Entscheidungsfindung helfen. - ---- - - - Guideline für interne Teams - - Diese Guideline richtet sich in erster Linie an das interne Team von - mittwald und setzt entsprechendes Vorwissen voraus. Die darin genannten - Components beziehen sich auf interne mStudio-Components. - - - ---- - -# Technische Umsetzung - -Bei der Platzierung der Boundaries empfiehlt es sich, vom Groben ins Detail -vorzugehen. Entscheidend ist eine gute Balance: Zu viele kleine Boundaries -erhöhen die Komplexität, zu wenige gefährden hingegen die Stabilität großer -Teile der Anwendung. - -Boundaries wie "LayoutCard" und "Section" rendern das jeweilige Element, -Boundaries mit dem Zusatz "Fragment" nutzen die Fehler und Ladezustände des -jeweiligen Elements, rendern am Ende aber nur ein Fragment. - -| Typ | Verwendung | Fehlerfall | Loading | -| ------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | -| LayoutCard / LayoutCardFragment | Äußerste Boundary einer Seite | | | -| SectionsFragment | Äußerste Boundary in Tabs | | | -| Section | Ersetzt normale Sections | | | -| ContentFragment | Für mehrzeilige Inhalte | | | -| Fragment | Für Inhalte die im Lade / Fehlerzustand nicht angezeigt werden | Kein Fallback | Kein Fallback | -| Modal | Ersetzt normale Modals | | (Loading View der Flow Component) | -| ContextMenu | Ersetzt normale ContextMenus | | | -| MenuItemFragment | Für MenuItems | Kein Fallback | Keine Loading Boundary | -| ChartFragment | Für CartesianCharts | | | -| FieldFragment | Für Form Fields mit nachgeladenen Inhalten | | | -| Avatar | Für Avatare | | | -| Text / String | Für Texte | | | - -## Inhalte einer LayoutCard - -Sind Funktionen oder Informationen einer -[LayoutCard](/04-components/structure/layout-card) essenziell für die Nutzung -der Seite, sollte die gesamte LayoutCard mit `WithBoundaries.LayoutCard` -umschlossen sein. Dabei wird die Anzahl der geladenen Sections als -`sectionsCount` mitgegeben, um die Loading View passend darzustellen. - -### Listenseite - -Eine Listenseite enthält in der Regel eine einzelne -[Section](/04-components/structure/section). Der `sectionsCount` beträgt hier -daher 1. Der Count der Liste wird zuerst geladen, damit die gesamte Liste im -Fehlerfall in die ErrorView wechseln kann. - -``` -export const CronjobsPage: FC = () => ( - - {() => { - const { projectId } = usePathParams("projectId"); - const projectGhost = ProjectGhost.ofId(projectId); - const cronjobCount = projectGhost.cronjobs.getTotalCount().use(); - - return ( - <> - - - {backupCount === 0 ? : } - - - ); - }} - -); -``` - -### Detailseite - -Der `sectionsCount` sollte der erwarteten Anzahl an Sections entsprechen. So -bleibt das Layout während des Ladevorgangs stabil. Das Hauptelement der Seite -wird zuerst geladen, damit im Fehlerfall für die gesamte Seite eine ErrorView -angezeigt werden kann. - -``` -export const CronjobPage: FC = () => ( - - {() => { - const { cronjobId } = usePathParams("cronjobId"); - const cronjob = CronjobGhost.ofId(cronjobId).getCommon().use(); - - return ( - <> - - - - - ); - }} - -); -``` - -### Tab - -Manche Seiten verteilen Inhalte auf mehrere -[Tabs](/04-components/structure/tabs). In solchen Fällen kann es sinnvoll sein, -Tabs separat abzusichern. Dafür eignet sich `WithBoundaries.SectionsFragment`. - -``` -export const CronjobTabs: FC = () => ( - - - - Allgemein - - {() => { - const { cronjobId } = usePathParams("cronjobId"); - const cronjob = CronjobGhost.ofId(cronjobId).getCommon().use(); - - return ( - <> - - - - - ); - }} - - - - -); -``` - -## Modals - -Für Modals sollte immer ein `WithBoundaries.Modal` verwendet werden. Dies -verhindert auch das Nachladen von Daten innerhalb des -[Modals](/04-components/overlays/modal), bevor das Modal geöffnet wird. - -### Inhalte von Forms in Modals - -Eine teilweise geladene oder fehlerhafte -[Form](/04-components/react-hook-form/form) untergräbt das Vertrauen der User -und kann zu unvollständigen oder inkonsistenten Daten führen. Sobald innerhalb -der Form ein Fehler auftritt, fällt automatisch das ganze Modal in eine -ErrorView, auch wenn es darin noch Boundaries gibt. - -``` -interface Props { - cronjob:CronjobGhost; - controller?: OverlayController; -} - -export const RenameCronjobModal: FC = (props) => ( - - {() => { - const { cronjobGhost } = asGhostProps(props, ["cronjob"]); - const controller = useModalController(); - const form = useForm(); - const handleOnSubmit = async () => { - ... - controller.close(); - }; - - return ( -
- ... -
- ); - }} -
-); -``` - -## Inhalte einzelner Sections - -Eine Section kann ergänzende Informationen oder Funktionen aus einem anderen -Service enthalten, die das primäre Nutzererlebnis der Seite nicht einschränken. -In solchen Fällen lohnt sich eine Abgrenzung über `WithBoundaries.Section`. So -bleiben Fehler auf einen kleinen Bereich beschränkt, ohne die gesamte Seite zu -gefährden. - -``` -export const AppInstallationSection: FC = (props) => ( - - {() => { - const { cronjobGhost } = asGhostProps(props); - const appInstallation = cronjobGhost.getCommon().linkedAppInstallation.getCommon().use(); - const t = useTCronjob(); - - return ( - <>... - ); - }} - -); -``` - -**Sonderfall:** Manche Sections werden nur unter bestimmten Bedingungen -angezeigt. In diesen Situationen soll keine eigene Loading View erzeugt werden, -damit Nutzer kein Ladeverhalten sehen, das später nicht zu einem sichtbaren -Ergebnis führt. Für solche Fälle eignet sich `WithBoundaries.Fragment`, da es -die Section schützt, ohne einen sichtbaren Ladezustand zu erzeugen. - -``` -export const AppInstallationSection: FC = (props) => ( - - {() => { - const { cronjobGhost } = asGhostProps(props); - const cronjob = cronjobGhost.getCommon().use(); - const t = useTCronjob(); - - if(!cronjob.linkedAppInstallation){ - return null; - } - - return ( -
...
- ); - }} -
-); -``` - -## Inhalte eines Diagramms - -Diagramme beziehen in der Regel viele Daten aus externen Services und sind daher -fehleranfällig. Sie sollten immer von einer Boundary umschlossen werden. Für das -`CartesianChart` gibt es hierfür das `WithBoundaries.ChartFragment`. - -``` - - ... - -``` - -## Inhalte einzelner Elemente - -Kleine Elemente wie [Texte](/04-components/content/text), -[Links](/04-components/navigation/link), [Badges](/04-components/status/badge), -[Actions](/04-components/actions/action) oder -[ContextMenus](/04-components/actions/context-menu) werden oft dynamisch -geladen, da sie das Nutzungserlebnis der Seite lediglich ergänzen. Diese sollten -daher separat geschützt werden, um nicht die gesamte Seite zu blockieren. Diese -Elemente besitzen oft keine eigene ErrorView und erscheinen im Fehlerfall nicht -oder verbleiben in ihrem Ladezustand. - -### Texte - -Für Texte gibt es die `WithBoundaries.Text` Component, bzw die -`WithBoundaries.String` Component, je nachdem ob am Ende eine `Text` Component -oder nur ein String gerendert werden soll. - -``` - - - - {() => projectGhost.getCommon().use().shortId } - - -``` - -Zusätzlich gibt es Components, die direkt auf ein Model angewendet werden können -und eine eingebaute Boundary besitzen. - -``` - - - - - -``` - -### Alerts / Badges - -[Alerts](/04-components/status/alert) und Badges ergänzen eine Seite oft nur um -kleine Hinweise oder Statusinformationen. Sie werden in ein -`WithBoundaries.Fragment` verpackt. So bleiben sie geschützt, ohne eine eigene -Loading View auszulösen. - -``` -export const CustomerBankruptAlert: FC = (props) => ( - - {() => { - const { customerGhost, asBadge } = asGhostProps(props, ["customer"]); - const isBankrupt = customerGhost.getCommon().isBankrupt().use(); - - if (!isBankrupt) { - return null; - } - - if (asBadge) { - return ... - } - - return ...; - }} - -); -``` - -### Field - -Für [Fields](/04-components/react-hook-form/field) kann die -`WithBoundaries.FieldFragment` Component verwendet werden. Sie zeigt im Loading -State ein Textfeld, dem optional ein Label mitgegeben werden kann. - -``` -export const AppInstallationSelectField: FC = (props) => { - const { name, label, projectGhost } = asGhostProps(props, ["project"]); - - return ( - - {() => { - const appInstallations = projectGhost.appInstallations.execute().use().items; - - return ( - - - - ); - }} - - ); -}; -``` - -### ContextMenu - -Für ContextMenus wird `WithBoundaries.ContextMenu` verwendet. Um zu verhindern, -dass der Inhalt des ContextMenus springt, werden Elemente die nachgeladene -Inhalte benötigen in ein `WithBoundaries.MenuItem` gepackt, diese Boundary -enthält kein Suspense, damit das ganze ContextMenu im Ladezustand verbleibt. - -``` -export const ActionsContextMenu: FC = (props) => { - const { appInstallationGhost } = asGhostProps(props); - const deleteModalController = useModalController(); - const updateModalController = useModalController(); - - return ( - <> - - {() => { - const { isBusy } = appInstallationGhost.getCommon().use(); - return ( - <> - deleteModalController.open()} isDisabled={isBusy} /> - - {() => { - const updateAvailable = appInstallationGhost.getCommon().appVersion.updateAvailable().use(); - if (!updateAvailable) { - return null; - } - return ( - updateModalController.open()}/> - ); - }} - - <> - ) - }} - - - - - - ); -}; -``` - ---- - -# Weitere Empfehlungen - -Ein durchdachtes Loading und ErrorBoundary Konzept endet nicht bei der -technischen Umsetzung. Fehler sollten zuverlässig erfasst und an -Monitoring-Systeme, Sentry oder Datadog weitergegeben werden, damit Probleme -früh sichtbar werden. Manuelle und automatisierte Tests helfen dabei, die -eigenen Fallbacks regelmäßig zu überprüfen und sicherzustellen, dass sie in -allen relevanten Situationen greifen. Ebenso wichtig ist eine klare und -konsistente Formulierung der Fehlermeldungen, damit User verstehen, was passiert -und wie sie weitermachen können. Für konkrete Hinweise zur sprachlichen -Ausgestaltung bietet die Guideline -[Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen) -weitere Orientierung. So entsteht ein stabiles und nachvollziehbares Verhalten, -das sowohl die Entwicklung als auch die Nutzung der Anwendung unterstützt. diff --git a/apps/docs/src/content/03-patterns/01-patterns/errorhandling/index.mdx b/apps/docs/src/content/03-patterns/01-patterns/errorhandling/index.mdx index b9726c2229..8f2e0ea5a8 100644 --- a/apps/docs/src/content/03-patterns/01-patterns/errorhandling/index.mdx +++ b/apps/docs/src/content/03-patterns/01-patterns/errorhandling/index.mdx @@ -52,8 +52,7 @@ Kontext erhalten und der Fehler wirkt sich nicht auf die ganze Um Errors auf kleine Bereiche zu begrenzen, nutzen wir im mStudio Loading und Error Boundaries. Diese kapseln technische Fehler ab und sorgen für konsistentes -Feedback. Details dazu sind in der Guideline zu -[Boundaries (Internal)](/02-foundations/04-internal/01-boundaries) beschrieben. +Feedback. --- diff --git a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css b/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css index 46599827d7..91ff21999f 100644 --- a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css +++ b/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css @@ -89,22 +89,6 @@ background-color: var(--code-block--background-color) !important; font-size: var(--font-size-text--s); } - - .staticModal { - --modal--size--s: auto; - --modal--size--m: auto; - --modal--size--l: auto; - - > div { - pointer-events: auto; - height: unset; - padding: unset; - justify-content: unset; - align-items: unset; - position: unset; - box-shadow: var(--shadow--overlay); - } - } } .editorContainer { diff --git a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx b/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx index d82b25836c..ed8ab188f9 100644 --- a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx +++ b/apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.tsx @@ -9,7 +9,6 @@ import { import { extractEditorScope } from "@/lib/liveCode/components/LiveCodeEditor/lib/extractEditorScope"; import extractDefaultExport from "@/lib/liveCode/components/LiveCodeEditor/lib/extractDefaultExport"; import styles from "./LiveCodeEditor.module.css"; -import * as EditorComponents from "./components"; import clsx from "clsx"; import { Button, Icon, LayoutCard } from "@mittwald/flow-react-components"; import { IconArrowBarBoth } from "@tabler/icons-react"; @@ -242,7 +241,6 @@ const LiveCodeEditor: FC = (props) => { code={codeToDisplay} scope={{ ...scope, - ...EditorComponents, }} transformCode={transformCode} > diff --git a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/StaticModal/StaticModal.tsx b/apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/StaticModal/StaticModal.tsx deleted file mode 100644 index 067f94843e..0000000000 --- a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/StaticModal/StaticModal.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { FC, PropsWithChildren } from "react"; -import clsx from "clsx"; -import styles from "../../LiveCodeEditor.module.css"; - -export const StaticModal: FC = (props) => { - return ( -
-
-
{props.children}
-
-
- ); -}; diff --git a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/index.ts b/apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/index.ts deleted file mode 100644 index 297ef1bd22..0000000000 --- a/apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { StaticModal } from "@/lib/liveCode/components/LiveCodeEditor/components/StaticModal/StaticModal"; diff --git a/apps/docs/types.d.ts b/apps/docs/types.d.ts index 9baf3db5f4..62afbde57b 100644 --- a/apps/docs/types.d.ts +++ b/apps/docs/types.d.ts @@ -20,5 +20,4 @@ declare global { declare const Row: ComponentType; declare const PropertiesTables: ComponentType; declare const Column: ComponentType; - declare const StaticModal: ComponentType; } diff --git a/apps/remote-dom-demo/types.d.ts b/apps/remote-dom-demo/types.d.ts index 9baf3db5f4..62afbde57b 100644 --- a/apps/remote-dom-demo/types.d.ts +++ b/apps/remote-dom-demo/types.d.ts @@ -20,5 +20,4 @@ declare global { declare const Row: ComponentType; declare const PropertiesTables: ComponentType; declare const Column: ComponentType; - declare const StaticModal: ComponentType; }