@rescui/tag 0.1.0

package/lib/parts/presets.js

@@ -0,0 +1,36 @@
+import { RS_COLOR_WHITE, RS_COLOR_PRIMARY_LIGHT_THEME, RS_COLOR_BLACK, RS_COLOR_BLACK_T10, RS_COLOR_PRIMARY_DARK_THEME, RS_COLOR_WHITE_T10 } from '@rescui/colors';
+var presets = {
+  classicLight: {
+    color: RS_COLOR_WHITE,
+    backgroundColor: "var(--rs-color-primary-light-theme, ".concat(RS_COLOR_PRIMARY_LIGHT_THEME, ")")
+  },
+  rockLight: {
+    color: RS_COLOR_WHITE,
+    backgroundColor: RS_COLOR_BLACK
+  },
+  filledLight: {
+    color: RS_COLOR_BLACK,
+    backgroundColor: RS_COLOR_BLACK_T10
+  },
+  outlineLight: {
+    color: RS_COLOR_BLACK,
+    borderColor: RS_COLOR_BLACK
+  },
+  classicDark: {
+    color: RS_COLOR_WHITE,
+    backgroundColor: "var(--rs-color-primary-dark-theme, ".concat(RS_COLOR_PRIMARY_DARK_THEME, ")")
+  },
+  rockDark: {
+    color: RS_COLOR_BLACK,
+    backgroundColor: RS_COLOR_WHITE
+  },
+  filledDark: {
+    color: RS_COLOR_WHITE,
+    backgroundColor: RS_COLOR_WHITE_T10
+  },
+  outlineDark: {
+    color: RS_COLOR_WHITE,
+    borderColor: RS_COLOR_WHITE
+  }
+};
+export { presets };

package/lib/parts/removable-tag.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+export declare type RemovableTagSize = 'xs' | 's' | 'm' | 'l';
+export declare type RemovableTagProps = {
+    className?: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    size?: RemovableTagSize;
+    theme?: Theme;
+    /** Additional left icon */
+    icon?: React.ReactNode;
+    onRemoveClick: () => void;
+};
+export declare const RemovableTag: React.ForwardRefExoticComponent<RemovableTagProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/parts/removable-tag.js

@@ -0,0 +1,77 @@
+import "core-js/modules/web.dom-collections.for-each.js";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "disabled", "size", "theme", "children", "icon", "onRemoveClick"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { useTheme } from '@rescui/ui-contexts';
+import { CloseIcon } from '@rescui/icons';
+import styles from './removable-tag.module.pcss.js';
+
+function getIconSize(size) {
+  return size === 'xs' ? 's' : size;
+}
+
+var SIZE_STYLES = {
+  xs: styles.sizeXs,
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+var THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+var RemovableTag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
+  var className = _ref.className,
+      disabled = _ref.disabled,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'xs' : _ref$size,
+      themeFromProps = _ref.theme,
+      children = _ref.children,
+      icon = _ref.icon,
+      _ref$onRemoveClick = _ref.onRemoveClick,
+      onRemoveClick = _ref$onRemoveClick === void 0 ? function () {} : _ref$onRemoveClick,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme(themeFromProps);
+  return /*#__PURE__*/React.createElement("span", {
+    className: cn(styles.wrapper, SIZE_STYLES[size], THEME_STYLES[theme], disabled && styles.disabled, className),
+    "data-test": 'removable-tag-wrapper',
+    ref: ref
+  }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
+    className: cn(icon.props.className, styles.icon)
+  }), /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, restProps), {}, {
+    className: styles.main,
+    "data-test": "removable-tag"
+  }), children), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-test": "removable-tag-remove-icon",
+    className: styles.close,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onRemoveClick();
+    }
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    size: getIconSize(size)
+  })));
+});
+RemovableTag.propTypes = {
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
+  theme: PropTypes.oneOf(['dark', 'light']),
+  icon: PropTypes.node,
+  onRemoveClick: PropTypes.func.isRequired
+};
+export { RemovableTag };

package/lib/parts/removable-tag.module.pcss.js

@@ -0,0 +1,15 @@
+var styles = {
+  "wrapper": "_wrapper_vd286z_41",
+  "sizeXs": "_sizeXs_vd286z_53",
+  "sizeS": "_sizeS_vd286z_54",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_vd286z_1",
+  "sizeM": "_sizeM_vd286z_58",
+  "sizeL": "_sizeL_vd286z_62",
+  "themeLight": "_themeLight_vd286z_66",
+  "disabled": "_disabled_vd286z_66",
+  "themeDark": "_themeDark_vd286z_70",
+  "main": "_main_vd286z_111",
+  "close": "_close_vd286z_142",
+  "icon": "_icon_vd286z_242"
+};
+export default styles;

