Skip to content

Commit 1b4ed3d

Browse files
clovisdasilvanetoclovisdasilvaneto
committed
chore: move external components from safe-react-components repo to the tx-builder/components folder
1 parent 44091e4 commit 1b4ed3d

File tree

26 files changed

+1853
-0
lines changed

26 files changed

+1853
-0
lines changed

‎apps/tx-builder/src/components/Accordion/index.tsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { ReactElement } from 'react'
2+
import AccordionMUI, { AccordionProps as AccordionMUIProps } from '@material-ui/core/Accordion'
3+
import AccordionSummaryMUI, {
4+
AccordionSummaryProps as AccordionSummaryMUIProps,
5+
} from '@material-ui/core/AccordionSummary'
6+
import styled from 'styled-components'
7+
import FixedIcon from '../FixedIcon'
8+
9+
type AccordionProps = AccordionMUIProps & {
10+
compact?: boolean
11+
}
12+
13+
type StyledAccordionProps = AccordionMUIProps & {
14+
$compact?: AccordionProps['compact']
15+
}
16+
17+
const StyledAccordion = styled(AccordionMUI)<StyledAccordionProps>`
18+
&.MuiAccordion-root {
19+
border-radius: ${({ $compact }) => ($compact ? '8px' : '0')};
20+
border: ${({ $compact, theme }) => ($compact ? '2px solid ' + theme.palette.divider : 'none')};
21+
border-bottom: 2px solid ${({ theme }) => theme.palette.divider};
22+
margin-bottom: ${({ $compact }) => ($compact ? '16px' : '0')};
23+
overflow: hidden;
24+
25+
&:before {
26+
height: 0;
27+
}
28+
29+
&:first-child {
30+
border-top: 2px solid ${({ theme }) => theme.palette.divider};
31+
}
32+
33+
&.Mui-expanded {
34+
margin: ${({ $compact }) => ($compact ? '0 0 16px 0' : '0')};
35+
}
36+
37+
.MuiAccordionDetails-root {
38+
padding: 16px;
39+
}
40+
}
41+
`
42+
43+
const StyledAccordionSummary = styled(AccordionSummaryMUI)`
44+
&.MuiAccordionSummary-root {
45+
&.Mui-expanded {
46+
min-height: 48px;
47+
border-bottom: 2px solid ${({ theme }) => theme.palette.divider};
48+
background-color: ${({ theme }) => theme.palette.background.default};
49+
}
50+
51+
&:hover {
52+
background-color: ${({ theme }) => theme.palette.background.default};
53+
}
54+
55+
.MuiAccordionSummary-content {
56+
&.Mui-expanded {
57+
margin: 0;
58+
}
59+
}
60+
.MuiIconButton-root {
61+
font-size: 0;
62+
padding: 16px;
63+
}
64+
}
65+
`
66+
67+
export const Accordion = ({ compact, children, ...props }: AccordionProps): ReactElement => {
68+
return (
69+
<StyledAccordion square elevation={0} $compact={compact} {...props}>
70+
{children}
71+
</StyledAccordion>
72+
)
73+
}
74+
75+
export const AccordionSummary = ({
76+
children,
77+
...props
78+
}: AccordionSummaryMUIProps): ReactElement => {
79+
return (
80+
<StyledAccordionSummary expandIcon={<FixedIcon type="chevronDown" />} {...props}>
81+
{children}
82+
</StyledAccordionSummary>
83+
)
84+
}
85+
86+
export { default as AccordionActions } from '@material-ui/core/AccordionActions'
87+
export { default as AccordionDetails } from '@material-ui/core/AccordionDetails'

