feat(ui): adds input element, ref #4810

leather-io · Jan 24, 2024 · e223b0a · e223b0a
1 parent a6e116c
commit e223b0a
Show file tree

Hide file tree

Showing 11 changed files with 545 additions and 206 deletions.
diff --git a/package.json b/package.json
@@ -241,8 +241,9 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
+    "@leather-wallet/tokens": "0.0.5",
     "@ls-lint/ls-lint": "2.2.2",
-    "@pandacss/dev": "0.26.2",
+    "@pandacss/dev": "0.27.1",
     "@playwright/test": "1.40.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@redux-devtools/cli": "4.0.0",

diff --git a/src/app/common/hooks/use-event-listener.ts b/src/app/common/hooks/use-event-listener.ts
@@ -43,32 +43,32 @@ const isBrowser = checkIsBrowser();
  *
  * @param event the event name
  * @param handler the event handler function to execute
- * @param doc the dom environment to execute against (defaults to `document`)
+ * @param element the dom environment to execute against (defaults to `document`)
  * @param options the event listener options
  */
 export function useEventListener(
   event: keyof WindowEventMap,
   handler: (event: any) => void,
-  doc: Document | null = isBrowser ? document : null,
+  element: Document | null = isBrowser ? document : null,
   options?: AddEventListener[2]
 ) {
   const savedHandler = useLatestRef(handler);
 
   useEffect(() => {
-    if (!doc) return;
+    if (!element) return;
 
     const listener = (event: any) => {
       savedHandler.current(event);
     };
 
-    doc.addEventListener(event, listener, options);
+    element.addEventListener(event, listener, options);
 
     return () => {
-      doc.removeEventListener(event, listener, options);
+      element.removeEventListener(event, listener, options);
     };
-  }, [event, doc, options, savedHandler]);
+  }, [event, element, options, savedHandler]);
 
   return () => {
-    doc?.removeEventListener(event, savedHandler.current, options);
+    element?.removeEventListener(event, savedHandler.current, options);
   };
 }
diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
@@ -52,10 +52,7 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input
           },
         },
         '&[data-state=error]': {
-          _before: {
-            ...psuedoBorderStyles,
-            border: 'error',
-          },
+          _before: { ...psuedoBorderStyles, border: 'error' },
         },
         /**
          * Focus styling:

diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
@@ -22,7 +22,7 @@ import {
   useNetworksActions,
 } from '@app/store/networks/networks.hooks';
 import { Button } from '@app/ui/components/button/button';
-import { Input } from '@app/ui/components/input';
+import { Input } from '@app/ui/components/input/input';
 import { Title } from '@app/ui/components/typography/title';
 
 /**
@@ -70,14 +70,14 @@ export function AddNetwork() {
 
   const setStacksUrl = useCallback(
     (value: string) => {
-      setFieldValue('stacksUrl', value);
+      void setFieldValue('stacksUrl', value);
     },
     [setFieldValue]
   );
 
   const setBitcoinUrl = useCallback(
     (value: string) => {
-      setFieldValue('bitcoinUrl', value);
+      void setFieldValue('bitcoinUrl', value);
     },
     [setFieldValue]
   );
@@ -224,17 +224,17 @@ export function AddNetwork() {
                 </a>
                 . Make sure you review and trust the host before you add it.
               </styled.span>
-              <Input
-                autoFocus
-                borderRadius="sm"
-                height="64px"
-                onChange={formikProps.handleChange}
-                name="name"
-                placeholder="Name"
-                value={formikProps.values.name}
-                width="100%"
-                data-testid={NetworkSelectors.NetworkName}
-              />
+              <Input.Root>
+                <Input.Label>Name</Input.Label>
+                <Input.Field
+                  autoFocus
+                  onChange={formikProps.handleChange}
+                  name="name"
+                  value={formikProps.values.name}
+                  width="100%"
+                  data-testid={NetworkSelectors.NetworkName}
+                />
+              </Input.Root>
               <Title>Bitcoin API</Title>
               {/* TODO: Replace with new Select */}
               <SelectRoot onValueChange={handleApiChange} defaultValue="mainnet">
