Skip to content

Commit 9a5c44b

Browse files
indianaPolyindianaPoly
committed
refactoring checkbox code
1 parent 0a2293d commit 9a5c44b

File tree

3 files changed

+63
-58
lines changed

3 files changed

+63
-58
lines changed

‎packages/components/src/components/Checkbox/CheckIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { SVGProps } from 'react'
22

33
type CheckIconProps = SVGProps<SVGSVGElement> & {
4-
color: string
4+
color?: string
55
}
66

77
export function CheckIcon({ color, ...props }: CheckIconProps) {

‎packages/components/src/components/Checkbox/Checkbox.stories.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, StoryObj } from '@storybook/react-vite'
22

3-
import { Checkbox } from '.'
3+
import { Checkbox } from './index'
44

55
type Story = StoryObj<typeof meta>
66

@@ -9,11 +9,25 @@ const meta: Meta<typeof Checkbox> = {
99
title: 'Devfive/Checkbox',
1010
component: Checkbox,
1111
decorators: [
12-
(Story) => (
13-
<div style={{ padding: '10px' }}>
14-
<Story />
15-
</div>
16-
),
12+
(Story, context) => {
13+
const theme =
14+
context.parameters.theme || context.globals.theme || 'default'
15+
const isDark = theme === 'dark'
16+
17+
return (
18+
<div
19+
data-theme={theme}
20+
style={{
21+
padding: '20px',
22+
backgroundColor: isDark ? '#1a1a1a' : '#ffffff',
23+
color: isDark ? '#ffffff' : '#000000',
24+
minHeight: '200px',
25+
}}
26+
>
27+
<Story />
28+
</div>
29+
)
30+
},
1731
],
1832
}
1933

@@ -22,6 +36,7 @@ export const Default: Story = {
2236
children: 'Checkbox',
2337
disabled: false,
2438
checked: true,
39+
label: 'Checkbox',
2540
},
2641
}
2742

‎packages/components/src/components/Checkbox/index.tsx‎

Lines changed: 41 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
'use client'
2-
3-
import { Box, css, Flex, getTheme, Input, Text } from '@devup-ui/react'
1+
import { Box, css, Flex, Input, Text } from '@devup-ui/react'
42
import { ComponentProps } from 'react'
53

64
import { CheckIcon } from './CheckIcon'
@@ -20,79 +18,68 @@ export function Checkbox({
2018
label,
2119
...props
2220
}: CheckboxProps) {
23-
const theme = getTheme()
24-
2521
return (
2622
<Flex alignItems="center" gap="8px" h="fit-content">
2723
<Box h="18px" pos="relative" w="fit-content">
2824
<Input
2925
_active={
30-
disabled
31-
? undefined
32-
: {
33-
bg:
34-
theme === 'dark'
35-
? 'color-mix(in srgb, var(--primary) 30%, black 70%)'
36-
: 'color-mix(in srgb, var(--primary) 20%, #FFF 80%)',
37-
}
26+
!disabled && {
27+
bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))',
28+
}
3829
}
3930
_checked={{
40-
bg: '$primary',
31+
bg: 'light-dark(var(--primary, #6159D4), var(--primary, #6670F9))',
4132
border: 'none',
42-
_hover: disabled
43-
? undefined
44-
: {
45-
bg:
46-
theme === 'dark'
47-
? 'color-mix(in srgb, var(--primary) 100%, #FFF 15%)'
48-
: 'color-mix(in srgb, var(--primary) 100%, #000 15%)',
49-
},
33+
_hover: !disabled && {
34+
bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))',
35+
},
5036
_disabled: {
51-
bg: theme === 'dark' ? '#47474A' : '#F0F0F3',
37+
bg: 'light-dark(#F0F0F3, #47474A)',
5238
},
5339
}}
5440
_disabled={{
55-
bg: theme === 'dark' ? '#47474A' : '#F0F0F3',
41+
bg: 'light-dark(#47474A, #F0F0F3)',
5642
}}
5743
_hover={
58-
disabled
59-
? undefined
60-
: {
61-
bg:
62-
theme === 'dark'
63-
? 'color-mix(in srgb, var(--primary) 20%, black 80%);'
64-
: 'color-mix(in srgb, var(--primary) 10%, #FFF 90%)',
65-
border: '1px solid var(--primary)',
66-
}
44+
!disabled && {
45+
bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))',
46+
border:
47+
'light-dark(1px solid var(--primary, #6159D4), 1px solid var(--primary, #6670F9))',
48+
}
6749
}
68-
accentColor="$primary"
50+
accentColor="light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"
6951
appearance="none"
70-
bg={theme === 'dark' ? '$inputBg' : '$contentBackground'}
71-
border="1px solid var(--border)"
52+
bg="light-dark(#FFF, var(--inputBg, #2E2E2E))"
53+
border="light-dark(1px solid var(--border, #E0E0E0), 1px solid var(--border, #333333))"
7254
borderRadius="2px"
7355
boxSize="16px"
7456
checked={checked}
7557
cursor={disabled ? 'not-allowed' : 'pointer'}
7658
disabled={disabled}
7759
id={label}
7860
m="0"
79-
onChange={(e) => !disabled && onChange?.(e.target.checked)}
61+
onChange={
62+
disabled || !onChange
63+
? undefined
64+
: (e) => onChange(e.target.checked)
65+
}
8066
styleOrder={1}
8167
type="checkbox"
8268
{...props}
8369
/>
8470
{checked && (
85-
<CheckIcon
86-
className={css({
87-
position: 'absolute',
88-
top: '8px',
89-
left: '50%',
90-
transform: 'translate(-50%, -50%)',
91-
pointerEvents: 'none',
92-
})}
93-
color={
94-
disabled ? (theme === 'dark' ? '#373737' : '#D6D7DE') : '#FFF'
95-
}
71+
<Box
72+
as={CheckIcon}
73+
props={{
74+
color: disabled ? 'light-dark(#D6D7DE, #373737)' : '#FFF',
75+
className: css({
76+
left: '50%',
77+
pointerEvents: 'none',
78+
pos: 'absolute',
79+
top: '8px',
80+
transform: 'translate(-50%, -50%)',
81+
}),
82+
}}
9683
/>
9784
)}
9885
</Box>
@@ -105,10 +92,13 @@ export function Checkbox({
10592
>
10693
{typeof children === 'string' ? (
10794
<Text
108-
as="span"
109-
color={disabled ? '#D6D7DE' : '$text'}
95+
color={
96+
disabled
97+
? 'light-dark(#D6D7DE, #373737)'
98+
: 'light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))'
99+
}
110100
fontSize="14px"
111-
style={{ userSelect: 'none', verticalAlign: 'middle' }}
101+
userSelect="none"
112102
>
113103
{children}
114104
</Text>

0 commit comments

Comments
 (0)