@meduza/ui-kit-2 0.3.1 → 0.4.1

package/dist/utils/makeStyleContext.d.ts

@@ -1,3 +1,3 @@
-import { ClassNames } from './makeClassName';
-declare const makeStyleContext: (classNames: ClassNames, styleContext: string[] | string, styles: Record<string, string>) => ClassNames;
-export default makeStyleContext;
+import { ClassNames } from './makeClassName';
+declare const makeStyleContext: (classNames: ClassNames, styleContext: string[] | string, styles: Record<string, string>) => ClassNames;
+export default makeStyleContext;

package/dist/utils/pluralize.d.ts

@@ -1,2 +1,2 @@
-declare const pluralize: (number: number, one: string, two: string, five: string) => string;
-export default pluralize;
+declare const pluralize: (number: number, one: string, two: string, five: string) => string;
+export default pluralize;

package/dist/utils/postMessage.d.ts

@@ -1,2 +1,2 @@
-declare const postMessage: (category: string, element: string, action: string) => void;
-export default postMessage;
+declare const postMessage: (category: string, element: string, action: string) => void;
+export default postMessage;

package/dist/utils/viewportSize.d.ts

@@ -1,6 +1,6 @@
-declare type viewportSize = {
-    width: number;
-    height: number;
-};
-declare const _default: () => viewportSize;
-export default _default;
+type viewportSize = {
+    width: number;
+    height: number;
+};
+declare const _default: () => viewportSize;
+export default _default;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.1",
+  "version": "0.4.1",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -13,19 +13,18 @@
     "src"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=16"
   },
   "scripts": {
-    "start": "tsdx watch --tsconfig ./tsconfig.build.json",
-    "build": "tsdx build --tsconfig ./tsconfig.build.json",
+    "start": "dts watch --tsconfig ./tsconfig.build.json",
+    "build": "dts build --tsconfig ./tsconfig.build.json",
     "generate": "plop --plopfile generators/index.js",
-    "test": "tsdx test --passWithNoTests",
-    "test:watch": "tsdx test --watch",
-    "test:coverage": "tsdx test --coverage",
+    "test": "dts test --passWithNoTests",
+    "test:watch": "dts test --watch",
+    "test:coverage": "dts test --coverage",
     "lint": "eslint src",
-    "prepare": "tsdx build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "dayjs": "^1.10.3",
@@ -52,67 +51,68 @@
       "@commitlint/config-conventional"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsc --noEmit && lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@commitlint/cli": "^9.1.1",
-    "@commitlint/config-conventional": "^9.1.1",
-    "@storybook/addon-actions": "^6.1.14",
-    "@storybook/addon-docs": "^6.1.14",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.1.14",
-    "@storybook/addons": "^6.1.14",
-    "@storybook/react": "^6.1.14",
-    "@testing-library/jest-dom": "^5.11.1",
-    "@testing-library/react": "^10.4.7",
-    "@types/jest": "26.0.14",
-    "@types/react": "^16.9.43",
-    "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
-    "babel-loader": "^8.1.0",
-    "dayjs": "^1.10.3",
-    "eslint": "^7.9.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.0",
-    "husky": "^4.2.5",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@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",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "29.5.3",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "babel-loader": "^9.1.3",
+    "dayjs": "^1.11.9",
+    "dts-cli": "^2.0.3",
+    "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",
+    "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.5.3",
-    "lint-staged": "^10.2.11",
-    "plop": "^2.7.1",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-modules": "^3.2.0",
-    "postcss-preset-env": "^6.7.0",
-    "precss": "^4.0.0",
-    "prettier": "^2.1.2",
-    "react": "^16.13.1",
-    "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^16.13.1",
-    "react-intersection-observer": "^8.31.0",
-    "react-is": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "rollup-plugin-postcss": "^3.1.3",
-    "storybook-react-router": "^1.0.8",
-    "stylelint": "^13.6.1",
+    "jest": "^29.6.1",
+    "lint-staged": "^13.2.3",
+    "plop": "^3.1.2",
+    "postcss": "^8.4.26",
+    "postcss-import": "^15.0.1",
+    "postcss-loader": "^7.3.3",
+    "postcss-modules": "^6.0.0",
+    "postcss-nesting": "12.0.0",
+    "postcss-preset-env": "^9.0.0",
+    "postcss-simple-vars": "7.0.1",
+    "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-docgen-typescript-plugin": "^1.0.5",
+    "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.5.2",
+    "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",
+    "stylelint": "^15.10.2",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-sass-guidelines": "^7.0.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^4.1.0",
-    "ts-jest": "26.4.1",
-    "ts-loader": "^8.0.1",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tsdx": "^0.13.2",
-    "tslib": "^2.3.0",
-    "typescript": "^4.0.3",
-    "typescript-plugin-css-modules": "^2.4.0",
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-order": "^6.0.3",
+    "ts-jest": "29.1.1",
+    "ts-loader": "^9.4.4",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
+    "typescript-plugin-css-modules": "^5.0.1",
     "utils": "^0.3.1"
   },
   "dependencies": {}

