From 198a446b03a168fc96f68f8de2e0ebf96068c1ac Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 13:09:22 +0200 Subject: [PATCH] Implement Toggleable and Interactive properly --- styles/package-lock.json | 30 ++++++++++++++- styles/package.json | 4 +- styles/src/styleTree/commandPalette.ts | 53 +++++++++++++++----------- styles/src/styleTree/interactive.ts | 19 ++++++--- styles/src/styleTree/toggle.ts | 40 +++++++++++++------ 5 files changed, 104 insertions(+), 42 deletions(-) diff --git a/styles/package-lock.json b/styles/package-lock.json index d1d0ed0eb8f810cea84e6efbc3e7aa7aa6e3f899..b4bdd52c66463b020f0798a03494920f9206d874 100644 --- a/styles/package-lock.json +++ b/styles/package-lock.json @@ -18,7 +18,9 @@ "chroma-js": "^2.4.2", "deepmerge": "^4.3.0", "toml": "^3.0.0", - "ts-node": "^10.9.1" + "ts-deepmerge": "^6.0.3", + "ts-node": "^10.9.1", + "utility-types": "^3.10.0" } }, "node_modules/@cspotcode/source-map-support": { @@ -180,6 +182,14 @@ "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==" }, + "node_modules/ts-deepmerge": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/ts-deepmerge/-/ts-deepmerge-6.0.3.tgz", + "integrity": "sha512-MBBJL0UK/mMnZRONMz4J1CRu5NsGtsh+gR1nkn8KLE9LXo/PCzeHhQduhNary8m5/m9ryOOyFwVKxq81cPlaow==", + "engines": { + "node": ">=14.13.1" + } + }, "node_modules/ts-node": { "version": "10.9.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz", @@ -235,6 +245,14 @@ "node": ">=4.2.0" } }, + "node_modules/utility-types": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz", + "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==", + "engines": { + "node": ">= 4" + } + }, "node_modules/v8-compile-cache-lib": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", @@ -382,6 +400,11 @@ "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz", "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==" }, + "ts-deepmerge": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/ts-deepmerge/-/ts-deepmerge-6.0.3.tgz", + "integrity": "sha512-MBBJL0UK/mMnZRONMz4J1CRu5NsGtsh+gR1nkn8KLE9LXo/PCzeHhQduhNary8m5/m9ryOOyFwVKxq81cPlaow==" + }, "ts-node": { "version": "10.9.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz", @@ -408,6 +431,11 @@ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true }, + "utility-types": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz", + "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==" + }, "v8-compile-cache-lib": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", diff --git a/styles/package.json b/styles/package.json index 2a0881863b588e2f26424e380173d2fa2de16533..30336d5c519a30ba68aef0be7541d86d8f7b6bc3 100644 --- a/styles/package.json +++ b/styles/package.json @@ -20,7 +20,9 @@ "chroma-js": "^2.4.2", "deepmerge": "^4.3.0", "toml": "^3.0.0", - "ts-node": "^10.9.1" + "ts-deepmerge": "^6.0.3", + "ts-node": "^10.9.1", + "utility-types": "^3.10.0" }, "prettier": { "semi": false, diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index c49e1f194c7fbcd16a4f1ac0a5bc7f996fd53dcc..5fe7b74f92352f1d2f311d5b3f93af9c22e6fc35 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -1,30 +1,37 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, background } from "./components" +import { toggleable } from "./toggle" +import { interactive } from "./interactive" export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest - return { - keystrokeSpacing: 8, - key: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - active: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), - }, + let layer = colorScheme.highest + return { + keystrokeSpacing: 8, + key: + toggleable(interactive({ + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, }, - } + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, { hover: { cornerRadius: 4, padding: { top: 17 } } }), { + default: { + text: text(layer, "mono", "on", "default", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), + } + + }) + , + + } } diff --git a/styles/src/styleTree/interactive.ts b/styles/src/styleTree/interactive.ts index 2f7181900cf97bf776fbc2a85c578e0ddbdc59dc..7135cecd906952889f37e580b932ffb96efa6689 100644 --- a/styles/src/styleTree/interactive.ts +++ b/styles/src/styleTree/interactive.ts @@ -1,3 +1,5 @@ +import { DeepPartial } from "utility-types"; +import merge from "ts-deepmerge" interface Interactive { default: T, hover?: T, @@ -5,21 +7,26 @@ interface Interactive { disabled?: T, } -export function interactive(base: T, modifications: Partial>): Interactive { - const interactiveObj: Interactive = { +// Helper function for creating Interactive objects that works pretty much like Toggle. +// It takes a object to be used as a value for `default` field and then fills out other fields +// with fields from either `base` or `modifications`. Notably, it does not touch `hover`, `clicked` and `disabled` if there are no modifications for it. +export function interactive(base: T, modifications: DeepPartial>): Interactive { + let interactiveObj: Interactive = { default: base, }; - + if (modifications.default !== undefined) { + interactiveObj.default = merge(interactiveObj.default, modifications.default) as T; + } if (modifications.hover !== undefined) { - interactiveObj.hover = { ...base, ...modifications.hover }; + interactiveObj.hover = merge(interactiveObj.default, modifications.hover) as T; } if (modifications.clicked !== undefined) { - interactiveObj.clicked = { ...base, ...modifications.clicked }; + interactiveObj.clicked = merge(interactiveObj.default, modifications.clicked) as T; } if (modifications.disabled !== undefined) { - interactiveObj.disabled = { ...base, ...modifications.disabled }; + interactiveObj.disabled = merge(interactiveObj.default, modifications.disabled) as T; } return interactiveObj; diff --git a/styles/src/styleTree/toggle.ts b/styles/src/styleTree/toggle.ts index 0602ae6b598712719b5bf91cf18bf60a5b024bd5..9c35b8337c07a730c17d5bf5db3787446f615e88 100644 --- a/styles/src/styleTree/toggle.ts +++ b/styles/src/styleTree/toggle.ts @@ -1,17 +1,35 @@ +import { DeepPartial } from 'utility-types'; +import merge from 'ts-deepmerge'; + interface Toggleable { inactive: T active: T, } -export function toggleable(inactive: T, modifications: Partial>): Toggleable { - let active: T = inactive; - if (modifications.active !== undefined) { - active = { ...inactive, ...modifications.active }; - } - return { - inactive: inactive, - active: active - }; - - d +/// Helper function for creating Toggleable objects; it takes a object of type T that is used as +/// `inactive` member of result Toggleable. `active` member is created by applying `modifications` on top of `inactive` argument. +// Thus, the following call: +// ``` +// toggleable({day: 1, month: "January"}, {day: 3}) +// ``` +// To return the following object: +// ``` +// Toggleable<_>{ +// inactive: { day: 1, month: "January" }, +// active: { day: 3, month: "January" } +// } +// ``` +// Remarkably, it also works for nested structures: +// ``` +// toggleable({first_level: "foo", second_level: {nested_member: "nested"}}, {second_level: {nested_member: "another nested thing"}}) +// ``` +// ``` +// Toggleable<_> { +// inactive: {first_level: "foo", second_level: {nested_member: "nested"}}, +// active: { first_level: "foo", second_level: {nested_member: "another nested thing"}} +// } +// ``` +export function toggleable(inactive: T, modifications: DeepPartial): Toggleable { + let active: T = merge(inactive, modifications) as T; + return { active: active, inactive: inactive }; }