@velumweb/ui-kit 1.0.0 → 1.0.2

package/src/components/Input/input.scss

@@ -1,69 +0,0 @@
-@import '../../main.scss';
-
-.kit-input--container {
-    display: flex;
-    line-height: 30px;
-    align-items: center;
-    position: relative;
-}
-
-.kit-input {
-    width: 100%;
-    height: 36px;
-    line-height: 30px;
-    padding: 0 .6rem;
-    border: 1px solid var(--primary-btn-color);
-    outline: none;
-    background-color: #efefef;
-    color: var(--text-color);
-    transition: .3s ease;
-    &.kit-input--disabled {
-        opacity: 0.5;
-        pointer-events: none;
-        user-select: none;
-    }
-}
-.kit-input--error {
-    border: 1px solid var(--error-color);
-}
-
-.kit-input--standard {
-    border-radius: var(--corners-standard);
-}
-.kit-input--round {
-    border-radius: var(--corners-round);
-}
-.kit-input--square {
-    border-radius: var(--corners-square);
-}
-
-.kit-input-secondary-text {
-    font-size: 12px;
-    line-height: 24px;
-    margin-left: .8rem;
-}
-
-.kit-input::placeholder, .kit-input-bottomtext {
-    color: var(--text-color-secondary);
-}
-.kit-input-errortext {
-    color: var(--error-color);
-}
-.kit-input--label {
-    color: var(--text-color);
-}
-
-.kit-input:focus, .kit-input:hover {
-    outline: none;
-}
-
-.kit-input--icon-container {
-    position: absolute;
-    right: .4rem;
-    fill: none;
-    display: flex;
-}
-
-.kit-input--icon {
-    padding: 4px;
-}

package/src/components/Modal/Modal.stories.ts

@@ -1,33 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Modal } from './Modal';
-
-const meta = {
-    title: 'Modal',
-    component: Modal,
-    parameters: {
-        layout: 'centered'
-    },
-    tags: ['autodocs'],
-    decorators: [
-        (Story) => {
-            const script = document.createElement('script')
-            script.src = '/style_setter.js'
-            script.type = 'module'
-            document.head.appendChild(script)
-
-            return Story()
-        },
-    ],
-}
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ModalWindow: Story = {
-    args: {
-        width: 400,
-        isOpen: true,
-        children: 'This is modal window! You can close it.'
-    }
-};
-

package/src/components/Modal/Modal.tsx

@@ -1,125 +0,0 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { Box, Button } from "../index";
-import './modal.scss';
-
-/**
- * Компонент модальное окно
- * - размеры
- * - углы
- * - тип непрозрачности фона
- */
-
-
-export interface ModalProps {
-    /** Ширина */
-    width?: number | 'auto';
-
-    /** Углы прямые / Закругленные / Круглые */
-    corners?: 'square' | 'standard' | 'round';
-
-    /** Тип непрозрачности фона */
-    background?: 'blackout' | 'blur';
-
-    /** Содержимое контейнера **/
-    children: ReactNode | string;
-
-    /** Дополнительные классы */
-    cls?: string;
-
-    /** Операции при закрытии */
-    onClose: () => void;
-
-    /** Окно открыто */
-    isOpen?: boolean;
-
-    /** Title */
-    title?: string;             // TODO
-
-    /** Кнопка закрытия в углу */
-    closeButton?: boolean;
-}
-
-/** Элемент модалки */
-export const Modal = ({
-    width = 'auto',
-    corners = 'standard',
-    background = 'blackout',
-    isOpen = false,
-    closeButton = true,
-    title = '',
-    cls = '',
-    children,
-    onClose,
-    ...props
-}: ModalProps) => {
-    const overlayRef = useRef<HTMLDivElement | null>(null);
-    const [showModal, setShowModal] = useState(isOpen);
-
-    function handleClose(): void {
-        setShowModal(false);
-        onClose && onClose();
-    }
-
-    /** только для демонстрации в userbook */
-    useEffect(() => {
-        setShowModal(isOpen);
-    }, [isOpen]);
-
-    useEffect(() => {
-        if (!showModal) return;
-
-        function handleKeyDown(e) {
-            if (e.key === 'Escape') handleClose();
-        }
-
-        // закрытие по Esc
-        document.addEventListener('keydown', handleKeyDown);
-
-        // блокировка скролла фона
-        const original = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-
-        return () => {
-            document.body.style.overflow = original;
-            document.removeEventListener('keydown', handleKeyDown);
-        }
-    }, [showModal, handleClose]);
-
-    return(
-        <>
-            {showModal ? <div
-                className='kit-modal--overlay'
-                onClick={(e) => {
-                    if (e.target === overlayRef.current) handleClose()
-                }}
-                ref={overlayRef}
-            >
-                <div
-                    className={[
-                        'kit-modal',
-                        `kit-modal--${corners}`,
-                        `kit-modal--bg-${background}`,
-                        cls
-                    ].join(' ')}
-                    style={{width: !isNaN(width as number) ? `${width}px` : 'fit-content'}}
-                    {...props}>
-                    <Box padding={[8, 16]} direction='column'>
-                        <Box justify='end' margin={[0, -16]}>
-                            <Button
-                                type='transparent'
-                                size='large'
-                                onClick={handleClose}
-                                iconPath='svg-lib/cross-svgrepo-com.svg'
-                                cls='kit-modal-close'
-                            />
-                        </Box>
-                        <Box justify='start'>
-                            {children}
-                        </Box>
-                        { /** (необязательные) кнопки управления окном */}
-                    </Box>
-                </div>
-            </div> : <></>}
-        </>
-    )
-};

