From b0b8fe86143fb48aa967130d07b7af50f9293f2a Mon Sep 17 00:00:00 2001 From: Maksym Sadovnychyy Date: Sat, 30 May 2026 12:09:03 +0200 Subject: [PATCH] (bugfix): gray out disabled and read-only editor fields. --- CHANGELOG.md | 19 +++++-- src/package-lock.json | 16 +++--- src/package.json | 3 +- src/packages/components/package.json | 8 +-- .../components/editors/CheckBoxComponent.tsx | 19 ++++--- .../editors/DateTimePickerComponent.tsx | 2 +- .../src/components/editors/FieldContainer.tsx | 8 ++- .../editors/RadioGroupComponent.tsx | 7 +-- .../components/editors/SecretComponent.tsx | 2 +- .../components/editors/SelectBoxComponent.tsx | 2 +- .../components/editors/TextBoxComponent.tsx | 4 +- .../src/components/editors/editorStyles.ts | 10 ++++ src/packages/contracts/package.json | 4 +- src/packages/core/package.json | 6 +- .../editors/CheckBoxComponent.stories.tsx | 8 +++ utils/ChangelogSupport.psm1 | 56 +++++++++++++++++++ utils/Release-Package/CorePlugins/GitHub.psm1 | 46 ++++----------- utils/Release-Package/PluginSupport.psm1 | 15 +++-- utils/Release-Package/README.md | 2 + utils/Release-Package/Release-Package.ps1 | 20 ++++++- utils/Release-Package/scriptsettings.json | 14 +---- utils/Run-Tests/PluginSupport.psm1 | 15 +++-- utils/Run-Tests/Run-Tests.ps1 | 19 ++++++- 23 files changed, 200 insertions(+), 105 deletions(-) create mode 100644 utils/ChangelogSupport.psm1 diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d2a0c8..dfe6f24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,18 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [v0.3.1] - 2026-05-30 +## [0.3.2] - 2026-05-30 + +### Fixed + +- Disabled and read-only editors now show consistent muted styling: `CheckBoxComponent` uses `opacity-50` when disabled; `FieldContainer` grays field labels when inactive; checkbox, radio, text, select, date, and secret fields share `getInactiveControlClasses()`. +- Added `tsup` to workspace root `devDependencies` so `npm ci` + `npm run build` resolve the CLI on Windows (subpackage-only hoisting was not always on `PATH` for nested workspace scripts). + +### Added + +- Storybook **Disabled** story for `CheckBoxComponent`. + +## [0.3.1] - 2026-05-30 ### Fixed @@ -21,7 +32,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), - `lodash` and `@types/lodash` from `@maks-it.com/webui-components`; filter debouncing uses a local `debounce()` helper. - Duplicate `date-fns` dependency from `@maks-it.com/webui-components` (`date-fns` remains on `@maks-it.com/webui-core` only). -## [v0.3.0] - 2026-05-25 +## [0.3.0] - 2026-05-25 ### Added @@ -41,7 +52,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), - Editor `colspan` uses static Tailwind `col-span-*` classes via `functions/tailwind/gridColSpan.ts` so Storybook and Vite builds apply the 12-column grid correctly. - Storybook 10 preview: Vite `esbuild` JSX set to `automatic` so decorators and stories no longer throw `React is not defined`. -## [v0.2.0] - 2026-05-24 +## [0.2.0] - 2026-05-24 ### Added @@ -59,7 +70,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), - `uuid` runtime dependency from `@maks-it.com/webui-components`. -## [v0.1.0] - 2026-05-24 +## [0.1.0] - 2026-05-24 ### Added diff --git a/src/package-lock.json b/src/package-lock.json index 1d5bcb6..32041b5 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -1,12 +1,12 @@ { "name": "maksit-webui", - "version": "0.3.1", + "version": "0.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "maksit-webui", - "version": "0.3.1", + "version": "0.3.2", "license": "MIT", "workspaces": [ "packages/*" @@ -10422,10 +10422,10 @@ }, "packages/components": { "name": "@maks-it.com/webui-components", - "version": "0.3.1", + "version": "0.3.2", "dependencies": { - "@maks-it.com/webui-contracts": "^0.3.1", - "@maks-it.com/webui-core": "^0.3.1" + "@maks-it.com/webui-contracts": "^0.3.2", + "@maks-it.com/webui-core": "^0.3.2" }, "devDependencies": { "@tanstack/react-table": "^8.21.3", @@ -10453,7 +10453,7 @@ }, "packages/contracts": { "name": "@maks-it.com/webui-contracts", - "version": "0.3.1", + "version": "0.3.2", "devDependencies": { "tsup": "^8.5.1", "typescript": "^6.0.3", @@ -10465,9 +10465,9 @@ }, "packages/core": { "name": "@maks-it.com/webui-core", - "version": "0.3.1", + "version": "0.3.2", "dependencies": { - "@maks-it.com/webui-contracts": "^0.3.1", + "@maks-it.com/webui-contracts": "^0.3.2", "date-fns": "^4.3.0" }, "devDependencies": { diff --git a/src/package.json b/src/package.json index c285b53..e497ec3 100644 --- a/src/package.json +++ b/src/package.json @@ -1,7 +1,7 @@ { "name": "maksit-webui", "private": true, - "version": "0.3.1", + "version": "0.3.2", "description": "Shared React UI library for MaksIT Certs UI and Vault WebUI", "workspaces": [ "packages/*" @@ -51,6 +51,7 @@ "storybook": "^10.4.1", "tailwindcss": "^4.3.0", "ts-jest": "^29.4.11", + "tsup": "^8.5.1", "vite": "^6.4.2", "vitest": "^4.1.7" }, diff --git a/src/packages/components/package.json b/src/packages/components/package.json index 0746fcc..393126a 100644 --- a/src/packages/components/package.json +++ b/src/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@maks-it.com/webui-components", - "version": "0.3.1", + "version": "0.3.2", "description": "Shared React components for MaksIT WebUI apps", "type": "module", "main": "./dist/index.cjs", @@ -18,7 +18,7 @@ "README.md" ], "scripts": { - "build": "tsup src/index.ts --format esm,cjs --dts --clean --tsconfig tsconfig.build.json --external react --external react-dom --external react-router-dom --external lucide-react --external @tanstack/react-table --external react-virtualized", + "build": "npx tsup src/index.ts --format esm,cjs --dts --clean --tsconfig tsconfig.build.json --external react --external react-dom --external react-router-dom --external lucide-react --external @tanstack/react-table --external react-virtualized", "typecheck": "tsc -p tsconfig.json --noEmit", "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"", "prepublishOnly": "npm run build" @@ -33,8 +33,8 @@ "directory": "src/packages/components" }, "dependencies": { - "@maks-it.com/webui-contracts": "^0.3.1", - "@maks-it.com/webui-core": "^0.3.1" + "@maks-it.com/webui-contracts": "^0.3.2", + "@maks-it.com/webui-core": "^0.3.2" }, "peerDependencies": { "@tanstack/react-table": "^8.0.0", diff --git a/src/packages/components/src/components/editors/CheckBoxComponent.tsx b/src/packages/components/src/components/editors/CheckBoxComponent.tsx index e68d8d5..ca87b4e 100644 --- a/src/packages/components/src/components/editors/CheckBoxComponent.tsx +++ b/src/packages/components/src/components/editors/CheckBoxComponent.tsx @@ -1,6 +1,7 @@ import { type ChangeEvent, type FC, useEffect, useRef } from 'react' import type { GridColSpan } from '../../functions' import { FieldContainer } from './FieldContainer' +import { getInactiveControlClasses } from './editorStyles' interface CheckBoxComponentProps { colspan?: GridColSpan; @@ -38,14 +39,16 @@ const CheckBoxComponent: FC = (props) => { } return ( - - + + ) } diff --git a/src/packages/components/src/components/editors/DateTimePickerComponent.tsx b/src/packages/components/src/components/editors/DateTimePickerComponent.tsx index b32d915..5e6d1b9 100644 --- a/src/packages/components/src/components/editors/DateTimePickerComponent.tsx +++ b/src/packages/components/src/components/editors/DateTimePickerComponent.tsx @@ -132,7 +132,7 @@ const DateTimePickerComponent: FC = ({ }, [showDropdown]) return ( - +
= (props) => { colspan, label, errorText, + disabled = false, + readOnly = false, children } = props + const isInactive = disabled || readOnly + return
- + {children}

{errorText || '\u00A0'}

diff --git a/src/packages/components/src/components/editors/RadioGroupComponent.tsx b/src/packages/components/src/components/editors/RadioGroupComponent.tsx index ea46d5e..91005b9 100644 --- a/src/packages/components/src/components/editors/RadioGroupComponent.tsx +++ b/src/packages/components/src/components/editors/RadioGroupComponent.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useRef, useState } from 'react' import type { GridColSpan } from '../../functions' import { FieldContainer } from './FieldContainer' +import { getInactiveControlClasses } from './editorStyles' interface RadioOption { value: string @@ -47,15 +48,13 @@ const RadioGroupComponent: React.FC = (props) => { } return ( - +
{options.map(option => { - // Use default cursor (arrow) if disabled or readOnly, else pointer - const isInactive = disabled || readOnly return (