@meduza/ui-kit-2 0.1.2 → 0.1.4

package/README.md

@@ -9,3 +9,8 @@
 
 `yarn generate` - генератор компонентов. Вводим название компонента, получаем все файлы и импорты
 
+## Использование
+
+Необходимо глобально импортировать в проект файл ui-kit.css (туда собираются все модули)
+Любые компоненты просто импортятся из кита
+

package/dist/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare type ButtonThemes = 'sand' | 'gold' | 'light' | 'gray' | 'ghost' | 'dark' | 'black' | 'red';
 export declare type ButtonStates = 'isLoading' | 'isDefault';
 export declare type ButtonSizes = 'auto' | 'default';
@@ -10,5 +10,5 @@ export interface ButtonProps {
     styleContext?: ButtonStyleContexts;
     disabled?: boolean;
     onClick?: () => void;
-    children: JSX.Element[] | JSX.Element;
+    children: React.ReactNode | JSX.Element[] | JSX.Element;
 }

package/dist/CardTitle/CardTitle.types.d.ts

@@ -1,8 +1,10 @@
 export interface CardTitleProps {
     block: {
-        index: number;
-        text: string;
-        only_on?: string;
+        data: {
+            index: number;
+            text: string;
+            only_on?: string;
+        };
     };
     styleContext?: string;
 }

package/dist/DocumentItemsCount/DocumentItemsCount.types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface DocumentItemsCountProps {
-    type: string;
-    lang?: string;
+    type: 'podcast' | 'card';
+    lang?: 'ru' | 'en';
     items: number;
-    children: JSX.Element[] | JSX.Element;
+    children?: JSX.Element[] | JSX.Element;
 }

package/dist/DotsOnImage/DotsOnImage.types.d.ts

