@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/components/LanguageSelector.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Icon = require('../Icon-UBahY607.js');
+require('../Link-BoShjCEw.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('react-inlinesvg');
+require('./Tooltip.js');
+require('../Text-D7Aq1i5R.js');
+require('./Title.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textSize.js');
+require('../constants/componentProps/shape.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function LanguageSelectorItem(props) {
+  const {
+    label,
+    iconSize,
+    SvgImage,
+    isActive,
+    onClick
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('lang__item', isActive && 'lang__item_state_current'),
+    onClick: onClick
+  }, SvgImage && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+    size: iconSize,
+    SvgImage: SvgImage
+  }), label);
+}
+LanguageSelectorItem.propTypes = {
+  iconSize: PropTypes__default.default.number,
+  isActive: PropTypes__default.default.bool,
+  label: PropTypes__default.default.string,
+  SvgImage: PropTypes__default.default.element,
+  onClick: PropTypes__default.default.func
+};
+function LanguageSelector(props) {
+  const {
+    currentLanguage,
+    languagesItems = [],
+    className,
+    setLanguage
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'lang')
+  }, languagesItems.map(languageItem => /*#__PURE__*/React__default.default.createElement(LanguageSelectorItem, {
+    iconSize: languageItem.iconSize,
+    isActive: currentLanguage === languageItem.value,
+    key: `languageItem_${languageItem.value}`,
+    label: languageItem.label,
+    SvgImage: languageItem.SvgImage,
+    onClick: () => setLanguage && setLanguage(languageItem.value)
+  })));
+}
+LanguageSelector.propTypes = {
+  className: PropTypes__default.default.string,
+  currentLanguage: PropTypes__default.default.string,
+  languagesItems: PropTypes__default.default.array,
+  setLanguage: PropTypes__default.default.func
+};
+LanguageSelector.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "LanguageSelector",
+  "props": {
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "currentLanguage": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "languagesItems": {
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "setLanguage": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.LanguageSelector = LanguageSelector;

package/dist/cjs/components/Link/Link.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ILinkConfig, ILinkProps, ILinkWrapperProps } from './Link.interface';
+declare const linkConfig: ILinkConfig;
+declare function Link(props: ILinkProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Link {
+    var defaultProps: {
+        underline: string;
+    };
+}
+declare function LinkWrapper(props: ILinkWrapperProps): import("react/jsx-runtime").JSX.Element | (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>)[];
+export { Link, linkConfig, LinkWrapper };

package/dist/cjs/components/Link/Link.interface.d.ts

@@ -0,0 +1,57 @@
+import { CSSProperties, ElementType, ReactNode } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { fillPropsType, sizePropsType, textColorHoverPropsType, textColorPropsType, textGradientPropsType, textStylePropsType, textWeightPropsType, underlinePropsType } from '../../types';
+export interface ILinkThemeColor {
+    textColorHover?: textColorHoverPropsType;
+    fill?: fillPropsType;
+    fillDesktop?: fillPropsType;
+    fillMobile?: fillPropsType;
+    fillTablet?: fillPropsType;
+    size?: sizePropsType;
+    sizeDesktop?: sizePropsType;
+    sizeMobile?: sizePropsType;
+    sizeTablet?: sizePropsType;
+    textColor?: textColorPropsType;
+    textColorDesktop?: textColorPropsType;
+    textColorMobile?: textColorPropsType;
+    textColorTablet?: textColorPropsType;
+    textGradient?: textGradientPropsType;
+    textStyle?: textStylePropsType;
+    textWeight?: textWeightPropsType;
+    textWeightDesktop?: textWeightPropsType;
+    textWeightMobile?: textWeightPropsType;
+    textWeightTablet?: textWeightPropsType;
+}
+export interface ILinkConfig {
+    LinkComponent: ElementType | undefined;
+    setLinkComponent: (LinkComponent: ElementType) => void;
+}
+export interface ILinkProps extends ILinkThemeColor, TypeStyleAttributes {
+    after?: ReactNode;
+    before?: ReactNode;
+    children?: string;
+    className?: string;
+    href?: string;
+    link?: string;
+    LinkComponent?: ElementType;
+    rel?: string;
+    target?: string;
+    text?: string;
+    underline?: underlinePropsType;
+    onClick?: () => void;
+    onMouseDown?: () => void;
+}
+export interface ILinkWrapperProps extends ILinkThemeColor, TypeStyleAttributes {
+    children?: ReactNode;
+    className?: string;
+    Component?: ElementType;
+    DefaultComponent?: ElementType;
+    disabled?: boolean;
+    href?: string;
+    onClick?: () => void;
+    onMouseDown?: () => void;
+    rel?: string;
+    style?: CSSProperties;
+    target?: string;
+    type?: ElementType;
+}

package/dist/cjs/components/Link/index.d.ts

@@ -0,0 +1 @@
+export { Link, LinkWrapper, linkConfig } from './Link';

package/dist/cjs/components/Link.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var Link = require('../Link-BoShjCEw.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('react');
+require('clsx');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('prop-types');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+
+
+exports.Link = Link.Link;
+exports.LinkWrapper = Link.LinkWrapper;
+exports.linkConfig = Link.linkConfig;

package/dist/cjs/components/List.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var ListItem = require('../ListItem-MrHApmF3.js');
+require('react');
+require('prop-types');
+require('clsx');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/size.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../Link-BoShjCEw.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+
+
+
+exports.List = ListItem.List;
+exports.ListItem = ListItem.ListItem;

package/dist/cjs/components/Loader.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Text = require('../Text-D7Aq1i5R.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// TODO: is better to use context?
+const loaderConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    loaderConfig.appearance = newComponent;
+  }
+};
+function Loader(props) {
+  const {
+    appearance,
+    className,
+    children,
+    set,
+    text,
+    textSize,
+    textColor
+  } = props;
+  const itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'itemFill'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  const {
+    styles: loader
+  } = useStyles.useStyles(props);
+
+  /*
+   * TODO: set temporary variables by other way
+   */
+  const temporaryFillClass = fillClass || loaderConfig.appearance[appearance]?.fill && `fill_${loaderConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase();
+  const temporaryItemFillClass = itemFillClass || loaderConfig.appearance[appearance]?.itemFill && `fill_${loaderConfig.appearance[appearance].itemFill?.replace(/([A-Z])/g, '-$1')}`.toLowerCase();
+  /* - */
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('loader', positionClass, widthClass, heightClass, temporaryFillClass, className, set && `loader_set_${set}`),
+    style: loader
+  }, children || /*#__PURE__*/React__default.default.createElement("div", {
+    className: "loader__inner"
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: clsx__default.default('loader__item', temporaryItemFillClass)
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clsx__default.default('loader__item', temporaryItemFillClass)
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clsx__default.default('loader__item', temporaryItemFillClass)
+  })), text && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "loader__text",
+    size: textSize,
+    textColor: textColor
+  }, text));
+}
+Loader.propTypes = {
+  appearance: PropTypes__default.default.string,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  text: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.string,
+  textSize: PropTypes__default.default.string
+};
+Loader.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Loader",
+  "props": {
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "text": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Loader = Loader;
+exports.loaderConfig = loaderConfig;

package/dist/cjs/components/Logo.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Link = require('../Link-BoShjCEw.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var align = require('../constants/componentProps/align.js');
+var alignDirection = require('../constants/componentProps/alignDirection.js');
+var width = require('../constants/componentProps/width.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Logo(props) {
+  const {
+    className,
+    href,
+    link,
+    mode,
+    size,
+    source,
+    src
+  } = props;
+  const alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'logo_align-items_',
+    propsKey: 'alignItems'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  const {
+    styles: logo
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && `logo_size_${size}`, mode && `logo_mode_${mode}`),
+    style: logo
+  }, link || href ? /*#__PURE__*/React__default.default.createElement(Link.LinkWrapper, {
+    href: link || href
+  }, ' ', /*#__PURE__*/React__default.default.createElement("img", {
+    className: "logo__image",
+    src: src || source
+  })) : /*#__PURE__*/React__default.default.createElement("img", {
+    className: "logo__image",
+    src: src || source
+  }));
+}
+Logo.propTypes = {
+  align: PropTypes__default.default.oneOf(align.default),
+  alignDirection: PropTypes__default.default.oneOf(alignDirection.default),
+  className: PropTypes__default.default.string,
+  href: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  size: PropTypes__default.default.string,
+  sizeMobile: PropTypes__default.default.string,
+  source: PropTypes__default.default.string,
+  src: PropTypes__default.default.string,
+  target: PropTypes__default.default.string,
+  width: PropTypes__default.default.oneOf(width.default)
+};
+Logo.defaultProps = {};
+Logo.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Logo",
+  "props": {
+    "align": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignProps"
+      },
+      "required": false
+    },
+    "alignDirection": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "alignDirectionProps"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "href": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "link": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "sizeMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "source": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "src": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "target": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "width": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Logo = Logo;