@meduza/ui-kit-2 0.8.3 → 0.8.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.3",
+  "version": "0.8.5",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -16,8 +16,8 @@
     "node": ">=16"
   },
   "scripts": {
-    "start": "dts watch --tsconfig ./tsconfig.build.json",
-    "build": "dts build --tsconfig ./tsconfig.build.json",
+    "start": "dts watch --tsconfig ./tsconfig.build.json --mode development",
+    "build": "dts build --tsconfig ./tsconfig.build.json --mode production && node build.sh",
     "generate": "plop --plopfile generators/index.js",
     "test": "dts test --passWithNoTests",
     "test:watch": "dts test --watch",
@@ -64,12 +64,12 @@
     "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-styling": "^1.3.4",
-    "@storybook/addons": "^7.1.0",
-    "@storybook/react": "^7.1.0",
-    "@storybook/react-webpack5": "^7.1.0",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "29.5.3",
@@ -79,19 +79,21 @@
     "@typescript-eslint/parser": "^6.1.0",
     "babel-loader": "^9.1.3",
     "dayjs": "^1.11.9",
-    "dts-cli": "^2.0.3",
+    "dts-cli": "^2.0.5",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.11.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.2.3",
     "plop": "^3.1.2",
     "postcss": "^8.4.26",
+    "postcss-cli": "^11.0.0",
     "postcss-import": "^15.0.1",
     "postcss-loader": "^7.3.3",
     "postcss-modules": "^6.0.0",
@@ -106,9 +108,9 @@
     "react-is": "^18.2.0",
     "react-router-dom": "^6.14.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.1.0",
-    "storybook-addon-react-docgen": "^1.2.43",
-    "storybook-addon-react-router-v6": "^1.0.2",
+    "storybook": "^8.4.2",
+    "storybook-addon-react-docgen": "^1.2.44",
+    "storybook-addon-remix-react-router": "^3.0.1",
     "stylelint": "^15.10.2",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-sass-guidelines": "^10.0.0",
@@ -120,6 +122,5 @@
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "utils": "^0.3.1"
-  },
-  "dependencies": {}
+  }
 }

package/src/AnnouncementInText/AnnouncementInText.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
   z-index: 10;

package/src/AnnouncementInText/AnnouncementInText.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/AnnouncementInText/index.tsx

@@ -22,8 +22,7 @@ export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
     ru: {
       title:
         '&laquo;Медуза&raquo; заблокирована в&nbsp;России. Мы&nbsp;были к&nbsp;этому готовы&nbsp;&mdash; и&nbsp;продолжаем работать. Несмотря&nbsp;ни&nbsp;на&nbsp;что',
-      text:
-        '<p>Нам нужна ваша помощь как никогда. Прямо сейчас. Дальше всем нам будет еще труднее. Мы&nbsp;независимое издание и&nbsp;работаем только в&nbsp;интересах читателей.</p>',
+      text: '<p>Нам нужна ваша помощь как никогда. Прямо сейчас. Дальше всем нам будет еще труднее. Мы&nbsp;независимое издание и&nbsp;работаем только в&nbsp;интересах читателей.</p>',
       button: 'Хочу помочь',
       href: 'https://mdza.io/yiNxPZ7Bs-k'
     },
@@ -31,8 +30,7 @@ export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
     en: {
       title:
         'Meduza has been blocked in Russia. We&nbsp;were ready for this and our work continues, no matter what, but we need your support like never before. ',
-      text:
-        '<p>We need it now. Tomorrow could be too late. We are an independent publication, and we work only in the interests of our readers. Many&nbsp;of&nbsp;our&nbsp;readers in Russia can no longer contribute, so we turn to you, our audience around the world.</p>',
+      text: '<p>We need it now. Tomorrow could be too late. We are an independent publication, and we work only in the interests of our readers. Many&nbsp;of&nbsp;our&nbsp;readers in Russia can no longer contribute, so we turn to you, our audience around the world.</p>',
       button: 'I want to help',
       href: 'https://support.meduza.io/en'
     }

package/src/BookmarkButton/BookmarkButton.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   color: #e0e0e0;
 }

package/src/BookmarkButton/BookmarkButton.stories.module.css

