@semcore/widget-empty 3.1.0 → 3.2.2

package/svg/vertical-bar-chart.svg

@@ -1,6 +1,14 @@
-<svg width="100" height="72" viewBox="0 0 100 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 71a1 1 0 0 1 1-1h65a1 1 0 1 1 0 2H13a1 1 0 0 1-1-1ZM82 71a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z" fill="#A9ABB6"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M35 42h-6a4 4 0 0 0-4 4v20h14V46a4 4 0 0 0-4-4Zm2 22H27V46c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v18ZM71 32h-6a4 4 0 0 0-4 4v30h14V36a4 4 0 0 0-4-4Zm2 32H63V36c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v28ZM53 24h-6a4 4 0 0 0-4 4v38h14V28a4 4 0 0 0-4-4Zm2 40H45V28c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v36Z" fill="#A9ABB6"/>
-  <path d="M45 64h10V28a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v36Z" fill="#E0E1E9"/>
-  <path d="M26.36 51.03a1 1 0 0 1 .4-1.38l9.55-5.06a1 1 0 1 1 .93 1.76l-9.55 5.06a1 1 0 0 1-1.33-.38ZM25.23 58.54a1 1 0 0 1 .4-1.39l11.82-6.08a1 1 0 0 1 .91 1.78l-11.8 6.08a1 1 0 0 1-1.33-.39ZM26.13 65.24a1 1 0 0 1 .36-1.36l11-6.48a1 1 0 0 1 1.02 1.72l-11 6.48a1 1 0 0 1-1.38-.36Z" fill="#A9ABB6"/>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M40.58 79C62 78.73 79 60.87 79 39.4V2a1 1 0 0 0-.99-.99H53.99A1 1 0 0 0 53 2v2.7H27.99a1 1 0 0 0-.99.99v34.35H1.99a1 1 0 0 0-.99 1A39.17 39.17 0 0 0 40.58 79Z" fill="#E0E1E9"/>
+  <path d="M65.92 57.6s.1-.05.12-.08l6.5-4.32-3.14-1.7-3.13.76-8.3-31.68a5.7 5.7 0 0 0-6.68-4.15L11.7 24.5l-1.4-3.12-3.4 5.88a6.5 6.5 0 0 0-.22.37v.02a5.64 5.64 0 0 0-.46 4.25l10.44 36.64a2.59 2.59 0 0 0 3.18 1.8L65.11 58c.27-.08.52-.2.75-.35l.05-.03.01-.01Z" fill="#E0E1E9" stroke="#6C6E79" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m71.76 53.55-47.67 13a2.73 2.73 0 0 1-3.35-1.89l-11-38.59a6.03 6.03 0 0 1 4.6-7.55l42.88-8.75a6.02 6.02 0 0 1 7.02 4.38l9.45 36.07a2.73 2.73 0 0 1-1.93 3.33Z" fill="#fff"/>
+  <path d="M65.45 18.82 11.07 30.76l-1.34-4.69a6.03 6.03 0 0 1 4.6-7.55L57.2 9.77a6.02 6.02 0 0 1 7.02 4.38l1.22 4.67Z" fill="#6C6E79"/>
+  <path d="M18.4 23.42a1.87 1.87 0 0 1-1.42 2.37 2.19 2.19 0 0 1-2.53-1.53 1.87 1.87 0 0 1 1.43-2.37 2.2 2.2 0 0 1 2.51 1.54v-.01Z" fill="#fff"/>
+  <path d="M25.38 21.94c.29 1.06-.33 2.1-1.4 2.33a2.15 2.15 0 0 1-2.47-1.52 1.85 1.85 0 0 1 1.4-2.35 2.14 2.14 0 0 1 2.47 1.53Z" fill="#E0E1E9"/>
+  <path d="M11.09 30.84s.32-3.15.6-6.38l-1.37-3.09-3.42 5.88a6.5 6.5 0 0 0-.21.37v.02a5.64 5.64 0 0 0-.46 4.25l1.4 4.9 3.46-5.96v.01Z" fill="#6C6E79"/>
+  <path d="m71.76 53.55-47.67 13a2.73 2.73 0 0 1-3.35-1.89l-11-38.59a6.03 6.03 0 0 1 4.6-7.55l42.88-8.75a6.02 6.02 0 0 1 7.02 4.38l9.45 36.07a2.73 2.73 0 0 1-1.93 3.33Z" stroke="#6C6E79" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m34 41.8-7.06 1.71a.8.8 0 0 0-.57.99l3.34 11.92 8.5-2.22-3.27-11.84a.8.8 0 0 0-.95-.56H34Z" stroke="#6C6E79" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M44.22 28.76 37.4 30.3c-.45.1-.7.54-.59.99L42.8 53 51 50.87l-5.83-21.55a.78.78 0 0 0-.94-.56h-.01Z" fill="#6C6E79" stroke="#6C6E79" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m58.28 31.6-6.49 1.52c-.43.1-.7.54-.58.97l4.19 15.64 7.93-2.06-4.1-15.5a.79.79 0 0 0-.93-.56h-.02Z" fill="#E0E1E9" stroke="#6C6E79" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M23.36 61.28 70.2 48.9M27.56 48.6l4.3-6.28M35.5 44.76l-6.42 9.36M33.5 55.42l3.6-5.25" stroke="#6C6E79" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/Error/index.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import WidgetEmpty, { getIconPath } from '../WidgetEmpty';
-import createComponent, { Component, Root } from '@semcore/core';
-import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
-import de from './translations/de.json';
-import en from './translations/en.json';
-import es from './translations/es.json';
-import fr from './translations/fr.json';
-import it from './translations/it.json';
-import ja from './translations/ja.json';
-import pt from './translations/pt.json';
-import ru from './translations/ru.json';
-import zh from './translations/zh.json';
-import ko from './translations/ko.json';
-import vi from './translations/vi.json';
-
-const i18n = { de, en, es, fr, it, ja, ru, zh, pt, ko, vi };
-
-class Error extends Component {
-  static displayName = 'WidgetError';
-  static defaultProps = {
-    i18n,
-  };
-  static enhance = [i18nEnhance()];
-
-  render() {
-    const { Children, description, getI18nText } = this.asProps;
-    const { title, description: descriptionText } = getI18nText();
-
-    return (
-      <Root render={WidgetEmpty} icon={getIconPath('warning')}>
-        <WidgetEmpty.Title>{title}</WidgetEmpty.Title>
-        <WidgetEmpty.Description>{description || descriptionText}</WidgetEmpty.Description>
-        <Children />
-      </Root>
-    );
-  }
-}
-
-export default createComponent(Error);

