@koslibs/components 0.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
 # @koslibs/components
 
+## 1.1.0
+
+### Minor Changes
+
+- [#2](https://github.com/koslibs/components/pull/2) [`b09aeff`](https://github.com/koslibs/components/commit/b09aeffe06d9267aad1f689deb91a19412ff8448) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен публичный Typography из GullEye: Text и Title, типы, CSS Modules,
+  Docs и Playground. Импорт из `@koslibs/components/Typography` подключает
+  только Typography и его стили.
+
+    Исправлены отступы содержимого вкладок Docs и сдвиг страницы при появлении
+    или исчезновении полосы прокрутки.
+
+    Закреплены правила историй компонентов: запись добавляется только для изменённого
+    компонента; общие изменения инфраструктуры и Storybook описываются в истории пакета.
+
+    Добавлена общая тема с `--font-primary: 'Inter', sans-serif` и локальными
+    WOFF2-файлами Inter. Typography и подпись Button подключают её автоматически;
+    приложение может переопределить семейство шрифта через CSS.
+
+## 1.0.0
+
+### Major Changes
+
+- [#1](https://github.com/koslibs/components/pull/1) [`8954b64`](https://github.com/koslibs/components/commit/8954b64becb19165000479731114463317438bcd) Thanks [@holypower777](https://github.com/holypower777)! - Первый стабильный выпуск 1.0.0 с Button и Spinner, перенесёнными из core-components GullEye.
+
+    Компонент доступен через `import { Button } from '@koslibs/components/Button'` вместе с типом ButtonProps. Поддерживает шесть вариантов оформления, размеры 32–72, формы rectangular и rounded, левый и правый аддоны, подпись, полную ширину, disabled и loading. Сохранены ref, стандартные HTML-атрибуты и минимальное время отображения загрузки 500 мс.
+
+    Spinner доступен отдельно через `import { Spinner } from '@koslibs/components/Spinner'` вместе с типом SpinnerProps. Поддерживает размеры 16, 24 и 48, управление видимостью, настройку цвета через style.color, className, id и dataTestId. Button использует этот же публичный Spinner для отображения загрузки.
+
+    CSS Modules подключаются вместе с используемыми компонентами. Добавлены значения по умолчанию для CSS-переменных размеров, скруглений и шрифтов, чтобы компоненты работали без глобальных стилей GullEye. Отдельный импорт Spinner не включает Button и его стили. Для обоих компонентов в Storybook доступны Docs и Playground.
+
+    Docs каждого компонента разделены на вкладки «Документация», «Разработчику» и «Обновления». Во вкладке разработчика доступны публичный импорт, Props и CSS-переменные из исходных стилей; обновления отображают CHANGELOG конкретного компонента.
+
+    Проверка отдельных импортов разделена на общий fixture и декларативные сценарии: JS и типы всех публичных компонентов проверяются автоматически, библиотека собирается один раз, а выбранные production-потребители — одним запуском builder в независимых environments с общей установленной копией пакета и отдельными выходными папками.
+
+## 0.1.0
+
+### Minor Changes
+
+- [`ee39a5b`](https://github.com/koslibs/components/commit/ee39a5bb32f94a3a76e4367ec6b14d9cbe4d41b2) Thanks [@holypower777](https://github.com/holypower777)! - Подготовлен каркас @koslibs/components для React 18/19 и TypeScript: сборка ESM, деклараций и CSS Modules через @koslibs/builder@1.0.0, общие настройки и release-инструменты @koslibs/configs@1.0.0, Storybook и workflow деплоя на GitHub Pages.
+
+    Настроены отдельные импорты вида @koslibs/components/Button. Тест production-сборки проверяет, что в бандл потребителя входят выбранный компонент и его CSS, а независимые соседние компоненты исключаются. Добавлены CI, Changesets и документация по переносу компонентов и ведению их историй изменений. Runtime-компоненты будут перенесены отдельно.
+
 Опубликованных версий пока нет. После первого релиза Changesets добавит сюда историю пакета.

package/README.md

@@ -1,5 +1,35 @@
 Демо: <https://koslibs.github.io/components/>
 
+## Основной шрифт
+
+Библиотека задаёт `--font-primary: 'Inter', sans-serif` в общей теме. Компоненты,
+использующие эту переменную, автоматически подключают тему и локальные WOFF2-файлы
+Inter. Поддерживаются веса 100–900, латиница и кириллица; внешние CDN не используются.
+Браузер загружает нужные языковые поднаборы по `unicode-range`, используется
+`font-display: swap`. Лицензия Inter включена в npm-пакет.
+
+Для использования темы в собственных элементах можно подключить её отдельно:
+
+```tsx
+import '@koslibs/components/theme.css';
+```
+
+Значение по умолчанию находится в CSS-слое `koslibs`, поэтому обычные стили приложения
+переопределяют его независимо от порядка подключения. Например:
+
+```css
+:root {
+    --font-primary: 'My App Font', sans-serif;
+}
+
+.alternate-font {
+    --font-primary: Georgia, serif;
+}
+```
+
+Файлы своего шрифта подключите в приложении. Тема задаёт только переменную и
+`@font-face`; она не изменяет шрифт `body` или элементов, которые её не используют.
+
 ## Добавление компонента
 
 Рекомендуемая структура:
@@ -20,18 +50,18 @@ src/components/Button/
    также добавить реэкспорт в `src/index.ts`; отдельный импорт компонента его не использует.
 3. Общий шаблон в `package.json` → `exports` уже связывает каждый компонент с его файлами:
 
-   ```json
-   {
-       "./*": {
-           "types": "./dist/components/*/index.d.ts",
-           "import": "./dist/components/*/index.js"
-       }
-   }
-   ```
+    ```json
+    {
+        "./*": {
+            "types": "./dist/components/*/index.d.ts",
+            "import": "./dist/components/*/index.js"
+        }
+    }
+    ```
 
 4. Добавьте Docs, Playground и `CHANGELOG.md` по [примеру документации](https://github.com/koslibs/components/blob/main/docs/component-changelogs.md).
-5. Добавьте тесты поведения. Unit-тесты можно запускать через `koslibs-builder lib:test`;
-   в каркасе unit-suite отсутствует, потому что runtime-компонентов пока нет.
+5. Добавьте тесты поведения. `npm run test:unit` запускает unit-тесты через
+   `koslibs-builder lib:test`; `npm test` также проверяет отдельные импорты.
 6. Выполните сборку и проверьте реальные пути JS, деклараций и CSS в `dist`.
 
 После публикации предполагается такой импорт:
@@ -53,10 +83,11 @@ Builder сохраняет отдельные JS-модули и отдельн
 
 Тест `tests/component-imports.test.mjs` запускается через Node.js test runner командой
 `npm test` (или отдельно `npm run test:imports`) и проверяет схему через builder:
-собирает временную библиотеку с Button
-и Spinner, затем приложение с импортом только `@koslibs/components/Button`.
-Проверка подтверждает наличие Button и его CSS и отсутствие Spinner и его CSS
-в production-бандле. Временные компоненты находятся в `.cache` и не публикуются.
+собирает временную библиотеку с настоящим Button и независимым тестовым Spinner,
+затем приложение с импортом только `@koslibs/components/Button`.
+Проверка подтверждает наличие Button, его внутреннего спиннера загрузки и их CSS
+и отсутствие независимого Spinner в production-бандле.
+Временная библиотека находится в `.cache` и не публикуется.
 
 Пакет выпускается в ESM. CSS помечен как side effect, чтобы оптимизация потребителя
 не удаляла стили. Builder сохраняет структуру модулей; Docs, stories и Markdown

package/dist/components/Button/button.d.ts

@@ -0,0 +1,67 @@
+import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';
+type ButtonOwnProps = {
+    /**
+     * Тип кнопки
+     * @default 'primary'
+     */
+    view?: 'primary' | 'secondary' | 'accent' | 'outlined' | 'transparent' | 'text';
+    /**
+     * Скругление кнопки
+     * @default 'rectangular'
+     */
+    shape?: 'rectangular' | 'rounded';
+    /**
+     * Размер кнопки
+     * @default 40
+     */
+    size?: 32 | 40 | 48 | 56 | 64 | 72;
+    /**
+     * Аддон слева от лейбла
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Аддон справа от лейбла
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Подпись под основным текстом
+     */
+    hint?: string;
+    /**
+     * Заставляет кнопку растянуться на ширину контейнера.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Айди для автотестов.
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для label
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для hint
+     */
+    hintClassName?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Текст кнопки
+     */
+    children?: ReactNode;
+};
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & ButtonOwnProps;
+export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonOwnProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button/button.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import react, { forwardRef, useEffect, useRef, useState } from "react";
+import { Spinner } from "../Spinner/index.js";
+import colors_module from "./colors.module.js";
+import index_module from "./index.module.js";
+const Button = /*#__PURE__*/ forwardRef(({ view = 'primary', shape = 'rectangular', size = 40, leftAddon, rightAddon, hint, block = false, loading = false, dataTestId, className, labelClassName, hintClassName, spinnerClassName, children, onClick, ...restProps }, ref)=>{
+    const [loaderTimePassed, setLoaderTimePassed] = useState(true);
+    const timerId = useRef(0);
+    const showLoader = loading || !loaderTimePassed;
+    const showHint = hint && [
+        56,
+        64,
+        72
+    ].includes(size);
+    const { disabled, type = 'button', ...restButtonProps } = restProps;
+    const buttonChildren = /*#__PURE__*/ jsxs(react.Fragment, {
+        children: [
+            leftAddon && /*#__PURE__*/ jsx("span", {
+                className: index_module.addons,
+                children: leftAddon
+            }),
+            children && /*#__PURE__*/ jsxs("span", {
+                className: classnames(index_module.label, labelClassName, {
+                    [index_module.stretchText]: !(leftAddon || rightAddon)
+                }),
+                children: [
+                    children,
+                    showHint && /*#__PURE__*/ jsx("span", {
+                        className: classnames(index_module.hint, colors_module.hint, hintClassName),
+                        children: hint
+                    })
+                ]
+            }),
+            showLoader && /*#__PURE__*/ jsx(Spinner, {
+                size: 24,
+                dataTestId: dataTestId ? `${dataTestId}-loader` : void 0,
+                visible: true,
+                className: classnames(index_module.loader, colors_module.loader, spinnerClassName)
+            }),
+            rightAddon && /*#__PURE__*/ jsx("span", {
+                className: index_module.addons,
+                children: rightAddon
+            })
+        ]
+    });
+    useEffect(()=>{
+        if (loading) {
+            window.clearTimeout(timerId.current);
+            setLoaderTimePassed(false);
+            timerId.current = window.setTimeout(()=>{
+                setLoaderTimePassed(true);
+            }, 500);
+        }
+    }, [
+        loading
+    ]);
+    useEffect(()=>()=>{
+            window.clearTimeout(timerId.current);
+        }, []);
+    const handleClick = (e)=>{
+        if (disabled || showLoader) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        onClick?.(e);
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ...restButtonProps,
+        className: classnames(index_module.component, index_module[view], index_module[`size-${size}`], index_module[shape], colors_module.component, colors_module[view], {
+            [index_module.block]: block,
+            [index_module.loading]: showLoader,
+            [index_module.withRightAddon]: Boolean(rightAddon),
+            [index_module.withLeftAddon]: Boolean(leftAddon),
+            [colors_module.loading]: showLoader
+        }, className),
+        "data-test-id": dataTestId,
+        type: type,
+        disabled: disabled || showLoader,
+        "aria-busy": showLoader,
+        onClick: handleClick,
+        ref: ref,
+        children: buttonChildren
+    });
+});
+Button.displayName = 'Button';
+export { Button };

package/dist/components/Button/colors.module.js

@@ -0,0 +1,14 @@
+import "./colors_module.css";
+const colors_module = {
+    primary: "primary-jF1frT",
+    secondary: "secondary-em6CEW",
+    accent: "accent-cr9M8g",
+    transparent: "transparent-osSlaN",
+    text: "text-fLOhKS",
+    loader: "loader-wrwZSN",
+    hint: "hint-JAXcv5",
+    outlined: "outlined-xzRrKO",
+    component: "component-GmKJmC",
+    loading: "loading-LzTYPE"
+};
+export default colors_module;

package/dist/components/Button/colors_module.css

@@ -0,0 +1,164 @@
+@import "./vars.css";
+
+.primary-jF1frT, .secondary-em6CEW, .accent-cr9M8g, .transparent-osSlaN, .text-fLOhKS {
+  box-shadow: none;
+}
+
+.primary-jF1frT {
+  color: var(--button-inverse-color);
+  background-color: var(--button-primary-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-primary-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-primary-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-inverse-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-inverse-hint-color);
+  }
+}
+
+.secondary-em6CEW {
+  color: var(--button-default-color);
+  background-color: var(--button-secondary-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-secondary-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-secondary-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.accent-cr9M8g {
+  color: var(--button-inverse-color);
+  background-color: var(--button-accent-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-accent-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-accent-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-inverse-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-inverse-hint-color);
+  }
+}
+
+.outlined-xzRrKO {
+  color: var(--button-default-color);
+  box-shadow: inset 0 0 0 1px var(--button-primary-background-color);
+  background: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-subtle-hover-background-color);
+      box-shadow: inset 0 0 0 1px var(--button-primary-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-subtle-active-background-color);
+    box-shadow: inset 0 0 0 1px var(--button-primary-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.transparent-osSlaN {
+  color: var(--button-default-color);
+  background-color: var(--button-transparent-background-color);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--button-subtle-hover-background-color);
+    }
+  }
+
+  &:active {
+    background-color: var(--button-subtle-active-background-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.text-fLOhKS {
+  background-color: var(--button-transparent-background-color);
+  color: var(--button-default-color);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--button-text-hover-color);
+    }
+  }
+
+  &:active {
+    color: var(--button-text-active-color);
+  }
+
+  & > .loader-wrwZSN {
+    color: var(--button-default-color);
+  }
+
+  &:not([disabled]) .hint-JAXcv5 {
+    color: var(--button-hint-color);
+  }
+}
+
+.component-GmKJmC[disabled] {
+  &:not(.loading-LzTYPE) {
+    background-color: var(--button-disabled-background-color);
+    color: var(--button-disabled-color);
+    box-shadow: none;
+
+    &.hint-JAXcv5 {
+      color: var(--button-disabled-hint-color);
+    }
+  }
+
+  &.transparent-osSlaN, &.text-fLOhKS {
+    background-color: var(--button-transparent-background-color);
+    color: var(--button-disabled-color);
+  }
+}
+

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './button.js';
+export type { ButtonProps } from './button.js';

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+export { Button } from "./button.js";

package/dist/components/Button/index.module.js

@@ -0,0 +1,30 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-vxc0gC",
+    "size-32": "size-32-oD8MDp",
+    size32: "size-32-oD8MDp",
+    "size-40": "size-40-Pu2_h6",
+    size40: "size-40-Pu2_h6",
+    "size-48": "size-48-U3XIYx",
+    size48: "size-48-U3XIYx",
+    "size-56": "size-56-P_94sz",
+    size56: "size-56-P_94sz",
+    "size-64": "size-64-ZlQLt3",
+    size64: "size-64-ZlQLt3",
+    "size-72": "size-72-zkSrcs",
+    size72: "size-72-zkSrcs",
+    withRightAddon: "withRightAddon-TNcFTm",
+    text: "text-Ifdq0q",
+    withLeftAddon: "withLeftAddon-N3YDHw",
+    addons: "addons-NxGsiY",
+    block: "block-xREK1A",
+    rectangular: "rectangular-PFbww7",
+    rounded: "rounded-kQqesg",
+    loading: "loading-DPEeSl",
+    label: "label-gwmTIK",
+    stretchText: "stretchText-Nm2RYn",
+    hint: "hint-AFu_zz",
+    loader: "loader-BRksFP",
+    transparent: "transparent-w7vhL3"
+};
+export default index_module;