Skip to content

Commit 24da5e7

Browse files
tassoevantassoevan
authored
feat: Fuselage typings (#348)
1 parent 92c67d8 commit 24da5e7

File tree

2 files changed

+345
-0
lines changed

2 files changed

+345
-0
lines changed

‎packages/fuselage/fuselage.d.ts

+343
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
declare module '@rocket.chat/fuselage' {
2+
import { css } from '@rocket.chat/css-in-js';
3+
import {
4+
AllHTMLAttributes,
5+
Context,
6+
CSSProperties,
7+
Dispatch,
8+
ElementType,
9+
ForwardRefExoticComponent,
10+
PropsWithChildren,
11+
ReactNode,
12+
RefAttributes,
13+
SetStateAction,
14+
SVGAttributes,
15+
} from 'react';
16+
17+
type FontScale = 'h1' | 's1' | 's2' | 'p1' | 'p2' | 'c1' | 'c2' | 'micro';
18+
19+
type BoxProps = PropsWithChildren<{
20+
is?: ElementType;
21+
className?: string | ReturnType<typeof css> | (string | ReturnType<typeof css>)[];
22+
style?: CSSProperties;
23+
border?: CSSProperties['border'];
24+
borderBlock?: CSSProperties['borderBlock'];
25+
borderBlockStart?: CSSProperties['borderBlockStart'];
26+
borderBlockEnd?: CSSProperties['borderBlockEnd'];
27+
borderInline?: CSSProperties['borderInline'];
28+
borderInlineStart?: CSSProperties['borderInlineStart'];
29+
borderInlineEnd?: CSSProperties['borderInlineEnd'];
30+
borderWidth?: CSSProperties['borderWidth'];
31+
borderBlockWidth?: CSSProperties['borderBlockWidth'];
32+
borderBlockStartWidth?: CSSProperties['borderBlockStartWidth'];
33+
borderBlockEndWidth?: CSSProperties['borderBlockEndWidth'];
34+
borderInlineWidth?: CSSProperties['borderInlineWidth'];
35+
borderInlineStartWidth?: CSSProperties['borderInlineStartWidth'];
36+
borderInlineEndWidth?: CSSProperties['borderInlineEndWidth'];
37+
borderStyle?: CSSProperties['borderStyle'];
38+
borderBlockStyle?: CSSProperties['borderBlockStyle'];
39+
borderBlockStartStyle?: CSSProperties['borderBlockStartStyle'];
40+
borderBlockEndStyle?: CSSProperties['borderBlockEndStyle'];
41+
borderInlineStyle?: CSSProperties['borderInlineStyle'];
42+
borderInlineStartStyle?: CSSProperties['borderInlineStartStyle'];
43+
borderInlineEndStyle?: CSSProperties['borderInlineEndStyle'];
44+
borderColor?: CSSProperties['borderColor'];
45+
borderBlockColor?: CSSProperties['borderBlockColor'];
46+
borderBlockStartColor?: CSSProperties['borderBlockStartColor'];
47+
borderBlockEndColor?: CSSProperties['borderBlockEndColor'];
48+
borderInlineColor?: CSSProperties['borderInlineColor'];
49+
borderInlineStartColor?: CSSProperties['borderInlineStartColor'];
50+
borderInlineEndColor?: CSSProperties['borderInlineEndColor'];
51+
borderRadius?: CSSProperties['borderRadius'];
52+
borderStartStartRadius?: CSSProperties['borderStartStartRadius'];
53+
borderStartEndRadius?: CSSProperties['borderStartEndRadius'];
54+
borderEndStartRadius?: CSSProperties['borderEndStartRadius'];
55+
borderEndEndRadius?: CSSProperties['borderEndEndRadius'];
56+
57+
color?: CSSProperties['color'];
58+
backgroundColor?: CSSProperties['backgroundColor'];
59+
bg?: CSSProperties['backgroundColor'];
60+
opacity?: CSSProperties['opacity'];
61+
62+
alignItems?: CSSProperties['alignItems'];
63+
alignContent?: CSSProperties['alignContent'];
64+
justifyItems?: CSSProperties['justifyItems'];
65+
justifyContent?: CSSProperties['justifyContent'];
66+
flexWrap?: CSSProperties['flexWrap'];
67+
flexDirection?: CSSProperties['flexDirection'];
68+
flexGrow?: CSSProperties['flexGrow'];
69+
flexShrink?: CSSProperties['flexShrink'];
70+
flexBasis?: CSSProperties['flexBasis'];
71+
justifySelf?: CSSProperties['justifySelf'];
72+
alignSelf?: CSSProperties['alignSelf'];
73+
order?: CSSProperties['order'];
74+
75+
w?: CSSProperties['width'];
76+
width?: CSSProperties['width'];
77+
minWidth?: CSSProperties['minWidth'];
78+
maxWidth?: CSSProperties['maxWidth'];
79+
h?: CSSProperties['height'];
80+
height?: CSSProperties['height'];
81+
minHeight?: CSSProperties['minHeight'];
82+
maxHeight?: CSSProperties['maxHeight'];
83+
display?: CSSProperties['display'];
84+
verticalAlign?: CSSProperties['verticalAlign'];
85+
overflow?: CSSProperties['overflow'];
86+
overflowX?: CSSProperties['overflowX'];
87+
overflowY?: CSSProperties['overflowY'];
88+
89+
position?: CSSProperties['position'];
90+
zIndex?: CSSProperties['zIndex'];
91+
inset?: CSSProperties['inset'];
92+
insetBlock?: CSSProperties['insetBlock'];
93+
insetBlockStart?: CSSProperties['insetBlockStart'];
94+
insetBlockEnd?: CSSProperties['insetBlockEnd'];
95+
insetInline?: CSSProperties['insetInline'];
96+
insetInlineStart?: CSSProperties['insetInlineStart'];
97+
insetInlineEnd?: CSSProperties['insetInlineEnd'];
98+
99+
m?: CSSProperties['margin'];
100+
margin?: CSSProperties['margin'];
101+
mb?: CSSProperties['marginBlock'];
102+
marginBlock?: CSSProperties['marginBlock'];
103+
mbs?: CSSProperties['marginBlockStart'];
104+
marginBlockStart?: CSSProperties['marginBlockStart'];
105+
mbe?: CSSProperties['marginBlockEnd'];
106+
marginBlockEnd?: CSSProperties['marginBlockEnd'];
107+
mi?: CSSProperties['marginInline'];
108+
marginInline?: CSSProperties['marginInline'];
109+
mis?: CSSProperties['marginInlineStart'];
110+
marginInlineStart?: CSSProperties['marginInlineStart'];
111+
mie?: CSSProperties['marginInlineEnd'];
112+
marginInlineEnd?: CSSProperties['marginInlineEnd'];
113+
p?: CSSProperties['padding'];
114+
padding?: CSSProperties['padding'];
115+
pb?: CSSProperties['paddingBlock'];
116+
paddingBlock?: CSSProperties['paddingBlock'];
117+
pbs?: CSSProperties['paddingBlockStart'];
118+
paddingBlockStart?: CSSProperties['paddingBlockStart'];
119+
pbe?: CSSProperties['paddingBlockEnd'];
120+
paddingBlockEnd?: CSSProperties['paddingBlockEnd'];
121+
pi?: CSSProperties['paddingInline'];
122+
paddingInline?: CSSProperties['paddingInline'];
123+
pis?: CSSProperties['paddingInlineStart'];
124+
paddingInlineStart?: CSSProperties['paddingInlineStart'];
125+
pie?: CSSProperties['paddingInlineEnd'];
126+
paddingInlineEnd?: CSSProperties['paddingInlineEnd'];
127+
128+
fontFamily?: CSSProperties['fontFamily'] | FontScale;
129+
fontSize?: CSSProperties['fontSize'] | FontScale;
130+
fontStyle?: CSSProperties['fontStyle'];
131+
fontWeight?: CSSProperties['fontWeight'] | FontScale;
132+
letterSpacing?: CSSProperties['letterSpacing'] | FontScale;
133+
lineHeight?: CSSProperties['lineHeight'] | FontScale;
134+
textAlign?: CSSProperties['textAlign'];
135+
textTransform?: CSSProperties['textTransform'];
136+
textDecorationLine?: CSSProperties['textDecorationLine'];
137+
138+
elevation?: '0' | '1' | '2';
139+
invisible?: boolean;
140+
withRichContent?: boolean;
141+
withTruncatedText?: boolean;
142+
size?: CSSProperties['blockSize'];
143+
minSize?: CSSProperties['blockSize'];
144+
maxSize?: CSSProperties['blockSize'];
145+
fontScale?: FontScale;
146+
}>
147+
& Omit<AllHTMLAttributes<HTMLOrSVGElement>, 'className'>
148+
& Omit<SVGAttributes<SVGElement>, keyof AllHTMLAttributes<HTMLOrSVGElement>>
149+
& RefAttributes<unknown>;
150+
151+
export const Box: ForwardRefExoticComponent<BoxProps>;
152+
153+
type AccordionProps = BoxProps;
154+
type AccordionItemProps = Omit<BoxProps, 'title'> & {
155+
defaultExpanded?: boolean;
156+
title?: string;
157+
};
158+
export const Accordion: ForwardRefExoticComponent<AccordionProps> & {
159+
Item: ForwardRefExoticComponent<AccordionItemProps>;
160+
};
161+
162+
type AvatarProps = BoxProps;
163+
export const Avatar: ForwardRefExoticComponent<AvatarProps> & {
164+
Context: Context<{
165+
baseUrl: string;
166+
}>;
167+
};
168+
169+
type ButtonProps = BoxProps & {
170+
primary?: boolean;
171+
ghost?: boolean;
172+
danger?: boolean;
173+
small?: boolean;
174+
square?: boolean;
175+
};
176+
export const Button: ForwardRefExoticComponent<ButtonProps>;
177+
178+
type ButtonGroupProps = BoxProps & {
179+
align?: 'start' | 'center' | 'end';
180+
stretch?: boolean;
181+
wrap?: boolean;
182+
vertical?: boolean;
183+
};
184+
export const ButtonGroup: ForwardRefExoticComponent<ButtonGroupProps>;
185+
186+
type CalloutProps = BoxProps;
187+
export const Callout: ForwardRefExoticComponent<CalloutProps>;
188+
189+
type CheckBoxProps = BoxProps & {
190+
indeterminate?: boolean;
191+
};
192+
export const CheckBox: ForwardRefExoticComponent<CheckBoxProps>;
193+
194+
type ChevronProps = Omit<BoxProps, 'size'> & {
195+
size?: BoxProps['width'];
196+
right?: boolean;
197+
left?: boolean;
198+
top?: boolean;
199+
bottom?: boolean;
200+
};
201+
export const Chevron: ForwardRefExoticComponent<ChevronProps>;
202+
203+
type ChipProps = BoxProps;
204+
export const Chip: ForwardRefExoticComponent<ChipProps>;
205+
206+
type FieldProps = BoxProps;
207+
export const Field: ForwardRefExoticComponent<FieldProps> & {
208+
Row: ForwardRefExoticComponent<BoxProps>;
209+
Label: ForwardRefExoticComponent<BoxProps>;
210+
Hint: ForwardRefExoticComponent<BoxProps>;
211+
Error: ForwardRefExoticComponent<BoxProps>;
212+
};
213+
214+
type FieldGroupProps = BoxProps;
215+
export const FieldGroup: ForwardRefExoticComponent<FieldGroupProps>;
216+
217+
type IconProps = Omit<BoxProps, 'size'> & {
218+
size?: BoxProps['width'];
219+
};
220+
export const Icon: ForwardRefExoticComponent<IconProps>;
221+
222+
type InputBoxProps = BoxProps;
223+
type InputBoxSkeletonProps = BoxProps;
224+
export const InputBox: ForwardRefExoticComponent<InputBoxProps> & {
225+
Skeleton: ForwardRefExoticComponent<InputBoxSkeletonProps>;
226+
};
227+
228+
type ModalProps = BoxProps;
229+
type ModalHeaderProps = BoxProps;
230+
type ModalTitleProps = BoxProps;
231+
type ModalCloseProps = BoxProps;
232+
type ModalContentProps = BoxProps;
233+
type ModalFooterProps = BoxProps;
234+
type ModalBackdropProps = BoxProps;
235+
export const Modal: ForwardRefExoticComponent<ModalProps> & {
236+
Header: ForwardRefExoticComponent<ModalHeaderProps>;
237+
Title: ForwardRefExoticComponent<ModalTitleProps>;
238+
Close: ForwardRefExoticComponent<ModalCloseProps>;
239+
Content: ForwardRefExoticComponent<ModalContentProps>;
240+
Footer: ForwardRefExoticComponent<ModalFooterProps>;
241+
Backdrop: ForwardRefExoticComponent<ModalBackdropProps>;
242+
};
243+
244+
type NumberInputProps = BoxProps;
245+
export const NumberInput: ForwardRefExoticComponent<NumberInputProps>;
246+
247+
type PaginationProps = BoxProps & {
248+
count: number;
249+
current?: number;
250+
itemsPerPage?: 25 | 50 | 100;
251+
itemsPerPageLabel?: () => string;
252+
showingResultsLabel?: (props: { count: number; current: number; itemsPerPage: 25 | 50 | 100 }) => string;
253+
onSetCurrent?: Dispatch<SetStateAction<number>>;
254+
onSetItemsPerPage?: Dispatch<SetStateAction<25 | 50 | 100>>;
255+
};
256+
export const Pagination: ForwardRefExoticComponent<PaginationProps>;
257+
258+
type PasswordInputProps = BoxProps & {
259+
error?: string;
260+
};
261+
export const PasswordInput: ForwardRefExoticComponent<PasswordInputProps>;
262+
263+
type SearchInputProps = BoxProps & {
264+
addon?: ReactNode;
265+
error?: string;
266+
};
267+
export const SearchInput: ForwardRefExoticComponent<SearchInputProps>;
268+
269+
type SkeletonProps = BoxProps & {
270+
variant?: 'rect';
271+
};
272+
export const Skeleton: ForwardRefExoticComponent<SkeletonProps>;
273+
274+
type TableProps = BoxProps;
275+
type TableHeadProps = BoxProps;
276+
type TableBodyProps = BoxProps;
277+
type TableRowProps = Omit<BoxProps, 'action'> & {
278+
action?: boolean;
279+
};
280+
type TableCellProps = BoxProps & {
281+
align?: 'start' | 'center' | 'end';
282+
clickable?: boolean;
283+
};
284+
export const Table: ForwardRefExoticComponent<TableProps> & {
285+
Head: ForwardRefExoticComponent<TableHeadProps>;
286+
Body: ForwardRefExoticComponent<TableBodyProps>;
287+
Row: ForwardRefExoticComponent<TableRowProps>;
288+
Cell: ForwardRefExoticComponent<TableCellProps>;
289+
};
290+
291+
type TagProps = BoxProps & {
292+
variant?: 'secondary' | 'primary' | 'danger';
293+
};
294+
export const Tag: ForwardRefExoticComponent<TagProps>;
295+
296+
type TextAreaInputProps = BoxProps;
297+
export const TextAreaInput: ForwardRefExoticComponent<TextAreaInputProps>;
298+
299+
type TextInputProps = BoxProps & {
300+
addon?: ReactNode;
301+
error?: string;
302+
};
303+
export const TextInput: ForwardRefExoticComponent<TextInputProps>;
304+
305+
type TileProps = BoxProps;
306+
export const Tile: ForwardRefExoticComponent<TileProps>;
307+
308+
type ThrobberProps = Omit<BoxProps, 'size'> & {
309+
size?: BoxProps['width'];
310+
inheritColor?: boolean;
311+
};
312+
export const Throbber: ForwardRefExoticComponent<ThrobberProps>;
313+
314+
type ToggleSwitchProps = BoxProps;
315+
export const ToggleSwitch: ForwardRefExoticComponent<ToggleSwitchProps>;
316+
317+
type MarginsProps = PropsWithChildren<{
318+
all?: BoxProps['margin'];
319+
block?: BoxProps['marginBlock'];
320+
blockStart?: BoxProps['marginBlockStart'];
321+
blockEnd?: BoxProps['marginBlockEnd'];
322+
inline?: BoxProps['marginInline'];
323+
inlineStart?: BoxProps['marginInlineStart'];
324+
inlineEnd?: BoxProps['marginInlineEnd'];
325+
}>;
326+
export const Margins: ForwardRefExoticComponent<MarginsProps>;
327+
328+
type ScrollableProps = PropsWithChildren<{
329+
horizontal?: boolean;
330+
vertical?: boolean;
331+
onScrollContent?: (touching: { top: boolean }) => void;
332+
}>;
333+
export const Scrollable: ForwardRefExoticComponent<ScrollableProps>;
334+
335+
type SelectOptions = [string, string][];
336+
type SelectProps = BoxProps & {
337+
error?: string;
338+
options: SelectOptions;
339+
};
340+
export const Select: ForwardRefExoticComponent<SelectProps>;
341+
342+
export const Divider: React.FC;
343+
}

‎packages/fuselage/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@
1515
"url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
1616
},
1717
"main": "index.js",
18+
"types": "fuselage.d.ts",
1819
"files": [
1920
"index.js",
21+
"fuselage.d.ts",
2022
"dist"
2123
],
2224
"scripts": {

0 commit comments

Comments
 (0)