@circlehq/block-text - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.js

@@ -11,24 +11,25 @@ "use strict";
 var _dompurify = _interopRequireDefault(require("dompurify"));
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 var _EmailMarkdown = _interopRequireDefault(require("./EmailMarkdown"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var FONT_FAMILY_SCHEMA = _zod.z["enum"](['MODERN_SANS', 'BOOK_SANS', 'ORGANIC_SANS', 'GEOMETRIC_SANS', 'HEAVY_SANS', 'ROUNDED_SANS', 'MODERN_SERIF', 'BOOK_SERIF', 'MONOSPACE']).nullable().optional();
+var FONT_FAMILY_SCHEMA = _zod.z["enum"](["MODERN_SANS", "BOOK_SANS", "ORGANIC_SANS", "GEOMETRIC_SANS", "HEAVY_SANS", "ROUNDED_SANS", "MODERN_SERIF", "BOOK_SERIF", "MONOSPACE"]).nullable().optional();
 function getFontFamily(fontFamily) {
   switch (fontFamily) {
-    case 'MODERN_SANS':
+    case "MODERN_SANS":
       return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
-    case 'BOOK_SANS':
+    case "BOOK_SANS":
       return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
-    case 'ORGANIC_SANS':
+    case "ORGANIC_SANS":
       return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
-    case 'GEOMETRIC_SANS':
+    case "GEOMETRIC_SANS":
       return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
-    case 'HEAVY_SANS':
+    case "HEAVY_SANS":
       return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
-    case 'ROUNDED_SANS':
+    case "ROUNDED_SANS":
       return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
-    case 'MODERN_SERIF':
+    case "MODERN_SERIF":
       return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
-    case 'BOOK_SERIF':
+    case "BOOK_SERIF":
       return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
-    case 'MONOSPACE':
+    case "MONOSPACE":
       return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
@@ -54,4 +55,4 @@ }
     fontFamily: FONT_FAMILY_SCHEMA,
-    fontWeight: _zod.z["enum"](['bold', 'normal']).optional().nullable(),
-    textAlign: _zod.z["enum"](['left', 'center', 'right']).optional().nullable(),
+    fontWeight: _zod.z["enum"](["bold", "normal"]).optional().nullable(),
+    textAlign: _zod.z["enum"](["left", "center", "right"]).optional().nullable(),
     padding: PADDING_SCHEMA
@@ -65,3 +66,3 @@ }).optional().nullable(),
 var TextPropsDefaults = exports.TextPropsDefaults = {
-  text: ''
+  text: ""
 };
@@ -89,14 +90,10 @@ function Text(_ref) {
   var sanitizeConfig = {
-    ALLOWED_TAGS: ['p', 'br', 'ul', 'ol', 'li', 'code', 'i', 'em', 'u', 'b', 'strong', 'a', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-    ALLOWED_ATTR: ['href', 'target', 'style', 'class', 'id', 'data-testid']
+    ALLOWED_TAGS: ["p", "br", "ul", "ol", "li", "code", "i", "em", "u", "b", "strong", "a", "span", "h1", "h2", "h3", "h4", "h5", "h6"],
+    ALLOWED_ATTR: ["href", "target", "style", "class", "id", "data-testid"]
   };
   var sanitizedHtml = _dompurify["default"].sanitize(text, sanitizeConfig);
-  console.log(sanitizedHtml);
+  var parsedHtml = (0, _htmlReactParser["default"])(sanitizedHtml);
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: wStyle
-  }, /*#__PURE__*/_react["default"].createElement("style", null, "\n      ul, ol {\n        padding-left: 20px;\n        margin: 10px 0;\n      }\n      li {\n        margin: 5px 0;\n      }\n      code {\n        background-color: #f0f0f0;\n        padding: 2px 4px;\n        border-radius: 4px;\n        font-family: monospace;\n      }\n      i, em {\n        font-style: italic;\n      }\n      u {\n        text-decoration: underline;\n      }\n    "), /*#__PURE__*/_react["default"].createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: sanitizedHtml
-    }
-  }));
+  }, /*#__PURE__*/_react["default"].createElement("style", null, "\n      ul, ol {\n        padding-left: 20px;\n        margin: 10px 0;\n      }\n      li {\n        margin: 5px 0;\n      }\n      code {\n        background-color: #f0f0f0;\n        padding: 2px 4px;\n        border-radius: 4px;\n        font-family: monospace;\n      }\n      i, em {\n        font-style: italic;\n      }\n      u {\n        text-decoration: underline;\n      }\n      a {\n        color: #004bff;\n        text-decoration: underline;\n      }\n      a:hover {\n        color: #0038cc;\n        text-decoration: underline;\n      }\n    "), /*#__PURE__*/_react["default"].createElement("div", null, parsedHtml));
 }

