@stellar-expert/ui-framework 1.16.8 → 1.17.0

package/controls/button.js

@@ -1,79 +1,94 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cn from 'classnames'
-import './button.scss'
-
-export const Button = React.memo(function Button({href, onClick, block, outline, clear, stackable, small, disabled, loading, className, children, ...op}) {
-    const c = cn('button', {
-        small,
-        disabled,
-        loading,
-        'button-block': block,
-        'button-outline': outline,
-        'button-clear': clear,
-        stackable
-    }, className)
-    const props = {className: c, onClick, ...op}
-    if (href) {
-        props.onClick = function (e) {
-            e.preventDefault()
-            return false
-        }
-        return <a href={href} {...props}>{children}</a>
-    }
-    if (disabled) {
-        props.disabled = true
-    }
-    return <button {...props}>{children}</button>
-})
-
-Button.propTypes = {
-    /**
-     * Button link - renders the button as A tag; if not set, BUTTON tag is rendered instead
-     */
-    href: PropTypes.string,
-    /**
-     * Click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * Whether to render the button as block element
-     */
-    block: PropTypes.bool,
-    /**
-     * Render only a thin outline instead of the color-filled button
-     */
-    outline: PropTypes.bool,
-    /**
-     * Do not render an outline - just the text
-     */
-    clear: PropTypes.bool,
-    /**
-     * Whether buttons should look stackable on mobile devices
-     */
-    stackable: PropTypes.bool,
-    /**
-     * Renders a small button
-     */
-    small: PropTypes.bool,
-    /**
-     * Whether the button is currently disabled
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Show loading animation on the button
-     */
-    loading: PropTypes.bool,
-    /**
-     * Externally provided CSS classes
-     */
-    className: PropTypes.string,
-    /**
-     * Tooltip text
-     */
-    title: PropTypes.string,
-    /**
-     * Text inside the button
-     */
-    children: PropTypes.any.isRequired
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './button.scss'
+
+/**
+ * Versatile button component rendered as `<button>` or `<a>` tag
+ * @param {Object} props
+ * @param {string} [props.href] - Link URL; renders as `<a>` tag when set
+ * @param {function} [props.onClick] - Click handler
+ * @param {boolean} [props.block] - Render as a block-level element
+ * @param {boolean} [props.outline] - Render with outline style instead of filled
+ * @param {boolean} [props.clear] - Render with no outline, text only
+ * @param {boolean} [props.stackable] - Stack buttons on mobile devices
+ * @param {boolean} [props.small] - Render a smaller button
+ * @param {boolean} [props.disabled] - Disable the button
+ * @param {boolean} [props.loading] - Show loading animation
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {*} props.children - Button content
+ */
+export const Button = React.memo(function Button({href, onClick, block, outline, clear, stackable, small, disabled, loading, className, children, ...op}) {
+    const c = cn('button', {
+        small,
+        disabled,
+        loading,
+        'button-block': block,
+        'button-outline': outline,
+        'button-clear': clear,
+        stackable
+    }, className)
+    const props = {className: c, onClick, ...op}
+    if (href) {
+        props.onClick = function (e) {
+            e.preventDefault()
+            return false
+        }
+        return <a href={href} {...props}>{children}</a>
+    }
+    if (disabled) {
+        props.disabled = true
+    }
+    return <button {...props}>{children}</button>
+})
+
+Button.propTypes = {
+    /**
+     * Button link - renders the button as A tag; if not set, BUTTON tag is rendered instead
+     */
+    href: PropTypes.string,
+    /**
+     * Click handler
+     */
+    onClick: PropTypes.func,
+    /**
+     * Whether to render the button as block element
+     */
+    block: PropTypes.bool,
+    /**
+     * Render only a thin outline instead of the color-filled button
+     */
+    outline: PropTypes.bool,
+    /**
+     * Do not render an outline - just the text
+     */
+    clear: PropTypes.bool,
+    /**
+     * Whether buttons should look stackable on mobile devices
+     */
+    stackable: PropTypes.bool,
+    /**
+     * Renders a small button
+     */
+    small: PropTypes.bool,
+    /**
+     * Whether the button is currently disabled
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Show loading animation on the button
+     */
+    loading: PropTypes.bool,
+    /**
+     * Externally provided CSS classes
+     */
+    className: PropTypes.string,
+    /**
+     * Tooltip text
+     */
+    title: PropTypes.string,
+    /**
+     * Text inside the button
+     */
+    children: PropTypes.any.isRequired
 }

package/controls/code-block.js

@@ -1,35 +1,43 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cn from 'classnames'
-import hljs from 'highlight.js/lib/core'
-import jsLang from 'highlight.js/lib/languages/javascript'
-import jsonLang from 'highlight.js/lib/languages/json'
-import xmlLang from 'highlight.js/lib/languages/xml'
-import plaintextLang from 'highlight.js/lib/languages/plaintext'
-import tomlLang from 'highlight.js/lib/languages/ini'
-import rustLang from 'highlight.js/lib/languages/rust'
-import './code-block.scss'
-
-hljs.registerLanguage('js', jsLang)
-hljs.registerLanguage('json', jsonLang)
-hljs.registerLanguage('html', xmlLang)
-hljs.registerLanguage('xml', xmlLang)
-hljs.registerLanguage('plain', plaintextLang)
-hljs.registerLanguage('toml', tomlLang)
-hljs.registerLanguage('rust', rustLang)
-
-export const CodeBlock = React.memo(function CodeBlock({children, lang, className, style}) {
-    if (lang) {
-        lang = lang.split(',')
-    }
-    const languageFilter = lang || ['js', 'json']
-    const highlighted = hljs.highlightAuto(children, languageFilter)
-    return <pre dangerouslySetInnerHTML={{__html: highlighted.value}} className={cn('hljs', className)} style={style}/>
-})
-
-CodeBlock.propTypes = {
-    children: PropTypes.string.isRequired,
-    lang: PropTypes.oneOf(['js', 'json', 'html', 'xml', 'toml', 'rust', 'plain']),
-    className: PropTypes.string,
-    style: PropTypes.object
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import hljs from 'highlight.js/lib/core'
+import jsLang from 'highlight.js/lib/languages/javascript'
+import jsonLang from 'highlight.js/lib/languages/json'
+import xmlLang from 'highlight.js/lib/languages/xml'
+import plaintextLang from 'highlight.js/lib/languages/plaintext'
+import tomlLang from 'highlight.js/lib/languages/ini'
+import rustLang from 'highlight.js/lib/languages/rust'
+import './code-block.scss'
+
+hljs.registerLanguage('js', jsLang)
+hljs.registerLanguage('json', jsonLang)
+hljs.registerLanguage('html', xmlLang)
+hljs.registerLanguage('xml', xmlLang)
+hljs.registerLanguage('plain', plaintextLang)
+hljs.registerLanguage('toml', tomlLang)
+hljs.registerLanguage('rust', rustLang)
+
+/**
+ * Syntax-highlighted code block using highlight.js
+ * @param {Object} props
+ * @param {string} props.children - Source code text
+ * @param {'js'|'json'|'html'|'xml'|'toml'|'rust'|'plain'} [props.lang] - Language for syntax highlighting
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.style] - Inline styles
+ */
+export const CodeBlock = React.memo(function CodeBlock({children, lang, className, style}) {
+    if (lang) {
+        lang = lang.split(',')
+    }
+    const languageFilter = lang || ['js', 'json']
+    const highlighted = hljs.highlightAuto(children, languageFilter)
+    return <pre dangerouslySetInnerHTML={{__html: highlighted.value}} className={cn('hljs', className)} style={style}/>
+})
+
+CodeBlock.propTypes = {
+    children: PropTypes.string.isRequired,
+    lang: PropTypes.oneOf(['js', 'json', 'html', 'xml', 'toml', 'rust', 'plain']),
+    className: PropTypes.string,
+    style: PropTypes.object
 }