Remove storybook-readme (#4426)

toptal · Jul 29, 2024 · 054224a · 054224a
1 parent 28e6ddd
commit 054224a
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 175 deletions.
diff --git a/.storybook/components/Markdown/Markdown.tsx b/.storybook/components/Markdown/Markdown.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-
+import cx from 'classnames'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { BaseProps } from '@toptal/picasso-shared'
@@ -9,22 +9,29 @@ import styles from './styles'
 
 interface Props extends BaseProps {
   children: string
+  className?: string
 }
 
 const useStyles = makeStyles<Theme>(styles, { name: 'PicassoMarkdown' })
 
 const Markdown = (props: Props): JSX.Element => {
-  const { children } = props
+  const { children, className } = props
 
   const classes = useStyles()
 
   return (
-    <ReactMarkdown className={classes.root} remarkPlugins={[remarkGfm]}>
+    <ReactMarkdown
+      className={cx(classes.root, className)}
+      remarkPlugins={[remarkGfm]}
+    >
       {children}
     </ReactMarkdown>
   )
 }
 
+export const createMarkdownPage = (markdown: string) => () =>
+  <Markdown className='markdown-body'>{markdown}</Markdown>
+
 Markdown.displayName = 'Markdown'
 
 export default Markdown
diff --git a/.storybook/components/Markdown/index.ts b/.storybook/components/Markdown/index.ts
@@ -1 +1 @@
-export { default } from './Markdown'
+export { default, createMarkdownPage } from './Markdown'
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -17,7 +17,6 @@ const threadLoaders = [{ loader: 'cache-loader' }, { loader: 'thread-loader' }]
 
 module.exports = {
   addons: [
-    'storybook-readme/register',
     '@storybook/addon-viewport/register',
 
     // no "/register" because https://github.com/storybookjs/storybook/issues/11929#issuecomment-672998494

diff --git a/.storybook/stories/contribution/story/index.tsx b/.storybook/stories/contribution/story/index.tsx
@@ -1,7 +1,6 @@
 // eslint-disable-file @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { doc } from 'storybook-readme'
-
+import { createMarkdownPage } from '../../../components/Markdown'
 import PicassoBook from '../../../components/PicassoBook'
 // @ts-ignore
 import CSS_NAMING from '../../../../docs/contribution/css-naming.md'
@@ -19,10 +18,13 @@ import VISUAL_SNAPSHOTS from '../../../../docs/contribution/visual-testing.md'
 import COMPONENT_API from '../../../../docs/contribution/component-api.md'
 
 const section = PicassoBook.section('Contribution')
-section.createDocPage('GitHub workflow', doc(GITHUB_WORKFLOW))
-section.createDocPage('CSS naming', doc(CSS_NAMING))
-section.createDocPage('JSS onboarding', doc(JSS_ONBOARDING))
-section.createDocPage('New components', doc(NEW_COMPONENT))
-section.createDocPage('Creating examples', doc(CREATING_EXAMPLES))
-section.createDocPage('Visual snapshots', doc(VISUAL_SNAPSHOTS))
-section.createDocPage('Design component API', doc(COMPONENT_API))
+section.createDocPage('GitHub workflow', createMarkdownPage(GITHUB_WORKFLOW))
+section.createDocPage('CSS naming', createMarkdownPage(CSS_NAMING))
+section.createDocPage('JSS onboarding', createMarkdownPage(JSS_ONBOARDING))
+section.createDocPage('New components', createMarkdownPage(NEW_COMPONENT))
+section.createDocPage(
+  'Creating examples',
+  createMarkdownPage(CREATING_EXAMPLES)
+)
+section.createDocPage('Visual snapshots', createMarkdownPage(VISUAL_SNAPSHOTS))
+section.createDocPage('Design component API', createMarkdownPage(COMPONENT_API))
diff --git a/.storybook/stories/picasso/story/index.tsx b/.storybook/stories/picasso/story/index.tsx
@@ -1,13 +1,12 @@
 // eslint-disable-file @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { doc } from 'storybook-readme'
-
 import PicassoBook from '../../../components/PicassoBook'
+import { createMarkdownPage } from '../../../components/Markdown'
 // @ts-ignore
 import README from '../../../../packages/picasso/README.md'
 // @ts-ignore
 import CHANGELOG from '../../../../packages/picasso/CHANGELOG.md'
 
 const section = PicassoBook.section('Picasso')
-section.createDocPage('Introduction', doc(README))
-section.createDocPage('Changelog', doc(CHANGELOG))
+section.createDocPage('Introduction', createMarkdownPage(README))
+section.createDocPage('Changelog', createMarkdownPage(CHANGELOG))
diff --git a/packages/picasso-charts/package.json b/packages/picasso-charts/package.json
@@ -29,8 +29,7 @@
   },
   "devDependencies": {
     "@types/d3": "^7.4.0",
-    "@types/d3-array": "3.0.4",
-    "storybook-readme": "^5.0.9"
+    "@types/d3-array": "3.0.4"
   },
   "dependencies": {
     "@toptal/picasso-utils": "1.0.3",

diff --git a/packages/picasso-charts/src/story/index.jsx b/packages/picasso-charts/src/story/index.jsx
@@ -1,10 +1,13 @@
-import { doc } from 'storybook-readme'
-
+import { createMarkdownPage } from '~/.storybook/components/Markdown'
 import PicassoBook from '~/.storybook/components/PicassoBook'
 import README from '../../README.md'
 import CHANGELOG from '../../CHANGELOG.md'
 
 const section = PicassoBook.section('Picasso Charts')
 
-section.createDocPage('README', doc(README), { alwaysOnTop: true })
-section.createDocPage('CHANGELOG', doc(CHANGELOG), { alwaysOnTop: true })
+section.createDocPage('README', createMarkdownPage(README), {
+  alwaysOnTop: true,
+})
+section.createDocPage('CHANGELOG', createMarkdownPage(CHANGELOG), {
+  alwaysOnTop: true,
+})
diff --git a/packages/picasso-forms/package.json b/packages/picasso-forms/package.json
@@ -66,7 +66,6 @@
     "@toptal/picasso-test-utils": "1.1.1",
     "@types/classnames": "^2.3.1",
     "@types/react-final-form-listeners": "^1.0.0",
-    "storybook-readme": "^5.0.9",
     "type-fest": "^4.15.0"
   },
   "sideEffects": false,

diff --git a/packages/picasso-forms/src/story/index.jsx b/packages/picasso-forms/src/story/index.jsx
@@ -1,13 +1,16 @@
-import { doc } from 'storybook-readme'
-
+import { createMarkdownPage } from '~/.storybook/components/Markdown'
 import PicassoBook from '~/.storybook/components/PicassoBook'
 import README from '../../README.md'
 import CHANGELOG from '../../CHANGELOG.md'
 
 const section = PicassoBook.section('Picasso Forms')
 
-section.createDocPage('README', doc(README), { alwaysOnTop: true })
-section.createDocPage('CHANGELOG', doc(CHANGELOG), { alwaysOnTop: true })
+section.createDocPage('README', createMarkdownPage(README), {
+  alwaysOnTop: true,
+})
+section.createDocPage('CHANGELOG', createMarkdownPage(CHANGELOG), {
+  alwaysOnTop: true,
+})
 
 const page = section.createPage('Final Form', 'Final Form')
 

diff --git a/packages/picasso-pictograms/package.json b/packages/picasso-pictograms/package.json
@@ -28,7 +28,6 @@
   },
   "devDependencies": {
     "@toptal/picasso": "47.0.1",
-    "storybook-readme": "^5.0.9",
     "@babel/types": "^7.20.7"
   },
   "sideEffects": false,

diff --git a/packages/picasso-pictograms/src/story/index.jsx b/packages/picasso-pictograms/src/story/index.jsx
@@ -1,10 +1,13 @@
-import { doc } from 'storybook-readme'
-
+import { createMarkdownPage } from '~/.storybook/components/Markdown'
 import PicassoBook from '~/.storybook/components/PicassoBook'
 import README from '../../README.md'
 import CHANGELOG from '../../CHANGELOG.md'
 
 const section = PicassoBook.section('Picasso Pictograms')
 
-section.createDocPage('README', doc(README), { alwaysOnTop: true })
-section.createDocPage('CHANGELOG', doc(CHANGELOG), { alwaysOnTop: true })
+section.createDocPage('README', createMarkdownPage(README), {
+  alwaysOnTop: true,
+})
+section.createDocPage('CHANGELOG', createMarkdownPage(CHANGELOG), {
+  alwaysOnTop: true,
+})
diff --git a/packages/picasso-query-builder/package.json b/packages/picasso-query-builder/package.json
@@ -55,8 +55,7 @@
   "devDependencies": {
     "@testing-library/react-hooks": "^8.0.1",
     "@toptal/picasso-test-utils": "1.1.1",
-    "@types/classnames": "^2.3.1",
-    "storybook-readme": "^5.0.9"
+    "@types/classnames": "^2.3.1"
   },
   "sideEffects": false,
   "exports": {

diff --git a/packages/picasso-query-builder/src/story/index.jsx b/packages/picasso-query-builder/src/story/index.jsx
@@ -1,10 +1,13 @@
-import { doc } from 'storybook-readme'
-
 import PicassoBook from '~/.storybook/components/PicassoBook'
+import { createMarkdownPage } from '~/.storybook/components/Markdown'
 import README from '../../README.md'
 import CHANGELOG from '../../CHANGELOG.md'
 
 const section = PicassoBook.section('Picasso Query Builder')
 
-section.createDocPage('README', doc(README), { alwaysOnTop: true })
-section.createDocPage('CHANGELOG', doc(CHANGELOG), { alwaysOnTop: true })
+section.createDocPage('README', createMarkdownPage(README), {
+  alwaysOnTop: true,
+})
+section.createDocPage('CHANGELOG', createMarkdownPage(CHANGELOG), {
+  alwaysOnTop: true,
+})
diff --git a/packages/picasso-rich-text-editor/package.json b/packages/picasso-rich-text-editor/package.json
@@ -70,8 +70,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@toptal/picasso-test-utils": "1.1.1",
     "@toptal/picasso-tailwind-merge": "1.2.0",
-    "@types/classnames": "^2.3.1",
-    "storybook-readme": "^5.0.9"
+    "@types/classnames": "^2.3.1"
   },
   "sideEffects": false,
   "exports": {

diff --git a/packages/picasso/package.json b/packages/picasso/package.json
@@ -136,7 +136,6 @@
     "@types/react-router-dom": "^5.3.3",
     "popper.js": "^1.16.1",
     "react-router-dom": "^5.3.4",
-    "storybook-readme": "^5.0.9",
     "styled-components": "^6.1.1"
   },
   "resolutions": {