Skip to content

Commit 747fa94

Browse files
yihuiliaoyihuiliao
authored
Add additional components to CRA example app (#5521)
* add button examples * add collection examples and fix spelling * add color examples * add date time examples * add form examples * add navigation examples * add overlay examples * add status examples * organization files and add content examples * add picker examples * update package * add dropzone example * add dependency * add spacing
1 parent 86b38c8 commit 747fa94

13 files changed

+465
-17
lines changed

‎examples/rsp-cra-18/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,13 @@
55
"homepage": ".",
66
"dependencies": {
77
"@adobe/react-spectrum": "latest",
8+
"@react-aria/dnd": "^3.5.0",
89
"@react-spectrum/inlinealert": "^3.0.0-rc.0",
10+
"@react-spectrum/color": "^3.0.0-beta.28",
11+
"@react-spectrum/dropzone": "^3.0.0-beta.0",
12+
"@react-spectrum/toast": "^3.0.0-beta.7",
913
"@spectrum-icons/workflow": "latest",
14+
"@spectrum-icons/illustrations": "^3.6.8",
1015
"@testing-library/jest-dom": "^5.16.4",
1116
"@testing-library/react": "^13.3.0",
1217
"@testing-library/user-event": "^13.5.0",

‎examples/rsp-cra-18/src/App.tsx

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
import './App.css';
2-
import {Provider, defaultTheme, Item, TagGroup, Cell, Column, Row, TableBody, TableHeader, TableView, Content, Heading, Form, ComboBox, Button} from '@adobe/react-spectrum';
2+
import {Provider, defaultTheme, Item, TagGroup, Cell, Column, Row, TableBody, TableHeader, TableView, Content} from '@adobe/react-spectrum';
33
import Lighting from './Lighting';
44
import {useState} from 'react'
55
import BodyContent from './BodyContent';
66
import {enableTableNestedRows} from '@react-stately/flags';
7-
import {InlineAlert} from '@react-spectrum/inlinealert'
7+
import ButtonExamples from './sections/ButtonExamples';
8+
import CollectionExamples from './sections/CollectionExamples';
9+
import DateTimeExamples from './sections/DateTimeExamples';
10+
import FormExamples from './sections/FormExamples';
11+
import NavigationExamples from './sections/NavigationExamples';
12+
import OverlayExamples from './sections/OverlayExamples';
13+
import ColorExamples from './sections/ColorExamples';
14+
import StatusExamples from './sections/StatusExamples';
15+
import ContentExamples from './sections/ContentExamples';
16+
import PickerExamples from './sections/PickerExamples';
17+
import DragAndDropExamples from './sections/DragAndDropExamples';
818

919
let columns = [
1020
{name: 'Foo', key: 'foo'},
@@ -51,21 +61,17 @@ function App() {
5161
}
5262
</TableBody>
5363
</TableView>
54-
<InlineAlert>
55-
<Heading>Payment Information</Heading>
56-
<Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
57-
</InlineAlert>
58-
<Form width="250px">
59-
<ComboBox label="Favorite Animal">
60-
<Item key="red panda">Red Panda</Item>
61-
<Item key="cat">Cat</Item>
62-
<Item key="dog">Dog</Item>
63-
<Item key="aardvark">Aardvark</Item>
64-
<Item key="kangaroo">Kangaroo</Item>
65-
<Item key="snake">Snake</Item>
66-
</ComboBox>
67-
<Button variant="cta">Click Me</Button>
68-
</Form>
64+
<ButtonExamples />
65+
<CollectionExamples />
66+
<ColorExamples />
67+
<DateTimeExamples />
68+
<FormExamples />
69+
<NavigationExamples />
70+
<OverlayExamples />
71+
<StatusExamples />
72+
<ContentExamples />
73+
<PickerExamples />
74+
<DragAndDropExamples />
6975
</div>
7076
</Provider>
7177
);

‎examples/rsp-cra-18/src/sections/ButtonExamples.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ActionButton, Button, Divider, Flex, LogicButton, ToggleButton} from '@adobe/react-spectrum';
2+
3+
export default function ButtonExamples() {
4+
return (
5+
<>
6+
<h2>Buttons</h2>
7+
<Flex direction="column" gap="size-125">
8+
<Divider />
9+
<div>
10+
<ActionButton>Edit</ActionButton>
11+
<Button variant="primary">Primary</Button>
12+
<Button variant="secondary">Secondary</Button>
13+
<Button variant="negative" style="fill">Negative fill</Button>
14+
<Button variant="negative" style="outline">Negative outline</Button>
15+
<LogicButton variant="and">Logic Button</LogicButton>
16+
<ToggleButton>ToggleButton</ToggleButton>
17+
</div>
18+
</Flex>
19+
</>
20+
);
21+
}

‎examples/rsp-cra-18/src/sections/CollectionExamples.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import {ActionMenu, Flex, Divider, Item, ListBox, ListView, MenuTrigger, Menu, ActionButton, TableBody, TableView, Row, Cell, TableHeader, Column, TagGroup} from '@adobe/react-spectrum';
2+
3+
export default function CollectionExamples(){
4+
return (
5+
<>
6+
<h2>Collections</h2>
7+
<Flex direction="column" gap="size-125">
8+
<Divider />
9+
<ActionMenu width="size-0">
10+
<Item>Cut</Item>
11+
<Item>Copy</Item>
12+
<Item>Paste</Item>
13+
</ActionMenu>
14+
<ListBox width="size-2400" aria-label="Alignment">
15+
<Item>Left</Item>
16+
<Item>Middle</Item>
17+
<Item>Right</Item>
18+
</ListBox>
19+
<ListView
20+
selectionMode="multiple"
21+
aria-label="Static ListView items example"
22+
maxWidth="size-6000"
23+
>
24+
<Item>Adobe Photoshop</Item>
25+
<Item>Adobe InDesign</Item>
26+
<Item>Adobe AfterEffects</Item>
27+
<Item>Adobe Illustrator</Item>
28+
<Item>Adobe Lightroom</Item>
29+
</ListView>
30+
<MenuTrigger>
31+
<ActionButton width="size-800">
32+
Menu
33+
</ActionButton>
34+
<Menu onAction={(key) => alert(key)}>
35+
<Item key="cut">Cut</Item>
36+
<Item key="copy">Copy</Item>
37+
<Item key="paste">Paste</Item>
38+
<Item key="replace">Replace</Item>
39+
</Menu>
40+
</MenuTrigger>
41+
<TableView
42+
aria-label="Example table with static contents"
43+
selectionMode="multiple"
44+
width="size-6000"
45+
>
46+
<TableHeader>
47+
<Column>Name</Column>
48+
<Column>Type</Column>
49+
<Column align="end">Date Modified</Column>
50+
</TableHeader>
51+
<TableBody>
52+
<Row>
53+
<Cell>Games</Cell>
54+
<Cell>File folder</Cell>
55+
<Cell>6/7/2020</Cell>
56+
</Row>
57+
<Row>
58+
<Cell>Program Files</Cell>
59+
<Cell>File folder</Cell>
60+
<Cell>4/7/2021</Cell>
61+
</Row>
62+
<Row>
63+
<Cell>bootmgr</Cell>
64+
<Cell>System file</Cell>
65+
<Cell>11/20/2010</Cell>
66+
</Row>
67+
<Row>
68+
<Cell>log.txt</Cell>
69+
<Cell>Text Document</Cell>
70+
<Cell>1/18/2016</Cell>
71+
</Row>
72+
</TableBody>
73+
</TableView>
74+
<TagGroup aria-label="Static TagGroup items example">
75+
<Item>News</Item>
76+
<Item>Travel</Item>
77+
<Item>Gaming</Item>
78+
<Item>Shopping</Item>
79+
</TagGroup>
80+
</Flex>
81+
</>
82+
)
83+
}

‎examples/rsp-cra-18/src/sections/ColorExamples.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Flex, Divider} from '@adobe/react-spectrum';
2+
import {ColorArea, ColorField, ColorSlider, ColorWheel} from '@react-spectrum/color'
3+
4+
export default function ColorExamples() {
5+
return (
6+
<>
7+
<h2>Color</h2>
8+
<Flex direction="column" gap="size-125">
9+
<Divider />
10+
<ColorArea defaultValue="#7f0000" />
11+
<ColorField label="Primary Color" />
12+
<ColorSlider defaultValue="#7f0000" channel="red" />
13+
<ColorWheel defaultValue="hsl(30, 100%, 50%)" />
14+
</Flex>
15+
</>
16+
)
17+
}