package/src/BookmarkButton/BookmarkButton.css

@@ -6,12 +6,13 @@
   margin: 0;
   padding: 5px 3px;
 
-  cursor: pointer;
-
   color: inherit;
+
+  background-color: transparent;
   border-width: 0;
   outline: none;
-  background-color: transparent;
+
+  cursor: pointer;
 
   appearance: none;
   fill: transparent;

package/src/BookmarkButton/BookmarkButton.module.css

@@ -8,12 +8,13 @@
   margin: 0;
   padding: 5px 3px;
 
-  cursor: pointer;
-
   color: inherit;
+
+  background-color: transparent;
   border-width: 0;
   outline: none;
-  background-color: transparent;
+
+  cursor: pointer;
 
   appearance: none;
   fill: transparent;

package/src/Button/Button.module.css

@@ -5,19 +5,21 @@
 
   padding: 0;
 
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.15s ease-out;
+  color: #fff;
+
+  font-family: $secondaryFont;
+  line-height: 1;
   text-align: center;
 
-  color: #fff;
   border-width: 0;
   outline: none;
 
-  font-family: $secondaryFont;
-  line-height: 1;
+  cursor: pointer;
+
+  transition: background-color 0.15s ease-out;
 
   appearance: none;
+  user-select: none;
 }
 
 .root::-moz-focus-inner {
@@ -26,9 +28,10 @@
 
 .root[disabled] {
   cursor: default;
-  pointer-events: none;
 
   opacity: 0.5;
+
+  pointer-events: none;
 }
 
 .root > span:first-child {
@@ -61,6 +64,7 @@
 
 .gray {
   color: #000;
+
   background-color: #f0f0f0;
 }
 
@@ -102,6 +106,7 @@
 
 .dark {
   color: #adadad;
+
   background-color: #3a3a3a;
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
 }
@@ -124,6 +129,7 @@
 
 .light {
   color: #000;
+
   background-color: #fff;
 }
 
@@ -145,6 +151,7 @@
 
 .black {
   color: #7e7d7b;
+
   background-color: #000;
 }
 
@@ -189,15 +196,16 @@
   height: 42px;
   padding: 6px 18px;
 
+  font-weight: 600;
+
+  font-size: 12px;
+  line-height: 22px;
+
   letter-spacing: 1px;
   text-transform: uppercase;
 
   border-radius: 8px;
 
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 22px;
-
   @media $landscapeTablet {
     padding: 7px 18px 6px;
 
@@ -212,15 +220,16 @@
 }
 
 .ghost {
-  letter-spacing: inherit;
-  text-transform: none;
 
   color: inherit;
-  background-color: transparent;
+  font-weight: inherit;
+  font-size: inherit;
 
   font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+
+  background-color: transparent;
 }
 
 .isInDropdown {
@@ -235,11 +244,12 @@
 /* LOADING */
 
 .root.isLoading {
-  cursor: default;
-  pointer-events: none;
 
   background-color: transparent;
   box-shadow: none;
+  cursor: default;
+
+  pointer-events: none;
 }
 
 .loader {
@@ -257,6 +267,6 @@
 }
 
 .isFancy.default {
-  font-size: 14px;
   font-weight: 700;
+  font-size: 14px;
 }

package/src/Cover/Cover.module.css

@@ -6,10 +6,10 @@
 
 .body {
   position: absolute;
-  z-index: 1;
   right: 0;
   bottom: 0;
   left: 0;
+  z-index: 1;
 
   display: flex;
   flex-flow: column nowrap;
@@ -24,25 +24,25 @@
 }
 
 .rich {
-  overflow: hidden;
 
   margin: 0 -20px;
+  overflow: hidden;
 
   border-radius: 9px 9px 0 0;
 }
 
 .rich::after {
   position: absolute;
-  z-index: 1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-
-  content: '';
+  z-index: 1;
 
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px 10px 0 0;
+
+  content: '';
 }
 
 .dark .body {
@@ -56,9 +56,9 @@
 
 .control {
   position: absolute;
-  z-index: 10;
   right: 49px;
   bottom: 12px;
+  z-index: 10;
 
   width: 28px;
   height: 28px;
@@ -66,19 +66,21 @@
   padding: 0;
 
   color: #fff;
-  border-width: 0;
-  border-radius: 14px;
-  outline: none;
+
   background-color: rgba(0, 0, 0, 0.7);
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill='%23FEFEFE' fill-rule='evenodd' opacity='.7'%3E %3Cpath d='M12.726 16H3.275A3.276 3.276 0 0 1 0 12.725v-9.45A3.276 3.276 0 0 1 3.275 0h9.45A3.275 3.275 0 0 1 16 3.275v9.45A3.275 3.275 0 0 1 12.726 16zm0-2c.703 0 1.274-.571 1.274-1.275v-9.45C14 2.571 13.429 2 12.726 2H3.275C2.57 2 2 2.571 2 3.275v9.45C2 13.429 2.57 14 3.275 14h9.45z' fill-rule='nonzero'/%3E %3Cpath d='M4.97 8.307l7.046 7.046a.5.5 0 0 0 .708-.707l-7.4-7.4a.5.5 0 0 0-.708 0l-3.97 3.97a.5.5 0 0 0 .708.707L4.97 8.307z' fill-rule='nonzero'/%3E %3Cpath d='M10.875 5.832l3.771 3.771a.5.5 0 0 0 .707-.707l-4.125-4.125a.5.5 0 0 0-.707 0l-4.19 4.19a.5.5 0 1 0 .707.707l3.837-3.836z' fill-rule='nonzero'/%3E %3Cpath d='M5.865 4.269a.894.894 0 1 1-1.787 0 .894.894 0 0 1 1.787 0'/%3E %3C/g%3E %3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
+  border-width: 0;
+  border-radius: 14px;
+  outline: none;
   box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15);
 }
 
 .isInDynamicBlock {
-  border-radius: 8px;
   overflow: hidden;
+
+  border-radius: 8px;
 }
 
 .isInDynamicBlock .body {
@@ -87,16 +89,16 @@
 
 .isInDynamicBlock::after {
   position: absolute;
-  z-index: 1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-
-  content: '';
+  z-index: 1;
 
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 8px;
+
+  content: '';
 }
 
 /* VISIBILITY */

package/src/EmbedBlock/EmbedBlock.types.ts

@@ -9,4 +9,5 @@ export interface EmbedBlockProps {
   block: any
   styleContext?: string[] | string
   lang?: 'ru' | 'en'
+  children?: React.ReactNode
 }

package/src/Toolbar/Toolbar.module.css

@@ -3,9 +3,9 @@
 .root {
   overflow: hidden;
 
-  transform: translateZ(0);
-
   font-family: $secondaryFont;
+
+  transform: translateZ(0);
 }
 
 .root::before {
@@ -15,9 +15,9 @@
   height: 1px;
   margin-bottom: 9px;
 
-  content: '';
-
   background: #000;
+
+  content: '';
 }
 
 .list {
@@ -37,12 +37,12 @@
   padding-right: 17px;
   padding-left: 17px;
 
-  transition: color 250ms ease;
-  text-align: center;
-
   color: #000;
 
   line-height: 1;
+  text-align: center;
+
+  transition: color 250ms ease;
 }
 
 .item:last-child {
@@ -57,11 +57,12 @@
   width: 2px;
   height: 2px;
 
-  content: '';
-  transform: translateY(-50%) translateY(1px);
+  background-color: #000;
 
   border-radius: 1px;
-  background-color: #000;
+  transform: translateY(-50%) translateY(1px);
+
+  content: '';
 }
 
 .item:empty {
@@ -87,10 +88,10 @@
   margin-top: 11px;
 
   @media $mobile {
-    margin-right: auto;
-    margin-left: auto;
     max-width: 460px;
     margin-top: 18px;
+    margin-right: auto;
+    margin-left: auto;
   }
 }
 

package/src/Toolbar/Toolbar.stories.tsx

@@ -64,9 +64,7 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
                 isActive={button.type === 'bookmark' && bookmark}
                 lang="ru"
                 icon={button.icon}
-              >
-                {button.label && button.label}
-              </ToolbarButton>
+              />
             </ToolbarItem>
           ))}
         </Toolbar>

package/src/ToolbarButton/ToolbarButton.module.css

@@ -7,19 +7,20 @@
   margin: 0;
   padding: 0 1px 0 0;
 
-  cursor: pointer;
-
   color: #000;
-  border-width: 0;
-  outline: none;
-  background-color: transparent;
+  font-weight: normal;
+  font-size: 16px;
 
   font-family: $secondaryFont;
-  font-weight: normal;
   line-height: 1;
 
+  background-color: transparent;
+  border-width: 0;
+  outline: none;
+
+  cursor: pointer;
+
   appearance: none;
-  font-size: 16px;
 }
 
 .root::after {

package/src/ToolbarButton/ToolbarButton.stories.tsx

@@ -21,9 +21,7 @@ const Example: React.FC<{ theme?: string }> = ({ theme }) => {
           theme={theme}
           onClick={(): void => alert('Hello Button')}
           lang="ru"
-        >
-          42
-        </ToolbarButton>
+        />
       </div>
     </>
   )

package/src/ToolbarButton/ToolbarButton.test.tsx

@@ -14,9 +14,7 @@ describe('Toolbar Button', () => {
         lang="ru"
         type="fb"
         onClick={(): void => alert('Hello Button')}
-      >
-        42
-      </ToolbarButton>
+      />
     )
 
   it('should have root style', () => {

package/src/Tooltip/Tooltip.module.css

@@ -7,9 +7,10 @@
   padding: 20px;
 
   color: #fff;
+
+  background: #4761e0;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 16px;
-  background: #4761e0;
   box-shadow: 0 37px 37px rgba(0, 0, 0, 0.09), 0 9px 20px rgba(0, 0, 0, 0.1);
 }
 
@@ -19,20 +20,22 @@
   width: 16px;
   height: 8px;
 
-  content: '';
-
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='8' viewBox='0 0 16 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8 0 8 8H0l8-8Z' fill='%234057CA'/%3E%3Cpath d='M8 1s3.89 3.876 7 7H1l7-7Z' fill='%234761E0'/%3E%3C/svg%3E");
+
+  content: '';
 }
 
 .isCenterBottom::after {
   bottom: 0;
   left: 50%;
+
   transform: translate(-50%, 100%) rotate(180deg);
 }
 
 .isLeftBottom::after {
   bottom: 0;
   left: 0;
+
   transform: translate(200%, 100%) rotate(180deg);
 }
 
@@ -46,20 +49,22 @@
 .isLeftTop::after {
   top: 0;
   left: 0;
+
   transform: translate(200%, -100%);
 }
 
 .body {
-  font-family: $secondaryFont;
   font-size: 16px;
+  font-family: $secondaryFont;
   line-height: 22px;
 }
 
 .body h3 {
   margin: 0 0 6px;
 
-  font-size: inherit;
   font-weight: 700;
+
+  font-size: inherit;
   line-height: inherit;
 }
 
@@ -74,12 +79,14 @@
 .body a {
   color: inherit;
   text-decoration: none;
+
   box-shadow: inset 0 -1px;
 }
 
 .body a:hover {
-  opacity: 0.75;
   color: inherit;
+
+  opacity: 0.75;
 }
 
 .footer {