Skip to content

Commit 4045707

Browse files
jordmccordjordmccord
committed
refactor: new components
1 parent 6709093 commit 4045707

21 files changed

+921
-124
lines changed

‎packages/native-ui/docs/components/AllComponents.web.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
Switch,
2727
ToggleButton,
2828
ToggleButtonGroup,
29-
} from '@utilitywarehouse/native-ui';
29+
} from '../../';
3030
import {
3131
Actionsheet,
3232
Box,
@@ -36,14 +36,15 @@ import {
3636
CarouselPagination,
3737
Accordion,
3838
AccordionItem,
39-
} from '@utilitywarehouse/native-ui/lab';
39+
} from '../../src/lab';
4040
import {
4141
ElectricityMediumIcon,
4242
MobileMediumIcon,
4343
BroadbandMediumIcon,
4444
InsuranceMediumIcon,
4545
ChevronRightMediumIcon,
4646
} from '@utilitywarehouse/react-native-icons';
47+
import { StyleSheet } from 'react-native-unistyles';
4748

4849
const ComponentWrapper: React.FC<PropsWithChildren<{ name: string; link: string }>> = ({
4950
name,

‎packages/native-ui/src/components/Alert/Alert.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import AlertCloseButton, { AlertCloseButtonIcon } from './AlertCloseButton';
66
import type { AlertProps } from './Alert.props';
77
import { AlertContext } from './Alert.context';
88
import { StyleSheet } from 'react-native-unistyles';
9-
import { View, Pressable } from 'react-native';
9+
import { View, Pressable, ViewProps } from 'react-native';
1010
import AlertText from './AlertText';
1111
import AlertIcon from './AlertIcon';
1212

@@ -48,7 +48,7 @@ const Alert = forwardRef<View, AlertProps>(
4848
<Pressable
4949
ref={ref}
5050
{...props}
51-
style={[styles.container, style as ViewStyle]}
51+
style={[styles.container, style as ViewProps['style']]}
5252
onPress={onPress}
5353
disabled={!onPress}
5454
>

‎packages/native-ui/src/components/ToggleButton/ToggleButton.docs.mdx

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
2+
import * as Stories from './ToggleButton.stories';
3+
import {
4+
ToggleButton,
5+
ToggleButtonGroup,
6+
ToggleButtonIcon,
7+
ToggleButtonText,
8+
Box,
9+
Center,
10+
} from '../';
11+
import { BackToTopButton, UsageWrap } from '../../../docs/components';
12+
import { MoonSmallIcon, SunSmallIcon, StarSmallIcon } from '@utilitywarehouse/react-native-icons';
13+
14+
<Meta title="Components / Toggle Button" />
15+
16+
<BackToTopButton />
17+
18+
# ToggleButton
19+
20+
The `ToggleButton` component provides an interactive selection control where users can toggle between multiple options with a sliding indicator.
21+
22+
- [Playground](#playground)
23+
- [Usage](#usage)
24+
- [Props](#props)
25+
- [Advanced Usage](#advanced-usage)
26+
- [Examples](#examples)
27+
28+
## Playground
29+
30+
<Canvas of={Stories.Playground} />
31+
32+
<Controls of={Stories.Playground} />
33+
34+
## Usage
35+
36+
<UsageWrap>
37+
<Center>
38+
<Box width="100%" maxWidth={400}>
39+
<ToggleButtonGroup value="option1">
40+
<ToggleButton value="option1">Option 1</ToggleButton>
41+
<ToggleButton value="option2">Option 2</ToggleButton>
42+
<ToggleButton value="option3">Option 3</ToggleButton>
43+
</ToggleButtonGroup>
44+
</Box>
45+
</Center>
46+
</UsageWrap>
47+
48+
```tsx
49+
import { ToggleButton, ToggleButtonGroup } from '@utilitywarehouse/native-ui';
50+
51+
const MyComponent = () => {
52+
const [value, setValue] = useState('option1');
53+
54+
return (
55+
<ToggleButtonGroup value={value} onChange={setValue}>
56+
<ToggleButton value="option1">Option 1</ToggleButton>
57+
<ToggleButton value="option2">Option 2</ToggleButton>
58+
<ToggleButton value="option3">Option 3</ToggleButton>
59+
</ToggleButtonGroup>
60+
);
61+
};
62+
```
63+
64+
## Props
65+
66+
### ToggleButton Props
67+
68+
| Property | Type | Description | Default |
69+
| ---------- | ----------- | ---------------------------------- | ------- |
70+
| `value` | `any` | The value of the button (required) | - |
71+
| `children` | `ReactNode` | The text to display (required) | - |
72+
| `style` | `ViewStyle` | Additional styles for the button | - |
73+
| `disabled` | `boolean` | Whether the button is disabled | `false` |
74+
75+
### ToggleButtonGroup Props
76+
77+
| Property | Type | Description | Default |
78+
| ---------- | ---------------------- | ---------------------------------------- | --------- |
79+
| `value` | `any` | The currently selected value (required) | - |
80+
| `onChange` | `(value: any) => void` | Callback function when selection changes | - |
81+
| `style` | `ViewStyle` | Additional styles for the container | - |
82+
| `children` | `ReactNode` | The toggle button elements | - |
83+
| `disabled` | `boolean` | Whether the group is disabled | `false` |
84+
| `size` | `'small' \| 'base'` | The size of the toggle button | `'small'` |
85+
86+
### ToggleButtonIcon Props
87+
88+
| Property | Type | Description | Default |
89+
| -------- | ----------- | ------------------------------ | ------- |
90+
| `as` | `ReactNode` | The icon to display (required) | - |
91+
| `style` | `ViewStyle` | Additional styles for the icon | - |
92+
93+
### ToggleButtonText Props
94+
95+
| Property | Type | Description | Default |
96+
| -------- | ----------- | ------------------------------ | ------- |
97+
| `style` | `TextStyle` | Additional styles for the text | - |
98+
99+
## Advanced Usage
100+
101+
Although we do not recommend, you can use the `ToggleButton` component with icons and custom text styles.
102+
103+
<UsageWrap>
104+
<Center>
105+
<Box width="100%" maxWidth={400}>
106+
<ToggleButtonGroup value="sun">
107+
<ToggleButton value="sun">
108+
<ToggleButtonIcon as={SunSmallIcon} />
109+
<ToggleButtonText style={{ color: 'yellow' }}>Sun</ToggleButtonText>
110+
</ToggleButton>
111+
<ToggleButton value="star">
112+
<ToggleButtonIcon as={StarSmallIcon} />
113+
<ToggleButtonText style={{ color: 'orange' }}>Star</ToggleButtonText>
114+
</ToggleButton>
115+
<ToggleButton value="moon">
116+
<ToggleButtonIcon as={MoonSmallIcon} />
117+
<ToggleButtonText style={{ color: 'white' }}>Moon</ToggleButtonText>
118+
</ToggleButton>
119+
</ToggleButtonGroup>
120+
</Box>
121+
</Center>
122+
</UsageWrap>
123+
124+
```tsx
125+
import {
126+
ToggleButton,
127+
ToggleButtonGroup,
128+
ToggleButtonIcon,
129+
ToggleButtonText,
130+
} from '@utilitywarehouse/native-ui';
131+
import { MoonSmallIcon, SunSmallIcon, StarSmallIcon } from '@utilitywarehouse/react-native-icons';
132+
133+
const MyComponent = () => {
134+
const [value, setValue] = useState('sun');
135+
136+
return (
137+
<ToggleButtonGroup value={value} onChange={setValue}>
138+
<ToggleButton value="sun">
139+
<ToggleButtonIcon as={SunSmallIcon} />
140+
<ToggleButtonText style={{ color: 'yellow' }}>Sun</ToggleButtonText>
141+
</ToggleButton>
142+
<ToggleButton value="star">
143+
<ToggleButtonIcon as={StarSmallIcon} />
144+
<ToggleButtonText style={{ color: 'orange' }}>Star</ToggleButtonText>
145+
</ToggleButton>
146+
<ToggleButton value="moon">
147+
<ToggleButtonIcon as={MoonSmallIcon} />
148+
<ToggleButtonText style={{ color: 'white' }}>Moon</ToggleButtonText>
149+
</ToggleButton>
150+
</ToggleButtonGroup>
151+
);
152+
};
153+
```
154+
155+
## Examples
156+
157+
### Disabled
158+
159+
The `ToggleButton` can be disabled.
160+
161+
<Canvas of={Stories.Disabled} />
162+
163+
```tsx
164+
import { ToggleButton, ToggleButtonGroup } from '@utilitywarehouse/native-ui';
165+
166+
const MyComponent = () => {
167+
const [value, setValue] = useState('dark');
168+
169+
return (
170+
<ToggleButtonGroup value={value} onChange={setValue} disabled>
171+
<ToggleButton value="light" label="Light" />
172+
<ToggleButton value="dark" label="Dark" />
173+
</ToggleButtonGroup>
174+
);
175+
};
176+
```
177+
178+
## With Icons
179+
180+
The `ToggleButton` can be used with icons.
181+
182+
<Canvas of={Stories.Icons} />
183+
184+
```tsx
185+
import { ToggleButton, ToggleButtonGroup, ToggleButtonIcon } from '@utilitywarehouse/native-ui';
186+
import { EnvironmentMediumIcon, StarMediumIcon } from '@utilitywarehouse/native-icons';
187+
188+
const MyComponent = () => {
189+
const [value, setValue] = useState('light');
190+
191+
return (
192+
<Box width="100%" maxWidth={200}>
193+
<ToggleButtonGroup value={value} onChange={setValue}>
194+
<ToggleButton value="light">
195+
<ToggleButtonIcon as={EnvironmentMediumIcon} />
196+
</ToggleButton>
197+
<ToggleButton value="dark">
198+
<ToggleButtonIcon as={StarMediumIcon} />
199+
</ToggleButton>
200+
</ToggleButtonGroup>
201+
</Box>
202+
);
203+
};
204+
```

‎packages/native-ui/src/components/ToggleButton/ToggleButton.stories.tsx

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, { useState } from 'react';
2+
import { ToggleButton, ToggleButtonGroup } from '.';
3+
import { Meta, StoryObj } from '@storybook/react';
4+
import { VStack } from '../VStack';
5+
import { Box } from '../Box';
6+
import { Text } from '../Text';
7+
import ToggleButtonIcon from './ToggleButtonIcon';
8+
import { MoonSmallIcon, SunSmallIcon } from '@utilitywarehouse/react-native-icons';
9+
10+
const meta = {
11+
title: 'Stories / ToggleButton',
12+
component: ToggleButtonGroup,
13+
parameters: {
14+
layout: 'centered',
15+
},
16+
argTypes: {
17+
size: {
18+
options: ['small', 'base'],
19+
control: 'select',
20+
description: 'The size of the Toggle Buttons.',
21+
},
22+
disabled: {
23+
control: 'boolean',
24+
description: 'Disable the Toggle Buttons.',
25+
},
26+
},
27+
args: {
28+
size: 'small',
29+
disabled: false,
30+
},
31+
} satisfies Meta<typeof ToggleButtonGroup>;
32+
33+
export default meta;
34+
type Story = StoryObj<typeof meta>;
35+
36+
export const Playground: Story = {
37+
args: {
38+
value: 'day',
39+
},
40+
render: ({ value: val, ...args }) => {
41+
const [value, setValue] = useState(val);
42+
43+
return (
44+
<VStack space="lg">
45+
<Box width="100%" maxWidth={400}>
46+
<ToggleButtonGroup
47+
value={value}
48+
onChange={setValue}
49+
size={args.size}
50+
disabled={args.disabled}
51+
>
52+
<ToggleButton value="day">Day</ToggleButton>
53+
<ToggleButton value="week">Week</ToggleButton>
54+
<ToggleButton value="month">Month</ToggleButton>
55+
</ToggleButtonGroup>
56+
</Box>
57+
58+
<Text>Active selection: {value}</Text>
59+
</VStack>
60+
);
61+
},
62+
};
63+
64+
export const Disabled: Story = {
65+
args: {
66+
value: 'dark',
67+
},
68+
render: () => {
69+
const [value, setValue] = useState('dark');
70+
71+
return (
72+
<Box width="100%" maxWidth={200}>
73+
<ToggleButtonGroup value={value} onChange={setValue} disabled>
74+
<ToggleButton value="light">Light</ToggleButton>
75+
<ToggleButton value="dark">Dark</ToggleButton>
76+
</ToggleButtonGroup>
77+
</Box>
78+
);
79+
},
80+
};
81+
82+
export const Icons: Story = {
83+
args: {
84+
value: 'light',
85+
},
86+
render: () => {
87+
const [value, setValue] = useState('light');
88+
89+
return (
90+
<Box width="100%" maxWidth={300}>
91+
<ToggleButtonGroup value={value} onChange={setValue}>
92+
<ToggleButton value="light">
93+
<ToggleButtonIcon as={SunSmallIcon} />
94+
</ToggleButton>
95+
<ToggleButton value="dark">
96+
<ToggleButtonIcon as={MoonSmallIcon} />
97+
</ToggleButton>
98+
</ToggleButtonGroup>
99+
</Box>
100+
);
101+
},
102+
};

0 commit comments

Comments
 (0)