@ttoss/components 1.29.10 → 1.29.12

package/README.md

@@ -77,3 +77,43 @@ const Component = () => {
   );
 };
 ```
+
+### Markdown
+
+Markdown uses [react-markdown](https://remarkjs.github.io/react-markdown/) under the hood, so the props are the same. You can update the elements as you want. Ex:
+
+```tsx
+const MARKDOWN_CONTENT = `
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit quasi dolorum aperiam fugiat earum expedita non eligendi similique id minus explicabo, eum facere nihil aspernatur libero! Sapiente aliquid tenetur dolor.
+
+- Item 1
+- Item 2
+- Item 3
+
+![Alt Text](https://fastly.picsum.photos/id/436/200/300.jpg?hmac=OuJRsPTZRaNZhIyVFbzDkMYMyORVpV86q5M8igEfM3Y "Alt Text")
+
+[Google](https://google.com)
+`;
+
+const Component = () => {
+  return (
+    <Markdown
+      components={{
+        a: ({ children, ...props }) => (
+          <Link {...props} quiet>
+            {children}
+          </Link>
+        ),
+      }}
+    >
+      {MARKDOWN_CONTENT}
+    </Markdown>
+  );
+};
+```

package/dist/esm/index.js

@@ -210,4 +210,22 @@ var ToastContainer = props => {
     })
   });
 };
-export { Accordion, InstallPwa, InstallPwaUi, Modal, ToastContainer, toast };
+
+// src/components/Markdown.tsx
+import { BaseStyles } from "@ttoss/ui";
+import ReactMarkdown from "react-markdown";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Markdown = ({
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx5(BaseStyles, {
+    sx,
+    children: /* @__PURE__ */jsx5(ReactMarkdown, {
+      ...props,
+      children
+    })
+  });
+};
+export { Accordion, InstallPwa, InstallPwaUi, Markdown, Modal, ToastContainer, toast };

package/dist/index.d.mts

@@ -3,10 +3,11 @@ import * as react_accessible_accordion_dist_types_components_ItemContext from 'r
 import * as react_accessible_accordion_dist_types_helpers_types from 'react-accessible-accordion/dist/types/helpers/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { BoxProps } from '@ttoss/ui';
+import { BoxProps, FlexProps } from '@ttoss/ui';
 import ReactModal from 'react-modal';
 import { ToastContainerProps } from 'react-toastify';
 export { ToastContainerProps, toast } from 'react-toastify';
+import { Options } from 'react-markdown';
 
 type AccordionProps = BoxProps & {
     allowMultipleExpanded?: boolean;
@@ -312,4 +313,10 @@ declare const Modal: {
 
 declare const ToastContainer: (props: ToastContainerProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, Modal, ModalProps, ToastContainer };
+type MarkdownProps = Options & {
+    children: string;
+    sx?: FlexProps['sx'];
+};
+declare const Markdown: ({ children, sx, ...props }: MarkdownProps) => react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, Markdown, MarkdownProps, Modal, ModalProps, ToastContainer };

package/dist/index.d.ts

@@ -3,10 +3,11 @@ import * as react_accessible_accordion_dist_types_components_ItemContext from 'r
 import * as react_accessible_accordion_dist_types_helpers_types from 'react-accessible-accordion/dist/types/helpers/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { BoxProps } from '@ttoss/ui';
+import { BoxProps, FlexProps } from '@ttoss/ui';
 import ReactModal from 'react-modal';
 import { ToastContainerProps } from 'react-toastify';
 export { ToastContainerProps, toast } from 'react-toastify';
+import { Options } from 'react-markdown';
 
 type AccordionProps = BoxProps & {
     allowMultipleExpanded?: boolean;
@@ -312,4 +313,10 @@ declare const Modal: {
 
 declare const ToastContainer: (props: ToastContainerProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, Modal, ModalProps, ToastContainer };
+type MarkdownProps = Options & {
+    children: string;
+    sx?: FlexProps['sx'];
+};
+declare const Markdown: ({ children, sx, ...props }: MarkdownProps) => react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, Markdown, MarkdownProps, Modal, ModalProps, ToastContainer };

package/dist/index.js

@@ -41,6 +41,7 @@ __export(src_exports, {
   Accordion: () => Accordion,
   InstallPwa: () => InstallPwa,
   InstallPwaUi: () => InstallPwaUi,
+  Markdown: () => Markdown,
   Modal: () => Modal,
   ToastContainer: () => ToastContainer,
   toast: () => import_react_toastify.toast
@@ -257,11 +258,30 @@ var ToastContainer = props => {
     })
   });
 };
+
+// src/components/Markdown.tsx
+var import_ui5 = require("@ttoss/ui");
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Markdown = ({
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.BaseStyles, {
+    sx,
+    children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_markdown.default, {
+      ...props,
+      children
+    })
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   InstallPwa,
   InstallPwaUi,
+  Markdown,
   Modal,
   ToastContainer,
   toast

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.29.10",
+  "version": "1.29.12",
   "description": "React components for ttoss ecosystem.",
   "author": "ttoss",
   "contributors": [
@@ -24,21 +24,22 @@
     "@theme-ui/css": "^0.15.7",
     "@types/react-modal": "^3.16.0",
     "react-accessible-accordion": "^5.0.0",
+    "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
     "react-toastify": "^9.1.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^3.1.0"
+    "@ttoss/ui": "^3.1.1"
   },
   "devDependencies": {
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.12",
-    "jest": "^29.6.1",
+    "jest": "^29.6.2",
     "tsup": "^7.1.0",
-    "@ttoss/config": "^1.30.5",
-    "@ttoss/test-utils": "^1.23.6",
-    "@ttoss/ui": "^3.1.0"
+    "@ttoss/config": "^1.30.6",
+    "@ttoss/test-utils": "^1.23.7",
+    "@ttoss/ui": "^3.1.1"
   },
   "keywords": [
     "React",

package/src/components/Markdown.tsx

@@ -0,0 +1,15 @@
+import { BaseStyles, FlexProps } from '@ttoss/ui';
+import ReactMarkdown, { Options } from 'react-markdown';
+
+export type MarkdownProps = Options & {
+  children: string;
+  sx?: FlexProps['sx'];
+};
+
+export const Markdown = ({ children, sx, ...props }: MarkdownProps) => {
+  return (
+    <BaseStyles sx={sx}>
+      <ReactMarkdown {...props}>{children}</ReactMarkdown>
+    </BaseStyles>
+  );
+};

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './components/Accordion';
 export * from './components/InstallPwa';
 export * from './components/Modal';
 export * from './components/Toast';
+export * from './components/Markdown';