‎examples/rsp-cra-18/src/sections/ContentExamples.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {Flex, Divider, Avatar, Content, Footer, Header, Heading, IllustratedMessage, Image, Keyboard, Text, View, TextField, Well} from '@adobe/react-spectrum';
2+
import NotFound from '@spectrum-icons/illustrations/NotFound';
3+
4+
export default function ContentExamples() {
5+
return (
6+
<>
7+
<h2>Content</h2>
8+
<Flex direction="column" gap="size-125">
9+
<Divider />
10+
<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" />
11+
<Content>Content is king</Content>
12+
<Text>Content above</Text>
13+
<Divider />
14+
<Text>Content below</Text>
15+
<Footer>&copy; All rights reserved.</Footer>
16+
<Header>Cute cats</Header>
17+
<Heading level={4}>Edit</Heading>
18+
<IllustratedMessage width="500px">
19+
<NotFound />
20+
<Heading>No results</Heading>
21+
<Content>Try another search</Content>
22+
</IllustratedMessage>
23+
<Image src="https://i.imgur.com/Z7AzH2c.png" alt="Sky and roof" width="500px" height="250"/>
24+
<Keyboard>⌘V</Keyboard>
25+
<Text>Paste</Text>
26+
<View
27+
width="500px"
28+
borderWidth="thin"
29+
borderColor="dark"
30+
borderRadius="medium"
31+
padding="size-250">
32+
<TextField label="Name" />
33+
</View>
34+
<Well width="500px">
35+
Better a little which is well done, than a great deal imperfectly.
36+
</Well>
37+
</Flex>
38+
</>
39+
)
40+
}