package/src/Error/translations/de.json

@@ -1,4 +0,0 @@
-{
-  "title": "Es ist ein Fehler aufgetreten",
-  "description": "Keine Sorge – wir wissen von dem Problem und arbeiten an seiner Behebung. Bitte versuchen Sie es später erneut."
-}

package/src/Error/translations/en.json

@@ -1,4 +0,0 @@
-{
-  "title": "Something went wrong",
-  "description": "Don't worry though, we are aware of the issue and are working to fix it. Please try again later."
-}

package/src/Error/translations/es.json

@@ -1,4 +0,0 @@
-{
-  "title": "Algo salió mal",
-  "description": "De todas maneras no te preocupes, estamos al corriente del problema y estamos tratando de solucionarlo. Inténtalo de nuevo más tarde."
-}

package/src/Error/translations/fr.json

@@ -1,4 +0,0 @@
-{
-  "title": "Une erreur est survenue",
-  "description": "Ne vous inquiétez pas, nous avons connaissance du problème et travaillons pour le réparer. Veuillez réessayer plus tard."
-}

package/src/Error/translations/it.json

@@ -1,4 +0,0 @@
-{
-  "title": "Si è verificato un errore",
-  "description": "Ma non preoccuparti, siamo a conoscenza del problema e stiamo lavorando per porvi rimedio. Riprova più tardi."
-}

package/src/Error/translations/ja.json

@@ -1,4 +0,0 @@
-{
-  "title": "エラーが発生しました",
-  "description": "私たちは問題を把握し、解決に向けて取り組んでおります。ご安心ください。後で再試行してください。"
-}

package/src/Error/translations/ko.json

@@ -1,4 +0,0 @@
-{
-  "title": "오류가 발생했습니다",
-  "description": "문제를 파악했으며 해결 중입니다. 나중에 다시 시도해 주세요."
-}

package/src/Error/translations/pt.json

@@ -1,4 +0,0 @@
-{
-  "title": "Algo deu errado",
-  "description": "Não se preocupe, estamos cientes do problema e estamos trabalhando para resolvê-lo. Tente novamente mais tarde."
-}

package/src/Error/translations/ru.json

@@ -1,4 +0,0 @@
-{
-  "title": "Произошла ошибка",
-  "description": "Мы уже знаем об этой проблеме и в настоящий момент устраняем ее. Повторите попытку позже."
-}

package/src/Error/translations/vi.json

