react-markdown-table-ts 1.1.9 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/cellFormatter.d.ts +9 -0
  2. package/dist/index.cjs.js +100 -65
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.d.ts +3 -3
  5. package/dist/index.esm.js +100 -65
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/types.d.ts +18 -7
  8. package/dist/utils.d.ts +7 -5
  9. package/dist/validation.d.ts +1 -1
  10. package/package.json +1 -1
  11. package/dist/MarkdownTable.stories.d.ts +0 -156
  12. package/dist/jest.setup.d.ts +0 -2
  13. package/dist/jest.setup.js +0 -3
  14. package/dist/jest.setup.js.map +0 -1
  15. package/dist/src/MarkdownTable.stories.d.ts +0 -156
  16. package/dist/src/MarkdownTable.stories.js +0 -172
  17. package/dist/src/MarkdownTable.stories.js.map +0 -1
  18. package/dist/src/index.d.ts +0 -5
  19. package/dist/src/index.js +0 -78
  20. package/dist/src/index.js.map +0 -1
  21. package/dist/src/types.d.ts +0 -123
  22. package/dist/src/types.js +0 -3
  23. package/dist/src/types.js.map +0 -1
  24. package/dist/src/utils.d.ts +0 -8
  25. package/dist/src/utils.js +0 -176
  26. package/dist/src/utils.js.map +0 -1
  27. package/dist/src/validation.d.ts +0 -19
  28. package/dist/src/validation.js +0 -106
  29. package/dist/src/validation.js.map +0 -1
  30. package/dist/stories/Button.d.ts +0 -15
  31. package/dist/stories/Button.stories.d.ts +0 -23
  32. package/dist/stories/Header.d.ts +0 -12
  33. package/dist/stories/Header.stories.d.ts +0 -18
  34. package/dist/stories/Page.d.ts +0 -3
  35. package/dist/stories/Page.stories.d.ts +0 -13
  36. package/dist/test/MarkdownTable.test.d.ts +0 -1
  37. package/dist/test/MarkdownTable.test.js +0 -91
  38. package/dist/test/MarkdownTable.test.js.map +0 -1
  39. package/dist/test/utils.test.d.ts +0 -1
  40. package/dist/test/utils.test.js +0 -234
  41. package/dist/test/utils.test.js.map +0 -1
  42. package/dist/test/validation.test.d.ts +0 -1
  43. package/dist/test/validation.test.js +0 -86
  44. package/dist/test/validation.test.js.map +0 -1
@@ -0,0 +1,9 @@
1
+ import { CellData } from './types';
2
+ /**
3
+ * Formats cell content with markdown syntax based on CellData formatting options
4
+ */
5
+ export declare function formatCellContent(cell: string | CellData): string;
6
+ /**
7
+ * Gets the alignment for a cell, prioritizing cell-specific alignment over column alignment
8
+ */
9
+ export declare function getCellAlignment(cell: string | CellData, columnAlignment?: string): string;
package/dist/index.cjs.js CHANGED
@@ -4068,24 +4068,56 @@ var Prism$1 = /*@__PURE__*/getDefaultExportFromCjs(prismExports);
4068
4068
 
4069
4069
  }());
4070
4070
 
