Skip to content

Commit f119b65

Browse files
shiftpshshiftpsh
committed
fix: types
1 parent f695118 commit f119b65

File tree

15 files changed

+155
-164
lines changed

15 files changed

+155
-164
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.26",
3+
"version": "0.0.1-alpha.27",
44
"description": "React component library used by solved.ac",
55
"author": "shiftpsh",
66
"license": "MIT",

‎src/components/Button.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { ElementType } from 'react'
22
import styled, { useTheme } from 'styled-components'
3-
import {
4-
PolymorphicProps,
5-
PolymorphicRef
6-
} from '../types/PolymorphicElementProps'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
74
import { computeHoverColor, readableColor } from '../utils/color'
85
import { cssClickable, cssVariables } from '../utils/styles'
96
import { cardHoverTemplate } from '../utils/variables'
@@ -65,21 +62,18 @@ const ButtonContainer = styled.button<ButtonContainerProps>`
6562
}
6663
`
6764

68-
export type ButtonProps<T extends ElementType = 'button'> = {
65+
export interface ButtonProps {
6966
backgroundColor?: string
7067
hoverColor?: string
7168
primary?: boolean
7269
disabled?: boolean
7370
circle?: boolean
7471
fullWidth?: boolean
7572
padding?: 'none' | 'normal'
76-
} & PolymorphicProps<T>
73+
}
7774

