v1.0.0: разделение styled-components в отдельную библиотеку

CHANGELOG.md

@@ -1,37 +1,3 @@
-# v4.0.0
-- [+] новые миксины: `mvk`, `odr`, `scaleWidthHeight`, `aspectRatio`, `fixSafariRadiusOverflow`, `customScrollbar`, `ifFlexGapNotSupported`, `flexGap`
-- [+] новые функции: `px-to-rem`, `round`, `fluid`, `safe-top-value`, `safe-bottom-value`
-- [*] в миксинах `backgroundImageCover`, `backgroundImageContain` параметр `image` стал необязательным
-- [*] миксин `centerPos` теперь принимает в качестве параметра объект с настройками: выбор оси - `axis`, дополнительные значения transform - `properties` и возможность использовать transform3d вместо transform - `is-3d`
-- [*] утилита markup переписана на классах, появилась возможность обращаться к `currentHtmlFontSize`
-- [-] из зависимостей убрана библиотека @ktsstudio/mediaproject-utils
-
-# v3.0.0
-- [-] удалены миксины и утилиты, использующие переменные vkui
-
-### v2.0.3
-- [+] сборка на rollup
-- [*] getNumberProperty ([issue](https://github.com/ktsstudio/mediaproject-style/issues/5))
-
-### v2.0.2
-- [*] экранированы переменные в миксинах
-- [*] добавлена инструкция для работы с SSR
-
-### v2.0.1
-- [*] markup defaultMobileSize изменен на размер iphone x
-- [*] опечатка в миксине centerPosY (closing issue #4)
-
-# v2.0.0
-- [+] appearAnimation
-- [+] утилиты для работы с отступами и хедером в ВК-миниаппе
-- [*] исправлены миксины с использованием глобальных классов
-- [*] fadeAnimation принимает длительность анимации и параметр наличия анимации пульсации
-
 # v1.0.0
-- [+] checkIOS
-- [+] checkMobile
-- [+] markup
 - [+] mixins
-- [+] fade animations
-- [+] useAndroidKeyboard
-- [+] useOrientationChange
+- [+] animations

README.md

@@ -1,86 +1,32 @@
 ![kts](./logo.png)
 
-# @ktsstudio/mediaproject-style
+# @ktsstudio/mediaproject-styled-components
 
-Пакет с общими стилями для медиапроектов.
+Пакет с общими миксинами и анимациями на styled-components для медиапроектов.
 
 ## Использование
 
-`npm install @ktsstudio/mediaproject-style`
+`npm install @ktsstudio/mediaproject-styled-components`
 
-`yarn add @ktsstudio/mediaproject-style`
+`yarn add @ktsstudio/mediaproject-styled-components`
 
 ## Содержимое
 
-### Утилиты
-
-* [markup](./src/markup) — утилита для адаптивной верстки на rem
-
-Чтобы использовать адаптивную верстку на rem, необходимо при инициализации приложения вызвать функцию initMarkup и передать в нее нужные параметры:
-
-```typescript
-import { initMarkup } from '@ktsstudio/mediaproject-style';
-
-...
-
-initMarkup();
-```
-
-Утилита создает объект типа Markup и экспортирует его в виде переменной markup. При необходимости к ней можно обратиться:
-
-```typescript
-import { markup } from '@ktsstudio/mediaproject-style';
-
-...
-
-console.log(markup.currentHtmlFontSize);
-```
-
 ### Миксины и анимации
 
-* [mixins.ts](./src/mixins.ts) — миксины для styled-components
-* [animations.ts](./src/animations.ts) — анимации для styled-components
-* [mixins.scss](./src/mixins.scss) — миксины для Sass
-* [animations.scss](./src/animations.scss) — анимации для Sass
+* [mixins.ts](./src/mixins.ts) — миксины
+* [animations.ts](./src/animations.ts) — анимации
 
 Чтобы использовать миксин или анимацию в проекте с styled-components, импортируйте нужный объект из библиотеки:
 
 ```typescript
-import { mixins } from '@ktsstudio/mediaproject-style';
+import { mixins } from '@ktsstudio/mediaproject-styled-components';
 
 ...
 
 ${mixins.centerPos()};
 ```
 
-Чтобы использовать миксин или анимацию в проекте с Sass, импортируйте файл с ними:
-
-```scss
-@import '~@ktsstudio/mediaproject-style/dist/mixins';
-
-...
-
-@include centerPos;
-```
-
-### Использование с SSR на примере Next.js
-
-Для корректной работы утилиты markup с Next.js необходимо вызывать функцию инициализации в useEffect.
-
-Пример:
-
-```typescript
-import { initMarkup } from '@ktsstudio/mediaproject-style';
-
-...
-
-React.useEffect(() => {
-  initMarkup();
-}, []);
-```
-
-Импорт миксинов и анимаций в SSR не меняется.
-
 ## Обратная связь
 
-Любой фидбэк вы можете передать нам на почту [[email protected]](mailto:[email protected]) в письме с темой "mediaproject-style"
+Любой фидбэк вы можете передать нам на почту [[email protected]](mailto:[email protected]) в письме с темой "mediaproject-styled-components"

package.json

@@ -1,17 +1,17 @@
 {
-  "name": "@ktsstudio/mediaproject-style",
-  "version": "4.0.0",
-  "description": "Package with common styles for media projects",
+  "name": "@ktsstudio/mediaproject-styled-components",
+  "version": "1.0.0",
+  "description": "Package with common mixins and animation for styled-components",
   "author": "KTS Studio <[email protected]> (https://kts.studio)",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ktsstudio/mediaproject-style.git"
+    "url": "https://github.com/ktsstudio/mediaproject-styled-components.git"
   },
   "bugs": {
     "email": "[email protected]",
-    "url": "https://github.com/ktsstudio/mediaproject-style/issues"
+    "url": "https://github.com/ktsstudio/mediaproject-styled-components/issues"
   },
-  "homepage": "https://github.com/ktsstudio/mediaproject-style#readme",
+  "homepage": "https://github.com/ktsstudio/mediaproject-styled-components#readme",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
   "browser": "./dist/es/index.js",

src/index.ts

@@ -1,5 +1,4 @@
 import { fadeAnimation, appearAnimation } from './animations';
-import { markup, initMarkup, Markup } from './markup';
 import {
   mobile,
   desktop,
@@ -28,7 +27,6 @@ import {
   adaptiveSidePadding,
   adaptiveContentWidth,
 } from './mixins';
-import { WindowSize, MarkupConfig } from './types/markup';
 
 const mixins = {
   mobile,
@@ -64,6 +62,4 @@ const animations = {
   appearAnimation,
 };
 
-export { markup, initMarkup, Markup, mixins, animations };
-
-export { WindowSize, MarkupConfig };
+export { mixins, animations };