Merge pull request #1195 from kadena-community/refactor/rename-input-…

…wrapper Refactor/rename input wrapper
kadena-community · Nov 9, 2023 · cbdc36b · cbdc36b · vercel · Nov 9, 2023
2 parents d58bce7 + df48185
commit cbdc36b
Show file tree

Hide file tree

Showing 31 changed files with 157 additions and 130 deletions.
diff --git a/.changeset/new-pianos-bow.md b/.changeset/new-pianos-bow.md
@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': minor
+---
+
+Refactor InputFieldWrapper for the new FormFieldWrapper component with stacked
+items
diff --git a/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx b/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx
@@ -1,6 +1,12 @@
 import routes from '@/constants/routes';
 import { Text } from '@components/text';
-import { Button, Grid, Input, InputWrapper, Select } from '@kadena/react-ui';
+import {
+  Button,
+  FormFieldWrapper,
+  Grid,
+  Input,
+  Select,
+} from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import type { FC } from 'react';
 import React, { useState } from 'react';
@@ -166,7 +172,7 @@ const Header: FC<IHeaderProps> = (props) => {
 
         <Grid.Root columns={gridColumns}>
           <Grid.Item>
-            <InputWrapper htmlFor="search-type" label="Search Type">
+            <FormFieldWrapper htmlFor="search-type" label="Search Type">
               <Select
                 ariaLabel="search-type"
                 id="search-type"
@@ -179,11 +185,11 @@ const Header: FC<IHeaderProps> = (props) => {
                 <option value="block">Block</option>
                 <option value="gasEstimation">Gas Estimation</option>
               </Select>
-            </InputWrapper>
+            </FormFieldWrapper>
           </Grid.Item>
 
           <Grid.Item>
-            <InputWrapper
+            <FormFieldWrapper
               htmlFor="search-field"
               label={searchTypeLabels[searchType]}
             >
@@ -194,13 +200,13 @@ const Header: FC<IHeaderProps> = (props) => {
                 onChange={handleSearchFieldChange}
                 onKeyDown={handleKeyPress}
               />
-            </InputWrapper>
+            </FormFieldWrapper>
           </Grid.Item>
 
           {(searchType.startsWith('account') ||
             searchType.startsWith('gas')) && (
             <Grid.Item>
-              <InputWrapper
+              <FormFieldWrapper
                 htmlFor="second-search-field"
                 label={secondSearchTypeLabels[searchType]}
               >
@@ -211,13 +217,13 @@ const Header: FC<IHeaderProps> = (props) => {
                   onChange={(event) => setSecondSearchField(event.target.value)}
                   onKeyDown={handleKeyPress}
                 />
-              </InputWrapper>
+              </FormFieldWrapper>
             </Grid.Item>
           )}
 
           {searchType.startsWith('gas') && (
             <Grid.Item>
-              <InputWrapper
+              <FormFieldWrapper
                 htmlFor="third-search-field"
                 label={thirdSeachTypeLabels[searchType]}
               >
@@ -228,7 +234,7 @@ const Header: FC<IHeaderProps> = (props) => {
                   onChange={(event) => setThirdSearchField(event.target.value)}
                   onKeyDown={handleKeyPress}
                 />
-              </InputWrapper>
+              </FormFieldWrapper>
             </Grid.Item>
           )}
           <Grid.Item>

diff --git a/packages/apps/tools/src/components/Global/AccountNameField/index.tsx b/packages/apps/tools/src/components/Global/AccountNameField/index.tsx
@@ -2,14 +2,14 @@ import { useWalletConnectClient } from '@/context/connect-wallet-context';
 import { useDidUpdateEffect } from '@/hooks';
 import { getAccounts } from '@/utils/wallet';
 import type {
+  IFormFieldWrapperProps,
   IInputProps,
-  IInputWrapperProps,
   ISelectProps,
 } from '@kadena/react-ui';
 import {
+  FormFieldWrapper,
   IconButton,
   Input,
-  InputWrapper,
   Select,
   maskValue,
 } from '@kadena/react-ui';
@@ -21,7 +21,7 @@ import * as z from 'zod';
 import { accountInputWrapperStyle } from './styles.css';
 
 interface IAccountNameFieldProps
-  extends Partial<Omit<IInputWrapperProps, 'children'>> {
+  extends Partial<Omit<IFormFieldWrapperProps, 'children'>> {
   inputProps: Partial<
     Pick<
       IInputProps,
@@ -98,15 +98,15 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
 
   return (
     <div className={accountInputWrapperStyle}>
-      <InputWrapper
+      <FormFieldWrapper
         label={t('Account')}
         htmlFor={elementId}
         status={error ? 'negative' : status}
         helperText={error?.message ?? helperText}
         {...rest}
       >
         {lookup[mode]}
-      </InputWrapper>
+      </FormFieldWrapper>
       {accounts?.length && (
         <IconButton
           icon={mode === 'input' ? 'Close' : 'Edit'}

diff --git a/packages/apps/tools/src/components/Global/ChainSelect/index.tsx b/packages/apps/tools/src/components/Global/ChainSelect/index.tsx
@@ -1,7 +1,7 @@
 import type { ChainwebChainId } from '@kadena/chainweb-node-client';
 import { CHAINS } from '@kadena/chainweb-node-client';
 import type { ISelectProps } from '@kadena/react-ui';
-import { InputWrapper, Select } from '@kadena/react-ui';
+import { FormFieldWrapper, Select } from '@kadena/react-ui';
 import type { FC, FormEventHandler } from 'react';
 import React, { useCallback } from 'react';
 
@@ -32,7 +32,7 @@ const ChainSelect: FC<
   });
 
   return (
-    <InputWrapper label="Chain ID" htmlFor={ELEMENT_ID}>
+    <FormFieldWrapper label="Chain ID" htmlFor={ELEMENT_ID}>
       <Select
         {...rest}
         id={ELEMENT_ID}
@@ -43,7 +43,7 @@ const ChainSelect: FC<
       >
         {options}
       </Select>
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
 

diff --git a/packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx b/packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx
@@ -1,5 +1,5 @@
 import type { ISelectProps } from '@kadena/react-ui';
-import { InputWrapper, Select } from '@kadena/react-ui';
+import { FormFieldWrapper, Select } from '@kadena/react-ui';
 
 import type { FC, FormEventHandler } from 'react';
 import React, { useCallback } from 'react';
@@ -34,7 +34,7 @@ const PredKeysSelect: FC<
   });
 
   return (
-    <InputWrapper label="Predicate" htmlFor={ELEMENT_ID}>
+    <FormFieldWrapper label="Predicate" htmlFor={ELEMENT_ID}>
       <Select
         {...rest}
         id={ELEMENT_ID}
@@ -44,7 +44,7 @@ const PredKeysSelect: FC<
       >
         {options}
       </Select>
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
 

diff --git a/packages/apps/tools/src/components/Global/PublicKeyField/index.tsx b/packages/apps/tools/src/components/Global/PublicKeyField/index.tsx
@@ -1,4 +1,4 @@
-import type { IInputProps, IInputWrapperProps } from '@kadena/react-ui';
+import type { IFormFieldWrapperProps, IInputProps } from '@kadena/react-ui';
 import { TextField } from '@kadena/react-ui';
 
 import useTranslation from 'next-translate/useTranslation';
@@ -8,7 +8,7 @@ import type { FieldError } from 'react-hook-form';
 import { publicKeyFieldStyles } from './styles.css';
 
 interface IPublicKeyFieldProps
-  extends Partial<Omit<IInputWrapperProps, 'children'>> {
+  extends Partial<Omit<IFormFieldWrapperProps, 'children'>> {
   inputProps: Partial<
     Pick<
       IInputProps,

diff --git a/...putWrapper/InputHeader/InputHeader.css.ts → ...er/FormFieldHeader/FormFieldHeader.css.ts b/...putWrapper/InputHeader/InputHeader.css.ts → ...er/FormFieldHeader/FormFieldHeader.css.ts
diff --git a/.../InputWrapper/InputHeader/InputHeader.tsx → ...apper/FormFieldHeader/FormFieldHeader.tsx b/.../InputWrapper/InputHeader/InputHeader.tsx → ...apper/FormFieldHeader/FormFieldHeader.tsx
@@ -2,16 +2,16 @@ import { SystemIcon } from '@components/Icon';
 import { Label } from '@components/Typography';
 import type { FC } from 'react';
 import React from 'react';
-import { headerClass, infoClass, tagClass } from './InputHeader.css';
+import { headerClass, infoClass, tagClass } from './FormFieldHeader.css';
 
-export interface IInputHeaderProps {
+export interface IFormFieldHeaderProps {
   label: string;
   htmlFor: string;
   tag?: string;
   info?: string;
 }
 
-export const InputHeader: FC<IInputHeaderProps> = ({
+export const FormFieldHeader: FC<IFormFieldHeaderProps> = ({
   label,
   htmlFor,
   tag,

diff --git a/...putWrapper/InputHelper/InputHelper.css.ts → ...er/FormFieldHelper/FormFieldHelper.css.ts b/...putWrapper/InputHelper/InputHelper.css.ts → ...er/FormFieldHelper/FormFieldHelper.css.ts
diff --git a/.../InputWrapper/InputHelper/InputHelper.tsx → ...apper/FormFieldHelper/FormFieldHelper.tsx b/.../InputWrapper/InputHelper/InputHelper.tsx → ...apper/FormFieldHelper/FormFieldHelper.tsx
@@ -1,13 +1,13 @@
 import { SystemIcon } from '@components/Icon';
 import type { FC } from 'react';
 import React from 'react';
-import { helperClass, helperIconClass } from './InputHelper.css';
+import { helperClass, helperIconClass } from './FormFieldHelper.css';
 
-interface IInputHelperProps {
+interface IFormFieldHelperProps {
   children: React.ReactNode;
 }
 
-export const InputHelper: FC<IInputHelperProps> = ({ children }) => {
+export const FormFieldHelper: FC<IFormFieldHelperProps> = ({ children }) => {
   return (
     <span className={helperClass}>
       <span className={helperIconClass}>

diff --git a/...Form/InputWrapper/InputWrapper.context.ts → ...mFieldWrapper/FormFieldWrapper.context.ts b/...Form/InputWrapper/InputWrapper.context.ts → ...mFieldWrapper/FormFieldWrapper.context.ts
@@ -5,12 +5,12 @@ import type { FormFieldStatus } from '../Form.css';
 
 export type OpenSections = string[];
 
-interface IInputWrapperContext {
+interface IFormFieldWrapperContext {
   status?: FormFieldStatus;
   leadingTextWidth?: keyof typeof vars.sizes;
 }
 
-export const InputWrapperContext = createContext<IInputWrapperContext>({
+export const FormFieldWrapperContext = createContext<IFormFieldWrapperContext>({
   status: undefined,
   leadingTextWidth: undefined,
 });
diff --git a/...nts/Form/InputWrapper/InputWrapper.css.ts → .../FormFieldWrapper/FormFieldWrapper.css.ts b/...nts/Form/InputWrapper/InputWrapper.css.ts → .../FormFieldWrapper/FormFieldWrapper.css.ts
@@ -6,7 +6,7 @@ import { statusColor, statusOutlineColor } from '../Form.css';
 import {
   helperIconColor,
   helperTextColor,
-} from './InputHelper/InputHelper.css';
+} from './FormFieldHelper/FormFieldHelper.css';
 
 const statusOptions: Record<FormFieldStatus, FormFieldStatus> = {
   disabled: 'disabled',

diff --git a/...orm/InputWrapper/InputWrapper.stories.tsx → ...FieldWrapper/FormFieldWrapper.stories.tsx b/...orm/InputWrapper/InputWrapper.stories.tsx → ...FieldWrapper/FormFieldWrapper.stories.tsx
@@ -1,25 +1,25 @@
-import type { IInputWrapperProps } from '@components/Form';
-import { Input, InputWrapper } from '@components/Form';
+import type { IFormFieldWrapperProps } from '@components/Form';
+import { FormFieldWrapper, Input } from '@components/Form';
 import type { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import { vars } from '@theme/vars.css';
 import React from 'react';
-import { statusVariant } from './InputWrapper.css';
+import { statusVariant } from './FormFieldWrapper.css';
 
 type StoryProps = {
   helperText: string;
   leadingText: string;
   icon: keyof typeof SystemIcon;
   rightIcon: keyof typeof SystemIcon;
-} & IInputWrapperProps;
+} & IFormFieldWrapperProps;
 
 const meta: Meta<StoryProps> = {
-  title: 'Form/InputWrapper',
+  title: 'Form/FormFieldWrapper',
   parameters: {
     docs: {
       description: {
         component:
-          'The InputWrapper component is intended to be used to wrap one or more form input components to provide them with a shared and optional label, tag, info, helper text and status colors.',
+          'The FormFieldWrapper component is intended to be used to wrap one or more form input components to provide them with a shared and optional label, tag, info, helper text and status colors.',
       },
     },
   },
@@ -113,7 +113,7 @@ export const Group: Story = {
     leadingTextWidth,
   }) => {
     return (
-      <InputWrapper
+      <FormFieldWrapper
         tag={tag}
         info={info}
         label={label}
@@ -135,7 +135,7 @@ export const Group: Story = {
           disabled={disabled}
           leadingText="Leading 2"
         />
-      </InputWrapper>
+      </FormFieldWrapper>
     );
   },
 };

diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
@@ -0,0 +1,61 @@
+import type {
+  IInputProps,
+  ISelectProps,
+  ITextareaProps,
+} from '@components/Form';
+import type { FC, FunctionComponentElement } from 'react';
+import React from 'react';
+import type { vars } from 'src/styles';
+import type { FormFieldStatus } from '../Form.css';
+
+import { Stack } from '@components/Layout';
+import type { IFormFieldHeaderProps } from './FormFieldHeader/FormFieldHeader';
+import { FormFieldHeader } from './FormFieldHeader/FormFieldHeader';
+import { FormFieldHelper } from './FormFieldHelper/FormFieldHelper';
+import { FormFieldWrapperContext } from './FormFieldWrapper.context';
+import { statusVariant } from './FormFieldWrapper.css';
+
+export interface IFormFieldWrapperProps
+  extends Omit<IFormFieldHeaderProps, 'label'> {
+  children:
+    | FunctionComponentElement<IInputProps | ISelectProps | ITextareaProps>
+    | FunctionComponentElement<IInputProps | ISelectProps | ITextareaProps>[];
+  status?: FormFieldStatus;
+  disabled?: boolean;
+  helperText?: string;
+  label?: string;
+  leadingTextWidth?: keyof typeof vars.sizes;
+}
+
+export const FormFieldWrapper: FC<IFormFieldWrapperProps> = ({
+  status,
+  disabled,
+  children,
+  label,
+  leadingTextWidth = undefined,
+  htmlFor,
+  tag,
+  info,
+  helperText,
+}) => {
+  const statusVal = disabled === true ? 'disabled' : status;
+
+  return (
+    <FormFieldWrapperContext.Provider value={{ status, leadingTextWidth }}>
+      <div className={statusVal ? statusVariant[statusVal] : undefined}>
+        {label !== undefined && (
+          <FormFieldHeader
+            htmlFor={htmlFor}
+            label={label}
+            tag={tag}
+            info={info}
+          />
+        )}
+        <Stack gap="$2" direction="column">
+          {children}
+        </Stack>
+        {Boolean(helperText) && <FormFieldHelper>{helperText}</FormFieldHelper>}
+      </div>
+    </FormFieldWrapperContext.Provider>
+  );
+};
diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/index.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/index.ts
@@ -0,0 +1,4 @@
+export {
+  FormFieldWrapper,
+  type IFormFieldWrapperProps,
+} from './FormFieldWrapper';
diff --git a/packages/libs/react-ui/src/components/Form/Input/Input.css.ts b/packages/libs/react-ui/src/components/Form/Input/Input.css.ts
@@ -11,11 +11,7 @@ export const disabledClass = style([
     },
   }),
   {
-    opacity: 0.4,
     selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
       [`${darkThemeClass} &`]: {
         backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
       },