feat: add colorful view for bool values

docs/spec.md

@@ -53,6 +53,8 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.link              | `any`       |          | A field containing information for forming a [link](#link) for a value                                                                                                                  |
 | viewSpec.hidden            | `boolean`   |          | Hide field and view                                                                                                                                                                     |
 | viewSpec.inputProps        | `object`    |          | [InputProps](./input-props-map.md) Additional properties for internal input components                                                                                                  |
+| viewSpec.viewColor         | `object`    |          | Color map for values, use the keys `"true"` and `"false"` specifying the value from the https://github.com/gravity-ui/uikit/tree/main/src/components/Text#color.                        |
+|                            |
 
 ### NumberSpec
 

src/lib/core/types/specs.ts

@@ -70,6 +70,10 @@ export interface BooleanSpec<
         hidden?: boolean;
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
+        viewColor?: {
+            true: TextProps['color'];
+            false: TextProps['color'];
+        };
     };
 }
 

src/lib/kit/components/Views/BaseView/BaseView.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 
 import isString from 'lodash/isString';
 
-import type {
-    BooleanViewProps,
-    NumberViewProps,
-    StringSpec,
-    StringViewProps,
+import {
+    type BooleanViewProps,
+    type NumberViewProps,
+    type StringSpec,
+    type StringViewProps,
+    isBooleanSpec,
 } from '../../../../core';
 import {LongValue} from '../../../components';
 
@@ -15,11 +16,20 @@ export const BaseView = <T extends BooleanViewProps | NumberViewProps | StringVi
     spec,
     linkValue,
 }: React.PropsWithChildren<T>) => {
+    const stringValue = String(value);
+    const color =
+        (isBooleanSpec(spec) &&
+            spec.viewSpec.viewColor?.[stringValue as keyof typeof spec.viewSpec.viewColor]) ||
+        undefined;
+
     if (isString(value) && linkValue) {
         return <>{linkValue}</>;
     }
 
     return (
-        <LongValue value={(spec as StringSpec)?.description?.[String(value)] || String(value)} />
+        <LongValue
+            value={(spec as StringSpec)?.description?.[stringValue] || stringValue}
+            color={color}
+        />
     );
 };

src/stories/components/InputPreview/constants.ts

@@ -16,6 +16,23 @@ const required: BooleanSpec = {
     viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Required'},
 };
 
+const viewColor: ObjectSpec = {
+    type: SpecTypes.Object,
+    properties: {
+        true: {
+            type: SpecTypes.String,
+            enum: ['―', ...TEXT_COLORS],
+            viewSpec: {type: 'select', layout: 'transparent', placeholder: 'True value color'},
+        },
+        false: {
+            type: SpecTypes.String,
+            enum: ['―', ...TEXT_COLORS],
+            viewSpec: {type: 'select', layout: 'transparent', placeholder: 'False value color'},
+        },
+    },
+    viewSpec: {type: 'base', layout: 'row', layoutTitle: 'View color'},
+};
+
 const maxLength: NumberSpec = {
     type: SpecTypes.Number,
     viewSpec: {type: 'base', layout: 'row', layoutTitle: 'Max length'},
@@ -827,6 +844,7 @@ export const getBooleanOptions = (): ObjectSpec => ({
                 layoutOpen,
                 hidden,
                 inputProps,
+                viewColor,
             },
             [
                 'disabled',
@@ -837,6 +855,7 @@ export const getBooleanOptions = (): ObjectSpec => ({
                 'layoutOpen',
                 'hidden',
                 'inputProps',
+                'viewColor',
             ],
         ),
     },