@@ -27,12 +27,12 @@ export interface DotsOnImageProps {
         cc?: string;
         display?: string;
         optimized?: {
-            original: string;
+            original?: string;
             w325: OptimizedImageItem;
-            w520: OptimizedImageItem;
-            w650: OptimizedImageItem;
-            w980: OptimizedImageItem;
-            w1335: OptimizedImageItem;
+            w520?: OptimizedImageItem;
+            w650?: OptimizedImageItem;
+            w980?: OptimizedImageItem;
+            w1335?: OptimizedImageItem;
         };
         width?: number;
         height?: number;

package/dist/EmbedBlock/EmbedBlock.types.d.ts

@@ -1,3 +1,9 @@
+import React from 'react';
+export interface EmbedGifProps {
+    gif: string;
+    mp4Url: string;
+    style: React.CSSProperties;
+}
 export interface EmbedBlockProps {
     block: any;
     styleContext?: string[] | string;

package/dist/EmbedBlock/EmbedGif.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EmbedGifProps } from './EmbedBlock.types';
+export declare const EmbedGif: React.FC<EmbedGifProps>;

package/dist/Image/Image.types.d.ts

@@ -8,12 +8,12 @@ export interface ImageProps {
     alt?: string;
     display?: string;
     optimized?: {
-        original: string;
+        original?: string;
         w325: OptimizedImageItem;
-        w520: OptimizedImageItem;
-        w650: OptimizedImageItem;
-        w980: OptimizedImageItem;
-        w1335: OptimizedImageItem;
+        w520?: OptimizedImageItem;
+        w650?: OptimizedImageItem;
+        w980?: OptimizedImageItem;
+        w1335?: OptimizedImageItem;
     };
     width?: number;
     height?: number;
@@ -25,12 +25,12 @@ export interface ImageProps {
 export interface PictureProps {
     source?: object;
     optimized?: {
-        original: string;
+        original?: string;
         w325: OptimizedImageItem;
-        w520: OptimizedImageItem;
-        w650: OptimizedImageItem;
-        w980: OptimizedImageItem;
-        w1335: OptimizedImageItem;
+        w520?: OptimizedImageItem;
+        w650?: OptimizedImageItem;
+        w980?: OptimizedImageItem;
+        w1335?: OptimizedImageItem;
     };
     alt?: string;
     fallbackSource: string;

package/dist/ImportantLead/ImportantLead.types.d.ts

@@ -1,4 +1,4 @@
 export interface ImportantLeadProps {
     block: any;
-    styleContext: string[] | string;
+    styleContext?: string[] | string;
 }

package/dist/ListBlock/ListBlock.types.d.ts

@@ -1,4 +1,4 @@
 export interface ListBlockProps {
     block: any;
-    styleContext: string[] | string;
+    styleContext?: string[] | string;
 }

package/dist/Meta/Meta.types.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 export interface MetaContainerProps {
     block: any;
     styleContext: string[] | string;
-    isRead: boolean;
-    isListened: boolean;
-    isInBookmarks: boolean;
+    isRead: boolean | undefined;
+    isListened: boolean | undefined;
+    isInBookmarks: boolean | undefined;
     bookmarkAction?: (service: string, place: string) => void;
     lightBox?: () => void;
     lang: 'ru' | 'en';

package/dist/MetaItem/MetaItem.types.d.ts

@@ -3,5 +3,5 @@ export interface MetaItemProps {
     bullets?: boolean;
     hasSource?: boolean;
     type?: string;
-    children: JSX.Element[] | JSX.Element;
+    children: React.ReactNode | JSX.Element[] | JSX.Element;
 }

package/dist/RawHtmlBlock/RawHtmlBlock.types.d.ts

@@ -1,9 +1,15 @@
+import { ImageProps } from '../Image/Image.types';
+export declare type lightBox = {
+    show: (image?: ImageProps['optimized'], alt?: ImageProps['alt']) => void;
+    hide: () => void;
+    visible: boolean;
+};
 export interface RawHtmlBlockProps {
     block: any;
-    styleContext: string[] | string;
-    isRead: boolean;
-    isListened: boolean;
-    isInBookmarks: boolean;
+    styleContext?: string[] | string;
+    isRead?: boolean | undefined;
+    isListened?: boolean | undefined;
+    isInBookmarks?: boolean | undefined;
     bookmarkAction?: (service: string, place: string) => void;
-    lightBox?: () => void;
+    lightBox?: lightBox | null;
 }

package/dist/RenderBlocks/RenderBlocks.types.d.ts

@@ -1,3 +1,9 @@
+import { ImageProps } from '../Image/Image.types';
+export declare type lightBox = {
+    show: (image?: ImageProps['optimized'], alt?: ImageProps['alt']) => void;
+    hide: () => void;
+    visible: boolean;
+};
 export interface RenderBlocksProps {
     block: any;
     styleContext?: any;
@@ -5,6 +11,6 @@ export interface RenderBlocksProps {
     isListened?: boolean;
     isInBookmarks?: boolean;
     bookmarkAction?: (service: string, place: string) => void;
-    lightBox?: () => void;
+    lightBox?: lightBox | null;
     lang?: 'ru' | 'en';
 }

package/dist/ToolbarButton/ToolbarButton.types.d.ts

@@ -5,5 +5,5 @@ export interface ToolbarButtonProps {
     theme?: string;
     isActive?: boolean;
     onClick: (type: string) => void;
-    children: React.ReactNode;
+    children?: React.ReactNode | JSX.Element[] | JSX.Element;
 }

package/dist/ui-kit-2.cjs.development.js

@@ -484,13 +484,13 @@ var Image = function Image(_ref) {
 var styles$5 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","popover":"DotsOnImage-module_popover__35Cpj","popoverTitle":"DotsOnImage-module_popoverTitle__343d8"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
-  var block = _ref.block;
-  var optimized = block.optimized,
-      width = block.width,
-      height = block.height,
-      credit = block.credit,
-      display = block.display,
-      dots = block.dots;
+  var _ref$block = _ref.block,
+      optimized = _ref$block.optimized,
+      width = _ref$block.width,
+      height = _ref$block.height,
+      credit = _ref$block.credit,
+      display = _ref$block.display,
+      dots = _ref$block.dots;
 
   var _useState = React.useState({
     title: null,
@@ -513,7 +513,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
 
   return React__default.createElement("div", {
     "data-testid": "dots-on-image",
-    className: makeClassName([[styles$5.root, true]])
+    className: styles$5.root
   }, React__default.createElement("div", {
     className: styles$5.dots
   }, dots.map(function (dot) {
@@ -997,31 +997,16 @@ var DangerousHTML = function DangerousHTML(_ref) {
 
 var styles$h = {"root":"EmbedBlock-module_root__28k9U","object":"EmbedBlock-module_object__2_UZ7","objectWrap":"EmbedBlock-module_objectWrap__1aDVd","proportional":"EmbedBlock-module_proportional__3lAv4","attachment":"EmbedBlock-module_attachment__2pE0t","default":"EmbedBlock-module_default__LSDny","xs":"EmbedBlock-module_xs__1hFgW","full":"EmbedBlock-module_full__1TEjx","super_full":"EmbedBlock-module_super_full__1Fn9A","figure":"EmbedBlock-module_figure__vAvcN","dark":"EmbedBlock-module_dark__1be2G","isInGroupedBlock":"EmbedBlock-module_isInGroupedBlock__3r_i-","gameEmbed":"EmbedBlock-module_gameEmbed__AZQSo","mobile":"EmbedBlock-module_mobile__1P-eo","desktop":"EmbedBlock-module_desktop__SF5a_","control":"EmbedBlock-module_control__xr8dZ","raw_html":"EmbedBlock-module_raw_html__MQoAA","youtube":"EmbedBlock-module_youtube__3gGQ5","vimeo":"EmbedBlock-module_vimeo__kpH1s","onetv":"EmbedBlock-module_onetv__3o33d","coub":"EmbedBlock-module_coub__38Mva","facebook_video":"EmbedBlock-module_facebook_video__1_M05","card":"EmbedBlock-module_card__KTbvp","slide":"EmbedBlock-module_slide__3cL3M","cc":"EmbedBlock-module_cc__1BQ5g","isInAnswer":"EmbedBlock-module_isInAnswer__tLlgs","picture":"EmbedBlock-module_picture__186q0","wrapper":"EmbedBlock-module_wrapper__33XvX"};
 
-var EmbedBlock = function EmbedBlock(_ref) {
-  var block = _ref.block,
-      _ref$block = _ref.block,
-      data = _ref$block.data,
-      _ref$block$data = _ref$block.data,
-      display = _ref$block$data.display,
-      onlyOn = _ref$block$data.only_on,
-      provider = _ref$block$data.provider,
-      cc = _ref$block$data.cc,
-      optimized = _ref$block$data.optimized,
-      small = _ref$block$data.small_url,
-      large = _ref$block$data.large_url,
-      styleContext = _ref.styleContext,
-      children = _ref.children;
+var EmbedGif = function EmbedGif(_ref) {
+  var gif = _ref.gif,
+      mp4Url = _ref.mp4Url,
+      style = _ref.style;
 
   var _useState = React.useState(false),
-      isPopoverShown = _useState[0],
-      setIsPopoverShown = _useState[1];
-
-  var _useState2 = React.useState(false),
-      videoFrozen = _useState2[0],
-      setVideoFrozen = _useState2[1];
+      videoFrozen = _useState[0],
+      setVideoFrozen = _useState[1];
 
   var videoElem = React.useRef(null);
-  var wrapperElem = React.useRef(null);
 
   var handleVideoTouch = function handleVideoTouch() {
     videoElem.current.play();
@@ -1037,31 +1022,67 @@ var EmbedBlock = function EmbedBlock(_ref) {
   React.useEffect(function () {
     var video = videoElem.current;
 
-    if (block.type === 'gif' && video) {
-      var _viewportSize = viewportSize(),
-          viewportWidth = _viewportSize.width;
-
-      enableInlineVideo(video);
+    var _viewportSize = viewportSize(),
+        viewportWidth = _viewportSize.width;
 
-      if (viewportWidth >= MediaQuerySizes.MOBILE) {
-        video.setAttribute('autoplay', true);
-        video.play();
-      } else {
-        setVideoFrozen(true);
-        video.pause();
-        video.addEventListener('touchstart', handleVideoTouch);
-      }
+    enableInlineVideo(video);
 
-      video.addEventListener('error', handleVideoError);
+    if (viewportWidth >= MediaQuerySizes.MOBILE) {
+      video.setAttribute('autoplay', true);
+      video.play();
+    } else {
+      setVideoFrozen(true);
+      video.pause();
+      video.addEventListener('touchstart', handleVideoTouch);
     }
 
+    video.addEventListener('error', handleVideoError);
     return function () {
-      if (video) {
-        video.removeEventListener('touchstart', handleVideoTouch);
-        video.removeEventListener('error', handleVideoError);
-      }
+      video.removeEventListener('touchstart', handleVideoTouch);
+      video.removeEventListener('error', handleVideoError);
     };
   }, []);
+  return React__default.createElement("div", {
+    className: styles$h.figure
+  }, React__default.createElement("div", {
+    className: styles$h.objectWrap,
+    style: style,
+    "data-frozen": videoFrozen
+  }, React__default.createElement("video", {
+    playsInline: true,
+    muted: true,
+    loop: true,
+    autoPlay: true,
+    preload: "metadata",
+    "data-gif": gif,
+    ref: videoElem
+  }, React__default.createElement("source", {
+    src: "https://meduza.io" + mp4Url,
+    type: "video/mp4"
+  }))));
+};
+
+var EmbedBlock = function EmbedBlock(_ref) {
+  var block = _ref.block,
+      _ref$block = _ref.block,
+      data = _ref$block.data,
+      _ref$block$data = _ref$block.data,
+      html = _ref$block$data.html,
+      display = _ref$block$data.display,
+      onlyOn = _ref$block$data.only_on,
+      provider = _ref$block$data.provider,
+      cc = _ref$block$data.cc,
+      optimized = _ref$block$data.optimized,
+      small = _ref$block$data.small_url,
+      large = _ref$block$data.large_url,
+      gifUrl = _ref$block$data.gif_url,
+      mp4Url = _ref$block$data.mp4_url,
+      styleContext = _ref.styleContext,
+      children = _ref.children;
+
+  var _useState = React.useState(false),
+      isPopoverShown = _useState[0],
+      setIsPopoverShown = _useState[1];
 
   var renderCC = function renderCC(context) {
     return React__default.createElement(MediaCaption, {
@@ -1072,30 +1093,14 @@ var EmbedBlock = function EmbedBlock(_ref) {
   };
 
   var renderEmbed = function renderEmbed(style) {
-    var html = block.data.html;
-
     switch (block.type) {
       case 'gif':
         {
-          return React__default.createElement("div", {
-            className: styles$h.figure
-          }, React__default.createElement("div", {
-            className: styles$h.objectWrap,
-            style: style,
-            ref: wrapperElem,
-            "data-frozen": videoFrozen
-          }, React__default.createElement("video", {
-            playsInline: true,
-            muted: true,
-            loop: true,
-            autoPlay: true,
-            preload: "metadata",
-            "data-gif": block.data.gif_url,
-            ref: videoElem
-          }, React__default.createElement("source", {
-            src: "https://meduza.io" + block.data.mp4_url,
-            type: "video/mp4"
-          }))));
+          return React__default.createElement(EmbedGif, {
+            gif: gifUrl,
+            mp4Url: mp4Url,
+            style: style
+          });
         }
 
       case 'image':
@@ -1125,6 +1130,13 @@ var EmbedBlock = function EmbedBlock(_ref) {
           }));
         }
 
+      case 'dots_on_image':
+        {
+          return React__default.createElement(DotsOnImage, {
+            block: data
+          });
+        }
+
       default:
         {
           return React__default.createElement("div", {
@@ -1140,8 +1152,7 @@ var EmbedBlock = function EmbedBlock(_ref) {
     }
   };
 
-  var style = {};
-  var isProportional; // @TODO: Разобраться зачем это было нужно
+  var style = {}; // @TODO: Разобраться зачем это было нужно
   // const className = Object.keys(styleContext)
   //   .filter(key => key.startsWith('isIn') && styles[key])
   //   .reduce((acc, key) => {
@@ -1149,15 +1160,14 @@ var EmbedBlock = function EmbedBlock(_ref) {
   //     return acc
   //   }, [])
 
-  /* eslint-disable react/no-array-index-key, no-mixed-operators */
+  var isProportional = block.data.height && block.data.width;
 
-  if (block.data.height && block.data.width) {
+  if (isProportional) {
     style.paddingBottom = block.data.height / block.data.width * 100 + "%";
     style.height = 0;
-    isProportional = true;
   }
 
-  var classNames = [[styles$h.root, true], [styles$h.cc, cc], [styles$h[display], !!display && styles$h[display]], [styles$h[provider], !!provider && !!styles$h[provider]], [styles$h[onlyOn], !!onlyOn && styles$h[onlyOn]], [styles$h.proportional, !!styles$h.proportional && isProportional]];
+  var classNames = [[styles$h.root, true], [styles$h.cc, cc], [styles$h[display], !!display && styles$h[display]], [styles$h[provider], !!provider && !!styles$h[provider]], [styles$h[onlyOn], !!onlyOn && styles$h[onlyOn]], [styles$h.proportional, isProportional && !!styles$h.proportional]];
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles$h);
@@ -1273,10 +1283,10 @@ var QuoteBlock = function QuoteBlock(_ref) {
 var styles$j = {"root":"CardTitle-module_root__1uqqF","index":"CardTitle-module_index__4FsTf","title":"CardTitle-module_title__2iTI6","mobile":"CardTitle-module_mobile__1_kij","desktop":"CardTitle-module_desktop__1l3_n"};
 
 var CardTitle = function CardTitle(_ref) {
-  var _ref$block = _ref.block,
-      onlyOn = _ref$block.only_on,
-      index = _ref$block.index,
-      text = _ref$block.text,
+  var _ref$block$data = _ref.block.data,
+      onlyOn = _ref$block$data.only_on,
+      index = _ref$block$data.index,
+      text = _ref$block$data.text,
       styleContext = _ref.styleContext;
   return React__default.createElement("div", {
     "data-testid": "card-title",
@@ -1311,7 +1321,7 @@ var generateGradient = function generateGradient(color) {
   return "linear-gradient(-180deg, " + gradient + ")";
 };
 
-var styles$l = {"root":"Cover-module_root__18Z8J"};
+var styles$l = {"root":"Cover-module_root__18Z8J","body":"Cover-module_body__1xs8e","image":"Cover-module_image__2f3Qc","rich":"Cover-module_rich__1fAGA","dark":"Cover-module_dark__2Ac-w","light":"Cover-module_light__FUp5X","control":"Cover-module_control__VXbhi","isInDynamicBlock":"Cover-module_isInDynamicBlock__3eghb","mobile":"Cover-module_mobile__5DKa1","desktop":"Cover-module_desktop__2mrOc"};
 
 var styles$m = {"root":"SimpleTitle-module_root__2jVQN","mobile":"SimpleTitle-module_mobile__11gBz","desktop":"SimpleTitle-module_desktop__3yXgy"};
 
@@ -1872,6 +1882,7 @@ var RenderBlocks = function RenderBlocks(_ref) {
     case 'embed_code':
     case 'game_embed':
     case 'image':
+    case 'dots_on_image':
     case 'gif':
       return React__default.createElement(EmbedBlockContainer, {
         block: block,
@@ -1917,15 +1928,15 @@ var Cover = function Cover(_ref) {
       setIsPopoverShown = _useState[1];
 
   var style = {};
-  var theme;
-  var classNames = [[styles$l.root, true], [styles$l[theme], true], [styles$l[onlyOn], !!onlyOn && !!styles$l[onlyOn]]];
+  var classNames = [[styles$l.root, true], [styles$l[onlyOn], !!onlyOn && !!styles$l[onlyOn]]];
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles$l);
   }
 
   if (gradients) {
-    theme = gradients.text_rgb === '0,0,0' ? 'dark' : 'light';
+    var theme = [gradients.text_rgb === '0,0,0' ? 'dark' : 'light'];
+    classNames = makeStyleContext(classNames, theme, styles$l);
     style.backgroundImage = generateGradient(gradients.bg_rgb);
   }