‎apps/tx-builder/src/components/Button.tsx

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import React, { ReactElement, ReactNode, HTMLAttributes } from 'react'
2+
import ButtonMUI, { ButtonProps as ButtonMUIProps } from '@material-ui/core/Button'
3+
import { alpha } from '@material-ui/core/styles'
4+
5+
import styled, { css, DefaultTheme, FlattenInterpolation, ThemeProps } from 'styled-components'
6+
import { Icon, IconProps, IconTypes } from './Icon'
7+
8+
type Colors = 'primary' | 'secondary' | 'error'
9+
type Variations = 'bordered' | 'contained' | 'outlined'
10+
11+
type CustomButtonMuiProps = Omit<ButtonMUIProps, 'size' | 'color' | 'variant'> & {
12+
to?: string
13+
component?: ReactNode
14+
}
15+
type LocalProps = {
16+
children?: ReactNode
17+
color?: Colors
18+
variant?: Variations
19+
iconType?: IconProps['type']
20+
iconSize?: IconProps['size']
21+
}
22+
23+
type Props = LocalProps & CustomButtonMuiProps & HTMLAttributes<HTMLButtonElement>
24+
25+
const StyledIcon = styled(Icon)<IconProps>`
26+
margin-right: 5px;
27+
`
28+
29+
const customStyles: {
30+
[key in Colors]: {
31+
[key in Variations]: FlattenInterpolation<ThemeProps<DefaultTheme>>
32+
}
33+
} = {
34+
primary: {
35+
contained: css`
36+
color: ${({ theme }) => theme.palette.common.white};
37+
background-color: ${({ theme }) => theme.palette.primary.main};
38+
box-shadow: 1px 2px 10px ${alpha('#28363D', 0.18)};
39+
40+
&:hover {
41+
color: ${({ theme }) => theme.palette.common.white};
42+
background-color: ${({ theme }) => theme.palette.primary.dark};
43+
}
44+
`,
45+
outlined: css`
46+
color: ${({ theme }) => theme.palette.primary.main};
47+
background-color: transparent;
48+
path.icon-color {
49+
fill: ${({ theme }) => theme.palette.primary.main};
50+
}
51+
52+
&.Mui-disabled {
53+
color: ${({ theme }) => theme.palette.primary.main};
54+
}
55+
56+
&:hover {
57+
color: ${({ theme }) => theme.palette.primary.dark};
58+
}
59+
`,
60+
bordered: css`
61+
color: ${({ theme }) => theme.palette.primary.main};
62+
background-color: transparent;
63+
border: 2px solid ${({ theme }) => theme.palette.primary.main};
64+
path.icon-color {
65+
fill: ${({ theme }) => theme.palette.primary.main};
66+
}
67+
68+
&.Mui-disabled {
69+
color: ${({ theme }) => theme.palette.primary.main};
70+
}
71+
`,
72+
},
73+
secondary: {
74+
contained: css`
75+
color: ${({ theme }) => theme.palette.primary};
76+
background-color: ${({ theme }) => theme.palette.secondary.main};
77+
box-shadow: 1px 2px 10px ${alpha('#28363D', 0.18)};
78+
79+
path.icon-color {
80+
color: ${({ theme }) => theme.palette.common.primary};
81+
}
82+
83+
&:hover {
84+
path.icon-color {
85+
color: ${({ theme }) => theme.palette.common.primary};
86+
}
87+
88+
background-color: ${({ theme }) => theme.palette.secondary.dark};
89+
}
90+
`,
91+
outlined: css`
92+
color: ${({ theme }) => theme.palette.secondary.main};
93+
background-color: transparent;
94+
path.icon-color {
95+
fill: ${({ theme }) => theme.palette.secondary.main};
96+
}
97+
98+
&.Mui-disabled {
99+
color: ${({ theme }) => theme.palette.secondary.main};
100+
}
101+
`,
102+
bordered: css`
103+
color: ${({ theme }) => theme.palette.secondary.main};
104+
background-color: transparent;
105+
border: 2px solid ${({ theme }) => theme.palette.secondary.main};
106+
path.icon-color {
107+
fill: ${({ theme }) => theme.palette.secondary.main};
108+
}
109+
110+
&.Mui-disabled {
111+
color: ${({ theme }) => theme.palette.secondary.main};
112+
}
113+
`,
114+
},
115+
error: {
116+
contained: css`
117+
color: ${({ theme }) => theme.palette.common.white};
118+
background-color: ${({ theme }) => theme.palette.error.main};
119+
box-shadow: 1px 2px 10px ${alpha('#28363D', 0.18)};
120+
121+
&:hover {
122+
background-color: ${({ theme }) => theme.palette.error.dark};
123+
}
124+
`,
125+
outlined: css`
126+
color: ${({ theme }) => theme.palette.error.main};
127+
background-color: transparent;
128+
path.icon-color {
129+
fill: ${({ theme }) => theme.palette.error.main};
130+
}
131+
132+
&.Mui-disabled {
133+
color: ${({ theme }) => theme.palette.error.main};
134+
}
135+
`,
136+
bordered: css`
137+
color: ${({ theme }) => theme.palette.error.main};
138+
background-color: transparent;
139+
border: 2px solid ${({ theme }) => theme.palette.error.main};
140+
path.icon-color {
141+
fill: ${({ theme }) => theme.palette.error.main};
142+
}
143+
144+
&.Mui-disabled {
145+
color: ${({ theme }) => theme.palette.error.main};
146+
}
147+
`,
148+
},
149+
}
150+
151+
const StyledButton = styled(ButtonMUI)<{ $localProps: LocalProps }>`
152+
&& {
153+
font-weight: 700;
154+
padding: 8px 1.4rem;
155+
min-width: 120px;
156+
157+
&.MuiButton-root {
158+
text-transform: none;
159+
border-radius: 8px;
160+
letter-spacing: 0;
161+
}
162+
163+
&.Mui-disabled {
164+
color: ${({ theme }) => theme.palette.common.white};
165+
}
166+
167+
path.icon-color {
168+
fill: ${({ theme }) => theme.palette.common.white};
169+
}
170+
171+
&:disabled {
172+
opacity: 0.5;
173+
}
174+
175+
${({ $localProps }) => {
176+
if ($localProps.color !== undefined && $localProps.variant !== undefined) {
177+
return customStyles[$localProps.color][$localProps.variant]
178+
}
179+
}}
180+
}
181+
`
182+
183+
const Button = ({
184+
children,
185+
color = 'primary',
186+
variant = 'contained',
187+
iconType,
188+
iconSize,
189+
// We need destructuring all LocalProps, remaining props are for CustomButtonMuiProps
190+
...buttonMuiProps
191+
}: Props): ReactElement => {
192+
return (
193+
<StyledButton
194+
className={`${color} ${variant}`}
195+
{...buttonMuiProps}
196+
$localProps={{ color, variant }}
197+
>
198+
{iconType && iconSize && <StyledIcon size={iconSize} type={iconType} />}
199+
{children}
200+
</StyledButton>
201+
)
202+
}
203+
204+
export default Button

