chore: UI remove tailwind from input component (#241)

* refactor: refactor styles repository selection

* refactor: remove tailwind from input component

* chore: change input group component

* chore: review changes on input component

ui/src/components/core/input/input.styles.ts

@@ -1,9 +1,6 @@
 import { styled } from '@/theme';
 
-import { Icon } from '../icon';
-
 const styles = {
-  all: 'unset',
   width: '100%',
   boxSizing: 'border-box',
   borderStyle: 'solid',
@@ -32,7 +29,9 @@ const styles = {
       color: '$slate8',
     },
   },
+};
 
+const variants = {
   variants: {
     size: {
       sm: {
@@ -59,13 +58,49 @@ const styles = {
   },
 };
 
-export const InputStyled = styled('input', styles);
+export const InputStyled = styled('input', {
-
+  all: 'unset',
-export const InputIconStyled = styled(Icon, {
+  ...variants,
-  position: 'absolute',
+  ...styles,
-  left: '$4',
-  top: '0.9375rem',
-  color: 'slate8',
 });
 
-export const TextareaStyled = styled('textarea', styles);
+export const InputGroupStyled = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '$2h',
+
+  ...styles,
+
+  variants: {
+    size: {
+      sm: {
+        borderRadius: '$md',
+        fontSize: '$xs',
+        lineHeight: '$4',
+      },
+      md: {
+        borderRadius: '$lg',
+        fontSize: '$sm',
+        height: '$11',
+        px: '$3h',
+      },
+      lg: {
+        borderRadius: '$xl',
+        fontSize: '$md',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const InputGroupTextSyled = styled('input', {
+  all: 'unset',
+});
+
+export const TextareaStyled = styled('textarea', {
+  all: 'unset',
+  ...variants,
+  ...styles,
+});

ui/src/components/core/input/input.tsx

@@ -1,37 +1,17 @@
-import React from 'react';
+import {
-
+  InputGroupStyled,
-import { forwardStyledRef } from '@/theme';
+  InputGroupTextSyled,
-
+  InputStyled,
-import { IconName } from '../icon';
+  TextareaStyled,
-import { InputIconStyled, InputStyled, TextareaStyled } from './input.styles';
+} from './input.styles';
 import { StyledInputFile } from './input-file';
 
 export const Textarea = TextareaStyled;
 
 export const LogoFileInput = StyledInputFile;
 
-type InputProps = {
+export const Input = InputStyled;
-  leftIcon?: IconName;
-  wrapperClassName?: string; //tailwind css
-} & React.ComponentPropsWithRef<typeof InputStyled>;
 
-export const Input = forwardStyledRef<HTMLInputElement, InputProps>(
+export const InputGroup = InputGroupStyled;
-  (props, ref) => {
-    const { leftIcon, wrapperClassName: css = '', ...ownProps } = props;
 
-    return (
+export const InputGroupText = InputGroupTextSyled;
-      <div className={`relative ${css}`}>
-        {leftIcon && (
-          <InputIconStyled name={leftIcon} css={{ fontSize: '$lg' }} />
-        )}
-        <InputStyled
-          {...props}
-          ref={ref}
-          css={{ ...(leftIcon && { pl: '$10' }), ...(ownProps.css || {}) }}
-        />
-      </div>
-    );
-  }
-);
-
-Input.displayName = 'Input';

ui/src/views/explore/explore-list/nfa-search.fragment.tsx

@@ -1,6 +1,11 @@
 import { useState } from 'react';
 
-import { Dropdown, DropdownItem, Input } from '@/components';
+import {
+  Dropdown,
+  DropdownItem,
+  InputGroup,
+  InputGroupText,
+} from '@/components';
 import { useDebounce } from '@/hooks';
 
 import { Explore } from '../explore.context';
@@ -69,12 +74,11 @@ export const NFASearchFragment: React.FC = () => {
       </S.Data.Wrapper>
 
       <S.Input.Wrapper>
-        <Input
+        <InputGroup css={{ flex: 1 }}>
-          placeholder="Search"
+          <S.Input.Icon name="search" />
-          leftIcon="search"
+          <InputGroupText placeholder="Search" onChange={handleSearchChange} />
-          onChange={handleSearchChange}
+        </InputGroup>
-          wrapperClassName="flex-1"
+
-        />
         <Dropdown
           items={orderResults}
           selectedValue={selectedValue}

ui/src/views/explore/explore-list/nfa-search.styles.ts

@@ -1,4 +1,4 @@
-import { Flex } from '@/components';
+import { Flex, Icon, Input } from '@/components';
 import { styled } from '@/theme';
 
 export const NFASearchFragmentStyles = {
@@ -36,5 +36,8 @@ export const NFASearchFragmentStyles = {
         minWidth: '$28',
       },
     }),
+    Icon: styled(Icon, {
+      fontSize: '$lg',
+    }),
   },
 };

ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.styles.ts

@@ -0,0 +1,29 @@
+import { Card, Flex, Icon } from '@/components';
+import { styled } from '@/theme';
+
+export const GithubRepositorySelectionStyles = {
+  Card: {
+    Wrapper: styled(Card.Container, {
+      maxWidth: '$107h',
+      maxHeight: '$95h',
+      pr: '$3h',
+    }),
+    Body: styled(Card.Body, {
+      pt: '$4',
+    }),
+  },
+  Container: styled(Flex, {
+    flexDirection: 'column',
+    gap: '$2',
+  }),
+  Row: styled(Flex, {
+    gap: '$4',
+    pr: '$3h',
+    position: 'relative',
+  }),
+  Group: {
+    Icon: styled(Icon, {
+      fontSize: '$lg',
+    }),
+  },
+};

ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.tsx

@@ -1,11 +1,19 @@
 import React, { useState } from 'react';
 
-import { Card, Flex, Grid, Icon, IconButton, Spinner } from '@/components';
+import {
-import { Input } from '@/components/core/input';
+  Card,
+  Flex,
+  Icon,
+  IconButton,
+  InputGroup,
+  InputGroupText,
+  Spinner,
+} from '@/components';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useGithubStore } from '@/store';
 import { Mint } from '@/views/mint/mint.context';
 
+import { GithubRepositorySelectionStyles as S } from './github-repository-selection.styles';
 import { RepositoriesList } from './repositories-list';
 import { UserOrgsCombobox } from './users-orgs-combobox';
 
@@ -46,7 +54,7 @@ export const GithubRepositoryConnection: React.FC = () => {
   };
 
   return (
-    <Card.Container css={{ maxWidth: '$107h', maxHeight: '$95h', pr: '$3h' }}>
+    <S.Card.Wrapper>
       <Card.Heading
         title="Select Repository"
         css={{ pr: '$3h' }}
@@ -69,25 +77,26 @@ export const GithubRepositoryConnection: React.FC = () => {
           />
         }
       />
-      <Card.Body css={{ pt: '$4' }}>
+      <S.Card.Body>
-        <Grid css={{ rowGap: '$2' }}>
+        <S.Container>
-          <Flex css={{ gap: '$4', pr: '$3h', position: 'relative' }}>
+          <S.Row>
             <UserOrgsCombobox />
-            <Input
+            <InputGroup css={{ flex: 1 }}>
-              leftIcon="search"
+              <S.Group.Icon name="search" />
-              placeholder="Search repo"
+              <InputGroupText
-              onChange={handleSearchChange}
+                placeholder="Search repo"
-              wrapperClassName="flex-1"
+                onChange={handleSearchChange}
-            />
+              />
-          </Flex>
+            </InputGroup>
+          </S.Row>
           {queryLoading === 'loading' ||
           queryUserAndOrganizations === 'loading' ? (
             <Loading />
           ) : (
             <RepositoriesList searchValue={searchValue} />
           )}
-        </Grid>
+        </S.Container>
-      </Card.Body>
+      </S.Card.Body>
-    </Card.Container>
+    </S.Card.Wrapper>
   );
 };