From ec27f2a181cc7596c11e0b7931df8f677e439f01 Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Fri, 5 Jan 2024 20:04:38 +0100 Subject: [PATCH] refactor the interfaces --- src/components/Accordion/Accordion.tsx | 3 +-- src/components/Balance/Balance.tsx | 4 ++-- src/components/Colors/Color.tsx | 5 ----- src/components/DashboardStation/DashboardStation.tsx | 3 ++- src/components/Icons/Svg/Massa/StationLogo.tsx | 3 ++- src/components/Selector/Selector.tsx | 2 +- src/components/SidePanel/SidePanel.tsx | 10 +++++----- src/components/Tabs/Tabs.tsx | 4 +++- src/components/ThemeMode/ThemeMode.tsx | 3 ++- src/components/Toggle/Toggle.tsx | 2 +- src/components/Token/Token.tsx | 6 +++--- src/components/Tooltip/Tooltip.tsx | 3 ++- 12 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 04b3560a..e1604f75 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/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; diff --git a/src/components/Balance/Balance.tsx b/src/components/Balance/Balance.tsx index bbe84466..b4e8c05d 100644 --- a/src/components/Balance/Balance.tsx +++ b/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'; diff --git a/src/components/Colors/Color.tsx b/src/components/Colors/Color.tsx index 0977da1a..bc32974d 100644 --- a/src/components/Colors/Color.tsx +++ b/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
; diff --git a/src/components/DashboardStation/DashboardStation.tsx b/src/components/DashboardStation/DashboardStation.tsx index eb2288ae..961194f8 100644 --- a/src/components/DashboardStation/DashboardStation.tsx +++ b/src/components/DashboardStation/DashboardStation.tsx @@ -3,12 +3,13 @@ import React from 'react'; import { ReactNode, useEffect, useState } from 'react'; +import { Theme } from '../Icons'; export interface IDashboardStationProps { imagesDark: ReactNode[]; imagesLight: ReactNode[]; components: ReactNode[]; - theme?: string; + theme?: Theme | undefined; } export function DashboardStation(props: IDashboardStationProps) { diff --git a/src/components/Icons/Svg/Massa/StationLogo.tsx b/src/components/Icons/Svg/Massa/StationLogo.tsx index a8316559..ae8aafea 100644 --- a/src/components/Icons/Svg/Massa/StationLogo.tsx +++ b/src/components/Icons/Svg/Massa/StationLogo.tsx @@ -4,8 +4,9 @@ import React from 'react'; import { ComponentPropsWithoutRef } from 'react'; +export type Theme = 'theme-light' | 'theme-dark'; interface SVGProps extends ComponentPropsWithoutRef<'div'> { - theme?: 'theme-light' | 'theme-dark' | undefined; + theme?: Theme | undefined; } /* eslint-disable max-len */ diff --git a/src/components/Selector/Selector.tsx b/src/components/Selector/Selector.tsx index b0163bcb..0dd5ff31 100644 --- a/src/components/Selector/Selector.tsx +++ b/src/components/Selector/Selector.tsx @@ -24,9 +24,9 @@ export function Selector(props: SelectorProps) { content, posIcon, amount, + customClass, variant = 'primary', children, - customClass, ...rest } = props; diff --git a/src/components/SidePanel/SidePanel.tsx b/src/components/SidePanel/SidePanel.tsx index b6a4b048..5b0682e6 100644 --- a/src/components/SidePanel/SidePanel.tsx +++ b/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) => void; + onClose?: (e: ChangeEvent) => 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); diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 7c4eb137..61177b40 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -7,13 +7,15 @@ import { ComponentPropsWithoutRef, useState } from 'react'; export interface TabConfig { label: string; content: string; + onClickTab?: () => void; } export interface TabsProps extends ComponentPropsWithoutRef<'div'> { tabsConfig: TabConfig[]; + defaultIndex?: number; } -export function Tabs({ ...props }) { +export function Tabs(props: TabsProps) { const { tabsConfig, defaultIndex, ...rest } = props; const [selectedIndex, setSelectedIndex] = useState(defaultIndex ?? 0); diff --git a/src/components/ThemeMode/ThemeMode.tsx b/src/components/ThemeMode/ThemeMode.tsx index cbdb6c93..84a9b7f0 100644 --- a/src/components/ThemeMode/ThemeMode.tsx +++ b/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 '../Icons'; interface ThemeProps { - onSetTheme?: (theme: string) => void; + onSetTheme?: (theme: Theme) => void; } export function ThemeMode(props: ThemeProps) { diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx index 0adeebf9..8f787bc2 100644 --- a/src/components/Toggle/Toggle.tsx +++ b/src/components/Toggle/Toggle.tsx @@ -8,7 +8,7 @@ export interface ToggleProps extends ComponentPropsWithoutRef<'div'> { size?: 'sm' | 'md' | 'lg'; } -export function Toggle({ ...props }) { +export function Toggle(props: ToggleProps) { const { size = 'md', ...rest } = props; const isSm = size === 'sm'; diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx index 8734d5eb..2b6367c5 100644 --- a/src/components/Token/Token.tsx +++ b/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; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index fc94642e..455698ae 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/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);