package/lib/parts/sticky-tag.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BaseTagIconPosition, BaseTagSize } from './base-tag';
+export declare type StickyTagSize = BaseTagSize;
+export declare type StickyTagIconPosition = BaseTagIconPosition;
+export declare type StickyTagPlacement = 'top-start' | 'top-end' | 'left-end' | 'left-start';
+export declare type StickyTagAlign = 'top' | 'middle';
+export declare type StickyTagOffset = 16 | 24 | 32;
+export declare type StickyTagProps = {
+    /** Additional class-name */
+    className?: string;
+    /** The content of the attached Tag */
+    content: React.ReactNode;
+    /** Target element */
+    children?: React.ReactNode;
+    /** badge size */
+    size?: StickyTagSize;
+    /** Should the content be uppercase */
+    isUppercase?: boolean;
+    /** Tag placement */
+    placement?: StickyTagPlacement;
+    /** Tag align relative to the target border */
+    align?: StickyTagAlign;
+    /** Offset from the edge */
+    offset?: StickyTagOffset;
+    /** Text color */
+    color: string;
+    /**
+     * Background color.
+     * @default transparent
+     * */
+    backgroundColor?: string;
+    /**
+     * Border color.
+     * @default transparent
+     * */
+    borderColor?: string;
+} & ({
+    /** Additional icon */
+    icon: React.ReactNode;
+    /** Additional icon position */
+    iconPosition?: StickyTagIconPosition;
+} | {
+    icon?: never;
+    iconPosition?: never;
+});
+export declare const StickyTag: React.ForwardRefExoticComponent<StickyTagProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/parts/sticky-tag.js

@@ -0,0 +1,116 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+var _excluded = ["className", "content", "children", "size", "placement", "align", "offset"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import { BaseTag } from './base-tag.js';
+import styles from './sticky-tag.module.pcss.js';
+var DEFAULT_OFFSET = 24;
+
+var parsePlacement = function parsePlacement(placement) {
+  var _context, _context2, _context3;
+
+  var _placement$split$slic = _sliceInstanceProperty(_context = placement.split('-')).call(_context, 0, 2),
+      _placement$split$slic2 = _slicedToArray(_placement$split$slic, 2),
+      side = _placement$split$slic2[0],
+      _placement$split$slic3 = _placement$split$slic2[1],
+      justify = _placement$split$slic3 === void 0 ? 'center' : _placement$split$slic3;
+
+  if (!_includesInstanceProperty(_context2 = ['top', 'right', 'bottom', 'left']).call(_context2, side)) {
+    side = 'top';
+  }
+
+  if (!_includesInstanceProperty(_context3 = ['start', 'center', 'end']).call(_context3, justify)) {
+    justify = 'end';
+  }
+
+  return {
+    side: side,
+    justify: justify
+  };
+};
+
+var SIDE_STYLES = {
+  top: styles.top,
+  left: styles.left
+};
+var JUSTIFY_STYLES = {
+  start: styles.start,
+  end: styles.end
+};
+var ALIGN_STYLES = {
+  top: styles.alignTop,
+  middle: styles.alignMiddle
+};
+var SIZE_STYLES = {
+  xs: styles.sizeXs,
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+var OFFSET_STYLES = {
+  16: styles.offset16,
+  24: styles.offset24,
+  32: styles.offset32
+};
+var StickyTag = /*#__PURE__*/React.forwardRef(function StickyTag(_ref, ref) {
+  var className = _ref.className,
+      content = _ref.content,
+      children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'xs' : _ref$size,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'top-end' : _ref$placement,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'top' : _ref$align,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? DEFAULT_OFFSET : _ref$offset,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _parsePlacement = parsePlacement(placement),
+      side = _parsePlacement.side,
+      justify = _parsePlacement.justify;
+
+  var offsetCn = offset in OFFSET_STYLES ? OFFSET_STYLES[offset] : OFFSET_STYLES[DEFAULT_OFFSET];
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(styles.wrapper)
+  }, /*#__PURE__*/React.createElement(BaseTag, _objectSpread(_objectSpread({
+    size: size,
+    className: cn(styles.tag, className, SIZE_STYLES[size], JUSTIFY_STYLES[justify], SIDE_STYLES[side], ALIGN_STYLES[align], offsetCn),
+    "data-test": 'sticky-tag'
+  }, restProps), {}, {
+    ref: ref
+  }), content), children);
+});
+StickyTag.propTypes = {
+  className: PropTypes.string,
+  content: PropTypes.node,
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  isUppercase: PropTypes.bool,
+  placement: PropTypes.oneOf(['top-start', 'top-end', 'left-start', 'left-end']),
+  align: PropTypes.oneOf(['top', 'middle']),
+  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
+  color: PropTypes.string.isRequired,
+  backgroundColor: PropTypes.string,
+  borderColor: PropTypes.string
+};
+export { StickyTag };

