From 91ab50615c06f759e5b106eb11f7d1fa8d6f8e6c Mon Sep 17 00:00:00 2001 From: blue Date: Thu, 10 Oct 2024 15:19:10 +0900 Subject: [PATCH 1/2] feat. refactor button component --- example/src/Home/index.tsx | 55 ++++++++++-- src/components/Input/index.tsx | 160 +++++++++++++-------------------- 2 files changed, 106 insertions(+), 109 deletions(-) diff --git a/example/src/Home/index.tsx b/example/src/Home/index.tsx index 5db3d38..5287ea7 100644 --- a/example/src/Home/index.tsx +++ b/example/src/Home/index.tsx @@ -7,6 +7,7 @@ import { useKaTheme, KaRadio, KaTextInput, + KaButton, } from '@kaiachain/kaia-design-system' import { Row } from './components/Row' @@ -14,6 +15,7 @@ import Buttons from './Buttons' import CheckBoxes from './CheckBoxes' import Texts from './Texts' import { useState } from 'react' +import { View } from './components/View' const StyledContainer = styled(Row)` padding: 20px; @@ -167,7 +169,34 @@ const Home = ({ value: value, onChangeText: setValue, }} - leftIcon="search" + />{' '} + + + + + + } leftUnit="$" rightUnit="SGD" /> @@ -175,35 +204,43 @@ const Home = ({ inputProps={{ placeholder: 'placeholder', }} - leftIcon="close" + rightComponent={Confirm} leftUnit="$" /> + + + } + containerStyle={{ width: 300 }} + rightComponent={Confirm} /> + + + } leftUnit="$" rightUnit="Unit" - rightIcon={'close'} + rightComponent={Confirm} isError={true} /> diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index efb4c84..c46ab40 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -4,48 +4,52 @@ import { themeFunc } from '../../styles' import { KaText } from '../Text/Text' import { useKaTheme } from '../../hooks' import MathClose from '../../icons/MathClose.svg' -import SearchNormal from '../../icons/SearchNormal.svg' -const StyledContainer = styled.div<{ width?: string }>` +interface StyledContainerProps { + isFocused: boolean + isError?: boolean +} + +const StyledContainer = styled.div` display: flex; - flex-direction: column; - width: ${(props) => props.width || '100%'}; - gap: 5px; + flex-direction: row; + border-radius: var(--Radius-6, 360px); + box-sizing: border-box; + outline: ${({ isError }) => (isError ? '1px' : '4px')} solid; + outline-color: ${({ theme, isFocused, isError }): string => + isError + ? theme.danger['6'] + : isFocused + ? theme.elevation['8'] + : 'transparent'}; + transition: border-color 0.3s ease; ` -const StyledInputContainer = styled.div<{ width?: string }>` + +const StyledWrapper = styled.div` display: flex; flex-direction: row; flex: 1; border-radius: var(--Radius-6, 360px); border: none; - gap: 3px; - background-color: ${themeFunc('elevation', '9')}; align-items: center; - padding: 0; - - width: ${(props) => props.width || 'auto'}; ` -const StyledWrapper = styled.div` +const StyledInputContainer = styled.div` display: flex; flex-direction: row; - border-radius: var(--Radius-6, 360px); - box-sizing: border-box; - border: ${(props) => (props.isError ? '1px' : '4px')} solid - ${(props: { - isFocused: boolean - borderColor: string - isError: boolean | undefined - errorColor: string - }): string => - props.isError - ? props.errorColor - : props.isFocused - ? props.borderColor - : 'transparent'}; - transition: border-color 0.3s ease; + flex: 1; + gap: var(--Spacing-2, 8px); + padding: 0px var(--Spacing-4, 16px); + align-items: center; ` + +const StyledClose = styled.div` + cursor: pointer; + display: flex; + align-items: center; +` + const StyledInput = styled.input<{ isError?: boolean }>` flex: 1; width: 100%; @@ -57,7 +61,6 @@ const StyledInput = styled.input<{ isError?: boolean }>` color: ${themeFunc('gray', '0')}; border: none; - padding-left: 8px; box-sizing: border-box; ::placeholder { font-size: 14px; @@ -78,14 +81,6 @@ const StyledInput = styled.input<{ isError?: boolean }>` cursor: not-allowed; } ` -const StyledIconBox = styled.div` - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; -` -const IconList = ['search', 'close'] as const -type IconType = (typeof IconList)[number] export interface KaTextInputProps { inputProps?: { @@ -93,75 +88,37 @@ export interface KaTextInputProps { value?: string onChangeText?: (value: string) => void } - leftIcon?: IconType | ReactElement - rightIcon?: IconType | ReactElement + leftComponent?: ReactElement + rightComponent?: ReactElement leftUnit?: string rightUnit?: string - width?: string disabled?: boolean isError?: boolean + containerStyle?: React.CSSProperties } export const KaTextInput = ({ - leftIcon, - rightIcon, + leftComponent, + rightComponent, leftUnit, rightUnit, - width, inputProps, disabled, isError, + containerStyle, }: KaTextInputProps): ReactElement => { const { getTheme } = useKaTheme() const [onFocus, setOnFocus] = useState(false) - const Icons = (type: IconType) => { - switch (type) { - case 'search': - return ( - - ) - case 'close': - return ( - - ) - default: - return null - } - } + return ( - - + + + {leftComponent} - {typeof leftIcon === 'string' && IconList.includes(leftIcon) ? ( - - {Icons(leftIcon)} - - ) : ( - leftIcon - )} {leftUnit && ( {leftUnit} @@ -197,26 +153,30 @@ export const KaTextInput = ({ color: disabled ? getTheme('elevation', '7') : getTheme('elevation', '4'), - marginRight: rightIcon ? '3px' : '10px', }} > {rightUnit} )} - {typeof rightIcon === 'string' && IconList.includes(rightIcon) ? ( - { + inputProps?.onChangeText?.('') }} > - {Icons(rightIcon)} - - ) : ( - rightIcon + + )} + {rightComponent} ) From 9d32fcfb85f5f04b42844c2967ad3533e3f11b42 Mon Sep 17 00:00:00 2001 From: blue Date: Thu, 10 Oct 2024 15:19:29 +0900 Subject: [PATCH 2/2] Update version to v0.1.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8ab50ea..33540d6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kaiachain/kaia-design-system", - "version": "0.1.11", + "version": "0.1.12", "license": "MIT", "type": "module", "main": "dist/index.js",