feat(unstable): add overview layouts and entities

src/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.tsx

@@ -30,6 +30,8 @@ const SchemaRendererNodeComponent: React.FC<SchemaRendererNodeProps> = ({
 }) => {
     const form = useForm();
 
+    const firstRenderRef = React.useRef(true);
+    const pendingTicksRef = React.useRef({input: 0, meta: 0});
     const fieldRef = React.useRef<FieldState<any>>(null);
     const unsubscribeRef = React.useRef<() => void>(null);
     const [ticks, setTicks] = React.useState({input: 0, meta: 0});
@@ -88,7 +90,14 @@ const SchemaRendererNodeComponent: React.FC<SchemaRendererNodeProps> = ({
                     }
 
                     if (inputTick + metaTick) {
-                        setTicks((t) => ({input: t.input + inputTick, meta: t.meta + metaTick}));
+                        if (firstRenderRef.current) {
+                            pendingTicksRef.current = {input: inputTick, meta: metaTick};
+                        } else {
+                            setTicks((t) => ({
+                                input: t.input + inputTick,
+                                meta: t.meta + metaTick,
+                            }));
+                        }
                     }
                 }
 
@@ -129,6 +138,15 @@ const SchemaRendererNodeComponent: React.FC<SchemaRendererNodeProps> = ({
     }, [error, form, name, ticks.meta]);
 
     React.useEffect(() => {
+        firstRenderRef.current = false;
+
+        if (pendingTicksRef.current.input || pendingTicksRef.current.meta) {
+            setTicks((t) => ({
+                input: t.input + pendingTicksRef.current.input,
+                meta: t.meta + pendingTicksRef.current.meta,
+            }));
+        }
+
         return () => {
             unsubscribeRef.current?.();
         };

src/lib/unstable/core/types/components.ts

@@ -25,7 +25,7 @@ export interface NodeLayoutProps<Schema extends JsonSchema, Props extends Record
 export type NodeLayout<
     Schema extends JsonSchema,
     Props extends Record<string, any> = {},
-> = React.ComponentType<NodeLayoutProps<Schema, Props>>;
+> = React.FC<NodeLayoutProps<Schema, Props>>;
 
 export interface NodeEntityProps<
     Schema extends JsonSchema,
@@ -45,4 +45,4 @@ export type NodeEntity<
     Schema extends JsonSchema,
     Props extends Record<string, any> = {},
     LayoutProps extends Record<string, any> = {},
-> = React.ComponentType<NodeEntityProps<Schema, Props, LayoutProps>>;
+> = React.FC<NodeEntityProps<Schema, Props, LayoutProps>>;

src/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.tsx

@@ -12,11 +12,7 @@ export interface ArrayRemoveButtonProps {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const ArrayRemoveButtonComponent: React.FC<ArrayRemoveButtonProps> = ({
-    name,
-    headName,
-    onClick,
-}) => {
+export const ArrayRemoveButton: React.FC<ArrayRemoveButtonProps> = ({name, headName, onClick}) => {
     const form = useForm();
 
     const [ready, setReady] = React.useState(false);
@@ -58,5 +54,3 @@ const ArrayRemoveButtonComponent: React.FC<ArrayRemoveButtonProps> = ({
 
     return null;
 };
-
-export const ArrayRemoveButton = React.memo(ArrayRemoveButtonComponent);

src/lib/unstable/kit/components/CopyButton/CopyButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import {ClipboardButton} from '@gravity-ui/uikit';
-import {isNumber, isString} from 'lodash';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
 
 import {block} from '../../utils';
 
@@ -15,7 +16,7 @@ export interface CopyButtonProps {
     value: unknown;
 }
 
-const CopyButtonComponent: React.FC<CopyButtonProps> = ({className, copy, value}) => {
+export const CopyButton: React.FC<CopyButtonProps> = ({className, copy, value}) => {
     if (copy && (isString(value) || isNumber(value))) {
         return (
             <div className={b(null, className)}>
@@ -26,5 +27,3 @@ const CopyButtonComponent: React.FC<CopyButtonProps> = ({className, copy, value}
 
     return null;
 };
-
-export const CopyButton = React.memo(CopyButtonComponent);

src/lib/unstable/kit/components/EmptyEntityValue/EmptyEntityValue.tsx

@@ -3,12 +3,10 @@ import React from 'react';
 import {DASH} from '../../constants';
 import {EntityContainer} from '../EntityContainer';
 
-const EmptyEntityValueComponent: React.FC = () => {
+export const EmptyEntityValue: React.FC = () => {
     return (
         <EntityContainer stretch="fit" fill="empty">
             {DASH}
         </EntityContainer>
     );
 };
-
-export const EmptyEntityValue = React.memo(EmptyEntityValueComponent);

src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx

@@ -14,7 +14,7 @@ export interface EntityContainerProps extends FlexProps {
     stretch: 'max' | 'fit' | 'by-child';
 }
 
-const EntityContainerComponent: React.FC<EntityContainerProps> = ({
+export const EntityContainer: React.FC<EntityContainerProps> = ({
     children,
     fill,
     stretch,
@@ -28,5 +28,3 @@ const EntityContainerComponent: React.FC<EntityContainerProps> = ({
         </div>
     );
 };
-
-export const EntityContainer = React.memo(EntityContainerComponent);

src/lib/unstable/kit/components/LayoutContainer/LayoutContainer.tsx

@@ -13,7 +13,7 @@ export interface LayoutContainerProps extends FlexProps {
     hideEmpty?: boolean;
 }
 
-const LayoutContainerComponent: React.FC<LayoutContainerProps> = ({
+export const LayoutContainer: React.FC<LayoutContainerProps> = ({
     className,
     children,
     hideEmpty = false,
@@ -25,5 +25,3 @@ const LayoutContainerComponent: React.FC<LayoutContainerProps> = ({
         </Flex>
     );
 };
-
-export const LayoutContainer = React.memo(LayoutContainerComponent);

src/lib/unstable/kit/components/LongValue/LongValue.tsx

@@ -13,7 +13,7 @@ export interface LongValueProps extends Omit<TextProps, 'children'> {
     value?: string | number | boolean;
 }
 
-const LongValueComponent: React.FC<LongValueProps> = ({
+export const LongValue: React.FC<LongValueProps> = ({
     className,
     color,
     onClick,
@@ -77,5 +77,3 @@ const LongValueComponent: React.FC<LongValueProps> = ({
         </Text>
     );
 };
-
-export const LongValue = React.memo(LongValueComponent);

src/lib/unstable/kit/constants/common.ts

@@ -1 +1,3 @@
 export const DASH = '—';
+
+export const DEFAULT_DATE_FORMAT = 'DD.MM.YYYY HH:mm';