package/lib/parts/sticky-tag.module.pcss.js

@@ -0,0 +1,18 @@
+var styles = {
+  "wrapper": "_wrapper_17tnjix_10",
+  "tag": "_tag_17tnjix_14",
+  "alignTop": "_alignTop_17tnjix_20",
+  "sizeXs": "_sizeXs_17tnjix_21",
+  "sizeS": "_sizeS_17tnjix_24",
+  "sizeM": "_sizeM_17tnjix_27",
+  "sizeL": "_sizeL_17tnjix_30",
+  "alignMiddle": "_alignMiddle_17tnjix_35",
+  "top": "_top_17tnjix_52",
+  "start": "_start_17tnjix_52",
+  "offset16": "_offset16_17tnjix_53",
+  "offset24": "_offset24_17tnjix_56",
+  "offset32": "_offset32_17tnjix_59",
+  "end": "_end_17tnjix_64",
+  "left": "_left_17tnjix_86"
+};
+export default styles;

package/lib/parts/tag.module.pcss.js

@@ -0,0 +1,7 @@
+var styles = {
+  "sizeXs": "_sizeXs_o9nqsp_9",
+  "sizeS": "_sizeS_o9nqsp_13",
+  "sizeM": "_sizeM_o9nqsp_17",
+  "sizeL": "_sizeL_o9nqsp_21"
+};
+export default styles;

package/lib/tag.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { BaseTagSize, BaseTagIconPosition } from './parts/base-tag';
+export declare type TagSize = BaseTagSize;
+export declare type TagIconPosition = BaseTagIconPosition;
+export declare type TagProps = {
+    /** Additional class-name */
+    className?: string;
+    /** Child element */
+    children?: React.ReactNode;
+    /** badge size */
+    size?: TagSize;
+    /** Should the content be uppercase */
+    isUppercase?: boolean;
+    /** Text color */
+    color: string;
+    /**
+     * Background color.
+     * @default transparent
+     * */
+    backgroundColor?: string;
+    /**
+     * Border color.
+     * @default transparent
+     * */
+    borderColor?: string;
+} & ({
+    /** Additional icon */
+    icon: React.ReactNode;
+    /** Additional icon position */
+    iconPosition?: TagIconPosition;
+} | {
+    icon?: never;
+    iconPosition?: never;
+});
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/tag.js

@@ -0,0 +1,54 @@
+import "core-js/modules/web.dom-collections.for-each.js";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import { BaseTag } from './parts/base-tag.js';
+import styles from './parts/tag.module.pcss.js';
+var SIZE_STYLES = {
+  xs: styles.sizeXs,
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+var Tag = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+function (_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'xs' : _ref$size,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(BaseTag, _objectSpread(_objectSpread({
+    "data-test": 'tag'
+  }, restProps), {}, {
+    size: size,
+    ref: ref,
+    className: cn(SIZE_STYLES[size], className)
+  }), children);
+});
+Tag.displayName = 'Tag';
+Tag.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  isUppercase: PropTypes.bool,
+  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
+  color: PropTypes.string.isRequired,
+  backgroundColor: PropTypes.string,
+  borderColor: PropTypes.string
+};
+export { Tag };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@rescui/tag",
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "author": "JetBrains",
+  "main": "lib/index.js",
+  "src:main": "src/index.ts",
+  "files": [
+    "lib",
+    "LICENSE.txt"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.14.0",
+    "@rescui/colors": "^0.0.6",
+    "@rescui/icons": "^0.5.1",
+    "classnames": "^2.3.1",
+    "core-js": "^3.9.1"
+  },
+  "peerDependencies": {
+    "@rescui/ui-contexts": "<1.0.0",
+    "prop-types": "^15.7.2",
+    "react": ">=16.8.0 <18"
+  },
+  "devDependencies": {
+    "@rescui/scripts": "^0.1.4",
+    "@rescui/typography": "^0.5.0"
+  },
+  "scripts": {
+    "build": "rescui-scripts build"
+  },
+  "gitHead": "0303dab2dea78cc6ba3a4970148de62fca11a225"
+}