@stellar-expert/ui-framework 1.16.7 → 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/button.scss

@@ -1,174 +1,174 @@
-$button-spacing: 0.5rem;
-
-.button,
-button {
-  border: none;
-  color: var(--color-bg);
-  background: none;
-  cursor: pointer;
-  display: inline-block;
-  font-size: $font-size-base;
-  font-weight: 400;
-  font-family: $font-face-primary;
-  height: 2.4em;
-  min-width: 6em;
-  line-height: 2.4em;
-  padding: 0 1.4em;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  margin-right: $button-spacing;
-  margin-bottom: 0.5em;
-  position: relative;
-  z-index: 0;
-  user-select: none;
-
-  &.button-block {
-    display: block;
-    width: 100%;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &.small {
-    font-size: 1.25rem;
-    padding: 0 1em;
-  }
-
-  &:before {
-    content: '';
-    display: block;
-    background: var(--color-highlight);
-    border: none;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 6px;
-    width: calc(100% - 12px);
-    height: 100%;
-    transform: skew(-20deg);
-  }
-
-  &:focus {
-    outline: 0;
-    background: none !important;
-  }
-
-  &:hover {
-    color: var(--color-bg);
-
-    &:before {
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-    }
-  }
-
-  &:active {
-    &:before {
-      top: 1px;
-      left: 7px;
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-    }
-  }
-
-  &[disabled],
-  &.disabled {
-    cursor: default !important;
-    opacity: 0.7;
-
-    &:hover,
-    &:active {
-      &:before {
-        background: var(--color-primary);
-        border-color: var(--color-primary);
-        top: 0;
-        left: 6px;
-      }
-    }
-  }
-
-  &.button-outline {
-    color: var(--color-highlight);
-
-    &:before {
-      border: 1px solid var(--color-highlight);
-      background: var(--color-bg);
-    }
-
-    &:hover {
-      &:before {
-        background: var(--color-bg);
-        border-color: var(--color-primary);
-      }
-    }
-
-    &[disabled],
-    &.disabled {
-      &:focus,
-      &:hover {
-        color: var(--color-highlight);
-      }
-
-      &:before {
-        background: var(--color-bg);
-        border-color: var(--color-highlight);
-      }
-    }
-  }
-
-  &.button-clear {
-    color: var(--color-highlight);
-
-    &:focus,
-    &:hover {
-      color: var(--color-primary);
-    }
-
-    &[disabled],
-    &.disabled {
-      &:focus,
-      &:hover {
-        color: var(--color-highlight);
-      }
-    }
-  }
-
-  &.loading:after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 20%;
-    height: 100%;
-    opacity: 0.4;
-    background: linear-gradient(to right, transparent, var(--color-text) 50%, transparent);
-    transform: skew(-20deg) translateX(0);
-    animation: loading-button 3s infinite ease-in-out;
-  }
-}
-
-@keyframes loading-button {
-  0% {
-    left: 0;
-  }
-  50% {
-    left: 80%;
-  }
-  100% {
-    left: 0;
-  }
-}
-
-@media (max-width: $responsive-mobile-browser-width) {
-  button,
-  .button {
-    &.stackable {
-      display: block;
-      width: 100%;
-    }
-  }
+$button-spacing: 0.5rem;
+
+.button,
+button {
+  border: none;
+  color: var(--color-bg);
+  background: none;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size-base;
+  font-weight: 400;
+  font-family: $font-face-primary;
+  height: 2.4em;
+  min-width: 6em;
+  line-height: 2.4em;
+  padding: 0 1.4em;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  margin-right: $button-spacing;
+  margin-bottom: 0.5em;
+  position: relative;
+  z-index: 0;
+  user-select: none;
+
+  &.button-block {
+    display: block;
+    width: 100%;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &.small {
+    font-size: 1.25rem;
+    padding: 0 1em;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    background: var(--color-highlight);
+    border: none;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 6px;
+    width: calc(100% - 12px);
+    height: 100%;
+    transform: skew(-20deg);
+  }
+
+  &:focus {
+    outline: 0;
+    background: none !important;
+  }
+
+  &:hover {
+    color: var(--color-bg);
+
+    &:before {
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    }
+  }
+
+  &:active {
+    &:before {
+      top: 1px;
+      left: 7px;
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    }
+  }
+
+  &[disabled],
+  &.disabled {
+    cursor: default !important;
+    opacity: 0.7;
+
+    &:hover,
+    &:active {
+      &:before {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+        top: 0;
+        left: 6px;
+      }
+    }
+  }
+
+  &.button-outline {
+    color: var(--color-highlight);
+
+    &:before {
+      border: 1px solid var(--color-highlight);
+      background: var(--color-bg);
+    }
+
+    &:hover {
+      &:before {
+        background: var(--color-bg);
+        border-color: var(--color-primary);
+      }
+    }
+
+    &[disabled],
+    &.disabled {
+      &:focus,
+      &:hover {
+        color: var(--color-highlight);
+      }
+
+      &:before {
+        background: var(--color-bg);
+        border-color: var(--color-highlight);
+      }
+    }
+  }
+
+  &.button-clear {
+    color: var(--color-highlight);
+
+    &:focus,
+    &:hover {
+      color: var(--color-primary);
+    }
+
+    &[disabled],
+    &.disabled {
+      &:focus,
+      &:hover {
+        color: var(--color-highlight);
+      }
+    }
+  }
+
+  &.loading:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20%;
+    height: 100%;
+    opacity: 0.4;
+    background: linear-gradient(to right, transparent, var(--color-text) 50%, transparent);
+    transform: skew(-20deg) translateX(0);
+    animation: loading-button 3s infinite ease-in-out;
+  }
+}
+
+@keyframes loading-button {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 80%;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@media (max-width: $responsive-mobile-browser-width) {
+  button,
+  .button {
+    &.stackable {
+      display: block;
+      width: 100%;
+    }
+  }
 }

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
 }