Skip to content

Commit 6709093

Browse files
jordmccordjordmccord
committed
Merge branch 'main' into unistyles-3
2 parents 3b1e7ab + c2bd615 commit 6709093

File tree

224 files changed

+4554
-11741
lines changed

Some content is hidden

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

224 files changed

+4554
-11741
lines changed

‎.changeset/shaggy-cows-jam.md

-5
This file was deleted.

‎.changeset/tasty-melons-provide.md

-5
This file was deleted.

‎apps/native-ui-storybook/components/ToggleButton/ToggleButton.docs.mdx

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

‎apps/native-ui-storybook/components/ToggleButton/ToggleButton.stories.tsx

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

0 commit comments

Comments
 (0)