@meduza/ui-kit-2 0.4.15 → 0.5.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.15",
+  "version": "0.5.1",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -27,9 +27,9 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "dayjs": "^1.11.9",
-    "react": ">=18",
-    "react-intersection-observer": "^9.5.2",
+    "dayjs": "^1.10.3",
+    "react": ">=16",
+    "react-intersection-observer": "^8.31.0",
     "react-router-dom": "^5.2.0"
   },
   "lint-staged": {
@@ -51,6 +51,12 @@
       "@commitlint/config-conventional"
     ]
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsc --noEmit && lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
@@ -72,7 +78,6 @@
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "babel-loader": "^9.1.3",
-    "css-loader": "^6.8.1",
     "dayjs": "^1.11.9",
     "dts-cli": "^2.0.3",
     "eslint": "^8.45.0",
@@ -104,7 +109,6 @@
     "storybook": "^7.1.0",
     "storybook-addon-react-docgen": "^1.2.43",
     "storybook-addon-react-router-v6": "^1.0.2",
-    "style-loader": "^3.3.3",
     "stylelint": "^15.10.2",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-sass-guidelines": "^10.0.0",
@@ -116,5 +120,6 @@
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "utils": "^0.3.1"
-  }
+  },
+  "dependencies": {}
 }

package/src/Cover/index.tsx

