react-markdown-table-ts 1.3.0 → 1.3.2

package/src/index.tsx

@@ -1,176 +0,0 @@
-/**
- * @fileoverview Main MarkdownTable component that generates and displays markdown
- * table syntax with Prism.js syntax highlighting.
- */
-
-import { useEffect, useMemo, useRef, useDeferredValue, useTransition, useId } from 'react';
-import Prism from 'prismjs';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/plugins/line-numbers/prism-line-numbers';
-import type { Alignment, MarkdownTableProps } from './types';
-import { generateMarkdownTableString, generateAlphabetHeaders } from './utils';
-import { validateInputData, MarkdownTableError } from './validation';
-
-const LIGHT_THEME_CSS = `
-code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-].line-numbers{position:relative;padding-left:2.4em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.5em;text-align:right}
-`;
-
-const DARK_THEME_CSS = `
-code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-].line-numbers{position:relative;padding-left:2.4em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.5em;text-align:right}
-`;
-
-function getTableData(inputData: string[][], hasHeader: boolean) {
-  return hasHeader
-    ? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
-    : { inputDataHeader: generateAlphabetHeaders(inputData[0].length), inputDataBody: inputData };
-}
-
-function generateTableSyntax(
-  inputData: string[][] | null,
-  hasHeader: boolean,
-  columnAlignments: readonly Alignment[],
-  adjustColumnWidths: boolean,
-  hasTabs: boolean,
-  canReplaceNewlines: boolean,
-  hasPadding: boolean
-): string {
-  try {
-    validateInputData(inputData);
-    const { inputDataHeader, inputDataBody } = getTableData(inputData as string[][], hasHeader);
-
-    return generateMarkdownTableString(
-      { inputDataHeader, inputDataBody },
-      columnAlignments,
-      adjustColumnWidths,
-      hasTabs,
-      canReplaceNewlines,
-      hasPadding
-    );
-  } catch (error) {
-    if (error instanceof MarkdownTableError) {
-      return `Error: ${error.message}`;
-    }
-    throw error;
-  }
-}
-
-export function MarkdownTable({
-  inputData = null,
-  hasHeader = true,
-  columnAlignments = [],
-  isCompact = false,
-  hasTabs = false,
-  hasPadding = true,
-  convertLineBreaks = false,
-  className,
-  onGenerate,
-  theme = 'light',
-  preStyle,
-  topPadding = 16,
-  minWidth,
-  showLineNumbers = true,
-}: MarkdownTableProps) {
-  const preElementRef = useRef<HTMLPreElement>(null);
-  const id = useId();
-  const deferredInputData = useDeferredValue(inputData);
-  const [, startTransition] = useTransition();
-
-  const markdownTableSyntax = useMemo(() => generateTableSyntax(
-    deferredInputData,
-    hasHeader,
-    columnAlignments,
-    !isCompact,
-    hasTabs,
-    convertLineBreaks,
-    hasPadding
-  ), [
-    deferredInputData,
-    hasHeader,
-    columnAlignments,
-    isCompact,
-    hasTabs,
-    convertLineBreaks,
-    hasPadding,
-  ]);
-
-  useEffect(() => {
-    if (onGenerate) {
-      onGenerate(markdownTableSyntax);
-    }
-  }, [markdownTableSyntax, onGenerate]);
-
-  useEffect(() => {
-    const codeElement = preElementRef.current?.querySelector('code');
-    if (codeElement && markdownTableSyntax) {
-      startTransition(() => {
-        requestAnimationFrame(() => {
-          Prism.highlightElement(codeElement as HTMLElement);
-          
-          // Remove line numbers if showLineNumbers is false
-          if (!showLineNumbers && preElementRef.current) {
-            const lineNumbersRows = preElementRef.current.querySelector('.line-numbers-rows');
-            if (lineNumbersRows) {
-              lineNumbersRows.remove();
-            }
-          }
-        });
-      });
-    }
-  }, [markdownTableSyntax, startTransition, showLineNumbers]);
-
-  return (
-    <>
-      <style>
-        {theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS}
-        {`
-          pre {
-            position: relative;
-            padding-top: ${topPadding}px !important;
-          }
-          pre::before {
-            position: absolute;
-            top: 8px;
-            left: 12px;
-            color: ${theme === 'light' ? '#666' : '#999'};
-            letter-spacing: 2px;
-            font-size: 12px;
-          }
-          /* Hide line numbers when showLineNumbers is false */
-          pre:not(.line-numbers) .line-numbers-rows {
-            display: none !important;
-          }
-          /* Remove left padding when line numbers are hidden */
-          pre:not(.line-numbers) {
-            padding-left: 1em !important;
-          }
-          pre:not(.line-numbers) > code {
-            padding-left: 0 !important;
-          }
-        `}
-      </style>
-      <div
-        id={id}
-        style={{
-          position: 'relative',
-          isolation: 'isolate',
-          display: 'inline-block'
-        }}
-      >
-        <pre
-          ref={preElementRef}
-          className={`${className} language-markdown ${showLineNumbers ? 'line-numbers' : ''} ${theme === 'dark' ? 'dark-theme' : ''}`}
-          style={{
-            width: 'fit-content',
-            minWidth: minWidth ? `${minWidth}px` : 'min-content',
-            margin: 0,
-            ...preStyle
-          }}
-        >
-          <code className="language-markdown" role="code">
-            {markdownTableSyntax}
-          </code>
-        </pre>
-      </div>
-    </>
-  );
-}

