diff options
Diffstat (limited to 'src/view/screens/Storybook')
| -rw-r--r-- | src/view/screens/Storybook/Buttons.tsx | 41 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Dialogs.tsx | 51 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Icons.tsx | 9 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Links.tsx | 25 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Menus.tsx | 79 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Palette.tsx | 182 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Typography.tsx | 11 | ||||
| -rw-r--r-- | src/view/screens/Storybook/index.tsx | 3 |
8 files changed, 250 insertions, 151 deletions
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx index 320db13ff..ad2fff3f4 100644 --- a/src/view/screens/Storybook/Buttons.tsx +++ b/src/view/screens/Storybook/Buttons.tsx @@ -129,6 +129,15 @@ export function Buttons() { <ButtonIcon icon={Globe} position="left" /> <ButtonText>Link out</ButtonText> </Button> + + <Button + variant="gradient" + color="gradient_sky" + size="tiny" + label="Link out"> + <ButtonIcon icon={Globe} position="left" /> + <ButtonText>Link out</ButtonText> + </Button> </View> <View style={[a.flex_row, a.gap_md, a.align_start]}> @@ -149,6 +158,14 @@ export function Buttons() { <ButtonIcon icon={ChevronLeft} /> </Button> <Button + variant="gradient" + color="gradient_sunset" + size="tiny" + shape="round" + label="Link out"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + <Button variant="outline" color="primary" size="large" @@ -164,6 +181,14 @@ export function Buttons() { label="Link out"> <ButtonIcon icon={ChevronLeft} /> </Button> + <Button + variant="ghost" + color="primary" + size="tiny" + shape="round" + label="Link out"> + <ButtonIcon icon={ChevronLeft} /> + </Button> </View> <View style={[a.flex_row, a.gap_md, a.align_start]}> @@ -184,6 +209,14 @@ export function Buttons() { <ButtonIcon icon={ChevronLeft} /> </Button> <Button + variant="gradient" + color="gradient_sunset" + size="tiny" + shape="square" + label="Link out"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + <Button variant="outline" color="primary" size="large" @@ -199,6 +232,14 @@ export function Buttons() { label="Link out"> <ButtonIcon icon={ChevronLeft} /> </Button> + <Button + variant="ghost" + color="primary" + size="tiny" + shape="square" + label="Link out"> + <ButtonIcon icon={ChevronLeft} /> + </Button> </View> </View> ) diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx index db568c6bd..c2eaf19ac 100644 --- a/src/view/screens/Storybook/Dialogs.tsx +++ b/src/view/screens/Storybook/Dialogs.tsx @@ -9,7 +9,8 @@ import * as Prompt from '#/components/Prompt' import {useDialogStateControlContext} from '#/state/dialogs' export function Dialogs() { - const control = Dialog.useDialogControl() + const scrollable = Dialog.useDialogControl() + const basic = Dialog.useDialogControl() const prompt = Prompt.usePromptControl() const {closeAllDialogs} = useDialogStateControlContext() @@ -20,8 +21,31 @@ export function Dialogs() { color="secondary" size="small" onPress={() => { - control.open() + scrollable.open() prompt.open() + basic.open() + }} + label="Open basic dialog"> + Open all dialogs + </Button> + + <Button + variant="outline" + color="secondary" + size="small" + onPress={() => { + scrollable.open() + }} + label="Open basic dialog"> + Open scrollable dialog + </Button> + + <Button + variant="outline" + color="secondary" + size="small" + onPress={() => { + basic.open() }} label="Open basic dialog"> Open basic dialog @@ -44,13 +68,22 @@ export function Dialogs() { </Prompt.Description> <Prompt.Actions> <Prompt.Cancel>Cancel</Prompt.Cancel> - <Prompt.Action>Confirm</Prompt.Action> + <Prompt.Action onPress={() => {}}>Confirm</Prompt.Action> </Prompt.Actions> </Prompt.Outer> + <Dialog.Outer control={basic}> + <Dialog.Handle /> + + <Dialog.Inner label="test"> + <H3 nativeID="dialog-title">Dialog</H3> + <P nativeID="dialog-description">A basic dialog</P> + </Dialog.Inner> + </Dialog.Outer> + <Dialog.Outer - control={control} - nativeOptions={{sheet: {snapPoints: ['90%']}}}> + control={scrollable} + nativeOptions={{sheet: {snapPoints: ['100%']}}}> <Dialog.Handle /> <Dialog.ScrollableInner @@ -77,9 +110,13 @@ export function Dialogs() { variant="outline" color="primary" size="small" - onPress={() => control.close()} + onPress={() => + scrollable.close(() => { + console.log('CLOSED') + }) + } label="Open basic dialog"> - Close basic dialog + Close dialog </Button> </View> </View> diff --git a/src/view/screens/Storybook/Icons.tsx b/src/view/screens/Storybook/Icons.tsx index 73466e077..9d7dc0aa8 100644 --- a/src/view/screens/Storybook/Icons.tsx +++ b/src/view/screens/Storybook/Icons.tsx @@ -6,6 +6,7 @@ import {H1} from '#/components/Typography' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight' import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' +import {Loader} from '#/components/Loader' export function Icons() { const t = useTheme() @@ -36,6 +37,14 @@ export function Icons() { <CalendarDays size="lg" fill={t.atoms.text.color} /> <CalendarDays size="xl" fill={t.atoms.text.color} /> </View> + + <View style={[a.flex_row, a.gap_xl]}> + <Loader size="xs" fill={t.atoms.text.color} /> + <Loader size="sm" fill={t.atoms.text.color} /> + <Loader size="md" fill={t.atoms.text.color} /> + <Loader size="lg" fill={t.atoms.text.color} /> + <Loader size="xl" fill={t.atoms.text.color} /> + </View> </View> ) } diff --git a/src/view/screens/Storybook/Links.tsx b/src/view/screens/Storybook/Links.tsx index 2828e74bf..f9ecfba55 100644 --- a/src/view/screens/Storybook/Links.tsx +++ b/src/view/screens/Storybook/Links.tsx @@ -4,7 +4,7 @@ import {View} from 'react-native' import {useTheme, atoms as a} from '#/alf' import {ButtonText} from '#/components/Button' import {InlineLink, Link} from '#/components/Link' -import {H1, H3, Text} from '#/components/Typography' +import {H1, Text} from '#/components/Typography' export function Links() { const t = useTheme() @@ -13,26 +13,19 @@ export function Links() { <H1>Links</H1> <View style={[a.gap_md, a.align_start]}> - <InlineLink - to="https://bsky.social" - warnOnMismatchingTextChild - style={[a.text_md]}> - External + <InlineLink to="https://google.com" style={[a.text_lg]}> + https://google.com </InlineLink> - <InlineLink to="https://bsky.social" style={[a.text_md]}> - <H3>External with custom children</H3> + <InlineLink to="https://google.com" style={[a.text_lg]}> + External with custom children (google.com) </InlineLink> <InlineLink to="https://bsky.social" - warnOnMismatchingTextChild - style={[a.text_lg]}> - https://bsky.social + style={[a.text_md, t.atoms.text_contrast_low]}> + Internal (bsky.social) </InlineLink> - <InlineLink - to="https://bsky.app/profile/bsky.app" - warnOnMismatchingTextChild - style={[a.text_md]}> - Internal + <InlineLink to="https://bsky.app/profile/bsky.app" style={[a.text_md]}> + Internal (bsky.app) </InlineLink> <Link diff --git a/src/view/screens/Storybook/Menus.tsx b/src/view/screens/Storybook/Menus.tsx new file mode 100644 index 000000000..2f2b14721 --- /dev/null +++ b/src/view/screens/Storybook/Menus.tsx @@ -0,0 +1,79 @@ +import React from 'react' +import {View} from 'react-native' + +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import * as Menu from '#/components/Menu' +import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' +// import {useDialogStateControlContext} from '#/state/dialogs' + +export function Menus() { + const t = useTheme() + const menuControl = Menu.useMenuControl() + // const {closeAllDialogs} = useDialogStateControlContext() + + return ( + <View style={[a.gap_md]}> + <View style={[a.flex_row, a.align_start]}> + <Menu.Root control={menuControl}> + <Menu.Trigger label="Open basic menu"> + {({state, props}) => { + return ( + <Text + {...props} + style={[ + a.py_sm, + a.px_md, + a.rounded_sm, + t.atoms.bg_contrast_50, + (state.hovered || state.focused || state.pressed) && [ + t.atoms.bg_contrast_200, + ], + ]}> + Open + </Text> + ) + }} + </Menu.Trigger> + + <Menu.Outer> + <Menu.Group> + <Menu.Item label="Click me" onPress={() => {}}> + <Menu.ItemIcon icon={Search} /> + <Menu.ItemText>Click me</Menu.ItemText> + </Menu.Item> + + <Menu.Item + label="Another item" + onPress={() => menuControl.close()}> + <Menu.ItemText>Another item</Menu.ItemText> + </Menu.Item> + </Menu.Group> + + <Menu.Divider /> + + <Menu.Group> + <Menu.Item label="Click me" onPress={() => {}}> + <Menu.ItemIcon icon={Search} /> + <Menu.ItemText>Click me</Menu.ItemText> + </Menu.Item> + + <Menu.Item + label="Another item" + onPress={() => menuControl.close()}> + <Menu.ItemText>Another item</Menu.ItemText> + </Menu.Item> + </Menu.Group> + + <Menu.Divider /> + + <Menu.Item label="Click me" onPress={() => {}}> + <Menu.ItemIcon icon={Search} /> + <Menu.ItemText>Click me</Menu.ItemText> + </Menu.Item> + </Menu.Outer> + </Menu.Root> + </View> + </View> + ) +} diff --git a/src/view/screens/Storybook/Palette.tsx b/src/view/screens/Storybook/Palette.tsx index b521fe860..42000aa81 100644 --- a/src/view/screens/Storybook/Palette.tsx +++ b/src/view/screens/Storybook/Palette.tsx @@ -1,179 +1,185 @@ import React from 'react' import {View} from 'react-native' -import * as tokens from '#/alf/tokens' -import {atoms as a} from '#/alf' +import {atoms as a, useTheme} from '#/alf' export function Palette() { + const t = useTheme() return ( <View style={[a.gap_md]}> <View style={[a.flex_row, a.gap_md]}> - <View - style={[a.flex_1, {height: 60, backgroundColor: tokens.color.gray_0}]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_25}, - ]} - /> + <View style={[a.flex_1, t.atoms.bg_contrast_25, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_50, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_200, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_300, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_400, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_500, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_600, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_700, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_800, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_900, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_950, {height: 60}]} /> + <View style={[a.flex_1, t.atoms.bg_contrast_975, {height: 60}]} /> + </View> + + <View style={[a.flex_row, a.gap_md]}> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_50}, + {height: 60, backgroundColor: t.palette.primary_25}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_100}, + {height: 60, backgroundColor: t.palette.primary_50}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_200}, + {height: 60, backgroundColor: t.palette.primary_100}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_300}, + {height: 60, backgroundColor: t.palette.primary_200}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_400}, + {height: 60, backgroundColor: t.palette.primary_300}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_500}, + {height: 60, backgroundColor: t.palette.primary_400}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_600}, + {height: 60, backgroundColor: t.palette.primary_500}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_700}, + {height: 60, backgroundColor: t.palette.primary_600}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_800}, + {height: 60, backgroundColor: t.palette.primary_700}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_900}, + {height: 60, backgroundColor: t.palette.primary_800}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_950}, + {height: 60, backgroundColor: t.palette.primary_900}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_975}, + {height: 60, backgroundColor: t.palette.primary_950}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_1000}, + {height: 60, backgroundColor: t.palette.primary_975}, ]} /> </View> - <View style={[a.flex_row, a.gap_md]}> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_25}, + {height: 60, backgroundColor: t.palette.positive_25}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_50}, + {height: 60, backgroundColor: t.palette.positive_50}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_100}, + {height: 60, backgroundColor: t.palette.positive_100}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_200}, + {height: 60, backgroundColor: t.palette.positive_200}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_300}, + {height: 60, backgroundColor: t.palette.positive_300}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_400}, + {height: 60, backgroundColor: t.palette.positive_400}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_500}, + {height: 60, backgroundColor: t.palette.positive_500}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_600}, + {height: 60, backgroundColor: t.palette.positive_600}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_700}, + {height: 60, backgroundColor: t.palette.positive_700}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_800}, + {height: 60, backgroundColor: t.palette.positive_800}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_900}, + {height: 60, backgroundColor: t.palette.positive_900}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_950}, + {height: 60, backgroundColor: t.palette.positive_950}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_975}, + {height: 60, backgroundColor: t.palette.positive_975}, ]} /> </View> @@ -181,153 +187,79 @@ export function Palette() { <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.green_25}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_50}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_100}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_200}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_300}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_400}, + {height: 60, backgroundColor: t.palette.negative_25}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.green_500}, + {height: 60, backgroundColor: t.palette.negative_50}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.green_600}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_700}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_800}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_900}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_950}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_975}, - ]} - /> - </View> - <View style={[a.flex_row, a.gap_md]}> - <View - style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_25}]} - /> - <View - style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_50}]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.red_100}, + {height: 60, backgroundColor: t.palette.negative_100}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_200}, + {height: 60, backgroundColor: t.palette.negative_200}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_300}, + {height: 60, backgroundColor: t.palette.negative_300}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_400}, + {height: 60, backgroundColor: t.palette.negative_400}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_500}, + {height: 60, backgroundColor: t.palette.negative_500}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_600}, + {height: 60, backgroundColor: t.palette.negative_600}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_700}, + {height: 60, backgroundColor: t.palette.negative_700}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_800}, + {height: 60, backgroundColor: t.palette.negative_800}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_900}, + {height: 60, backgroundColor: t.palette.negative_900}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_950}, + {height: 60, backgroundColor: t.palette.negative_950}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_975}, + {height: 60, backgroundColor: t.palette.negative_975}, ]} /> </View> diff --git a/src/view/screens/Storybook/Typography.tsx b/src/view/screens/Storybook/Typography.tsx index 5d3a96f4d..f0d67c528 100644 --- a/src/view/screens/Storybook/Typography.tsx +++ b/src/view/screens/Storybook/Typography.tsx @@ -8,7 +8,9 @@ import {RichText} from '#/components/RichText' export function Typography() { return ( <View style={[a.gap_md]}> - <Text style={[a.text_5xl]}>atoms.text_5xl</Text> + <Text selectable style={[a.text_5xl]}> + atoms.text_5xl + </Text> <Text style={[a.text_4xl]}>atoms.text_4xl</Text> <Text style={[a.text_3xl]}>atoms.text_3xl</Text> <Text style={[a.text_2xl]}>atoms.text_2xl</Text> @@ -20,11 +22,14 @@ export function Typography() { <Text style={[a.text_2xs]}>atoms.text_2xs</Text> <RichText - resolveFacets + // TODO: This only supports already resolved facets. + // Resolving them on read is bad anyway. value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`} /> <RichText - resolveFacets + selectable + // TODO: This only supports already resolved facets. + // Resolving them on read is bad anyway. value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`} style={[a.text_xl]} /> diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index 40929555e..3a2e2f369 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -16,6 +16,7 @@ import {Dialogs} from './Dialogs' import {Breakpoints} from './Breakpoints' import {Shadows} from './Shadows' import {Icons} from './Icons' +import {Menus} from './Menus' export function Storybook() { const t = useTheme() @@ -66,6 +67,7 @@ export function Storybook() { </Button> </View> + <Dialogs /> <ThemeProvider theme="light"> <Theming /> </ThemeProvider> @@ -84,6 +86,7 @@ export function Storybook() { <Links /> <Forms /> <Dialogs /> + <Menus /> <Breakpoints /> </View> </CenteredView> |