4071
+ /**
4072
+ * @fileoverview Utilities for formatting and generating markdown tables with support
4073
+ * for cell formatting, alignment, and width calculations.
4074
+ */
4071
4075
  var CellFormatter = /** @class */ (function () {
4072
4076
  function CellFormatter(config) {
4073
4077
  this.config = config;
4074
- this.padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
4078
+ this.padding = this.config.useTabs
4079
+ ? "\t"
4080
+ : this.config.hasPadding
4081
+ ? " "
4082
+ : "";
4075
4083
  }
4076
- CellFormatter.prototype.formatCell = function (content, alignment, width) {
4077
- var totalWidth = width;
4078
- switch (alignment) {
4079
- case 'right':
4080
- return "".concat(this.padding).concat(content.padStart(totalWidth)).concat(this.padding);
4081
- case 'center': {
4082
- var totalPadding = totalWidth - content.length;
4083
- var paddingLeft = Math.floor(totalPadding / 2);
4084
- var paddingRight = totalPadding - paddingLeft;
4085
- return "".concat(this.padding).concat(' '.repeat(paddingLeft)).concat(content).concat(' '.repeat(paddingRight)).concat(this.padding);
4084
+ CellFormatter.prototype.formatCellContent = function (cell) {
4085
+ var content = cell.content;
4086
+ if (cell.code) {
4087
+ content = "`".concat(content, "`");
4088
+ }
4089
+ if (cell.bold) {
4090
+ content = "**".concat(content, "**");
4091
+ }
4092
+ if (cell.italic) {
4093
+ content = "*".concat(content, "*");
4094
+ }
4095
+ if (cell.link) {
4096
+ content = "[".concat(content, "](").concat(cell.link, ")");
4097
+ }
4098
+ return content;
4099
+ };
4100
+ CellFormatter.prototype.formatCell = function (cell, width) {
4101
+ var content = this.formatCellContent(cell);
4102
+ var alignment = cell.alignment || "inherit";
4103
+ var effectiveAlignment = alignment === "inherit" ? "none" : alignment;
4104
+ var paddedContent = "".concat(this.padding).concat(content).concat(this.padding);
4105
+ var spacesToAdd = width - content.length;
4106
+ if (spacesToAdd <= 0)
4107
+ return paddedContent;
4108
+ switch (effectiveAlignment) {
4109
+ case "right":
4110
+ return " ".repeat(spacesToAdd) + paddedContent;
4111
+ case "center": {
4112
+ var leftPad = Math.floor(spacesToAdd / 2);
4113
+ var rightPad = spacesToAdd - leftPad;
4114
+ return " ".repeat(leftPad) + paddedContent + " ".repeat(rightPad);
4086
4115
  }
4087
- default: // left or none
4088
- return "".concat(this.padding).concat(content.padEnd(totalWidth)).concat(this.padding);
4116
+ case "justify":
4117
+ case "left":
4118
+ case "none":
4119
+ default:
4120
+ return paddedContent + " ".repeat(spacesToAdd);
4089
4121
  }
4090
4122
  };
4091
4123
  return CellFormatter;
@@ -4097,11 +4129,11 @@ var AlignmentFormatter = /** @class */ (function () {
4097
4129
  return this.indicators[alignment](width);
4098
4130
  };
4099
4131
  AlignmentFormatter.indicators = {
4100
- left: function (width) { return ":".concat('-'.repeat(width - 1)); },
4101
- right: function (width) { return "".concat('-'.repeat(width - 1), ":"); },
4102
- center: function (width) { return ":".concat('-'.repeat(width - 2), ":"); },
4103
- none: function (width) { return '-'.repeat(width); },
4104
- justify: function (width) { return '-'.repeat(width); }
4132
+ left: function (width) { return ":".concat("-".repeat(width - 1)); },
4133
+ right: function (width) { return "".concat("-".repeat(width - 1), ":"); },
4134
+ center: function (width) { return ":".concat("-".repeat(width - 2), ":"); },
4135
+ none: function (width) { return "-".repeat(width); },
4136
+ justify: function (width) { return "-".repeat(width); },
4105
4137
  };
4106
4138
  return AlignmentFormatter;
4107
4139
  }());
@@ -4112,9 +4144,9 @@ var TableFormatter = /** @class */ (function () {
4112
4144
  this.adjustedAlignments = this.getAdjustedAlignments();
4113
4145
  }
4114
4146
  TableFormatter.prototype.getAdjustedAlignments = function () {
4115
- var defaultAlignment = 'none';
4147
+ var defaultAlignment = "none";
4116
4148
  var sanitizeAlignment = function (alignment) {
4117
- return alignment === 'justify' ? 'none' : alignment;
4149
+ return alignment === "justify" ? "none" : alignment;
4118
4150
  };
4119
4151
  return this.config.columnAlignments.length < this.config.columnCount
4120
4152
  ? __spreadArray(__spreadArray([], Array.from(this.config.columnAlignments).map(sanitizeAlignment), true), Array(this.config.columnCount - this.config.columnAlignments.length).fill(defaultAlignment), true) : Array.from(this.config.columnAlignments).map(sanitizeAlignment);
@@ -4122,79 +4154,77 @@ var TableFormatter = /** @class */ (function () {
4122
4154
  TableFormatter.prototype.formatRow = function (row) {
4123
4155
  var _this = this;
4124
4156
  var formattedCells = Array.from({ length: this.config.columnCount }, function (_, i) {
4125
- var _a;
4126
- var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
4127
- if (_this.config.replaceNewlines) {
4128
- cell = replaceNewlinesInCell(cell);
4129
- }
4130
- var alignment = _this.adjustedAlignments[i];
4131
- var width = _this.config.columnWidths ? _this.config.columnWidths[i] : cell.length;
4132
- return _this.cellFormatter.formatCell(cell, alignment, width);
4157
+ var _a, _b, _c;
4158
+ var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : { content: "" };
4159
+ var width = (_c = (_b = _this.config.columnWidths) === null || _b === void 0 ? void 0 : _b[i]) !== null && _c !== void 0 ? _c : cell.content.length;
4160
+ return _this.cellFormatter.formatCell(cell, width);
4133
4161
  });
4134
- return "|".concat(formattedCells.join('|'), "|");
4162
+ return "|".concat(formattedCells.join("|"), "|");
4135
4163
  };
4136
4164
  TableFormatter.prototype.formatAlignmentRow = function () {
4137
4165
  var _this = this;
4138
- var padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
4166
+ var padding = this.config.useTabs
4167
+ ? "\t"
4168
+ : this.config.hasPadding
4169
+ ? " "
4170
+ : "";
4139
4171
  var formattedColumns = Array.from({ length: this.config.columnCount }, function (_, i) {
4172
+ var _a, _b;
4140
4173
  var alignment = _this.adjustedAlignments[i];
4141
- var width = _this.config.columnWidths ? _this.config.columnWidths[i] : 3;
4174
+ var width = (_b = (_a = _this.config.columnWidths) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 3;
4142
4175
  var indicator = AlignmentFormatter.formatIndicator(alignment, width);
4143
4176
  return "".concat(padding).concat(indicator).concat(padding);
4144
4177
  });
4145
- return "|".concat(formattedColumns.join('|'), "|");
4178
+ return "|".concat(formattedColumns.join("|"), "|");
4146
4179
  };
4147
4180
  return TableFormatter;
4148
4181
  }());
4149
- function calculateColumnWidths(tableRows, maxColumnCount) {
4182
+ function calculateColumnWidths(tableRows, maxColumnCount, config) {
4150
4183
  var widths = new Array(maxColumnCount).fill(3);
4184
+ var cellFormatter = new CellFormatter(config);
4151
4185
  tableRows.forEach(function (row) {
4152
- var _a;
4153
4186
  for (var i = 0; i < maxColumnCount; i++) {
4154
- var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
4155
- widths[i] = Math.max(widths[i], cell.length);
4187
+ var cell = row[i];
4188
+ if (cell) {
4189
+ var formattedContent = cellFormatter["formatCellContent"](cell);
4190
+ widths[i] = Math.max(widths[i], formattedContent.length);
4191
+ }
4156
4192
  }
4157
4193
  });
4158
4194
  return widths;
4159
4195
  }
4160
- function calculateMaxColumnCount(inputData) {
4161
- var headerColumnCount = inputData.inputDataHeader.length;
4162
- var bodyColumnCounts = inputData.inputDataBody.map(function (row) { return row.length; });
4163
- return Math.max.apply(Math, __spreadArray([headerColumnCount], bodyColumnCounts, false));
4164
- }
4165
- function getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths) {
4166
- return canAdjustColumnWidths
4167
- ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
4168
- : undefined;
4169
- }
4170
4196
  function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
4171
4197
  if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
4172
4198
  if (useTabs === void 0) { useTabs = false; }
4173
4199
  if (replaceNewlines === void 0) { replaceNewlines = false; }
4174
4200
  if (hasPadding === void 0) { hasPadding = true; }
4175
- var maxColumnCount = calculateMaxColumnCount(inputData);
4176
- var columnWidths = getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths);
4201
+ var maxColumnCount = Math.max.apply(Math, __spreadArray([inputData.inputDataHeader.length], inputData.inputDataBody.map(function (row) { return row.length; }), false));
4177
4202
  var config = {
4178
4203
  columnCount: maxColumnCount,
4179
4204
  columnAlignments: columnAlignments,
4180
- columnWidths: columnWidths,
4205
+ columnWidths: canAdjustColumnWidths
4206
+ ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount, {
4207
+ columnCount: maxColumnCount,
4208
+ columnAlignments: columnAlignments,
4209
+ useTabs: useTabs,
4210
+ replaceNewlines: replaceNewlines,
4211
+ hasPadding: hasPadding,
4212
+ })
4213
+ : undefined,
4181
4214
  useTabs: useTabs,
4182
4215
  replaceNewlines: replaceNewlines,
4183
- hasPadding: hasPadding
4216
+ hasPadding: hasPadding,
4184
4217
  };
4185
4218
  var tableFormatter = new TableFormatter(config);
4186
4219
  var headerRow = tableFormatter.formatRow(inputData.inputDataHeader);
4187
4220
  var alignmentRow = tableFormatter.formatAlignmentRow();
4188
4221
  var bodyRows = inputData.inputDataBody
4189
4222
  .map(function (row) { return tableFormatter.formatRow(row); })
4190
- .join('\n');
4223
+ .join("\n");
4191
4224
  return "".concat(headerRow, "\n").concat(alignmentRow, "\n").concat(bodyRows).trimEnd();
4192
4225
  }
4193
- function replaceNewlinesInCell(cell) {
4194
- return cell.replace(/\n/g, '<br>');
4195
- }
4196
4226
  function getColumnName(index) {
4197
- var columnName = '';
4227
+ var columnName = "";
4198
4228
  var currentIndex = index;
4199
4229
  while (currentIndex >= 0) {
4200
4230
  columnName = String.fromCharCode((currentIndex % 26) + 65) + columnName;
@@ -4214,7 +4244,7 @@ var MarkdownTableError = /** @class */ (function (_super) {
4214
4244
  __extends(MarkdownTableError, _super);
4215
4245
  function MarkdownTableError(message) {
4216
4246
  var _this = _super.call(this, message) || this;
4217
- _this.name = 'MarkdownTableError';
4247
+ _this.name = "MarkdownTableError";
4218
4248
  Object.setPrototypeOf(_this, MarkdownTableError.prototype);
4219
4249
  return _this;
4220
4250
  }
@@ -4240,7 +4270,10 @@ var DARK_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#f8f8
4240
4270
  var getTableData = function (inputData, hasHeader) {
4241
4271
  return hasHeader
4242
4272
  ? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
4243
- : { inputDataHeader: generateAlphabetHeaders(inputData[0].length), inputDataBody: inputData };
4273
+ : {
4274
+ inputDataHeader: generateAlphabetHeaders(inputData[0].length).map(function (header) { return ({ content: header }); }),
4275
+ inputDataBody: inputData,
4276
+ };
4244
4277
  };
4245
4278
  var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding) {
4246
4279
  try {
@@ -4258,7 +4291,7 @@ var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adju
4258
4291
  var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
4259
4292
  require$$0.useEffect(function () {
4260
4293
  var _a;
4261
- var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('code');
4294
+ var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("code");
4262
4295
  if (codeElement && markdownTableSyntax) {
4263
4296
  requestAnimationFrame(function () {
4264
4297
  Prism$1.highlightElement(codeElement);
@@ -4267,10 +4300,12 @@ var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
4267
4300
  }, [markdownTableSyntax]);
4268
4301
  };
4269
4302
  var MarkdownTable = function (_a) {
4270
- var _b = _a.inputData, inputData = _b === void 0 ? null : _b, _c = _a.hasHeader, hasHeader = _c === void 0 ? true : _c, _d = _a.columnAlignments, columnAlignments = _d === void 0 ? [] : _d, _e = _a.isCompact, isCompact = _e === void 0 ? false : _e, _f = _a.hasTabs, hasTabs = _f === void 0 ? false : _f, _g = _a.hasPadding, hasPadding = _g === void 0 ? true : _g, _h = _a.convertLineBreaks, convertLineBreaks = _h === void 0 ? false : _h, className = _a.className, onGenerate = _a.onGenerate, _j = _a.theme, theme = _j === void 0 ? 'light' : _j, preStyle = _a.preStyle, _k = _a.topPadding, topPadding = _k === void 0 ? 16 : _k, minWidth = _a.minWidth;
4303
+ var _b = _a.inputData, inputData = _b === void 0 ? null : _b, _c = _a.hasHeader, hasHeader = _c === void 0 ? true : _c, _d = _a.columnAlignments, columnAlignments = _d === void 0 ? [] : _d, _e = _a.isCompact, isCompact = _e === void 0 ? false : _e, _f = _a.hasTabs, hasTabs = _f === void 0 ? false : _f, _g = _a.hasPadding, hasPadding = _g === void 0 ? true : _g, _h = _a.convertLineBreaks, convertLineBreaks = _h === void 0 ? false : _h, className = _a.className, onGenerate = _a.onGenerate, _j = _a.theme, theme = _j === void 0 ? "light" : _j, preStyle = _a.preStyle, _k = _a.topPadding, topPadding = _k === void 0 ? 16 : _k, minWidth = _a.minWidth;
4271
4304
  var adjustColumnWidths = !isCompact;
4272
4305
  var preElementRef = require$$0.useRef(null);
4273
- var markdownTableSyntax = require$$0.useMemo(function () { return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding); }, [
4306
+ var markdownTableSyntax = require$$0.useMemo(function () {
4307
+ return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding);
4308
+ }, [
4274
4309
  inputData,
4275
4310
  hasHeader,
4276
4311
  columnAlignments,
@@ -4285,11 +4320,11 @@ var MarkdownTable = function (_a) {
4285
4320
  }
4286
4321
  }, [markdownTableSyntax, onGenerate]);
4287
4322
  applySyntaxHighlighting(preElementRef, markdownTableSyntax);
4288
- return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("style", { children: [theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS, "\n pre {\n position: relative;\n padding-top: ".concat(topPadding, "px !important;\n }\n pre::before {\n position: absolute;\n top: 8px;\n left: 12px;\n color: ").concat(theme === 'light' ? '#666' : '#999', ";\n letter-spacing: 2px;\n font-size: 12px;\n }\n ")] }), jsxRuntimeExports.jsx("div", { id: "MarkdownTable", style: {
4289
- position: 'relative',
4290
- isolation: 'isolate',
4291
- display: 'inline-block'
4292
- }, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === 'dark' ? 'dark-theme' : ''), style: __assign({ width: 'fit-content', minWidth: minWidth ? "".concat(minWidth, "px") : 'min-content', margin: 0 }, preStyle), children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) }) })] }));
4323
+ return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("style", { children: [theme === "light" ? LIGHT_THEME_CSS : DARK_THEME_CSS, "\n pre {\n position: relative;\n padding-top: ".concat(topPadding, "px !important;\n }\n pre::before {\n position: absolute;\n top: 8px;\n left: 12px;\n color: ").concat(theme === "light" ? "#666" : "#999", ";\n letter-spacing: 2px;\n font-size: 12px;\n }\n ")] }), jsxRuntimeExports.jsx("div", { id: "MarkdownTable", style: {
4324
+ position: "relative",
4325
+ isolation: "isolate",
4326
+ display: "inline-block",
4327
+ }, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === "dark" ? "dark-theme" : ""), style: __assign({ width: "fit-content", minWidth: minWidth ? "".concat(minWidth, "px") : "min-content", margin: 0 }, preStyle), children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) }) })] }));
4293
4328
  };
4294
4329
 
4295
4330
  exports.MarkdownTable = MarkdownTable;