fix: remove references to FC (#37)

* refactor: update Badge component * refactor: update Box component * refactor: update Button component * refactor: update Chips component * refactor: update Collapsable component * refactor: update DatePicker component * refactor: update Drawer component * refactor: update DropZone component * refactor: update Flex component * refactor: update Grid component * refactor: update Heading component * refactor: update InfoBox component * refactor: update Notification component * refactor: update Page component * refactor: update ProgressBar component * refactor: update Radio component * refactor: update Select component * refactor: update TabBar component * refactor: update Table component * refactor: update TableBatchActions component * refactor: update TableCheckbox component * refactor: update TableEditableCell component * refactor: update TablePagination component * refactor: update Text component * refactor: update PolyThemeProvider component * fix: set children as any in Tooltip component * refactor: update ProfilePicture and SelectCard component
PolymathNetwork · Oct 26, 2022 · f97aefd · f97aefd
1 parent 2319928
commit f97aefd
Show file tree

Hide file tree

Showing 29 changed files with 259 additions and 242 deletions.
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -1,4 +1,4 @@
-import { FC, ComponentType } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { Box } from '../Box';
 
@@ -12,14 +12,14 @@ enum IconPosition {
   Right = 'right',
 }
 
-export type BadgeProps = {
+export type BadgeProps = PropsWithChildren<{
   variant: BadgeVariant;
   margin?: string;
   display?: Display;
   icon?: ComponentType;
   iconPosition?: 'left' | 'right';
   size?: 's' | 'l';
-};
+}>;
 
 const sizeMap: Record<string, CSSPropertiesExtended> = {
   l: {
@@ -68,26 +68,30 @@ const renderIconContainer = (icon: ComponentType, variant: BadgeVariant) => (
   </IconContainer>
 );
 
-export const Badge: FC<BadgeProps> = ({
-  display = 'inline-block',
-  size = 'l',
-  variant = 'default',
-  icon,
-  iconPosition,
-  children,
-  ...props
-}) => (
-  <Component variant={variant} display={display} size={size} {...props}>
-    {icon && (!iconPosition || iconPosition === IconPosition.Left) && (
-      <Box display="inline-block" variant="raw" margin="0 8px 0 0">
-        {renderIconContainer(icon, variant)}
-      </Box>
-    )}
-    {children}
-    {icon && iconPosition === IconPosition.Right && (
-      <Box display="inline-block" variant="raw" margin="0 0 0 8px">
-        {renderIconContainer(icon, variant)}
-      </Box>
-    )}
-  </Component>
-);
+export function Badge(badgeProps: BadgeProps) {
+  const {
+    display = 'inline-block',
+    size = 'l',
+    variant = 'default',
+    icon,
+    iconPosition,
+    children,
+    ...props
+  } = badgeProps;
+
+  return (
+    <Component variant={variant} display={display} size={size} {...props}>
+      {icon && (!iconPosition || iconPosition === IconPosition.Left) && (
+        <Box display="inline-block" variant="raw" margin="0 8px 0 0">
+          {renderIconContainer(icon, variant)}
+        </Box>
+      )}
+      {children}
+      {icon && iconPosition === IconPosition.Right && (
+        <Box display="inline-block" variant="raw" margin="0 0 0 8px">
+          {renderIconContainer(icon, variant)}
+        </Box>
+      )}
+    </Component>
+  );
+}
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -1,12 +1,12 @@
-import { FC } from 'react';
+import { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import { Display, Shadow, Radius } from '../../theme/types';
 import { getMargin, getBorder } from '../../theme/utils';
 
 export type BoxVariant = 'raw' | 'basic' | 'border' | 'shadow';
 
-export type BoxProps = {
+export type BoxProps = PropsWithChildren<{
   variant: BoxVariant;
   margin?: string;
   padding?: string;
@@ -19,7 +19,7 @@ export type BoxProps = {
   width?: number | string;
   height?: number | string;
   maxWidth?: number;
-};
+}>;
 
 const Component = styled.div<BoxProps>(
   ({
@@ -50,6 +50,6 @@ const Component = styled.div<BoxProps>(
   }),
 );
 
-export const Box: FC<BoxProps> = (props) => {
-  return <Component {...props} />;
-};
+export function Box(boxProps: BoxProps) {
+  return <Component {...boxProps} />;
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import { FC, ComponentType } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import { getMargin } from '../../theme/utils';
@@ -16,7 +16,7 @@ enum IconPosition {
   Right = 'right',
 }
 
-export type ButtonProps = {
+export type ButtonProps = PropsWithChildren<{
   variant: ButtonVariant;
   margin?: string;
   id?: string;
@@ -26,7 +26,7 @@ export type ButtonProps = {
   icon?: ComponentType;
   iconPosition?: 'left' | 'right';
   onClick?: () => void;
-};
+}>;
 
 const sizeMap: Record<string, Record<string, string>> = {
   s: {
@@ -84,22 +84,26 @@ const renderIconContainer = (
   </IconContainer>
 );
 
-export const Button: FC<ButtonProps> = ({
-  type = 'button',
-  size = 'm',
-  icon,
-  iconPosition,
-  children,
-  variant,
-  ...props
-}) => (
-  <Component size={size} type={type} variant={variant} {...props}>
-    {icon &&
-      (!iconPosition || iconPosition === IconPosition.Left) &&
-      renderIconContainer(icon, variant, iconPosition)}
-    {children}
-    {icon &&
-      iconPosition === IconPosition.Right &&
-      renderIconContainer(icon, variant, iconPosition)}
-  </Component>
-);
+export function Button(buttonProps: ButtonProps) {
+  const {
+    type = 'button',
+    size = 'm',
+    icon,
+    iconPosition,
+    children,
+    variant,
+    ...props
+  } = buttonProps;
+
+  return (
+    <Component size={size} type={type} variant={variant} {...props}>
+      {icon &&
+        (!iconPosition || iconPosition === IconPosition.Left) &&
+        renderIconContainer(icon, variant, iconPosition)}
+      {children}
+      {icon &&
+        iconPosition === IconPosition.Right &&
+        renderIconContainer(icon, variant, iconPosition)}
+    </Component>
+  );
+}
diff --git a/src/components/Chips/Chips.tsx b/src/components/Chips/Chips.tsx
@@ -1,25 +1,26 @@
-import { FC } from 'react';
+import { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { Flex } from '../Flex';
 
 export type ChipsVariant = 'default';
 
-export type ChipsProps = {
+export type ChipsProps = PropsWithChildren<{
   text: string;
   number: number;
   variant: 'default';
-};
+}>;
 
 const Component = styled(Flex)<any>(({ theme, variant }) => ({
   ...(theme.CHIPS[variant] || {}),
 }));
 
-export const Chips: FC<ChipsProps> = (props) => {
-  const { text, number } = props;
+export function Chips(chipsProps: ChipsProps) {
+  const { text, number, ...props } = chipsProps;
+
   return (
     <Component {...props}>
       {text}
       <div className="number">{number}</div>
     </Component>
   );
-};
+}
diff --git a/src/components/Collapsable/Collapsable.tsx b/src/components/Collapsable/Collapsable.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { COLLAPSABLE } from '../../theme/definitions/blue';
 import { polyIcons } from '../../theme';
 import { Box, BoxVariant, BoxProps } from '../Box';
@@ -16,15 +16,16 @@ export type CollapsableProps = BoxProps & {
   iconVariant?: 'default' | 'transparent';
 };
 
-export const Collapsable: FC<CollapsableProps> = ({
-  title,
-  defaultOpen,
-  clickable = true,
-  onClick,
-  children,
-  iconVariant = 'default',
-  ...restProps
-}) => {
+export function Collapsable(collapsableProps: CollapsableProps) {
+  const {
+    title,
+    defaultOpen,
+    clickable = true,
+    onClick,
+    children,
+    iconVariant = 'default',
+    ...restProps
+  } = collapsableProps;
   const [isOpen, setIsOpen] = useState(defaultOpen || false);
 
   const toggle = () => {
@@ -74,4 +75,4 @@ export const Collapsable: FC<CollapsableProps> = ({
       )}
     </Box>
   );
-};
+}
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, forwardRef, ComponentType } from 'react';
+import { useState, forwardRef, ComponentType, PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import moment from 'moment';
 import DateInputComponent from 'react-day-picker/DayPickerInput';
@@ -35,12 +35,12 @@ export type DatePickerProps = {
   dayPickerProps?: Partial<DayPickerProps>;
 };
 
-export type OverlayComponentProps = {
+export type OverlayComponentProps = PropsWithChildren<{
   noExpiryOption: boolean;
   noExpiryCopy: string;
   handleNoExpiry: () => void;
   variant: BoxVariant;
-};
+}>;
 
 const Overlay = styled(Box)(({ theme }) => ({
   ...(theme.DATEPICKER || {}),
@@ -51,38 +51,39 @@ const Overlay = styled(Box)(({ theme }) => ({
 const formatDate = (date: Date | string, dateFormat: string) =>
   moment(date).format(dateFormat);
 
-const OverlayComponent: FC<OverlayComponentProps> = ({
-  children,
-  noExpiryOption,
-  noExpiryCopy,
-  handleNoExpiry,
-  ...overlayProps
-}) => (
-  <Overlay {...overlayProps}>
-    <Flex variant="raw" dir="column" align="center">
-      {children}
-      {noExpiryOption && (
-        <Button variant="tertiary" margin="s 0 0 0" onClick={handleNoExpiry}>
-          {noExpiryCopy}
-        </Button>
-      )}
-    </Flex>
-  </Overlay>
-);
+export function OverlayComponent(overlayProps: OverlayComponentProps) {
+  const { children, noExpiryOption, noExpiryCopy, handleNoExpiry, ...props } =
+    overlayProps;
+
+  return (
+    <Overlay {...props}>
+      <Flex variant="raw" dir="column" align="center">
+        {children}
+        {noExpiryOption && (
+          <Button variant="tertiary" margin="s 0 0 0" onClick={handleNoExpiry}>
+            {noExpiryCopy}
+          </Button>
+        )}
+      </Flex>
+    </Overlay>
+  );
+}
+
+export function DatePicker(datePickerProps: DatePickerProps) {
+  const {
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    hasIcon,
+    noExpiryOption,
+    noExpiryCopy = 'No expiry',
+    dateFormat = 'MM/DD/YYYY',
+    placeholder = 'mm/dd/yyyy',
+    dayPickerProps = {},
+    ...inputProps
+  } = datePickerProps;
 
-export const DatePicker: FC<DatePickerProps> = ({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  hasIcon,
-  noExpiryOption,
-  noExpiryCopy = 'No expiry',
-  dateFormat = 'MM/DD/YYYY',
-  placeholder = 'mm/dd/yyyy',
-  dayPickerProps = {},
-  ...inputProps
-}) => {
   const isNoExpiry =
     noExpiryOption &&
     (value === undefined || value === null || value === noExpiryCopy);
@@ -153,4 +154,4 @@ export const DatePicker: FC<DatePickerProps> = ({
       )}
     />
   );
-};
+}
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import styled from 'styled-components';
 
 import { Box, BoxProps } from '../Box';
@@ -55,13 +54,13 @@ const Component = styled(Box)<any>(
   },
 );
 
-export const Drawer: FC<DrawerProps> = ({
-  hasOverlay = true,
-  isOpen,
-  ...props
-}) => (
-  <>
-    {isOpen && hasOverlay && <Overlay variant="raw" />}
-    <Component isOpen={isOpen} {...props} />
-  </>
-);
+export function Drawer(drawerProps: DrawerProps) {
+  const { hasOverlay = true, isOpen, ...props } = drawerProps;
+
+  return (
+    <>
+      {isOpen && hasOverlay && <Overlay variant="raw" />}
+      <Component isOpen={isOpen} {...props} />
+    </>
+  );
+}