@meduza/ui-kit-2 0.1.7 → 0.1.9

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

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
-interface DangerousHtmlProps {
+type DangerousHtmlProps = {
   className?: string
   html: string
-  tagName?: string
+  tagName?: keyof JSX.IntrinsicElements
 }
 
 const DangerousHTML: React.FC<DangerousHtmlProps> = ({
@@ -11,23 +11,21 @@ const DangerousHTML: React.FC<DangerousHtmlProps> = ({
   tagName: TagName = 'div',
   html
 }) => {
-  const element = useRef<HTMLElement | null>(null)
+  const element = useRef<HTMLDivElement>(null)
   const [canRenderHtml, setCanRenderHtml] = useState(false)
 
   useEffect(() => {
     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,26 +51,36 @@ 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')
     })
   }, [])
 
   useEffect(() => {
-    if (canRenderHtml && html.indexOf('script') > -1 && element.current) {
-      element.current.innerHTML = html
-      replaceScriptElementsRecursive(element.current)
+    if (
+      canRenderHtml &&
+      html.indexOf('script') > -1 &&
+      element.current.firstElementChild
+    ) {
+      element.current.firstElementChild.innerHTML = html
+      replaceScriptElementsRecursive(element.current.firstElementChild)
       prepareAnchors()
     }
-  }, [canRenderHtml, element, html])
+  }, [
+    canRenderHtml,
+    element,
+    html,
+    replaceScriptElementsRecursive,
+    prepareAnchors
+  ])
 
   return (
-    <TagName
-      // @ts-ignore
-      ref={element}
-      className={className}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <div ref={element}>
+      <TagName
+        className={className}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
   )
 }
 

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