PLASMA-6811: add numberFormatter func docs to finai

packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts

@@ -65,6 +65,7 @@ export const config = {
                 ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
 
                 ${tokens.indicatorColor}: var(--surface-negative);
+                ${tokens.hintIconColor}: var(--text-secondary);
 
                 ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card);
                 ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card);
@@ -154,6 +155,13 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
 
+                ${tokens.hintMargin}: -0.688rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintWithoutLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
+                ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem;
+
+                ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
+
                 ${tokens.embedIconButtonHeight}: 3.5rem;
                 ${tokens.embedIconButtonWidth}: 3.5rem;
                 ${tokens.embedIconButtonPadding}: 1rem;
@@ -309,6 +317,13 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
 
+                ${tokens.hintMargin}: -0.688rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintWithoutLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
+                ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem;
+
+                ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
+
                 ${tokens.embedIconButtonHeight}: 3rem;
                 ${tokens.embedIconButtonWidth}: 3rem;
                 ${tokens.embedIconButtonPadding}: 0.75rem;
@@ -464,6 +479,13 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
 
+                ${tokens.hintMargin}: -0.688rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintWithoutLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
+                ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem;
+
+                ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
+
                 ${tokens.embedIconButtonHeight}: 2.5rem;
                 ${tokens.embedIconButtonWidth}: 2.5rem;
                 ${tokens.embedIconButtonPadding}: 0.5rem;
@@ -619,6 +641,13 @@ export const config = {
                 ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
 
+                ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintWithoutLabelPlacementOffset}: -0.188rem -2.063rem auto auto;
+                ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem;
+
+                ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
+
                 ${tokens.embedIconButtonHeight}: 2rem;
                 ${tokens.embedIconButtonWidth}: 2rem;
                 ${tokens.embedIconButtonPadding}: 0.5rem;
@@ -799,6 +828,64 @@ export const config = {
                 ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness);
             `,
         },
+        hintView: {
+            default: css`
+                ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness);
+                ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m);
+                ${tokens.hintTooltipColor}: var(--text-primary);
+                ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness);
+            `,
+        },
+        hintSize: {
+            m: css`
+                ${tokens.hintTooltipPaddingTop}: 0.6875rem;
+                ${tokens.hintTooltipPaddingRight}: 0.875rem;
+                ${tokens.hintTooltipPaddingBottom}: 0.6875rem;
+                ${tokens.hintTooltipPaddingLeft}: 0.875rem;
+
+                ${tokens.hintTooltipMinHeight}: 2.5rem;
+                ${tokens.hintTooltipBorderRadius}: 0.625rem;
+
+                ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size);
+                ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${tokens.hintTooltipContentLeftMargin}: 0.375rem;
+
+                ${tokens.hintTooltipArrowMaskWidth}: 1.25rem;
+                ${tokens.hintTooltipArrowMaskHeight}: 1.25rem;
+                ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
+                ${tokens.hintTooltipArrowHeight}: 0.5rem;
+                ${tokens.hintTooltipArrowEdgeMargin}: 0.625rem;
+            `,
+            s: css`
+                ${tokens.hintTooltipPaddingTop}: 0.5rem;
+                ${tokens.hintTooltipPaddingRight}: 0.75rem;
+                ${tokens.hintTooltipPaddingBottom}: 0.5rem;
+                ${tokens.hintTooltipPaddingLeft}: 0.75rem;
+
+                ${tokens.hintTooltipMinHeight}: 2rem;
+                ${tokens.hintTooltipBorderRadius}: 0.5rem;
+
+                ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${tokens.hintTooltipContentLeftMargin}: 0.25rem;
+
+                ${tokens.hintTooltipArrowMaskWidth}: 1rem;
+                ${tokens.hintTooltipArrowMaskHeight}: 1rem;
+                ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
+                ${tokens.hintTooltipArrowHeight}: 0.375rem;
+                ${tokens.hintTooltipArrowEdgeMargin}: 0.5625rem;
+            `,
+        },
         disabled: {
             true: css`
                 ${tokens.disabledOpacity}: 0.4;

packages/sdds-finai/src/components/DatePicker/DatePicker.stories.tsx

@@ -15,7 +15,6 @@ const { meta: META, Default } = getDatePickerStories({
         'appearance',
         'hasClearDivider',
         'view',
-        'hasHint',
         'showShortcuts',
         'dateShortcutsWidth',
         'dateShortcutsPlacement',

packages/sdds-finai/src/components/DatePicker/DatePickerRange.stories.tsx

@@ -15,7 +15,6 @@ const { meta: META, Range } = getDatePickerRangeStories({
         'appearance',
         'hasClearDivider',
         'view',
-        'hasHint',
         'showShortcuts',
         'dateShortcutsWidth',
         'dateShortcutsPlacement',

website/sdds-finai-docs/docs/components/NumberFormat.mdx

@@ -166,3 +166,44 @@ export function App() {
     );
 }
 ```
+
+### Функция форматирования
+Для приведения числа к нужному формату можно использовать функцию `numberFormatter`.
+Она принимает два параметра:
+- строковое значение
+- объект с параметрами форматирования
+
+```tsx
+const num = 100.23
+const options = {
+    /**
+     * Разделитель тысяч.
+     * Может быть строкой (например, " ").
+     * @example 123 456 789
+     */
+    thousandSeparator: ' ',
+    /**
+     * Разделитель десятичных знаков (например, ".").
+     * @example 123.456
+     */
+    decimalSeparator: '.',
+    /**
+     * Количество знаков после запятой.
+     */
+    decimalScale: 3,
+    /**
+     * Фиксирует количество знаков после запятой, даже если число их не содержит (добавляет нули).
+     */
+    fixedDecimalScale: false,
+    /**
+     * Разрешает ввод отрицательных чисел.
+     */
+    allowNegative: true,
+    /**
+     * Разрешает ведущие нули (например, "0123").
+     */
+    allowLeadingZeros: false,
+}
+
+const value = numberFormatter(String(num), options)
+```