Refactor insterface props

src/components/Accordion/Accordion.tsx

@@ -4,14 +4,13 @@ import React, { ComponentPropsWithoutRef, ReactNode, useState } from 'react';
 import { FiChevronDown, FiChevronUp, FiMinus, FiPlus } from 'react-icons/fi';
 
 interface AccordionProps extends ComponentPropsWithoutRef<'div'> {
-  children?: ReactNode;
   title: string;
   customClass?: string;
   state?: boolean;
 }
 
 interface AccordionCategoryProps extends ComponentPropsWithoutRef<'div'> {
-  categoryTitle: string | React.ReactNode;
+  categoryTitle: string | ReactNode;
   state?: boolean;
   isChild?: boolean;
   iconOpen?: ReactNode;

src/components/Balance/Balance.tsx

@@ -6,13 +6,13 @@ import { ComponentPropsWithoutRef } from 'react';
 import { MassaLogo } from '../Icons/Svg/Massa/MassaLogo';
 
 export interface BalanceProps extends ComponentPropsWithoutRef<'div'> {
-  size: 'xs' | 'md' | 'lg';
+  size?: 'xs' | 'md' | 'lg' | undefined;
   amount: string;
   equal?: string;
   customClass?: string;
 }
 
-export function Balance({ ...props }) {
+export function Balance(props: BalanceProps) {
   const { size = 'lg', amount, equal, customClass } = props;
 
   const isLg = size === 'lg';

src/components/Colors/Color.tsx

@@ -2,11 +2,6 @@
 // @ts-ignore
 import React from 'react';
 
-import { ComponentPropsWithoutRef } from 'react';
-
-export interface ColorRectangleProps extends ComponentPropsWithoutRef<'div'> {
-  theme: string;
-}
 const baseClass = 'w-40 h-10 mb-2';
 function Color({ color }: { color: string }) {
   return <div id={color} className={`${baseClass} ${color}`} />;

src/components/DashboardStation/DashboardStation.tsx

@@ -3,12 +3,13 @@
 import React from 'react';
 
 import { ReactNode, useEffect, useState } from 'react';
+import { Theme } from '../../util/types';
 
 export interface IDashboardStationProps {
   imagesDark: ReactNode[];
   imagesLight: ReactNode[];
   components: ReactNode[];
-  theme?: string;
+  theme?: Theme | undefined;
 }
 
 export function DashboardStation(props: IDashboardStationProps) {

src/components/Icons/Svg/Massa/StationLogo.tsx

@@ -3,9 +3,10 @@
 import React from 'react';
 
 import { ComponentPropsWithoutRef } from 'react';
+import { Theme } from '../../../../util/types';
 
 interface SVGProps extends ComponentPropsWithoutRef<'div'> {
-  theme?: 'theme-light' | 'theme-dark' | undefined;
+  theme?: Theme | undefined;
 }
 
 /* eslint-disable max-len */

src/components/Selector/Selector.tsx

@@ -24,9 +24,9 @@ export function Selector(props: SelectorProps) {
     content,
     posIcon,
     amount,
+    customClass,
     variant = 'primary',
     children,
-    customClass,
     ...rest
   } = props;
 

src/components/SidePanel/SidePanel.tsx

@@ -14,17 +14,17 @@ export interface SidePanelProps extends ComponentPropsWithoutRef<'div'> {
   side?: 'left' | 'right';
   customClass?: string;
   children?: ReactNode;
-  onOpen?: () => void;
-  onClose?: () => void;
+  onOpen?: (e: ChangeEvent<unknown>) => void;
+  onClose?: (e: ChangeEvent<unknown>) => void;
 }
 
-export function SidePanel({ ...props }) {
+export function SidePanel(props: SidePanelProps) {
   const {
     side = 'right',
+    customClass,
     children,
-    onClose,
     onOpen,
-    customClass,
+    onClose,
     ...rest
   } = props;
   const [toggle, setToggle] = useState(false);

src/components/Tabs/Tabs.stories.tsx

@@ -10,7 +10,7 @@ const tabsConfig = [
   {
     label: 'Tab 1',
     content: <Button> Tab 1 component </Button>,
-    onClickTab: () => console.log('Hello'),
+    onClickTab: () => console.log('tab clicked'),
   },
   {
     label: 'Tab 2',

src/components/Tabs/Tabs.tsx

@@ -6,14 +6,16 @@ import { ComponentPropsWithoutRef, useState } from 'react';
 
 export interface TabConfig {
   label: string;
-  content: string;
+  content: React.ReactNode | string;
+  onClickTab?: () => void;
 }
 
 export interface TabsProps extends ComponentPropsWithoutRef<'div'> {
   tabsConfig: TabConfig[];
+  defaultIndex?: number | undefined;
 }
 
-export function Tabs({ ...props }) {
+export function Tabs(props: TabsProps) {
   const { tabsConfig, defaultIndex, ...rest } = props;
   const [selectedIndex, setSelectedIndex] = useState(defaultIndex ?? 0);
 

src/components/ThemeMode/ThemeMode.tsx

@@ -5,9 +5,10 @@ import React from 'react';
 import { useState } from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';
 import { useLocalStorage } from '../../util/useLocalStorage';
+import { Theme } from '../../util/types';
 
 interface ThemeProps {
-  onSetTheme?: (theme: string) => void;
+  onSetTheme?: (theme: Theme) => void;
 }
 
 export function ThemeMode(props: ThemeProps) {

src/components/Toggle/Toggle.stories.tsx

@@ -5,13 +5,13 @@ export default { title: 'Components/Toggle', component: Toggle };
 export const _Toggle = {
   render: () => (
     <>
-      <Toggle size="sm" value="1" onClick={() => console.log('clicked')} />
+      <Toggle tShirtSize="sm" onClick={() => console.log('clicked')} />
       <br />
-      <Toggle value="1" />
+      <Toggle />
       <br />
-      <Toggle size="lg" value="1" />
+      <Toggle tShirtSize="lg" />
       <br />
-      <Toggle value="1" disabled />
+      <Toggle disabled />
     </>
   ),
 };

src/components/Toggle/Toggle.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 
 import { ComponentPropsWithoutRef } from 'react';
 
-export interface ToggleProps extends ComponentPropsWithoutRef<'div'> {
-  size?: 'sm' | 'md' | 'lg';
+export interface ToggleProps extends ComponentPropsWithoutRef<'input'> {
+  tShirtSize?: 'sm' | 'md' | 'lg' | undefined;
 }
 
-export function Toggle({ ...props }) {
-  const { size = 'md', ...rest } = props;
+export function Toggle(props: ToggleProps) {
+  const { tShirtSize: size = 'md', ...rest } = props;
 
   const isSm = size === 'sm';
   const isMd = size === 'md';

src/components/Token/Token.tsx

@@ -19,16 +19,16 @@ export interface TokenProps extends ComponentPropsWithoutRef<'div'> {
   onDelete?: () => void;
 }
 
-export function Token({ ...props }) {
+export function Token(props: TokenProps) {
   const {
     logo,
     name,
     symbol,
     decimals,
     balance,
-    onDelete,
-    disable,
     customClass,
+    disable,
+    onDelete,
     ...rest
   } = props;
 

src/components/Tooltip/Tooltip.tsx

@@ -6,9 +6,10 @@ import { FiHelpCircle } from 'react-icons/fi';
 
 export interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
   icon?: ReactNode;
+  customClass?: string;
 }
 
-export function Tooltip({ ...props }) {
+export function Tooltip(props: TooltipProps) {
   const { content, icon, customClass, ...rest } = props;
 
   const [showTooltip, setShowTooltip] = useState(false);

src/index.ts

@@ -1,2 +1,3 @@
 export * from './components';
 import './global.css';
+export * from './util/types';

src/util/types.ts

@@ -0,0 +1 @@
+export type Theme = 'theme-light' | 'theme-dark';