Add Date column

.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,63 @@
+import React, { useState, useRef, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {generatedData} from './generatedData';
+
+import { Card as InfernoCard } from "devextreme/esm/__internal/grids/new/card_view/content_view/content/card/card";
+import { wrapInfernoWithReact } from "../utils";
+import { Footer } from "./templates";
+
+interface Props {
+  allowSelectOnClick: boolean;
+  showSelectCheckBox: boolean;
+  showImage: boolean;
+  showFooter: boolean;
+}
+
+const data = generatedData[0];
+const columns = Object.keys(data);
+
+const row = {
+  key: 1,
+  cells: columns.map((column) => ({
+    column: {
+      caption: column,
+    },
+    text: data[column]
+  }))
+}
+
+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: {
+    allowSelectOnClick: true,
+    showSelectCheckBox: true,
+    showImage: true,
+    showFooter: true,
+  },
+
+  render(props) {
+    const cover = props.showImage ? {
+      imageExpr: function(data) {console.log(arguments)},
+      altExpr: function(data) {console.log(arguments)},
+    } : {};
+
+    const footer = props.showFooter && Footer;
+
+    return <Card
+      allowSelectOnClick={props.allowSelectOnClick}
+      isCheckBoxesRendered={props.showSelectCheckBox}
+      row={row}
+      cover={cover}
+    />
+  }
+};