Refine SEO light theme and environment controls
This commit is contained in:
DCCONSTRUCTIONS
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nodedc/ui-react",
|
||||
"version": "0.5.0",
|
||||
"version": "0.5.1",
|
||||
"type": "module",
|
||||
"files": ["dist"],
|
||||
"main": "./dist/index.js",
|
||||
@@ -16,7 +16,7 @@
|
||||
"typecheck": "tsc -p tsconfig.json --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nodedc/ui-core": "0.5.0",
|
||||
"@nodedc/ui-core": "0.5.1",
|
||||
"lucide-react": "^0.468.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -97,7 +97,7 @@ export interface IconProps extends Omit<LucideProps, "ref"> {
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function Icon({ name, label, size = 17, strokeWidth = 1.7, ...props }: IconProps) {
|
||||
export function Icon({ name, label, size = 16, strokeWidth = 1.6, ...props }: IconProps) {
|
||||
const IconComponent = icons[name];
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { CSSProperties, InputHTMLAttributes } from "react";
|
||||
import { useEffect, useState, type CSSProperties, type InputHTMLAttributes, type PointerEvent } from "react";
|
||||
import { cn } from "./cn.js";
|
||||
import { Dropdown } from "./Dropdown.js";
|
||||
|
||||
export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
|
||||
label: string;
|
||||
@@ -52,18 +53,159 @@ export interface ColorFieldProps extends Omit<InputHTMLAttributes<HTMLInputEleme
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function ColorField({ value, onChange, label = "Цвет", className, ...props }: ColorFieldProps) {
|
||||
const style = { "--nodedc-color-value": value } as CSSProperties;
|
||||
type Hsv = { h: number; s: number; v: number };
|
||||
|
||||
const palettePresets = ["#ff2f92", "#ff6caf", "#d746ff", "#7a3cff", "#4ea4ff", "#35d7c1", "#c3ff66", "#ffffff", "#404040", "#111116"];
|
||||
|
||||
function clamp(value: number, min: number, max: number) {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
function parseHexColor(value: string): [number, number, number] | null {
|
||||
const match = /^#?([0-9a-f]{6})$/i.exec(value.trim());
|
||||
if (!match) return null;
|
||||
const hex = match[1];
|
||||
return [
|
||||
Number.parseInt(hex.slice(0, 2), 16),
|
||||
Number.parseInt(hex.slice(2, 4), 16),
|
||||
Number.parseInt(hex.slice(4, 6), 16),
|
||||
];
|
||||
}
|
||||
|
||||
function hexToHsv(value: string): Hsv | null {
|
||||
const rgb = parseHexColor(value);
|
||||
if (!rgb) return null;
|
||||
const [red, green, blue] = rgb.map((channel) => channel / 255) as [number, number, number];
|
||||
const max = Math.max(red, green, blue);
|
||||
const min = Math.min(red, green, blue);
|
||||
const delta = max - min;
|
||||
let hue = 0;
|
||||
if (delta) {
|
||||
if (max === red) hue = 60 * (((green - blue) / delta) % 6);
|
||||
else if (max === green) hue = 60 * ((blue - red) / delta + 2);
|
||||
else hue = 60 * ((red - green) / delta + 4);
|
||||
}
|
||||
return { h: (hue + 360) % 360, s: max === 0 ? 0 : (delta / max) * 100, v: max * 100 };
|
||||
}
|
||||
|
||||
function hsvToHex({ h, s, v }: Hsv): string {
|
||||
const hue = ((h % 360) + 360) % 360;
|
||||
const saturation = clamp(s, 0, 100) / 100;
|
||||
const value = clamp(v, 0, 100) / 100;
|
||||
const chroma = value * saturation;
|
||||
const component = (hue / 60) % 2;
|
||||
const match = chroma * (1 - Math.abs(component - 1));
|
||||
const base = hue < 60 ? [chroma, match, 0]
|
||||
: hue < 120 ? [match, chroma, 0]
|
||||
: hue < 180 ? [0, chroma, match]
|
||||
: hue < 240 ? [0, match, chroma]
|
||||
: hue < 300 ? [match, 0, chroma]
|
||||
: [chroma, 0, match];
|
||||
const offset = value - chroma;
|
||||
return `#${base.map((channel) => Math.round((channel + offset) * 255).toString(16).padStart(2, "0")).join("")}`;
|
||||
}
|
||||
|
||||
export function ColorField({ value, onChange, label = "Цвет", className, disabled = false, ...props }: ColorFieldProps) {
|
||||
const validColor = hexToHsv(value);
|
||||
const [hsv, setHsv] = useState<Hsv>(() => validColor ?? { h: 330, s: 82, v: 100 });
|
||||
const style = { "--nodedc-color-value": validColor ? hsvToHex(validColor) : hsvToHex(hsv) } as CSSProperties;
|
||||
|
||||
useEffect(() => {
|
||||
if (validColor) setHsv(validColor);
|
||||
}, [value, validColor?.h, validColor?.s, validColor?.v]);
|
||||
|
||||
const commit = (next: Hsv) => {
|
||||
const normalized = { h: clamp(next.h, 0, 360), s: clamp(next.s, 0, 100), v: clamp(next.v, 0, 100) };
|
||||
setHsv(normalized);
|
||||
onChange(hsvToHex(normalized));
|
||||
};
|
||||
|
||||
const updateSpectrum = (event: PointerEvent<HTMLDivElement>) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
commit({ ...hsv, s: ((event.clientX - rect.left) / rect.width) * 100, v: 100 - ((event.clientY - rect.top) / rect.height) * 100 });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("nodedc-color-field", className)} style={style}>
|
||||
<label className="nodedc-color-field__picker" aria-label={label}>
|
||||
<input type="color" value={value} onChange={(event) => onChange(event.target.value)} {...props} />
|
||||
</label>
|
||||
<Dropdown
|
||||
className="nodedc-color-field__dropdown"
|
||||
placement="bottom-start"
|
||||
minWidth={296}
|
||||
width={296}
|
||||
disabled={disabled}
|
||||
surfaceRole="dialog"
|
||||
surfaceClassName="nodedc-color-palette-surface"
|
||||
trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
|
||||
<button
|
||||
ref={setTriggerRef}
|
||||
type="button"
|
||||
className="nodedc-color-field__picker"
|
||||
aria-label={`Выбрать ${label}`}
|
||||
aria-haspopup="dialog"
|
||||
aria-controls={surfaceId}
|
||||
aria-expanded={open}
|
||||
data-open={open ? "true" : undefined}
|
||||
disabled={disabled}
|
||||
onClick={toggle}
|
||||
><span aria-hidden="true" /></button>
|
||||
)}
|
||||
>
|
||||
<div className="nodedc-color-palette" aria-label={`Палитра: ${label}`}>
|
||||
<div
|
||||
className="nodedc-color-palette__spectrum"
|
||||
role="slider"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-label={`${label}: насыщенность и яркость`}
|
||||
aria-valuetext={hsvToHex(hsv)}
|
||||
style={{ "--nodedc-color-hue": hsvToHex({ h: hsv.h, s: 100, v: 100 }), "--nodedc-color-s": `${hsv.s}%`, "--nodedc-color-v": `${100 - hsv.v}%` } as CSSProperties}
|
||||
onPointerDown={(event) => {
|
||||
if (disabled) return;
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
updateSpectrum(event);
|
||||
}}
|
||||
onPointerMove={(event) => {
|
||||
if (event.currentTarget.hasPointerCapture(event.pointerId)) updateSpectrum(event);
|
||||
}}
|
||||
onPointerUp={(event) => {
|
||||
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
const delta = event.shiftKey ? 10 : 2;
|
||||
if (event.key === "ArrowLeft") { event.preventDefault(); commit({ ...hsv, s: hsv.s - delta }); }
|
||||
if (event.key === "ArrowRight") { event.preventDefault(); commit({ ...hsv, s: hsv.s + delta }); }
|
||||
if (event.key === "ArrowDown") { event.preventDefault(); commit({ ...hsv, v: hsv.v - delta }); }
|
||||
if (event.key === "ArrowUp") { event.preventDefault(); commit({ ...hsv, v: hsv.v + delta }); }
|
||||
}}
|
||||
><span className="nodedc-color-palette__marker" aria-hidden="true" /></div>
|
||||
<label className="nodedc-color-palette__hue">
|
||||
<span>Оттенок</span>
|
||||
<input type="range" min={0} max={360} value={Math.round(hsv.h)} aria-label={`${label}: оттенок`} disabled={disabled} onChange={(event) => commit({ ...hsv, h: Number(event.target.value) })} />
|
||||
</label>
|
||||
<div className="nodedc-color-palette__presets" aria-label="Быстрые цвета">
|
||||
{palettePresets.map((preset) => (
|
||||
<button
|
||||
key={preset}
|
||||
type="button"
|
||||
aria-label={`Выбрать ${preset}`}
|
||||
aria-pressed={hsvToHex(hsv).toLowerCase() === preset}
|
||||
style={{ "--nodedc-palette-swatch": preset } as CSSProperties}
|
||||
onClick={() => {
|
||||
const next = hexToHsv(preset);
|
||||
if (next) commit(next);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
<input
|
||||
className="nodedc-color-field__text"
|
||||
value={value}
|
||||
aria-label={`${label}: HEX`}
|
||||
disabled={disabled}
|
||||
spellCheck={false}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user