Добавлен компонент AccountSelect

.changeset/gold-panthers-swim.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-account-select': major
+---
+
+Добавлен новый компонент AccountSelect

.vscode/settings.json

@@ -12,6 +12,7 @@
     "eslint.workingDirectories": [
         "packages/accordion",
         "packages/action-button",
+        "packages/account-select",
         "packages/alert",
         "packages/amount",
         "packages/amount-input",

packages/account-select/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@alfalab/core-components-account-select",
+    "version": "0.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-select": "^18.0.1",
+        "@alfalab/core-components-popover": "^7.1.0",
+        "@alfalab/core-components-form-control": "^13.0.1",
+        "@alfalab/core-components-product-cover": "^2.0.1",
+        "@alfalab/core-components-mq": "^5.0.1",
+        "@maskito/core": "^1.7.0",
+        "@maskito/react": "^1.7.0",
+        "classnames": "^2.5.1",
+        "tslib": "^2.4.0"
+    },
+    "themesVersion": "14.0.1",
+    "varsVersion": "10.0.0"
+}

packages/account-select/src/Component.responsive.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+
+import { useIsDesktop } from '@alfalab/core-components-mq';
+
+import { AccountSelectDesktop } from './desktop';
+import { AccountSelectMobile } from './mobile';
+import type { AccountSelectResonsiveProps } from './types';
+
+export const AccountSelectResponsive = forwardRef<HTMLInputElement, AccountSelectResonsiveProps>(
+    ({ breakpoint, client, ...restProps }, ref) => {
+        const isDesktop = useIsDesktop(breakpoint);
+
+        if (isDesktop || client === 'desktop') {
+            return <AccountSelectDesktop ref={ref} {...restProps} />;
+        }
+
+        return <AccountSelectMobile ref={ref} {...restProps} />;
+    },
+);
+
+AccountSelectResponsive.displayName = 'AccountSelectResponsive';

packages/account-select/src/components/custom-field/index.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+
+import { FormControlDesktop } from '@alfalab/core-components-form-control/desktop';
+import { FormControlMobile } from '@alfalab/core-components-form-control/mobile';
+import { Field, FieldProps, OptionShape } from '@alfalab/core-components-select/shared';
+
+import { ADD_CARD_KEY } from '../../constants';
+import { MultiStepCardInput } from '../multi-step-card-input';
+
+export interface CustomFieldProps extends FieldProps {
+    view?: 'desktop' | 'mobile';
+}
+
+export const CustomField = ({
+    innerProps,
+    selected,
+    label,
+    onSubmit,
+    onInput,
+    needCvv,
+    needExpiryDate,
+    expiryAsDate,
+    view = 'desktop',
+    cardImage,
+    leftAddons,
+    ...restProps
+}: CustomFieldProps) => {
+    const valueRenderer = useCallback(
+        ({ selected: selectedOption }: { selected?: OptionShape }) => {
+            if (selectedOption?.key === ADD_CARD_KEY) {
+                return (
+                    <MultiStepCardInput
+                        onSubmit={onSubmit}
+                        onInput={onInput}
+                        cardImage={cardImage}
+                        needCvv={needCvv}
+                        needExpiryDate={needExpiryDate}
+                        expiryAsDate={expiryAsDate}
+                    />
+                );
+            }
+
+            return selectedOption?.content;
+        },
+        [onSubmit, onInput, cardImage, needCvv, needExpiryDate, expiryAsDate],
+    );
+
+    const FormControlComponent = view === 'mobile' ? FormControlMobile : FormControlDesktop;
+
+    return (
+        <Field
+            FormControlComponent={FormControlComponent}
+            label={selected ? null : label}
+            selected={selected}
+            innerProps={innerProps}
+            leftAddons={selected ? undefined : leftAddons}
+            {...restProps}
+            valueRenderer={valueRenderer}
+        />
+    );
+};

packages/account-select/src/components/multi-step-card-input/index.module.css

@@ -0,0 +1,44 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.multistepInput {
+    transition: width 0.3s ease-in-out;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.cardNumberInput {
+    width: 19ch;
+}
+
+.cardNumberInput:not(:focus) {
+    width: 5ch;
+}
+
+.expiryInput {
+    width: 7ch;
+}
+
+.cvvInput {
+    width: 4ch;
+}
+
+.multistepCardInputWrapper {
+    border: none;
+    background: transparent;
+    padding: 0;
+    display: flex;
+    gap: 24px;
+    align-items: center;
+}