package/src/components/Modal/index.ts

@@ -1 +0,0 @@
-export * from './Modal'

package/src/components/Modal/modal.scss

@@ -1,54 +0,0 @@
-@import '../../main.scss';
-
-.kit-modal--overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.8);
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeInOverlay 0.2s ease-out;
-}
-
-.kit-modal {
-  background-color: var(--bg-color);
-  position: relative;
-  max-width: 420px;           // TODO убрать?
-  width: 100%;                // TODO убрать?
-  min-height: 200px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
-  animation: fadeInModal 0.2s ease-out;
-  & > div {
-    width: auto;
-  }
-}
-
-.kit-modal-close {
-  margin: -4px -16px 0 0;
-}
-
-// border-radius
-.kit-modal--standard {
-  border-radius: var(--corners-standard);
-}
-.kit-modal--round {
-  border-radius: var(--corners-round);
-}
-.kit-modal--square {
-  border-radius: var(--corners-square);
-}
-
-// animations
-@keyframes fadeInOverlay {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fadeInModal {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}

package/src/components/Toggle/Toggle.stories.ts

@@ -1,35 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Toggle } from './Toggle';
-
-const meta = {
-  title: 'Example Toggle',
-  component: Toggle,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => {
-      const script = document.createElement('script')
-      script.src = '/style_setter.js'
-      script.type = 'module'
-      document.head.appendChild(script)
-
-      return Story()
-    },
-  ],
-}
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const CustomToggle: Story = {
-  args: {
-    text: 'subscribe',
-    size: 'medium',
-    disabled: false,
-    cls: '',
-    onClick: () => console.log('CustomToggle')
-  },
-};
-

package/src/components/Toggle/Toggle.tsx

@@ -1,60 +0,0 @@
-import React, { useId } from 'react';
-import './toggle.scss';
-
-/**
- * Компонент переключателя
- */
-
-export interface ToggleProps {
-    /** Маленькая / Средняя / Большая */
-    size?: 'small' | 'medium' | 'large';
-
-    /** Доступность переключателя */
-    disabled?: boolean,
-
-    /** Текст переключателя */
-    text?: string;
-
-    /** Событие при нажатии */
-    onClick?: (e?: MouseEvent) => void;
-
-    /** Дополнительные классы */
-    cls?: string;
-}
-
-/** Элемент кнопки */
-export const Toggle: React.FC<ToggleProps> = ({
-    size = 'medium',
-    disabled = false,
-    cls = '',
-    text = '',
-    onClick,
-    ...props
-}) => {
-    const toggleId = useId();
-
-    return (
-        <label
-            htmlFor={toggleId}
-            className={[
-                'kit-toggle',
-                disabled ? 'kit-toggle--disabled' : '',
-                `kit-toggle--${size}`,
-                cls
-            ].join(' ')}
-        >
-            <input
-                id={toggleId}
-                type="checkbox"
-                className="kit-toggle--input"
-                disabled={disabled}
-                defaultChecked={false}
-                onChange={(e) => onClick?.(e.target.checked)}
-            />
-
-            <span className="kit-toggle--slider" aria-hidden="true" />
-
-            {text && <span className="kit-toggle--label">{text}</span>}
-        </label>
-    );
-};

package/src/components/Toggle/index.ts

@@ -1 +0,0 @@
-export * from "./Toggle";

package/src/components/Toggle/toggle.scss

@@ -1,97 +0,0 @@
-@import '../../main.scss';
-
-.kit-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  user-select: none;
-  font-family: system-ui, sans-serif;
-}
-
-.kit-toggle--input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.kit-toggle--slider {
-  position: relative;
-  border-radius: 999px;
-  transition: background 0.25s ease;
-  background: #d1d5db;
-}
-.kit-toggle--slider::before {
-  content: "";
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  border-radius: 50%;
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  background: white;
-}
-
-.kit-toggle--input:checked + .kit-toggle--slider {
-  background: var(--primary-btn-color);
-}
-.kit-toggle--input:checked + .kit-toggle--slider::before {
-  transform: translateX(20px);
-}
-.kit-toggle--input:focus-visible + .kit-toggle--slider {
-  outline: 2px solid var(--primary-btn-color);
-  outline-offset: 2px;
-}
-
-.kit-toggle--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  user-select: none;
-}
-.kit-toggle--disabled .kit-toggle--slider {
-  background: #9ca3af;
-}
-
-.kit-toggle--label {
-  color: var(--text-color);
-}
-
-.kit-toggle--small {
-  & > .kit-toggle--slider {
-    width: 38px;
-    height: 18px;
-    &::before {
-      width: 12px;
-      height: 12px;
-    }
-  }
-  & > .kit-toggle--label {
-    font-size: 14px;
-  }
-}
-.kit-toggle--medium {
-  & > .kit-toggle--slider {
-    width: 42px;
-    height: 22px;
-    &::before {
-      width: 16px;
-      height: 16px;
-    }
-  }
-  & > .kit-toggle--label {
-    font-size: 16px;
-  }
-}
-.kit-toggle--large {
-  & > .kit-toggle--slider {
-    width: 46px;
-    height: 26px;
-    &::before {
-      width: 20px;
-      height: 20px;
-    }
-  }
-  & > .kit-toggle--label {
-    font-size: 18px;
-  }
-}

