react-markdown-table-ts 0.6.4 → 1.1.1

package/dist/stories/Button.d.ts

@@ -0,0 +1,15 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/types.d.ts

@@ -20,57 +20,98 @@ export interface MarkdownTableProps {
      * @default null
      */
     inputData?: string[][] | null;
-    /**
-     * Indicates whether the first row of `data` is a header.
-     * @default true
-     */
-    hasHeader?: boolean;
     /**
      * Optional array specifying the alignment for each column.
      * Acceptable values are 'left', 'center', 'right', or 'none'.
+     * @default []
      */
-    columnAlignments?: readonly ('left' | 'center' | 'right' | 'none')[];
+    columnAlignments?: readonly Alignment[];
     /**
-     * Optional flag to provide a compact version of the table with minimal column widths.
-     * When `true`, column widths are not adjusted based on content.
+     * Disables column width alignment to provide a more compact markdown table string.
      * @default false
      */
     isCompact?: boolean;
     /**
-     * Optional flag to add tabs between columns in the Markdown table.
+     * Optional flag to add a single space around cell content in the markdown table.
+     * When true, one space is added before and after the content in each cell.
+     * @default true
+     */
+    hasPadding?: boolean;
+    /**
+     * Optional flag to add tabs as additional padding between column pipes.
+     * When true, adds a tab character after each | and before the content.
      * @default false
      */
     hasTabs?: boolean;
     /**
-     * Optional CSS class for styling the rendered Markdown table.
+     * Indicates whether the first row of `data` is a header.
+     * @default true
      */
-    className?: string;
+    hasHeader?: boolean;
     /**
      * Optional flag to replace newlines with <br> tags in table cells.
      * @default false
      */
-    canReplaceNewlines?: boolean;
-    /**
-     * Optional callback function to receive the generated Markdown table string.
-     */
-    onTableCreate?: (markdownTableString: string) => void;
+    convertLineBreaks?: boolean;
     /**
      * Optional theme for the Markdown table.
      * Acceptable values are 'light' or 'dark'.
+     * @default 'light'
      */
     theme?: 'light' | 'dark';
     /**
-     * Optional flag to add padding spaces around cell content.
-     * @default true
+     * Optional CSS class for styling the rendered Markdown table.
+     * This class will be applied to the <pre> element containing the table.
+     * It will be combined with built-in classes for syntax highlighting.
+     * @default undefined
+     * @example
+     * <MarkdownTable
+     *   inputData={data}
+     *   className="custom-table-style"
+     * />
      */
-    hasPadding?: boolean;
+    className?: string;
     /**
      * Optional CSS properties to apply to the pre element containing the Markdown table.
+     * Allows direct styling of the table container using React's style prop.
+     * @default undefined
+     * @example
+     * <MarkdownTable
+     *   inputData={data}
+     *   preStyle={{
+     *     maxHeight: '300px',
+     *     overflow: 'auto',
+     *     backgroundColor: '#f5f5f5'
+     *   }}
+     * />
      */
     preStyle?: React.CSSProperties;
     /**
-     * Optional flag to show the copy button.
-     * @default false
+     * Optional callback function to receive the generated Markdown table string.
      */
-    showCopyButton?: boolean;
+    onGenerate?: (markdownTableString: string) => void;
+}
+/**
+ * Represents the alignment options for table columns.
+ */
+export type Alignment = 'left' | 'right' | 'center' | 'none';
+/**
+ * Configuration for table formatting.
+ */
+export interface TableConfig {
+    columnCount: number;
+    columnAlignments: readonly Alignment[];
+    columnWidths?: readonly number[];
+    useTabs: boolean;
+    replaceNewlines: boolean;
+    hasPadding: boolean;
+}
+/**
+ * Functions to generate alignment indicators for table columns.
+ */
+export interface AlignmentIndicator {
+    left: (width: number) => string;
+    right: (width: number) => string;
+    center: (width: number) => string;
+    none: (width: number) => string;
 }

package/dist/utils.d.ts

@@ -1,35 +1,8 @@
-import { TableRow, InputData } from './types';
-/**
- * Calculates the maximum width for each column based on the content.
- * @param tableRows - All rows (header and body) of the table.
- * @param maxColumnCount - The maximum number of columns in the table.
- * @returns An array of maximum widths for each column.
- */
+import { TableRow, InputData, Alignment } from './types';
 export declare function calculateColumnWidths(tableRows: readonly TableRow[], maxColumnCount: number): number[];
