From c5f9f8b504f536a21d94b4465d2222cc8319858a Mon Sep 17 00:00:00 2001 From: Jim O'Donnell Date: Tue, 19 Sep 2023 13:45:19 +0100 Subject: [PATCH] Refactor storybook examples --- .../.storybook/lib/example.md | 62 ------- .../src/Markdownz/Markdownz.stories.js | 68 +++++++- .../Markdownz/helpers/storybookExamples.js | 152 ++++++++++++++++++ 3 files changed, 213 insertions(+), 69 deletions(-) create mode 100644 packages/lib-react-components/src/Markdownz/helpers/storybookExamples.js diff --git a/packages/lib-react-components/.storybook/lib/example.md b/packages/lib-react-components/.storybook/lib/example.md index 98dbed96a9e..28f0c61180e 100644 --- a/packages/lib-react-components/.storybook/lib/example.md +++ b/packages/lib-react-components/.storybook/lib/example.md @@ -1,65 +1,3 @@ -|content|markdown|rendered| -|---------|----------|-------------| -|emoji|`:smile: :-)`|:smile: :-)| -|bold|`**bold**`|**bold**| -|italicized|`_italicized_`|_italicized_| -|anchor|`[link](https://www.zooniverse.org/)`|[link](https://www.zooniverse.org/)| -|relative link|`[relative-link](/relative)`|[relative-link](/relative)| -|image|`![imagealttext](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg)`|![imagealttext](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg)| -|image resized like TESS|`![like TESS](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x)`|![like TESS](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x)| -|image resized in alt text|`![imagealttext =100x100](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg)`|![imagealttext =100x100](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg)| -|image resized in url|`![imagealttext](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x100)`|![imagealttext](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x100)| -|image with equals sign in the alt text|`![A blackboard showing the expression 2x2=4](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x100)`|![A blackboard showing the expression 2x2=4](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x100)| -|video (using image syntax)|`![alt](https://static.zooniverse.org/www.zooniverse.org/assets/home-video.mp4)`|![alt](https://static.zooniverse.org/www.zooniverse.org/assets/home-video.mp4)| -|audio (using image syntax)|`![alt](https://panoptes-uploads.zooniverse.org/production/subject_location/1c93591f-5d7e-4129-a6da-a65419b88048.mpga)`|![alt](https://panoptes-uploads.zooniverse.org/production/subject_location/1c93591f-5d7e-4129-a6da-a65419b88048.mpga)| -|superscript|`super^script^`|super^script^| -|subscript|`sub~script~`|sub~script~| -|Typed Email Address|`contact@zooniverse.org`|contact@zooniverse.org| -|Zooniverse user mention|`@srallen @team`|@srallen @team| -|Zooniverse Talk Tag mention|`#tiger`|#tiger| -|Zooniverse Subject mention (only works in project context)|`^S1234`|^S1234| -|Link inside a link|`[foo @username bar](http://example.com)`|[foo @username bar](http://example.com)| - ---- - -> blockquote - -Unordered list: -- item one -- item two -- item three - -Ordered list: -1. item one -2. item two -3. item three - -# header 1 - -## header 2 - -### header 3 - -#### header 4 - -##### header 5 - -###### header 6 - -## Table of Contents - -## News - -## Links - -Here is a footnote reference,[^1] and another.[^longnote] - -[^1]: Here is the footnote. - -[^longnote]: Here's one with multiple blocks. - - Another note. - ## Testing for vulnerabilities Taken from https://shubs.io/exploiting-markdown-syntax-and-telescope-persistent-xss-through-markdown-cve-2014-5144/ diff --git a/packages/lib-react-components/src/Markdownz/Markdownz.stories.js b/packages/lib-react-components/src/Markdownz/Markdownz.stories.js index ed560ee80c6..4c1a89f3514 100644 --- a/packages/lib-react-components/src/Markdownz/Markdownz.stories.js +++ b/packages/lib-react-components/src/Markdownz/Markdownz.stories.js @@ -4,6 +4,7 @@ import styled from 'styled-components' import Markdownz from './Markdownz' import readme from './README.md' import markdownExample from '../../.storybook/lib/example.md' +import { examples } from './helpers/storybookExamples' import markdownInGrid from './markdownGridExample.md' const TableRowWithBorder = styled(TableRow)` @@ -11,6 +12,46 @@ const TableRowWithBorder = styled(TableRow)` border-bottom: solid thin black; ` +function MarkdownTableRow({ label, content, ...props }) { + return ( + + + {label} + + + {content} + + {content} + + + + ) +} + +function MarkdownExamplesTable(props) { + return ( + + + + + + + + + + + + + {examples.map(rowProps => )} + +
+ Content + + Markdown +
+ ) +} + export default { title: 'Components / Markdownz', component: Markdownz, @@ -23,18 +64,31 @@ export default { } } -export const Default = () => {markdownExample} +export const Default = () => ( + <> + + + {markdownExample} + + +) export const InProjectContext = () => ( - - {markdownExample} - + <> + + + {markdownExample} + + ) export const WithCustomComponents = () => ( - - {markdownExample} - + <> + + + {markdownExample} + + ) export const GridExample = () => ( diff --git a/packages/lib-react-components/src/Markdownz/helpers/storybookExamples.js b/packages/lib-react-components/src/Markdownz/helpers/storybookExamples.js new file mode 100644 index 00000000000..41ca19b8a5e --- /dev/null +++ b/packages/lib-react-components/src/Markdownz/helpers/storybookExamples.js @@ -0,0 +1,152 @@ +import dedent from 'dedent' + +export const examples = [ + { + label: 'emoji', + content: ':smile: :-)' + }, + { + label: 'bold', + content: '**bold**' + }, + { + label: 'italicized', + content: '_italicized_' + }, + { + label: 'anchor', + content: '[link](https://www.zooniverse.org/)' + }, + { + label: 'relative link', + content: '[relative-link](/relative)' + }, + { + label: 'image', + content: '![imagealttext](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg)' + }, + { + label: 'image resized like TESS', + content: '![like TESS](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x)' + }, + { + label: 'image resized in alt text', + content: '![imagealttext =100x100](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg)' + }, + { + label: 'image resized in url', + content: '![imagealttext](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x100)' + }, + { + label: 'image with equals sign in the alt text', + content: '![A blackboard showing the expression 2x2=4](https://panoptes-uploads.zooniverse.org/production/subject_location/66094a64-8823-4314-8ef4-1ee228e49470.jpeg =100x100)' + }, + { + label: 'video (using image syntax)', + content: '![alt](https://static.zooniverse.org/www.zooniverse.org/assets/home-video.mp4)' + }, + { + label: 'audio (using image syntax)', + content: '![alt](https://panoptes-uploads.zooniverse.org/production/subject_location/1c93591f-5d7e-4129-a6da-a65419b88048.mpga)' + }, + { + label: 'JSON data subject', + content: '![alt](https://panoptes-uploads.zooniverse.org/subject_location/74fddc9b-790d-47c6-9eac-110c64022ea8.json =300x)' + }, + { + label: 'superscript', + content: 'super^script^' + }, + { + label: 'subscript', + content: 'sub~script~' + }, + { + label: 'typed email address', + content: 'contact@zooniverse.org' + }, + { + label: 'Zooniverse user mention', + content: '@srallen @team' + }, + { + label: 'Zooniverse Talk Tag mention', + content: '#tiger' + }, + { + label: 'Zooniverse Subject mention (only works in project context)', + content: '^S1234' + }, + { + label: 'Link inside a link', + content: '[foo @username bar](http://example.com)' + }, + { + label: 'blockquote', + content: '>blockquote' + }, + { + label: 'unordered list', + content: dedent` +- item one +- item two +- item three + ` + }, + { + label: 'ordered list', + content: dedent` +1. item one +1. item two +1. item three + ` + }, + { + label: 'headings', + content: dedent` +# header 1 + +## header 2 + +### header 3 + +#### header 4 + +##### header 5 + +###### header 6 + ` + }, + { + label: 'table of contents', + content: dedent` +[[toc]] + +## News + +## Links + ` + }, + { + label: 'footnotes', + content: dedent` +Here is a footnote reference,[^1] and another.[^longnote] + +[^1]: Here is the footnote. + +[^longnote]: Here's one with multiple blocks. + + Another note. + ` + }, + { + label: 'table', + content: dedent` +|fruit|colour| +|-----|------| +|apple|green| +|banana|yellow| +|strawberry|red| + ` + } +] \ No newline at end of file