‎examples/rsp-cra-18/src/sections/DateTimeExamples.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Calendar, Flex, Divider, DateField, DatePicker, DateRangePicker, RangeCalendar, TimeField} from '@adobe/react-spectrum';
2+
3+
export default function DateTimeExamples() {
4+
return (
5+
<>
6+
<h2>Date and Time</h2>
7+
<Flex direction="column" gap="size-125">
8+
<Divider />
9+
<Calendar aria-label="Event date" />
10+
<DateField label="Event date" width="size-0"/>
11+
<DatePicker label="Event date" width="size-0" />
12+
<DateRangePicker label="Date range" width="300px"/>
13+
<RangeCalendar aria-label="Trip dates" />
14+
<TimeField label="Event time" width="size-0"/>
15+
</Flex>
16+
</>
17+
);
18+
}

‎examples/rsp-cra-18/src/sections/DragAndDropExamples.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {DropZone} from '@react-spectrum/dropzone'
2+
import {Flex, Divider, IllustratedMessage, Heading} from '@adobe/react-spectrum';
3+
import {Text} from 'react-aria-components';
4+
import React from 'react';
5+
import Upload from '@spectrum-icons/illustrations/Upload';
6+
import {useDrag} from '@react-aria/dnd';
7+
8+
export default function DragAndDropExamples() {
9+
let [isFilled, setIsFilled] = React.useState(false);
10+
11+
return (
12+
<>
13+
<h2>Drag and Drop</h2>
14+
<Flex direction="column" gap="size-125">
15+
<Divider />
16+
<Draggable />
17+
<DropZone
18+
maxWidth="size-3000"
19+
isFilled={isFilled}
20+
onDrop={() => setIsFilled(true)}>
21+
<IllustratedMessage>
22+
<Upload />
23+
<Heading>
24+
<Text slot="label">
25+
{isFilled ? 'You dropped something!' : 'Drag and drop your file'}
26+
</Text>
27+
</Heading>
28+
</IllustratedMessage>
29+
</DropZone>
30+
</Flex>
31+
</>
32+
)
33+
}
34+
35+
function Draggable() {
36+
let { dragProps, isDragging } = useDrag({
37+
getItems() {
38+
return [{
39+
'text/plain': 'hello world',
40+
'my-app-custom-type': JSON.stringify({ message: 'hello world' })
41+
}];
42+
}
43+
});
44+
45+
return (
46+
<div
47+
{...dragProps}
48+
role="button"
49+
tabIndex={0}
50+
className={`draggable ${isDragging ? 'dragging' : ''}`}
51+
>
52+
Drag me
53+
</div>
54+
);
55+
}