-type Alignment = 'left' | 'right' | 'center' | 'none';
-export declare function formatMarkdownRow(columnCount: number, currentRow: TableRow, columnAlignments: readonly Alignment[], columnWidths?: readonly number[], useTabs?: boolean, canReplaceNewlines?: boolean, hasPadding?: boolean): string;
-export declare function formatAlignmentRow(columnCount: number, columnAlignments: readonly ('left' | 'right' | 'center' | 'none')[], columnWidths?: readonly number[], useTabs?: boolean, hasPadding?: boolean): string;
-export declare function formatHeaderAndAlignment(inputData: InputData, maxColumnCount: number, columnAlignments: readonly ('left' | 'right' | 'center' | 'none')[], columnWidths: number[] | undefined, useTabs: boolean, replaceNewlines: boolean, hasPadding: boolean): string;
-export declare function formatBodyRows(inputData: InputData, maxColumnCount: number, columnAlignments: readonly ('left' | 'right' | 'center' | 'none')[], columnWidths: number[] | undefined, useTabs: boolean, replaceNewlines: boolean, hasPadding: boolean): string;
-export declare function formatTableRows(inputData: InputData, maxColumnCount: number, columnAlignments: readonly ('left' | 'right' | 'center' | 'none')[], columnWidths: number[] | undefined, useTabs: boolean, replaceNewlines: boolean, hasPadding: boolean): string;
-export declare function generateMarkdownTableString(inputData: InputData, columnAlignments: readonly ('left' | 'right' | 'center' | 'none')[], canAdjustColumnWidths?: boolean, useTabs?: boolean, replaceNewlines?: boolean, hasPadding?: boolean): string;
-/**
- * Replaces newline characters in a string with <br> tags.
- * @param cell - The cell content to process.
- * @returns The processed cell content with newlines replaced.
- */
+export declare function generateMarkdownTableString(inputData: InputData, columnAlignments: readonly Alignment[], canAdjustColumnWidths?: boolean, useTabs?: boolean, replaceNewlines?: boolean, hasPadding?: boolean): string;
 export declare function replaceNewlinesInCell(cell: string): string;
-/**
- * Converts a zero-based column index to its corresponding Excel-style column name.
- * For example, 0 -> 'A', 1 -> 'B', ..., 25 -> 'Z', 26 -> 'AA', etc.
- * @param index - The zero-based column index.
- * @returns The corresponding column name.
- */
 export declare function getColumnName(index: number): string;
-/**
- * Generates an array of alphabetic headers based on the specified column count.
- * @param columnCount - The number of columns.
- * @returns An array of column header names.
- */
 export declare function generateAlphabetHeaders(columnCount: number): string[];
-export {};
+export declare function formatMarkdownRow(columnCount: number, currentRow: TableRow, columnAlignments: readonly Alignment[], columnWidths?: readonly number[], useTabs?: boolean, canReplaceNewlines?: boolean, hasPadding?: boolean): string;
+export declare function formatAlignmentRow(columnCount: number, columnAlignments: readonly Alignment[], columnWidths?: readonly number[], useTabs?: boolean, hasPadding?: boolean): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-markdown-table-ts",
-  "version": "0.6.4",
+  "version": "1.1.1",
   "description": "A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -22,7 +22,9 @@
     "test": "jest --config jest.config.js --coverage",
     "test:watch": "jest --config jest.config.js --watch",
     "test:ci": "jest --config jest.config.js --coverage --ci",
-    "release": "standard-version"
+    "release": "standard-version",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "markdown",
@@ -47,9 +49,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
     "@rollup/plugin-commonjs": "^26.0.3",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.13",
@@ -57,6 +66,7 @@
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "gts": "^5.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -66,14 +76,14 @@
     "rollup": "^2.79.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "standard-version": "^9.5.0",
+    "storybook": "^8.4.5",
     "ts-jest": "^29.2.5",
     "typescript": "^5.1.6"
   },
   "dependencies": {
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
+    "@storybook/react": "^8.4.5",
     "prismjs": "^1.29.0"
   }
 }