feat: Add PromptInput component

pages/prompt-input/permutations.page.tsx

@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import PromptInput, { PromptInputProps } from '~components/prompt-input';
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import img from '../icon/custom-icon.png';
+
+const permutations = createPermutations<PromptInputProps>([
+  {
+    invalid: [false, true],
+    warning: [false, true],
+    actionButtonIconName: [undefined, 'send'],
+    value: [
+      '',
+      'Short value',
+      'Long value, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    ],
+  },
+  {
+    value: [''],
+    placeholder: [
+      'Short placeholder',
+      'Long placeholder, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    ],
+  },
+  {
+    disabled: [false, true],
+    actionButtonIconName: [undefined, 'send'],
+    value: ['', 'Short value'],
+  },
+  {
+    value: [
+      '',
+      'Short value',
+      'Long value, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    ],
+    actionButtonIconSvg: [
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" key="0">
+        <g>
+          <line x1="5.5" y1="12" x2="5.5" y2="15" />
+          <line x1="0.5" y1="15" x2="10.5" y2="15" />
+          <rect x="1" y="5" width="9" height="7" />
+          <polyline points="5 4 5 1 14 1 14 8 10 8" />
+        </g>
+      </svg>,
+    ],
+  },
+  {
+    value: [
+      '',
+      'Short value',
+      'Long value, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    ],
+    actionButtonIconUrl: [img],
+    actionButtonIconAlt: ['Letter A'],
+  },
+]);
+
+export default function PromptInputPermutations() {
+  return (
+    <>
+      <h1>PromptInput permutations</h1>
+      <ScreenshotArea>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <PromptInput
+              ariaLabel="Prompt input field"
+              actionButtonAriaLabel="Action button aria label"
+              onChange={() => {
+                /*empty handler to suppress react controlled property warning*/
+              }}
+              {...permutation}
+            />
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}

pages/prompt-input/prompt-input-integ.page.tsx

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import PromptInput from '~components/prompt-input';
+
+export default function Page() {
+  const [value, setValue] = useState('');
+  const [submitStatus, setSubmitStatus] = useState(false);
+  const [isKeyboardSubmittingDisabled, setDisableKeyboardSubmitting] = useState(false);
+
+  return (
+    <div id="test">
+      <h1>Prompt input submit check</h1>
+      {submitStatus ? <div id="submit-success">Submitted</div> : null}
+      <form
+        onSubmit={event => {
+          console.log('submitted');
+          event.preventDefault();
+          setSubmitStatus(true);
+        }}
+      >
+        <PromptInput
+          ariaLabel="test prompt input"
+          actionButtonIconName="send"
+          actionButtonAriaLabel="Send"
+          value={value}
+          onChange={event => setValue(event.detail.value)}
+          onAction={() => window.alert('Sent message!')}
+          onKeyDown={event => {
+            if (isKeyboardSubmittingDisabled) {
+              console.log('prevent!');
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          }}
+        />
+        <button id="disable-form-submitting" onClick={() => setDisableKeyboardSubmitting(true)} type="button">
+          Disable keyboard form submitting
+        </button>
+      </form>
+    </div>
+  );
+}

pages/prompt-input/simple.page.tsx

@@ -0,0 +1,103 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState, useContext, useEffect } from 'react';
+import ColumnLayout from '~components/column-layout';
+import FormField from '~components/form-field';
+import PromptInput from '~components/prompt-input';
+import SpaceBetween from '~components/space-between';
+import Checkbox from '~components/checkbox';
+import AppContext, { AppContextType } from '../app/app-context';
+
+const MAX_CHARS = 200;
+
+type DemoContext = React.Context<
+  AppContextType<{
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    isInvalid: boolean;
+    hasWarning: boolean;
+    hasText: boolean;
+  }>
+>;
+
+const placeholderText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+export default function PromptInputPage() {
+  const [textareaValue, setTextareaValue] = useState('');
+  const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
+
+  const { isDisabled, isReadOnly, isInvalid, hasWarning, hasText } = urlParams;
+
+  useEffect(() => {
+    if (hasText) {
+      setTextareaValue(placeholderText);
+    }
+  }, [hasText]);
+
+  useEffect(() => {
+    if (textareaValue !== placeholderText) {
+      setUrlParams({ hasText: false });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [textareaValue]);
+
+  const ref = React.createRef<HTMLTextAreaElement>();
+
+  return (
+    <div style={{ padding: 10 }}>
+      <h1>PromptInput demo</h1>
+      <SpaceBetween size="xl">
+        <FormField label="Settings">
+          <Checkbox checked={isDisabled} onChange={() => setUrlParams({ isDisabled: !isDisabled })}>
+            Disabled
+          </Checkbox>
+          <Checkbox checked={isReadOnly} onChange={() => setUrlParams({ isReadOnly: !isReadOnly })}>
+            Read-only
+          </Checkbox>
+          <Checkbox checked={isInvalid} onChange={() => setUrlParams({ isInvalid: !isInvalid })}>
+            Invalid
+          </Checkbox>
+          <Checkbox checked={hasWarning} onChange={() => setUrlParams({ hasWarning: !hasWarning })}>
+            Warning
+          </Checkbox>
+        </FormField>
+        <button id="placeholder-text-button" onClick={() => setUrlParams({ hasText: true })}>
+          Fill with placeholder text
+        </button>
+
+        <button onClick={() => ref.current?.focus()}>Focus component</button>
+        <button onClick={() => ref.current?.select()}>Select all text</button>
+
+        <ColumnLayout columns={2}>
+          <FormField
+            errorText={textareaValue.length > MAX_CHARS && 'The query has too many characters.'}
+            constraintText={
+              <>
+                This service is subject to some policy. Character count: {textareaValue.length}/{MAX_CHARS}
+              </>
+            }
+            label={<span>User prompt</span>}
+            i18nStrings={{ errorIconAriaLabel: 'Error' }}
+          >
+            <PromptInput
+              actionButtonIconName="send"
+              actionButtonAriaLabel="Submit prompt"
+              value={textareaValue}
+              onChange={(event: any) => setTextareaValue(event.detail.value)}
+              onAction={event => window.alert(`Submitted the following: ${event.detail.value}`)}
+              placeholder="Ask a question"
+              maxRows={4}
+              disabled={isDisabled}
+              readOnly={isReadOnly}
+              invalid={isInvalid || textareaValue.length > MAX_CHARS}
+              warning={hasWarning}
+              ref={ref}
+            />
+          </FormField>
+          <div />
+        </ColumnLayout>
+      </SpaceBetween>
+    </div>
+  );
+}