dist/types/index.d.ts

@@ -1,3 +0,3 @@
-import React from 'react';
-import { z } from 'zod';
+import React from "react";
+import { z } from "zod";
 export declare const TextPropsSchema: z.ZodObject<{
@@ -4,0 +4,0 @@ style: z.ZodNullable<z.ZodOptional<z.ZodObject<{

package.json

 {
   "name": "@circlehq/block-text",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "CircleHq Block Text component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # @circlehq/block-text
 
-Text component for use with the EmailBuilder package.
+Text component for use with the EmailBuilder package.
+
+# How to Publish a React Package to npm
+
+This guide explains how to set up, build, and publish a React package to npm using Babel.
+
+## Prerequisites
+
+Make sure you have the following installed:
+
+- Node.js
+- npm
+- Babel
+
+## 1. Initialize Your Package
+
+Start by creating a `package.json` file for your project if you don't have one already:.
+
+1. Prepare Your Package
+Before publishing, ensure you have a package.json file in the root of your project. You can create one by running:
+
+```bash
+npm init
+```
+
+This will prompt you for information such as the package name, version, and entry point. Make sure to fill it out correctly.
+
+### 1.1 Package Name
+
+- For a public package, use a unique name, e.g., `your-package-name`.
+- For an organization package, use a scoped name, e.g., `@your-org/your-package-name`.
+
+### 1.2 Add a Build Script (Optional)
+
+If you are using TypeScript, Babel, or another compiler, add a build script in your `package.json`:
+
+
+``` json
+"scripts": {
+  "build": "your-build-command",
+  "prepublishOnly": "npm run build"
+}
+```
+This ensures that your package is built before publishing.
+
+## 2. Add an .npmignore File
+
+Create a `.npmignore` file to exclude unnecessary files from your published package. Common exclusions include:
+
+
+```bash
+/node_modules
+/tests
+/src
+/*.log
+```
+
+This prevents unnecessary files from being included in the npm package.
+
+## 3. Login to npm
+
+If you are not already logged in, log in to npm using:
+
+```bash
+npm login
+```
+
+You'll be prompted for your npm username, password, and email.
+
+## 4. Publish Your Package
+
+To publish your package to npm, run:
+
+```bash
+npm publish
+```
+
+For scoped packages (e.g., `@your-org/your-package-name`), you must specify public access:
+
+```bash
+npm publish --access public
+```
+
+## 5. Update Your Package Version
+
+To update and publish a new version of your package:
+
+1. Update the version in `package.json` (e.g., from 1.0.0 to 1.0.1).
+
+2. Run the build script, if necessary:
+
+   ```bash
+   npm run build
+   ```
+
+3. Publish the updated package:
+
+```bash
+npm publish
+```
+
+For scoped packages (e.g., `@your-org/your-package-name`), you must specify public access:
+
+```bash
+npm publish --access public
+```
+
+## 6. Verify the Package
+
+You can verify that your package was published successfully by checking it on the npm website:
+
+
+```bash
+npm info your-package-name
+```
+
+Or visit [npmjs.com](https://www.npmjs.com) and search for your package.
+
+By following these steps, you will successfully publish your package to npm.
+
+
+## 7.Updating Your Package
+When you need to publish an updated version of your package:
+
+Increment the version in package.json.
+
+Rebuild the package:
+
+```bash
+npm run build
+```
+
+Publish the updated package:
+
+```bash
+npm publish
+```
+
+## Conclusion
+By following these steps, you will be able to successfully publish your React package to npm. Don't forget to update the version each time you make changes and republish!

New alerts

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Fixed alerts

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Improved metrics

Total package byte prevSize

24254

15.68%

Number of lines in readme file

142

4633.33%

Worsened metrics

Lines of code

311

-0.96%

No dependency changes