Skip to content

Commit d9a1177

Browse files
shiftpshshiftpsh
committed
feat: refs
1 parent 2d5ad75 commit d9a1177

File tree

14 files changed

+450
-339
lines changed

14 files changed

+450
-339
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@solved-ac/ui-react",
3-
"version": "0.0.1-alpha.20",
3+
"version": "0.0.1-alpha.21",
44
"description": "React component library used by solved.ac",
55
"author": "shiftpsh",
66
"license": "MIT",

‎src/components/Button.tsx‎

Lines changed: 62 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { ElementType } from 'react'
22
import styled, { useTheme } from 'styled-components'
3-
import { PolymorphicElementProps } from '../types/PolymorphicElementProps'
3+
import {
4+
PolymorphicProps,
5+
PolymorphicRef
6+
} from '../types/PolymorphicElementProps'
47
import { computeHoverColor, readableColor } from '../utils/color'
58
import { cssClickable, cssVariables } from '../utils/styles'
69
import { cardHoverTemplate } from '../utils/variables'
@@ -64,61 +67,66 @@ export type ButtonProps<T extends ElementType = 'button'> = {
6467
circle?: boolean
6568
fullWidth?: boolean
6669
padding?: 'none' | 'normal'
67-
} & PolymorphicElementProps<T>
70+
} & PolymorphicProps<T>
6871

69-
export const Button = <T extends ElementType>(
70-
props: ButtonProps<T>
71-
): JSX.Element => {
72-
const solvedTheme = useTheme()
72+
export const Button = React.forwardRef(
73+
<T extends ElementType>(
74+
props: ButtonProps<T>,
75+
ref?: PolymorphicRef<T>
76+
): JSX.Element => {
77+
const solvedTheme = useTheme()
7378

74-
const {
75-
backgroundColor,
76-
hoverColor,
77-
primary = false,
78-
disabled = false,
79-
circle = false,
80-
fullWidth = false,
81-
padding = 'normal',
82-
style,
83-
children,
84-
as = 'button',
85-
...rest
86-
} = props
79+
const {
80+
backgroundColor,
81+
hoverColor,
82+
primary = false,
83+
disabled = false,
84+
circle = false,
85+
fullWidth = false,
86+
padding = 'normal',
87+
style,
88+
children,
89+
as = 'button',
90+
...rest
91+
} = props
8792

88-
const computedBackgroundColor =
89-
backgroundColor || (primary ? solvedTheme.color.solvedAc : undefined)
93+
const computedBackgroundColor =
94+
backgroundColor || (primary ? solvedTheme.color.solvedAc : undefined)
9095

91-
const computedHoverColor =
92-
hoverColor ||
93-
(computedBackgroundColor && computeHoverColor(computedBackgroundColor))
96+
const computedHoverColor =
97+
hoverColor ||
98+
(computedBackgroundColor && computeHoverColor(computedBackgroundColor))
9499

95-
return (
96-
<ButtonContainer
97-
as={as}
98-
disabled={disabled}
99-
circle={circle}
100-
fullWidth={fullWidth}
101-
style={{
102-
[vars.backgroundColor]: computedBackgroundColor,
103-
[vars.hoverBackgroundColor]: computedHoverColor,
104-
[vars.textColor]:
105-
computedBackgroundColor &&
106-
readableColor(computedBackgroundColor, solvedTheme),
107-
[vars.hoverTextColor]:
108-
computedHoverColor && readableColor(computedHoverColor, solvedTheme),
109-
[vars.hoverShadow]:
110-
computedHoverColor &&
111-
solvedTheme.styles.shadow(computedHoverColor, 8),
112-
[vars.activeShadow]:
113-
computedHoverColor &&
114-
solvedTheme.styles.shadow(computedHoverColor, 4),
115-
...style,
116-
}}
117-
{...rest}
118-
>
119-
<div style={{ padding: padding === 'none' ? 'unset' : '12px 16px' }}>
120-
{children}
121-
</div>
122-
</ButtonContainer>
123-
)
124-
}
100+
return (
101+
<ButtonContainer
102+
as={as}
103+
ref={ref}
104+
disabled={disabled}
105+
circle={circle}
106+
fullWidth={fullWidth}
107+
style={{
108+
[vars.backgroundColor]: computedBackgroundColor,
109+
[vars.hoverBackgroundColor]: computedHoverColor,
110+
[vars.textColor]:
111+
computedBackgroundColor &&
112+
readableColor(computedBackgroundColor, solvedTheme),
113+
[vars.hoverTextColor]:
114+
computedHoverColor &&
115+
readableColor(computedHoverColor, solvedTheme),
116+
[vars.hoverShadow]:
117+
computedHoverColor &&
118+
solvedTheme.styles.shadow(computedHoverColor, 8),
119+
[vars.activeShadow]:
120+
computedHoverColor &&
121+
solvedTheme.styles.shadow(computedHoverColor, 4),
122+
...style,
123+
}}
124+
{...rest}
125+
>
126+
<div style={{ padding: padding === 'none' ? 'unset' : '12px 16px' }}>
127+
{children}
128+
</div>
129+
</ButtonContainer>
130+
)
131+
}
132+
)

‎src/components/Card.tsx‎

