import React, { useState, useEffect } from "react"; import PasswordInput from "."; import TextInput from "../text-input"; import PasswordInputDocs from "./password-input.mdx"; const disable = { table: { disable: true, }, }; export default { title: "Components/PasswordInput", component: PasswordInput, parameters: { docs: { description: { component: "Paging is used to navigate med content pages", }, page: PasswordInputDocs, }, }, argTypes: { settingMinLength: disable, settingsUpperCase: disable, settingsDigits: disable, settingsSpecSymbols: disable, }, }; const Template = ({ settingMinLength, settingsUpperCase, settingsDigits, settingsSpecSymbols, tooltipPasswordLength, onChange, onValidateInput, onCopyToClipboard, ...args }) => { const [value, setValue] = useState(""); const [fakeSettings, setFakSettings] = useState(); useEffect(() => { setFakSettings({ minLength: settingMinLength, upperCase: settingsUpperCase, digits: settingsDigits, specSymbols: settingsSpecSymbols, }); setValue(""); }, [ settingMinLength, settingsUpperCase, settingsDigits, settingsSpecSymbols, ]); const onChangeHandler = (e) => { onChange(e.currentTarget.value); setValue(e.currentTarget.value); }; const onValidateInputHandler = (e) => { onValidateInput(e); }; return (