FCT 30936 PoC dynamic columns in use graphqldatasource

.cursor/rules/02-typescript-testing.mdc

@@ -17,13 +17,15 @@ alwaysApply: false
 - Implement proper generic constraints.
 
 # Testing Standards
-- Write **Vitest** unit tests for utilities and hooks.
+- Write **Vitest** unit tests for utilities and hooks and components.
 - Create **Storybook stories** for visual testing.
 - Include **accessibility tests** using axe-playwright.
 - Test component variants and edge cases.
 - Avoid excessive mocking; test behavior, not internals.
 - Always run tests to confirm changes.
 - Do not import `@testing-library/jest-dom` 
+- Import vitest methods like: describe, it, expect, etc. explicitily
+- name test files with `.test.tsx` or `.test.ts`, never with `.specs.ts`
 
 ## Example with Icon component
 

packages/react/src/components/Utilities/Await/Await.tsx

@@ -0,0 +1,50 @@
+import { ReactNode, useEffect, useState } from "react"
+
+type AwaitProps<T> = {
+  resolve: Promise<T> | T
+  fallback: ReactNode
+  error?: ReactNode
+  className?: string
+  children: (value: T) => ReactNode
+}
+
+export const Await = <T,>({
+  resolve,
+  fallback,
+  error: errorFallback,
+  children,
+}: AwaitProps<T>): ReactNode => {
+  const [resolvedValue, setResolvedValue] = useState<T | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+  const [isPending, setIsPending] = useState(false)
+
+  useEffect(() => {
+    if (resolve instanceof Promise) {
+      setIsPending(true)
+      resolve
+        .then((value) => {
+          setResolvedValue(value)
+        })
+        .catch((error) => {
+          setError(error)
+        })
+        .finally(() => {
+          setIsPending(false)
+        })
+    } else {
+      setResolvedValue(resolve)
+      setIsPending(false)
+    }
+  }, [resolve])
+
+  if (isPending) {
+    return fallback
+  }
+  if (error) {
+    return errorFallback ?? null
+  }
+  if (resolvedValue) {
+    return children(resolvedValue)
+  }
+  return null
+}

packages/react/src/components/Utilities/Await/__stories__/Await.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Button } from "@/components/Actions/Button"
+import { Skeleton } from "@/ui/skeleton"
+import { ComponentProps, useCallback, useEffect, useState } from "react"
+import { Await } from "../index"
+
+const ExampleComponent = (args: Story["args"]) => {
+  const [count, setCount] = useState(0)
+  const [value, setValue] = useState<Promise<string> | null>(null)
+
+  const triggerPromise = useCallback(() => {
+    setValue(
+      new Promise((resolve) =>
+        setTimeout(() => resolve(`${args.resolve as string} - ${count}`), 1000)
+      )
+    )
+    setCount(count + 1)
+  }, [args.resolve, count])
+
+  useEffect(() => {
+    triggerPromise()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <>
+      <div style={{ marginBottom: "20px" }}>
+        <Button onClick={() => triggerPromise()} label="Trigger promise" />
+      </div>
+      <Await fallback={args.fallback} resolve={value}>
+        {args.children}
+      </Await>
+    </>
+  )
+}
+
+const meta = {
+  title: "Await",
+  component: Await,
+  argTypes: {
+    fallback: {
+      description:
+        "Fallback to display when the promise is pending. It can be a ReactNode",
+    },
+    resolve: {
+      description:
+        "Value to await for, it can be a promise or a primitive value",
+    },
+    error: {
+      description: "Error to display when the promise is rejected",
+    },
+    children: {
+      description:
+        "Children to display when the promise is resolved. It's a function that gets the resolved value as an argument",
+    },
+  },
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "This is an utility component. The `Await` component is used to display a fallback component when a promise is resolved, but it accepts a promise or a primitive value as a prop, you don't need to take care. ",
+      },
+    },
+  },
+  tags: ["autodocs", "stable"],
+} satisfies Meta<ComponentProps<typeof Await>>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => <ExampleComponent {...args} />,
+  args: {
+    resolve: "Hello",
+    fallback: "Loading...",
+    children: (value) => `${value}`,
+  },
+}
+
+export const WithSkeleton: Story = {
+  render: (args) => <ExampleComponent {...args} />,
+  args: {
+    resolve: "Hello",
+    fallback: <Skeleton className="h-4 w-full" />,
+    children: (value) => `${value}`,
+  },
+}

packages/react/src/components/Utilities/Await/index.tsx

@@ -0,0 +1 @@
+export * from "./Await"

packages/react/src/experimental/Forms/Fields/Checkbox/index.tsx

@@ -50,6 +50,12 @@ interface CheckboxProps extends DataAttributes {
    * @default false
    */
   presentational?: boolean
+
+  /**
+   * Whether the checkbox should stop event propagation
+   * @default false
+   */
+  stopPropagation?: boolean
 }
 
 export function Checkbox({
@@ -62,6 +68,7 @@ export function Checkbox({
   value,
   hideLabel = false,
   presentational = false,
+  stopPropagation = false,
   ...rest
 }: CheckboxProps) {
   return (
@@ -75,6 +82,7 @@ export function Checkbox({
       value={value}
       hideLabel={hideLabel}
       tabIndex={presentational ? -1 : undefined}
+      onClick={(e) => stopPropagation && e.stopPropagation()}
       {...rest}
     />
   )

packages/react/src/experimental/OneCard/OneCard.tsx

@@ -135,7 +135,10 @@ export function OneCard({
       {link && (
         <Link
           href={link}
-          className={cn("absolute inset-0 z-0 block rounded-xl", focusRing())}
+          style={{
+            zIndex: 1,
+          }}
+          className={cn("z-1 absolute inset-0 block rounded-xl", focusRing())}
           aria-label={title}
         />
       )}