Skip to content

Commit 874b2b2

Browse files
authored
chore: update autodoc (react-native-elements#3364)
1 parent 5b34d6c commit 874b2b2

File tree

138 files changed

+2387
-7243
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+2387
-7243
lines changed

.github/PULL_REQUEST_TEMPLATE.md

-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
Fixes # (issue)
66

7-
87
## Type of change
98

109
<!-- Please delete options that are not relevant. -->
@@ -21,7 +20,6 @@ Fixes # (issue)
2120
- [ ] Jest Unit Test
2221
- [ ] Checked with `example` app
2322

24-
2523
## Checklist
2624

2725
- [ ] My code follows the style guidelines of this project
@@ -36,4 +34,3 @@ Fixes # (issue)
3634
## Additional context
3735

3836
<!-- Add any other context or screenshots about the feature request here. -->
39-

.github/release.yml

+8-16
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,18 @@ changelog:
77
authors:
88
- dependabot
99
categories:
10-
- title: Breaking Changes 🛠
10+
- title: ":boom: Breaking Change"
1111
labels:
12-
- breaking change
13-
- title: New Features 🎉
12+
- "PR: Breaking Change :boom:"
13+
- title: ":rocket: New Feature"
1414
labels:
15-
- "PR: feature"
16-
- ":sparkles: Enhancement"
17-
- ":bulbNew: Component"
18-
- title: Bug fixes 🐛
15+
- "PR: New Feature :tada:"
16+
- title: ":bug: Bug Fix"
1917
labels:
20-
- "PR: fix"
21-
- ":bug: Bug"
22-
- title: Docs 📖
18+
- "PR: Bug Fix :bug:"
19+
- title: ":memo: Documentation"
2320
labels:
24-
- ":book: Docs"
25-
- "PR: docs"
26-
- title: Cleanup ♻️
27-
labels:
28-
- "PR: chore"
29-
- "PR: refactor"
21+
- "PR: Docs :memo:"
3022
- title: Other Changes
3123
labels:
3224
- "*"

.github/workflows/test.yml

-2
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,6 @@ jobs:
4343
- uses: actions/checkout@v2
4444
- name: Install dependencies
4545
uses: ./.github/actions/install
46-
with:
47-
install_website: true
4846
- name: Build 🔧
4947
run: yarn docs-build-api
5048
- name: Check for API changes

package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,36 @@
1717
"clean-install": "rimraf node_modules && yarn",
1818
"example": "yarn --cwd example",
1919
"docs-build": "cd website && yarn run build",
20-
"docs-build-api": "cd website && yarn run build-api",
20+
"docs-build-api": "TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true ts-node scripts/docgen/index.ts",
2121
"postinstall": "husky install",
2222
"lint-staged": "lint-staged"
2323
},
2424
"devDependencies": {
2525
"@testing-library/jest-dom": "^5.11.10",
2626
"@testing-library/react": "^11.2.6",
2727
"@testing-library/react-native": "^7.0.2",
28+
"@types/dedent": "^0.7.0",
2829
"@types/jest": "^27.4.0",
30+
"@types/lodash.orderby": "^4.6.6",
2931
"@types/react-native": "*",
3032
"@types/react-test-renderer": "^17.0.1",
3133
"babel-jest": "^27.5.1",
3234
"codecov": "^3.8.3",
35+
"dedent": "^0.7.0",
3336
"eslint": "^7.9.0",
3437
"husky": "^7.0.4",
3538
"jest": "^27.4.7",
3639
"jest-transform-stub": "^2.0.0",
3740
"lerna": "^4.0.0",
3841
"lint-staged": "^12.1.7",
42+
"lodash.orderby": "^4.6.0",
3943
"prettier": "^2.5.1",
4044
"react": "^17.0.2",
45+
"react-docgen-typescript": "^2.2.2",
4146
"react-native": "^0.64.0",
4247
"react-test-renderer": "^17.0.2",
4348
"rimraf": "^3.0.2",
49+
"ts-node": "^10.5.0",
4450
"typescript": "^4.3.5"
4551
},
4652
"author": "Nader Dabit & Monte Thakkar",

packages/base/src/Avatar/Avatar.tsx

