kwikid-components-react
Version:
KwikID's Component Library in React
114 lines (110 loc) • 5.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TableContent = exports.RichText = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Html = _interopRequireDefault(require("./Html"));
var _Html2 = require("./Html.defaults");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* The HTML component allows rendering of HTML strings with proper sanitization.
* It's useful for displaying rich text content from CMS systems or other HTML sources.
*
* ## Usage
*
* ```jsx
* import { KwikUIHtml } from 'react-kwikui';
*
* <KwikUIHtml
* htmlString="<p>This is <strong>formatted</strong> content with <a href='#'>links</a>.</p>"
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Content/HTML",
component: _Html.default,
parameters: {
componentSubtitle: "Render sanitized HTML content",
docs: {
description: {
component: "The HTML component safely renders HTML strings with proper sanitization to prevent XSS attacks."
}
},
a11y: {
config: {
rules: [{
id: "color-contrast",
enabled: true
}]
}
}
},
argTypes: {
htmlString: {
control: "text",
description: "The HTML string to be rendered",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Html2.KWIKUI_HTML__DEFAULTS.htmlString || '""'
}
}
}
}
};
/**
* Template for rendering the HTML component
*/
const Template = args => {
return /*#__PURE__*/_react.default.createElement(_Html.default, args);
};
/**
* Default implementation of the HTML component
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _Html2.KWIKUI_HTML__DEFAULTS), {}, {
htmlString: "<h2>Sample HTML Content</h2><p>This is a <strong>paragraph</strong> with <em>formatting</em>.</p>"
});
Default.parameters = {
docs: {
description: {
story: "Basic example of rendering HTML content."
}
}
};
/**
* HTML component with complex rich text content
*/
const RichText = exports.RichText = Template.bind({});
RichText.args = {
htmlString: "\n <h1>Rich HTML Content</h1>\n <p>This example shows a variety of HTML elements:</p>\n <ul>\n <li>Lists with <strong>bold text</strong></li>\n <li>Formatted <em>italic content</em></li>\n <li>Hyperlinks like <a href=\"#\">this example link</a></li>\n </ul>\n <blockquote>This is a blockquote that might come from a CMS system.</blockquote>\n <div style=\"padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-top: 10px;\">\n <p>And styled containers with custom CSS</p>\n </div>\n "
};
RichText.parameters = {
docs: {
description: {
story: "Example showing a more complex HTML structure with various formatting elements."
}
}
};
/**
* HTML component with table content
*/
const TableContent = exports.TableContent = Template.bind({});
TableContent.args = {
htmlString: "\n <h3>Data Table Example</h3>\n <table border=\"1\" style=\"border-collapse: collapse; width: 100%;\">\n <thead>\n <tr style=\"background-color: #f2f2f2;\">\n <th style=\"padding: 8px;\">Name</th>\n <th style=\"padding: 8px;\">Age</th>\n <th style=\"padding: 8px;\">Location</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"padding: 8px;\">John Doe</td>\n <td style=\"padding: 8px;\">30</td>\n <td style=\"padding: 8px;\">New York</td>\n </tr>\n <tr style=\"background-color: #f9f9f9;\">\n <td style=\"padding: 8px;\">Jane Smith</td>\n <td style=\"padding: 8px;\">25</td>\n <td style=\"padding: 8px;\">San Francisco</td>\n </tr>\n <tr>\n <td style=\"padding: 8px;\">Robert Johnson</td>\n <td style=\"padding: 8px;\">42</td>\n <td style=\"padding: 8px;\">Chicago</td>\n </tr>\n </tbody>\n </table>\n "
};
TableContent.parameters = {
docs: {
description: {
story: "Example showing HTML tables that might be used for data presentation."
}
}
};