@helpdice/ui 1.0.1 → 1.0.2

package/esm/rating/rating.js

@@ -0,0 +1,101 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { tupleNumber } from '../utils/prop-types';
+import RatingIcon from './rating-icon';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var ratingCountTuple = tupleNumber(2, 3, 4, 5, 6, 7, 8, 9, 10);
+var ratingValueTuple = tupleNumber(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
+var getColor = function getColor(type, palette) {
+  var colors = {
+    "default": palette.foreground,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  return colors[type] || colors["default"];
+};
+var RatingComponent = function RatingComponent(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(RatingIcon, null) : _ref$icon,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 5 : _ref$count,
+    customValue = _ref.value,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? 1 : _ref$initialValue,
+    onValueChange = _ref.onValueChange,
+    _ref$locked = _ref.locked,
+    locked = _ref$locked === void 0 ? false : _ref$locked,
+    onLockedChange = _ref.onLockedChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var color = useMemo(function () {
+    return getColor(type, theme.palette);
+  }, [type, theme.palette]);
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(locked),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLocked = _useState4[0],
+    setIsLocked = _useState4[1];
+  var lockedChangeHandler = function lockedChangeHandler(next) {
+    setIsLocked(next);
+    onLockedChange && onLockedChange(next);
+  };
+  var valueChangeHandler = function valueChangeHandler(next) {
+    setValue(next);
+    var emitValue = next > count ? count : next;
+    onValueChange && onValueChange(emitValue);
+  };
+  var clickHandler = function clickHandler(index) {
+    if (isLocked) return lockedChangeHandler(false);
+    valueChangeHandler(index);
+    lockedChangeHandler(true);
+  };
+  var mouseEnterHandler = function mouseEnterHandler(index) {
+    if (isLocked) return;
+    valueChangeHandler(index);
+  };
+  useEffect(function () {
+    if (typeof customValue === 'undefined') return;
+    setValue(customValue < 0 ? 0 : customValue);
+  }, [customValue]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["884600549", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (props && props.className != null && props.className || useClasses('rating', className) || "")
+  }), _toConsumableArray(Array(count)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      onMouseEnter: function onMouseEnter() {
+        return mouseEnterHandler(index + 1);
+      },
+      onClick: function onClick() {
+        return clickHandler(index + 1);
+      },
+      className: _JSXStyle.dynamic([["884600549", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (useClasses('icon-box', {
+        hovered: index + 1 <= value
+      }) || "")
+    }, icon);
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "884600549",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]
+  }, ".rating.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;--rating-font-size:".concat(SCALES.font(1), ";font-size:var(--rating-font-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.icon-box.__jsx-style-dynamic-selector{box-sizing:border-box;color:").concat(color, ";width:calc(var(--rating-font-size) * 1.5);height:calc(var(--rating-font-size) * 1.5);margin-right:calc(var(--rating-font-size) * 1 / 5);cursor:").concat(isLocked ? 'default' : 'pointer', ";}.icon-box.__jsx-style-dynamic-selector svg{width:100%;height:100%;fill:transparent;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform,color,fill 30ms linear;-webkit-transition:transform,color,fill 30ms linear;transition:transform,color,fill 30ms linear;}.hovered.__jsx-style-dynamic-selector svg{fill:").concat(color, ";-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}")));
+};
+RatingComponent.displayName = 'Rating';
+var Rating = withScale(RatingComponent);
+export default Rating;

package/esm/row/index.js

@@ -0,0 +1,2 @@
+import Row from './row';
+export default Row;

