@meduza/ui-kit-2 0.1.8 → 0.1.9

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,16 +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 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]
   ]

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,10 +1,10 @@
 import React from 'react'
-
 import { SvgSymbol } from './'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
-import styles from './SvgSymbol.stories.module.css'
 import { Icons } from './SvgSymbol.types'
 
+import styles from './SvgSymbol.stories.module.css'
+
 export default {
   title: 'Main / SvgSymbol',
   component: 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/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,5 +1,4 @@
 import React, { useState } from 'react'
-
 import { Toolbar } from './'
 import { ToolbarButton } from '../ToolbarButton'
 import { ToolbarButtonTypes } from '../ToolbarButton/ToolbarButton.types'

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', () => {

package/src/Toolbar/index.tsx

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

package/src/ToolbarButton/ToolbarButton.stories.tsx

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

package/src/ToolbarButton/ToolbarButton.test.tsx

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

package/src/ToolbarButton/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { ToolbarButtonProps } from './ToolbarButton.types'
-
 import { SvgSymbol } from '../SvgSymbol/'
-import makeClassName from '../utils/makeClassName'
+import { makeClassName, ClassNames } from '../utils/makeClassName'
 
 import styles from './ToolbarButton.module.css'
 
@@ -13,7 +12,7 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
   isActive,
   onClick
 }) => {
-  const classNames: (string[] | string | boolean)[][] = [
+  const classNames: ClassNames = [
     [styles.root, true],
     [styles[type], !!styles[type]],
     [styles[theme], !!styles[theme] && !!theme],

package/src/_storybook/PreviewWrapper/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import makeClassName from 'utils/makeClassName'
 import styles from './PreviewWrapper.module.css'
+import makeClassName from '../../utils/makeClassName'
 
 export interface PreviewWrapperProps {
   theme: 'light' | 'dark'

package/src/utils/DangerousHtml.tsx

@@ -18,16 +18,14 @@ const DangerousHTML: React.FC<DangerousHtmlProps> = ({
     setCanRenderHtml(true)
   }, [])
 
-  const replaceScriptElementsRecursive = useCallback(node => {
+  const replaceScriptElementsRecursive = useCallback((node) => {
     if (
       node.tagName === 'SCRIPT' &&
       (!node.id || node.id.indexOf('script-') !== 0)
     ) {
       const script = document.createElement('script')
 
-      script.id = `script-${Math.random()
-        .toString(16)
-        .slice(2)}`
+      script.id = `script-${Math.random().toString(16).slice(2)}`
       script.innerHTML = node.innerHTML
 
       const attrs = node.attributes
@@ -53,7 +51,7 @@ const DangerousHTML: React.FC<DangerousHtmlProps> = ({
   const prepareAnchors = useCallback(() => {
     const anchors = Array.from(element.current.querySelectorAll('a'))
 
-    anchors.forEach(a => {
+    anchors.forEach((a) => {
       a.setAttribute('target', '_blank')
     })
   }, [])
@@ -62,10 +60,10 @@ const DangerousHTML: React.FC<DangerousHtmlProps> = ({
     if (
       canRenderHtml &&
       html.indexOf('script') > -1 &&
-      element.current.firstChild
+      element.current.firstElementChild
     ) {
       element.current.firstElementChild.innerHTML = html
-      replaceScriptElementsRecursive(element.current.firstChild)
+      replaceScriptElementsRecursive(element.current.firstElementChild)
       prepareAnchors()
     }
   }, [

package/src/utils/generateGradient.ts

@@ -13,7 +13,7 @@ const generateGradient = (color: string): string => {
     [1, 82]
   ]
 
-  const gradient = gradientSteps.map(i => `rgba(${color}, ${i[0]}) ${i[1]}%`)
+  const gradient = gradientSteps.map((i) => `rgba(${color}, ${i[0]}) ${i[1]}%`)
 
   return `linear-gradient(-180deg, ${gradient})`
 }

package/src/utils/makeClassName.ts

@@ -1,4 +1,6 @@
-const makeClassName = (list: (string[] | string | boolean)[][]): string => {
+export type ClassNames = (string[] | string | boolean)[][]
+
+export const makeClassName = (list: ClassNames): string => {
   return list
     .filter(([, active]) => active)
     .map(([className]) => className)

package/src/utils/makeStyleContext.ts

@@ -1,10 +1,14 @@
+import { ClassNames } from './makeClassName'
+
 const makeStyleContext = (
-  classNames: (string[] | string | boolean)[][],
+  classNames: ClassNames,
   styleContext: string[] | string,
-  styles
-): (string[] | string | boolean)[][] => {
+  styles: Record<string, string>
+): ClassNames => {
   const context = Array.isArray(styleContext)
-    ? styleContext.filter(ctx => styles[ctx]).map(ctx => [[styles[ctx]], true])
+    ? styleContext
+        .filter((ctx) => styles[ctx])
+        .map((ctx) => [[styles[ctx]], true])
     : [[styles[styleContext], !!styleContext && !!styles[styleContext]]]
 
   return classNames.concat(context)

package/src/utils/toCamel.ts

@@ -1,2 +1,2 @@
 export const toCamel = (s: string): string =>
-  s.replace(/([_][a-z])/gi, str => str.toUpperCase().replace('_', ''))
+  s.replace(/([_][a-z])/gi, (str) => str.toUpperCase().replace('_', ''))