kwikid-components-react/components/kwikui/table/Table.stories.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.NoSearch = exports.Minimal = exports.LargeDataset = exports.Empty = exports.Default = exports.CustomStyled = exports.CustomPagination = exports.CustomComponents = void 0;
var _react = _interopRequireDefault(require("react"));
var _Table = _interopRequireDefault(require("./Table"));
var _Table2 = _interopRequireDefault(require("./Table.defaults"));
var _TableButton = _interopRequireDefault(require("./TableComponents/TableButton"));
var _TableComponents = _interopRequireDefault(require("./TableComponents/TableComponents"));
var _TableChip = _interopRequireDefault(require("./TableComponents/TableChip"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable no-magic-numbers */
/**
 * The Table component is used to display structured data in rows and columns,
 * with built-in features like sorting, filtering, pagination, and search.
 *
 * ## Usage
 *
 * ```jsx
 * import { KwikUITable } from 'react-kwikui';
 *
 * <KwikUITable
 *   title="User Data"
 *   data={userData}
 *   columns={columns}
 *   options={{ rowsPerPage: 10 }}
 * />
 * ```
 */
var _default = exports.default = {
  title: "KwikUI/Display/Table",
  component: _Table.default,
  parameters: {
    componentSubtitle: "A data table component with sorting, filtering, and pagination",
    docs: {
      description: {
        component: "The Table component provides a comprehensive data display solution with built-in features for managing large datasets in the KwikID platform."
      }
    },
    a11y: {
      config: {
        rules: [{
          id: "table-focus",
          enabled: true
        }]
      }
    }
  },
  argTypes: {
    id: {
      control: "text",
      description: "The ID of the table element",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _Table2.default.id
        }
      }
    },
    title: {
      control: "text",
      description: "The title displayed above the table",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _Table2.default.title
        }
      }
    },
    data: {
      control: "object",
      description: "Array of data objects to display in the table",
      table: {
        type: {
          summary: "any[]"
        },
        defaultValue: {
          summary: "[]"
        }
      }
    },
    columns: {
      control: "object",
      description: "Array of column definitions for the table",
      table: {
        type: {
          summary: "any[]"
        },
        defaultValue: {
          summary: "[]"
        }
      }
    },
    options: {
      control: "object",
      description: "Configuration options for the table behavior",
      table: {
        type: {
          summary: "object"
        },
        defaultValue: {
          summary: "{}"
        }
      }
    }
  }
}; // Sample data for stories
const sampleData = [{
  id: "1",
  name: "Rajesh Kumar",
  email: "rajesh.kumar@example.com",
  phone: "+91 98765 43210",
  status: "Verified",
  kycDate: "2024-01-15",
  documents: "Aadhaar, PAN"
}, {
  id: "2",
  name: "Priya Sharma",
  email: "priya.sharma@example.com",
  phone: "+91 98765 43211",
  status: "Pending",
  kycDate: "2024-01-16",
  documents: "Aadhaar"
}, {
  id: "3",
  name: "Amit Patel",
  email: "amit.patel@example.com",
  phone: "+91 98765 43212",
  status: "Rejected",
  kycDate: "2024-01-17",
  documents: "PAN"
}, {
  id: "4",
  name: "Sneha Gupta",
  email: "sneha.gupta@example.com",
  phone: "+91 98765 43213",
  status: "Verified",
  kycDate: "2024-01-18",
  documents: "Aadhaar, PAN, Voter ID"
}, {
  id: "5",
  name: "Vikram Singh",
  email: "vikram.singh@example.com",
  phone: "+91 98765 43214",
  status: "In Progress",
  kycDate: "2024-01-19",
  documents: "Aadhaar"
}];
const sampleColumns = [{
  name: "id",
  label: "ID",
  options: {
    filter: false,
    sort: true
  }
}, {
  name: "name",
  label: "Full Name",
  options: {
    filter: true,
    sort: true
  }
}, {
  name: "email",
  label: "Email Address",
  options: {
    filter: true,
    sort: true
  }
}, {
  name: "phone",
  label: "Phone Number",
  options: {
    filter: false,
    sort: false
  }
}, {
  name: "status",
  label: "KYC Status",
  options: {
    filter: true,
    sort: true
  },
  props: {
    mapping: {
      Verified: {
        label: "Approved",
        color: "#2e7d32",
        background: "#e8f5e9",
        borderColor: "#2e7d32",
        hint: "This item has been approved"
      },
      Rejected: {
        label: "Rejected",
        color: "#c62828",
        background: "#ffebee",
        borderColor: "#c62828",
        hint: "This item has been rejected"
      },
      _default: {
        label: "Pending",
        color: "#f9a825",
        background: "#fffde7",
        borderColor: "#f9a825",
        hint: "This item is under process"
      }
    }
  }
}, {
  name: "kycDate",
  label: "KYC Date",
  options: {
    filter: true,
    sort: true
  }
}, {
  name: "documents",
  label: "Documents",
  options: {
    filter: false,
    sort: false
  }
}, {
  name: "details",
  label: "Details",
  options: {
    filter: false,
    sort: false
  }
}];

/**
 * Template for rendering the Table component
 */
const Template = args => {
  return /*#__PURE__*/_react.default.createElement(_Table.default, args);
};

/**
 * Default table with KYC verification data
 */
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "KYC Verification Records",
  data: sampleData,
  columns: sampleColumns
});
Default.parameters = {
  docs: {
    description: {
      story: "Default table displaying KYC verification records for customer onboarding in the KwikID platform."
    }
  }
};

