feat!: Big v3 changes

.eslintrc.js

@@ -1,8 +1,25 @@
 module.exports = {
-    extends: ['@gravity-ui/eslint-config'],
+    extends: ['@gravity-ui/eslint-config', '@gravity-ui/eslint-config/prettier'],
     root: true,
     rules: {
         'no-param-reassign': 'off',
+        'import/order': [
+            'error',
+            {
+                alphabetize: {
+                    order: 'asc',
+                },
+                'newlines-between': 'always',
+                groups: [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index'],
+                warnOnUnassignedImports: true,
+                pathGroups: [
+                    {
+                        pattern: '*.s?css$',
+                        group: 'index',
+                    },
+                ],
+            },
+        ],
     },
     overrides: [
         {

V3.md

@@ -0,0 +1,167 @@
+## Breaking
+
+- Update to `@gravity-ui/uilit@5`
+- Remove peer dependency on `@doc-tools/transform` <br>
+  `@doc-tools/transform` js and css bundles should be attached directly to final projects
+- `DISLIKE_VARIANTS` not exported from package. Use `i18n['feedback-variants']` instead.
+- Prop `lang` war removed from component. Now you should use `configure` helper
+
+  ```js
+  import {configure} from '@doc-tools/components';
+
+  configure({
+    lang: 'ru',
+  });
+  ```
+
+### BookmarkButton
+
+- `bookmarkedPage` prop was changed to `isBookmarked`. (Same as `isLiked`, `isDislaked` in Feedback component)
+- `onChangeBookmarkPage` renamed to `onBookmark`
+
+### Contributors
+
+- Removed `lang` prop
+
+### Control
+
+- Replace `setRef` prop with `ref` (using forwardRef now)
+
+### Controls
+
+- Removed `lang` prop
+- Removed `isVerticalView`, `controlSize`, `popupPosition` prop. Configure it with `ControlsLayout` wrapper component
+  ```jsx
+  <ControlsLayout isVerticalView={isVerticalView} controlSize={controlSize}>
+    <Controls />
+  </ControlsLayout>
+  ```
+- Prop `showEditControl` replaced by `hideEditControl`
+
+### DividerControl
+
+- Removed `size`, `isVerticalView` props
+- Value for `size`, `isVerticalView` now stored in `ControlsLayoutContext`
+
+### FullScreenControl
+
+- Removed `lang` prop
+- Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Value for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
+- Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
+- Icon replaced with equal from `@gravity-ui/uikit`
+
+### LangControl
+
+- Prop `onChangeLang` is required now
+- Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Value for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
+- Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
+- Icon replaced with equal from `@gravity-ui/uikit`
+
+### PdfControl
+
+- Prop `pdfLink` is required now
+- Removed `lang` prop
+- Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Value for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
+- Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
+
+### SettingsControl
+
+- Removed `lang` prop
+- Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Value for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
+- Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
+
+### SinglePageControl
+
+- Prop `onChange` is required now
+- Removed `lang` prop
+- Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Value for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
+- Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
+- Icons replaced with equal from `@gravity-ui/uikit`
+
+### DocLayout
+
+- Removed `lang` prop
+-
+
+### DocLeadingPage
+
+- Removed `lang` prop
+
+### DocPageTitle
+
+- Ownership on bookmarks was removed.
+  Bookmarks should be passed as children.
+- Removed `bookmarkedPage`, `onChangeBookmarkPage` props.
+
+### EditButton
+
+- Was removed in favor of EditControl
+
+### ErrorPage
+
+- Removed `lang` prop
+
+### Feedback
+
+- Removed `lang` prop
+- Removed `singlePage` prop
+- Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Removed `dislikeVariants` prop. Variants should be configured via `configure` util
+  ```js
+  configure({
+    loc: {
+      en: {
+        'feedback-variants': {
+          variant1: 'test1',
+        },
+      },
+      ru: {
+        'feedback-variants': {
+          variant1: 'текс1',
+        },
+      },
+    },
+  });
+  ```
+- Value for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
+- Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
+- Icons replaced with equal from `@gravity-ui/uikit`
+
+### MiniToc
+
+- Removed `lang` prop
+- MiniToc returns `null` on empty headings. (Previously it render useless title)
+
+### SearchBar
+
+- Removed `lang` prop
+- Icons replaced with equal from `@gravity-ui/uikit`
+
+### SearchItem
+
+- Removed `lang` prop
+
+### SearchPage
+
+- Removed `lang` prop
+
+### Subscribe
+
+- Prop `onSubscribe` is required now
+- Removed `lang` prop
+- Removed `size`, `isVerticalView`, `className`, `popupPosition` props
+- Value for `size`, `isVerticalView`, `popupPosition` now stored in `ControlsLayoutContext`
+- Value for `className` now stored in `ControlsLayoutContext.controlClassName` prop
+
+### Toc
+
+- Removed `lang` prop
+
+### TocNavPanel
+
+- Removed `lang` prop

package.json

@@ -32,7 +32,11 @@
       }
     },
     "./assets/icons/*.svg": "./assets/icons/*.svg",
-    "./styles": "./build/index.css"
+    "./styles": "./build/index.css",
+    "./themes/*": {
+      "style": "./build/themes/*/index.css",
+      "default": "./build/themes/*/index.css"
+    }
   },
   "sideEffects": [
     "*.css",
@@ -45,8 +49,8 @@
     "deps:truncate": "npm prune --production",
     "lint": "run-p _lint:js _lint:styles _lint:prettier",
     "lint:fix": "run-s _lint:js:fix _lint:styles:fix _lint:prettier:fix",
-    "_lint:js": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "_lint:js:fix": "npm run _lint:js -- --quiet --fix",
+    "_lint:js": "eslint '**/*.{js,jsx,ts,tsx}'",
+    "_lint:js:fix": "npm run _lint:js -- --fix",
     "_lint:prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx}'",
     "_lint:prettier:fix": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
     "_lint:styles": "stylelint src/**/*.scss",
@@ -61,7 +65,7 @@
     "_build:declarations:cjs": "tsc --emitDeclarationOnly -p tsconfig.cjs.json",
     "build": "run-s build:clean build:compile _build:declarations:*",
     "_build:watch": "./esbuild/build.js --watch",
-    "_storybook:watch": "cd demo && start-storybook -p 7008",
+    "_storybook:watch": "cd demo && npm run storybook",
     "prepublishOnly": "npm run lint && npm run test && npm run build",
     "prepare": "husky install",
     "pre-commit": "lint-staged"
@@ -78,7 +82,8 @@
     "react-hotkeys-hook": "^3.3.1",
     "react-i18next": "11.15.6",
     "react-popper": "^2.2.5",
-    "scroll-into-view-if-needed": "2.2.29"
+    "scroll-into-view-if-needed": "2.2.29",
+    "url": "^0.11.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0 || >=17.0.0 || >=18.0.0",
@@ -106,20 +111,22 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "sass": "^1.66.1",
     "stylelint": "^15.10.3",
     "svgo": "2.8.0",
     "typescript": "^5.2.2"
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
-      "eslint --max-warnings=0 --fix -c eslint.publish.json",
+    "**/*.{js,jsx,ts,tsx}": [
+      "eslint --max-warnings=0 --fix -c .eslintrc.publish.js",
       "prettier --write"
     ],
-    "src/**/*.{css,scss}": [
+    "**/*.{css,scss}": [
       "stylelint --fix",
       "prettier --write"
     ],
-    "src/**/*.{json,yaml,yml,md}": [
+    "**/*.{json,yaml,yml,md}": [
       "prettier --write"
     ],
     "*.svg": [

src/components/BookmarkButton/BookmarkButton.tsx

@@ -1,35 +1,30 @@
-import React from 'react';
-
-import {Button, Icon} from '@gravity-ui/uikit';
-import block from 'bem-cn-lite';
-
 import StarActive from '@gravity-ui/icons/svgs/star-fill.svg';
 import StarInactive from '@gravity-ui/icons/svgs/star.svg';
+import {Button, Icon} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import React from 'react';
 
 import './BookmarkButton.scss';
 
 const b = block('dc-bookmark-button');
 
 export interface BookmarkButtonProps {
     className?: string;
-    bookmarkedPage: boolean;
-    onChangeBookmarkPage: (value: boolean) => void;
+    isBookmarked: boolean;
+    onBookmark: (value: boolean) => void;
 }
 
-export const BookmarkButton: React.FC<BookmarkButtonProps> = ({
-    bookmarkedPage,
-    onChangeBookmarkPage,
-}) => {
+export const BookmarkButton: React.FC<BookmarkButtonProps> = ({isBookmarked, onBookmark}) => {
     return (
         <Button
-            className={b({active: bookmarkedPage})}
+            className={b({active: isBookmarked})}
             onClick={() => {
-                onChangeBookmarkPage(!bookmarkedPage);
+                onBookmark(!isBookmarked);
             }}
             view="flat-secondary"
         >
             <Button.Icon className={b('icon')}>
-                <Icon data={bookmarkedPage ? StarActive : StarInactive} size={24} />
+                <Icon data={isBookmarked ? StarActive : StarInactive} size={24} />
             </Button.Icon>
         </Button>
     );

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-
 import block from 'bem-cn-lite';
+import React from 'react';
 
 import {BreadcrumbItem} from '../../models';
 
@@ -12,6 +11,7 @@ export interface BreadcrumbsProps {
     items: BreadcrumbItem[];
     className?: string;
 }
+
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({items, className}) => {
     if (!items || !items.length) {
         return null;

src/components/Contributors/Contributors.tsx

@@ -1,35 +1,24 @@
-import React, {useEffect} from 'react';
 import block from 'bem-cn-lite';
-import {useTranslation} from 'react-i18next';
+import React from 'react';
 
+import {useTranslation} from '../../hooks';
+import {Contributor} from '../../models';
 import {ContributorAvatars} from '../ContributorAvatars';
-import {Lang, Contributor} from '../../models';
 
 import './Contributors.scss';
 
 const b = block('contributors');
 
 export interface ContributorsProps {
-    lang: Lang;
     users: Contributor[];
     onlyAuthor?: boolean;
     isAuthor?: boolean;
     translationName?: string;
 }
 
 const Contributors: React.FC<ContributorsProps> = (props) => {
-    const {
-        users,
-        lang,
-        onlyAuthor = false,
-        isAuthor = false,
-        translationName = 'contributors',
-    } = props;
-    const {t, i18n} = useTranslation(translationName);
-
-    useEffect(() => {
-        i18n.changeLanguage(lang);
-    }, [i18n, lang]);
+    const {users, onlyAuthor = false, isAuthor = false, translationName = 'contributors'} = props;
+    const {t} = useTranslation(translationName);
 
     return (
         <div className={b()}>