From a6ac433fda89735633bbd1ca9b5a50801e26588f Mon Sep 17 00:00:00 2001 From: Divyanshu Gupta Date: Fri, 3 Oct 2025 16:22:51 +0530 Subject: [PATCH] chore(password generator, button): move demos to separate files --- .../react-core/src/demos/Button/Button.md | 19 ++++++++++++++++ .../examples/ButtonProgress.tsx} | 20 +---------------- .../PasswordGenerator/PasswordGenerator.md | 16 ++++++++++++++ .../examples/PasswordGenerator.tsx} | 22 +++---------------- 4 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 packages/react-core/src/demos/Button/Button.md rename packages/react-core/src/demos/{Button.md => Button/examples/ButtonProgress.tsx} (74%) create mode 100644 packages/react-core/src/demos/PasswordGenerator/PasswordGenerator.md rename packages/react-core/src/demos/{PasswordGenerator.md => PasswordGenerator/examples/PasswordGenerator.tsx} (91%) diff --git a/packages/react-core/src/demos/Button/Button.md b/packages/react-core/src/demos/Button/Button.md new file mode 100644 index 00000000000..8214d9892fc --- /dev/null +++ b/packages/react-core/src/demos/Button/Button.md @@ -0,0 +1,19 @@ +--- +id: Button +section: components +--- + +import { useState } from 'react'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; + +## Demos + +### Progress button + +The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. + +Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. + +```ts file="./examples/ButtonProgress.tsx" + +``` diff --git a/packages/react-core/src/demos/Button.md b/packages/react-core/src/demos/Button/examples/ButtonProgress.tsx similarity index 74% rename from packages/react-core/src/demos/Button.md rename to packages/react-core/src/demos/Button/examples/ButtonProgress.tsx index 43db232d7a0..c0ea8c5d53c 100644 --- a/packages/react-core/src/demos/Button.md +++ b/packages/react-core/src/demos/Button/examples/ButtonProgress.tsx @@ -1,25 +1,8 @@ ---- -id: Button -section: components ---- - -import { useState } from 'react'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; - -## Demos - -### Progress button - -The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. - -Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. - -```ts import { useState } from 'react'; import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -const ProgressButton: React.FunctionComponent = () => { +export const ButtonProgress: React.FunctionComponent = () => { const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn'); return ( @@ -69,4 +52,3 @@ const ProgressButton: React.FunctionComponent = () => { ); }; -``` diff --git a/packages/react-core/src/demos/PasswordGenerator/PasswordGenerator.md b/packages/react-core/src/demos/PasswordGenerator/PasswordGenerator.md new file mode 100644 index 00000000000..c859ae2ee43 --- /dev/null +++ b/packages/react-core/src/demos/PasswordGenerator/PasswordGenerator.md @@ -0,0 +1,16 @@ +--- +id: Password generator +section: patterns +--- + +import { useEffect, useRef, useState } from 'react'; +import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon'; +import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon'; +import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'; + +## Demos + +### Provide a generated password + +```ts file="./examples/PasswordGenerator.tsx" +``` diff --git a/packages/react-core/src/demos/PasswordGenerator.md b/packages/react-core/src/demos/PasswordGenerator/examples/PasswordGenerator.tsx similarity index 91% rename from packages/react-core/src/demos/PasswordGenerator.md rename to packages/react-core/src/demos/PasswordGenerator/examples/PasswordGenerator.tsx index 59befc64fb1..7eacc716e17 100644 --- a/packages/react-core/src/demos/PasswordGenerator.md +++ b/packages/react-core/src/demos/PasswordGenerator/examples/PasswordGenerator.tsx @@ -1,18 +1,3 @@ ---- -id: Password generator -section: patterns ---- - -import { useEffect, useRef, useState } from 'react'; -import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon'; -import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon'; -import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'; - -## Demos - -### Provide a generated password - -```ts import { useEffect, useRef, useState } from 'react'; import { InputGroup, @@ -30,12 +15,12 @@ import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon'; import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon'; import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'; -const PasswordGenerator: React.FunctionComponent = () => { +export const PasswordGenerator: React.FunctionComponent = () => { const generatePassword = () => { const length = 12; const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@%()_-=+'; let retVal = ''; - for (var i = 0, n = charset.length; i < length; ++i) { + for (let i = 0, n = charset.length; i < length; ++i) { retVal += charset.charAt(Math.floor(Math.random() * n)); } return retVal; @@ -153,7 +138,7 @@ const PasswordGenerator: React.FunctionComponent = () => { actions={ } - onClick={(e) => { + onClick={(_e) => { setGeneratedPassword(generatePassword()); }} actionId="redo" @@ -181,4 +166,3 @@ const PasswordGenerator: React.FunctionComponent = () => { /> ); }; -```