CardView: create initial columns from dataSource first object

.github/workflows/testcafe_tests.yml

@@ -119,6 +119,9 @@ jobs:
           { componentFolder: "dataGrid/sticky/fixed", name: "dataGrid / sticky (1/3)", indices: "1/3" },
           { componentFolder: "dataGrid/sticky/fixed", name: "dataGrid / sticky (2/3)", indices: "2/3" },
           { componentFolder: "dataGrid/sticky/fixed", name: "dataGrid / sticky (3/3)", indices: "3/3" },
+          { componentFolder: "cardView", name: "cardView" },
+          { componentFolder: "cardView", name: "cardView - material", theme: 'material.blue.light' },
+          { componentFolder: "cardView", name: "cardView - fluent", theme: 'fluent.blue.light' },
           { componentFolder: "pivotGrid", name: "pivotGrid", concurrency: 1 },
           { componentFolder: "pivotGrid", name: "pivotGrid - material", theme: 'material.blue.light', concurrency: 1 },
           { componentFolder: "pivotGrid", name: "pivotGrid - fluent", theme: 'fluent.blue.light', concurrency: 1 },

apps/demos/configs/Angular/config.js

@@ -12,6 +12,7 @@ const componentNames = [
   'button-group',
   'button',
   'calendar',
+  'card-view',
   'chart',
   'chat',
   'check-box',

apps/react-storybook/stories/card_view/Card.stories.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useRef, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Card as InfernoCard } from "devextreme/esm/__internal/grids/new/card_view/content_view/content/card/card";
+import { wrapInfernoWithReact } from "../utils";
+
+interface Props {
+  row: {
+    key: unknown;
+    cells: {
+      value: unknown;
+      column: {
+        alignment: "left" | "right" | "center";
+        caption: string;
+      };
+    }[];
+  };
+}
+
+const Card = wrapInfernoWithReact<Props>(InfernoCard);
+
+const meta: Meta<Props> = {
+  title: "Grids/CardView/Card",
+  component: Card,
+};
+
+export default meta;
+
+type Story = StoryObj<Props>;
+
+export const DefaultMode: Story = {
+  args: {
+    row: {
+      cells: [
+        {
+          value: 1,
+          column: {
+            alignment: 'left',
+            caption: 'asd',
+          },
+        },
+        {
+          value: 1,
+          column: {
+            alignment: 'left',
+            caption: 'asd',
+          },
+        },
+        {
+          value: 1,
+          column: {
+            alignment: 'left',
+            caption: 'asd',
+          },
+        },
+        {
+          value: 1,
+          column: {
+            alignment: 'left',
+            caption: 'asd',
+          },
+        },
+        {
+          value: 1,
+          column: {
+            alignment: 'left',
+            caption: 'asd',
+          },
+        },
+      ],
+      key: 1,
+    },
+  },
+};