Lines changed: 48 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { ElementType } from 'react'
22
import styled, { css, useTheme } from 'styled-components'
3-
import { PolymorphicElementProps } from '../types/PolymorphicElementProps'
3+
import {
4+
PolymorphicProps,
5+
PolymorphicRef
6+
} from '../types/PolymorphicElementProps'
47
import { computeHoverColor, readableColor } from '../utils/color'
58
import { cssClickable, cssVariables } from '../utils/styles'
69
import { cardHoverTemplate } from '../utils/variables'
@@ -50,46 +53,51 @@ export type CardProps<T extends ElementType = 'div'> = {
5053
clickable?: boolean
5154
disabled?: boolean
5255
padding?: 'none' | 'normal' | 'wide'
53-
} & PolymorphicElementProps<T>
56+
} & PolymorphicProps<T>
5457

55-
export const Card = <T extends ElementType>(
56-
props: CardProps<T>
57-
): JSX.Element => {
58-
const solvedTheme = useTheme()
58+
export const Card = React.forwardRef(
59+
<T extends ElementType>(
60+
props: CardProps<T>,
61+
ref?: PolymorphicRef<T>
62+
): JSX.Element => {
63+
const solvedTheme = useTheme()
5964

60-
const {
61-
backgroundColor,
62-
hoverColor,
63-
clickable = false,
64-
disabled = false,
65-
padding = 'normal',
66-
style,
67-
children,
68-
as,
69-
...rest
70-
} = props
65+
const {
66+
backgroundColor,
67+
hoverColor,
68+
clickable = false,
69+
disabled = false,
70+
padding = 'normal',
71+
style,
72+
children,
73+
as,
74+
...rest
75+
} = props
7176

72-
const computedHoverColor =
73-
hoverColor || (backgroundColor && computeHoverColor(backgroundColor))
77+
const computedHoverColor =
78+
hoverColor || (backgroundColor && computeHoverColor(backgroundColor))
7479

75-
return (
76-
<CardContainer
77-
as={as ?? (clickable ? 'button' : 'div')}
78-
disabled={disabled && clickable}
79-
clickable={clickable}
80-
padding={padding}
81-
style={{
82-
[vars.backgroundColor]: backgroundColor,
83-
[vars.hoverBackgroundColor]: computedHoverColor,
84-
[vars.textColor]:
85-
backgroundColor && readableColor(backgroundColor, solvedTheme),
86-
[vars.hoverTextColor]:
87-
computedHoverColor && readableColor(computedHoverColor, solvedTheme),
88-
...style,
89-
}}
90-
{...rest}
91-
>
92-
{children}
93-
</CardContainer>
94-
)
95-
}
80+
return (
81+
<CardContainer
82+
ref={ref}
83+
as={as ?? (clickable ? 'button' : 'div')}
84+
disabled={disabled && clickable}
85+
clickable={clickable}
86+
padding={padding}
87+
style={{
88+
[vars.backgroundColor]: backgroundColor,
89+
[vars.hoverBackgroundColor]: computedHoverColor,
90+
[vars.textColor]:
91+
backgroundColor && readableColor(backgroundColor, solvedTheme),
92+
[vars.hoverTextColor]:
93+
computedHoverColor &&
94+
readableColor(computedHoverColor, solvedTheme),
95+
...style,
96+
}}
97+
{...rest}
98+
>
99+
{children}
100+
</CardContainer>
101+
)
102+
}
103+
)

‎src/components/Chip.tsx‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { ElementType } from 'react'
22
import styled, { useTheme } from 'styled-components'
3-
import { PolymorphicElementProps } from '../types/PolymorphicElementProps'
3+
import {
4+
PolymorphicProps,
5+
PolymorphicRef
6+
} from '../types/PolymorphicElementProps'
47
import { readableColor } from '../utils/color'
58
import { cssVariables } from '../utils/styles'
69

@@ -25,24 +28,28 @@ const ChipContainer = styled.div`
2528

2629
export type ChipProps<T extends ElementType = 'div'> = {
2730
backgroundColor?: string
28-
} & PolymorphicElementProps<T>
31+
} & PolymorphicProps<T>
2932

30-
export const Chip = <T extends ElementType>(
31-
props: ChipProps<T>
32-
): JSX.Element => {
33-
const theme = useTheme()
34-
const { backgroundColor, style, as = 'div', ...rest } = props
33+
export const Chip = React.forwardRef(
34+
<T extends ElementType>(
35+
props: ChipProps<T>,
36+
ref?: PolymorphicRef<T>
37+
): JSX.Element => {
38+
const theme = useTheme()
39+
const { backgroundColor, style, as = 'div', ...rest } = props
3540

36-
return (
37-
<ChipContainer
38-
as={as}
39-
style={{
40-
[vars.backgroundColor]: backgroundColor,
41-
[vars.textColor]:
42-
backgroundColor && readableColor(backgroundColor, theme),
43-
...style,
44-
}}
45-
{...rest}
46-
/>
47-
)
48-
}
41+
return (
42+
<ChipContainer
43+
ref={ref}
44+
as={as}
45+
style={{
46+
[vars.backgroundColor]: backgroundColor,
47+
[vars.textColor]:
48+
backgroundColor && readableColor(backgroundColor, theme),
49+
...style,
50+
}}
51+
{...rest}
52+
/>
53+
)
54+
}
55+
)

0 commit comments

Comments
 (0)