package/src/prism.d.ts

@@ -1,6 +0,0 @@
-declare module 'prismjs' {
-  const Prism: {
-    highlightElement: (element: HTMLElement) => void;
-  };
-  export default Prism;
-}

package/src/stories/MarkdownTable.stories.tsx

@@ -1,212 +0,0 @@
-/**
- * @fileoverview Storybook stories for the MarkdownTable component, demonstrating
- * various configurations and use cases for markdown table generation and display.
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { MarkdownTable } from '../index'
-
-const meta = {
-  title: 'Components/MarkdownTable',
-  component: MarkdownTable,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs'],
-  args: {
-    inputData: null,
-    columnAlignments: [],
-    isCompact: false,
-    hasPadding: true,
-    hasTabs: false,
-    hasHeader: true,
-    convertLineBreaks: false,
-    topPadding: 16,
-    theme: 'light' as const,
-    showLineNumbers: true
-  },
-  argTypes: {
-    inputData: {
-      control: {
-        type: 'object'
-      },
-      description: 'The outer array represents rows. The inner array represent cells within each row.',
-      table: {
-        category: 'Core Data Props',
-        type: {
-          summary: 'string[][] | null'
-        }
-      }
-    },
-    columnAlignments: {
-      control: {
-        type: 'object'
-      },
-      description: 'An array specifying the alignment for each column.',
-      table: {
-        category: 'Core Data Props',
-        type: {
-          summary: 'readonly Alignment[]',
-          detail: 'export type Alignment = "left" | "right" | "center" | "none";'
-        }
-      }
-    },
-    isCompact: {
-      control: 'boolean',
-      description: 'Disables column width alignment to provide a more compact markdown table string.',
-      table: {
-        category: 'Configuration Props',
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    hasPadding: {
-      control: 'boolean',
-      description: 'Optional flag to add a single space around cell content in the markdown table.',
-      table: {
-        category: 'Configuration Props',
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    hasTabs: {
-      control: 'boolean',
-      description: 'Optional flag to add tabs as additional padding between column pipes.',
-      table: {
-        category: 'Configuration Props',
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    hasHeader: {
-      control: 'boolean',
-      description: 'Indicates whether the first row of `data` is a header.',
-      table: {
-        category: 'Configuration Props',
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    convertLineBreaks: {
-      control: 'boolean',
-      description: 'Optional flag to replace newlines with `<br>` tags in table cells.',
-      table: {
-        category: 'Configuration Props',
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    topPadding: {
-      control: {
-        type: 'number'
-      },
-      description: 'Controls the padding-top (in pixels) of the pre element display.',
-      table: {
-        category: 'Visual/UI Props',
-        type: {
-          summary: 'number'
-        }
-      }
-    },
-    theme: {
-      options: ['light', 'dark'],
-      control: { type: 'select' },
-      description: 'Switch between light and dark mode.',
-      table: {
-        category: 'Visual/UI Props',
-        type: {
-          summary: "'light' | 'dark'"
-        },
-        defaultValue: { summary: 'light' }
-      }
-    },
-    className: {
-      control: 'text',
-      description: 'Optional CSS class for styling the rendered Markdown table.',
-      table: {
-        category: 'Visual/UI Props',
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    preStyle: {
-      control: {
-        type: 'object'
-      },
-      description: 'Optional inline styles for the pre element.',
-      table: {
-        category: 'Visual/UI Props',
-        type: {
-          summary: 'React.CSSProperties'
-        }
-      }
-    },
-    minWidth: {
-      control: {
-        type: 'number'
-      },
-      description: 'Optional minimum width in pixels for the table container.',
-      table: {
-        category: 'Visual/UI Props',
-        type: {
-          summary: 'number'
-        }
-      }
-    },
-    showLineNumbers: {
-      control: 'boolean',
-      description: 'Optional flag to show or hide line numbers in the Prism syntax highlighting.',
-      table: {
-        category: 'Visual/UI Props',
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: { summary: 'true' }
-      }
-    },
-    onGenerate: {
-      description: 'Callback function that receives the generated Markdown table string.',
-      table: {
-        category: 'Callbacks',
-        type: {
-          summary: '(markdownTableString: string) => void'
-        }
-      }
-    }
-  }
-} satisfies Meta<typeof MarkdownTable>
-
-export default meta
-type Story = StoryObj<typeof MarkdownTable>
-
-// Move sample data before its usage
-const sampleData = [
-  ['Package ID', 'Weight (kg)', 'Status', 'Destination'],
-  ['PKG-2024-001', '12.50', 'In Transit', 'Dublin, IE'],
-  ['PKG-2024-002', '3.75', 'Delivered', 'New York, US'],
-  ['PKG-2024-003', '8.20', 'Processing', 'Frankfurt, DE'],
-  ['PKG-2024-004', '5.60', 'In Transit', 'London, GB']
-]
-
-export const Default: Story = {
-  args: {
-    inputData: sampleData,
-    columnAlignments: ['left', 'right', 'center', 'none'],
-    isCompact: false,
-    hasPadding: true,
-    hasTabs: false,
-    hasHeader: true,
-    convertLineBreaks: false,
-    topPadding: 16,
-    theme: 'light',
-    className: 'markdown-table-pre',
-    preStyle: {borderRadius: '8px'},
-    minWidth: 450
-  }
-}

package/src/tests/__mocks__/styleMock.js

@@ -1,2 +0,0 @@
-module.exports = {};
-