react-markdown-table-ts 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-markdown-table-ts",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.",
   "keywords": [
     "markdown",
@@ -13,13 +13,37 @@
     "convert",
     "converter"
   ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/keithwalsh/react-markdown-table-ts.git"
+  },
   "homepage": "https://github.com/keithwalsh/react-markdown-table-ts#readme",
   "bugs": {
     "url": "https://github.com/keithwalsh/react-markdown-table-ts/issues"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -p tsconfig.build.json && vite build",
     "preview": "vite preview",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -27,6 +51,10 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "dependencies": {
     "prismjs": "^1.30.0",
     "react": "^19.1.1",

package/.github/workflows/build.yml

@@ -1,35 +0,0 @@
-name: build
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build Storybook
-        run: npm run build-storybook
-
-      - name: Publish to Chromatic
-        uses: chromaui/action@latest
-        with:
-          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
-          storybookBuildDir: storybook-static

package/.github/workflows/publish.yml

@@ -1,31 +0,0 @@
-name: Publish to NPM
-
-on:
-  workflow_dispatch:
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run tests
-        run: npm test
-
-      - name: Build package
-        run: npx tsc
-
-      - name: Publish to NPM
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/test.yml

@@ -1,42 +0,0 @@
-name: Test Coverage
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-
-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Run tests with coverage
-      run: npm run test:coverage
-
-    - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        files: ./coverage/clover.xml,./coverage/lcov.info
-        flags: unittests
-        name: codecov-umbrella
-        fail_ci_if_error: true
-        verbose: true
-

package/.gitignore

@@ -1,12 +0,0 @@
-
-node_modules
-dist
-dist-ssr
-package-lock.json
-.*
-!.github
-!.storybook
-!.gitignore
-coverage/
-*storybook.log
-storybook-static

package/.storybook/main.ts

@@ -1,13 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
-};
-export default config;

package/.storybook/manager.ts

@@ -1,6 +0,0 @@
-import { addons } from "storybook/manager-api";
-import theme from "./theme";
-
-addons.setConfig({
-    theme: theme,
-});

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/react-vite'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/.storybook/theme.ts

@@ -1,8 +0,0 @@
-import { create } from "storybook/theming";
-
-export default create({
-    base: "light",
-    brandTitle: "react-markdown-table-ts",
-    brandUrl: "https://github.com/keithwalsh/react-markdown-table-ts",
-    brandTarget: "_self",
-});

package/jest.config.js

@@ -1,38 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  roots: ['<rootDir>/src'],
-  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  setupFilesAfterEnv: ['<rootDir>/src/tests/setup.ts'],
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/**/*.d.ts',
-    '!src/stories/**',
-    '!src/tests/**',
-  ],
-  coverageThreshold: {
-    global: {
-      branches: 80,
-      functions: 80,
-      lines: 80,
-      statements: 80,
-    },
-  },
-  transform: {
-    '^.+\\.tsx?$': ['ts-jest', {
-      tsconfig: {
-        jsx: 'react-jsx',
-        esModuleInterop: true,
-        allowSyntheticDefaultImports: true,
-        verbatimModuleSyntax: false,
-        module: 'commonjs',
-        moduleResolution: 'node',
-      },
-    }],
-  },
-  moduleNameMapper: {
-    '\\.(css|less|scss|sass)$': '<rootDir>/src/tests/__mocks__/styleMock.js',
-  },
-};
-

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 = {};
-