@redneckz/wildless-cms-uni-blocks 0.14.996 → 0.14.998

package/src/components/RkoTariffCardsTable/renderMobileCard.tsx

@@ -0,0 +1,61 @@
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { type Option } from '../../ui-kit/Select/Option';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderCommissionSum } from '../CalculatorRko/renderCommissionSum';
+import { RKO_COMMISSIONS_TITLE_MAP } from './constants';
+import { renderHiddenCommission } from './renderHiddenCommission';
+
+type MobileCardProps = {
+  commissions: number[];
+  currency: Option;
+  isUnfolded: boolean;
+  handleFold: () => void;
+  commissionTypes?: string[];
+  isMobileMode?: boolean;
+  isBest?: boolean;
+};
+
+export const renderMobileCard = ({
+  commissions,
+  currency,
+  isUnfolded,
+  handleFold,
+  commissionTypes,
+  isBest = false,
+}: MobileCardProps) => {
+  const totalCommission = commissionTypes?.at(-1) ?? '';
+
+  return (
+    <Foldable className="py-4">
+      <div className="w-full space-y-xl">
+        <FoldableSection isUnfolded={isUnfolded} className="space-y-xl">
+          {commissions.map(
+            (commission, index) =>
+              index !== commissions.length - 1 &&
+              renderHiddenCommission({
+                commission,
+                currency,
+                commissionType: commissionTypes?.[index],
+                index,
+              }),
+          )}
+        </FoldableSection>
+        <div className="flex justify-between items-center">
+          <Text font="font-medium">{RKO_COMMISSIONS_TITLE_MAP[totalCommission]}</Text>
+          {renderCommissionSum(commissions.at(-1) ?? 0, currency, 'text-h2')}
+        </div>
+      </div>
+      <DefaultFoldButton
+        className="mt-m mx-auto"
+        label={isUnfolded ? 'Скрыть' : 'Подробнее'}
+        isUnfolded={isUnfolded}
+        embedded
+        labelColorStyle={isBest ? 'white' : ''}
+        onClick={handleFold}
+        short
+      />
+    </Foldable>
+  );
+};

package/src/components/RkoTariffCardsTable/renderRecommendedLabel.tsx

@@ -0,0 +1,9 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderRecommendedLabel = (isBest: boolean) => {
+  return isBest ? (
+    <div className="absolute block rounded-xl min-h-xs flex justify-center align-center bg-orange py-1 px-2 lg:ml-xl top-[-10px]">
+      <Text size="text-xs">Рекомендуем</Text>
+    </div>
+  ) : null;
+};

package/src/components/RkoTariffCardsTable/renderRkoTariffsTableHeader.tsx

@@ -0,0 +1,25 @@
+import { type ComponentType } from '../../model/ComponentType';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { RKO_COMMISSIONS_TITLE_MAP } from './constants';
+
+interface RkoTariffsTableHeader extends ComponentType {
+  params: string[];
+}
+
+export const renderRkoTariffsTableHeader = ({ params, className }: RkoTariffsTableHeader) => {
+  return params ? (
+    <div className={style(className)}>
+      <Text size="text-xs" font="font-medium" className="col-span-2">
+        {RKO_COMMISSIONS_TITLE_MAP['tariffName']}
+      </Text>
+      {params.map((param, index) => (
+        <div key={index}>
+          <Text size="text-xs" font="font-medium">
+            {RKO_COMMISSIONS_TITLE_MAP[param]}
+          </Text>
+        </div>
+      ))}
+    </div>
+  ) : null;
+};

package/src/model/FormTypeFieldDef.ts

@@ -26,4 +26,5 @@ export type FormTypeFieldDef =
   | 'FINOMBUDSMAN'
   | 'PF'
   | 'UNIVERSAL'
-  | 'PRACTICE';
+  | 'PRACTICE'
+  | 'CALC';

package/src/ui-kit/Button/ButtonTitle.tsx

