@velumweb/ui-kit 1.0.0

package/src/components/Input/Input.tsx

@@ -0,0 +1,172 @@
+import React, {useState, useId} from 'react';
+import { Button } from "../Button";
+import './input.scss';
+
+/**
+ * Компонент поля для ввода текста
+ * - тип (текст, цифры, пароль)
+ * - это поисковая строка (значок лупы)
+ * - валидация
+ */
+
+export interface InputProps {
+    /** Значение */
+    value?: string | number; 
+
+    /** Текстовое поле \ цифровое \ пароль \ textarea */
+    type?: 'text' | 'number' | 'password' | 'email' | 'date' | 'tel' | 'time' | 'textarea';
+
+    /** Углы прямые / Закругленные / Круглые */
+    corners?: 'square' | 'standard' | 'round';
+
+    /** Доступность поля */
+    disabled?: boolean,
+
+    /** Текст над полем */
+    label?: string;
+
+    /** Текст под полем */
+    bottomText?: string;
+
+    /** Плейсхолдер */
+    placeholder?: string;
+
+    /** Живой поиск */
+    live?: boolean;
+
+    /** Событие при изменении */
+    onChange?: (value?: string | number) => void;
+
+    /** Это поиск */
+    isSearch?: boolean;
+
+    /** Валидация */
+    mask?: RegExp;
+
+    /** Ошибки валидации */
+    errorText: string;
+
+    /** Ширина в px */
+    width?: number;
+
+    /** Дополнительные классы */
+    cls?: string;
+}
+
+/** Элемент кнопки */
+export const Input = ({
+    value='',
+    type='text',
+    corners='standard',
+    disabled=false,
+    label='',
+    bottomText='',
+    placeholder='',
+    errorText='',
+    live=false,
+    isSearch=false,
+    mask,
+    width,
+    onChange,
+    cls,
+    ...props
+}: InputProps) => {
+    const [internalValue, setInternalValue] = useState<string | number>(value);
+    const [error, setError] = useState<string>('');
+    const inputId = useId();
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        let val: string | number = e.target.value;
+
+        if (type === 'number') {
+            val = val.toString().replace(/\D/g, '');
+        }
+
+        if (mask && !mask.test(val.toString())) {
+            setError(errorText || 'Некорректное значение'); // TODO нормальные текстовки
+        } else {
+            setError('');
+        }
+
+        setInternalValue(val);
+
+        if (live && onChange) {
+            onChange(val);
+        }
+    };
+
+    const clearInput = () => {
+        setInternalValue('');
+    }
+
+    const handleBlur = (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (!live && onChange) {
+            onChange(internalValue);
+        }
+    };
+
+    const inputProps = {
+        value: internalValue,
+        placeholder,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        className: [
+            'kit-input',
+            `kit-input--${corners}`,
+            disabled ? 'kit-input--disabled' : '',
+            error ? 'kit-input--error' : '',
+            cls
+        ].join(' ').trim()
+    };
+
+    return (
+        <div className="kit-input--wrapper">
+            { label && <div className='w5rem'>
+                <label
+                    for={ inputId }
+                    className="kit-input--label kit-input-secondary-text"
+                >
+                    { label }
+                </label>
+            </div> }
+            <div
+                className="kit-input--container"
+                style={{ 'width': width ? `${width}px` : 'auto' }}
+            >
+                { type === 'textarea' ? (
+                    <textarea
+                        id={ inputId }
+                        { ...inputProps }
+                    />
+                ) : (
+                    <input
+                        { ...inputProps }
+                        type={ type }
+                        id={ inputId }
+                    />
+                )}
+
+                <div className='kit-input--icon-container'>
+                    { internalValue && <Button
+                        type='transparent'
+                        iconPath='svg-lib/input-svgrepo-com.svg'
+                        size='small'
+                        onClick={clearInput}
+                        cls='kit-input--icon'
+                    /> }
+                    { isSearch && <Button
+                        type='transparent'
+                        iconPath='svg-lib/search-svgrepo-com.svg'
+                        size='small'
+                        staticIcon={live}
+                        onClick={() => onChange && onChange(internalValue)}
+                        cls='kit-input--icon'
+                    /> }
+                </div>
+            </div>
+
+            { !error && bottomText && <div className="kit-input-bottomtext kit-input-secondary-text">{bottomText}</div> }
+            { error && <div className="kit-input-errortext kit-input-secondary-text">{error}</div> }
+        </div>
+    );
+};

package/src/components/Input/index.ts

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

package/src/components/Input/input.scss

@@ -0,0 +1,69 @@
+@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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,125 @@
+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

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

package/src/components/Modal/modal.scss

@@ -0,0 +1,54 @@
+@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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,60 @@
+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

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

package/src/components/Toggle/toggle.scss

@@ -0,0 +1,97 @@
+@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

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