Merge pull request #39 from input-output-hk/feat/uncontrolled-input

feat: add UncontrolledPasswordBox

Author: mchappell

src/design-system/index.ts

@@ -24,7 +24,13 @@ export { ToastBar } from './toast-bar';
 export * from './tooltip';
 export { Message } from './message';
 export { Metadata, MetadataLink } from './metadata';
-export { PasswordBox } from './password-box';
+export { PasswordBox, UncontrolledPasswordBox } from './password-box';
+export type {
+  UncontrolledPasswordBoxProps,
+  PasswordBoxProps,
+  OnPasswordChange,
+  Password,
+} from './password-box';
 export { TextLink } from './text-link';
 export * as ProfileDropdown from './profile-dropdown';
 export type { AccountData } from './profile-dropdown';

src/design-system/password-box/index.ts

@@ -1,2 +1,8 @@
 export { PasswordBox } from './password-box.component';
 export type { PasswordBoxProps } from './password-box.component';
+export { UncontrolledPasswordBox } from './uncontrolled-password-box.component';
+export type { UncontrolledPasswordBoxProps } from './uncontrolled-password-box.component';
+export type {
+  OnPasswordChange,
+  Password,
+} from './uncontrolled-password-box-input.component';

src/design-system/password-box/uncontrolled-password-box-input.component.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import * as Form from '@radix-ui/react-form';
+import cn from 'classnames';
+
+import { Flex } from '../flex';
+import { Text } from '../text';
+
+import { PasswordInputButton } from './password-box-button.component';
+import * as cx from './password-box-input.css';
+
+export type Password = {
+  input: HTMLInputElement;
+  // TODO: convert this to UInt8Array
+  value: string;
+};
+
+export type OnPasswordChange = (event: Readonly<Password>) => void;
+
+export interface UncontrolledPasswordInputProps
+  extends Omit<Form.FormControlProps, 'value' | 'onChange'> {
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+  label: string;
+  name?: string;
+  errorMessage?: string;
+  onChange: OnPasswordChange;
+  defaultIsPasswordVisible?: boolean;
+  containerClassName?: string;
+  containerStyle?: React.CSSProperties;
+  testId?: string;
+}
+
+export const UncontrolledPasswordInput = ({
+  required = false,
+  disabled = false,
+  id,
+  label,
+  name,
+  errorMessage = '',
+  containerClassName = '',
+  onChange,
+  defaultIsPasswordVisible = false,
+  containerStyle,
+  testId,
+}: Readonly<UncontrolledPasswordInputProps>): JSX.Element => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(
+    defaultIsPasswordVisible,
+  );
+
+  const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = event =>
+    onChange({ input: event.target, value: event.target.value });
+
+  return (
+    <div className={cx.root}>
+      <Form.Field
+        name="field"
+        className={cn(cx.container, {
+          [cx.disabledContainer]: disabled,
+          [containerClassName]: containerClassName,
+        })}
+        style={containerStyle}
+      >
+        <Flex justifyContent="space-between" alignItems="center">
+          <Form.Control asChild>
+            <input
+              type={isPasswordVisible ? 'text' : 'password'}
+              required={required}
+              placeholder=""
+              className={cn(cx.input, { [cx.largeDots]: !isPasswordVisible })}
+              disabled={disabled}
+              name={name}
+              onChange={onChangeHandler}
+              id={id}
+              data-testid={testId}
+            />
+          </Form.Control>
+          <Form.Label
+            className={cn(cx.label, { [cx.disabledLabel]: disabled })}
+          >
+            {label}
+          </Form.Label>
+          <PasswordInputButton
+            testId={testId && `${testId}-toggle`}
+            onClick={(event): void => {
+              event.preventDefault();
+              setIsPasswordVisible(!isPasswordVisible);
+            }}
+            disabled={disabled}
+            isPasswordVisible={isPasswordVisible}
+          />
+        </Flex>
+      </Form.Field>
+      {errorMessage && (
+        <Text.Label color="error" className={cx.errorMessage}>
+          {errorMessage}
+        </Text.Label>
+      )}
+    </div>
+  );
+};

src/design-system/password-box/uncontrolled-password-box.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import * as Form from '@radix-ui/react-form';
+
+import { UncontrolledPasswordInput } from './uncontrolled-password-box-input.component';
+
+import type { UncontrolledPasswordInputProps } from './uncontrolled-password-box-input.component';
+
+export interface UncontrolledPasswordBoxProps
+  extends UncontrolledPasswordInputProps {
+  rootStyle?: React.CSSProperties;
+  onSubmit: (event: Readonly<React.FormEvent>) => void;
+}
+
+export const UncontrolledPasswordBox = ({
+  rootStyle,
+  onSubmit,
+  ...props
+}: Readonly<UncontrolledPasswordBoxProps>): JSX.Element => {
+  return (
+    <Form.Root style={rootStyle} onSubmit={onSubmit}>
+      <UncontrolledPasswordInput {...props} />
+    </Form.Root>
+  );
+};