package/esm/row/row.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "component", "gap", "justify", "align", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+var getFlexAlignment = function getFlexAlignment(justify, align) {
+  var flexJustifyMap = {
+    end: 'flex-end',
+    center: 'center',
+    'space-around': 'space-around',
+    'space-between': 'space-between'
+  };
+  var flexAlignMap = {
+    middle: 'center',
+    bottom: 'flex-end'
+  };
+  return {
+    justifyValue: flexJustifyMap[justify] || 'normal',
+    alignValue: flexAlignMap[align] || 'normal'
+  };
+};
+var Container = function Container(_ref) {
+  var children = _ref.children,
+    _ref$component = _ref.component,
+    component = _ref$component === void 0 ? 'div' : _ref$component,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0 : _ref$gap,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'start' : _ref$justify,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'top' : _ref$align,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var Component = component;
+  var theme = useTheme();
+  var _useMemo = useMemo(function () {
+      return getFlexAlignment(justify, align);
+    }, [justify, align]),
+    justifyValue = _useMemo.justifyValue,
+    alignValue = _useMemo.alignValue;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    className: _JSXStyle.dynamic([["2529451939", [gap, theme.layout.gap, gap, theme.layout.gap, gap, theme.layout.gap, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "row ".concat(className))
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2529451939",
+    dynamic: [gap, theme.layout.gap, gap, theme.layout.gap, gap, theme.layout.gap, justifyValue, alignValue]
+  }, ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;box-sizing:border-box;margin-left:calc(".concat(gap, " * ").concat(theme.layout.gap, " / 2);margin-right:calc(").concat(gap, " * ").concat(theme.layout.gap, " / 2);--row-gap:calc(").concat(gap, " * ").concat(theme.layout.gap, ");-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
+};
+Container.displayName = 'Container';
+export default Container;

package/esm/search-bar/components/ClearIcon.js

@@ -0,0 +1,42 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import styled from 'styled-components';
+export var ClearIcon = function ClearIcon(_ref) {
+  var showClear = _ref.showClear,
+    setSearchString = _ref.setSearchString,
+    searchString = _ref.searchString,
+    setFocus = _ref.setFocus,
+    onClear = _ref.onClear;
+  var handleClearSearchString = function handleClearSearchString() {
+    setSearchString({
+      target: {
+        value: ''
+      }
+    });
+    setFocus();
+    onClear();
+  };
+  if (!showClear) {
+    return null;
+  }
+  if (!searchString || (searchString === null || searchString === void 0 ? void 0 : searchString.length) <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledClearIcon, {
+    className: "clear-icon",
+    onClick: handleClearSearchString
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: 20,
+    height: 20,
+    focusable: "false",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.58 12 5 17.58 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  })));
+};
+var StyledClearIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (props) {
+  return props.theme.clearIconMargin;
+}, function (props) {
+  return props.theme.iconColor;
+});

package/esm/search-bar/components/Results.js

@@ -0,0 +1,87 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import styled from 'styled-components';
+import { SearchIcon } from './SearchIcon';
+export default function Results(_ref) {
+  var _ref$results = _ref.results,
+    results = _ref$results === void 0 ? [] : _ref$results,
+    onClick = _ref.onClick,
+    setSearchString = _ref.setSearchString,
+    showIcon = _ref.showIcon,
+    maxResults = _ref.maxResults,
+    _ref$resultStringKeyN = _ref.resultStringKeyName,
+    resultStringKeyName = _ref$resultStringKeyN === void 0 ? 'name' : _ref$resultStringKeyN,
+    highlightedItem = _ref.highlightedItem,
+    setHighlightedItem = _ref.setHighlightedItem,
+    formatResult = _ref.formatResult,
+    _ref$showNoResultsFla = _ref.showNoResultsFlag,
+    showNoResultsFlag = _ref$showNoResultsFla === void 0 ? true : _ref$showNoResultsFla,
+    _ref$showNoResultsTex = _ref.showNoResultsText,
+    showNoResultsText = _ref$showNoResultsTex === void 0 ? 'No results' : _ref$showNoResultsTex;
+  var formatResultWithKey = formatResult ? formatResult : function (item) {
+    return item[resultStringKeyName];
+  };
+  var handleClick = function handleClick(result) {
+    onClick(result);
+    setSearchString(result[resultStringKeyName]);
+  };
+  var handleMouseDown = function handleMouseDown(_ref2) {
+    var event = _ref2.event,
+      result = _ref2.result;
+    if (event.button === 0) {
+      event.preventDefault();
+      handleClick(result);
+    }
+  };
+  if (showNoResultsFlag) {
+    return /*#__PURE__*/React.createElement(ResultsWrapper, null, /*#__PURE__*/React.createElement("li", {
+      "data-test": "no-results-message"
+    }, /*#__PURE__*/React.createElement(SearchIcon, {
+      showIcon: showIcon
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "ellipsis"
+    }, showNoResultsText)));
+  }
+  if ((results === null || results === void 0 ? void 0 : results.length) <= 0 && !showNoResultsFlag) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ResultsWrapper, null, results.slice(0, maxResults).map(function (result, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: highlightedItem === index ? 'selected' : '',
+      onMouseEnter: function onMouseEnter() {
+        return setHighlightedItem({
+          index: index
+        });
+      },
+      "data-test": "result",
+      key: "rsa-result-".concat(result.id),
+      onMouseDown: function onMouseDown(event) {
+        return handleMouseDown({
+          event: event,
+          result: result
+        });
+      },
+      onClick: function onClick() {
+        return handleClick(result);
+      }
+    }, /*#__PURE__*/React.createElement(SearchIcon, {
+      showIcon: showIcon
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "ellipsis",
+      title: result[resultStringKeyName]
+    }, formatResultWithKey(result)));
+  }));
+}
+var ResultsWrapper = function ResultsWrapper(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(StyledResults, null, /*#__PURE__*/React.createElement("div", {
+    className: "line"
+  }), /*#__PURE__*/React.createElement("ul", null, children));
+};
+var StyledResults = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div.line {\n    border-top-color: ", ";\n    border-top-style: solid;\n    border-top-width: 1px;\n\n    margin-bottom: 0px;\n    margin-left: 14px;\n    margin-right: 20px;\n    margin-top: 0px;\n\n    padding-bottom: 4px;\n  }\n\n  > ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px 0 16px 0;\n    max-height: ", ";\n\n    > li {\n      display: flex;\n      align-items: center;\n      padding: 4px 0 4px 0;\n\n      > div {\n        margin-left: 13px;\n      }\n    }\n  }\n\n  .ellipsis {\n    text-align: left;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .selected {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.theme.lineColor;
+}, function (props) {
+  return props.theme.maxHeight;
+}, function (props) {
+  return props.theme.hoverBackgroundColor;
+});

