feat: made a new password input component

src/components/Password/Password.scss

@@ -0,0 +1,11 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}password';
+
+#{$block} {
+    display: flex;
+
+    &__button {
+        --yc-button-background-color-hover: transparent;
+    }
+}

src/components/Password/Password.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {Copy, CopyCheck, Eye, EyeSlash} from '@gravity-ui/icons';
+import {
+    Button,
+    CopyToClipboard,
+    CopyToClipboardStatus,
+    Icon,
+    TextInput,
+    TextInputProps,
+} from '@gravity-ui/uikit';
+import _ from 'lodash';
+
+import {block} from '../utils/cn';
+
+import './Password.scss';
+
+const b = block('password');
+
+export type PasswordProps = Required<Pick<TextInputProps, 'onUpdate' | 'value'>> &
+    Omit<TextInputProps, 'rightContent' | 'type'> & {
+        showCopyButton?: boolean;
+    };
+
+export const Password: React.FC<PasswordProps> = (props) => {
+    const {autoComplete, value, showCopyButton} = props;
+
+    const [hideValue, setHideValue] = React.useState(true);
+
+    const additionalRightContent = React.useMemo(() => {
+        const onClick = () => {
+            setHideValue((hideValue) => !hideValue);
+        };
+
+        return (
+            <div className={b()}>
+                {value && showCopyButton ? (
+                    <CopyToClipboard text={String(value)} timeout={500}>
+                        {(state) => (
+                            <Button view="flat-secondary" className={b('button')} size="s">
+                                <Icon
+                                    size={14}
+                                    data={
+                                        state === CopyToClipboardStatus.Pending ? Copy : CopyCheck
+                                    }
+                                />
+                            </Button>
+                        )}
+                    </CopyToClipboard>
+                ) : null}
+                <Button view="flat-secondary" onClick={onClick} className={b('button')} size="s">
+                    <Icon data={hideValue ? Eye : EyeSlash} size={14} />
+                </Button>
+            </div>
+        );
+    }, [hideValue, value, showCopyButton]);
+
+    return (
+        <TextInput
+            {...props}
+            type={hideValue ? 'password' : 'text'}
+            rightContent={additionalRightContent}
+            autoComplete={autoComplete ? autoComplete : 'new-password'}
+        />
+    );
+};

src/components/Password/README.md

@@ -0,0 +1,26 @@
+## Password
+
+Password display component
+
+### PropTypes
+
+Same as [TextInput component](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md), with some exceptions:
+
+- `value` is required property;
+- `onUpdate` is required property;
+- `rightContent` is omitted;
+- `type` is omitted;
+
+| Property       | Type      | Required | Description      |
+| :------------- | :-------- | :------- | :--------------- |
+| showCopyButton | `boolean` |          | show copy button |
+
+#### Usage example
+
+```jsx harmony
+function MyComponent() {
+  const [value, setValue] = React.useState('');
+
+  return <Password showCopyButton={true} onUpdate={setValue} value={value} />;
+}
+```

src/components/Password/__stories__/Password.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Password} from '../Password';
+
+export default {
+    title: 'Components/Password',
+    component: Password,
+} as Meta;
+
+const DefaultTemplate: StoryFn<React.ComponentProps<typeof Password>> = () => {
+    const [value, setValue] = React.useState('');
+
+    return <Password showCopyButton={true} onUpdate={setValue} value={value} />;
+};
+
+export const Default = DefaultTemplate.bind({});

src/components/Password/index.ts

@@ -0,0 +1 @@
+export * from './Password';