/**
 * Table with custom pagination options
 */
const CustomPagination = exports.CustomPagination = Template.bind({});
CustomPagination.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "Customer Data - Custom Pagination",
  data: sampleData,
  columns: sampleColumns,
  options: {
    rowsPerPage: 3,
    rowsPerPageOptions: [3, 5, 10],
    pagination: true
  }
});
CustomPagination.parameters = {
  docs: {
    description: {
      story: "Table with custom pagination settings for displaying customer verification data in smaller chunks."
    }
  }
};

/**
 * Table without search functionality
 */
const NoSearch = exports.NoSearch = Template.bind({});
NoSearch.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "Agent Performance Report",
  data: sampleData,
  columns: sampleColumns,
  options: {
    search: false,
    download: false,
    print: false
  }
});
NoSearch.parameters = {
  docs: {
    description: {
      story: "Table without search functionality for displaying agent performance reports in the admin dashboard."
    }
  }
};

/**
 * Table with all features disabled
 */
const Minimal = exports.Minimal = Template.bind({});
Minimal.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "Simple Data Display",
  data: sampleData,
  columns: sampleColumns,
  options: {
    search: false,
    download: false,
    print: false,
    filter: false,
    sort: false,
    pagination: false,
    selectableRows: "none"
  }
});
Minimal.parameters = {
  docs: {
    description: {
      story: "Minimal table with all interactive features disabled for simple data display in the KwikID user portal."
    }
  }
};

/**
 * Table with custom styling
 */
const CustomStyled = exports.CustomStyled = Template.bind({});
CustomStyled.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "Custom Styled Table",
  data: sampleData,
  columns: sampleColumns,
  options: {
    rowsPerPage: 10,
    searchPlaceholder: "Search customer records...",
    selectToolbarPlacement: "replace"
  }
});
CustomStyled.parameters = {
  docs: {
    description: {
      story: "Table with custom styling and placeholder text for the search functionality in the KwikID admin portal."
    }
  }
};

/**
 * Empty table state
 */
const Empty = exports.Empty = Template.bind({});
Empty.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "No Data Available",
  data: [],
  columns: sampleColumns
});
Empty.parameters = {
  docs: {
    description: {
      story: "Empty table state displayed when no KYC verification records are available in the system."
    }
  }
};

/**
 * Large dataset table
 */
const LargeDataset = exports.LargeDataset = Template.bind({});
LargeDataset.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "All Customer Records",
  data: [...sampleData, ...sampleData.map((item, index) => _objectSpread(_objectSpread({}, item), {}, {
    id: "".concat(parseInt(item.id, 10) + 5 + index),
    name: "".concat(item.name, " ").concat(index + 1),
    email: "user".concat(index + 6, "@example.com")
  }))],
  columns: sampleColumns,
  options: {
    rowsPerPage: 10,
    rowsPerPageOptions: [10, 25, 50, 100]
  }
});
LargeDataset.parameters = {
  docs: {
    description: {
      story: "Table handling large datasets with appropriate pagination options for managing extensive customer verification records."
    }
  }
};

/**
 * Example story demonstrating the low-level table components (components used inside cells and actions).
 * This shows how to use `KwikUITableComponent` and `KwikUITableActions` directly for custom cell rendering
 * or action containers when you are building custom table UIs.
 */
const CustomComponents = exports.CustomComponents = Template.bind({});
CustomComponents.args = _objectSpread(_objectSpread({}, _Table2.default), {}, {
  title: "Custom Table Cell Rendering",
  data: sampleData,
  columns: sampleColumns.map((item, index) => {
    switch (item.name) {
      case "status":
        return _objectSpread(_objectSpread({}, item), {}, {
          options: _objectSpread(_objectSpread({}, item.options || {}), {}, {
            customBodyRender: (value, tableMeta, updateValue) => {
              return /*#__PURE__*/_react.default.createElement(_TableChip.default, {
                id: index,
                item: item,
                value: value,
                tableMeta: tableMeta,
                updateValue: updateValue
              });
            }
          })
        });
      case "details":
        return _objectSpread(_objectSpread({}, item), {}, {
          options: _objectSpread(_objectSpread({}, item.options || {}), {}, {
            customBodyRender: (value, tableMeta, updateValue) => {
              return /*#__PURE__*/_react.default.createElement(_TableButton.default, {
                id: index,
                item: item,
                value: value,
                tableMeta: tableMeta,
                updateValue: updateValue
                // eslint-disable-next-line @typescript-eslint/no-empty-function
                ,
                onClick: () => {}
              });
            }
          })
        });
      default:
        return _objectSpread(_objectSpread({}, item), {}, {
          options: _objectSpread(_objectSpread({}, item.options || {}), {}, {
            customBodyRender: (value, tableMeta, updateValue) => {
              return /*#__PURE__*/_react.default.createElement(_TableComponents.default, {
                id: index,
                item: item,
                value: value,
                tableMeta: tableMeta,
                updateValue: updateValue
                // eslint-disable-next-line @typescript-eslint/no-empty-function
                ,
                onClick: () => {}
              });
            }
          })
        });
    }
  }),
  options: _objectSpread({}, _Table2.default.options)
});
CustomComponents.parameters = {
  docs: {
    description: {
      story: "Demonstrates using KwikUITableComponent and KwikUITableActions directly for custom rendering inside table cells while using the sample IKwikUITable data interface."
    }
  }
};