package/esm/search-bar/components/SearchIcon.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import styled from 'styled-components';
+export var SearchIcon = function SearchIcon(_ref) {
+  var showIcon = _ref.showIcon;
+  if (!showIcon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledSearchIcon, {
+    className: "search-icon",
+    width: 20,
+    height: 20,
+    focusable: "false",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+  }));
+};
+var StyledSearchIcon = styled.svg(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  margin: ", ";\n  fill: ", ";\n"])), function (props) {
+  return props.theme.searchIconMargin;
+}, function (props) {
+  return props.theme.iconColor;
+});

package/esm/search-bar/components/SearchInput.js

@@ -0,0 +1,75 @@
+"use client";
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _templateObject;
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { ClearIcon } from './ClearIcon';
+import { SearchIcon } from './SearchIcon';
+export default function SearchInput(_ref) {
+  var searchString = _ref.searchString,
+    setSearchString = _ref.setSearchString,
+    setHighlightedItem = _ref.setHighlightedItem,
+    eraseResults = _ref.eraseResults,
+    autoFocus = _ref.autoFocus,
+    onFocus = _ref.onFocus,
+    onClear = _ref.onClear,
+    placeholder = _ref.placeholder,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    maxLength = _ref.maxLength;
+  var ref = useRef(null);
+  var manualFocus = true;
+  var setFocus = function setFocus() {
+    manualFocus = false;
+    (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.focus();
+    manualFocus = true;
+  };
+  var handleOnFocus = function handleOnFocus(event) {
+    manualFocus && onFocus(event);
+  };
+  var maxLengthProperty = maxLength ? {
+    maxLength: maxLength
+  } : {};
+  return /*#__PURE__*/React.createElement(StyledSearchInput, null, /*#__PURE__*/React.createElement(SearchIcon, {
+    showIcon: showIcon
+  }), /*#__PURE__*/React.createElement("input", _extends({
+    type: "text",
+    ref: ref,
+    spellCheck: false,
+    value: searchString,
+    onChange: setSearchString,
+    onFocus: handleOnFocus,
+    placeholder: placeholder,
+    autoFocus: autoFocus,
+    onBlur: function onBlur() {
+      return eraseResults();
+    },
+    onKeyDown: function onKeyDown(event) {
+      return setHighlightedItem({
+        event: event
+      });
+    },
+    "data-test": "search-input"
+  }, maxLengthProperty)), /*#__PURE__*/React.createElement(ClearIcon, {
+    showClear: showClear,
+    setSearchString: setSearchString,
+    searchString: searchString,
+    onClear: onClear,
+    setFocus: setFocus
+  }));
+}
+var StyledSearchInput = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n      opacity: 1;\n\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      ::-ms-input-placeholder {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+  return props.theme.height;
+}, function (props) {
+  return props.theme.color;
+}, function (props) {
+  return props.theme.placeholderColor;
+}, function (props) {
+  return props.theme.placeholderColor;
+}, function (props) {
+  return props.theme.placeholderColor;
+});