+1-14
Original file line numberDiff line numberDiff line change
@@ -93,20 +93,7 @@ export interface AvatarProps extends InlinePressableProps {
9393
/**
9494
* Avatars are found all over ui design from lists to profile screens.
9595
* They are commonly used to represent a user and can contain photos, icons, or even text.
96-
* %live <Avatar size="medium" rounded containerStyle={{ backgroundColor: '#6733b9' }} title="R" />
97-
* @tabName Variants
98-
* @tabLabel ['Basic','Title','Icon']
99-
* @tabItem
100-
* <Avatar size="medium" rounded source={{ uri: 'https://randomuser.me/api/portraits/' }} />
101-
* <Avatar size="medium" rounded source={{ uri: 'https://randomuser.me/api/portraits/' }} title="R" />
102-
* <Avatar size="medium" rounded source={{ uri: 'https://randomuser.me/api/portraits/' }} icon={{ name: 'home' }} />
103-
* @usage
104-
* ### Avatar with title and icon
105-
* %live <Avatar size="medium" rounded source={{ uri: 'https://randomuser.me/api/portraits/' }} title="R" />
106-
* ### Avatar with icon
107-
* %live <Avatar size="medium" rounded source={{ uri: 'https://randomuser.me/api/portraits/' }} icon={{ name: 'home' }} />
108-
* ### Avatar with image
109-
* %live <Avatar size="medium" rounded source={{ uri: 'https://randomuser.me/api/portraits/' }} />
96+
* @imports Avatar
11097
* */
11198
export const Avatar: RneFunctionComponent<AvatarProps> = ({
11299
onPress,

packages/base/src/Button/Button.tsx

+60-51
Original file line numberDiff line numberDiff line change
@@ -39,81 +39,90 @@ const positionStyle = {
3939
left: 'row',
4040
right: 'row-reverse',
4141
};
42+
/**
43+
* @name BUtton
44+
*/
45+
export interface ButtonProps
46+
extends TouchableOpacityProps,
47+
TouchableNativeFeedbackProps {
48+
/** Add button title. */
49+
title?: string | React.ReactElement<{}>;
4250

43-
export type ButtonProps = TouchableOpacityProps &
44-
TouchableNativeFeedbackProps & {
45-
/** Add button title. */
46-
title?: string | React.ReactElement<{}>;
47-
48-
/** Add additional styling for title component. */
49-
titleStyle?: StyleProp<TextStyle>;
51+
/** Add additional styling for title component. */
52+
titleStyle?: StyleProp<TextStyle>;
5053

51-
/** Add additional props for Text component. */
52-
titleProps?: TextProps;
54+
/** Add additional props for Text component. */
55+
titleProps?: TextProps;
5356

54-
/** Add additional styling for button component. */
55-
buttonStyle?: StyleProp<ViewStyle>;
57+
/** Add additional styling for button component. */
58+
buttonStyle?: StyleProp<ViewStyle>;
5659

57-
/** Type of button. */
58-
type?: 'solid' | 'clear' | 'outline';
60+
/** Type of button. */
61+
type?: 'solid' | 'clear' | 'outline';
5962

60-
/** Prop to display a loading spinner. */
61-
loading?: boolean;
63+
/** Prop to display a loading spinner. */
64+
loading?: boolean;
6265

63-
/** Add additional styling for loading component. */
64-
loadingStyle?: StyleProp<ViewStyle>;
66+
/** Add additional styling for loading component. */
67+
loadingStyle?: StyleProp<ViewStyle>;
6568

66-
/** Add additional props for ActivityIndicator component. */
67-
loadingProps?: ActivityIndicatorProps;
69+
/** Add additional props for ActivityIndicator component. */
70+
loadingProps?: ActivityIndicatorProps;
6871

69-
/** Styling for Component container. */
70-
containerStyle?: StyleProp<ViewStyle>;
72+
/** Styling for Component container. */
73+
containerStyle?: StyleProp<ViewStyle>;
7174

72-
/** Displays a centered icon (when no title) or to the left (with text). (can be used along with iconRight as well). Can be an object or a custom component. */
73-
icon?: IconNode;
75+
/** Displays a centered icon (when no title) or to the left (with text). (can be used along with iconRight as well). Can be an object or a custom component. */
76+
icon?: IconNode;
7477

75-
/** Styling for Icon Component container. */
76-
iconContainerStyle?: StyleProp<ViewStyle>;
78+
/** Styling for Icon Component container. */
79+
iconContainerStyle?: StyleProp<ViewStyle>;
7780

78-
/** Displays Icon to the right of title. Needs to be used along with `icon` prop. */
79-
iconRight?: boolean;
81+
/** Displays Icon to the right of title. Needs to be used along with `icon` prop. */
82+
iconRight?: boolean;
8083

81-
/** Displays a linear gradient. See [usage](#lineargradient-usage). */
82-
linearGradientProps?: object;
84+
/** Displays a linear gradient. See [usage](#lineargradient-usage). */
85+
linearGradientProps?: object;
8386

84-
/** Component for user interaction. */
85-
TouchableComponent?: typeof React.Component;
87+
/** Component for user interaction. */
88+
TouchableComponent?: typeof React.Component;
8689

87-
/** Component for container. */
88-
ViewComponent?: typeof React.Component;
90+
/** Component for container. */
91+
ViewComponent?: typeof React.Component;
8992

90-
/** Disables user interaction. */
91-
disabled?: boolean;
93+
/** Disables user interaction. */
94+
disabled?: boolean;
9295

93-
/** Style of the button when disabled. */
94-
disabledStyle?: StyleProp<ViewStyle>;
96+
/** Style of the button when disabled. */
97+
disabledStyle?: StyleProp<ViewStyle>;
9598

96-
/** Style of the title when disabled. */
97-
disabledTitleStyle?: StyleProp<TextStyle>;
99+
/** Style of the title when disabled. */
100+
disabledTitleStyle?: StyleProp<TextStyle>;
98101

99-
/** Add raised button styling (optional). Has no effect if `type="clear"`. */
100-
raised?: boolean;
102+
/** Add raised button styling (optional). Has no effect if `type="clear"`. */
103+
raised?: boolean;
101104

102-
/** Displays Icon to the position mentioned. Needs to be used along with `icon` prop. */
103-
iconPosition?: 'left' | 'right' | 'top' | 'bottom';
104-
};
105+
/** Displays Icon to the position mentioned. Needs to be used along with `icon` prop. */
106+
iconPosition?: 'left' | 'right' | 'top' | 'bottom';
107+
}
105108

106-
/** Buttons are touchable elements used to interact with the screen and to perform and operation.
109+
/**
110+
* Buttons are touchable elements used to interact with the screen and to perform and operation.
107111
* They may display text, icons, or both. Buttons can be styled with several props to look a specific way.
108112
* Also receives all [TouchableNativeFeedback](http://reactnative.dev/docs/touchablenativefeedback.html#props) (Android) or [TouchableOpacity](http://reactnative.dev/docs/touchableopacity.html#props) (iOS) props.
113+
*
109114
* %jsx <Button title="Solid Button" />
110-
* @tabName Types
111-
* @tabLabel ['Solid','Outline','Clear']
112-
* @tabItem
113-
* <Button title="Solid" type="solid" />
114-
* <Button title="Outline" type="outline" />
115-
* <Button title="Clear" type="clear" />
115+
*
116+
* @include TouchableOpacityProps, TouchableNativeFeedbackProps
117+
* @imports Button
116118
* @usage
119+
* {$+{
120+
* 'Solid': <Button title="Solid Button" />,
121+
* 'Clear': <Button title="Clear Button" type="clear" />,
122+
* 'Outline': <Button title="Outline Button" type="outline" />,
123+
* }}
124+
*
125+
*
117126
* ### Button with icon
118127
* %live <Button title="Solid" type="solid" icon="home" />
119128
* ### Button with right icon

packages/base/src/ListItem/ListItem.Accordion.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export interface ListItemAccordionProps extends ListItemBaseProps {
2626

2727
/** Decide whether to show animation.
2828
* @default Object with duration 350ms and type timing
29+
* @type Animated.TimingAnimationConfig
2930
*/
3031
animation?:
3132
| {

packages/base/src/Skeleton/Skeleton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export interface SkeletonProps extends ViewProps {
4545
*
4646
* @installation @react-native-elements/skeleton
4747
* @usage
48-
* <Skeleton variant="circular" width={40} height={40} />
49-
* <Skeleton variant="rectangular" width={210} height={118} />
48+
* %jsx <Skeleton variant="circular" width={40} height={40} />
49+
* %jsx <Skeleton variant="rectangular" width={210} height={118} />
5050
*/
5151
export const Skeleton: RneFunctionComponent<SkeletonProps> = ({
5252
circle,

packages/base/src/Slider/Slider.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,9 @@ export interface SliderProps {
142142
| Animated.TimingAnimationConfig
143143
| Animated.SpringAnimationConfig;
144144

145-
/** Apply style to the container of the slider. */
145+
/** Apply style to the container of the slider.
146+
* @type Style
147+
*/
146148
containerStyle?: typeof styles;
147149
}
148150

packages/base/src/Tile/Tile.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ export interface TileProps extends PressableProps {
2323
/** Text inside the tile. */
2424
title?: string;
2525

26-
/** Icon Component Props. */
26+
/** Icon Component Props.
27+
* @type IconObject
28+
*/
2729
icon?: IconObject & IconProps;
2830

2931
/** Text inside the tilt when tile is featured. */
@@ -53,10 +55,14 @@ export interface TileProps extends PressableProps {
5355
/** Styling for the caption (optional); You only use this if `caption` is a string. */
5456
captionStyle?: StyleProp<TextStyle>;
5557

56-
/** Width for the tile. */
58+
/** Width for the tile.
59+
* @default 'screen width'
60+
*/
5761
width?: number;
5862

59-
/** Height for the tile. */
63+
/** Height for the tile.
64+
* @default 'width/2'
65+
*/
6066
height?: number;
6167

6268
/** Changes the look of the tile. */
@@ -71,7 +77,9 @@ export interface TileProps extends PressableProps {
7177
/** Optional properties to pass to the image if provided e.g "resizeMode". */
7278
imageProps?: Partial<ImageProps>;
7379

74-
/** Custom ImageComponent for Tile. */
80+
/** Custom ImageComponent for Tile.
81+
* @default RNE Image
82+
*/
7583
ImageComponent?: typeof React.Component;
7684
}
7785

packages/circular-slider/src/__tests__/CircularSlider.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import CircularSlider from '..';
2+
import { CircularSlider } from '..';
33
import { render } from '@testing-library/react-native';
44

55
test('CircularSlider Component', () => {

packages/circular-slider/src/index.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -90,21 +90,25 @@ export type CircularSliderProps = {
9090
};
9191
} & any;
9292
};
93+
9394
/**
9495
* A slider with circular track and thumb
9596
*
96-
* @installation @react-native-elements/circular-slider
97+
* @installation circular-slider
9798
* @usage
99+
* ```jsx
98100
* import { CircularSlider } from '@react-native-elements/circular-slider';
99-
* <CircularSlider value={value} onChange={setValue} />;
101+
* ```
102+
* ```jsx
103+
* <CircularSlider value={value} onChange={setValue} />
100104
*
101-
* <CircularSlider value={value} noThumb />;
105+
* <CircularSlider value={value} noThumb />
102106
*
103-
* // 90 deg Arc
104-
* <CircularSlider maxAngle={90} />;
107+
* <CircularSlider maxAngle={90} />
108+
* ```
105109
* Either use percentage (0 to 100) in value or specify maximumValue & minimumValue
106110
*/
107-
const CircularSlider: React.FC<CircularSliderProps> = ({
111+
export const CircularSlider: React.FC<CircularSliderProps> = ({
108112
thumbRadius = 12,
109113
trackRadius = 100,
110114
trackWidth = 5,
@@ -269,4 +273,4 @@ const CircularSlider: React.FC<CircularSliderProps> = ({
269273
);
270274
};
271275

272-
export default CircularSlider;
276+
CircularSlider.displayName = 'CircularSlider';

packages/circular-slider/tsconfig.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@
1111
"declaration": true,
1212
"composite": true
1313
},
14-
"include": ["src/**/*.tsx", "src/**/*.ts", "src/index.ts"],
14+
"include": ["src/**/*.tsx", "src/**/*.ts", "src/index.tsx"],
1515
"exclude": [
1616
".ci",
1717
"dist",
1818
"node_modules",
1919
"babel.config.js",
2020
"jest.config.js",
21-
"src/index.d.ts",
2221
"src/**/__tests__"
2322
]
2423
}

0 commit comments

Comments
 (0)