78-
export const Button = React.forwardRef(
79-
<T extends ElementType>(
80-
props: ButtonProps<T>,
81-
ref?: PolymorphicRef<T>
82-
): JSX.Element => {
75+
export const Button: PC<'button', ButtonProps> = React.forwardRef(
76+
<T extends ElementType>(props: PP<T, ButtonProps>, ref?: PR<T>) => {
8377
const solvedTheme = useTheme()
8478

8579
const {

‎src/components/Card.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { ElementType } from 'react'
22
import styled, { css, useTheme } from 'styled-components'
3-
import {
4-
PolymorphicProps,
5-
PolymorphicRef
6-
} from '../types/PolymorphicElementProps'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
74
import { computeHoverColor, readableColor } from '../utils/color'
85
import { cssClickable, cssVariables } from '../utils/styles'
96
import { cardHoverTemplate } from '../utils/variables'
@@ -47,19 +44,16 @@ const CardContainer = styled.div<CardContainerProps>`
4744
${({ padding }) => paddingMap[padding]}
4845
`
4946

50-
export type CardProps<T extends ElementType = 'div'> = {
47+
export interface CardProps {
5148
backgroundColor?: string
5249
hoverColor?: string
5350
clickable?: boolean
5451
disabled?: boolean
5552
padding?: 'none' | 'normal' | 'wide'
56-
} & PolymorphicProps<T>
53+
}
5754

58-
export const Card = React.forwardRef(
59-
<T extends ElementType>(
60-
props: CardProps<T>,
61-
ref?: PolymorphicRef<T>
62-
): JSX.Element => {
55+
export const Card: PC<'div', CardProps> = React.forwardRef(
56+
<T extends ElementType>(props: PP<T, CardProps>, ref?: PR<T>) => {
6357
const solvedTheme = useTheme()
6458

6559
const {

‎src/components/Chip.tsx‎

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

@@ -26,15 +23,12 @@ const ChipContainer = styled.div`
2623
line-height: 1.2;
2724
`
2825

29-
export type ChipProps<T extends ElementType = 'div'> = {
26+
export interface ChipProps {
3027
backgroundColor?: string
31-
} & PolymorphicProps<T>
28+
}
3229

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

‎src/components/Collapse.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { ElementType, useLayoutEffect, useRef, useState } from 'react'
22
import styled from 'styled-components'
3-
import {
4-
PolymorphicProps,
5-
PolymorphicRef
6-
} from '../types/PolymorphicElementProps'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
74

85
interface CollapseContainerProps {
96
renderHeight: number | 'auto'
@@ -20,16 +17,12 @@ const CollapseContainer = styled.div<CollapseContainerProps>`
2017
overflow: 'hidden';
2118
`
2219

23-
export type CollapseProps<T extends ElementType = 'div'> = {
20+
export interface CollapseProps {
2421
shown: boolean
25-
children?: React.ReactNode
26-
} & PolymorphicProps<T>
22+
}
2723

28-
export const Collapse = React.forwardRef(
29-
<T extends ElementType>(
30-
props: CollapseProps<T>,
31-
ref?: PolymorphicRef<T>
32-
): JSX.Element => {
24+
export const Collapse: PC<'div', CollapseProps> = React.forwardRef(
25+
<T extends ElementType>(props: PP<T, CollapseProps>, ref?: PR<T>) => {
3326
const { as = 'div', shown, children } = props
3427

3528
const contentsRef = useRef<HTMLDivElement>(null)

‎src/components/Divider.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
11
import React, { ElementType } from 'react'
22
import styled from 'styled-components'
3-
import {
4-
PolymorphicProps,
5-
PolymorphicRef
6-
} from '../types/PolymorphicElementProps'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
74
import { Space } from './Space'
85

96
const DividerItem = styled.div`
107
border-top: 1px dashed ${({ theme }) => theme.color.border};
118
`
129

13-
export type DividerProps<T extends ElementType = 'div'> = {
10+
export interface DividerProps {
1411
margin?: 'none' | 'normal' | 'wide'
15-
} & PolymorphicProps<T>
12+
}
1613

17-
export const Divider = React.forwardRef(
18-
<T extends ElementType>(
19-
props: DividerProps<T>,
20-
ref?: PolymorphicRef<T>
21-
): JSX.Element => {
14+
export const Divider: PC<'div', DividerProps> = React.forwardRef(
15+
<T extends ElementType>(props: PP<T, DividerProps>, ref?: PR<T>) => {
2216
const { margin = 'normal', as = 'div', ...rest } = props
2317

2418
if (!margin || margin === 'none') return <DividerItem {...rest} />

‎src/components/EmptyStatePlaceholder.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { ElementType } from 'react'
22
import styled from 'styled-components'
3-
import {
4-
PolymorphicProps,
5-
PolymorphicRef
6-
} from '../types/PolymorphicElementProps'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
74
import { cssCentering } from '../utils/styles'
85

96
const paddingMap = {
@@ -26,24 +23,25 @@ const EmptyStatePlaceholderContainer = styled.div<EmptyStatePlaceholderContainer
2623
text-align: center;
2724
`
2825

29-
export type EmptyStatePlaceholderProps<T extends ElementType = 'div'> =
30-
PolymorphicProps<T>
26+
// eslint-disable-next-line @typescript-eslint/no-empty-interface
27+
export interface EmptyStatePlaceholderProps {}
3128

32-
export const EmptyStatePlaceholder = React.forwardRef(
33-
<T extends ElementType>(
34-
props: EmptyStatePlaceholderProps<T>,
35-
ref?: PolymorphicRef<T>
36-
): JSX.Element => {
37-
const { padding, fullHeight, as = 'div', ...rest } = props
29+
export const EmptyStatePlaceholder: PC<'div', EmptyStatePlaceholderProps> =
30+
React.forwardRef(
31+
<T extends ElementType>(
32+
props: PP<T, EmptyStatePlaceholderProps>,
33+
ref?: PR<T>
34+
) => {
35+
const { padding, fullHeight, as = 'div', ...rest } = props
3836

39-
return (
40-
<EmptyStatePlaceholderContainer
41-
as={as}
42-
ref={ref}
43-
fullHeight={fullHeight}
44-
padding={padding}
45-
{...rest}
46-
/>
47-
)
48-
}
49-
)
37+
return (
38+
<EmptyStatePlaceholderContainer
39+
as={as}
40+
ref={ref}
41+
fullHeight={fullHeight}
42+
padding={padding}
43+
{...rest}
44+
/>
45+
)
46+
}
47+
)

‎src/components/List.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { ElementType } from 'react'
22
import styled from 'styled-components'
3-
import {
4-
PolymorphicProps,
5-
PolymorphicRef
6-
} from '../types/PolymorphicElementProps'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
74

85
const paddingMap = {
96
none: 'padding: 0;',
@@ -20,15 +17,12 @@ const ListContainer = styled.ul<ListContainerProps>`
2017
list-style: none;
2118
`
2219

23-
export type ListProps<T extends ElementType = 'ul'> = {
20+
export interface ListProps {
2421
padding?: 'none' | 'normal' | 'wide'
25-
} & PolymorphicProps<T>
22+
}
2623

27-
export const List = React.forwardRef(
28-
<T extends ElementType>(
29-
props: ListProps<T>,
30-
ref?: PolymorphicRef<T>
31-
): JSX.Element => {
24+
export const List: PC<'ul', ListProps> = React.forwardRef(
25+
<T extends ElementType>(props: PP<T, ListProps>, ref?: PR<T>) => {
3226
const { padding = 'normal', children, as = 'ul', ...rest } = props
3327

3428
return (

‎src/components/ListItem.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { ElementType } from 'react'
22
import styled, { css, useTheme } from 'styled-components'
3-
import {
4-
PolymorphicProps,
5-
PolymorphicRef
6-
} from '../types/PolymorphicElementProps'
3+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
74
import { computeHoverColor, readableColor } from '../utils/color'
85
import { cssClickable, cssVariables } from '../utils/styles'
96
import { transparentHoverTemplate } from '../utils/variables'
@@ -58,19 +55,16 @@ const ListItemContainer = styled.div<ListItemContainerProps>`
5855
${({ padding }) => paddingMap[padding]}
5956
`
6057

61-
export type ListItemProps<T extends ElementType = 'div'> = {
58+
export interface ListItemProps {
6259
backgroundColor?: string
6360
hoverColor?: string
6461
clickable?: boolean
6562
disabled?: boolean
6663
padding?: 'none' | 'normal' | 'wide'
67-
} & PolymorphicProps<T>
64+
}
6865

69-
export const ListItem = React.forwardRef(
70-
<T extends ElementType>(
71-
props: ListItemProps<T>,
72-
ref?: PolymorphicRef<T>
73-
): JSX.Element => {
66+
export const ListItem: PC<'div', ListItemProps> = React.forwardRef(
67+
<T extends ElementType>(props: PP<T, ListItemProps>, ref?: PR<T>) => {
7468
const solvedTheme = useTheme()
7569

7670
const {

‎src/components/PaginationItem.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { ellipsis } from 'polished'
22
import React, { ElementType } from 'react'
33
import styled, { css, useTheme } from 'styled-components'
4-
import {
5-
PolymorphicProps,
6-
PolymorphicRef
7-
} from '../types/PolymorphicElementProps'
4+
import { PC, PP, PR } from '../types/PolymorphicElementProps'
85
import { computeHoverColor, readableColor } from '../utils/color'
96
import { cssClickable, cssVariables } from '../utils/styles'
107
import { transparentHoverTemplate } from '../utils/variables'
@@ -56,19 +53,16 @@ const PaginationItemContainer = styled.button<PaginationItemContainerProps>`
5653
${({ current }) => current && whenCurrent}
5754
`
5855

59-
export type PaginationItemProps<T extends ElementType = 'button'> = {
56+
export interface PaginationItemProps {
6057
current?: boolean
6158
disabled?: boolean
6259
backgroundColor?: string
6360
hoverColor?: string
6461
activeColor?: string
65-
} & PolymorphicProps<T>
62+
}
6663

67-
export const PaginationItem = React.forwardRef(
68-
<T extends ElementType>(
69-
props: PaginationItemProps<T>,
70-
ref?: PolymorphicRef<T>
71-
): JSX.Element => {
64+
export const PaginationItem: PC<'a', PaginationItemProps> = React.forwardRef(
65+
<T extends ElementType>(props: PP<T, PaginationItemProps>, ref?: PR<T>) => {
7266
const solvedTheme = useTheme()
7367

7468
const {
@@ -78,7 +72,7 @@ export const PaginationItem = React.forwardRef(
7872
hoverColor,
7973
activeColor,
8074
style,
81-
as = 'div',
75+
as = 'a',
8276
...rest
8377
} = props
8478

0 commit comments

Comments
 (0)