fix: fix props context not properly cleared in remote components (#1240)

mittwald · Mar 6, 2025 · 4152991 · 4152991
1 parent e84a262
commit 4152991
Show file tree

Hide file tree

Showing 167 changed files with 521 additions and 924 deletions.
diff --git a/...components/dev/remote-components-generator/generation/generateRemoteReactComponentFile.ts b/...components/dev/remote-components-generator/generation/generateRemoteReactComponentFile.ts
@@ -1,5 +1,4 @@
 import type { ComponentDoc } from "react-docgen-typescript";
-import { checkTagIsSet } from "../lib/docTags";
 import { remoteComponentBaseNameOf } from "../lib/remoteComponentBaseNameOf";
 import { remoteComponentNameOf } from "../lib/remoteComponentNameOf";
 import { remoteElementTagNameOf } from "../lib/remoteElementTagNameOf";
@@ -10,7 +9,6 @@ export function generateRemoteReactComponentFile(c: ComponentDoc) {
   const t = {
     remoteComponentName: remoteComponentNameOf(c),
     name: remoteComponentBaseNameOf(c),
-    clearPropsContext: checkTagIsSet(c.tags, "clear-props-context"),
     events: Object.keys(componentProps)
       .sort()
       .filter((propName) => propName.startsWith("on"))
@@ -30,9 +28,6 @@ export function generateRemoteReactComponentFile(c: ComponentDoc) {
     export const ${t.name} = createFlowRemoteComponent(
       "${remoteElementTagNameOf(c)}", 
       "${t.name}", 
-      {
-        clearPropsContext: ${t.clearPropsContext ? "true" : "false"},
-      },
       ${t.remoteComponentName}, {
       slotProps: {
         wrapper: false,

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
@@ -1,27 +1,20 @@
-import type { ComponentProps, PropsWithChildren } from "react";
-import React from "react";
-import type { PropsContext } from "@/lib/propsContext";
-import {
-  ClearPropsContext,
-  dynamic,
-  PropsContextProvider,
-} from "@/lib/propsContext";
-import styles from "./Alert.module.scss";
-import clsx from "clsx";
 import { AlertIcon } from "@/components/AlertIcon";
-import type { PropsWithStatus } from "@/lib/types/props";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import type { PropsContext } from "@/lib/propsContext";
+import { dynamic, PropsContextProvider } from "@/lib/propsContext";
+import type { PropsWithStatus } from "@/lib/types/props";
+import ClearPropsContextView from "@/views/ClearPropsContextView";
+import clsx from "clsx";
+import type { ComponentProps, PropsWithChildren } from "react";
+import styles from "./Alert.module.scss";
 
 export interface AlertProps
   extends PropsWithChildren<ComponentProps<"aside">>,
     PropsWithStatus,
     FlowComponentProps {}
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const Alert = flowComponent<"Alert", HTMLElement>("Alert", (props) => {
   const { children, className, status = "info", ref, ...rest } = props;
 
@@ -48,13 +41,13 @@ export const Alert = flowComponent<"Alert", HTMLElement>("Alert", (props) => {
   };
 
   return (
-    <ClearPropsContext>
+    <ClearPropsContextView>
       <aside {...rest} className={rootClassName} ref={ref}>
         <PropsContextProvider props={propsContext}>
           {children}
         </PropsContextProvider>
       </aside>
-    </ClearPropsContext>
+    </ClearPropsContextView>
   );
 });
 

diff --git a/packages/components/src/components/AlertBadge/AlertBadge.tsx b/packages/components/src/components/AlertBadge/AlertBadge.tsx
@@ -1,24 +1,20 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
-import styles from "./AlertBadge.module.scss";
-import clsx from "clsx";
 import { AlertIcon } from "@/components/AlertIcon";
 import { Text } from "@/components/Text";
-import type { PropsWithClassName, PropsWithStatus } from "@/lib/types/props";
-import { ClearPropsContext } from "@/lib/propsContext";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import type { PropsWithClassName, PropsWithStatus } from "@/lib/types/props";
+import ClearPropsContextView from "@/views/ClearPropsContextView";
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import styles from "./AlertBadge.module.scss";
 
 export interface AlertBadgeProps
   extends PropsWithChildren,
     PropsWithStatus,
     FlowComponentProps,
     PropsWithClassName {}
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const AlertBadge = flowComponent<"AlertBadge", HTMLDivElement>(
   "AlertBadge",
   (props) => {
@@ -27,12 +23,12 @@ export const AlertBadge = flowComponent<"AlertBadge", HTMLDivElement>(
     const rootClassName = clsx(styles.alertBadge, styles[status], className);
 
     return (
-      <ClearPropsContext>
+      <ClearPropsContextView>
         <div className={rootClassName} {...rest} ref={ref}>
           <AlertIcon size="s" className={styles.alertIcon} status={status} />
           <Text className={styles.text}>{children}</Text>
         </div>
-      </ClearPropsContext>
+      </ClearPropsContextView>
     );
   },
 );

diff --git a/packages/components/src/components/AlertIcon/AlertIcon.tsx b/packages/components/src/components/AlertIcon/AlertIcon.tsx
@@ -1,15 +1,15 @@
-import type { ComponentType, FC } from "react";
+import type { IconProps } from "@/components/Icon";
 import {
   IconDanger,
   IconInfo,
   IconSuccess,
   IconWarning,
 } from "@/components/Icon/components/icons";
-import locales from "./locales/*.locale.json";
-import { useLocalizedStringFormatter } from "react-aria";
 import type { PropsWithStatus, Status } from "@/lib/types/props";
-import type { IconProps } from "@/components/Icon";
-import { ClearPropsContext } from "@/lib/propsContext";
+import ClearPropsContextView from "@/views/ClearPropsContextView";
+import type { ComponentType, FC } from "react";
+import { useLocalizedStringFormatter } from "react-aria";
+import locales from "./locales/*.locale.json";
 
 export interface AlertIconProps extends PropsWithStatus, IconProps {}
 
@@ -20,10 +20,7 @@ const icons: Record<Status, ComponentType> = {
   warning: IconWarning,
 };
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const AlertIcon: FC<AlertIconProps> = (props) => {
   const { status = "info", ...rest } = props;
 
@@ -38,9 +35,9 @@ export const AlertIcon: FC<AlertIconProps> = (props) => {
   };
 
   return (
-    <ClearPropsContext>
+    <ClearPropsContextView>
       <Icon {...iconProps} />
-    </ClearPropsContext>
+    </ClearPropsContextView>
   );
 };
 

diff --git a/packages/components/src/components/Align/Align.tsx b/packages/components/src/components/Align/Align.tsx
@@ -1,22 +1,18 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
-import styles from "./Align.module.scss";
-import clsx from "clsx";
+import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
+import { flowComponent } from "@/lib/componentFactory/flowComponent";
 import type { PropsContext } from "@/lib/propsContext";
 import PropsContextProvider from "@/lib/propsContext/PropsContextProvider";
 import type { PropsWithClassName } from "@/lib/types/props";
-import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
-import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import styles from "./Align.module.scss";
 
 export interface AlignProps
   extends PropsWithChildren,
     PropsWithClassName,
     FlowComponentProps {}
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const Align = flowComponent("Align", (props) => {
   const { children, className } = props;
 

diff --git a/packages/components/src/components/Avatar/Avatar.tsx b/packages/components/src/components/Avatar/Avatar.tsx
@@ -1,13 +1,13 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
-import styles from "./Avatar.module.scss";
-import clsx from "clsx";
-import type { PropsContext } from "@/lib/propsContext";
-import { ClearPropsContext, PropsContextProvider } from "@/lib/propsContext";
 import { getColorFromChildren } from "@/components/Avatar/lib/getColorFromChildren";
-import type { PropsWithClassName } from "@/lib/types/props";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import type { PropsContext } from "@/lib/propsContext";
+import { PropsContextProvider } from "@/lib/propsContext";
+import type { PropsWithClassName } from "@/lib/types/props";
+import ClearPropsContextView from "@/views/ClearPropsContextView";
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import styles from "./Avatar.module.scss";
 
 export const avatarColors = [
   "blue",
@@ -28,10 +28,7 @@ export interface AvatarProps
   color?: AvatarColors;
 }
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const Avatar = flowComponent<"Avatar", HTMLDivElement>(
   "Avatar",
   (props) => {
@@ -55,13 +52,13 @@ export const Avatar = flowComponent<"Avatar", HTMLDivElement>(
     };
 
     return (
-      <ClearPropsContext>
+      <ClearPropsContextView>
         <div className={rootClassName} ref={ref}>
           <PropsContextProvider props={propsContext}>
             {children}
           </PropsContextProvider>
         </div>
-      </ClearPropsContext>
+      </ClearPropsContextView>
     );
   },
 );

diff --git a/packages/components/src/components/Badge/Badge.tsx b/packages/components/src/components/Badge/Badge.tsx
@@ -1,14 +1,13 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
-import styles from "./Badge.module.scss";
-import clsx from "clsx";
-import type { PropsWithClassName } from "@/lib/types/props";
-import { type PropsContext, PropsContextProvider } from "@/lib/propsContext";
+import { Button } from "@/components/Button";
+import { IconClose } from "@/components/Icon/components/icons";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import { type PropsContext, PropsContextProvider } from "@/lib/propsContext";
+import type { PropsWithClassName } from "@/lib/types/props";
 import type { PressEvent } from "@react-types/shared";
-import { Button } from "@/components/Button";
-import { IconClose } from "@/components/Icon/components/icons";
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import styles from "./Badge.module.scss";
 
 export const badgeColors = [
   "neutral",
@@ -39,10 +38,7 @@ export interface BadgeProps
   isDisabled?: boolean;
 }
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const Badge = flowComponent<"Badge", HTMLDivElement>(
   "Badge",
   (props) => {

diff --git a/packages/components/src/components/Breadcrumb/Breadcrumb.tsx b/packages/components/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,12 +1,11 @@
+import type { PropsContext } from "@/lib/propsContext";
+import { PropsContextProvider } from "@/lib/propsContext";
+import clsx from "clsx";
 import type { FC, PropsWithChildren } from "react";
-import React from "react";
 import * as Aria from "react-aria-components";
 import styles from "./Breadcrumb.module.scss";
-import clsx from "clsx";
 import type { BreadcrumbItemProps } from "./components/BreadcrumbItem";
 import { BreadcrumbItem } from "./components/BreadcrumbItem";
-import type { PropsContext } from "@/lib/propsContext";
-import { PropsContextProvider } from "@/lib/propsContext";
 
 export interface BreadcrumbProps
   extends Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, "children">,
@@ -15,10 +14,7 @@ export interface BreadcrumbProps
   color?: "primary" | "dark" | "light";
 }
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const Breadcrumb: FC<BreadcrumbProps> = (props) => {
   const { children, className, color = "primary", ...rest } = props;
 

diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
@@ -1,17 +1,17 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
-import styles from "./Button.module.scss";
-import * as Aria from "react-aria-components";
-import clsx from "clsx";
-import type { PropsContext } from "@/lib/propsContext";
-import { ClearPropsContext, PropsContextProvider } from "@/lib/propsContext";
+import { useAriaAnnounceActionState } from "@/components/Action/lib/ariaLive";
 import { IconFailed, IconSucceeded } from "@/components/Icon/components/icons";
-import { Wrap } from "@/components/Wrap";
+import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/Text";
+import { Wrap } from "@/components/Wrap";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
-import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
-import { useAriaAnnounceActionState } from "@/components/Action/lib/ariaLive";
+import type { PropsContext } from "@/lib/propsContext";
+import { PropsContextProvider } from "@/lib/propsContext";
+import ClearPropsContextView from "@/views/ClearPropsContextView";
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import * as Aria from "react-aria-components";
+import styles from "./Button.module.scss";
 
 export interface ButtonProps
   extends PropsWithChildren<Aria.ButtonProps>,
@@ -58,10 +58,7 @@ const disablePendingProps = (props: ButtonProps) => {
   return props;
 };
 
-/**
- * @flr-generate all
- * @flr-clear-props-context
- */
+/** @flr-generate all */
 export const Button = flowComponent<"Button", HTMLButtonElement>(
   "Button",
   (props) => {
@@ -152,7 +149,7 @@ export const Button = flowComponent<"Button", HTMLButtonElement>(
     const isStringContent = typeof children === "string";
 
     return (
-      <ClearPropsContext>
+      <ClearPropsContextView>
         <Aria.Button
           className={rootClassName}
           ref={ref}
@@ -170,7 +167,7 @@ export const Button = flowComponent<"Button", HTMLButtonElement>(
           </PropsContextProvider>
           {stateIcon}
         </Aria.Button>
-      </ClearPropsContext>
+      </ClearPropsContextView>
     );
   },
 );