@meduza/ui-kit-2 0.1.8 → 0.1.10

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/index.tsx

@@ -36,4 +36,5 @@ export * from './MetaItem'
 export * from './MetaItemLive'
 export * from './DocumentItemsCount'
 export * from './ToolbarButton'
+export * from './Footnote'
 // /* PLOP_INJECT_LINK */ //

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