fix build

nx.json

@@ -11,8 +11,9 @@
         "build:icons",
         "build:imports",
         "build:css",
-        "^build:docs-properties",
-        "^build:remote-components"
+        "build:base",
+        "build:docs-properties",
+        "build:remote-components"
       ],
       "cache": true
     },
@@ -47,10 +48,6 @@
     "build:imports": {
       "cache": true,
       "inputs": ["default", "{projectRoot}/src/content/**/*.mdx"]
-    },
-    "build:base": {
-      "cache": true,
-      "inputs": ["default"]
     }
   }
 }

package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "fs-jetpack": "^5.1.0",
     "lerna": "^8.1.9",
-    "nx": "^20.3.1",
+    "nx": "20.2.2",
     "prettier": "^3.4.2",
     "prettier-plugin-jsdoc": "^1.3.2",
     "prettier-plugin-pkgsort": "^0.2.1",

packages/components/package.json

@@ -392,7 +392,7 @@
       "import": "./dist/js/Wrap.js"
     },
     "./ViewComponentContext": {
-      "types": "./dist/js/types/lib/ViewComponentContext/index.d.ts",
+      "types": "./dist/js/types/lib/viewComponentContext/index.d.ts",
       "import": "./dist/js/ViewComponentContext.js"
     },
     "./hooks": {

packages/docs/src/lib/PropertiesTables/components/PropertyRow.tsx

@@ -30,7 +30,7 @@ export const PropertyRow: React.FC<PropertyTableGroupProps> = ({
           components={omit(customComponents, [
             "Content",
             "Heading",
-            "InlineAlert",
+            "Alert",
             "DoAndDont",
             "ColumnLayout",
           ])}

packages/docs/src/lib/mdx/components/MdxFileView/MdxFileView.tsx

@@ -154,16 +154,20 @@ export const MdxFileView: FC<Props> = (props) => {
   return (
     <NextMDXRemote
       {...mdxFile.mdxSource}
-      components={{
-        LiveCodeEditor: ExampleLiveCodeEditor,
-        PropertiesTables: ExamplePropertiesTables,
-        Do: ExampleDo,
-        Dont: ExampleDont,
-        Info: ExampleInfo,
-        MStudio: ExampleStudio,
-        Plain: ExamplePlain,
-        ...customComponents,
-      }}
+      components={
+        {
+          LiveCodeEditor: ExampleLiveCodeEditor,
+          PropertiesTables: ExamplePropertiesTables,
+          Do: ExampleDo,
+          Dont: ExampleDont,
+          Info: ExampleInfo,
+          MStudio: ExampleStudio,
+          Plain: ExamplePlain,
+          ...customComponents,
+          // @todo: remove when MDXRemote types are fixed
+          // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+        } as any
+      }
     />
   );
 };

packages/docs/src/lib/mdx/components/MdxFileView/customComponents.tsx

@@ -1,8 +1,8 @@
 import styles from "./customComponents.module.css";
 import Heading from "@mittwald/flow-react-components/Heading";
-import type { MDXComponents } from "mdx/types";
 import Alert from "@mittwald/flow-react-components/Alert";
 import Content from "@mittwald/flow-react-components/Content";
+import type { PropsWithChildren } from "react";
 import React from "react";
 import CopyButton from "@mittwald/flow-react-components/CopyButton";
 import Link from "@mittwald/flow-react-components/Link";
@@ -23,7 +23,7 @@ import {
 } from "@mittwald/flow-react-components/Table";
 import { Label } from "@mittwald/flow-react-components/Label";
 
-export const customComponents: MDXComponents = {
+export const customComponents = {
   Content: Content,
   Heading: Heading,
   Alert: Alert,
@@ -33,7 +33,7 @@ export const customComponents: MDXComponents = {
   Label: Label,
   Link: Link,
 
-  pre: ({ children }) => (
+  pre: ({ children }: PropsWithChildren) => (
     <div className={styles.preContainer}>
       <pre className={styles.pre}>{children}</pre>
       <CopyButton
@@ -45,43 +45,49 @@ export const customComponents: MDXComponents = {
     </div>
   ),
 
-  code: ({ children }) => <InlineCode>{children}</InlineCode>,
+  code: ({ children }: PropsWithChildren) => (
+    <InlineCode>{children}</InlineCode>
+  ),
 
-  p: ({ children }) => (
+  p: ({ children }: PropsWithChildren) => (
     <Text className={styles.p} elementType="p">
       {children}
     </Text>
   ),
 
-  ul: ({ children }) => <ul className={styles.ul}>{children}</ul>,
+  ul: ({ children }: PropsWithChildren) => (
+    <ul className={styles.ul}>{children}</ul>
+  ),
 
-  li: ({ children }) => <li className={styles.li}>{children}</li>,
+  li: ({ children }: PropsWithChildren) => (
+    <li className={styles.li}>{children}</li>
+  ),
 
-  h1: ({ children }) => (
+  h1: ({ children }: PropsWithChildren) => (
     <Heading level={2} size="l" className={styles.heading2}>
       {children}
     </Heading>
   ),
 
-  h2: ({ children }) => (
+  h2: ({ children }: PropsWithChildren) => (
     <Heading level={3} size="m" className={styles.heading}>
       {children}
     </Heading>
   ),
 
-  h3: ({ children }) => (
+  h3: ({ children }: PropsWithChildren) => (
     <Heading level={4} size="s" className={styles.heading}>
       {children}
     </Heading>
   ),
 
-  h4: ({ children }) => (
+  h4: ({ children }: PropsWithChildren) => (
     <Heading level={5} className={styles.heading}>
       {children}
     </Heading>
   ),
 
-  a: ({ children, href }) => {
+  a: ({ children, href }: PropsWithChildren<{ href?: string }>) => {
     if (href?.startsWith("http")) {
       return (
         <Link href={href} inline>
@@ -101,10 +107,14 @@ export const customComponents: MDXComponents = {
 
   hr: () => <Separator className={styles.separator} />,
 
-  table: ({ children }) => <Table>{children}</Table>,
-  thead: ({ children }) => <TableHeader>{children}</TableHeader>,
-  tr: ({ children }) => <TableRow>{children}</TableRow>,
-  th: ({ children }) => <TableColumn>{children}</TableColumn>,
-  tbody: ({ children }) => <TableBody>{children}</TableBody>,
-  td: ({ children }) => <TableCell>{children}</TableCell>,
-};
+  table: ({ children }: PropsWithChildren) => <Table>{children}</Table>,
+  thead: ({ children }: PropsWithChildren) => (
+    <TableHeader>{children}</TableHeader>
+  ),
+  tr: ({ children }: PropsWithChildren) => <TableRow>{children}</TableRow>,
+  th: ({ children }: PropsWithChildren) => (
+    <TableColumn>{children}</TableColumn>
+  ),
+  tbody: ({ children }: PropsWithChildren) => <TableBody>{children}</TableBody>,
+  td: ({ children }: PropsWithChildren) => <TableCell>{children}</TableCell>,
+} as const;

packages/remote-elements/src/auto-generated/index.ts

@@ -3,109 +3,109 @@
 export * from "./RemoteTooltipElement";
 export * from "./RemoteTimeFieldElement";
 export * from "./RemoteTextFieldElement";
-export * from "./RemoteTextAreaElement";
 export * from "./RemoteTextElement";
 export * from "./RemoteTabsElement";
 export * from "./RemoteTableElement";
 export * from "./RemoteSliderElement";
+export * from "./RemoteTextAreaElement";
 export * from "./RemoteSkeletonTextElement";
 export * from "./RemoteSkeletonElement";
-export * from "./RemoteSeparatorElement";
 export * from "./RemoteSelectElement";
+export * from "./RemoteSeparatorElement";
 export * from "./RemoteSegmentedControlElement";
-export * from "./RemoteSectionElement";
 export * from "./RemoteSearchFieldElement";
+export * from "./RemoteSectionElement";
 export * from "./RemoteRadioGroupElement";
 export * from "./RemoteProgressBarElement";
 export * from "./RemotePopoverElement";
 export * from "./RemoteNumberFieldElement";
-export * from "./RemoteNavigationElement";
+export * from "./RemoteNotificationProviderElement";
+export * from "./RemoteNotificationElement";
 export * from "./RemoteModalElement";
+export * from "./RemoteNavigationElement";
 export * from "./RemoteMessageElement";
 export * from "./RemoteMenuItemElement";
 export * from "./RemoteMarkdownElement";
-export * from "./RemoteLoadingSpinnerElement";
-export * from "./RemoteListElement";
-export * from "./RemoteLinkElement";
 export * from "./RemoteLightBoxElement";
-export * from "./RemoteLayoutCardElement";
+export * from "./RemoteLinkElement";
+export * from "./RemoteListElement";
+export * from "./RemoteLoadingSpinnerElement";
 export * from "./RemoteLabeledValueElement";
+export * from "./RemoteLayoutCardElement";
 export * from "./RemoteLabelElement";
-export * from "./RemoteInlineCodeElement";
-export * from "./RemoteInitialsElement";
-export * from "./RemoteImageElement";
 export * from "./RemoteIllustratedMessageElement";
+export * from "./RemoteImageElement";
+export * from "./RemoteInitialsElement";
+export * from "./RemoteInlineCodeElement";
 export * from "./RemoteIconElement";
-export * from "./RemoteHeadingElement";
 export * from "./RemoteHeaderNavigationElement";
-export * from "./RemoteHeaderElement";
+export * from "./RemoteHeadingElement";
 export * from "./RemoteFragmentElement";
 export * from "./RemoteFileFieldElement";
-export * from "./RemoteFileCardListElement";
 export * from "./RemoteFileCardElement";
 export * from "./RemoteFieldErrorElement";
+export * from "./RemoteFileCardListElement";
 export * from "./RemoteFieldDescriptionElement";
 export * from "./RemoteDateRangePickerElement";
 export * from "./RemoteDatePickerElement";
 export * from "./RemoteCounterBadgeElement";
-export * from "./RemoteCopyButtonElement";
 export * from "./RemoteContextualHelpElement";
+export * from "./RemoteCopyButtonElement";
 export * from "./RemoteContextMenuElement";
 export * from "./RemoteContentElement";
 export * from "./RemoteColumnLayoutElement";
 export * from "./RemoteCodeBlockElement";
 export * from "./RemoteCheckboxGroupElement";
 export * from "./RemoteCheckboxButtonElement";
 export * from "./RemoteCheckboxElement";
-export * from "./RemoteButtonElement";
 export * from "./RemoteBreadcrumbElement";
+export * from "./RemoteButtonElement";
 export * from "./RemoteBadgeElement";
-export * from "./RemoteAvatarElement";
+export * from "./RemoteHeaderElement";
 export * from "./RemoteAlignElement";
+export * from "./RemoteAvatarElement";
 export * from "./RemoteAlertIconElement";
-export * from "./RemoteAlertBadgeElement";
 export * from "./RemoteAlertElement";
 export * from "./RemoteActivityElement";
 export * from "./RemoteActionGroupElement";
-export * from "./RemoteActionElement";
 export * from "./RemoteAccordionElement";
-export * from "./RemoteNotificationElement";
-export * from "./RemoteNotificationProviderElement";
+export * from "./RemoteActionElement";
+export * from "./RemoteAlertBadgeElement";
 export * from "./RemoteTooltipTriggerElement";
 export * from "./RemoteTabTitleElement";
 export * from "./RemoteTabElement";
-export * from "./RemoteTableRowElement";
 export * from "./RemoteTableHeaderElement";
-export * from "./RemoteTableFooterRowElement";
-export * from "./RemoteTableColumnElement";
+export * from "./RemoteTableRowElement";
 export * from "./RemoteTableCellElement";
+export * from "./RemoteTableColumnElement";
 export * from "./RemoteTableBodyElement";
-export * from "./RemoteOptionElement";
+export * from "./RemoteTableFooterRowElement";
 export * from "./RemoteCountryOptionsElement";
+export * from "./RemoteOptionElement";
 export * from "./RemoteSegmentElement";
 export * from "./RemoteRadioButtonElement";
+export * from "./RemoteRadioElement";
 export * from "./RemotePopoverTriggerElement";
-export * from "./RemoteNavigationGroupElement";
 export * from "./RemoteModalTriggerElement";
-export * from "./RemoteRadioElement";
+export * from "./RemoteNavigationGroupElement";
+export * from "./RemoteLightBoxTriggerElement";
 export * from "./RemoteListItemsViewElement";
 export * from "./RemoteListItemContainerViewElement";
+export * from "./RemoteListPaginationInfosViewElement";
+export * from "./RemoteListLoadNextBatchButtonViewElement";
+export * from "./RemoteListFooterViewElement";
 export * from "./RemoteListViewModeMenuViewElement";
 export * from "./RemoteListSearchFieldViewElement";
 export * from "./RemoteListHeaderViewElement";
 export * from "./RemoteListListViewElement";
-export * from "./RemoteListPaginationInfosViewElement";
-export * from "./RemoteListLoadNextBatchButtonViewElement";
-export * from "./RemoteListFooterViewElement";
-export * from "./RemoteLightBoxTriggerElement";
+export * from "./RemoteContextualHelpTriggerElement";
 export * from "./RemoteContextMenuTriggerElement";
 export * from "./RemoteContextMenuSectionElement";
-export * from "./RemoteContextualHelpTriggerElement";
+export * from "./RemoteListSortingPickerMenuItemViewElement";
+export * from "./RemoteListSortingPickerViewElement";
 export * from "./RemoteListFilterPickerMenuItemViewElement";
 export * from "./RemoteListFilterPickerViewElement";
 export * from "./RemoteListActiveFilterListViewElement";
 export * from "./RemoteListActiveFilterItemViewElement";
-export * from "./RemoteListSortingPickerMenuItemViewElement";
-export * from "./RemoteListSortingPickerViewElement";
 export * from "./RemoteReactHookFormFieldContentViewElement";
 export * from "./RemoteListItemViewElement";