From e3ff99cc051d314cf8da3a0bc6f199c4ce523b1a Mon Sep 17 00:00:00 2001 From: Pongstr Date: Thu, 12 Dec 2024 15:26:00 +0200 Subject: [PATCH 1/5] improve: Key Component scale transition - improve: smoother scale transition when hovering - feat: toggle select+deselect, allows users to deselect a currently selected key . --- .eslintrc.cjs | 15 +++++++- .prettierrc | 5 ++- package-lock.json | 29 +++++++++++++++ package.json | 1 + src/keyboard/Key.tsx | 49 ++++++++++++++++--------- src/keyboard/Keymap.tsx | 3 +- src/keyboard/PhysicalLayout.stories.tsx | 1 + src/keyboard/PhysicalLayout.tsx | 10 ++++- 8 files changed, 90 insertions(+), 23 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 200a166..461edb2 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,9 +11,22 @@ module.exports = { parser: "@typescript-eslint/parser", plugins: ["react-refresh"], rules: { + "tailwindcss/no-custom-classname": "off", + "@typescript-eslint/no-unused-vars": [ + "error", + { + args: "all", + argsIgnorePattern: "^_", + caughtErrors: "all", + caughtErrorsIgnorePattern: "^_", + destructuredArrayIgnorePattern: "^_", + varsIgnorePattern: "^_", + ignoreRestSiblings: true, + }, + ], "react-refresh/only-export-components": [ "warn", { allowConstantExport: true }, ], }, -}; +} diff --git a/.prettierrc b/.prettierrc index 0967ef4..ce9388a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,4 @@ -{} +{ + "tabWidth": 2, + "semi": true, +} diff --git a/package-lock.json b/package-lock.json index 314418d..1e69b87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-storybook": "^0.8.0", + "eslint-plugin-tailwindcss": "^3.17.5", "postcss": "^8.4.38", "prettier": "3.3.2", "run-script-os": "^1.1.6", @@ -5731,6 +5732,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } @@ -6460,6 +6462,23 @@ "node": ">=4.0" } }, + "node_modules/eslint-plugin-tailwindcss": { + "version": "3.17.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz", + "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-glob": "^3.2.5", + "postcss": "^8.4.4" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "tailwindcss": "^3.4.0" + } + }, "node_modules/eslint-scope": { "version": "7.2.2", "dev": true, @@ -15294,6 +15313,16 @@ } } }, + "eslint-plugin-tailwindcss": { + "version": "3.17.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz", + "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==", + "dev": true, + "requires": { + "fast-glob": "^3.2.5", + "postcss": "^8.4.4" + } + }, "eslint-scope": { "version": "7.2.2", "dev": true, diff --git a/package.json b/package.json index 68d2f2a..f4dd8d5 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-storybook": "^0.8.0", + "eslint-plugin-tailwindcss": "^3.17.5", "postcss": "^8.4.38", "prettier": "3.3.2", "run-script-os": "^1.1.6", diff --git a/src/keyboard/Key.tsx b/src/keyboard/Key.tsx index 80babd4..3c620e4 100644 --- a/src/keyboard/Key.tsx +++ b/src/keyboard/Key.tsx @@ -1,6 +1,6 @@ // import './key.css'; -import { PropsWithChildren, Children, CSSProperties } from "react"; +import { PropsWithChildren, Children, CSSProperties, FC } from "react"; interface KeyProps { /** @@ -39,11 +39,25 @@ function makeSize( height *= oneU; return { - "--zmk-key-center-width": "calc(" + width + "px - 2px)", - "--zmk-key-center-height": "calc(" + height + "px - 2px)", + "--zmk-key-center-width": `calc(${width}px - 2px)`, + "--zmk-key-center-height": `calc(${height}px - 2px)`, }; } +const ChildItem: FC> = ({ + children, + hoverZoom, +}) => { + return ( +
+ {children} +
+ ); +}; + export const Key = ({ selected = false, header, @@ -53,18 +67,9 @@ export const Key = ({ }: PropsWithChildren) => { const size = makeSize(props, oneU); - const children = Children.map(props.children, (c) => ( -
- {c} -
- )); - return (
20 ? "-md" : "" - } transition-all duration-100 m-auto p-0 b-0 box-border grid grid-rows-[0_var(--zmk-key-center-height)_0] grid-cols-[0_var(--zmk-key-center-width)_0] data-[zoomer=true]:hover:grid-rows-[1em_var(--zmk-key-center-height)_1em] data-[zoomer=true]:hover:grid-cols-[1em_var(--zmk-key-center-width)_1em] shadow-[0_0_0_1px_inset] shadow-base-content data-[zoomer=true]:shadow-base-200 data-[zoomer=true]:hover:shadow-base-content data-[zoomer=true]:hover:z-50 text-base-content bg-base-100 aria-selected:bg-primary aria-selected:text-primary-content grow @container`} + className={[ + oneU > 20 ? "rounded-md" : "rounded", + "relative w-[var(--zmk-key-center-width)] h-[var(--zmk-key-center-height)] bg-base-100 border border-transparent", + "group-hover:border-[#a6adbb] aria-selected:bg-primary aria-selected:text-primary-content @container", + ].join(' ')} > {header && ( - + {header} )} - {children} + + {props.children && + Children.map(props.children, (child, index) => ( + + {child} + + ))}
); diff --git a/src/keyboard/Keymap.tsx b/src/keyboard/Keymap.tsx index 4d457b1..eb2d941 100644 --- a/src/keyboard/Keymap.tsx +++ b/src/keyboard/Keymap.tsx @@ -9,6 +9,7 @@ import { PhysicalLayout as PhysicalLayoutComp, } from "./PhysicalLayout"; import { HidUsageLabel } from "./HidUsageLabel"; +import { Dispatch, SetStateAction } from "react"; type BehaviorMap = Record; @@ -19,7 +20,7 @@ export interface KeymapProps { scale: LayoutZoom; selectedLayerIndex: number; selectedKeyPosition: number | undefined; - onKeyPositionClicked: (keyPosition: number) => void; + onKeyPositionClicked: Dispatch> } export const Keymap = ({ diff --git a/src/keyboard/PhysicalLayout.stories.tsx b/src/keyboard/PhysicalLayout.stories.tsx index fa1b2f0..3ff0333 100644 --- a/src/keyboard/PhysicalLayout.stories.tsx +++ b/src/keyboard/PhysicalLayout.stories.tsx @@ -10,6 +10,7 @@ const meta = { component: PhysicalLayout, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: "centered" }, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"], diff --git a/src/keyboard/PhysicalLayout.tsx b/src/keyboard/PhysicalLayout.tsx index 6c7d98c..0771d8e 100644 --- a/src/keyboard/PhysicalLayout.tsx +++ b/src/keyboard/PhysicalLayout.tsx @@ -1,4 +1,6 @@ import { + Dispatch, + SetStateAction, CSSProperties, PropsWithChildren, useLayoutEffect, @@ -33,7 +35,7 @@ interface PhysicalLayoutProps { oneU?: number; hoverZoom?: boolean; zoom?: LayoutZoom; - onPositionClicked?: (position: number) => void; + onPositionClicked?: Dispatch> } interface PhysicalLayoutPositionLocation { @@ -125,7 +127,11 @@ export const PhysicalLayout = ({ const positionItems = positions.map((p, idx) => (
onPositionClicked?.(idx)} + onClick={() => + onPositionClicked?.((prev: number | undefined) => + prev !== idx ? idx : undefined, + ) + } className="absolute data-[zoomer=true]:hover:z-[1000] leading-[0]" data-zoomer={hoverZoom} style={scalePosition(p, oneU)} From 87224196f15f872fe4b55ebe6c5272bd27faf75e Mon Sep 17 00:00:00 2001 From: Pongstr Date: Sun, 22 Dec 2024 22:01:49 +0200 Subject: [PATCH 2/5] fix: rm hard-coded values --- src/keyboard/Key.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/keyboard/Key.tsx b/src/keyboard/Key.tsx index 3c620e4..1f11fe4 100644 --- a/src/keyboard/Key.tsx +++ b/src/keyboard/Key.tsx @@ -80,11 +80,11 @@ export const Key = ({ className={[ oneU > 20 ? "rounded-md" : "rounded", "relative w-[var(--zmk-key-center-width)] h-[var(--zmk-key-center-height)] bg-base-100 border border-transparent", - "group-hover:border-[#a6adbb] aria-selected:bg-primary aria-selected:text-primary-content @container", + "group-hover:border-base-content aria-selected:bg-primary aria-selected:text-primary-content @container", ].join(' ')} > {header && ( - + {header} )} From 26486afe20d6e4073ebb052d25a95af070cd9abf Mon Sep 17 00:00:00 2001 From: Pongstr Date: Mon, 23 Dec 2024 00:50:56 +0200 Subject: [PATCH 3/5] fix: rm hard coded values --- src/keyboard/Key.tsx | 6 +++--- tailwind.config.js | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/keyboard/Key.tsx b/src/keyboard/Key.tsx index 1f11fe4..b2491d1 100644 --- a/src/keyboard/Key.tsx +++ b/src/keyboard/Key.tsx @@ -33,7 +33,7 @@ interface KeyDimension { function makeSize( { width, height }: KeyDimension, - oneU: number + oneU: number, ): CSSProperties { width *= oneU; height *= oneU; @@ -81,10 +81,10 @@ export const Key = ({ oneU > 20 ? "rounded-md" : "rounded", "relative w-[var(--zmk-key-center-width)] h-[var(--zmk-key-center-height)] bg-base-100 border border-transparent", "group-hover:border-base-content aria-selected:bg-primary aria-selected:text-primary-content @container", - ].join(' ')} + ].join(" ")} > {header && ( - + {header} )} diff --git a/tailwind.config.js b/tailwind.config.js index 2f14d26..a998139 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,6 +9,9 @@ export default { fontFamily: { sans: ["Inter", "system-ui"], }, + fontSize: { + micro: "6px", // size is intended for key header + }, colors: { primary: "light-dark(oklch(49.12% 0.3096 285.75), oklch(65.69% 0.196 285.75))", From 7519f5fad62294ed7953e7b1815a01dedc732ede Mon Sep 17 00:00:00 2001 From: Pongstr Date: Mon, 23 Dec 2024 10:01:01 +0200 Subject: [PATCH 4/5] chore: woops --- .eslintrc.cjs | 3 ++- src/keyboard/Key.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 461edb2..d2b2b15 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -6,6 +6,7 @@ module.exports = { "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", "plugin:storybook/recommended", + "plugin:tailwindcss/recommended", ], ignorePatterns: ["dist", ".eslintrc.cjs"], parser: "@typescript-eslint/parser", @@ -29,4 +30,4 @@ module.exports = { { allowConstantExport: true }, ], }, -} +}; diff --git a/src/keyboard/Key.tsx b/src/keyboard/Key.tsx index b2491d1..134f51c 100644 --- a/src/keyboard/Key.tsx +++ b/src/keyboard/Key.tsx @@ -69,7 +69,7 @@ export const Key = ({ return (
{header && ( - + {header} )} From e2b490eebea840faa356274f639c0df76c3c364c Mon Sep 17 00:00:00 2001 From: Pongstr Date: Mon, 6 Jan 2025 22:21:24 +0200 Subject: [PATCH 5/5] chore: cleanup, only include fixes --- .eslintrc.cjs | 14 -------------- .prettierrc | 5 +---- package-lock.json | 29 ----------------------------- package.json | 1 - 4 files changed, 1 insertion(+), 48 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d2b2b15..200a166 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -6,25 +6,11 @@ module.exports = { "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", "plugin:storybook/recommended", - "plugin:tailwindcss/recommended", ], ignorePatterns: ["dist", ".eslintrc.cjs"], parser: "@typescript-eslint/parser", plugins: ["react-refresh"], rules: { - "tailwindcss/no-custom-classname": "off", - "@typescript-eslint/no-unused-vars": [ - "error", - { - args: "all", - argsIgnorePattern: "^_", - caughtErrors: "all", - caughtErrorsIgnorePattern: "^_", - destructuredArrayIgnorePattern: "^_", - varsIgnorePattern: "^_", - ignoreRestSiblings: true, - }, - ], "react-refresh/only-export-components": [ "warn", { allowConstantExport: true }, diff --git a/.prettierrc b/.prettierrc index ce9388a..0967ef4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1 @@ -{ - "tabWidth": 2, - "semi": true, -} +{} diff --git a/package-lock.json b/package-lock.json index 1e69b87..314418d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,6 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-storybook": "^0.8.0", - "eslint-plugin-tailwindcss": "^3.17.5", "postcss": "^8.4.38", "prettier": "3.3.2", "run-script-os": "^1.1.6", @@ -5732,7 +5731,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", - "license": "MIT", "engines": { "node": ">=6" } @@ -6462,23 +6460,6 @@ "node": ">=4.0" } }, - "node_modules/eslint-plugin-tailwindcss": { - "version": "3.17.5", - "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz", - "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==", - "dev": true, - "license": "MIT", - "dependencies": { - "fast-glob": "^3.2.5", - "postcss": "^8.4.4" - }, - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "tailwindcss": "^3.4.0" - } - }, "node_modules/eslint-scope": { "version": "7.2.2", "dev": true, @@ -15313,16 +15294,6 @@ } } }, - "eslint-plugin-tailwindcss": { - "version": "3.17.5", - "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz", - "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==", - "dev": true, - "requires": { - "fast-glob": "^3.2.5", - "postcss": "^8.4.4" - } - }, "eslint-scope": { "version": "7.2.2", "dev": true, diff --git a/package.json b/package.json index f4dd8d5..68d2f2a 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,6 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-storybook": "^0.8.0", - "eslint-plugin-tailwindcss": "^3.17.5", "postcss": "^8.4.38", "prettier": "3.3.2", "run-script-os": "^1.1.6",