cozy-ui 111.8.1 → 111.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [111.9.0](https://github.com/cozy/cozy-ui/compare/v111.8.1...v111.9.0) (2024-09-05)
+
+
+### Features
+
+* Add markdwon component ([366def6](https://github.com/cozy/cozy-ui/commit/366def6))
+
 ## [111.8.1](https://github.com/cozy/cozy-ui/compare/v111.8.0...v111.8.1) (2024-08-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "111.8.1",
+  "version": "111.9.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Markdown/Readme.md

@@ -0,0 +1,71 @@
+This component is used to render markdown content. To see more about the Markdown, you can check the [Markdown Guide](https://www.markdownguide.org/).
+
+```jsx
+
+import Markdown from 'cozy-ui/transpiled/react/Markdown'
+
+const textInMarkdown = `
+# Demo
+
+This is a text to test all possibilities of markdown.
+
+## Headers
+
+# H1 Header
+## H2 Header
+### H3 Header
+#### H4 Header
+##### H5 Header
+###### H6 Header
+
+## Paragraphs
+
+I really like using Markdown.
+
+I think I'll use it to format all of my documents from now on.
+
+## Emphasis
+
+_Italic Text_
+
+***Bold Text***
+
+__Bold and Italic Text__
+
+~~Strikethrough~~
+
+<u>Underline</u>
+
+## Lists
+
+1. Ordered List Item 1
+2. Ordered List Item 2
+3. Ordered List Item 3
+
+- Unordered List Item 1
+- Unordered List Item 2
+- Unordered List Item 3
+
+## Links
+
+[Link to GitHub](https://github.com/cozy/cozy-ui)
+
+## Images
+
+![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg "San Juan Mountains")
+
+## Code
+
+Inline code: \`const variable = 'value';\`
+
+Block code:
+\`\`\`javascript function add(a, b) { return a + b; }\`\`\`
+
+## Blockquotes
+
+> This is a blockquote.
+`;
+
+<Markdown content={textInMarkdown} />
+
+```

package/react/Markdown/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+import Link from '../Link'
+import Typography from '../Typography'
+
+const Markdown = ({ content }) => {
+  return (
+    <ReactMarkdown
+      source={content}
+      renderers={{
+        link: ({ children, href }) => (
+          <Link href={href} rel="noreferrer" target="_blank">
+            {children}
+          </Link>
+        ),
+        heading: ({ children, level }) => (
+          <Typography variant={`h${level}`} className="u-mb-1">
+            {children}
+          </Typography>
+        ),
+        paragraph: ({ children }) => (
+          <Typography variant="body1" className="u-mb-1">
+            {children}
+          </Typography>
+        )
+      }}
+    />
+  )
+}
+
+export default Markdown

package/react/Paywall/Paywall.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
 
 import { useInstanceInfo } from 'cozy-client'
 import { buildPremiumLink } from 'cozy-client/dist/models/instance'
@@ -14,6 +13,7 @@ import Button from '../Buttons'
 import { IllustrationDialog } from '../CozyDialogs'
 import Icon from '../Icon'
 import CozyUpgradeIcon from '../Icons/CozyUpgrade'
+import Markdown from '../Markdown'
 import Spinner from '../Spinner'
 import Typography from '../Typography'
 import { useI18n } from '../providers/I18n'
@@ -94,13 +94,10 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
         />
       }
       content={
-        <ReactMarkdown
-          source={t(`${variant}Paywall.${type}.content`, {
+        <Markdown
+          content={t(`${variant}Paywall.${type}.content`, {
             ...contentInterpolation
           })}
-          renderers={{
-            paragraph: ({ children }) => <p className="u-mt-0">{children}</p>
-          }}
         />
       }
       onClose={onClose}

package/react/Paywall/Readme.md

@@ -94,15 +94,15 @@ const makeClient = premiumLink =>
           }
         ]
       },
-      'io.cozy.settings/context': {
+      'io.cozy.settings/io.cozy.settings.context': {
         doctype: 'io.cozy.settings',
         definition: {
           doctype: 'io.cozy.settings',
-          id: 'io.cozy.settings/context'
+          id: 'io.cozy.settings/io.cozy.settings.context'
         },
         data: [
           {
-            id: 'io.cozy.settings/context',
+            id: 'io.cozy.settings/io.cozy.settings.context',
             attributes: {
               enable_premium_links: premiumLink,
               manager_url: 'http://mycozy.cloud',

package/react/index.js

@@ -137,3 +137,4 @@ export { default as AlertProvider, useAlert } from './Alert'
 export { default as Modal } from './Modal'
 export { ListSkeleton, ListItemSkeleton } from './Skeletons'
 export { default as ActionsBar } from './ActionsBar'
+export { default as Markdown } from './Markdown'

package/transpiled/react/Markdown/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import Link from "cozy-ui/transpiled/react/Link";
+import Typography from "cozy-ui/transpiled/react/Typography";
+
+var Markdown = function Markdown(_ref) {
+  var content = _ref.content;
+  return /*#__PURE__*/React.createElement(ReactMarkdown, {
+    source: content,
+    renderers: {
+      link: function link(_ref2) {
+        var children = _ref2.children,
+            href = _ref2.href;
+        return /*#__PURE__*/React.createElement(Link, {
+          href: href,
+          rel: "noreferrer",
+          target: "_blank"
+        }, children);
+      },
+      heading: function heading(_ref3) {
+        var children = _ref3.children,
+            level = _ref3.level;
+        return /*#__PURE__*/React.createElement(Typography, {
+          variant: "h".concat(level),
+          className: "u-mb-1"
+        }, children);
+      },
+      paragraph: function paragraph(_ref4) {
+        var children = _ref4.children;
+        return /*#__PURE__*/React.createElement(Typography, {
+          variant: "body1",
+          className: "u-mb-1"
+        }, children);
+      }
+    }
+  });
+};
+
+export default Markdown;

package/transpiled/react/Paywall/Paywall.js

@@ -9,7 +9,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { useInstanceInfo } from 'cozy-client';
 import { buildPremiumLink } from 'cozy-client/dist/models/instance';
 import { isFlagshipApp } from 'cozy-device-helper';
@@ -21,6 +20,7 @@ import Button from "cozy-ui/transpiled/react/Buttons";
 import { IllustrationDialog } from "cozy-ui/transpiled/react/CozyDialogs";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import CozyUpgradeIcon from "cozy-ui/transpiled/react/Icons/CozyUpgrade";
+import Markdown from "cozy-ui/transpiled/react/Markdown";
 import Spinner from "cozy-ui/transpiled/react/Spinner";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
@@ -140,16 +140,8 @@ var Paywall = function Paywall(_ref) {
       label: isFlagshipAppIapAvailable === null ? t("action.loading") : canOpenPremiumLink ? t("".concat(variant, "Paywall.").concat(type, ".action")) : t("action.withoutIAP"),
       busy: isFlagshipAppIapAvailable === null
     }),
-    content: /*#__PURE__*/React.createElement(ReactMarkdown, {
-      source: t("".concat(variant, "Paywall.").concat(type, ".content"), _objectSpread({}, contentInterpolation)),
-      renderers: {
-        paragraph: function paragraph(_ref3) {
-          var children = _ref3.children;
-          return /*#__PURE__*/React.createElement("p", {
-            className: "u-mt-0"
-          }, children);
-        }
-      }
+    content: /*#__PURE__*/React.createElement(Markdown, {
+      content: t("".concat(variant, "Paywall.").concat(type, ".content"), _objectSpread({}, contentInterpolation))
     }),
     onClose: onClose
   });

package/transpiled/react/index.js

@@ -109,4 +109,5 @@ export { default as TimelineSeparator } from './TimelineSeparator';
 export { default as AlertProvider, useAlert } from './Alert';
 export { default as Modal } from './Modal';
 export { ListSkeleton, ListItemSkeleton } from './Skeletons';
-export { default as ActionsBar } from './ActionsBar';
+export { default as ActionsBar } from './ActionsBar';
+export { default as Markdown } from './Markdown';