notion-blocks-chakra-ui - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

lib/cjs/components/NotionBlock.d.ts

 /// <reference types="react" />
-import { Image } from '@chakra-ui/react';
 import { Block } from '@notionhq/client/build/src/api-types';
@@ -4,0 +3,0 @@ export declare const NotionBlock: ({ block, customImage, }: {

lib/cjs/components/NotionBlock.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -19,88 +8,32 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var NotionText_1 = require("./NotionText");
+var NotionParagraph_1 = require("./chakra/NotionParagraph");
+var NotionHeading_1 = require("./chakra/NotionHeading");
+var NotionListItem_1 = require("./chakra/NotionListItem");
+var NotionTodo_1 = require("./chakra/NotionTodo");
+var NotionToggle_1 = require("./chakra/NotionToggle");
+var NotionEmbed_1 = require("./chakra/NotionEmbed");
+var NotionUnsupported_1 = require("./chakra/NotionUnsupported");
 var NotionBlock = function (_a) {
-    var _b, _c, _d, _e;
     var block = _a.block, customImage = _a.customImage;
     var type = block.type;
-    var definedBlock;
-    var richTexts;
     switch (type) {
         case 'paragraph':
-            definedBlock = block;
-            richTexts = definedBlock.paragraph.text;
-            if ((richTexts !== null && richTexts !== void 0 ? richTexts : []).length === 0)
-                return react_1.default.createElement("br", null);
-            if (richTexts[0].text.content.startsWith('[image')) {
-                var imageProps = richTexts[0].text.content
-                    .slice(1)
-                    .slice(0, -1)
-                    .split(',')
-                    .map(function (val) { return val.trim(); })
-                    .slice(1);
-                return (react_1.default.createElement(react_2.Box, { w: "100%", className: "image-container" }, customImage && customImage.Image ? (react_1.default.createElement(customImage.Image, __assign({ src: imageProps[0] }, customImage.props))) : (react_1.default.createElement(react_2.Image, { src: imageProps[0], layout: "fill", objectFit: "contain" }))));
-            }
-            if (richTexts[0].text.content.startsWith('[video')) {
-                var videoProps = richTexts[0].text.content
-                    .slice(1)
-                    .slice(0, -1)
-                    .split(',')
-                    .map(function (val) { return val.trim(); })
-                    .slice(1);
-                return (react_1.default.createElement("video", { width: "100%", controls: true },
-                    react_1.default.createElement("source", { src: videoProps[0], type: "video/mp4" }),
-                    "Your browser does not support the video tag."));
-            }
-            if (richTexts[0].text.content.startsWith('[youtube')) {
-                var youtubeProps = richTexts[0].text.content
-                    .slice(1)
-                    .slice(0, -1)
-                    .split(',')
-                    .map(function (val) { return val.trim(); })
-                    .slice(1);
-                return (react_1.default.createElement("iframe", { width: "100%", height: "500px", src: 'https://www.youtube.com/embed/' + youtubeProps[0], title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, style: { borderRadius: '10px' } }));
-            }
-            return (react_1.default.createElement(react_2.Text, null,
-                react_1.default.createElement(NotionText_1.NotionText, { text: richTexts })));
+            react_1.default.createElement(NotionParagraph_1.NotionParagraph, { block: block, customImage: customImage });
         case 'heading_1':
-            definedBlock = block;
-            richTexts = definedBlock.heading_1.text;
-            return (react_1.default.createElement(react_2.Heading, { as: "h1", my: 4 },
-                react_1.default.createElement(NotionText_1.NotionText, { text: richTexts })));
         case 'heading_2':
-            definedBlock = block;
-            richTexts = definedBlock.heading_2.text;
-            return (react_1.default.createElement(react_2.Heading, null,
-                react_1.default.createElement(NotionText_1.NotionText, { text: richTexts })));
         case 'heading_3':
-            definedBlock = block;
-            richTexts = definedBlock.heading_3.text;
-            return (react_1.default.createElement(react_2.Heading, { as: "h3" },
-                react_1.default.createElement(NotionText_1.NotionText, { text: richTexts })));
+            return react_1.default.createElement(NotionHeading_1.NotionHeading, { block: block });
         case 'bulleted_list_item':
         case 'numbered_list_item':
-            definedBlock = block;
-            if (!definedBlock.bulleted_list_item.text)
-                return react_1.default.createElement(react_1.default.Fragment, null);
-            return (react_1.default.createElement(react_2.chakra.li, null,
-                react_1.default.createElement(NotionText_1.NotionText, { text: definedBlock.bulleted_list_item.text })));
+            return react_1.default.createElement(NotionListItem_1.NotionListItem, { block: block });
         case 'to_do':
-            var toDoBlock = block;
-            return (react_1.default.createElement(react_2.Checkbox, { defaultChecked: toDoBlock.to_do.checked, isReadOnly: true }, toDoBlock.to_do.text));
+            return react_1.default.createElement(NotionTodo_1.NotionToDo, { block: block });
         case 'toggle':
-            var toggleBlock = block;
-            return (react_1.default.createElement(react_2.Accordion, null,
-                react_1.default.createElement(react_2.AccordionItem, null,
-                    react_1.default.createElement("h2", null,
-                        react_1.default.createElement(react_2.AccordionButton, null,
-                            react_1.default.createElement(react_2.Box, { flex: "1", textAlign: "left" }, toggleBlock.toggle.text),
-                            react_1.default.createElement(react_2.AccordionIcon, null))),
-                    react_1.default.createElement(react_2.AccordionPanel, { pb: 4 }, ((_b = toggleBlock.toggle.children) !== null && _b !== void 0 ? _b : []).map(function (block, idx) { return (react_1.default.createElement(exports.NotionBlock, { key: idx, block: block })); })))));
+            return react_1.default.createElement(NotionToggle_1.NotionToggle, { block: block });
         case 'embed':
-            var embedBlock = block;
-            return (react_1.default.createElement("iframe", { src: embedBlock.embed.url, title: (_e = (_d = (_c = embedBlock.embed.caption) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.plain_text) !== null && _e !== void 0 ? _e : 'Embed item', style: { width: '100%', height: '600px' } }));
+            return react_1.default.createElement(NotionEmbed_1.NotionEmbed, { block: block });
         default:
-            return (react_1.default.createElement(react_2.Text, null, "\u274C Unsupported block (" + (type === 'unsupported' ? 'unsupported by Notion API' : type) + ")"));
+            return react_1.default.createElement(NotionUnsupported_1.NotionUnsupported, null);
     }
 };
 exports.NotionBlock = NotionBlock;

lib/esm/components/NotionBlock.d.ts

 /// <reference types="react" />
-import { Image } from '@chakra-ui/react';
 import { Block } from '@notionhq/client/build/src/api-types';
@@ -4,0 +3,0 @@ export declare const NotionBlock: ({ block, customImage, }: {

lib/esm/components/NotionBlock.js

@@ -1,98 +0,31 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
-import { Box, Heading, Text, Image, chakra, Checkbox, Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, } from '@chakra-ui/react';
-import { NotionText } from './NotionText';
+import { NotionParagraph } from './chakra/NotionParagraph';
+import { NotionHeading } from './chakra/NotionHeading';
+import { NotionListItem } from './chakra/NotionListItem';
+import { NotionToDo } from './chakra/NotionTodo';
+import { NotionToggle } from './chakra/NotionToggle';
+import { NotionEmbed } from './chakra/NotionEmbed';
+import { NotionUnsupported } from './chakra/NotionUnsupported';
 export var NotionBlock = function (_a) {
-    var _b, _c, _d, _e;
     var block = _a.block, customImage = _a.customImage;
     var type = block.type;
-    var definedBlock;
-    var richTexts;
     switch (type) {
         case 'paragraph':
-            definedBlock = block;
-            richTexts = definedBlock.paragraph.text;
-            if ((richTexts !== null && richTexts !== void 0 ? richTexts : []).length === 0)
-                return React.createElement("br", null);
-            if (richTexts[0].text.content.startsWith('[image')) {
-                var imageProps = richTexts[0].text.content
-                    .slice(1)
-                    .slice(0, -1)
-                    .split(',')
-                    .map(function (val) { return val.trim(); })
-                    .slice(1);
-                return (React.createElement(Box, { w: "100%", className: "image-container" }, customImage && customImage.Image ? (React.createElement(customImage.Image, __assign({ src: imageProps[0] }, customImage.props))) : (React.createElement(Image, { src: imageProps[0], layout: "fill", objectFit: "contain" }))));
-            }
-            if (richTexts[0].text.content.startsWith('[video')) {
-                var videoProps = richTexts[0].text.content
-                    .slice(1)
-                    .slice(0, -1)
-                    .split(',')
-                    .map(function (val) { return val.trim(); })
-                    .slice(1);
-                return (React.createElement("video", { width: "100%", controls: true },
-                    React.createElement("source", { src: videoProps[0], type: "video/mp4" }),
-                    "Your browser does not support the video tag."));
-            }
-            if (richTexts[0].text.content.startsWith('[youtube')) {
-                var youtubeProps = richTexts[0].text.content
-                    .slice(1)
-                    .slice(0, -1)
-                    .split(',')
-                    .map(function (val) { return val.trim(); })
-                    .slice(1);
-                return (React.createElement("iframe", { width: "100%", height: "500px", src: 'https://www.youtube.com/embed/' + youtubeProps[0], title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, style: { borderRadius: '10px' } }));
-            }
-            return (React.createElement(Text, null,
-                React.createElement(NotionText, { text: richTexts })));
+            React.createElement(NotionParagraph, { block: block, customImage: customImage });
         case 'heading_1':
-            definedBlock = block;
-            richTexts = definedBlock.heading_1.text;
-            return (React.createElement(Heading, { as: "h1", my: 4 },
-                React.createElement(NotionText, { text: richTexts })));
         case 'heading_2':
-            definedBlock = block;
-            richTexts = definedBlock.heading_2.text;
-            return (React.createElement(Heading, null,
-                React.createElement(NotionText, { text: richTexts })));
         case 'heading_3':
-            definedBlock = block;
-            richTexts = definedBlock.heading_3.text;
-            return (React.createElement(Heading, { as: "h3" },
-                React.createElement(NotionText, { text: richTexts })));
+            return React.createElement(NotionHeading, { block: block });
         case 'bulleted_list_item':
         case 'numbered_list_item':
-            definedBlock = block;
-            if (!definedBlock.bulleted_list_item.text)
-                return React.createElement(React.Fragment, null);
-            return (React.createElement(chakra.li, null,
-                React.createElement(NotionText, { text: definedBlock.bulleted_list_item.text })));
+            return React.createElement(NotionListItem, { block: block });
         case 'to_do':
-            var toDoBlock = block;
-            return (React.createElement(Checkbox, { defaultChecked: toDoBlock.to_do.checked, isReadOnly: true }, toDoBlock.to_do.text));
+            return React.createElement(NotionToDo, { block: block });
         case 'toggle':
-            var toggleBlock = block;
-            return (React.createElement(Accordion, null,
-                React.createElement(AccordionItem, null,
-                    React.createElement("h2", null,
-                        React.createElement(AccordionButton, null,
-                            React.createElement(Box, { flex: "1", textAlign: "left" }, toggleBlock.toggle.text),
-                            React.createElement(AccordionIcon, null))),
-                    React.createElement(AccordionPanel, { pb: 4 }, ((_b = toggleBlock.toggle.children) !== null && _b !== void 0 ? _b : []).map(function (block, idx) { return (React.createElement(NotionBlock, { key: idx, block: block })); })))));
+            return React.createElement(NotionToggle, { block: block });
         case 'embed':
-            var embedBlock = block;
-            return (React.createElement("iframe", { src: embedBlock.embed.url, title: (_e = (_d = (_c = embedBlock.embed.caption) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.plain_text) !== null && _e !== void 0 ? _e : 'Embed item', style: { width: '100%', height: '600px' } }));
+            return React.createElement(NotionEmbed, { block: block });
         default:
-            return (React.createElement(Text, null, "\u274C Unsupported block (" + (type === 'unsupported' ? 'unsupported by Notion API' : type) + ")"));
+            return React.createElement(NotionUnsupported, null);
     }
 };

package.json

 {
   "name": "notion-blocks-chakra-ui",
   "description": "Parse notion blocks from API to Chakra UI components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "./lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "./lib/esm/index.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65501

increased by15.6%

Number of package files

43

increased by186.67%

Lines of code

619

increased by65.07%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes