react-markdown-table-ts 1.1.0 → 1.1.2

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 (9) hide show
  1. package/README.md +12 -7
  2. package/dist/MarkdownTable.stories.d.ts +143 -0
  3. package/dist/stories/Button.d.ts +15 -0
  4. package/dist/stories/Button.stories.d.ts +23 -0
  5. package/dist/stories/Header.d.ts +12 -0
  6. package/dist/stories/Header.stories.d.ts +18 -0
  7. package/dist/stories/Page.d.ts +3 -0
  8. package/dist/stories/Page.stories.d.ts +13 -0
  9. package/package.json +13 -4
package/README.md CHANGED
@@ -2,11 +2,16 @@
2
2
 
3
3
  [![NPM Version](https://img.shields.io/npm/v/react-markdown-table-ts.svg)](https://www.npmjs.com/package/react-markdown-table-ts)
4
4
  [![codecov](https://codecov.io/gh/keithwalsh/react-markdown-table-ts/branch/main/graph/badge.svg)](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
5
- ![Build](https://github.com/keithwalsh/react-markdown-table-ts/actions/workflows/release.yaml/badge.svg)
5
+ ![Build](https://github.com/keithwalsh/react-markdown-table-ts/actions/workflows/build.yml/badge.svg)
6
6
  [![Code Climate](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts/badges/gpa.svg)](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
7
+ [![GitHub branch status](https://img.shields.io/github/checks-status/keithwalsh/react-markdown-table-ts/HEAD)](https://github.com/keithwalsh/react-markdown-table-ts/commits/HEAD/)
7
8
 
8
- ## Overview
9
- This library provides a React component for generating and displaying formatted Markdown tables with syntax highlighting. The core component is `MarkdownTable` which converts 2D array data into properly formatted Markdown table syntax.
9
+ | ![Light Theme Example](public/light.png) | ![Dark Theme Example](public/dark.png) |
10
+ |------------------------------------------|-----------------------------------------|
11
+ | `'light'` theme | `'dark'` theme |
12
+
13
+ ## Overview
14
+ This library provides a React component for generating and displaying formatted Markdown tables with syntax highlighting. The core component is `MarkdownTable` which converts 2D array data into properly formatted Markdown table syntax. Columns of variable width maintain consistent spacing across all rows, ensuring vertical alignment of delimiters. For syntax highlighting and line numbering, Prism.js is used within a `<pre>` HTML element.
10
15
 
11
16
  ## API
12
17
  ```typescript
@@ -26,15 +31,15 @@ interface MarkdownTableProps {
26
31
  ```
27
32
  | Prop | Type | Default | Description |
28
33
  |----------------------|-----------------------------------------|-------------|------------------------------------------------------------------------------------|
29
- | `inputData` | `string[][] \| null` | `null` | The outer array represents rows. The inner arrays represent cells within each row. |
34
+ | `inputData` | `string[][] \| null` | `null` | The outer array represents rows. The inner array represent cells within each row. |
30
35
  | `columnAlignments` | `readonly Alignment[]` | `[]` | Acceptable values are 'left', 'center', 'right', or 'none'. |
31
36
  | `isCompact` | `boolean` | `false` | Disables column width alignment to provide a more compact markdown table string. |
32
37
  | `hasPadding` | `boolean` | `true` | One space added before and after the content in each cell. |
33
38
  | `hasTabs` | `boolean` | `false` | Adds a tab character after each \| and before the content. |
34
39
  | `hasHeader` | `boolean` | `true` | Indicates whether the first row of `data` is a header. |
35
40
  | `convertLineBreaks` | `boolean` | `false` | Replace newlines with <br> tags in table cells. |
36
- | `theme` | `'light' \| 'dark'` | `light` | Controls the color scheme of the <pre> element display. |
37
- | `className` | `string` | `undefined` | Class will be applied to the <pre> element display. |
41
+ | `theme` | `'light' \| 'dark'` | `light` | Controls the color scheme of the \<pre\> element display. |
42
+ | `className` | `string` | `undefined` | Class will be applied to the \<pre\> element display. |
38
43
  | `preStyle` | `React.CSSProperties` | `undefined` | Allows direct styling of the display with CSS properties. |
39
44
  | `onGenerate` | `(markdownTableString: string) => void` | `undefined` | Callback to receive the generated Markdown table string. |
40
45
  ## Usage Patterns
@@ -63,7 +68,7 @@ interface MarkdownTableProps {
63
68
  />
64
69
  ```
65
70
 
66
- ## Key Behaviors to Remember
71
+ ## Behaviors
67
72
 
68
73
  1. **Input Validation**:
69
74
  - Input must be non-null 2D string array
package/dist/MarkdownTable.stories.d.ts ADDED
@@ -0,0 +1,143 @@
1
+ /**
2
+ * @fileoverview Storybook stories for the MarkdownTable component, demonstrating
3
+ * various configurations and use cases for markdown table generation and display.
4
+ */
5
+ /// <reference types="react" />
6
+ import type { StoryObj } from '@storybook/react';
7
+ import { MarkdownTable } from './index';
8
+ declare const meta: {
9
+ title: string;
10
+ component: import("react").FC<import("./types").MarkdownTableProps>;
11
+ parameters: {
12
+ layout: string;
13
+ };
14
+ tags: string[];
15
+ args: {
16
+ inputData: null;
17
+ columnAlignments: never[];
18
+ isCompact: false;
19
+ hasPadding: true;
20
+ hasTabs: false;
21
+ hasHeader: true;
22
+ convertLineBreaks: false;
23
+ theme: "light";
24
+ };
25
+ argTypes: {
26
+ inputData: {
27
+ control: {
28
+ type: "object";
29
+ };
30
+ description: string;
31
+ table: {
32
+ category: string;
33
+ type: {
34
+ summary: string;
35
+ };
36
+ };
37
+ };
38
+ columnAlignments: {
39
+ control: {
40
+ type: "object";
41
+ };
42
+ description: string;
43
+ table: {
44
+ category: string;
45
+ type: {
46
+ summary: string;
47
+ detail: string;
48
+ };
49
+ };
50
+ };
51
+ isCompact: {
52
+ control: "boolean";
53
+ description: string;
54
+ table: {
55
+ category: string;
56
+ type: {
57
+ summary: string;
58
+ };
59
+ };
60
+ };
61
+ hasPadding: {
62
+ control: "boolean";
63
+ description: string;
64
+ table: {
65
+ category: string;
66
+ type: {
67
+ summary: string;
68
+ };
69
+ };
70
+ };
71
+ hasTabs: {
72
+ control: "boolean";
73
+ description: string;
74
+ table: {
75
+ category: string;
76
+ type: {
77
+ summary: string;
78
+ };
79
+ };
80
+ };
81
+ hasHeader: {
82
+ control: "boolean";
83
+ description: string;
84
+ table: {
85
+ category: string;
86
+ type: {
87
+ summary: string;
88
+ };
89
+ };
90
+ };
91
+ convertLineBreaks: {
92
+ control: "boolean";
93
+ description: string;
94
+ table: {
95
+ category: string;
96
+ type: {
97
+ summary: string;
98
+ };
99
+ };
100
+ };
101
+ theme: {
102
+ options: string[];
103
+ control: {
104
+ type: "select";
105
+ };
106
+ description: string;
107
+ table: {
108
+ category: string;
109
+ type: {
110
+ summary: string;
111
+ };
112
+ defaultValue: {
113
+ summary: string;
114
+ };
115
+ };
116
+ };
117
+ className: {
118
+ control: "text";
119
+ description: string;
120
+ table: {
121
+ category: string;
122
+ type: {
123
+ summary: string;
124
+ };
125
+ };
126
+ };
127
+ preStyle: {
128
+ control: {
129
+ type: "object";
130
+ };
131
+ description: string;
132
+ table: {
133
+ category: string;
134
+ type: {
135
+ summary: string;
136
+ };
137
+ };
138
+ };
139
+ };
140
+ };
141
+ export default meta;
142
+ type Story = StoryObj<typeof MarkdownTable>;
143
+ export declare const Default: Story;
package/dist/stories/Button.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import './button.css';
2
+ export interface ButtonProps {
3
+ /** Is this the principal call to action on the page? */
4
+ primary?: boolean;
5
+ /** What background color to use */
6
+ backgroundColor?: string;
7
+ /** How large should the button be? */
8
+ size?: 'small' | 'medium' | 'large';
9
+ /** Button contents */
10
+ label: string;
11
+ /** Optional click handler */
12
+ onClick?: () => void;
13
+ }
14
+ /** Primary UI component for user interaction */
15
+ export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
package/dist/stories/Button.stories.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ tags: string[];
9
+ argTypes: {
10
+ backgroundColor: {
11
+ control: "color";
12
+ };
13
+ };
14
+ args: {
15
+ onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
16
+ };
17
+ };
18
+ export default meta;
19
+ type Story = StoryObj<typeof meta>;
20
+ export declare const Primary: Story;
21
+ export declare const Secondary: Story;
22
+ export declare const Large: Story;
23
+ export declare const Small: Story;
package/dist/stories/Header.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import './header.css';
2
+ type User = {
3
+ name: string;
4
+ };
5
+ export interface HeaderProps {
6
+ user?: User;
7
+ onLogin?: () => void;
8
+ onLogout?: () => void;
9
+ onCreateAccount?: () => void;
10
+ }
11
+ export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
12
+ export {};
package/dist/stories/Header.stories.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
5
+ tags: string[];
6
+ parameters: {
7
+ layout: string;
8
+ };
9
+ args: {
10
+ onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
11
+ onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
12
+ onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
13
+ };
14
+ };
15
+ export default meta;
16
+ type Story = StoryObj<typeof meta>;
17
+ export declare const LoggedIn: Story;
18
+ export declare const LoggedOut: Story;
package/dist/stories/Page.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import './page.css';
3
+ export declare const Page: React.FC;
package/dist/stories/Page.stories.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ import type { StoryObj } from '@storybook/react';
3
+ declare const meta: {
4
+ title: string;
5
+ component: import("react").FC<{}>;
6
+ parameters: {
7
+ layout: string;
8
+ };
9
+ };
10
+ export default meta;
11
+ type Story = StoryObj<typeof meta>;
12
+ export declare const LoggedOut: Story;
13
+ export declare const LoggedIn: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-markdown-table-ts",
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "description": "A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -22,7 +22,9 @@
22
22
  "test": "jest --config jest.config.js --coverage",
23
23
  "test:watch": "jest --config jest.config.js --watch",
24
24
  "test:ci": "jest --config jest.config.js --coverage --ci",
25
- "release": "standard-version"
25
+ "release": "standard-version",
26
+ "storybook": "storybook dev -p 6006",
27
+ "build-storybook": "storybook build"
26
28
  },
27
29
  "keywords": [
28
30
  "markdown",
@@ -47,9 +49,16 @@
47
49
  "react-dom": "^18.2.0"
48
50
  },
49
51
  "devDependencies": {
52
+ "@chromatic-com/storybook": "^3.2.2",
50
53
  "@rollup/plugin-commonjs": "^26.0.3",
51
54
  "@rollup/plugin-node-resolve": "^15.3.0",
52
55
  "@rollup/plugin-typescript": "^11.1.6",
56
+ "@storybook/addon-essentials": "^8.4.5",
57
+ "@storybook/addon-interactions": "^8.4.5",
58
+ "@storybook/addon-onboarding": "^8.4.5",
59
+ "@storybook/blocks": "^8.4.5",
60
+ "@storybook/react-vite": "^8.4.5",
61
+ "@storybook/test": "^8.4.5",
53
62
  "@testing-library/jest-dom": "^6.5.0",
54
63
  "@testing-library/react": "^16.0.1",
55
64
  "@types/jest": "^29.5.13",
@@ -57,6 +66,7 @@
57
66
  "@types/prismjs": "^1.26.4",
58
67
  "@types/react": "^18.3.8",
59
68
  "@types/react-dom": "^18.3.0",
69
+ "eslint-plugin-storybook": "^0.11.1",
60
70
  "gts": "^5.3.1",
61
71
  "identity-obj-proxy": "^3.0.0",
62
72
  "jest": "^29.7.0",
@@ -66,12 +76,11 @@
66
76
  "rollup": "^2.79.1",
67
77
  "rollup-plugin-typescript2": "^0.36.0",
68
78
  "standard-version": "^9.5.0",
79
+ "storybook": "^8.4.5",
69
80
  "ts-jest": "^29.2.5",
70
81
  "typescript": "^5.1.6"
71
82
  },
72
83
  "dependencies": {
73
- "@emotion/react": "^11.13.5",
74
- "@emotion/styled": "^11.13.5",
75
84
  "prismjs": "^1.29.0"
76
85
  }
77
86
  }