CardView - create storybooks

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,
+    },
+  },
+};

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

@@ -0,0 +1,269 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import dxCardView from "devextreme/ui/card_view";
+import { wrapDxWithReact } from "../utils";
+import { store } from "./data";
+import { generatedData } from "./generatedData";
+
+const CardView = wrapDxWithReact(dxCardView);
+
+const dataSources = {
+  empty: [],
+  local: generatedData,
+  remote: store,
+}
+
+const columns = {
+  remote: [
+    {
+      dataField: "OrderNumber",
+      alignment: 'right',
+      dataType: "number",
+    },
+    {
+      dataField: "OrderDate",
+      visible: false,
+    },
+    "StoreCity",
+    "StoreState",
+    "Employee",
+    {
+      dataField: "SaleAmount",
+      dataType: "number",
+    },
+  ],
+  local: [
+      'firstName',
+      'lastName',
+      'gender',
+      'birthDate'
+  ],
+  sortedRemote: [
+    {
+      dataField: "OrderNumber",
+      alignment: 'right',
+      dataType: "number",
+      sortOrder: 'asc',
+      sortIndex: 1,
+    },
+    {
+      dataField: "OrderDate",
+      visible: false,
+    },
+    {
+      dataField: "StoreCity",
+      sortOrder: 'desc',
+      sortIndex: 0,
+    },
+    "StoreState",
+    "Employee",
+    "SaleAmount",
+  ],
+  localHeaderFilter: [
+    {
+      dataField: 'firstName',
+      headerFilter: {
+        allowSelectAll: false,
+        search: {
+          enabled: true,
+        },
+        values: ['Anet', 'Annabela'],
+      },
+    },
+    {
+        dataField: 'lastName',
+        headerFilter: {
+          filterType: 'exclude',
+          values: ['Abbey'],
+        }
+    },
+    {
+      dataField: 'gender',
+      allowHeaderFiltering: false,
+    },
+    {
+      dataField: 'birthDate',
+      dataType: 'date',
+      calculateCellValue: (data) => {
+        return new Date(data.birthDate);
+      },
+      calculateDisplayValue: (data) => {
+        return new Date(data.birthDate).toDateString();
+      }
+    },
+  ]
+}
+
+const meta: Meta<typeof CardView> = {
+  title: "Grids/CardView",
+  component: CardView,
+  argTypes: {
+    dataSource: {
+      options: Object.keys(dataSources),
+      mapping: dataSources,
+      control: { type: 'radio' },
+    },
+    width: {
+      control: 'text',
+    },
+    height: {
+      control: 'text',
+    },
+    keyExpr: {
+      control: 'text',
+    },
+    cardsPerRow: {
+      options: ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      control: { type: 'select' },
+    },
+    paging: {
+      pageSize: 12,
+    },
+    // cardMinWidth: 250,
+    // cardMaxWidth: 350,
+    // filterPanel: { visible: true },
+    columns: {
+      options: Object.keys(columns),
+      mapping: columns,
+      control: { type: 'radio' },
+    },
+    headerFilter: {
+      control: 'object',
+    },
+    searchPanel: {
+      control: 'object',
+    },
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardView>;
+
+export const DefaultMode: Story = {
+  args: {
+    dataSource: 'local',
+    width: "100%",
+    // TODO: Fix height limit
+    // height: '500px',
+    keyExpr: "OrderNumber",
+    cardsPerRow: "auto",
+    paging: {
+      pageSize: 12,
+    },
+    cardMinWidth: 250,
+    cardMaxWidth: 350,
+    columns: 'local',
+    filterPanel: { visible: true },
+  },
+};
+
+export const RawControls: Story = {
+  ...DefaultMode,
+  argTypes: {
+    ...meta.argTypes,
+    dataSource: {
+      control: 'object',
+      mapping: null,
+    },
+    columns: {
+      control: 'object',
+      mapping: null,
+    },
+  },
+  args: {
+    ...DefaultMode.args,
+    dataSource: dataSources.local.slice(0, 10),
+    columns: columns.local,
+  }
+};
+
+export const FixatedCardsPerRow: Story = {
+  ...DefaultMode,
+  args: {
+    ...DefaultMode.args,
+    cardsPerRow: 3
+  },
+};
+
+export const EmptyCardView: Story = {
+  ...DefaultMode,
+  args: {
+    ...DefaultMode.args,
+    dataSource: 'empty',
+  },
+};
+
+export const CardViewWithCover  : Story = {
+  ...DefaultMode,
+  args: {
+    ...DefaultMode.args,
+    cardCover: {
+      imageExpr: (data) => `https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos/${data.picture}`,
+      altExpr: 'FirstName',
+      // ratio: '2 / 1',
+    },
+  },
+};
+
+export const SortedCardView: Story = {
+  ...DefaultMode,
+  args: {
+    ...DefaultMode.args,
+    dataSource: 'remote',
+    columns: 'sortedRemote',
+  },
+};
+
+export const SearchCardView: Story = {
+  ...DefaultMode,
+  args: {
+    ...DefaultMode.args,
+    dataSource: 'local',
+    columns: 'local',
+    searchPanel: {
+      highlightCaseSensitive: false,
+      highlightSearchText: true,
+      text: '',
+    }
+  }
+}
+
+export const HeaderFilterStory: Story = {
+  ...DefaultMode,
+  args: {
+    ...DefaultMode.args,
+    headerFilter: {
+      visible: true,
+      width: 252,
+      height: 325,
+      allowSelectAll: true,
+      search: {
+        enabled: false,
+        timeout: 500,
+        mode: 'contains',
+        editorOptions: {},
+      },
+      texts: {
+        emptyValue: 'empty',
+        ok: 'ok',
+        cancel: 'cancel',
+      },
+    }
+  }
+}
+
+export const SelectionStory: Story = {
+  ...DefaultMode,
+  args: {
+    ...DefaultMode.args,
+    keyExpr: 'id',
+    selection: {
+      mode: 'multiple',
+      showCheckBoxesMode: 'onClick',
+      allowSelectAll: true,
+      selectAllMode: 'allPages',
+    }
+  }
+}
+

apps/react-storybook/stories/card_view/data.ts

@@ -0,0 +1,40 @@
+import CustomStore from 'devextreme/data/custom_store';
+
+export const items = new Array(1000).fill(null).map(() => (
+  {column1: 1, column2: 2}
+));
+
+
+function isNotEmpty(value: string | undefined | null) {
+  return value !== undefined && value !== null && value !== '';
+}
+
+export const store = new CustomStore({
+  key: 'OrderNumber',
+  async load(loadOptions) {
+    const paramNames = [
+      'skip', 'take', 'requireTotalCount', 'requireGroupCount',
+      'sort', 'filter', 'totalSummary', 'group', 'groupSummary',
+    ];
+
+    const queryString = paramNames
+      .filter((paramName) => isNotEmpty(loadOptions[paramName]))
+      .map((paramName) => `${paramName}=${JSON.stringify(loadOptions[paramName])}`)
+      .join('&');
+
+    try {
+      const response = await fetch(`https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/orders?${queryString}`);
+
+      const result = await response.json();
+
+      return {
+        data: result.data,
+        totalCount: result.totalCount,
+        summary: result.summary,
+        groupCount: result.groupCount,
+      };
+    } catch (err) {
+      throw new Error('Data Loading Error');
+    }
+  },
+});