void;
+ onKeyDown?: (e: React.KeyboardEvent) => void;
}) {
const isIncrease = direction === "increase";
const label = isIncrease ? "Increase" : "Decrease";
@@ -191,6 +216,14 @@ function Button({
const onClick = () => handleValueStep(step);
const longPressProps = useLongPressRepeat(onClick);
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ (e.target as HTMLElement).blur();
+ } else if (onKeyDown) {
+ onKeyDown(e);
+ }
+ };
+
return (
@@ -213,6 +247,7 @@ function Value({
componentSymbol,
handleValueStep,
scale,
+ onKeyDown,
}: {
value: number;
onChange: (e: ChangeEvent) => void;
@@ -220,6 +255,7 @@ function Value({
componentSymbol: string;
handleValueStep: (step: number) => void;
scale: number;
+ onKeyDown?: (e: React.KeyboardEvent) => void;
}) {
const valueRef = useRef(null);
const valueScroller = useScroll({
@@ -228,6 +264,14 @@ function Value({
onScrollDown: () => handleValueStep(-1),
});
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ (e.target as HTMLElement).blur();
+ } else if (onKeyDown) {
+ onKeyDown(e);
+ }
+ };
+
useEffect(() => {
if (valueRef.current) {
valueScroller.addScrollListener();
@@ -252,6 +296,7 @@ function Value({
aria-valuemax={valueRange.max}
aria-valuenow={value}
data-cy={`${componentSymbol}-value-input`}
+ onKeyDown={handleKeyDown}
/>
);
@@ -298,4 +343,88 @@ function useLongPressRepeat(
};
}
-export default ValueEditor;
+// ---------- //
+// Hex Editor //
+// ---------- //
+
+const extractHexValue = (value: string): string | null => {
+ const match = value.match(/^#?([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})$/);
+ return match ? match[1] : null;
+};
+
+const formatHexString = (
+ color: colorlib.Hex,
+ preserveShortFormat: boolean = false,
+): string => {
+ const hexValue = color.to_code();
+
+ if (preserveShortFormat) {
+ if (
+ hexValue[0] === hexValue[1] &&
+ hexValue[2] === hexValue[3] &&
+ hexValue[4] === hexValue[5]
+ ) {
+ return `#${hexValue[0]}${hexValue[2]}${hexValue[4]}`;
+ }
+ }
+
+ return `#${color.to_code()}`;
+};
+
+export function HexEditor({
+ color,
+ actions,
+ onKeyDown,
+}: {
+ color: colorlib.Hex;
+ actions: HexColorActions;
+ onKeyDown?: (e: React.KeyboardEvent) => void;
+}) {
+ const [inputValue, setInputValue] = useState(formatHexString(color));
+ const [isShortHex, setIsShortHex] = useState(false);
+
+ useEffect(() => {
+ setInputValue(formatHexString(color, isShortHex));
+ }, [color]);
+
+ const onChange = (e: ChangeEvent
) => {
+ const value = e.target.value;
+ setInputValue(value);
+
+ const hex = extractHexValue(value);
+ if (hex) {
+ setIsShortHex(hex.length === 3);
+ const newColor = colorlib.Hex.from_code(hex);
+ actions.setHex(newColor);
+ }
+ };
+
+ const onBlur = () => {
+ setInputValue(formatHexString(color));
+ };
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ (e.target as HTMLElement).blur();
+ } else if (onKeyDown) {
+ onKeyDown(e);
+ }
+ };
+
+ return (
+
+
HEX
+
+ e.target.select()}
+ onKeyDown={handleKeyDown}
+ />
+
+
{
cy.clock().then((clock) => clock.restore());
});
- it.only("works with mouse events", () => {
+ it("works with mouse events", () => {
// Check initial state
cy.dataCy("R-slider-bar")
.should("have.css", "width", "0px")
@@ -159,4 +158,35 @@ describe("component editor tests", () => {
.dataCy("R-value-input")
.should("have.value", "127");
});
+
+ it("works with keyboard events", () => {
+ // Tab through components
+ cy.press(Cypress.Keyboard.Keys.TAB);
+ cy.dataCy("R-slider").should("have.focus");
+
+ cy.press(Cypress.Keyboard.Keys.TAB);
+ cy.dataCy("R-decrement-button").should("have.focus");
+
+ cy.press(Cypress.Keyboard.Keys.TAB);
+ cy.dataCy("R-value-input").should("have.focus");
+
+ cy.press(Cypress.Keyboard.Keys.TAB);
+ cy.dataCy("R-increment-button").should("have.focus");
+
+ // Pressing Escape should blur focused element
+ cy.dataCy("R-increment-button").type("{esc}");
+ cy.dataCy("R-increment-button").should("not.have.focus");
+
+ cy.dataCy("R-slider").focus();
+ cy.dataCy("R-slider").type("{esc}");
+ cy.dataCy("R-slider").should("not.have.focus");
+
+ cy.dataCy("R-decrement-button").focus();
+ cy.dataCy("R-decrement-button").type("{esc}");
+ cy.dataCy("R-decrement-button").should("not.have.focus");
+
+ cy.dataCy("R-value-input").focus();
+ cy.dataCy("R-value-input").type("{esc}");
+ cy.dataCy("R-value-input").should("not.have.focus");
+ });
});
diff --git a/src/hooks/scroll.ts b/src/hooks/scroll.ts
index 20ebad4..fbfe498 100644
--- a/src/hooks/scroll.ts
+++ b/src/hooks/scroll.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
import type { RefObject } from "react";
export function handleScroll(
diff --git a/src/main.tsx b/src/main.tsx
index cf16e0a..c3c8241 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,12 +4,14 @@ import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
-import { MediaQueryProvider } from "./providers";
+import { MediaQueryProvider, SelectedColorProvider } from "./providers";
createRoot(document.getElementById("root")!).render(
-
+
+
+
,
);
diff --git a/src/providers/MediaQueryProvider.tsx b/src/providers/MediaQueryProvider.tsx
index f6a425d..bf73dd4 100644
--- a/src/providers/MediaQueryProvider.tsx
+++ b/src/providers/MediaQueryProvider.tsx
@@ -14,11 +14,11 @@ interface MediaQueryContextType {
isMobilePortrait: boolean;
}
-const MediaQueryContext = createContext
(
- undefined,
-);
+export const MediaQueryContext = createContext<
+ MediaQueryContextType | undefined
+>(undefined);
-function MediaQueryProvider({ children }: { children: ReactNode }) {
+export const MediaQueryProvider = ({ children }: { children: ReactNode }) => {
const [viewportMode, setViewportMode] = useState(
ViewportMode.DESKTOP,
);
@@ -71,7 +71,4 @@ function MediaQueryProvider({ children }: { children: ReactNode }) {
{children}
);
-}
-
-export default MediaQueryProvider;
-export { MediaQueryContext };
+};
diff --git a/src/providers/hooks.ts b/src/providers/hooks.ts
index ac06ce8..2bc43b4 100644
--- a/src/providers/hooks.ts
+++ b/src/providers/hooks.ts
@@ -1,8 +1,9 @@
import { useContext } from "react";
import { MediaQueryContext } from "./MediaQueryProvider";
+import { SelectedColorContext } from "./SelectedColorProvider";
-function useMediaQuery() {
+export function useMediaQuery() {
const context = useContext(MediaQueryContext);
if (context === undefined) {
throw new Error("useMediaQuery must be used within a MediaQueryProvider");
@@ -10,4 +11,10 @@ function useMediaQuery() {
return context;
}
-export { useMediaQuery };
+export function useSelectedColor() {
+ const context = useContext(SelectedColorContext);
+ if (!context) {
+ throw new Error("useColor must be used within a ColorProvider");
+ }
+ return context;
+}
diff --git a/src/providers/index.ts b/src/providers/index.ts
index 62a9952..dc20403 100644
--- a/src/providers/index.ts
+++ b/src/providers/index.ts
@@ -1,3 +1,4 @@
-import MediaQueryProvider from "./MediaQueryProvider";
+import { MediaQueryProvider } from "./MediaQueryProvider";
+import { SelectedColorProvider } from "./SelectedColorProvider";
-export { MediaQueryProvider };
+export { MediaQueryProvider, SelectedColorProvider };