@@ -269,37 +269,38 @@ export function AddNetwork() {
                 </SelectContent>
               </SelectRoot>
               <Title>Stacks API URL</Title>
-              <Input
-                borderRadius="sm"
-                height="64px"
-                onChange={formikProps.handleChange}
-                name="stacksUrl"
-                placeholder="Stacks Address"
-                value={formikProps.values.stacksUrl}
-                width="100%"
-                data-testid={NetworkSelectors.NetworkStacksAddress}
-              />
+              <Input.Root>
+                <Input.Label>Name</Input.Label>
+                <Input.Field
+                  height="64px"
+                  onChange={formikProps.handleChange}
+                  name="stacksUrl"
+                  value={formikProps.values.stacksUrl}
+                  width="100%"
+                  data-testid={NetworkSelectors.NetworkStacksAddress}
+                />
+              </Input.Root>
               <Title>Bitcoin API URL</Title>
-              <Input
-                borderRadius="sm"
-                height="64px"
-                onChange={formikProps.handleChange}
-                name="bitcoinUrl"
-                placeholder="Bitcoin Address"
-                value={formikProps.values.bitcoinUrl}
-                width="100%"
-                data-testid={NetworkSelectors.NetworkBitcoinAddress}
-              />
-              <Input
-                borderRadius="sm"
-                height="64px"
-                onChange={formikProps.handleChange}
-                name="key"
-                placeholder="Key"
-                value={formikProps.values.key}
-                width="100%"
-                data-testid={NetworkSelectors.NetworkKey}
-              />
+              <Input.Root>
+                <Input.Label>Bitcoin API URL</Input.Label>
+                <Input.Field
+                  onChange={formikProps.handleChange}
+                  name="bitcoinUrl"
+                  value={formikProps.values.bitcoinUrl}
+                  width="100%"
+                  data-testid={NetworkSelectors.NetworkBitcoinAddress}
+                />
+              </Input.Root>
+              <Input.Root>
+                <Input.Label>Network key</Input.Label>
+                <Input.Field
+                  onChange={formikProps.handleChange}
+                  name="key"
+                  value={formikProps.values.key}
+                  width="100%"
+                  data-testid={NetworkSelectors.NetworkKey}
+                />
+              </Input.Root>
               {error ? (
                 <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
               ) : null}

diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx
@@ -4,7 +4,7 @@ import { useField } from 'formik';
 import { Stack, StackProps } from 'leather-styles/jsx';
 
 import { ErrorLabel } from '@app/components/error-label';
-import { Input } from '@app/ui/components/input';
+import { Input } from '@app/ui/components/input/input';
 
 interface EditNonceFieldProps extends StackProps {
   onBlur(): void;
@@ -15,14 +15,16 @@ export const EditNonceField = memo((props: EditNonceFieldProps) => {
 
   return (
     <Stack width="100%" {...props}>
-      <Input
-        onBlur={onBlur}
-        onChange={async (evt: FormEvent<HTMLInputElement>) => {
-          await helpers.setValue(evt.currentTarget.value);
-        }}
-        placeholder="Enter a custom nonce"
-        value={field.value}
-      />
+      <Input.Root data-has-error={meta.error}>
+        <Input.Label>Custom nonce</Input.Label>
+        <Input.Field
+          onBlur={onBlur}
+          value={field.value}
+          onChange={async (evt: FormEvent<HTMLInputElement>) => {
+            await helpers.setValue(evt.currentTarget.value);
+          }}
+        />
+      </Input.Root>
       {meta.error && <ErrorLabel>{meta.error}</ErrorLabel>}
     </Stack>
   );

diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx
@@ -42,7 +42,6 @@ export function Home() {
           <Route path={RouteUrls.Activity} element={<ActivityList />}>
             {homePageModalRoutes}
           </Route>
-
           {homePageModalRoutes}
         </ModalBackgroundWrapper>
       </HomeTabs>

diff --git a/src/app/ui/components/input.tsx b/src/app/ui/components/input.tsx
diff --git a/src/app/ui/components/input/input.stories.tsx b/src/app/ui/components/input/input.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from './input';
+
+const meta: Meta<typeof Input.Root> = {
+  component: Input.Root,
+  tags: ['autodocs'],
+  title: 'Input',
+};
+
+export default meta;
+type Story = StoryObj<typeof Input.Root>;
+
+export const Default: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Label</Input.Label>
+      <Input.Field type="text" />
+    </Input.Root>
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <Input.Root data-has-error="true">
+      <Input.Label>Error field</Input.Label>
+      <Input.Field type="text" />
+    </Input.Root>
+  ),
+};
+
+export const DefaultValue: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Description</Input.Label>
+      <Input.Field value="This is a default value" type="text" />
+    </Input.Root>
+  ),
+};
+
+/**
+ * When using a placeholder, the label *must* come after the `Input.Field`.
+ */
+export const WithPlaceholder: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Field placeholder="Demo placeholder" type="text" />
+      <Input.Label>Error field</Input.Label>
+    </Input.Root>
+  ),
+};