Purple Next UI Kit

Простая UI Kit библиотека на React/Next + SCSS с фиолетовой темой.

Что внутри

• Button
• Input + Textarea
• Checkbox
• Select
• FormField (label + error)
• Card
• Modal
• Toast (ToastProvider, useToast)
• Spinner
• Tabs
• Dropdown
• Navigation

Основной акцент: #8F13F1, текст: белый.

Установка в проект

npm i @pavelkrasovsky101/purple-next-ui-kit

Использование в Next.js

'use client';

import {
    Button,
    Card,
    FormField,
    Input,
    ToastProvider,
    useToast,
} from '@your-scope/purple-next-ui-kit';

function DemoButton() {
    const {showToast} = useToast();
    return <Button onClick={() => showToast('Готово!')}>Показать тост</Button>;
}

export default function Page() {
    return (
        <ToastProvider>
            <Card>
                <FormField label="Email" error="">
                    <Input placeholder="[email protected]" />
                </FormField>
                <DemoButton />
            </Card>
        </ToastProvider>
    );
}

Локальная разработка библиотеки

npm install
npm run dev

Сборка:

npm run build

Визуальный просмотр компонентов (Demo)

Чтобы быстро смотреть, как выглядят компоненты вживую:

npm install
npm run demo

После запуска открой URL из терминала (обычно http://localhost:5173).

Демо лежит в demo/ и использует все текущие компоненты библиотеки.

Публикация в npm (пошагово)

1. Выбери имя пакета в package.json (например @my-scope/purple-next-ui-kit).
2. Залогинься:

   npm login

3. Убедись, что версия корректная (version в package.json).
4. Собери пакет:

   npm run build

5. Опубликуй:

   npm publish --access public

Для scoped-пакетов (@my-scope/...) нужен --access public.

Версионирование

Вариант 1 (быстрый):

npm run version:patch   # 0.1.0 -> 0.1.1
npm run version:minor   # 0.1.0 -> 0.2.0
npm run version:major   # 0.1.0 -> 1.0.0

Вариант 2 (через Changesets):

1. Добавить зависимость:

   npm i -D @changesets/cli

2. Создатьь changeset:

   npx changeset

3. Применить версии:

   npx changeset version

4. Опубликовать:

   npx changeset publish

Важные замечания

• Библиотека ожидает react, react-dom, next как peerDependencies.
• SCSS инкапсулирован через module.scss внутри компонентов.