@velumweb/ui-kit 1.0.0

package/src/main.scss

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

@@ -0,0 +1,15 @@
+{
+  "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

@@ -0,0 +1,37 @@
+/**
+ * Утилиты для автоматического подбора цветов
+ */
+
+
+/** Возвращает 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

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

package/utils/style_setter.js

@@ -0,0 +1,19 @@
+/** Конфиг базовых стилей проекта */
+
+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

@@ -0,0 +1,32 @@
+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'
+    }
+});