@meduza/ui-kit-2 0.1.7 → 0.1.9

package/src/RelatedBlock/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { RelatedBlockProps } from './RelatedBlock.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
 
 import styles from './RelatedBlock.module.css'
@@ -13,7 +12,7 @@ export const RelatedBlock: React.FC<RelatedBlockProps> = ({
   },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true]
   ]

package/src/RenderBlocks/RenderBlocks.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { RenderBlocks } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './RenderBlocks.stories.module.css'
 
 export default {

package/src/RenderBlocks/RenderBlocks.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { RenderBlocks } from './'
 import { RenderBlocksProps } from './RenderBlocks.types'
+
 import styles from './RenderBlocks.module.css'
 
 describe('Render Blocks', () => {

package/src/RenderBlocks/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { RenderBlocksProps } from './RenderBlocks.types'
-
 import { Tag } from '../Tag'
 import { SimpleTitle } from '../SimpleTitle'
 import { RichTitle } from '../RichTitle'

package/src/RichTitle/RichTitle.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { RichTitle } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './RichTitle.stories.module.css'
 
 import mock from './mock.json'

package/src/RichTitle/RichTitle.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { RichTitle } from './'
 import { RichTitleProps } from './RichTitle.types'
+
 import styles from './RichTitle.module.css'
 
 describe('Rich Title', () => {

package/src/RichTitle/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { RichTitleProps } from './RichTitle.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
 
 import styles from './RichTitle.module.css'
@@ -13,7 +12,7 @@ export const RichTitle: React.FC<RichTitleProps> = ({
   },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true],
     [styles.featured, !!featured]

package/src/SimpleBlock/SimpleBlock.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { SimpleBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './SimpleBlock.stories.module.css'
 
 import mock from './mock.json'
@@ -18,7 +18,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        {mock.blocks.map(item => (
+        {mock.blocks.map((item) => (
           <SimpleBlock
             block={item}
             key={item.id}

package/src/SimpleBlock/SimpleBlock.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { SimpleBlock } from './'
 import { SimpleBlockProps } from './SimpleBlock.types'
+
 import styles from './SimpleBlock.module.css'
 
 describe('Simple Block', () => {

package/src/SimpleBlock/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import { SimpleBlockProps } from './SimpleBlock.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-import DangerousHTML from '../utils/DangerousHtml'
 
 import styles from './SimpleBlock.module.css'
 
@@ -11,9 +9,9 @@ export const SimpleBlock: React.FC<SimpleBlockProps> = ({
   block: { data, type, only_on: onlyOn },
   styleContext
 }) => {
-  let tagName
+  let TagName
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles[type], !!type && !!styles[type]],
     [styles[onlyOn], true]
   ]
@@ -27,21 +25,20 @@ export const SimpleBlock: React.FC<SimpleBlockProps> = ({
     case 'lead':
     case 'note_caption':
     case 'note_credit': {
-      tagName = 'p'
+      TagName = 'p'
       break
     }
     case 'lead_hr': {
-      tagName = 'div'
+      TagName = 'div'
       break
     }
     default:
-      tagName = type
+      TagName = type
   }
   return (
-    <DangerousHTML
+    <TagName
       className={makeClassName(classNames)}
-      html={data || ''}
-      tagName={tagName}
+      dangerouslySetInnerHTML={{ __html: data }}
     />
   )
 }

package/src/SimpleTitle/SimpleTitle.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { SimpleTitle } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './SimpleTitle.stories.module.css'
 
 import mock from './mock.json'

package/src/SimpleTitle/SimpleTitle.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { SimpleTitle } from './'
 import { SimpleTitleProps } from './SimpleTitle.types'
+
 import styles from './SimpleTitle.module.css'
 
 describe('Simple Title', () => {

package/src/SimpleTitle/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { SimpleTitleProps } from './SimpleTitle.types'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
 
 import styles from './SimpleTitle.module.css'
@@ -12,7 +12,7 @@ export const SimpleTitle: React.FC<SimpleTitleProps> = ({
   },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true]
   ]

package/src/SourceBlock/SourceBlock.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
-
 import { SourceBlock } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './SourceBlock.stories.module.css'
 
+import mock from './mock.json'
+
 export default {
   title: 'Main / SourceBlock',
   component: SourceBlock,
@@ -14,11 +16,9 @@ export default {
 
 const Example: React.FC = () => {
   return (
-    <>
-      <div className={styles.root}>
-        <SourceBlock />
-      </div>
-    </>
+    <div className={styles.root}>
+      <SourceBlock block={mock} />
+    </div>
   )
 }
 

package/src/SourceBlock/SourceBlock.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { SourceBlock } from './'
 import { SourceBlockProps } from './SourceBlock.types'
+
 import styles from './SourceBlock.module.css'
 
 describe('Source Block', () => {

package/src/SourceBlock/index.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import { SourceBlockProps } from './SourceBlock.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-import DangerousHTML from '../utils/DangerousHtml'
 
 import styles from './SourceBlock.module.css'
 
 export const SourceBlock: React.FC<SourceBlockProps> = ({
-  block: { only_on: onlyOn, quote, origin, url },
+  block: {
+    only_on: onlyOn,
+    data: { quote, origin, url }
+  },
   styleContext
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], true]
   ]
@@ -33,7 +34,7 @@ export const SourceBlock: React.FC<SourceBlockProps> = ({
         rel="noopener noreferrer"
       >
         {quote.map((item, index) => (
-          <DangerousHTML key={index} html={item.data} tagName="p" />
+          <p key={index} dangerouslySetInnerHTML={{ __html: item.data }} />
         ))}
         <footer>
           <cite className={styles.origin}>{origin}</cite>

package/src/SourceBlock/mock.json

@@ -0,0 +1,15 @@
+{
+  "type": "source",
+  "data": {
+    "quote": [
+      {
+        "type": "p",
+        "data": "«В свое время, в 1990-е, потребительская корзина позиционировалась как временная, кризисная мера. Полагали, что мы через короткое время сможем отказаться от этого подхода и перейти к определению бедности через медианные доходы граждан. Но мы прожили с этой временной мерой почти четверть века», — отмечает глава НИИ труда Дмитрий Платыгин.",
+        "length": 339
+      }
+    ],
+    "origin": "Коммерсант",
+    "url": "https://www.kommersant.ru/doc/4502584?from=main_1"
+  },
+  "id": "4-072f3b4143d3377d533e198d3ea1ac263959a79a114e81104ecb4ab02b3996e5"
+}

package/src/Spoiler/Spoiler.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { Spoiler } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './Spoiler.stories.module.css'
 
 import mock from './mock.json'

package/src/Spoiler/Spoiler.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Spoiler } from './'
 import { SpoilerProps } from './Spoiler.types'
+
 import styles from './Spoiler.module.css'
 
 describe('Spoiler', () => {

package/src/Spoiler/index.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useRef } from 'react'
 import { SpoilerProps } from './Spoiler.types'
-
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 import makeStyleContext from '../utils/makeStyleContext'
-import postMessage from '../utils/postMessage'
 
+import postMessage from '../utils/postMessage'
 import { RenderBlocks } from '../RenderBlocks'
 import { Button } from '../Button'
 import { SvgSymbol } from '../SvgSymbol'
@@ -39,7 +38,7 @@ export const Spoiler: React.FC<SpoilerProps> = ({
     }
   }
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[onlyOn], !!onlyOn],
     [styles[display], !!display && styles[display]],
@@ -57,7 +56,7 @@ export const Spoiler: React.FC<SpoilerProps> = ({
     <div ref={ref} className={makeClassName(classNames)} data-testid="spoiler">
       <div className={styles.header}>{title && <h3>{title}</h3>}</div>
       <div className={styles.body}>
-        {blocks.map(item => (
+        {blocks.map((item) => (
           <RenderBlocks
             key={item.id}
             block={item}

package/src/SvgSymbol/SvgSymbol.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-
 import { SvgSymbol } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import { Icons } from './SvgSymbol.types'
+
 import styles from './SvgSymbol.stories.module.css'
-import { Icons } from 'SvgSymbol/SvgSymbol.types'
 
 export default {
   title: 'Main / SvgSymbol',
@@ -46,7 +46,7 @@ const Example: React.FC = () => {
     <div className={styles.root}>
       <h2>Кнопки соц. сетей и реакций</h2>
       <div className={styles.row}>
-        {social.map(icon => (
+        {social.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>
@@ -55,7 +55,7 @@ const Example: React.FC = () => {
 
       <h2>Мета</h2>
       <div className={styles.row}>
-        {meta.map(icon => (
+        {meta.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>
@@ -64,7 +64,7 @@ const Example: React.FC = () => {
 
       <h2>Плеер</h2>
       <div className={styles.row}>
-        {podcast.map(icon => (
+        {podcast.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>
@@ -73,7 +73,7 @@ const Example: React.FC = () => {
 
       <h2>Другие</h2>
       <div className={styles.row}>
-        {other.map(icon => (
+        {other.map((icon) => (
           <span title={icon} key={`iconName-${icon}`} className={styles.icon}>
             <SvgSymbol icon={icon} size="medium" />
           </span>

package/src/SvgSymbol/SvgSymbol.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render, RenderResult } from '@testing-library/react'
-
 import { SvgSymbol } from './'
 import { SvgSymbolProps } from './SvgSymbol.types'
+
 import styles from './SvgSymbol.module.css'
 
 describe('Svg Symbol', () => {

package/src/SvgSymbol/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { SvgSymbolProps } from './SvgSymbol.types'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName } from '../utils/makeClassName'
+import { icons } from './icons'
 
 import styles from './SvgSymbol.module.css'
-import { icons } from './icons'
 
 export const SvgSymbol: React.FC<SvgSymbolProps> = ({
   icon,

package/src/Switcher/Switcher.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-
 import { Switcher } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './Switcher.stories.module.css'
 
 export default {
@@ -24,7 +24,7 @@ const Example: React.FC = () => {
           <Switcher
             enabled={enabledOne}
             styleContext="isInPanel"
-            onChange={e => setEnabledOne(e.target.checked)}
+            onChange={(e) => setEnabledOne(e.target.checked)}
           >
             <span>Показывать по порядку</span>
           </Switcher>
@@ -34,7 +34,7 @@ const Example: React.FC = () => {
             <Switcher
               enabled={enabledTwo}
               styleContext="isInMenu"
-              onChange={e => setEnabledTwo(e.target.checked)}
+              onChange={(e) => setEnabledTwo(e.target.checked)}
               theme="dark"
             >
               <span>Показывать по порядку</span>
@@ -45,7 +45,7 @@ const Example: React.FC = () => {
           <Switcher
             enabled={enabledThree}
             styleContext="isInLive"
-            onChange={e => setEnabledThree(e.target.checked)}
+            onChange={(e) => setEnabledThree(e.target.checked)}
             childrenPosition="right"
           >
             <span>Перевернуть трансляцию</span>

package/src/Switcher/Switcher.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render, fireEvent, RenderResult } from '@testing-library/react'
-
 import { Switcher } from './'
 import { SwitcherProps } from './Switcher.types'
+
 import styles from './Switcher.module.css'
 
 describe('Switcher', () => {

package/src/Switcher/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { SwitcherProps } from './Switcher.types'
-import makeClassName from '../utils/makeClassName'
-
+import { makeClassName } from '../utils/makeClassName'
 import styles from './Switcher.module.css'
 
 export const Switcher: React.FC<SwitcherProps> = ({

package/src/Table/Table.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { Table } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './Table.stories.module.css'
 
 import mock from './mock.json'

package/src/Table/Table.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Table } from './'
 import { TableProps } from './Table.types'
+
 import styles from './Table.module.css'
 
 describe('Table', () => {

package/src/Table/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { TableProps } from './Table.types'
 import makeStyleContext from '../utils/makeStyleContext'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import { MediaCaption } from '../MediaCaption'
 
@@ -28,7 +28,7 @@ export const Table: React.FC<TableProps> = ({
     '#f4f0f8': 'violet'
   }
 
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[display], !!display && !!styles[display]]
   ]

package/src/Tag/Tag.stories.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
-
 import { Tag } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-
 import { TagSizes, TagThemes } from './Tag.types'
 
 import styles from './Tag.stories.module.css'
@@ -29,7 +27,7 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        {tags.map(tag => (
+        {tags.map((tag) => (
           <div key={`tagSize-${tag.theme}-${tag.size}`}>
             <Tag size={tag.size} theme={tag.theme} styleContext="rich">
               {tag.title}

package/src/Tag/Tag.test.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Tag } from './'
-// import { TagProps } from './Tag.types'
+import { TagProps } from './Tag.types'
+
 import styles from './Tag.module.css'
 
 describe('Tag', () => {
-  // let props: TagProps
+  let props: TagProps
 
-  const renderComponent = () => render(<Tag>Tag name</Tag>)
+  const renderComponent = () => render(<Tag {...props}>Tag name</Tag>)
 
   it('should have root style', () => {
     const { getByTestId } = renderComponent()

package/src/Tag/Tag.types.ts

@@ -1,3 +1,5 @@
+import React from 'react'
+
 export type TagSizes = 'small' | 'large'
 
 export type TagThemes = 'dark' | 'gold' | 'gray' | 'light' | 'inherit'
@@ -5,7 +7,7 @@ export type TagThemes = 'dark' | 'gold' | 'gray' | 'light' | 'inherit'
 export type TagStyleContexts = 'isInToolbar' | 'isInSpoiler' | 'isInDropdown'
 
 export interface TagProps {
-  children: JSX.Element[] | JSX.Element
+  children: React.ReactNode | JSX.Element[] | JSX.Element
   styleContext?: string | string[]
   theme: TagThemes
   size: TagSizes

package/src/Tag/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { TagProps } from './Tag.types'
 import makeStyleContext from '../utils/makeStyleContext'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import styles from './Tag.module.css'
 
@@ -13,7 +13,7 @@ export const Tag: React.FC<TagProps> = ({
   correlation,
   onlyOn
 }) => {
-  let classNames: (string[] | string | boolean)[][] = [
+  let classNames: ClassNames = [
     [styles.root, true],
     [styles[size], !!size && !!styles[size]],
     [styles[theme], !!theme && !!styles[theme]],

package/src/Timestamp/Timestamp.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-
 import { Timestamp } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+
 import styles from './Timestamp.stories.module.css'
 
 export default {

package/src/Timestamp/Timestamp.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Timestamp } from './'
 import { TimestampProps } from './Timestamp.types'
+
 import styles from './Timestamp.module.css'
 
 describe('Timestamp', () => {

package/src/Timestamp/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import { TimestampProps } from './Timestamp.types'
-
 import dayjs from 'dayjs'
 import 'dayjs/locale/ru'
-
 import relativeTime from 'dayjs/plugin/relativeTime'
 
 import styles from './Timestamp.module.css'

package/src/Toolbar/Toolbar.stories.tsx

@@ -1,11 +1,9 @@
 import React, { useState } from 'react'
-
 import { Toolbar } from './'
 import { ToolbarButton } from '../ToolbarButton'
 import { ToolbarButtonTypes } from '../ToolbarButton/ToolbarButton.types'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 
-
 import styles from './Toolbar.stories.module.css'
 
 export default {

package/src/Toolbar/Toolbar.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-
 import { Toolbar } from './'
 import { ToolbarProps } from './Toolbar.types'
+
 import styles from './Toolbar.module.css'
 
 describe('Toolbar', () => {