feat: New Prose component to style free-form HTML content consisten…

…tly (#756)

* feat: New `Prose` component to style free-form HTML content consistently

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v20.1.0
+
+-   [Feat] New `Prose` component to style free-form HTML content consistently.
+
 # v20.0.3
 
 -   [Fix] Slightly tweak the height of the `Badge` component.

docs/iframe.html

@@ -476,4 +476,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.f0057794.iframe.bundle.js"></script><script src="main.e5d7635a.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.6eae3178.iframe.bundle.js"></script><script src="main.5b17ba62.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1676988479996,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.15.0"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}
+{"generatedAt":1677608237660,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}

jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
         '!**/*.stories.{js,jsx,ts,tsx}',
         '!**/*storybook*.{js,jsx,ts,tsx}',
         '!**/*-stories-components.{js,jsx,ts,tsx}',
+        '!**/*-example.{js,jsx,ts,tsx}',
     ],
     setupFilesAfterEnv: ['./scripts/jestSetup.ts'],
     moduleNameMapper: {

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "20.0.3",
+    "version": "20.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {
@@ -89,6 +89,7 @@
         "@types/classnames": "^2.2.10",
         "@types/enzyme": "^3.10.7",
         "@types/jest-axe": "^3.5.3",
+        "@types/marked": "^4.0.8",
         "@types/react": "^17.0.45",
         "@types/react-dom": "^17.0.17",
         "@typescript-eslint/eslint-plugin": "^5.25.0",
@@ -116,6 +117,7 @@
         "less": "^3.8.1",
         "less-loader": "^7.0.0",
         "lint-staged": "^10.4.0",
+        "marked": "^4.2.12",
         "mini-css-extract-plugin": "^0.11.0",
         "mockdate": "^3.0.2",
         "optimize-css-assets-webpack-plugin": "^5.0.3",

src/index.ts

@@ -19,6 +19,7 @@ export * from './toast'
 // text and typography
 export * from './heading'
 export * from './text'
+export * from './prose'
 
 // links
 export * from './button'

src/prose/index.ts

@@ -0,0 +1,2 @@
+export { Prose } from './prose'
+export type { ProseProps } from './prose'

src/prose/prose-example.ts

@@ -0,0 +1,82 @@
+import { marked } from 'marked'
+
+export const proseExample = marked(`
+# An h1 header
+
+This is a paragraph. Paragraphs can have any length, and when long enough, their content wraps over
+multiple lines. This paragraph, for instance, should be long enough to do so in the most common
+screen sizes that are comfortable to read anyway.
+
+A second paragraph now. One that contains [a link to Doist.com](https://doist.com), and text
+formatting examples, such as **bold text**, _italic text_, and \`monospace\`. Now let’s continue
+with a list:
+
+-   this one
+-   that one
+-   the other one
+
+And a blockquote:
+
+> Blockquotes are indented and have a border on the left. The text color is slightly dimmed.
+>
+> They can span multiple paragraphs, if you like.
+>
+> > And they can be nested too.
+
+## An h2 header
+
+Here's a numbered list:
+
+1.  first item
+2.  second item
+3.  third item
+
+Here's a multi-line code example:
+
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
+
+And another one
+
+\`\`\`python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print i
+\`\`\`
+
+### An h3 header
+
+Now a nested list:
+
+1.  First, get these ingredients:
+
+    -   carrots
+    -   celery
+    -   lentils
+
+2.  Boil some water.
+
+3.  Dump everything in the pot and follow
+    this algorithm:
+
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
+
+    Do not bump wooden spoon or it will fall.
+
+---
+
+A horizontal rule follows.
+
+---
+
+The End
+`)