@@ -1,4 +0,0 @@
-{
-  "title": "Đã xảy ra lỗi",
-  "description": "Đừng lo lắng, chúng tôi đã nhận thấy vấn đề và đang khắc phục nó. Vui lòng thử lại sau."
-}

package/src/Error/translations/zh.json

@@ -1,4 +0,0 @@
-{
-  "title": "出错了",
-  "description": "不过别担心，我们已发现问题，正在努力解决。请稍后重试。"
-}

package/src/NoData/index.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import WidgetEmpty, { getIconPath } from '../WidgetEmpty';
-import createComponent, { Component, Root } from '@semcore/core';
-import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
-import de from './translations/de.json';
-import en from './translations/en.json';
-import es from './translations/es.json';
-import fr from './translations/fr.json';
-import it from './translations/it.json';
-import ja from './translations/ja.json';
-import pt from './translations/pt.json';
-import ru from './translations/ru.json';
-import zh from './translations/zh.json';
-import ko from './translations/ko.json';
-import vi from './translations/vi.json';
-
-const i18n = { de, en, es, fr, it, ja, ru, zh, pt, ko, vi };
-
-class NoData extends Component {
-  static displayName = 'WidgetNoData';
-  static enhance = [i18nEnhance()];
-  static defaultProps = {
-    i18n,
-    type: 'other-data',
-  };
-
-  render() {
-    const { Children, type, description, getI18nText } = this.asProps;
-    const { title, description: descriptionText } = getI18nText();
-    return (
-      <Root render={WidgetEmpty} icon={getIconPath(type)}>
-        <WidgetEmpty.Title>{title}</WidgetEmpty.Title>
-        <WidgetEmpty.Description>{description || descriptionText}</WidgetEmpty.Description>
-        <Children />
-      </Root>
-    );
-  }
-}
-
-export default createComponent(NoData);

package/src/NoData/translations/de.json

@@ -1,4 +0,0 @@
-{
-  "title": "Keine anzuzeigenden Daten",
-  "description": "Ändern Sie die Datums- oder Filtereinstellungen."
-}

package/src/NoData/translations/en.json

@@ -1,4 +0,0 @@
-{
-  "title": "We have no data to show",
-  "description": "Try selecting a different date or changing your filter settings."
-}

package/src/NoData/translations/es.json

@@ -1,4 +0,0 @@
-{
-  "title": "No hay datos para mostrar.",
-  "description": "Intenta cambiar la fecha o la configuración de filtros."
-}

package/src/NoData/translations/fr.json

@@ -1,4 +0,0 @@
-{
-  "title": "Nous n'avons pas de données à afficher",
-  "description": "Essayez de modifier la date ou les paramètres du filtre."
-}

package/src/NoData/translations/it.json

@@ -1,4 +0,0 @@
-{
-  "title": "Nessun dato da visualizzare",
-  "description": "Prova a modificare la data o le impostazioni del filtro."
-}

package/src/NoData/translations/ja.json

@@ -1,4 +0,0 @@
-{
-  "title": "表示するデータはありません",
-  "description": "日付かフィルタ適応の設定を変えて、結果をご覧ください。"
-}

package/src/NoData/translations/ko.json

@@ -1,4 +0,0 @@
-{
-  "title": "표시할 데이터가 없습니다.",
-  "description": "다른 날짜를 선택하거나 필터 설정을 변경하세요."
-}

package/src/NoData/translations/pt.json

@@ -1,4 +0,0 @@
-{
-  "title": "Não há dados a serem exibidos",
-  "description": "Tente alterar a data ou as configurações do filtro."
-}

package/src/NoData/translations/ru.json

@@ -1,4 +0,0 @@
-{
-  "title": "Данные отсутствуют",
-  "description": "Попробуйте изменить дату или настройки фильтров."
-}

package/src/NoData/translations/vi.json

@@ -1,4 +0,0 @@
-{
-  "title": "Chúng tôi không có dữ liệu để hiển thị",
-  "description": "Vui lòng chọn ngày khác hoặc đổi chế độ lọc."
-}

package/src/NoData/translations/zh.json

@@ -1,4 +0,0 @@
-{
-  "title": "我们没有要显示的数据",
-  "description": "尝试更改日期或过滤设置以查看结果。"
-}

