ostrovok-components
v0.0.48
Published
Островковые и рейтхочные компоненты. Storybook https://ostrovok-frontend.s3.amazonaws.com/mrktg/components/index.html
Readme
Promo components
Островковые и рейтхочные компоненты. Storybook https://ostrovok-frontend.s3.amazonaws.com/mrktg/components/index.html
Содержание
Подключение компонентов
Компоненты Ostrovok (components/*)
Для компонентов Ostrovok необходимо подключить провайдер темы и импортировать CSS файлы.
Пример использования в Astro
Layout.astro:
---
import { ThemeProvider } from "ostrovok-components/themes";
import ostrovokTheme from "ostrovok-components/themes/ostrovok";
import "ostrovok-components/index.css"; // Импорт всех стилей
---
<html lang="en">
<ThemeProvider theme={ostrovokTheme}>
...
</ThemeProvider>
</html>Header.astro:
---
import "ostrovok-components/components/Header/index.css";
import Header from "ostrovok-components/components/Header";
---
<Header
client:load
rightButton={{ text: "Кнопка" }}
menu={[
{ title: "Пункт 1" },
{
title: "Пункт 2",
onClick: () => {
alert('test');
},
},
]}
/>ThemeProvider подключает шрифты и набор CSS-переменных из переданной темы.
Компоненты RateHawk (rh-components/*)
Для компонентов RateHawk провайдер не принимает проп с темой и автоматически подключает нужные шрифты (Aeonik и ABCGravity).
Пример использования в Astro
Layout.astro:
---
import { ThemeProvider } from "ostrovok-components/themes/ratehawk";
import "ostrovok-components/index.css"; // Импорт всех стилей, опционально
---
<html lang="en">
<ThemeProvider>
...
</ThemeProvider>
</html>Header.astro:
---
// Можно импортировать не все стили, а только нужные
import "ostrovok-components/rh-components/Header/index.css";
import Header from "ostrovok-components/rh-components/Header";
---
<Header
client:load
menu={[
{ title: "Пункт 1" },
{
title: "Пункт 2",
onClick: () => {
alert('test');
},
},
]}
/>ThemeProvider автоматически подключает шрифты Aeonik и ABCGravity. Можно убрать отдельные font-face из проекта.
Импорт стилей
Вариант 1: Импорт всех стилей
import "ostrovok-components/index.css";Вариант 2: Импорт стилей отдельных компонентов
import "ostrovok-components/components/Button/index.css";
import "ostrovok-components/rh-components/Header/index.css";Важно для SSR: Импорт CSS файлов необходим для избежания CLS (Cumulative Layout Shift) при серверном рендеринге.
CSS будет включен в <head> при SSR, и стили применятся мгновенно.
Оптимизация: Не беспокойтесь о дублирующихся импортах! Astro (Vite) автоматически дедуплицирует CSS — если вы
импортируете один и тот же файл стилей в нескольких компонентах, он будет включен в финальную сборку только один раз.
Поэтому безопасно импортировать стили компонента в каждом .astro файле, где он используется.
Fluid mode
Fluid mode привязывает размер компонентов к ширине окна браузера, что улучшает адаптивность интерфейса.
Чтобы включить fluid mode, передайте проп fluidMode в провайдер темы. Также можно передать аналогичный проп в каждый
из компонентов, чтобы переопределить глобальную настройку. Оценить работу fluid mode можно в Storybook, тумблер
находится рядом с верхним меню.
Публикация пакета
Auth token лежит в bitwarden. Для получения доступов необходимо письмо в it@ с руководителем в копии. Для установки токена нужно создать файл .npmrc в корне проекта с содержимым:
//registry.npmjs.org/:_authToken=<auth token>соответственно заменить на токен из bitwarden.
Затем выполнить команду:
npm run publish:patch