‎apps/tx-builder/src/components/Card/index.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { alpha } from '@material-ui/core/styles'
4+
5+
const StyledCard = styled.div`
6+
box-shadow: 1px 2px 10px 0 ${alpha('#28363D', 0.18)};
7+
border-radius: 8px;
8+
padding: 24px;
9+
background-color: ${({ theme }) => theme.palette.common.white};
10+
position: relative;
11+
`
12+
13+
const Disabled = styled.div`
14+
opacity: 0.5;
15+
position: absolute;
16+
height: 100%;
17+
width: 100%;
18+
background-color: ${({ theme }) => theme.palette.common.white};
19+
z-index: 1;
20+
top: 0;
21+
left: 0;
22+
`
23+
24+
type Props = {
25+
className?: string
26+
disabled?: boolean
27+
} & React.HTMLAttributes<HTMLDivElement>
28+
29+
const Card: React.FC<Props> = ({ className, children, disabled, ...rest }): React.ReactElement => (
30+
<StyledCard className={className} {...rest}>
31+
{disabled && <Disabled />}
32+
{children}
33+
</StyledCard>
34+
)
35+
36+
export default Card

‎apps/tx-builder/src/components/Divider.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
4+
type Props = {
5+
className?: string
6+
orientation?: 'vertical' | 'horizontal'
7+
}
8+
9+
const HorizontalDivider = styled.div`
10+
margin: 16px -1.6rem;
11+
border-top: solid 1px #dcdee0;
12+
width: calc(100% + 3.2rem);
13+
`
14+
15+
const VerticalDivider = styled.div`
16+
border-right: 1px solid ${({ theme }) => theme.legacy.colors.separator};
17+
margin: 0 5px;
18+
height: 100%;
19+
`
20+
21+
const Divider = ({ className, orientation }: Props): React.ReactElement => {
22+
return orientation === 'vertical' ? (
23+
<VerticalDivider className={className} />
24+
) : (
25+
<HorizontalDivider className={className} />
26+
)
27+
}
28+
29+
export default Divider

‎apps/tx-builder/src/components/Dot/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { type Theme } from '@material-ui/core/styles'
4+
5+
type Props = {
6+
className?: string
7+
color: keyof Theme['palette']
8+
}
9+
10+
const StyledDot = styled.div<Props>`
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
border-radius: 50%;
15+
height: 36px;
16+
width: 36px;
17+
background-color: ${({ theme, color }) => theme.palette[color].main};
18+
`
19+
20+
const Dot: React.FC<Props> = ({ children, ...rest }): React.ReactElement => (
21+
<StyledDot {...rest}>{children}</StyledDot>
22+
)
23+
24+
export default Dot

0 commit comments

Comments
 (0)