Skip to content

Commit 5639520

Browse files
ggazzoggazzo
committed
tamagui first button commit
1 parent 7f622fe commit 5639520

File tree

12 files changed

+891
-68
lines changed

12 files changed

+891
-68
lines changed

‎packages/core/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"clean": "rm -rf dist types node_modules .turbo"
1818
},
1919
"dependencies": {
20+
"@rocket.chat/fuselage-tokens": "workspace:~",
2021
"@shopify/flash-list": "^1.6.3",
2122
"@supabase/supabase-js": "^2.38.4",
2223
"@tamagui/animations-react-native": "1.75.9",

‎packages/core/src/Button.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import {
2+
SizeTokens,
3+
createStyledContext,
4+
styled,
5+
withStaticProperties,
6+
} from '@tamagui/web'
7+
8+
9+
import { Focusable } from './Focusable'
10+
import { SizableText } from './SizableText'
11+
import React from 'react'
12+
13+
14+
export const ButtonContext = createStyledContext({
15+
size: '$lg' as SizeTokens,
16+
small: false,
17+
fontScale: '$hero',
18+
})
19+
20+
export const ButtonFrame = styled(Focusable, {
21+
22+
tag: 'button',
23+
24+
name: 'Button',
25+
26+
context: ButtonContext,
27+
28+
alignItems: 'center',
29+
30+
borderRadius: '$default',
31+
32+
flexDirection: 'row',
33+
34+
variants: {
35+
36+
size: {
37+
38+
'...size': (name, { tokens }) => ({
39+
paddingInline: name === '$sm' ? tokens.size['$sm'] : tokens.size['$lg'],
40+
paddingBlock: name === '$sm' ? tokens.size['$sm'] : tokens.size['$md'],
41+
})
42+
}
43+
}
44+
45+
})
46+
47+
export const ButtonText = styled(SizableText, {
48+
name: 'ButtonText',
49+
context: ButtonContext,
50+
userSelect: 'none',
51+
fontScale: '$p2m',
52+
variants: {
53+
small: {
54+
true: {
55+
fontScale: '$c2',
56+
}
57+
}
58+
}
59+
})
60+
61+
62+
const ButtonComponent = ButtonFrame.styleable<{
63+
small?: boolean
64+
}>(function Button(
65+
{children, small, ...props},
66+
ref
67+
) {
68+
return <ButtonFrame {
69+
...props} ref={ref}>
70+
<ButtonText small={small} >{children}</ButtonText>
71+
</ButtonFrame>
72+
})
73+
74+
75+
export const Button = withStaticProperties(ButtonComponent, {
76+
77+
Props: ButtonContext.Provider,
78+
79+
Text: ButtonText,
80+
})

‎packages/core/src/Focusable.tsx‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
import {
2+
Stack,
3+
styled,
4+
} from '@tamagui/web'
5+
6+
7+
export const Focusable = styled(Stack, {
8+
9+
10+
name: 'Focusable',
11+
12+
acceptsClassName: true,
13+
userSelect: 'none',
14+
cursor: 'pointer',
15+
16+
borderWidth: 1,
17+
borderStyle: 'solid',
18+
borderColor: 'transparent',
19+
alignItems: 'center',
20+
flexDirection: 'row',
21+
pressStyle: {
22+
transform: `translateY(1px);`
23+
},
24+
focusStyle: {
25+
shadowColor: '0 0 0 2px var(--rcx-button-primary-focus-shadow-color, var(--rcx-color-shadow-highlight, var(--rcx-color-blue-200, #D1EBFE)))',
26+
},
27+
28+
variants: {
29+
30+
primary: (value, { props }) => {
31+
switch (true) {
32+
case value && !props.disabled: {
33+
return {
34+
35+
backgroundColor: "$backgroundPrimaryDefault",
36+
borderColor: "$primary_default",
37+
color: "$fontOnPrimary",
38+
39+
hoverStyle: {
40+
backgroundColor: "$backgroundPrimaryHover",
41+
borderColor: "$primary_hover",
42+
},
43+
44+
pressStyle: {
45+
backgroundColor: "$backgroundPrimaryPress",
46+
borderColor: "$primary_press",
47+
},
48+
focusStyle: {
49+
backgroundColor: "$backgroundPrimaryFocus",
50+
borderColor: "$primary_focus",
51+
},
52+
}
53+
}
54+
case value && props.disabled: {
55+
return {
56+
backgroundColor: "$backgroundPrimaryDisabled",
57+
borderColor: "$primary_disabled",
58+
color: "$fontOnPrimaryDisabled",
59+
}
60+
}
61+
}
62+
63+
},
64+
65+
secondary: (value, { props }) => {
66+
switch (true) {
67+
case value && !props.disabled: {
68+
return {
69+
70+
backgroundColor: "$backgroundSecondaryDefault",
71+
borderColor: "$secondary_default",
72+
color: "$fontOnSecondary",
73+
74+
hoverStyle: {
75+
backgroundColor: "$backgroundSecondaryHover",
76+
borderColor: "$secondary_hover",
77+
},
78+
79+
pressStyle: {
80+
backgroundColor: "$backgroundSecondaryPress",
81+
borderColor: "$secondary_press",
82+
},
83+
focusStyle: {
84+
backgroundColor: "$backgroundSecondaryFocus",
85+
borderColor: "$secondary_focus",
86+
},
87+
}
88+
}
89+
case value && props.disabled: {
90+
return {
91+
backgroundColor: "$backgroundSecondaryDisabled",
92+
borderColor: "$secondary_disabled",
93+
color: "$fontOnSecondaryDisabled",
94+
}
95+
}
96+
}
97+
},
98+
danger: (value, { props }) => {
99+
switch (true) {
100+
case value && !props.secondary: {
101+
return {
102+
103+
backgroundColor: "$backgroundDangerDefault",
104+
borderColor: "$danger_default",
105+
color: "$fontOnDanger",
106+
107+
hoverStyle: {
108+
backgroundColor: "$backgroundDangerHover",
109+
borderColor: "$danger_hover",
110+
},
111+
112+
pressStyle: {
113+
backgroundColor: "$backgroundDangerPress",
114+
borderColor: "$danger_press",
115+
},
116+
focusStyle: {
117+
backgroundColor: "$backgroundDangerFocus",
118+
borderColor: "$danger_focus",
119+
},
120+
}
121+
}
122+
case value && props.secondary: {
123+
return {
124+
125+
backgroundColor: "$backgroundSecondaryDangerDefault",
126+
borderColor: "$secondary_danger_default",
127+
color: "$on_secondary_danger",
128+
129+
hoverStyle: {
130+
backgroundColor: "$backgroundSecondaryDangerHover",
131+
borderColor: "$secondary_danger_hover",
132+
},
133+
134+
pressStyle: {
135+
backgroundColor: "$backgroundSecondaryDangerPress",
136+
borderColor: "$secondary_danger_press",
137+
},
138+
focusStyle: {
139+
backgroundColor: "$backgroundSecondaryDangerFocus",
140+
borderColor: "$secondary_danger_focus",
141+
},
142+
}
143+
}
144+
}
145+
},
146+
warning: (value, { props }) => {
147+
switch (true) {
148+
case value && !props.secondary: {
149+
return {
150+
151+
backgroundColor: "$backgroundWarningDefault",
152+
borderColor: "$warning_default",
153+
color: "$fontOnWarning",
154+
155+
hoverStyle: {
156+
backgroundColor: "$backgroundWarningHover",
157+
borderColor: "$warning_hover",
158+
},
159+
160+
pressStyle: {
161+
backgroundColor: "$backgroundWarningPress",
162+
borderColor: "$warning_press",
163+
},
164+
focusStyle: {
165+
backgroundColor: "$backgroundWarningFocus",
166+
borderColor: "$warning_focus",
167+
},
168+
}
169+
}
170+
case value && props.secondary: {
171+
return {
172+
173+
backgroundColor: "$backgroundSecondaryWarningDefault",
174+
borderColor: "$secondary_warning_default",
175+
color: "$on_secondary_warning",
176+
177+
hoverStyle: {
178+
backgroundColor: "$backgroundSecondaryWarningHover",
179+
borderColor: "$secondary_warning_hover",
180+
},
181+
182+
pressStyle: {
183+
backgroundColor: "$backgroundSecondaryWarningPress",
184+
borderColor: "$secondary_warning_press",
185+
},
186+
focusStyle: {
187+
backgroundColor: "$backgroundSecondaryWarningFocus",
188+
borderColor: "$secondary_warning_focus",
189+
},
190+
}
191+
}
192+
}
193+
},
194+
success: (value, { props }) => {
195+
switch (true) {
196+
case value && !props.secondary: {
197+
return {
198+
199+
backgroundColor: "$backgroundSuccessDefault",
200+
borderColor: "$success_default",
201+
color: "$fontOnSuccess",
202+
203+
hoverStyle: {
204+
backgroundColor: "$backgroundSuccessHover",
205+
borderColor: "$success_hover",
206+
},
207+
208+
pressStyle: {
209+
backgroundColor: "$backgroundSuccessPress",
210+
borderColor: "$success_press",
211+
},
212+
focusStyle: {
213+
backgroundColor: "$backgroundSuccessFocus",
214+
borderColor: "$success_focus",
215+
},
216+
}
217+
}
218+
case value && props.secondary: {
219+
return {
220+
221+
backgroundColor: "$backgroundSecondarySuccessDefault",
222+
borderColor: "$secondary_success_default",
223+
color: "$on_secondary_success",
224+
225+
hoverStyle: {
226+
backgroundColor: "$backgroundSecondarySuccessHover",
227+
borderColor: "$secondary_success_hover",
228+
},
229+
230+
pressStyle: {
231+
backgroundColor: "$backgroundSecondarySuccessPress",
232+
borderColor: "$secondary_success_press",
233+
},
234+
focusStyle: {
235+
backgroundColor: "$backgroundSecondarySuccessFocus",
236+
borderColor: "$secondary_success_focus",
237+
},
238+
}
239+
}
240+
}
241+
},
242+
243+
disabled: {
244+
true: {
245+
opacity: 0.5,
246+
cursor: 'not-allowed',
247+
pointerEvents: 'none',
248+
disabled: true,
249+
focusable: undefined,
250+
}
251+
}
252+
} as const,
253+
})

‎packages/core/src/SizableText.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { styled, Text } from "@tamagui/core";
2+
3+
export const SizableText = styled(Text, {
4+
name: 'SizableText',
5+
fontFamily: '$body',
6+
7+
variants: {
8+
fontScale: {
9+
":string": (value) => ({
10+
fontSize: value,
11+
lineHeight: value,
12+
fontWeight: value,
13+
letterSpacing: value,
14+
}),
15+
}
16+
} as const
17+
})

‎packages/core/src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
export { config } from './tamagui.config'
22
export * from '@tamagui/core'
33
export * from './MyComponent'
4+
export * from './Button'
5+
//

0 commit comments

Comments
 (0)