feat: changes to existing theme and add input

interlay · Mar 1, 2024 · f96c7e6 · f96c7e6
1 parent efa0621
commit f96c7e6
Show file tree

Hide file tree

Showing 38 changed files with 420 additions and 547 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -16,6 +16,19 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/
       }
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: bobTheme.color('dark')
+        },
+        {
+          name: 'light',
+          value: bobTheme.color('light')
+        }
+      ]
     }
   },
   decorators: [

diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
@@ -1,22 +1,14 @@
-import { Sizes, Spacing } from '@interlay/theme';
-import {
-  FocusEvent,
-  forwardRef,
-  InputHTMLAttributes,
-  ReactNode,
-  TextareaHTMLAttributes,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
+import { Spacing } from '@interlay/theme';
+import { FocusEvent, forwardRef, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { InputSizes } from '@interlay/themev2';
 
 import { ElementTypeProp } from '../utils/types';
 import { Field, FieldProps, useFieldProps } from '../Field';
 import { HelperTextProps } from '../HelperText';
 import { LabelProps } from '../Label';
 import { hasError } from '../utils/input';
 
-import { Adornment, StyledBaseInput } from './Input.style';
+import { StyledAdornmentBottom, StyledAdornmentLeft, StyledAdornmentRight, StyledBaseInput } from './Input.style';
 
 // TODO: might need to consolidate this later
 interface HTMLInputProps extends ElementTypeProp {
@@ -39,7 +31,7 @@ type Props = {
   bottomAdornment?: ReactNode;
   value?: string | ReadonlyArray<string> | number;
   defaultValue?: string | ReadonlyArray<string> | number;
-  size?: Sizes;
+  size?: InputSizes;
   isInvalid?: boolean;
   minHeight?: Spacing;
   onFocus?: (e: FocusEvent<Element>) => void;
@@ -59,7 +51,7 @@ const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
       startAdornment,
       endAdornment,
       bottomAdornment,
-      size = 'medium',
+      size = 'md',
       isInvalid,
       inputProps,
       minHeight,
@@ -68,40 +60,26 @@ const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
     },
     ref
   ): JSX.Element => {
-    const endAdornmentRef = useRef<HTMLDivElement>(null);
-    const [endAdornmentWidth, setEndAdornmentWidth] = useState(0);
-
     // FIXME: move this into Field
     const { fieldProps } = useFieldProps(props);
 
-    useEffect(() => {
-      if (!endAdornmentRef.current || !endAdornment) return;
-
-      setEndAdornmentWidth(endAdornmentRef.current.getBoundingClientRect().width);
-    }, [endAdornment]);
-
     const error = hasError({ isInvalid, errorMessage: props.errorMessage });
 
     return (
       <Field {...fieldProps}>
-        {startAdornment && <Adornment $position='left'>{startAdornment}</Adornment>}
+        {startAdornment && <StyledAdornmentLeft $size={size}>{startAdornment}</StyledAdornmentLeft>}
         <StyledBaseInput
           ref={ref as any}
           $adornments={{ bottom: !!bottomAdornment, left: !!startAdornment, right: !!endAdornment }}
-          $endAdornmentWidth={endAdornmentWidth}
           $hasError={error}
           $isDisabled={!!inputProps.disabled}
           $minHeight={minHeight}
           $size={size}
           as={elementType}
           {...inputProps}
         />
-        {bottomAdornment && <Adornment $position='bottom'>{bottomAdornment}</Adornment>}
-        {endAdornment && (
-          <Adornment ref={endAdornmentRef} $position='right'>
-            {endAdornment}
-          </Adornment>
-        )}
+        {bottomAdornment && <StyledAdornmentBottom $size={size}>{bottomAdornment}</StyledAdornmentBottom>}
+        {endAdornment && <StyledAdornmentRight $size={size}>{endAdornment}</StyledAdornmentRight>}
       </Field>
     );
   }

diff --git a/packages/components/src/Input/Input.stories.tsx b/packages/components/src/Input/Input.stories.tsx
@@ -1,8 +1,8 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import { InformationCircle } from '@interlay/icons';
 
-import { Flex, Span } from '..';
+import { Span } from '../Text';
+import { Flex } from '../Flex';
 
 import { Input, InputProps } from '.';
 
@@ -19,74 +19,66 @@ export default {
 
 export const Default: StoryObj<InputProps> = {};
 
-export const Controlled: StoryFn<InputProps> = (args) => {
-  const [state, setState] = useState<string>();
+// export const Controlled: StoryFn<InputProps> = (args) => {
+//   const [state, setState] = useState<string>();
 
-  return <Input {...args} value={state} onChange={(e) => setState(e.target.value)} />;
-};
+//   return <Input {...args} value={state} onChange={(e) => setState(e.target.value)} />;
+// };
 
-export const DefaultValue: StoryObj<InputProps> = {
-  args: {
-    defaultValue: 'Sesame Street'
-  }
-};
+// export const DefaultValue: StoryObj<InputProps> = {
+//   args: {
+//     defaultValue: 'Sesame Street'
+//   }
+// };
 
-export const WithDescription: StoryObj<InputProps> = {
-  args: {
-    description: 'Please enter your street address'
-  }
-};
+// export const WithDescription: StoryObj<InputProps> = {
+//   args: {
+//     description: 'Please enter your street address'
+//   }
+// };
 
-export const WithErrorMessage: StoryObj<InputProps> = {
-  args: {
-    errorMessage: 'Please enter your street address'
-  }
-};
+// export const WithErrorMessage: StoryObj<InputProps> = {
+//   args: {
+//     errorMessage: 'Please enter your street address'
+//   }
+// };
 
-export const WithMultipleErrorMessage: StoryObj<InputProps> = {
-  args: {
-    errorMessage: ['Please enter your street address', 'Please enter your street address']
-  }
-};
+// export const WithMultipleErrorMessage: StoryObj<InputProps> = {
+//   args: {
+//     errorMessage: ['Please enter your street address', 'Please enter your street address']
+//   }
+// };
 
-export const SideLabel: StoryObj<InputProps> = {
-  args: {
-    labelPosition: 'side'
-  }
-};
+// export const SideLabel: StoryObj<InputProps> = {
+//   args: {
+//     labelPosition: 'side'
+//   }
+// };
 
-export const MaxWidth: StoryObj<InputProps> = {
-  args: {
-    maxWidth: 'spacing28'
-  }
-};
+// export const MaxWidth: StoryObj<InputProps> = {
+//   args: {
+//     maxWidth: 'spacing28'
+//   }
+// };
 
 export const Adornments: StoryFn<InputProps> = (args) => (
   <Flex direction='column'>
     <Input {...args} label='Start Adornment' startAdornment={<InformationCircle />} />
     <Input {...args} endAdornment={<InformationCircle />} label='End Adornment' />
-    <Input
-      {...args}
-      bottomAdornment={
-        <Span color='tertiary' size='xs'>
-          $0.00
-        </Span>
-      }
-      label='Bottom Adornment'
-    />
+    <Input {...args} bottomAdornment={<Span size='xs'>$0.00</Span>} label='Bottom Adornment' />
   </Flex>
 );
 
-export const Sizes: StoryFn<InputProps> = (args) => (
-  <Flex direction='column'>
-    <Input {...args} label='Small' size='small' />
-    <Input {...args} label='Medium' />
-    <Input {...args} label='Large' size='large' />
-  </Flex>
-);
+// export const Sizes: StoryFn<InputProps> = (args) => (
+//   <Flex direction='column'>
+//     <Input {...args} label='Small' size='small' />
+//     <Input {...args} label='Medium' />
+//     <Input {...args} label='Large' size='large' />
+//   </Flex>
+// );
 
-export const Disabled: StoryObj<InputProps> = {
-  args: {
-    isDisabled: true
-  }
-};
+// export const Disabled: StoryObj<InputProps> = {
+//   args: {
+//     isDisabled: true
+//   }
+// };