From cf4ba6a11dbcb1e6c7b088d8c5b6bf2d3d78889d Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Fri, 5 Jan 2024 20:29:06 +0100 Subject: [PATCH 1/2] refactor props 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.stories.tsx | 2 +- src/components/Tabs/Tabs.tsx | 6 ++++-- src/components/ThemeMode/ThemeMode.tsx | 3 ++- src/components/Toggle/Toggle.stories.tsx | 8 ++++---- src/components/Toggle/Toggle.tsx | 8 ++++---- src/components/Token/Token.tsx | 6 +++--- src/components/Tooltip/Tooltip.tsx | 3 ++- 14 files changed, 33 insertions(+), 33 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.stories.tsx b/src/components/Tabs/Tabs.stories.tsx index a761192c..495439b6 100644 --- a/src/components/Tabs/Tabs.stories.tsx +++ b/src/components/Tabs/Tabs.stories.tsx @@ -10,7 +10,7 @@ const tabsConfig = [ { label: 'Tab 1', content: , - onClickTab: () => console.log('Hello'), + onClickTab: () => console.log('tab clicked'), }, { label: 'Tab 2', diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 7c4eb137..ab71a891 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/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); 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.stories.tsx b/src/components/Toggle/Toggle.stories.tsx index 9369e4b5..1d866bdc 100644 --- a/src/components/Toggle/Toggle.stories.tsx +++ b/src/components/Toggle/Toggle.stories.tsx @@ -5,13 +5,13 @@ export default { title: 'Components/Toggle', component: Toggle }; export const _Toggle = { render: () => ( <> - console.log('clicked')} /> + console.log('clicked')} />
- +
- +
- + ), }; diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx index 0adeebf9..b5e83209 100644 --- a/src/components/Toggle/Toggle.tsx +++ b/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'; 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); From 33cb83b6eced3044a27839495900f0ccd056ad72 Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Mon, 8 Jan 2024 13:53:10 +0100 Subject: [PATCH 2/2] move type Theme --- src/components/DashboardStation/DashboardStation.tsx | 2 +- src/components/Icons/Svg/Massa/StationLogo.tsx | 2 +- src/components/ThemeMode/ThemeMode.tsx | 2 +- src/index.ts | 1 + src/util/types.ts | 1 + 5 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 src/util/types.ts diff --git a/src/components/DashboardStation/DashboardStation.tsx b/src/components/DashboardStation/DashboardStation.tsx index 961194f8..d378a534 100644 --- a/src/components/DashboardStation/DashboardStation.tsx +++ b/src/components/DashboardStation/DashboardStation.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { ReactNode, useEffect, useState } from 'react'; -import { Theme } from '../Icons'; +import { Theme } from '../../util/types'; export interface IDashboardStationProps { imagesDark: ReactNode[]; diff --git a/src/components/Icons/Svg/Massa/StationLogo.tsx b/src/components/Icons/Svg/Massa/StationLogo.tsx index ae8aafea..62051629 100644 --- a/src/components/Icons/Svg/Massa/StationLogo.tsx +++ b/src/components/Icons/Svg/Massa/StationLogo.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { ComponentPropsWithoutRef } from 'react'; +import { Theme } from '../../../../util/types'; -export type Theme = 'theme-light' | 'theme-dark'; interface SVGProps extends ComponentPropsWithoutRef<'div'> { theme?: Theme | undefined; } diff --git a/src/components/ThemeMode/ThemeMode.tsx b/src/components/ThemeMode/ThemeMode.tsx index 84a9b7f0..34a3bc07 100644 --- a/src/components/ThemeMode/ThemeMode.tsx +++ b/src/components/ThemeMode/ThemeMode.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { useState } from 'react'; import { FiMoon, FiSun } from 'react-icons/fi'; import { useLocalStorage } from '../../util/useLocalStorage'; -import { Theme } from '../Icons'; +import { Theme } from '../../util/types'; interface ThemeProps { onSetTheme?: (theme: Theme) => void; diff --git a/src/index.ts b/src/index.ts index 53955e09..134615d7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,3 @@ export * from './components'; import './global.css'; +export * from './util/types'; diff --git a/src/util/types.ts b/src/util/types.ts new file mode 100644 index 00000000..fd8dccf3 --- /dev/null +++ b/src/util/types.ts @@ -0,0 +1 @@ +export type Theme = 'theme-light' | 'theme-dark';