Skip to content

Commit

Permalink
Refactor storybook examples
Browse files Browse the repository at this point in the history
  • Loading branch information
eatyourgreens committed Sep 20, 2023
1 parent 24241ee commit c5f9f8b
Show file tree
Hide file tree
Showing 3 changed files with 213 additions and 69 deletions.
62 changes: 0 additions & 62 deletions packages/lib-react-components/.storybook/lib/example.md
Original file line number Diff line number Diff line change
@@ -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/
Expand Down
68 changes: 61 additions & 7 deletions packages/lib-react-components/src/Markdownz/Markdownz.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,54 @@ 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)`
border-top: solid thin black;
border-bottom: solid thin black;
`

function MarkdownTableRow({ label, content, ...props }) {
return (
<tr>
<th scope="row" border="bottom">
{label}
</th>
<td border="bottom">
<code>{content}</code>
<Markdownz {...props}>
{content}
</Markdownz>
</td>
</tr>
)
}

function MarkdownExamplesTable(props) {
return (
<table style={{ width: '100%'}}>
<colgroup>
<col span="1" style={{ width: '20%' }}/>
<col span="1" style={{ width: '80%' }}/>
</colgroup>
<thead>
<tr>
<th scope="col" border="bottom">
Content
</th>
<th scope="col" border="bottom">
Markdown
</th>
</tr>
</thead>
<tbody>
{examples.map(rowProps => <MarkdownTableRow key={props.label} {...rowProps} {...props} />)}
</tbody>
</table>
)
}

export default {
title: 'Components / Markdownz',
component: Markdownz,
Expand All @@ -23,18 +64,31 @@ export default {
}
}

export const Default = () => <Markdownz>{markdownExample}</Markdownz>
export const Default = () => (
<>
<MarkdownExamplesTable />
<Markdownz>
{markdownExample}
</Markdownz>
</>
)

export const InProjectContext = () => (
<Markdownz projectSlug='zooniverse/snapshot-wakanda'>
{markdownExample}
</Markdownz>
<>
<MarkdownExamplesTable projectSlug='zooniverse/snapshot-wakanda' />
<Markdownz>
{markdownExample}
</Markdownz>
</>
)

export const WithCustomComponents = () => (
<Markdownz components={{ tr: TableRowWithBorder }}>
{markdownExample}
</Markdownz>
<>
<MarkdownExamplesTable components={{ tr: TableRowWithBorder }} />
<Markdownz>
{markdownExample}
</Markdownz>
</>
)

export const GridExample = () => (
Expand Down
Original file line number Diff line number Diff line change
@@ -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|
`
}
]

0 comments on commit c5f9f8b

Please sign in to comment.