‎examples/rsp-cra-18/src/sections/FormExamples.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {Flex, Divider, Form, ComboBox, Item, Button, TextField, RadioGroup, Radio, CheckboxGroup, Checkbox, NumberField, RangeSlider, SearchField, Slider, Switch, TextArea} from '@adobe/react-spectrum';
2+
3+
export default function FormExamples() {
4+
return (
5+
<>
6+
<h2>Forms</h2>
7+
<Flex direction="column" gap="size-125">
8+
<Divider />
9+
<Form maxWidth="size-3600">
10+
<ComboBox label="Favorite Animal">
11+
<Item key="red panda">Red Panda</Item>
12+
<Item key="cat">Cat</Item>
13+
<Item key="dog">Dog</Item>
14+
<Item key="aardvark">Aardvark</Item>
15+
<Item key="kangaroo">Kangaroo</Item>
16+
<Item key="snake">Snake</Item>
17+
</ComboBox>
18+
<TextField label="First Name" />
19+
<TextField label="Last Name" />
20+
<RadioGroup label="Favorite pet">
21+
<Radio value="dogs">Dogs</Radio>
22+
<Radio value="cats">Cats</Radio>
23+
<Radio value="dragons">Dragons</Radio>
24+
</RadioGroup>
25+
<CheckboxGroup label="Favorite sports">
26+
<Checkbox value="soccer">Soccer</Checkbox>
27+
<Checkbox value="baseball">Baseball</Checkbox>
28+
<Checkbox value="basketball">Basketball</Checkbox>
29+
</CheckboxGroup>
30+
<NumberField label="Width" defaultValue={1024} minValue={0} />
31+
<RangeSlider label="Range" defaultValue={{ start: 12, end: 36 }} />
32+
<SearchField
33+
label="Search" />
34+
<Slider label="Cookies to buy" defaultValue={12} />
35+
<Switch>Low power mode</Switch>
36+
<TextArea label="Description" />
37+
<Button variant="cta">Click Me</Button>
38+
</Form>
39+
</Flex>
40+
</>
41+
)
42+
}

‎examples/rsp-cra-18/src/sections/NavigationExamples.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {Flex, Divider, Breadcrumbs, Item, Link, Tabs, TabList, TabPanels} from '@adobe/react-spectrum';
2+
3+
export default function NavigationExamples() {
4+
return (
5+
<>
6+
<h2>Navigation</h2>
7+
<Flex direction="column" gap="size-125">
8+
<Divider />
9+
<Breadcrumbs>
10+
<Item key="home">Home</Item>
11+
<Item key="trendy">Trendy</Item>
12+
<Item key="march 2020 assets">March 2020 Assets</Item>
13+
</Breadcrumbs>
14+
<Link href="https://www.imdb.com/title/tt6348138/" target="_blank">
15+
The missing link.
16+
</Link>
17+
<Tabs aria-label="History of Ancient Rome">
18+
<TabList>
19+
<Item key="FoR">Founding of Rome</Item>
20+
<Item key="MaR">Monarchy and Republic</Item>
21+
<Item key="Emp">Empire</Item>
22+
</TabList>
23+
<TabPanels>
24+
<Item key="FoR">
25+
Arma virumque cano, Troiae qui primus ab oris.
26+
</Item>
27+
<Item key="MaR">
28+
Senatus Populusque Romanus.
29+
</Item>
30+
<Item key="Emp">
31+
Alea jacta est.
32+
</Item>
33+
</TabPanels>
34+
</Tabs>
35+
</Flex>
36+
</>
37+
);
38+
}

0 commit comments

Comments
 (0)