chore: card component (#112)

* chore: add card component

* refactor: refactor con input styles and added icon

* chore: add missing files

* Update ui/src/components/card/card.styles.ts

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* Update ui/src/components/card/card.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* Update ui/src/components/card/card.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* Update ui/src/components/card/card.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* chore: change CardText to Text

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

ui/src/components/card/card.styles.ts

@@ -0,0 +1,35 @@
+import { dripStitches } from '@/theme';
+
+const { styled } = dripStitches;
+
+export abstract class CardStyles {
+  static readonly Container = styled('div', {
+    backgroundColor: '$slate2',
+    borderRadius: '$xlh',
+    padding: '$7',
+    borderStyle: 'solid',
+    borderColor: '$slate6',
+    borderWidth: '$default',
+  });
+
+  static readonly Heading = styled('h3', {
+    color: '$slate12',
+    fontSize: '$xl',
+    fontWeight: '$medium',
+  });
+
+  static readonly Body = styled('div', {
+    pt: '$5',
+  });
+
+  static readonly Text = styled('div', {
+    backgroundColor: '$slate1',
+    borderRadius: '$xl',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    color: '$slate8',
+  });
+}

ui/src/components/card/card.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import { Flex } from '../layout';
+import { CardStyles } from './card.styles';
+
+export abstract class Card {
+  static readonly Container = forwardRef<HTMLDivElement, Card.ContainerProps>(
+    ({ children, ...props }, ref) => {
+      return (
+        <CardStyles.Container ref={ref} {...props}>
+          {children}
+        </CardStyles.Container>
+      );
+    }
+  );
+
+  static readonly Heading = forwardRef<HTMLHeadingElement, Card.HeadingProps>(
+    ({ title, leftIcon, rightIcon, ...props }, ref) => {
+      return (
+        <Flex css={{ justifyContent: 'space-between' }}>
+          <Flex>
+            {leftIcon}
+            <CardStyles.Heading ref={ref} {...props}>
+              {title}
+            </CardStyles.Heading>
+          </Flex>
+          {rightIcon}
+        </Flex>
+      );
+    }
+  );
+
+  static readonly Body = forwardRef<HTMLDivElement, Card.BodyProps>(
+    ({ children, ...props }, ref) => {
+      return (
+        <CardStyles.Body ref={ref} {...props}>
+          {children}
+        </CardStyles.Body>
+      );
+    }
+  );
+
+  static readonly Text = forwardRef<HTMLDivElement, Card.CardTextProps>(
+    ({ children, ...props }, ref) => {
+      return (
+        <CardStyles.Text {...props} ref={ref}>
+          {children}
+        </CardStyles.Text>
+      );
+    }
+  );
+}
+
+export namespace Card {
+  export type ContainerProps = React.ComponentProps<
+    typeof CardStyles.Container
+  >;
+
+  export type HeadingProps = {
+    title: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+  } & React.ComponentProps<typeof CardStyles.Heading>;
+
+  export type BodyProps = React.ComponentProps<typeof CardStyles.Body>;
+
+  export type CardTextProps = React.ComponentProps<typeof CardStyles.Text>;
+}

ui/src/components/card/index.ts

@@ -0,0 +1 @@
+export * from './card';

ui/src/components/core/icon/icon-library.tsx

@@ -4,6 +4,7 @@ import { IoInformationCircleSharp } from '@react-icons/all-files/io5/IoInformati
 import { IoCloudUploadSharp } from '@react-icons/all-files/io5/IoCloudUploadSharp';
 import { AiOutlineCheck } from '@react-icons/all-files/ai/AiOutlineCheck';
 import { MetamaskIcon, EthereumIcon } from './custom';
+import { BiSearch } from '@react-icons/all-files/bi/BiSearch';
 
 export const IconLibrary = Object.freeze({
   back: IoArrowBackCircleSharp,
@@ -13,8 +14,9 @@ export const IconLibrary = Object.freeze({
   info: IoInformationCircleSharp,
   upload: IoCloudUploadSharp,
   metamask: MetamaskIcon, //remove if not used
+  search: BiSearch,
 });
 
 export type IconName = keyof typeof IconLibrary;
 
-export type IconType<Name extends IconName> = typeof IconLibrary[Name];
+export type IconType<Name extends IconName> = (typeof IconLibrary)[Name];

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

@@ -1 +1,2 @@
 export * from './input';
+export * from './input.styles';

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

@@ -1,5 +1,5 @@
-import { dripStitches } from '../../../theme';
-import { StyledInputFile } from './input-file';
+import { dripStitches } from '@/theme';
+import { Icon } from '../icon';
 const { styled } = dripStitches;
 
 const styles = {
@@ -9,7 +9,6 @@ const styles = {
   borderStyle: 'solid',
   minWidth: '$0',
   color: '$slate12',
-  my: '$1h',
 
   transition: 'border-color 0.2s ease-in-out',
   borderWidth: '$default',
@@ -45,6 +44,7 @@ const styles = {
       md: {
         borderRadius: '$lg',
         fontSize: '$sm',
+        height: '$11',
         p: '$3 $3h',
       },
       lg: {
@@ -59,8 +59,13 @@ const styles = {
   },
 };
 
-export const Input = styled('input', styles);
+export const InputStyled = styled('input', styles);
 
-export const Textarea = styled('textarea', styles);
+export const InputIconStyled = styled(Icon, {
+  position: 'absolute',
+  left: '$4',
+  top: '0.9375rem',
+  color: 'slate8',
+});
 
-export const LogoFileInput = StyledInputFile;
+export const TextareaStyled = styled('textarea', styles);

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

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react';
+import { IconName } from '../icon';
+import { StyledInputFile } from './input-file';
+import { InputIconStyled, InputStyled, TextareaStyled } from './input.styles';
+
+export const Textarea = TextareaStyled;
+
+export const LogoFileInput = StyledInputFile;
+
+type InputProps = {
+  leftIcon?: IconName;
+} & React.ComponentProps<typeof InputStyled>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ leftIcon, ...props }, ref) => {
+    return (
+      <div className="relative">
+        {leftIcon && (
+          <InputIconStyled name={leftIcon} css={{ fontSize: '$lg' }} />
+        )}
+        <InputStyled
+          {...props}
+          ref={ref}
+          css={{ ...(leftIcon && { pl: '$10' }) }}
+        />
+      </div>
+    );
+  }
+);

ui/src/components/form/form.styles.ts

@@ -9,6 +9,7 @@ export abstract class FormStyles {
 
   static readonly Label = styled('label', {
     color: '$slate11',
+    mb: '$1h',
 
     '&:disabled': {
       color: '$slate8',
@@ -34,6 +35,7 @@ export abstract class FormStyles {
   static readonly ErrorMessage = styled('span', {
     color: '$red11',
     fontSize: '0.625rem',
+    mt: '$1h',
 
     variants: {
       size: {

ui/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './core';
 export * from './layout';
 export * from './form';
+export * from './card';