Skip to content

Commit 989e40e

Browse files
YoussefHennaYoussefHenna
authored
Cleanup deprecated components + fixed components types (#675)
* Fixed injectIcon breaking the type of the component props * Removed deprecated components from example app * Properly mark deprecated components as deprecated * Moved deprecated components to their own folder Out of sight, out of mind * Updated tsconfig to exclude lib
1 parent c3f1048 commit 989e40e

Some content is hidden

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

44 files changed

+153
-934
lines changed

‎example/src/AccordionExample.js‎

Lines changed: 9 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import * as React from "react";
2-
import { Text } from "react-native";
3-
import { AccordionGroup, withTheme, AccordionItem } from "@draftbit/ui";
2+
import { Text, View } from "react-native";
3+
import { AccordionGroup, withTheme } from "@draftbit/ui";
44
import Section, { Container } from "./Section";
55

66
function AccordionExample({ theme }) {
77
return (
88
<Container style={{ backgroundColor: theme.colors.background }}>
99
<Section title="Basic accordion with no additional styles">
1010
<AccordionGroup label={"Basic"}>
11-
<AccordionItem icon="insert-drive-file" label={"First file"} />
12-
<AccordionItem label={"Second file without icon"} />
11+
<Text>Item 1</Text>
12+
<Text>Item 2</Text>
1313
</AccordionGroup>
1414
</Section>
15-
<Section title="Expandable Accordion group with Accordion Items">
15+
<Section title="Expandable Accordion group">
1616
<AccordionGroup
1717
openColor={theme.colors.primary}
1818
closedColor={theme.colors.secondary}
@@ -22,16 +22,8 @@ function AccordionExample({ theme }) {
2222
style={{ fontWeight: "bold" }}
2323
label={"First"}
2424
>
25-
<AccordionItem
26-
icon={"insert-drive-file"}
27-
label={"First file"}
28-
style={{ color: theme.colors.medium }}
29-
iconColor={theme.colors.medium}
30-
/>
31-
<AccordionItem
32-
label={"Second file without icon"}
33-
style={{ color: theme.colors.medium }}
34-
/>
25+
<Text>Item 1</Text>
26+
<Text>Item 2</Text>
3527
</AccordionGroup>
3628
</Section>
3729
<Section title="Expanded Accordion group">
@@ -45,28 +37,8 @@ function AccordionExample({ theme }) {
4537
label={"Second"}
4638
expanded={true}
4739
>
48-
<AccordionItem
49-
label={"I am visible when you first see this screen"}
50-
icon={"star"}
51-
style={{ fontSize: 20, color: theme.colors.primary }}
52-
iconColor={theme.colors.medium}
53-
/>
54-
</AccordionGroup>
55-
</Section>
56-
<Section title="Accordion with text inside already open">
57-
<AccordionGroup
58-
label={"Basic"}
59-
caretColor="black"
60-
openColor="red"
61-
closedColor="green"
62-
style={{ padding: 8 }}
63-
expanded={true}
64-
icon={"star"}
65-
iconSize={50}
66-
caretSize={50}
67-
>
68-
<Text>Hello!</Text>
69-
<Text>Is it me your looking for?</Text>
40+
<Text>Item 1</Text>
41+
<Text>Item 2</Text>
7042
</AccordionGroup>
7143
</Section>
7244
</Container>

‎example/src/App.tsx‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -28,98 +28,52 @@ import {
2828
import * as Font from "expo-font";
2929

3030
import AudioPlayerExample from "./AudioPlayerExample";
31-
import CircleImageExample from "./CircleImageExample";
3231
import IconExample from "./IconExample";
33-
import BannerExample from "./BannerExample";
3432
import ButtonExample from "./ButtonExample";
3533
import RadioButtonExample from "./RadioButtonExample";
36-
37-
import CardExample from "./CardExample";
38-
39-
import ContainerExample from "./ContainerExample";
40-
// import ControllerExample from "./ControllerExample";
41-
4234
import DatePickerExample from "./DatePickerExample";
43-
44-
import FABExample from "./FABExample";
45-
import FieldSearchBarFullExample from "./FieldSearchBarFullExample";
46-
47-
// import HeaderExample from "./HeaderExample";
4835
import LayoutExample from "./LayoutExample";
49-
5036
import MapViewExample from "./MapViewExample";
5137
import MapViewDataDrivenExample from "./MapViewDataDrivenExample";
52-
5338
import PickerExample from "./PickerExample";
54-
55-
// import ProgressIndicatorExample from "./ProgressIndicatorExample.js";
56-
// import ProgressExample from "./ProgressExample";
57-
// import RowExample from "./RowExample";
58-
5939
import SliderExample from "./SliderExample";
6040
import SwitchExample from "./SwitchExample";
6141
import StepperExample from "./StepperExample";
62-
6342
import TextFieldExample from "./TextFieldExample";
6443
import TextInputExample from "./TextInputExample";
6544
import NumberInputExample from "./NumberInputExample";
6645
import CheckboxExample from "./CheckboxExample";
6746
import WebViewExample from "./WebViewExample";
6847
import AccordionExample from "./AccordionExample";
69-
7048
import ActionSheetExample from "./ActionSheetExample";
7149
import StarRatingExample from "./StarRatingExample";
72-
7350
import SwiperExample from "./SwiperExample";
7451
import SVGExample from "./SVGExample";
75-
7652
import LinearGradientExample from "./LinearGradientExample";
77-
7853
import SurfaceExample from "./SurfaceExample";
79-
8054
import ShadowExample from "./ShadowExample";
81-
8255
import DeckSwiperExample from "./DeckSwiperExample";
83-
8456
import TabViewExample from "./TabViewExample";
8557
import MarkdownExample from "./MarkdownExample";
86-
8758
import BottomSheetExample from "./BottomSheetExample";
88-
8959
import YoutubeExample from "./YoutubeExample";
90-
9160
import TableExample from "./TableExample";
92-
9361
import SwipeableItemExample from "./SwipeableItemExample";
9462

9563
const ROUTES = {
9664
AudioPlayer: AudioPlayerExample,
9765
Layout: LayoutExample,
9866
Icon: IconExample,
99-
Banner: BannerExample,
10067
Button: ButtonExample,
101-
FAB: FABExample,
10268
RadioButton: RadioButtonExample,
10369
ActionSheet: ActionSheetExample,
10470
Checkbox: CheckboxExample,
105-
Card: CardExample,
10671
Accordion: AccordionExample,
107-
Container: ContainerExample,
108-
CircleImage: CircleImageExample,
109-
// Controllers: ControllerExample,
11072
DatePicker: DatePickerExample,
111-
FieldSearchBarFull: FieldSearchBarFullExample,
11273
LinearGradient: LinearGradientExample,
11374
MapView: MapViewExample,
11475
MapViewDataDriven: MapViewDataDrivenExample,
115-
// TODO fix Header (spacing problem, textOverflow ellipses doesn't work on web)
116-
// Header: HeaderExample,
11776
Picker: PickerExample,
118-
// ProgressBar: ProgressExample,
119-
// ProgressIndicator: ProgressIndicatorExample,
120-
// TODO fix Row (spacing problem)
121-
// Row: RowExample,
122-
// TODO (componentWillReceieveProps insider slider component)
12377
Slider: SliderExample,
12478
Switch: SwitchExample,
12579
Stepper: StepperExample,
@@ -215,10 +169,7 @@ const AnimatedSplashScreen: React.FC<
215169
const onImageLoaded = useCallback(async () => {
216170
try {
217171
await SplashScreen.hideAsync();
218-
// Load stuff
219-
await Promise.all([]);
220172
} catch (e) {
221-
// handle errors
222173
console.warn(e);
223174
} finally {
224175
setAppReady(true);

‎example/src/BannerExample.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎example/src/ButtonExample.js‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { IconButton, ButtonSolid, ButtonOutline, Link } from "@draftbit/ui";
2+
import { IconButton, Button, ButtonOutline, Link } from "@draftbit/ui";
33
import Section, { Container, styles } from "./Section";
44

55
export default function ButtonExample() {
@@ -19,35 +19,20 @@ export default function ButtonExample() {
1919
/>
2020
</Section>
2121

22-
<Section title="Button (solid)" style={styles.row}>
23-
<ButtonSolid style={buttonStyle} title="Solid Button" />
24-
<ButtonSolid
25-
style={buttonStyle}
26-
title="Solid Button"
27-
icon="file-download"
28-
/>
29-
<ButtonSolid style={buttonStyle} title="Solid Button" loading={true} />
30-
<ButtonSolid style={buttonStyle} title="Solid Button" disabled={true} />
22+
<Section title="Button" style={styles.row}>
23+
<Button style={buttonStyle} title="Button" />
24+
<Button style={buttonStyle} title="Button" icon="file-download" />
25+
<Button style={buttonStyle} title="Button" loading={true} />
26+
<Button style={buttonStyle} title="Button" disabled={true} />
3127
</Section>
32-
<ButtonSolid
28+
<Button
3329
title="Custom button options"
3430
style={{
3531
textAlign: "left",
3632
backgroundColor: "orange",
3733
}}
3834
/>
3935

40-
<Section title="Button (outline)" style={styles.row}>
41-
<ButtonOutline style={buttonStyle} title="Outline Button" />
42-
<ButtonOutline
43-
style={buttonStyle}
44-
title="Outline Button"
45-
icon="file-download"
46-
/>
47-
<ButtonOutline style={buttonStyle} title="Outline Button" loading />
48-
<ButtonOutline style={buttonStyle} title="Outline Button" disabled />
49-
</Section>
50-
5136
<Section title="Link" style={styles.row}>
5237
<Link title="Link" />
5338
<Link title="Get Started" loading={true} />

‎example/src/CardContainerShortImageExample.js‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

0 commit comments

Comments
 (0)