package/src/components/index.ts

@@ -1,5 +0,0 @@
-export * from "./Button";
-export * from "./Container";
-export * from "./Modal";
-export * from "./Input";
-export * from "./Toggle";

package/src/main.scss

@@ -1,46 +0,0 @@
-:root {
-  /** текст */
-  --font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --text-color: #2e3242;
-  --text-color-secondary: #94a3b8;
-
-  --error-color: #ef4949;
-
-  /** основной фон */
-  --bg-color: #fff;
-
-  /** кнопки */
-  --primary-btn-color: #7C3AED;
-  --secondary-btn-color: #FFFFFF;
-  --hover-btn-color: #6D28D9;
-
-  /** углы элементов */
-  --corners-standard: 0.65em;
-  --corners-round: 3em;
-  --corners-square: 0;
-}
-
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: var(--font-family);
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-a {
-  //outline: none;
-  //text-decoration: none;
-  //line-height: 15px;
-  //color: rgba(14, 10, 255, 0.6);
-}

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "jsx": "react-jsx",
-    "moduleResolution": "Node",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "declaration": true,
-    "emitDeclarationOnly": true
-  },
-  "include": ["src"]
-}

package/utils/makeColors.ts

@@ -1,37 +0,0 @@
-/**
- * Утилиты для автоматического подбора цветов
- */
-
-
-/** Возвращает hover-цвет
- * baseHex - цвет в формате #ffffff
- * k - процент затемнения, по умолчанию 15%
- * mode: 'dark' - более темный, чем основной
- * mode: 'light' - более светлый, чем основной
- * */
-export function makeHoverColor(baseHex: string, k: number = 0.15, mode: 'dark' | 'light' = 'dark') {
-    const { r, g, b } = hexToRgb(baseHex);
-    const factor = mode === 'dark' ? 1 - k : 1 + k;
-
-    return rgbToHex(
-        r * factor,
-        g * factor,
-        b * factor
-    );
-}
-function hexToRgb(hex) {
-    hex = hex.replace('#', '');
-    if (hex.length === 3) {
-        hex = hex.split('').map(x => x + x).join('');
-    }
-    return {
-        r: parseInt(hex.slice(1, 3), 16),
-        g: parseInt(hex.slice(3, 5), 16),
-        b: parseInt(hex.slice(5, 7), 16)
-    };
-}
-function rgbToHex(r, g, b) {
-    return (
-        '#' + [r, g, b].map(x => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, '0')).join('')
-    );
-}

package/utils/notes.txt

@@ -1,11 +0,0 @@
-TODO
-
-1) Контейнер для мобильных форм и главной кнопки:
- - ширина 100%
- - margin 0 16px
- - дочерние элементы занимают всю ширину
-
-
- 2) Button - добавить tooltip
-
- 3) Button, Toggle добавить loading маску

package/utils/style_setter.js

@@ -1,19 +0,0 @@
-/** Конфиг базовых стилей проекта */
-
-const settings = {
-    /** Основные цвета интерфейса управления */
-    '--primary-btn-color': '#7C3AED',
-    '--secondary-btn-color': '#FFFFFF',
-    '--hover-btn-color': '#6D28D9',
-    '--bg-color': '#fff',
-
-    /** Углы */
-    '--corners-standard': '0.65em',
-    '--corners-round': '3em',
-    '--corners-square': '0',
-}
-
-for(let key in settings) {
-    document.documentElement.style.setProperty(key, settings[key]);
-}
-

package/vite.config.ts

@@ -1,32 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import dts from 'vite-plugin-dts'
-import path from 'path';
-
-export default defineConfig({
-    plugins: [
-        react(),
-        dts({ insertTypesEntry: true })
-    ],
-    server: {
-      port: 9000
-    },
-    build: {
-        lib: {
-            entry: path.resolve(__dirname, 'src/components/index.ts'),
-            name: "velumUIkit",
-            formats: ["es", "umd"],
-            fileName: (format) => `index.${format}.js`,
-        },
-        rollupOptions: {
-            external: ["react", "react-dom"],
-            output: {
-                globals: {
-                    react: 'React',
-                    'react-dom': 'ReactDOM'
-                }
-            }
-        },
-        outDir: 'dist'
-    }
-});