@@ -1,4 +1,4 @@
-@import '../vars.css';
+
 
 .root {
   display: block;

package/src/Button/Button.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/CardTitle/CardTitle.module.css

@@ -1,12 +1,14 @@
-@import '../vars.css';
-
 .root {
   margin-bottom: 11px;
 
+  scroll-margin: 40px;
+
   @media $landscapeTablet {
     margin-bottom: 10px;
 
     text-align: center;
+
+    scroll-margin: 70px;
   }
 }
 

package/src/CardTitle/CardTitle.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/CardTitle/index.tsx

@@ -6,7 +6,7 @@ import styles from './CardTitle.module.css'
 export const CardTitle: React.FC<CardTitleProps> = ({
   block: {
     data: { only_on: onlyOn, index, text },
-    id,
+    id
   },
   styleContext
 }) => {

package/src/ChapterBlock/ChapterBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
 

package/src/ChapterBlock/ChapterBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/Cover/Cover.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
 }

package/src/Cover/Cover.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/Cover/Cover.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { OptimizedImageItem } from '../types'
 
 export interface CoverProps {

package/src/Cover/index.tsx

@@ -38,7 +38,10 @@ 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 => (

package/src/DocumentItemsCount/DocumentItemsCount.module.css

@@ -1,6 +1,3 @@
-/* stylelint-disable declaration-empty-line-before */
-@import '../vars';
-
 .root {
   display: inline;
 

package/src/DocumentItemsCount/DocumentItemsCount.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/DonatesTeaser/DonatesTeaser.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
   z-index: 10;

package/src/DonatesTeaser/DonatesTeaser.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/DotsOnImage/DotsOnImage.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
 

package/src/DotsOnImage/DotsOnImage.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/Dropdown/Dropdown.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
   z-index: auto;

package/src/Dropdown/Dropdown.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/Dropdown/index.tsx

@@ -20,7 +20,10 @@ export const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   let classNames: ClassNames = [
     [styles.root, true],
-    [styles.inactive, !active && styleContext === "isPodcastSeason" && !!styles.inactive]
+    [
+      styles.inactive,
+      !active && styleContext === 'isPodcastSeason' && !!styles.inactive
+    ]
   ]
 
   if (styleContext) {

package/src/EmbedBlock/EmbedBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
 

package/src/EmbedBlock/EmbedBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/EmbedBlock/EmbedBlock.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 export interface EmbedGifProps {
   gif: string

package/src/Footnote/Footnote.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
 

package/src/Footnote/Footnote.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/GroupedBlock/GroupedBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   max-width: 644px;
   margin: 15px auto 0;

package/src/GroupedBlock/GroupedBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/GroupedBlock/GroupedBlock.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface GroupedBlockProps {
   block: any
   styleContext?: string[] | string

package/src/HalfBlock/HalfBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
 

package/src/HalfBlock/HalfBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   max-width: 1005px;
   margin: 0 auto;

package/src/HalfBlock/HalfBlock.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface HalfBlockProps {
   block: any
   styleContext?: string[] | string

package/src/Image/Image.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
   z-index: 1;

package/src/Image/Image.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/ImportantLead/ImportantLead.module.css

@@ -1,4 +1,4 @@
-@import '../vars.css';
+
 
 .root {
   margin: 18px 0;

package/src/ImportantLead/ImportantLead.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/ImportantLead/ImportantLead.test.tsx

@@ -6,7 +6,6 @@ import { ImportantLeadProps } from './ImportantLead.types'
 import mock from './mock.json'
 
 describe('Important Lead', () => {
-
   const renderComponent = () =>
     render(
       <div>

package/src/ImportantLead/ImportantLead.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface ImportantLeadProps {
   block: any
   styleContext?: string[] | string

package/src/Lazy/Lazy.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/Lazy/Lazy.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/ListBlock/ListBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   margin: calc(15rem / 16) 0;
   padding: 0;

package/src/ListBlock/ListBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/MaterialNote/MaterialNote.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   margin-bottom: 30px;
 

package/src/MaterialNote/MaterialNote.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/MaterialTitle/MaterialTitle.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/MaterialTitle/MaterialTitle.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/MediaCaption/MediaCaption.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   font-family: $secondaryFont;
 }

package/src/MediaCaption/MediaCaption.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/Meta/Meta.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   font-size: 12px;
 

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

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/Meta/Meta.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 import { CallToActions } from '../types'
 export interface MetaContainerProps {

package/src/MetaItem/MetaItem.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: inline;
 

package/src/MetaItem/MetaItem.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/MetaItemLive/MetaItemLive.module.css

@@ -1,6 +1,3 @@
-/* stylelint-disable declaration-empty-line-before */
-@import '../vars.css';
-
 .root {
   position: relative;
 

package/src/MetaItemLive/MetaItemLive.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/Popover/Popover.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: fixed;
   z-index: $zIndex-10;

package/src/Popover/Popover.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/QuoteBlock/QuoteBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
 

package/src/QuoteBlock/QuoteBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/RawHtmlBlock/RawHtmlBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/RawHtmlBlock/RawHtmlBlock.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ImageProps } from '../Image/Image.types'
 import { CallToActions, LightboxContext } from '../types'
 

package/src/RelatedBlock/RelatedBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   margin: 16px 0;
 

package/src/RelatedBlock/RelatedBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/RelatedBook/RelatedBook.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
   z-index: 1;

package/src/RelatedBook/RelatedBook.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 }

package/src/RelatedBook/RelatedBook.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface RelatedBookProps {
   block: any
   styleContext: any

package/src/RelatedRichBlock/RelatedRichBlock.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   position: relative;
   z-index: 10;

package/src/RelatedRichBlock/RelatedRichBlock.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;
 

package/src/RelatedRichBlock/RelatedRichBlock.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface RelatedRichBlockProps {
   block?: any
   styleContext?: any

package/src/RenderBlocks/RenderBlocks.stories.module.css

@@ -1,5 +1,3 @@
-@import '../vars.css';
-
 .root {
   display: block;