@@ -38,10 +38,7 @@ export const Cover: React.FC<CoverProps> = ({
 
     classNames = makeStyleContext(classNames, theme, styles)
 
-    style.backgroundImage = generateGradient(
-      gradients.bg_rgb,
-      'mediaBlockBottom'
-    )
+    style.backgroundImage = generateGradient(gradients.bg_rgb, 'mediaBlockBottom')
   }
 
   const renderCC = (context?: string): JSX.Element => (
@@ -55,12 +52,7 @@ export const Cover: React.FC<CoverProps> = ({
   return (
     <div data-testid="cover" className={makeClassName(classNames)}>
       <div className={styles.image}>
-        <Image
-          optimized={urls}
-          ratio={mobileRatio}
-          display="narrow"
-          lazy={true}
-        />
+        <Image optimized={urls} ratio={mobileRatio} display="narrow" />
       </div>
       <div className={styles.body} style={style}>
         {blocks.map((item) => (

package/src/DocumentItemsCount/DocumentItemsCount.module.css

@@ -1,6 +1,17 @@
+/* stylelint-disable declaration-empty-line-before */
 @import '../vars';
 
-.root:not(:first-child) {
+.root {
+  display: inline;
+
+  line-height: inherit;
+}
+
+.root svg {
+  vertical-align: top;
+}
+
+.items {
   margin-left: 1px;
 
   vertical-align: top;

package/src/DocumentItemsCount/DocumentItemsCount.test.tsx

@@ -1,14 +1,21 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { DocumentItemsCount } from './'
+// import { DocumentItemsCountProps } from './DocumentItemsCount.types'
+
+import styles from './DocumentItemsCount.module.css'
 
 describe('Document Items Count', () => {
+  // let props: DocumentItemsCountProps
+
   const renderComponent = () =>
     render(<DocumentItemsCount type="card" items={4} />)
 
   it('should have root style', () => {
-    const { container } = renderComponent()
+    const { getByTestId } = renderComponent()
+
+    const documentItemsCount = getByTestId('document-items-count')
 
-    expect(container).toBeInTheDocument
+    expect(documentItemsCount).toHaveClass(styles.root)
   })
 })

package/src/DocumentItemsCount/index.tsx

@@ -45,9 +45,9 @@ export const DocumentItemsCount: React.FC<DocumentItemsCountProps> = ({
   )}`
 
   return (
-    <>
+    <div data-testid="document-items-count" className={styles.root}>
       {children}
-      <span className={styles.root}>{itemsCount}</span>
-    </>
+      <span className={styles.items}>{itemsCount}</span>
+    </div>
   )
 }

package/src/Footnote/Footnote.module.css

@@ -3,58 +3,18 @@
 .root {
   position: relative;
 
+  width: 320px;
+  padding: 20px;
+
   border-radius: 8px;
   background-color: #fff;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
-    0 5px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
 }
 
 .body {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  max-height: 400px;
-  padding: 20px 20px 28px;
-
-  color: #000;
-
-  font-family: $secondaryFont;
   font-family: $secondaryFont;
   font-size: 16px;
-  font-size: 16px;
   line-height: 22px;
-  line-height: 22px;
-
-  overscroll-behavior: none;
-}
-
-.body::before,
-.body::after {
-  position: absolute;
-  right: 0;
-  left: 0;
-
-  content: '';
-  pointer-events: none;
-}
-
-.body::before {
-  top: 0;
-
-  height: 29px;
-
-  border-radius: 8px 8px 0 0;
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
-}
-
-.body::after {
-  bottom: 0;
-
-  height: 48px;
-
-  border-radius: 0 0 8px 8px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
 }
 
 .body h3 {
@@ -84,12 +44,11 @@
 
 .dismiss {
   position: absolute;
-  z-index: 10;
   top: 0;
   right: 0;
 
   margin: 0;
-  padding: 15px 15px 10px;
+  padding: 6px 9px 10px;
 
   cursor: pointer;
 
@@ -107,3 +66,4 @@
   width: 12px;
   height: 12px;
 }
+

package/src/Footnote/Footnote.stories.tsx

@@ -15,33 +15,16 @@ export default {
 const Example: React.FC = () => {
   return (
     <>
-      <div className={styles.root} style={{ maxWidth: 400 }}>
+      <div className={styles.root}>
         <Footnote onClose={(): void => alert('Handle Close')}>
-          <h3>Из расследования Туровского Из расследования Туровского</h3>
-          <div>
-            <p>
-              «Летом 2007 года Лиду отправили подтягивать математику в Боброво.
-              К тому моменту Бебчук стал для нее „родной фигурой и наставником,
-              помогал, слушал“. В первые дни он парил ее голой в бане. В доме
-              Бебчука вместо кроватей стояли большие полати — двухэтажная
-              деревянная конструкция, на которой помещалось до 15 человек. Лида
-              спала на втором этаже, Бебчук внизу. В одну из ночей ей не
-              удавалось заснуть, она ворочалась. Бебчук услышал. „Не можешь
-              уснуть? Иди сюда, будем вместе засыпать“. Лида спустилась.
-              „Забирайся под одеяло“, — сказал преподаватель. Так и не сумев
-              заснуть, Лида ночью вышла из дома». «Летом 2007 года Лиду
-              отправили подтягивать математику в Боброво. К тому моменту Бебчук
-              стал для нее „родной фигурой и наставником, помогал, слушал“. В
-              первые дни он парил ее голой в бане. В доме Бебчука вместо
-              кроватей стояли большие полати — двухэтажная деревянная
-              конструкция, на которой помещалось до 15 человек. Лида спала на
-              втором этаже, Бебчук внизу. В одну из ночей ей не удавалось
-              заснуть, она ворочалась. Бебчук услышал. „Не можешь уснуть? Иди
-              сюда, будем вместе засыпать“. Лида спустилась. „Забирайся под
-              одеяло“, — сказал преподаватель. Так и не сумев заснуть, Лида
-              ночью вышла из дома».
-            </p>
-          </div>
+          <h3>Заголовок лвлвлдфова выа вовофдывлоа</h3>
+          <p>
+            «Я видел истинного Дональда Трампа, наблюдал за ним. Это обманщик,
+            притворщик и задира. Настоящий паршивец! Все его слова абсурдны
+            и&nbsp;направлены на скандал. Рейган когда-то сказал Горбачёву:
+            «Мистер Горбачёв, развалите эту стену!», а&nbsp;Трамп собирается
+            взводить стену между Америкой и Мексикой.
+          </p>
         </Footnote>
       </div>
     </>

package/src/Image/Image.module.css

@@ -76,14 +76,3 @@
 .dark {
   background-color: transparent;
 }
-
-.isStatic,
-.isStatic .wrapper,
-.isStatic .wrapper > div {
-  height: 100%;
-}
-
-.isStatic img {
-  height: 100%;
-  position: static;
-}

package/src/Meta/Meta.module.css

@@ -104,11 +104,6 @@
   }
 }
 
-.isCustom {
-  color: var(--metaText);
-  fill: var(--metaFill);
-}
-
 /* VISIBILITY */
 
 .mobile {

package/src/Meta/Meta.stories.module.css

@@ -4,20 +4,4 @@
   display: block;
 
   font-family: $secondaryFont;
-
-  display: flex;
-  flex-flow: column nowrap;
-
-  gap: 40px;
-}
-
-.root h3 {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.layout {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 20px;
 }

package/src/Meta/Meta.stories.tsx

@@ -8,8 +8,6 @@ import { SvgSymbol } from '../SvgSymbol'
 import { PreviewWrapper } from '../_storybook/PreviewWrapper'
 
 import styles from './Meta.stories.module.css'
-import { MetaContainer } from './MetaContainer'
-import { MetaMock } from './Meta.mock'
 
 export default {
   title: 'Main / Meta',
@@ -21,8 +19,8 @@ export default {
 
 const Example: React.FC = () => {
   return (
-    <div className={styles.root}>
-      <div className={styles.layout}>
+    <>
+      <div className={styles.root}>
         <h3>В карточке</h3>
         <Meta>
           <MetaItem>
@@ -40,7 +38,7 @@ const Example: React.FC = () => {
           ))}
         </Meta>
       </div>
-      <div className={styles.layout}>
+      <div className={styles.root}>
         <h3>В материале</h3>
 
         <Meta styleContext="isInMaterial">
@@ -54,53 +52,8 @@ const Example: React.FC = () => {
             <Timestamp publishedAt={1558353600} type="date" locale="en" />
           </MetaItem>
         </Meta>
-        <div className={styles.layout}>
-          <h3>Блочная</h3>
-          <MetaContainer
-            block={MetaMock}
-            lang="ru"
-            styleContext={[]}
-            isRead={false}
-            isListened={false}
-            isInBookmarks={false}
-          />
-        </div>
-        <div
-          className={styles.layout}
-          style={
-            {
-              '--metaText': `pink`,
-              '--metaFill': 'currentColor'
-            } as React.CSSProperties
-          }
-        >
-          <h3>CSS Props</h3>
-
-          <Meta styleContext="isCustom">
-            <MetaItem bullets>
-              <MetaItemLive /> Онлайн
-            </MetaItem>
-            <MetaItem bullets>
-              Источник: <a href="https://meduza.io">Meduza</a>
-            </MetaItem>
-            <MetaItem bullets>
-              <Timestamp publishedAt={1558353600} type="date" locale="en" />
-            </MetaItem>
-          </Meta>
-          <div className={styles.layout}>
-            <h3>Блочная</h3>
-            <MetaContainer
-              block={MetaMock}
-              lang="ru"
-              styleContext={[]}
-              isRead={false}
-              isListened={false}
-              isInBookmarks={false}
-            />
-          </div>
-        </div>
       </div>
-    </div>
+    </>
   )
 }
 

package/src/Meta/MetaContainer.tsx

@@ -133,14 +133,6 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
             )
           }
 
-          case 'string': {
-            return (
-              <MetaItem bullets key={component.id}>
-                {component.text}
-              </MetaItem>
-            )
-          }
-
           default: {
             return null
           }

package/src/Popover/Popover.module.css

@@ -47,29 +47,27 @@
   max-width: 420px;
   min-height: 80px;
   margin: 0 auto;
+  padding: 22px 20px 28px;
 
   animation: disappear 350ms ease both;
-
-  border-radius: 8px 8px 0 0;
-  background-color: #fff;
 }
 
 .dismiss {
   position: absolute;
-  z-index: 10;
-  top: 10px;
-  right: 10px;
+  top: -23px;
+  left: 50%;
 
-  width: 26px;
-  height: 26px;
+  width: 50px;
+  height: 36px;
   padding: 0;
 
-  cursor: pointer;
+  transform: translateX(-50%);
 
+  opacity: 0.4;
   border-width: 0;
-  border-radius: 13px;
-  background-color: #ebebeb;
-  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1 10 10M11 1 1 11' stroke='%23757575' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  border-radius: 0;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.445 1.832l6.946 4.63a2 2 0 0 0 2.218 0l6.946-4.63a1 1 0 1 0-1.11-1.664L8.5 4.798 1.555.168a1 1 0 1 0-1.11 1.664z' fill='%23F7F7F7' fill-rule='nonzero'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   box-shadow: none;
@@ -77,55 +75,39 @@
   appearance: none;
 }
 
-.visible .container {
-  animation: appear 350ms ease both;
-}
-
-.body {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  max-height: 68vh;
-  padding: 18px 20px 28px;
+.background {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
 
-  color: #000;
+  overflow: hidden;
 
-  font-family: $secondaryFont;
-  font-size: 16px;
-  line-height: 22px;
+  width: 100%;
+  height: 100%;
 
-  overscroll-behavior: none;
+  border-radius: 8px 8px 0 0;
 }
 
-.body::before,
-.body::after {
+.background rect {
   position: absolute;
-  right: 0;
-  left: 0;
 
-  content: '';
+  width: 100%;
+  height: 100%;
 }
 
-.body::before {
-  top: 0;
-
-  height: 29px;
-
-  border-radius: 8px 8px 0 0;
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
+.visible .container {
+  animation: appear 350ms ease both;
 }
 
-.body::after {
-  bottom: 0;
-
-  height: 48px;
-
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
+.body {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
 }
 
 .body h3 {
-  margin: 0 0 16px;
-  padding-right: 26px;
+  margin: 0 0 5px;
 
   font-size: inherit;
   font-weight: 700;

package/src/Popover/Popover.stories.tsx

@@ -35,31 +35,7 @@ const Example: React.FC = () => {
               setIsPopoverShown(false)
             }}
           >
-            <h3>Из расследования Туровского Из расследования Туровского</h3>
-            <div>
-              <p>
-                «Летом 2007 года Лиду отправили подтягивать математику в
-                Боброво. К тому моменту Бебчук стал для нее „родной фигурой и
-                наставником, помогал, слушал“. В первые дни он парил ее голой в
-                бане. В доме Бебчука вместо кроватей стояли большие полати —
-                двухэтажная деревянная конструкция, на которой помещалось до 15
-                человек. Лида спала на втором этаже, Бебчук внизу. В одну из
-                ночей ей не удавалось заснуть, она ворочалась. Бебчук услышал.
-                „Не можешь уснуть? Иди сюда, будем вместе засыпать“. Лида
-                спустилась. „Забирайся под одеяло“, — сказал преподаватель. Так
-                и не сумев заснуть, Лида ночью вышла из дома». «Летом 2007 года
-                Лиду отправили подтягивать математику в Боброво. К тому моменту
-                Бебчук стал для нее „родной фигурой и наставником, помогал,
-                слушал“. В первые дни он парил ее голой в бане. В доме Бебчука
-                вместо кроватей стояли большие полати — двухэтажная деревянная
-                конструкция, на которой помещалось до 15 человек. Лида спала на
-                втором этаже, Бебчук внизу. В одну из ночей ей не удавалось
-                заснуть, она ворочалась. Бебчук услышал. „Не можешь уснуть? Иди
-                сюда, будем вместе засыпать“. Лида спустилась. „Забирайся под
-                одеяло“, — сказал преподаватель. Так и не сумев заснуть, Лида
-                ночью вышла из дома».
-              </p>
-            </div>
+            Здесь мог бы быть ваш компонент
           </Popover>
         )}
       </div>

package/src/Popover/index.tsx

@@ -53,7 +53,27 @@ export const Popover: React.FC<PopoverProps> = ({ children, onClose }) => {
           onClick={(): void => handleClose()}
           aria-label="dismiss"
         />
-
+        <svg width="100%" className={styles.background}>
+          <defs>
+            <mask id="myMask" x="0" y="0" width="100%" height="100%">
+              <rect fill="white" y="0" width="100%" height="100%" x="0" />
+              <svg x="50%" overflow="visible">
+                <g transform="translate(-12 0)">
+                  <path d="M4.61852778e-14,9.76996262e-15 L9.84597532,5.80270273 C11.0992017,6.54128882 12.6546044,6.54128882 13.9078308,5.80270273 L23.7538061,9.76996262e-15 L4.61852778e-14,9.76996262e-15 Z" />
+                </g>
+              </svg>
+            </mask>
+          </defs>
+          <rect
+            fill="#F7F7F7"
+            id="base-mask"
+            mask="url(#myMask)"
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
+          />
+        </svg>
         <div className={styles.body}>{children}</div>
       </div>
     </div>

package/src/RawHtmlBlock/index.tsx

@@ -6,6 +6,7 @@ import { Spoiler } from '../Spoiler'
 import { HalfBlock } from '../HalfBlock'
 import { Cover } from '../Cover'
 import { RelatedRichBlock } from '../RelatedRichBlock'
+import { ShopRelatedBlock } from '../ShopRelatedBlock'
 import { BlockProvider } from '../utils/BlockContext'
 
 export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
@@ -47,6 +48,10 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
       return <RelatedRichBlock block={block} styleContext={styleContext} />
     }
 
+    case 'related_shop': {
+      return <ShopRelatedBlock block={block} styleContext={styleContext} />
+    }
+
     default: {
       return (
         <BlockProvider value={context}>

package/src/RelatedRichBlock/RelatedRichBlock.module.css

@@ -19,14 +19,6 @@
   }
 }
 
-.root:last-child {
-  margin-bottom: 0;
-}
-
-.root:first-child {
-  margin-top: 0;
-}
-
 .root::after {
   position: absolute;
   top: 0;
@@ -47,9 +39,7 @@
 }
 
 .root::after {
-  box-shadow:
-    inset 0 4px #b88b59,
-    inset 0 5px rgba(0, 0, 0, 0.2),
+  box-shadow: inset 0 4px #b88b59, inset 0 5px rgba(0, 0, 0, 0.2),
     inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 

package/src/RenderBlocks/index.tsx

@@ -18,7 +18,6 @@ import { MaterialNote } from '../MaterialNote'
 import { SensitiveBlock } from '../SensitiveBlock'
 import { DonatesTeaser } from '../DonatesTeaser'
 import { AnnouncementInText } from '../AnnouncementInText'
-import { RelatedBook } from '../RelatedBook'
 
 export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   block,
@@ -75,7 +74,7 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
     case 'divider':
     case 'lead':
     case 'lead_hr': {
-      return <SimpleBlock block={block} styleContext={styleContext} />
+      return <SimpleBlock block={block} styleContext={styleContext} id={block.id} />
     }
 
     case 'quote':
@@ -97,9 +96,6 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
     case 'related': {
       return <RelatedBlock block={block} styleContext={styleContext} />
     }
-    case 'related_book': {
-      return <RelatedBook block={block} styleContext={styleContext} />
-    }
 
     case 'source':
       return <SourceBlock block={block} styleContext={styleContext} />