Paul Frazee
96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {CenteredView, ScrollView} from '#/view/com/util/Views'
|
|
|
|
import {atoms as a, useTheme, ThemeProvider} from '#/alf'
|
|
import {useSetThemePrefs} from '#/state/shell'
|
|
import {Button} from '#/components/Button'
|
|
|
|
import {Theming} from './Theming'
|
|
import {Typography} from './Typography'
|
|
import {Spacing} from './Spacing'
|
|
import {Buttons} from './Buttons'
|
|
import {Links} from './Links'
|
|
import {Forms} from './Forms'
|
|
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()
|
|
const {setColorMode, setDarkTheme} = useSetThemePrefs()
|
|
|
|
return (
|
|
<ScrollView>
|
|
<CenteredView style={[t.atoms.bg]}>
|
|
<View style={[a.p_xl, a.gap_5xl, {paddingBottom: 200}]}>
|
|
<View style={[a.flex_row, a.align_start, a.gap_md]}>
|
|
<Button
|
|
variant="outline"
|
|
color="primary"
|
|
size="small"
|
|
label='Set theme to "system"'
|
|
onPress={() => setColorMode('system')}>
|
|
System
|
|
</Button>
|
|
<Button
|
|
variant="solid"
|
|
color="secondary"
|
|
size="small"
|
|
label='Set theme to "light"'
|
|
onPress={() => setColorMode('light')}>
|
|
Light
|
|
</Button>
|
|
<Button
|
|
variant="solid"
|
|
color="secondary"
|
|
size="small"
|
|
label='Set theme to "dim"'
|
|
onPress={() => {
|
|
setColorMode('dark')
|
|
setDarkTheme('dim')
|
|
}}>
|
|
Dim
|
|
</Button>
|
|
<Button
|
|
variant="solid"
|
|
color="secondary"
|
|
size="small"
|
|
label='Set theme to "dark"'
|
|
onPress={() => {
|
|
setColorMode('dark')
|
|
setDarkTheme('dark')
|
|
}}>
|
|
Dark
|
|
</Button>
|
|
</View>
|
|
|
|
<Dialogs />
|
|
<ThemeProvider theme="light">
|
|
<Theming />
|
|
</ThemeProvider>
|
|
<ThemeProvider theme="dim">
|
|
<Theming />
|
|
</ThemeProvider>
|
|
<ThemeProvider theme="dark">
|
|
<Theming />
|
|
</ThemeProvider>
|
|
|
|
<Typography />
|
|
<Spacing />
|
|
<Shadows />
|
|
<Buttons />
|
|
<Icons />
|
|
<Links />
|
|
<Forms />
|
|
<Dialogs />
|
|
<Menus />
|
|
<Breakpoints />
|
|
</View>
|
|
</CenteredView>
|
|
</ScrollView>
|
|
)
|
|
}
|