@@ -2,10 +2,15 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-export const ButtonTitle = JSX<ComponentType>(({ className, children }) => (
+interface ButtonTitleProps extends ComponentType {
+  labelColor?: string;
+}
+
+export const ButtonTitle = JSX<ButtonTitleProps>(({ className, labelColor, children }) => (
   <span
     className={style(
-      'inline-flex items-center text-start gap-s group-[]/btn-embedded:text-primary-main',
+      'inline-flex items-center text-start gap-s',
+      labelColor === 'white' ? 'text-white' : 'group-[]/btn-embedded:text-primary-main',
       className,
     )}
   >

package/src/ui-kit/Calculator/CalculatorStyle.tsx

@@ -1,5 +1,7 @@
 export const CalculatorStyle = {
   wrapper: 'flex flex-col justify-between lg:flex-row gap-4xl',
+  wrapperMax: 'w-full',
   input: 'flex flex-col lg:w-1/2 gap-2xl',
+  inputMax: 'grid lg:grid-cols-2 grid-cols-1 gap-4xl',
   result: 'flex flex-col gap-y-xl min-w-52',
 };

package/src/ui-kit/Calculator/renderCountInput.tsx

@@ -0,0 +1,13 @@
+import { InputRange } from '../InputRange/InputRange';
+import { type InputRangeProps } from '../InputRange/InputRangeProps';
+
+const DEFAULT_AMOUNT_STEP = 1;
+
+export const renderCountInput = ({
+  min = 0,
+  max = 0,
+  step = DEFAULT_AMOUNT_STEP,
+  ...rest
+}: InputRangeProps) => (
+  <InputRange items={[`От ${min} шт`, `До ${max} шт`]} step={step} {...rest} />
+);

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -8,6 +8,7 @@ import { ToggleIcon } from '../Icon/ToggleIcon';
 interface DefaultFoldButtonProps extends ButtonProps, LabelProps {
   isUnfolded?: boolean;
   short?: boolean;
+  labelColorStyle?: string;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
@@ -17,18 +18,23 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
     short,
     label = isUnfolded ? 'Скрыть' : 'Развернуть',
     embedded,
+    labelColorStyle,
     ...rest
-  }) => (
-    <Button
-      className={style({ 'w-full': !short }, className)}
-      embedded={embedded}
-      shape={short ? 'default' : 'square'}
-      role="tab"
-      aria-label="Кнопка сворачивающейся секции"
-      {...rest}
-    >
-      <ButtonTitle>{label}</ButtonTitle>
-      <ToggleIcon isUnfolded={isUnfolded} iconVersion={embedded ? 'color' : ''} />
-    </Button>
-  ),
+  }) => {
+    const iconColor = labelColorStyle === 'white' ? '' : 'color';
+
+    return (
+      <Button
+        className={style({ 'w-full': !short }, className)}
+        embedded={embedded}
+        shape={short ? 'default' : 'square'}
+        role="tab"
+        aria-label="Кнопка сворачивающейся секции"
+        {...rest}
+      >
+        <ButtonTitle labelColor={labelColorStyle}>{label}</ButtonTitle>
+        <ToggleIcon isUnfolded={isUnfolded} iconVersion={embedded ? iconColor : ''} />
+      </Button>
+    );
+  },
 );

package/src/ui-kit/Text/Text.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import {
   type FontWeight,
@@ -8,13 +9,13 @@ import {
   type TitleSize,
 } from './TextProps';
 
-interface TextProps {
+interface TextProps extends ComponentType {
   size?: TextSize | TitleSize;
   color?: TextColor;
   align?: TextAlign;
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>(({ children, ...styleProps }) => (
-  <span className={style('font-sans', Object.values(styleProps))}>{children}</span>
+export const Text = JSX<TextProps>(({ children, className, ...styleProps }) => (
+  <span className={style('font-sans', Object.values(styleProps), className)}>{children}</span>
 ));

package/tailwind.config.cjs

@@ -203,6 +203,11 @@ module.exports = {
           },
         ],
       },
+      gridTemplateColumns: {
+        '7': 'repeat(7, minmax(0, 120px))',
+        '8': 'repeat(8, minmax(0, 120px))',
+        '9': 'repeat(9, minmax(0, 120px))',
+      },
       colors: {
         main: {
           DEFAULT: 'rgba(240, 244, 240, <alpha-value>)',
@@ -237,6 +242,7 @@ module.exports = {
         'green-more-dark': 'rgba(var(--color-green-more-dark), <alpha-value>)',
         yellow: 'rgba(var(--color-yellow), <alpha-value>)',
         'yellow-light': 'rgba(206, 200, 51, <alpha-value>)',
+        'orange': 'rgba(236, 160, 37, <alpha-value>)',
         gray: 'rgba(var(--color-gray), <alpha-value>)',
         error: 'rgba(242, 48, 48, <alpha-value>)',
       },
@@ -294,5 +300,5 @@ module.exports = {
       });
     },
   ],
-  safelist: [],
+  safelist: [{ pattern: /grid-cols-(2|3|4|5|6|7|8|9|10)/,  variants: ['sm', 'md', 'lg', 'xl'], }],
 };