package/src/WidgetEmpty.jsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import { Box, Flex } from '@semcore/flex-box';
-import isNode from '@semcore/utils/lib/isNode';
-
-import style from './style/widget-empty.shadow.css';
-
-const version = preval`
-  module.exports = require('../package.json').version
-`;
-
-export const getIconPath = (name) => {
-  return `https://static.semrush.com/ui-kit/widget-empty/${version}/${name}.svg`;
-};
-
-class WidgetEmpty extends Component {
-  static displayName = 'WidgetEmpty';
-  static style = style;
-
-  render() {
-    const SWidgetEmpty = Root;
-    const { Children, icon, styles } = this.asProps;
-    const SImage = 'div';
-
-    return sstyled(styles)(
-      <SWidgetEmpty render={Flex}>
-        {isNode(icon) && (
-          <SImage>
-            {typeof icon === 'string' ? (
-              <img src={icon} alt="widget empty icon" width={100} height={72} />
-            ) : (
-              icon
-            )}
-          </SImage>
-        )}
-        <Children />
-      </SWidgetEmpty>,
-    );
-  }
-}
-
-const Title = (props) => {
-  const STitle = Root;
-  const { styles } = props;
-  return sstyled(styles)(<STitle render={Box} />);
-};
-
-const Description = (props) => {
-  const SDescription = Root;
-  const { styles } = props;
-  return sstyled(styles)(<SDescription render={Box} />);
-};
-
-export default createComponent(WidgetEmpty, {
-  Title,
-  Description,
-});

package/src/index.d.ts

@@ -1,71 +0,0 @@
-import { ComponentProps } from 'react';
-import { CProps, ReturnEl } from '@semcore/core';
-import { Box, IFlexProps } from '@semcore/flex-box';
-import { IWithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';
-
-export type iconNamesWidgetEmpty =
-  | 'area-chart'
-  | 'choropleth-map-chart'
-  | 'coffee'
-  | 'combined-chart'
-  | 'congrats'
-  | 'deleted-page'
-  | 'donut-chart'
-  | 'duplicates'
-  | 'funnel-chart'
-  | 'good'
-  | 'heat-map-chart'
-  | 'horizontal-bar-chart'
-  | 'kagi-chart'
-  | 'line-chart'
-  | 'lollipop-chart'
-  | 'nexttime'
-  | 'nothing-found'
-  | 'other-data'
-  | 'pie-chart'
-  | 'processing'
-  | 'radar-chart'
-  | 'radial-tree-chart'
-  | 'sankey-chart'
-  | 'scatter-plot-chart'
-  | 'stacked-area-chart'
-  | 'suggestion'
-  | 'suggestions'
-  | 'table'
-  | 'tag-cloud'
-  | 'text-links-etc'
-  | 'under-construction'
-  | 'venn-chart'
-  | 'vertical-bar-chart'
-  | 'warning';
-
-export interface IWidgetEmptyProps extends IFlexProps {
-  /**
-   * URL before the icon or the whole component
-   */
-  icon?: React.ReactNode;
-}
-
-export interface IWidgetErrorProps extends IWidgetEmptyProps, IWithI18nEnhanceProps {
-  /** Error description. If it is absent, use the local default one */
-  description?: React.ReactNode;
-}
-
-export interface IWidgetNoDataProps extends IWidgetEmptyProps, IWithI18nEnhanceProps {
-  /** Error description. If it is absent, use the local default one */
-  description?: React.ReactNode;
-  /* Data types */
-  type?: iconNamesWidgetEmpty;
-}
-
-declare const WidgetEmpty: (<T>(props: CProps<IWidgetEmptyProps> & T) => ReturnEl) & {
-  Title: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Description: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-};
-
-declare const NoData: <T>(props: CProps<IWidgetNoDataProps> & T) => ReturnEl;
-declare const Error: <T>(props: CProps<IWidgetErrorProps> & T) => ReturnEl;
-declare const getIconPath: (name: string) => string;
-
-export default WidgetEmpty;
-export { getIconPath, NoData, Error };

package/src/index.js

@@ -1,6 +0,0 @@
-export { default } from './WidgetEmpty';
-export * from './WidgetEmpty';
-
-export { default as NoData } from './NoData';
-
-export { default as Error } from './Error';

package/src/style/widget-empty.shadow.css

@@ -1,41 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SWidgetEmpty {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-SImage {
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  margin-bottom: 12px;
-}
-
-STitle {
-  color: var(--gray-500);
-}
-
-STitle {
-  font-size: var(--fs-300);
-  line-height: var(--lh-300);
-  font-weight: bold;
-}
-
-SDescription {
-  text-align: center;
-  font-size: var(--fs-200);
-  line-height: var(--lh-200);
-  color: var(--gray-500);
-  max-width: 400px;
-}
-
-STitle + SDescription {
-  margin-top: 4px;
-}
-
-SDescription + SDescription {
-  margin-top: 8px;
-}